html,body{margin:0;height:100%;overflow:hidden;background:#8fd3f4;font-family:Avenir Next,Segoe UI,Frutiger,system-ui,sans-serif;color:#0b3a5c}#app canvas{display:block;width:100vw;height:100vh}.overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at center,#ffffff26,#0a3c6e59);transition:opacity .6s ease}.overlay.hidden{opacity:0;pointer-events:none}.glass{position:relative;background:linear-gradient(180deg,#ffffffb8,#dcf5ff73);border:1px solid rgba(255,255,255,.9);box-shadow:0 10px 40px #003c7859,inset 0 1px #fff,inset 0 -8px 20px #78c8ff40;backdrop-filter:blur(10px) saturate(1.4);-webkit-backdrop-filter:blur(10px) saturate(1.4)}.panel{width:min(460px,calc(100vw - 32px));padding:36px 32px 28px;border-radius:28px;text-align:center;overflow:hidden}.panel .gloss{position:absolute;left:-10%;right:-10%;top:-60%;height:100%;border-radius:50%;background:linear-gradient(180deg,#ffffffd9,#fff0);pointer-events:none}.panel h1{position:relative;margin:0;font-size:40px;font-weight:600;letter-spacing:.5px;background:linear-gradient(180deg,#1d8fd8,#0a4f8a);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 2px 0 rgba(255,255,255,.9))}.panel .sub{position:relative;margin:6px 0 24px;color:#2f6f93;font-size:15px}.aqua-btn{position:relative;font:inherit;font-size:20px;font-weight:600;color:#fff;padding:12px 54px;border-radius:999px;border:1px solid #1a7d2f;cursor:pointer;text-shadow:0 1px 2px rgba(0,60,0,.5);background:linear-gradient(180deg,#ffffffbf,#ffffff26 50%,#fff0 51%),linear-gradient(180deg,#7ee06b,#2fa53a);box-shadow:0 4px 14px #1e8c2873,inset 0 -3px 8px #00500040;transition:transform .15s ease,filter .15s ease}.aqua-btn:hover{transform:translateY(-1px) scale(1.03);filter:brightness(1.08)}.aqua-btn:active{transform:translateY(1px) scale(.99)}.keys{position:relative;margin-top:24px;display:grid;grid-template-columns:1fr 1fr;gap:6px 14px;font-size:13px;color:#2f6f93;text-align:left}.keys b{color:#0b4f80;font-weight:600;margin-right:4px}#hud{position:fixed;top:16px;left:16px;pointer-events:none;transition:opacity .6s}#hud.hidden{opacity:0}.pill{display:flex;align-items:center;gap:8px;padding:7px 16px 7px 10px;border-radius:999px;font-size:14px;font-weight:600}.pill .dot{width:14px;height:14px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#4cc3ff 45%,#0a6fb5);box-shadow:0 0 6px #4cc3ffcc}