:root{--ink:#eef1f6;--dim:#9aa3b2;--warm:#ffc46b;--warm-deep:#ff9d3c;--cool:#7cc4ff;--glass:rgba(16,19,28,.55);--glass-2:rgba(16,19,28,.78);--line:rgba(158,178,210,.16);--r-lg:18px;--r-md:14px;--shadow:0 18px 60px rgba(0,0,0,.55),0 2px 8px rgba(0,0,0,.4);--font:ui-sans-serif,system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}*{box-sizing:border-box}html,body{margin:0;height:100%;background:#04060c;overflow:hidden;font-family:var(--font);color:var(--ink);-webkit-font-smoothing:antialiased}#stage,#app{position:fixed;inset:0}#stage{display:block}#app canvas{display:block;outline:none;touch-action:none;position:absolute;inset:0;width:100%;height:100%}#app:after{content:"";position:fixed;inset:0;pointer-events:none;z-index:2;background:radial-gradient(125% 95% at 50% 42%,transparent 60%,rgba(2,4,9,.42) 100%);mix-blend-mode:multiply}#app:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:2;opacity:.05;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence baseFrequency='.9' numOctaves='2'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='.55'/></svg>")}#hud{position:absolute;top:22px;left:24px;z-index:6;display:flex;flex-direction:column;gap:10px;-webkit-user-select:none;user-select:none;pointer-events:none}.brand{display:flex;align-items:center;gap:9px;font-size:13px;letter-spacing:.32em;text-transform:uppercase;color:#eef1f6d1;text-shadow:0 2px 12px rgba(0,0,0,.7)}.brand-dot{width:9px;height:9px;border-radius:50%;background:radial-gradient(circle at 32% 30%,#fff8e8,var(--warm-deep));box-shadow:0 0 12px var(--warm),0 0 34px #ff9d3c73;animation:breathe 4s ease-in-out infinite}.status{display:flex;align-items:center;gap:8px;font-size:11px;letter-spacing:.14em;text-transform:lowercase;color:var(--dim)}#led{width:7px;height:7px;border-radius:50%;background:#3a4152;box-shadow:0 0 0 1px #ffffff14;transition:background .45s,box-shadow .45s}#led.on{background:var(--warm);box-shadow:0 0 10px var(--warm),0 0 26px #ff9d3c80}#led.cool{background:var(--cool);box-shadow:0 0 10px var(--cool),0 0 26px #7cc4ff80}@keyframes breathe{0%,to{transform:scale(1);opacity:.85}50%{transform:scale(1.18);opacity:1}}.privacy-pill{pointer-events:auto;width:max-content;padding:4px 10px;border-radius:999px;border:1px solid var(--line);background:#0a0e1680;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:#7f93ad}body.embedded #dock{display:none}body.embedded.mobile-mode #app{position:fixed;inset:0;transform:none;width:100%;height:100%;border-radius:0;box-shadow:none}body.embedded #loader{position:absolute}#dock{position:fixed;left:50%;bottom:26px;transform:translate(-50%);z-index:6;display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:var(--r-lg);background:var(--glass);border:1px solid var(--line);backdrop-filter:blur(16px) saturate(1.2);-webkit-backdrop-filter:blur(16px) saturate(1.2);box-shadow:var(--shadow);-webkit-user-select:none;user-select:none}#dock .key{position:relative;display:flex;align-items:center;gap:8px;height:44px;padding:0 14px;border-radius:var(--r-md);border:1px solid transparent;background:transparent;color:var(--dim);font-family:var(--font);font-size:13px;letter-spacing:.04em;cursor:pointer;transition:all .28s cubic-bezier(.2,.8,.2,1)}#dock .key svg{width:22px;height:22px;flex:0 0 auto;transition:transform .4s cubic-bezier(.2,.8,.2,1)}#dock .key:hover{color:var(--ink);background:#a0b9ff12}#dock .key:hover svg{transform:translateY(-1px)}#dock .key.small{width:44px;padding:0;justify-content:center}#dock .key[aria-pressed=true]{color:#fff6e6;background:linear-gradient(180deg,#ffbe6e33,#ff9d3c12);border-color:#ffc46b80;box-shadow:0 0 18px #ff9d3c52 inset,0 4px 18px #ff9d3c29}#dock .key.small:disabled{opacity:.4;cursor:not-allowed}#dock .sep{width:1px;height:26px;margin:0 2px;background:var(--line)}.key:after{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(120% 120% at 50% 0,rgba(255,255,255,.35),transparent 55%);opacity:0;transition:opacity .3s;pointer-events:none;mix-blend-mode:overlay}.key:hover:after{opacity:.3}#loader{position:fixed;inset:0;z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;background:radial-gradient(140% 100% at 50% 38%,#0f1524,#05070e 60%,#03050a);transition:opacity .9s ease,visibility .9s}#loader.hidden{opacity:0;visibility:hidden}.l-ring{width:54px;height:54px;border-radius:50%;border:2px solid rgba(255,196,107,.14);border-top-color:var(--warm);animation:spin 1.3s linear infinite}.l-text{font-size:12px;letter-spacing:.28em;text-transform:lowercase;color:var(--dim)}@keyframes spin{to{transform:rotate(360deg)}}@media(max-width:700px){#dock{transform:translate(-50%) scale(.92);bottom:14px}#dock .key{height:40px;padding:0 10px;font-size:12px}#hud{top:12px;left:14px}}body.mobile-mode #app{position:fixed;inset:50% auto auto 50%;transform:translate(-50%,-52%);width:min(92vw,calc((100vh - 130px)*.5625));height:min(calc(100vh - 60px),calc(92vw / .5625));border-radius:30px;overflow:hidden;box-shadow:0 40px 140px #0009,0 0 0 1px #96b4dc2e,0 0 0 9px #080b12eb}body.mobile-mode #hud{top:16px;left:16px}@media(max-width:860px){body.mobile-mode #app{transform:none;left:0;top:0;border-radius:0;width:100vw;height:calc(100dvh - 70px);box-shadow:none}}#info-card{position:fixed;z-index:9;min-width:210px;max-width:258px;padding:12px 14px 11px;border-radius:14px;background:#0a0e16d1;border:1px solid rgba(150,180,220,.22);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 18px 50px #00000080;color:#e8eef6;font-family:var(--font);opacity:0;transform:translateY(6px) scale(.98);pointer-events:none;transition:opacity .22s ease,transform .22s ease}#info-card.on{opacity:1;transform:none;pointer-events:auto}#ic-x{position:absolute;top:6px;right:8px;width:22px;height:22px;border:0;background:transparent;color:#8fa0b8;font-size:15px;cursor:pointer;border-radius:6px}#ic-x:hover{color:#fff;background:#ffffff14}.ic-t{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:#a8c4e8;padding:2px 22px 8px 2px;border-bottom:1px solid rgba(150,180,220,.16);margin-bottom:7px}.ic-r{display:flex;justify-content:space-between;gap:14px;padding:3.5px 0;font-size:11px}.ic-r span{color:#7387a3;letter-spacing:.12em;font-size:9.5px;padding-top:2px}.ic-r b{color:#eef3fa;font-weight:600;text-align:right;font-variant-numeric:tabular-nums}body.tap-ready #app canvas{cursor:default}