:root{color-scheme:dark;font-family:ui-sans-serif,system-ui,-apple-system,"Hiragino Kaku Gothic ProN",sans-serif;background:#151714;color:#eeeede;font-synthesis:none}*{box-sizing:border-box}body{margin:0}main{max-width:1080px;margin:auto;padding:30px 40px 24px}header,.brand,.toolbar,.actions,footer{display:flex;align-items:center}header{justify-content:space-between;margin-bottom:22px}.brand{gap:12px}.mark{color:#dcf377;font-size:38px;line-height:1}h1{font-size:25px;letter-spacing:-.04em;margin:0}.edition,.eyebrow{font-size:12px;letter-spacing:.15em;color:#bdc1b2}.cabinet{border:1px solid #454a3c;border-radius:14px;overflow:hidden;background:#080a08;box-shadow:0 22px 70px #0005}.screen-wrap{position:relative;display:flex;align-items:center;justify-content:center;min-height:200px;background:#050605}canvas{display:block;width:100%;max-height:65vh;aspect-ratio:4/3;object-fit:contain;image-rendering:pixelated;background:#000;outline:none}canvas:focus-visible{outline:2px solid #dcf377;outline-offset:-3px}#overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;background:#080b08ed;text-align:center;padding:20px}#overlay[hidden]{display:none}#overlay h2{font-size:clamp(30px,5vw,54px);letter-spacing:-.04em;margin:16px 0 4px}#overlay p{font-size:15px;color:#b3b9a7;line-height:1.7;margin-bottom:26px}.toolbar{padding:14px 20px;justify-content:space-between;gap:14px;background:#23271f;flex-wrap:wrap}#status{font-size:14px;color:#dcf377}.actions{gap:8px;flex-wrap:wrap}button{font:inherit;font-size:14px;background:#30362b;color:#eeeede;border:1px solid #525a45;border-radius:6px;min-height:40px;padding:9px 15px;cursor:pointer}button:hover:enabled{background:#424b37}button:disabled{opacity:.45;cursor:default}button:focus-visible,a:focus-visible{outline:2px solid #dcf377;outline-offset:3px}button.primary{background:#dcf377;color:#1b2110;font-size:16px;font-weight:700;min-width:190px;padding:14px 24px;border:none}button.primary:hover:enabled{background:#efffb3}.guide{display:grid;grid-template-columns:1.3fr 1fr;gap:30px;margin:25px 0}.guide h2{font-size:14px;color:#e6e8d9;margin:0 0 12px}.guide p{color:#aeb5a4;font-size:14px;line-height:2;margin:5px 0}kbd{font-family:inherit;color:#e8ebdc;font-size:13px;display:inline-block;min-width:23px;text-align:center;border:1px solid #4a5241;border-bottom-width:2px;border-radius:4px;padding:0 5px;line-height:24px;margin:0 3px 0 0}.group{display:inline-block;margin-left:10px}#warning{background:#423421;border:1px solid #9b7a45;color:#ffe2a8;padding:12px 16px;border-radius:6px;line-height:1.6;font-size:14px}footer{border-top:1px solid #363d2e;padding-top:18px;gap:14px;flex-wrap:wrap;font-size:12px;color:#969e89}footer span{margin-right:auto}a{color:#aeb99a}.screen-wrap:fullscreen{width:100vw;height:100vh;background:#000}.screen-wrap:fullscreen canvas{width:100%;height:100%;max-height:100vh}.screen-wrap:fullscreen #overlay{height:100%}@media(max-width:680px){main{padding:18px 14px}h1{font-size:22px}.edition{font-size:10px;letter-spacing:.08em}.guide{grid-template-columns:1fr;gap:18px;margin:20px 4px}.toolbar{padding:12px;gap:10px}.actions{gap:6px}button{padding:8px 10px}.group{margin-left:5px}footer{font-size:12px}canvas{max-height:none}}