:root{color-scheme:dark;--bg:#07090a;--fg:#d8e4dc;--grn:#54e07a;--yel:#ffd24a;--cyn:#5fd7e8;--dim:#8a9a92;--line:#223029;--mono:ui-monospace,"Cascadia Mono","Segoe UI Mono",Menlo,Consolas,"Courier New",monospace}
*{box-sizing:border-box}html{background:#000;color:var(--fg);font:13px var(--mono);-webkit-text-size-adjust:100%;overscroll-behavior:none}body{margin:0;display:flex;flex-direction:column;align-items:center;padding:max(10px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left))}
main{width:min(100%,640px,calc((100svh - 340px - env(safe-area-inset-top) - env(safe-area-inset-bottom))*1.25));min-width:min(100%,280px);background:var(--bg);border:2px solid var(--line);border-radius:5px;box-shadow:0 0 0 4px #030404,0 20px 60px #000;overflow:hidden}
.bar{display:flex;flex-wrap:wrap;justify-content:space-between;gap:5px 14px;background:#101816;border-bottom:1px solid var(--line);padding:8px 10px;letter-spacing:.07em;font-size:11px;color:var(--dim)}.bar h1{font:inherit;color:var(--cyn);margin:0}.bar b{color:var(--yel);font-weight:400}.bar a{color:var(--cyn);text-underline-offset:3px}.play-area{padding:8px}canvas{display:block;width:100%;aspect-ratio:5/4;background:#000;image-rendering:pixelated;touch-action:none;outline-offset:2px}p{line-height:1.6}a{color:var(--cyn)}
button{font:inherit;min-height:44px;touch-action:manipulation;user-select:none;-webkit-user-select:none;cursor:pointer}button:disabled{opacity:.5;cursor:default}button:focus-visible,a:focus-visible,input:focus-visible,canvas:focus-visible{outline:2px solid var(--yel);outline-offset:3px}#play{width:100%;margin:0 0 8px;border:2px solid var(--yel);color:var(--yel);background:#000;font-size:15px;letter-spacing:.14em;min-height:48px}#play:hover{background:var(--yel);color:#000}#status{min-height:16px;margin:6px 0;font-size:11px;color:var(--grn)}
/* Spectrum Next case and sculpted dark keycaps, with the familiar corner rainbow. */
.next-keys{position:relative;margin:8px 0 0;padding:10px 12px 14px;background:linear-gradient(135deg,#292b2e,#17181b 65%);border:1px solid #3d4147;border-radius:6px 6px 12px 12px;box-shadow:inset 0 2px 0 #45494e,inset 0 -4px 0 #090a0c,0 2px 0 #000}
.key-strip{display:flex;justify-content:space-between;gap:8px;align-items:center;margin:0 0 10px;font:9px/1.4 var(--mono);color:#a5aaae;letter-spacing:.06em}.next-logo{font-family:Arial,Helvetica,sans-serif;color:#e4e5e7;font-size:12px;letter-spacing:-.02em}.next-logo strong{font-size:14px;font-weight:600;color:#f06b6b}.rainbow{display:flex;width:42px;height:7px;transform:skew(-25deg);flex:none}.rainbow i{width:25%}.rainbow i:nth-child(1){background:#e44b46}.rainbow i:nth-child(2){background:#e8c542}.rainbow i:nth-child(3){background:#64b652}.rainbow i:nth-child(4){background:#51bed5}
.next-keys button{position:relative;appearance:none;background:linear-gradient(#41454b,#303339 65%,#292c31);color:#f5f5f4;border:1px solid #15171b;border-radius:7px;box-shadow:inset 0 2px 0 #60656c,inset 2px 0 0 #4d5158,inset -2px -3px 0 #202227,0 4px 0 #090a0d,0 5px 4px #08090b;font-family:Arial,Helvetica,sans-serif;font-weight:600;letter-spacing:.02em;transition:transform .04s,box-shadow .04s}
.next-keys button:hover{filter:brightness(1.12)}.next-keys button:active,.next-keys button.active{transform:translateY(3px);background:linear-gradient(#34383e,#26292e);box-shadow:inset 0 2px 0 #4d535b,inset -2px -2px 0 #191b1f,0 1px 0 #090a0d;filter:none}
#touch{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) 1.4fr;grid-template-rows:58px 58px;gap:8px;margin:0 0 14px;touch-action:none;user-select:none}#touch [data-action=up]{grid-area:1/2}#touch [data-action=left]{grid-area:2/1}#touch [data-action=down]{grid-area:2/2}#touch [data-action=right]{grid-area:2/3}#touch [data-action=fire]{grid-area:1/4/3/5}
.key-letter{position:absolute;left:9px;top:6px;font-size:16px;line-height:1}.key-command{position:absolute;right:7px;top:7px;color:#b8d9cb;font-size:7px;letter-spacing:.03em}.key-arrow{display:block;font-size:19px;line-height:1;padding-top:6px}.key-action{position:absolute;bottom:5px;left:0;right:0;font-size:8px;letter-spacing:.09em;color:#dddfe1}.space-key{display:flex;flex-direction:column;justify-content:center;gap:13px;font-size:12px;padding:6px}.space-key .space-legend{font-size:10px;color:#d7e0e7;letter-spacing:.1em}.space-key .space-action{color:#f0cf63;font-size:11px;line-height:1.6}
#tools{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}#tools button{font-size:10px;padding:4px 2px;min-width:0;min-height:44px;background:linear-gradient(#36393f,#25282d);color:#dce0e5;border-radius:5px}
.notes{border-top:1px solid var(--line);padding:8px 10px;font-size:11px;color:var(--dim)}.notes p{margin:4px 0}.notes b{color:var(--fg);font-weight:400}
.remote{width:100%;max-width:860px;margin:14px auto 0;display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center;font-size:13px;color:#8a8a8a}.remote form{display:contents}.remote input{width:5.5em;background:#000;border:1px solid #8a8a8a;color:#ffe500;font:inherit;font-size:15px;padding:5px 8px;letter-spacing:.2em;text-align:center}.remote a,.remote button{background:#1c1c1c;border:1px solid #444;color:#fff;font:inherit;font-size:13px;padding:6px 12px;cursor:pointer;letter-spacing:.08em;text-decoration:none;line-height:normal;min-height:0}.remote a:hover,.remote button:hover{background:#3c50ff}.sig{width:100%;max-width:860px;margin:22px auto 0;font-size:11.5px;color:#555;text-align:center;line-height:1.7}.sig a{color:#777}
#screen:fullscreen{display:grid;place-content:center;background:#000}#screen:fullscreen canvas{width:min(100vw,125vh);max-height:100vh}
@media(max-width:480px){.play-area{padding:4px}.bar{padding:6px;font-size:10px}.next-keys{padding:9px 8px 12px}#touch{gap:6px}.key-command{font-size:6px;right:5px}.key-letter{left:6px}.remote{gap:6px}.remote a,.remote button{padding:6px 8px;font-size:11px}.key-strip{font-size:8px}}
@media(prefers-reduced-motion:reduce){.next-keys button{transition:none}}

#build-version{margin:4px 0;font-size:10px;color:var(--dim)}

#screen{position:relative}#poster{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;image-rendering:auto;background:#000;pointer-events:none}#poster[hidden]{display:none}