:root{--bg:#0e0b14;--pn:#17121f;--ln:#5b4b7a;--tx:#e6dfd0;--ac:#ffb347;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
html{height:100%;scroll-padding-top:env(safe-area-inset-top,0px)}
body{height:100%;margin:0;background:#0e0b14;color:var(--tx);font-family:ui-monospace,'Courier New',monospace;overflow:hidden;touch-action:none;user-select:none;display:grid;place-items:center}
canvas{width:min(100vw,calc(100vh*16/9));aspect-ratio:16/9;image-rendering:pixelated;background:#0e0b14}
#ov{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(8,5,14,.84);z-index:5}
.p{background:var(--pn);border:2px solid var(--ln);padding:14px 20px;min-width:230px;max-width:92vw;max-height:86vh;overflow:auto;text-align:center;box-shadow:0 0 0 2px #000,6px 6px 0 #000}
.p h1{margin:0 0 4px;font-size:34px;letter-spacing:5px;color:var(--ac);text-shadow:3px 3px 0 #6b1f2b}
.p h2{margin:0 0 8px;color:var(--ac)}.p p,.p td{font-size:14px;color:#b9b0c8;margin:4px 0}.p td{padding:2px 8px;text-align:left}
button{font:inherit;font-size:16px;background:#221a30;color:var(--tx);border:2px solid var(--ln);padding:7px 14px;margin:3px;cursor:pointer;min-width:170px}
button:hover,button:focus-visible{border-color:var(--ac);color:var(--ac);outline:none}button:disabled{opacity:.4;cursor:default}
#tc{display:none;position:fixed;inset:0;pointer-events:none;z-index:4}
#js{position:absolute;left:18px;bottom:calc(22px + env(safe-area-inset-bottom,0px));width:110px;height:110px;border:2px solid #5b4b7a88;border-radius:50%;pointer-events:auto}
#kn{position:absolute;left:35px;top:35px;width:40px;height:40px;border-radius:50%;background:#5b4b7aaa}
#tc b{position:absolute;pointer-events:auto;width:56px;height:56px;border:2px solid #5b4b7a;background:#221a30cc;color:var(--tx);display:grid;place-items:center;font-size:13px;border-radius:50%}
#bA{right:20px;bottom:calc(60px + env(safe-area-inset-bottom,0px));width:70px!important;height:70px!important;border-color:#ffb347!important}#bR{right:100px;bottom:calc(30px + env(safe-area-inset-bottom,0px))}#bE{right:100px;bottom:calc(100px + env(safe-area-inset-bottom,0px))}#bP{right:20px;bottom:calc(140px + env(safe-area-inset-bottom,0px))}

#bH{right:100px;bottom:calc(170px + env(safe-area-inset-bottom,0px))}
#ov{background:rgba(2,8,18,.78);animation:fi .18s ease-out}
#ov.m{background:linear-gradient(90deg,rgba(2,8,18,.82) 0,rgba(2,8,18,.35) 45%,transparent 75%);justify-content:flex-start;padding-left:max(6vw,env(safe-area-inset-left,0px))}
@keyframes fi{from{opacity:0}to{opacity:1}}@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.p{background:#0b1630;border:0;color:#d8e6f0;box-shadow:0 0 0 2px #030814,0 0 0 4px #2a5a7a,0 0 0 6px #030814,0 14px 40px #000a;animation:rise .2s ease-out}
.p h1{color:#e8f4ff;text-shadow:0 0 14px #3ad88a88,3px 3px 0 #030814}.p h2{color:#ffd890;letter-spacing:3px;font-size:22px;margin:0 0 10px}.p p,.p td{color:#9ab0c8}
.p button{display:block;margin:6px auto;min-width:190px;background:transparent;border:0;border-bottom:1px solid #2a5a7a;padding:9px 18px;color:#d8e6f0;letter-spacing:2px;font-size:15px;transition:all .12s}
.p button:hover,.p button:focus-visible{color:#7ff6ff;border-color:#7ff6ff;background:linear-gradient(90deg,transparent,rgba(127,246,255,.1),transparent);letter-spacing:3px}.p button:active{transform:translateY(1px)}
.mm{animation:rise .5s ease-out;text-align:left}
.lg{font-size:clamp(32px,8vw,64px);letter-spacing:.14em;color:#e8f4ff;text-shadow:0 0 18px #3ad88a88,3px 3px 0 #0a2a40,6px 6px 0 #030814;font-weight:700;line-height:1}
.sb{color:#6fd8b8;letter-spacing:.25em;font-size:12px;margin:8px 0 26px}
.mb{display:block;background:none;border:0;color:#9ab8d0;font-size:clamp(15px,3.2vw,20px);letter-spacing:.2em;padding:7px 0 7px 22px;min-width:0;text-align:left;position:relative;transition:all .15s}
.mb::before{content:'';position:absolute;left:4px;top:50%;width:6px;height:6px;margin-top:-3px;background:#7ff6ff;transform:rotate(45deg) scale(0);transition:transform .15s}
.mb:hover,.mb:focus-visible{color:#fff;padding-left:30px;outline:none;border:0}.mb:hover::before,.mb:focus-visible::before{transform:rotate(45deg) scale(1)}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}