*{box-sizing:border-box}html,body{margin:0;padding:0;height:100%;overflow:hidden;background:#05070c;color:#dfe9f7;font-family:Rajdhani,Segoe UI,system-ui,-apple-system,sans-serif;user-select:none;-webkit-user-select:none}canvas{display:block;position:absolute;inset:0}#gl{z-index:1;cursor:crosshair}#hud{z-index:2;pointer-events:none}#overlay{position:absolute;inset:0;z-index:3;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at 50% 40%,#0a1e3c8c,#020408eb 70%),#0204088c;backdrop-filter:blur(3px)}.panel{display:none;flex-direction:column;align-items:center;gap:12px;min-width:380px;padding:38px 44px;border:1px solid rgba(120,190,255,.22);border-radius:4px;background:linear-gradient(180deg,#0c1422f0,#060a12f5);box-shadow:0 0 60px #0078ff1f,inset 0 0 60px #003c8c14;animation:pop .18s ease-out}.panel.show{display:flex}.panel.wide{min-width:560px}@keyframes pop{0%{opacity:0;transform:translateY(8px) scale(.99)}to{opacity:1;transform:none}}.logo{font-size:62px;font-weight:700;letter-spacing:6px;line-height:1;margin-bottom:2px}.logo-neon{color:#6fe3ff;text-shadow:0 0 24px rgba(80,210,255,.75)}.logo-breach{color:#ff4d6d;text-shadow:0 0 24px rgba(255,60,100,.6)}.tagline{color:#7f9ab8;font-size:15px;letter-spacing:1px;margin-bottom:14px;text-align:center;max-width:420px}h2{margin:0 0 12px;font-size:30px;font-weight:700;letter-spacing:5px;color:#cfe6ff}h2.dead{color:#ff5f6d;text-shadow:0 0 22px rgba(255,60,80,.5)}h3{margin:18px 0 6px;font-size:15px;letter-spacing:3px;color:#7fd0ff;align-self:flex-start}.btn{width:100%;min-width:260px;padding:12px 22px;font:inherit;font-size:17px;font-weight:700;letter-spacing:3px;color:#cfe0f5;background:#ffffff0a;border:1px solid rgba(140,200,255,.25);border-radius:3px;cursor:pointer;transition:background .12s,color .12s,border-color .12s,transform .08s}.btn:hover{background:#6ec8ff24;color:#fff;border-color:#6fd0ff}.btn:active{transform:translateY(1px)}.btn.primary{color:#04121c;background:linear-gradient(180deg,#7fe3ff,#3aa8de);border-color:#9beeff;text-shadow:none}.btn.primary:hover{background:linear-gradient(180deg,#a5eeff,#4dc0f5);color:#02090f}.btn.danger{border-color:#ff5a6e66;color:#ff8f9c}.btn.danger:hover{background:#ff465a29;color:#fff;border-color:#ff6b7d}.record{margin-top:10px;color:#7f9ab8;font-size:15px;letter-spacing:1px}.record b{color:#ffd166}.hint{color:#55677d;font-size:13px;letter-spacing:1px}.row{display:grid;grid-template-columns:220px 1fr 64px;align-items:center;gap:14px;width:100%;padding:5px 0}.row label{color:#a8bed6;font-size:15px;letter-spacing:1px}.row .val{color:#7fd0ff;font-size:14px;text-align:right;font-variant-numeric:tabular-nums}input[type=range]{-webkit-appearance:none;appearance:none;height:4px;background:#8cc8ff33;border-radius:2px;outline:none}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:#7fe3ff;cursor:pointer;box-shadow:0 0 8px #50d2ffcc}input[type=range]::-moz-range-thumb{width:14px;height:14px;border:none;border-radius:50%;background:#7fe3ff;cursor:pointer}input[type=checkbox]{width:16px;height:16px;accent-color:#4fc3f7;cursor:pointer}.keys{display:flex;flex-direction:column;gap:8px;width:100%}.keys>div{display:flex;align-items:center;gap:6px;color:#9fb6d0;font-size:15px}.keys span{margin-left:10px;color:#7f9ab8}kbd{display:inline-block;min-width:30px;padding:3px 8px;font:600 13px/1 Rajdhani,system-ui,sans-serif;text-align:center;color:#dff1ff;background:#ffffff0f;border:1px solid rgba(150,200,255,.3);border-bottom-width:2px;border-radius:3px}.tips{margin:0;padding-left:20px;color:#90a8c2;font-size:14px;line-height:1.7;align-self:flex-start}.tips li::marker{color:#4fc3f7}.stats{display:grid;grid-template-columns:1fr 1fr;gap:8px 26px;width:100%;margin-bottom:16px}.stats>div{display:flex;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.07);padding:5px 0}.stats span{color:#7f9ab8;font-size:14px;letter-spacing:1px}.stats b{color:#eaf4ff;font-size:16px}#fatal{display:none;position:absolute;inset:0;z-index:9;align-items:center;justify-content:center;background:#05070c}.fatal-box{max-width:480px;text-align:center;padding:30px;border:1px solid rgba(255,90,90,.35)}.fatal-box p{color:#a8bed6;line-height:1.6}.hidden{display:none}#rotate{display:none;position:fixed;inset:0;z-index:5;background:#05070c;align-items:center;justify-content:center;text-align:center;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}#rotate.show{display:flex}.rotate-box{max-width:420px;padding:24px}.rotate-icon{font-size:64px;color:#6fe3ff;text-shadow:0 0 24px rgba(80,210,255,.6)}.rotate-box h2{color:#cfe6ff;letter-spacing:3px;margin:12px 0 6px}.rotate-box p{color:#7f9ab8}.panel{max-height:calc(100dvh - 24px);overflow-y:auto;overscroll-behavior:contain}.row-note{margin:-6px 0 6px;width:100%;font-size:13px;color:#7f9ab8}.panel select{background:#ffffff0f;color:#cfe0f5;border:1px solid rgba(140,190,240,.28);border-radius:4px;padding:4px 6px;font:inherit}.panel select:focus{outline:none;border-color:#6fd0ff}:root{--sa-t: env(safe-area-inset-top, 0px);--sa-r: env(safe-area-inset-right, 0px);--sa-b: env(safe-area-inset-bottom, 0px);--sa-l: env(safe-area-inset-left, 0px)}canvas{touch-action:none}#gl,#hud{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}