*{box-sizing:border-box}
:root{color-scheme:dark;font-family:system-ui,sans-serif;background:#171522;color:#fff0d3}
body{margin:0;background:radial-gradient(ellipse at 50% 12%,#38283b,#171522 72%);min-height:100dvh}
.site,main{width:min(1040px,calc(100% - 32px));margin:auto}
.site{display:flex;justify-content:space-between;align-items:center;padding:18px 0;border-bottom:1px solid #584354;gap:12px;font:700 12px monospace;letter-spacing:.1em;color:#dcc1ac}
.site a{display:flex;align-items:center;gap:10px;color:inherit;text-decoration:none}
.site img{width:28px;image-rendering:pixelated}
.intro{padding:24px 0 20px}
h1{font-size:clamp(25px,5vw,46px);margin:0}
h1 span{display:inline-block;margin-left:.55em;color:#ffc27d;font-size:.45em;vertical-align:middle}
p{color:#e1c5b3;margin:8px 0 0}
.cabinet{background:#241d30;border:2px solid #856371;box-shadow:0 5px #110f19;overflow:hidden}
.bar{display:flex;align-items:center;gap:24px;padding:8px 12px;font-size:13px;color:#e8cbbb}
.bar b{color:#ffd387}.bar button{margin-left:auto}
button{font:inherit;font-weight:700;cursor:pointer;border:1px solid #967584;background:#423249;color:#fff0d3;padding:8px 12px;border-radius:3px;touch-action:manipulation}
button:hover,button:focus-visible{background:#5d425a}
.stage{position:relative;background:#25223a;min-height:0}
canvas{width:100%;height:auto;display:block;image-rendering:pixelated}
.overlay{position:absolute;inset:0;display:grid;place-items:center;text-align:center;background:#15112180;padding:10px}
.overlay[hidden]{display:none}
.overlay>div{background:#211a30f5;border:2px solid #b4877f;padding:clamp(12px,3vw,30px);box-shadow:5px 5px #14101e}
.overlay h2{margin:0;color:#ffca85;font-size:clamp(19px,4vw,35px)}
.overlay p{font-size:clamp(12px,2vw,15px)}
.overlay button{background:#f0ae66;color:#26192b;margin-top:14px;border-color:#ffe0a8}
.touch{display:none;justify-content:space-between;padding:8px 12px;gap:12px}
.touch div{display:flex;gap:10px}
.touch button{min-width:52px;min-height:44px;touch-action:none;user-select:none}
.keys{display:flex;flex-wrap:wrap;gap:12px 24px;padding:18px 0;color:#dfc4b6;font-size:13px}
kbd{display:inline-block;padding:3px 6px;background:#33283e;border:1px solid #735c71;color:#fff0d3}
.cabinet:is(:fullscreen,.immersive){display:flex;flex-direction:column;background:#241d30}
.cabinet.immersive{position:fixed;inset:0;z-index:5}
.cabinet:is(:fullscreen,.immersive) .stage{flex:1;display:grid;place-items:center;overflow:hidden}
.cabinet:is(:fullscreen,.immersive) canvas{width:100%;height:100%;object-fit:contain}
@media(pointer:coarse),(max-width:700px){.touch{display:flex}}
@media(max-width:420px){.site{font-size:10px}.intro{padding:15px 0}.bar{gap:12px}.overlay>div{padding:9px}}