:root{--ink: #e8f0f6;--dim: #8fa6b8;--line: rgba(140, 220, 255, .16);--panel: rgba(8, 12, 18, .82);--accent: #6cffb0;--mono: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;--ui: "Inter", -apple-system, "Helvetica Neue", system-ui, sans-serif}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;padding:0;height:100%;overflow:hidden;background:#05070a;color:var(--ink);font-family:var(--ui);overscroll-behavior:none;touch-action:none}#app{position:fixed;inset:0;height:100dvh}#feed,#hud{position:absolute;inset:0;display:block;width:100%;height:100%}#hud{pointer-events:none}#controls{position:absolute;inset:0;pointer-events:none}.touch{position:absolute;inset:0;display:none}body.showpad .touch{display:block}body:not(.playing) .touch{display:none}.stick{position:absolute;left:max(16px,env(safe-area-inset-left));bottom:max(18px,env(safe-area-inset-bottom));width:132px;height:132px;border-radius:50%;background:radial-gradient(circle at 50% 45%,#14222e9e,#060a10b8);border:1px solid var(--line);pointer-events:auto;touch-action:none;backdrop-filter:blur(6px)}.stick.on{border-color:#6cffb080}.stick-ring{position:absolute;inset:18px;border-radius:50%;border:1px dashed rgba(150,205,235,.22)}.stick-knob{position:absolute;left:50%;top:50%;width:54px;height:54px;margin:-27px 0 0 -27px;border-radius:50%;background:linear-gradient(180deg,#dbe8f2,#93a9ba);box-shadow:0 6px 16px #0000008c,inset 0 -2px 6px #0000004d;transition:transform .06s linear}.stick-hint{position:absolute;left:0;right:0;bottom:8px;text-align:center;font:700 9px/1 var(--mono);letter-spacing:.14em;color:#a0c8e18c}.dpad{position:absolute;left:168px;bottom:max(22px,env(safe-area-inset-bottom));display:grid;grid-template-columns:repeat(3,44px);grid-template-rows:repeat(3,40px);gap:4px;pointer-events:auto}.dpad .k:nth-child(1){grid-area:1 / 2}.dpad .k:nth-child(2){grid-area:2 / 1}.dpad .k:nth-child(3){grid-area:2 / 2}.dpad .k:nth-child(4){grid-area:2 / 3}.dpad .k:nth-child(5){grid-area:3 / 2}.acts{position:absolute;right:max(14px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom));display:grid;grid-template-columns:repeat(2,78px);gap:6px;pointer-events:auto}.utils{position:absolute;right:max(12px,env(safe-area-inset-right));top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:6px;pointer-events:auto}.u{width:34px;height:30px;padding:0;cursor:pointer;touch-action:none;font:700 9px/1 var(--mono);letter-spacing:.08em;color:#cfe6f4;background:#0a10189e;border:1px solid var(--line);border-radius:8px;backdrop-filter:blur(6px)}.u.on{background:#6cffb038;border-color:#6cffb08c}.k,.a{font:700 11px/1 var(--mono);letter-spacing:.06em;color:#cfe6f4;background:#0a10189e;border:1px solid var(--line);border-radius:9px;padding:0;height:40px;cursor:pointer;touch-action:none;backdrop-filter:blur(6px);transition:background .08s,transform .06s}.a{height:38px}.k.on,.a.on{background:#6cffb038;border-color:#6cffb08c;transform:scale(.95)}.act-main{color:#eafff4;border-color:#6cffb052}.a.armed{background:linear-gradient(180deg,#7dffbce6,#2fd98ad9);border-color:#a0ffcde6;color:#04170e;font-weight:800;animation:armed 1.5s ease-in-out infinite}@keyframes armed{0%,to{box-shadow:0 0 #6cffb080}50%{box-shadow:0 0 0 7px #6cffb000}}@media (prefers-reduced-motion: reduce){.a.armed{animation:none}}#padToggle{position:absolute;right:12px;top:calc(50% - 70px);width:30px;height:30px;border-radius:8px;z-index:5;background:#080c1299;border:1px solid var(--line);color:#9dc7e0;font-size:14px;cursor:pointer;display:none}body.playing #padToggle{display:block}#screens{position:absolute;inset:0;pointer-events:none;z-index:10}#screens.any{pointer-events:auto}.screen{position:absolute;inset:0;display:none;align-items:flex-start;justify-content:center;padding:20px;background:radial-gradient(120% 90% at 50% 0%,#101a26e6,#030508f5);overflow:auto;overscroll-behavior:contain}.screen.on{display:flex}.sheet{margin:auto;width:min(520px,100%);background:linear-gradient(180deg,#0c121af2,#070a0ff7);border:1px solid var(--line);border-radius:16px;padding:26px;box-shadow:0 30px 90px #0009}.sheet.wide{width:min(1020px,100%);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:26px;padding:0;overflow:hidden}.hero{position:relative;background:radial-gradient(90% 70% at 50% 30%,rgba(70,110,145,.35),transparent 70%),linear-gradient(180deg,#16202b,#0a0f16);border-right:1px solid var(--line);min-height:330px}.hero canvas{position:absolute;inset:0;width:100%;height:100%}.hero-tag{position:absolute;left:18px;top:16px;font:700 10px/1 var(--mono);letter-spacing:.16em;color:#a0cdebb3}.pane{padding:28px 30px 30px 4px}.sheet.wide .pane{padding:30px 30px 30px 0}.eyebrow{font:700 10px/1 var(--mono);letter-spacing:.2em;color:#6cffb0cc;margin-bottom:10px}h1{font-size:40px;line-height:1;margin:0 0 10px;letter-spacing:-.03em;font-weight:800}h2{font-size:26px;margin:0 0 8px;letter-spacing:-.02em}.lede{font-size:13.5px;line-height:1.55;color:var(--dim);margin:0 0 18px}.fld{display:block;margin-bottom:14px}.fld>span{display:block;font:700 9.5px/1 var(--mono);letter-spacing:.16em;color:#96cdeba6;margin-bottom:7px}.fld small{display:block;margin-top:6px;font-size:10.5px;color:#8fa6b8bf;font-family:var(--mono);line-height:1.5}.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}input[type=text],select{width:100%;padding:9px 11px;font:600 13px var(--ui);color:var(--ink);background:#ffffff0d;border:1px solid var(--line);border-radius:9px;outline:none}select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,#8fa6b8 50%),linear-gradient(135deg,#8fa6b8 50%,transparent 50%);background-position:calc(100% - 15px) 17px,calc(100% - 10px) 17px;background-size:5px 5px;background-repeat:no-repeat}input:focus,select:focus{border-color:#6cffb080}.sw-row{display:flex;flex-wrap:wrap;gap:7px;align-items:center}.sw{width:28px;height:28px;border-radius:8px;cursor:pointer;background:linear-gradient(135deg,var(--c),color-mix(in srgb,var(--c) 60%,#ff2fa0));border:2px solid transparent;padding:0}.sw.on{border-color:#fff;box-shadow:0 0 0 2px #ffffff2e}input[type=color]{width:32px;height:30px;padding:0;border:1px solid var(--line);border-radius:8px;background:transparent;cursor:pointer}.cta{width:100%;margin-top:6px;padding:13px;border-radius:11px;border:0;font:800 14px var(--ui);letter-spacing:.01em;cursor:pointer;background:linear-gradient(180deg,#7dffbc,#2fd98a);color:#04170e;box-shadow:0 8px 24px #2fd98a3d}.cta:active{transform:translateY(1px)}.ghost{width:100%;margin-top:8px;padding:11px;border-radius:11px;background:transparent;border:1px solid var(--line);color:var(--dim);font:600 13px var(--ui);cursor:pointer}.keys{margin-top:14px;font:500 10.5px/1.7 var(--mono);color:#8fa6b8cc}.keys b{color:#bfe4f5;font-weight:700}.keys .dim{color:#8fa6b88c}.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:16px 0 18px}.stats>div{background:#ffffff0a;border:1px solid var(--line);border-radius:10px;padding:10px 12px}.stats b{display:block;font:800 19px var(--mono);color:var(--ink);letter-spacing:-.01em}.stats span{font:600 9.5px/1 var(--mono);letter-spacing:.14em;color:#96cdeb99;text-transform:uppercase}.stats .lede{grid-column:1 / -1;margin:0}@media (max-width: 900px){.sheet.wide{grid-template-columns:1fr}.hero{min-height:210px;border-right:0;border-bottom:1px solid var(--line)}.sheet.wide .pane{padding:22px}h1{font-size:30px}.lede{font-size:12.5px}.dpad{display:none}.acts{grid-template-columns:repeat(2,68px)}}@media (max-width: 560px){.stick{width:112px;height:112px}.stick-knob{width:46px;height:46px;margin:-23px 0 0 -23px}.acts{grid-template-columns:repeat(2,66px);gap:5px}.a{height:36px;font-size:10px}}@media (min-width: 901px){.dpad{display:grid}}