:root{color-scheme:dark;--ink:#121c29;--muted:#a0acb9;--gold:#ffe18a;--mint:#95e2c5}*{box-sizing:border-box}body{margin:0;background:var(--ink);color:#eef4f2;font:14px 'Courier New',monospace}main{max-width:1100px;margin:auto;padding:28px 32px 18px}header{display:flex;justify-content:space-between;align-items:center;margin-bottom:26px;gap:12px}.brand{display:flex;align-items:center;gap:12px;color:#fff;text-decoration:none;font-size:23px;font-weight:900;letter-spacing:2px}.brand-icon{background:var(--mint);color:#142c2c;border:3px solid #d3ffeb;padding:3px 8px;box-shadow:3px 3px 0 #426057}.edition{font-size:11px;letter-spacing:1px;color:var(--muted);font-weight:400}.brand .edition{border-left:1px solid #46505e;padding-left:15px}.tools{display:flex;gap:8px}button{font:700 13px 'Courier New',monospace;color:inherit;border:1px solid #425261;background:#1c2939;cursor:pointer;touch-action:none;border-radius:4px;min-height:42px;padding:10px 13px}button:hover{border-color:var(--mint)}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid var(--gold);outline-offset:4px}.cabinet{border:1px solid #4d6370;background:#0a1119;padding:9px;box-shadow:0 12px 0 #0b121c,0 25px 45px #0004;border-radius:7px}.topline{display:flex;justify-content:space-between;padding:8px 9px 15px;color:var(--muted);font-size:12px;letter-spacing:1px}.topline b{font-weight:400;color:#d6e4e5}.topline i{display:inline-block;background:var(--mint);width:7px;height:7px;margin-right:8px}.screen{position:relative;overflow:hidden;background:#83c5c6;aspect-ratio:16/9}canvas{display:block;width:100%;height:100%;image-rendering:pixelated;image-rendering:crisp-edges}#overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;background:#10273342;text-align:center;padding:15px}#overlay.hidden{display:none}.eyebrow{font-size:11px;letter-spacing:2px;color:#fff2c0;text-shadow:2px 2px #25363c}h1{font-size:clamp(42px,7.9vw,90px);line-height:1;margin:18px 0 0;letter-spacing:-5px;color:#ffe8a1;text-shadow:4px 0 #654b37,-4px 0 #654b37,0 -4px #654b37,0 6px #654b37,5px 10px #172e38;font-weight:900}h1 span{display:block;font-size:14px;letter-spacing:8px;color:#fff;text-shadow:2px 2px #243c41;margin-top:13px}#message{color:white;text-shadow:1px 2px #23434b;font-size:14px;margin:24px 0 18px}#start{background:var(--gold);color:#273b3c;border:2px solid #fff1bb;box-shadow:0 5px 0 #9f7838;padding:15px 26px;border-radius:0;letter-spacing:2px}#start span{margin-left:22px}.hint{color:#f7f8df;text-shadow:1px 1px #183e44;font-size:10px;letter-spacing:1px;margin-top:23px}.status{display:flex;justify-content:space-between;padding:17px 18px 8px;color:var(--muted);font-size:12px;letter-spacing:1px}.status b{display:inline-block;margin-left:12px;font-size:16px;color:white}.status .gold,.gold b{color:var(--gold)}.controls{display:flex;justify-content:space-between;align-items:center;padding:28px 12px 18px;user-select:none;-webkit-user-select:none}.direction,.actions{display:flex;align-items:center;gap:12px}.direction button{width:66px;height:60px;font-size:24px;background:#263648;box-shadow:0 4px #09131e}.actions button{width:63px;height:63px;border-radius:50%;font-size:22px;box-shadow:0 5px #0a151f}.actions span{display:block;font-size:10px;letter-spacing:1px;margin-top:2px}.actions .jump{background:var(--mint);color:#133d36;border-color:#c3ffe7}.actions .run{background:#d9b879;color:#332c21;border-color:#ffe9b5}.controls button.held{transform:translateY(4px);box-shadow:none;filter:brightness(1.2)}.control-note{text-align:center;font-size:11px;letter-spacing:1px;color:#d8e3e5;line-height:1.8}.control-note span{color:var(--muted);letter-spacing:0}footer{border-top:1px solid #2d3a48;display:flex;justify-content:space-between;gap:16px;padding-top:21px;margin-top:8px;font-size:11px;color:var(--muted)}kbd{font:10px monospace;background:#263443;border:1px solid #4c5b6b;border-radius:3px;padding:3px 5px;margin:0 4px}footer a{color:var(--mint);text-decoration:none;white-space:nowrap}.mobile-note{display:none}details{color:var(--muted);margin-top:22px;font-size:13px;line-height:1.7}summary{cursor:pointer;color:#b9c8d4}details p{max-width:780px}.screen:fullscreen{width:100vw;height:100dvh;background:#111}.screen:fullscreen canvas{object-fit:contain}body:fullscreen main{height:100dvh;display:flex;flex-direction:column;justify-content:center}body:fullscreen .cabinet{width:min(100%,calc((100dvh - 190px)*1.777));align-self:center}body:fullscreen header,body:fullscreen footer,body:fullscreen details{display:none}body:fullscreen .controls{width:min(100%,900px);align-self:center}@media(max-width:680px){main{padding:16px 10px}.brand{font-size:19px;gap:7px}.edition,.brand .edition{display:none}header{margin-bottom:17px}.tools{gap:5px}.tools button{font-size:10px;padding:8px;min-height:36px}.cabinet{padding:5px}.topline{font-size:10px;padding:7px 4px 10px}.status{padding:12px 4px 6px;font-size:9px;letter-spacing:0}.status b{font-size:12px;margin-left:4px}h1{font-size:49px;margin:9px 0 0;letter-spacing:-3px}h1 span{font-size:9px;letter-spacing:4px;margin-top:7px}.eyebrow{font-size:8px;letter-spacing:1px}#message{font-size:10px;margin:14px 0 11px}#start{padding:9px 16px;min-height:35px;font-size:11px}.hint{font-size:7px;margin-top:14px}.control-note{font-size:8px}.controls{padding:25px 3px 14px}.direction button{width:56px;height:60px}.direction,.actions{gap:9px}.actions button{width:56px;height:56px}.keyboard{display:none}.mobile-note{display:block;font-size:10px;max-width:190px}footer{font-size:10px;line-height:1.6}}@media(max-height:500px) and (orientation:landscape){main{padding:8px 12px;max-width:850px}header,footer,details,.control-note{display:none}.cabinet{width:72%;margin:auto}.controls{position:fixed;inset:0;pointer-events:none;padding:0 10px;align-items:center}.controls button{pointer-events:auto}.direction{gap:5px}.direction button{width:43px}.actions{gap:5px;flex-direction:column}.actions button{width:48px;height:48px}.topline{padding:3px 5px 7px}.status{padding-top:8px}.screen{max-height:calc(100dvh - 80px)}}
