@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root{font-family:'DM Sans',sans-serif;color:#30382b;background:#efeee6;--line:#d5d9cb;--muted:#87907c;--green:#d2dfa9}*{box-sizing:border-box}body{margin:0}button,input{font:inherit}button,a{touch-action:manipulation}button{cursor:pointer}button:focus-visible,a:focus-visible,canvas:focus-visible{outline:2px solid #73894f;outline-offset:4px}button{color:inherit}a{color:inherit}header{margin:0 4%;height:85px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-size:30px;letter-spacing:-1px}.brand b{font:700 24px 'Space Grotesk',sans-serif}.brand span{font:9px monospace;letter-spacing:1px;border-left:1px solid #b8c1ab;padding-left:20px;margin-left:14px}.header-meta{display:flex;gap:8px;align-items:center;font:9px monospace;letter-spacing:1px}.version{border:1px solid #c8cfbc;border-radius:4px;padding:8px 10px;margin-left:20px}.live-dot{width:6px;height:6px;border-radius:50%;background:#859d5c;display:inline-block}main{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:40px;max-width:1550px;padding:32px 4% 24px;margin:auto}.stage-panel{min-width:0}.stage-heading{display:flex;justify-content:space-between;align-items:center}.eyebrow{font:9px monospace;letter-spacing:1.1px;color:#7d8870}h1{font:500 clamp(22px,2.1vw,32px) 'Space Grotesk',sans-serif;letter-spacing:-1.2px;margin:8px 0 0}.serial{font:9px/1.6 monospace;color:#9ca28e;text-align:right}#stage{height:570px;position:relative;touch-action:none;overflow:hidden;background:#e8e7dd;border-radius:16px;margin-top:20px}#stage>canvas{display:block;width:100%;height:100%;outline:none;cursor:grab}#stage>canvas:active{cursor:grabbing}.stage-stamp{position:absolute;bottom:23px;left:24px;font:8px/1.8 monospace;letter-spacing:1px;color:#929b83;pointer-events:none}.stage-side-label{position:absolute;right:18px;top:50%;writing-mode:vertical-rl;font:8px monospace;letter-spacing:2px;color:#969e8b;pointer-events:none}.view-tools{display:flex;justify-content:center;align-items:center;gap:6px;margin:15px 0}.view-tools button{background:#e4e8d9;border:1px solid #ccd4bd;border-radius:5px;padding:7px 11px;font-size:11px}.view-tools span{font:10px monospace;min-width:43px;text-align:center}.view-tools .tool-divider{min-width:0;border-left:1px solid #c9d0be;height:20px;margin:0 10px}.control-strip{display:flex;align-items:center;justify-content:center;gap:25px}.touch-dpad{display:flex;gap:4px}.touch-dpad button{width:35px;height:35px;border:1px solid #c0c9b2;border-radius:5px;background:#e4e8d9;font-size:17px}.action-keys{display:flex;align-items:center;gap:7px}.action-keys button{border:1px solid #bac5aa;background:#e0e5d4}.small-key{font:8px monospace;border-radius:12px;padding:7px 9px}.action-keys .round-key{width:36px;height:36px;border-radius:50%;background:#784257;color:#f4dbe3;border-color:#6f3e51;font:bold 12px monospace}.keyboard-note{font:8px monospace;letter-spacing:.4px;text-align:center;color:#8c947f;margin:15px 0 0;line-height:2.5}kbd{background:#e6e9dc;border:1px solid #ced5c0;border-radius:3px;padding:3px 5px;color:#6c7a5d;margin:0 3px 0 9px}.keyboard-note span{display:block;color:#a0a794;font-size:7px;letter-spacing:1px}aside{padding-top:10px}.shift-card{border:1px solid #cbd2bd;border-radius:10px;background:#f7f8ef;padding:19px}.card-eyebrow{display:flex;align-items:center;gap:7px;font:8px monospace;letter-spacing:.6px;color:#7c8b68}.card-eyebrow>span:last-child{margin-left:auto;color:#a3ad94}.token-identity{display:flex;align-items:center;gap:13px;margin:26px 0}.token-identity canvas{border:4px solid #dce5c5;border-radius:5px;image-rendering:pixelated;width:60px;height:60px}.token-identity h2{font:600 17px 'Space Grotesk',sans-serif;letter-spacing:-.4px;margin:0;overflow-wrap:anywhere}.token-identity p{font:10px monospace;color:#8f9a7d;margin:5px 0}.status-row{display:flex;justify-content:space-between;gap:10px;border-top:1px solid #e1e6d6;padding:12px 0;font-size:10px}.status-row>span{color:#8c967f}.status-row strong{font-weight:500}.status-row button{border:0;background:none;padding:0;font-size:10px;text-align:right}#notice{font-size:10px;line-height:1.7;border-top:1px dashed #cfd8bd;padding-top:12px;color:#728557;min-height:45px}#notice.error{color:#a2524a}.guide{padding:29px 7px 0}.guide ol{list-style:none;padding:0;margin:23px 0}.guide li{display:flex;gap:13px;margin-bottom:23px}.guide li>span{font:9px monospace;color:#9ba889;margin-top:2px}.guide strong{font-size:12px;font-weight:500}.guide p{font-size:11px;line-height:1.7;color:#8b947e;margin:6px 0}.tip{display:flex;gap:12px;background:#e3e8d6;border:1px solid #d5ddc4;padding:14px;border-radius:7px}.tip>span{font-size:24px;color:#7e9461}.tip p{font-size:10px;line-height:1.7;margin:0;color:#7c896b}.aside-footer{display:flex;flex-direction:column;gap:8px;border-top:1px solid var(--line);margin-top:25px;padding:18px 0;font-size:10px;color:#8a957a}.aside-footer a{text-decoration:none}.aside-footer span{font:8px monospace;color:#a1ab92}footer{display:flex;justify-content:space-between;margin:0 4%;border-top:1px solid var(--line);padding:20px 0;font:8px monospace;letter-spacing:1px;color:#a0a891}dialog{border:1px solid #b9c5a6;background:#f7f8f0;border-radius:14px;padding:25px;width:min(440px,94vw);color:#35442b;max-height:90vh;overflow:auto}dialog::backdrop{background:#273c2680;backdrop-filter:blur(5px)}.dialog-top{display:flex;justify-content:space-between;align-items:center;font:9px monospace;letter-spacing:1px;color:#859672}.dialog-top button{border:0;background:none;font-size:24px;color:#84946f}dialog h2{font:500 27px/1.15 'Space Grotesk',sans-serif;letter-spacing:-1px;margin:17px 0}dialog p{font-size:12px;line-height:1.7;color:#849274}dialog canvas{image-rendering:pixelated;border-radius:5px;background:#c5d58a}#review-logo{width:72px;height:72px;margin-top:20px}#export-logo{display:block;width:180px;height:180px;margin:20px auto}dl>div{display:flex;justify-content:space-between;border-bottom:1px solid #dce4ce;padding:10px 0;font-size:12px}dt{color:#8b967d}dd{margin:0;font-family:monospace}.primary{display:block;width:100%;padding:13px;border-radius:6px;background:#cadca5;border:1px solid #adc38a;font-size:12px;font-weight:600;text-align:center;text-decoration:none;color:#3d552a}.primary:disabled{opacity:.5;cursor:wait}.secondary{background:transparent;border:0;padding:12px;width:100%;font-size:11px;color:#8b967d}#result-link{font-size:12px;display:block;margin:18px 0}label{display:block;font-size:11px;margin:20px 0 12px}label>span{display:block;font-size:9px;color:#96a087;margin-top:5px}input{display:block;width:100%;padding:11px;margin-top:8px;border:1px solid #cad5b9;border-radius:5px;background:#fffef7;color:#49583b;font-size:12px}.field-note{font-size:10px;line-height:1.6}[hidden]{display:none!important}#fallback{position:absolute;inset:0;align-items:center;justify-content:center}#fallback:not([hidden]){display:flex}#fallback canvas{width:min(90%,480px);height:auto;image-rendering:pixelated;border:22px solid #66715c;border-radius:12px}#stage:fullscreen{border-radius:0;height:100vh;background:#e8e7dd}#stage:fullscreen .stage-stamp{display:none}@media(max-width:1000px){main{grid-template-columns:minmax(0,1fr) 250px;gap:20px}#stage{height:530px}.keyboard-note{font-size:7px}.stage-heading .serial{display:none}}@media(max-width:760px){header{height:68px}.brand span,.version{display:none}.brand b{font-size:21px}.header-meta{font-size:7px}main{grid-template-columns:1fr;padding-top:20px;gap:20px}h1{font-size:25px}#stage{height:520px;margin-top:15px}.stage-side-label{display:none}.stage-stamp{font-size:6px;left:12px;bottom:12px}.stage-heading{padding:0 5px}.keyboard-note{display:none}aside{display:grid;grid-template-columns:1fr;gap:12px}.guide{padding-top:10px}.guide ol{display:flex;gap:14px}.guide li{flex:1;display:block;margin-bottom:0}.guide li>span{display:block;margin-bottom:8px}.guide p{font-size:10px}.tip{margin-top:8px}.aside-footer{margin:0;padding:15px 0}footer{font-size:6px;gap:20px}.control-strip{gap:15px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}
/* Full-screen play space, with floating information HUDs. */
:root{background:#141b16;color:#e0e7d7;--line:#455442;--muted:#92a589}body{height:100dvh;overflow:hidden}header{position:fixed;z-index:5;top:0;left:0;right:0;height:82px;margin:0;padding:0 30px;border:0;background:linear-gradient(#141b16dd,transparent);pointer-events:none}.brand,.header-meta{pointer-events:auto}.brand{color:#dce8cc}.brand span{color:#83987b;border-color:#4b5c45}.version{color:#9cad8e;background:#1e281e99;border-color:#455440}.header-meta{color:#adbd9c}main,.stage-panel{display:contents}#stage{position:fixed;inset:0;width:100vw;height:100dvh;margin:0;border-radius:0;background:#141b16}#stage>canvas{width:100%;height:100%;cursor:grab}.stage-stamp,.stage-side-label{display:none}.stage-heading{position:fixed;z-index:3;top:126px;left:32px;display:block;pointer-events:none}.stage-heading .eyebrow{color:#809176}.stage-heading h1{font-size:21px;letter-spacing:-.7px;color:#c3d0b5;margin-top:9px}.stage-heading .serial{display:block;font:8px/1.9 monospace;letter-spacing:1px;color:#52664f;text-align:left;margin-top:18px}aside{position:fixed;z-index:4;top:126px;right:30px;width:230px;padding:0;pointer-events:none}.shift-card{pointer-events:auto;border:1px solid #62755735;border-radius:9px;background:#202b20b0;backdrop-filter:blur(18px);padding:16px;box-shadow:0 14px 45px #0002}.card-eyebrow{font-size:7px;color:#91a37c}.token-identity{margin:20px 0}.token-identity h2{font-size:15px;color:#e0ebd4}.token-identity p{color:#8ca576}.token-identity canvas{border-color:#556b3c;width:50px;height:50px}.status-row{border-color:#6a7c512d;font-size:9px}.status-row>span{color:#859b77}.status-row strong,.status-row button{color:#b2c79b;font-size:9px}#notice{font-size:9px;border-color:#546c3c75;color:#91ab78}.guide{display:none}.tip{position:fixed;bottom:164px;left:30px;width:235px;pointer-events:none;background:transparent;border:0;border-left:1px solid #576d49;border-radius:0;padding:0 0 0 14px;gap:9px}.tip p{color:#91a482;font-size:10px}.tip>span{color:#a3bc87;font-size:20px}.aside-footer{margin-top:16px;border-color:#4b5e3c55;pointer-events:auto;font-size:9px;color:#819c6c}.aside-footer span{font-size:7px;color:#516d46}.view-tools{position:fixed;z-index:5;left:30px;bottom:94px;justify-content:flex-start;gap:4px;margin:0;padding:7px;background:#1c291dcc;border:1px solid #4a603c75;border-radius:8px;backdrop-filter:blur(15px)}.view-tools button{background:transparent;border-color:transparent;color:#a8c190;font-size:9px;padding:7px 8px}.view-tools button:hover{background:#34432b}.view-tools>span{color:#718e5b;font-size:9px;min-width:35px}.view-tools .tool-divider{margin:0 5px;border-color:#536745}.control-strip{position:fixed;z-index:5;bottom:74px;left:50%;transform:translateX(-50%);background:#172119c9;border:1px solid #4a603c70;border-radius:50px;padding:12px 17px;gap:22px;backdrop-filter:blur(18px);box-shadow:0 10px 40px #0002}.touch-dpad button{background:#2d3929;border-color:#46573c;color:#a8bf94;width:32px;height:32px}.action-keys button{background:#33412b;border-color:#506344;color:#a9bf94}.action-keys .round-key{background:#78425b;border-color:#995674;color:#e9c9d8}.keyboard-note{position:fixed;z-index:4;bottom:16px;left:50%;transform:translateX(-50%);width:480px;margin:0;color:#69805a;font-size:7px}.keyboard-note span{color:#49683e;font-size:6px}kbd{background:#253220;border-color:#3c4d31;color:#82996e;font-size:7px}footer{position:fixed;bottom:25px;left:30px;right:30px;margin:0;padding:0;border:0;z-index:3;color:#4e6643;font-size:7px;letter-spacing:1px;pointer-events:none}footer span:last-child{max-width:150px;text-align:right;line-height:1.7}dialog{z-index:20;color:#35442b}#fallback canvas{width:min(65vw,480px);max-height:70vh;object-fit:contain}#stage:fullscreen{background:#141b16}@media(max-width:1100px){aside{width:195px;right:20px;top:110px}.stage-heading{left:22px;top:114px}.stage-heading h1{font-size:17px}.tip{left:22px;width:190px;bottom:175px}.view-tools{left:22px;bottom:120px}.control-strip{bottom:62px}.keyboard-note{bottom:8px}footer{bottom:26px;left:22px;right:22px;font-size:6px;max-width:120px}footer span:last-child{display:none}}@media(max-width:760px){header{height:68px;padding:0 18px}.brand b{font-size:20px}.header-meta{font-size:7px;gap:5px}.header-meta .version:last-child{display:none}.header-meta .version{display:block;margin-left:8px;font-size:8px;padding:6px}.stage-heading{left:18px;top:86px}.stage-heading h1{font-size:16px}.stage-heading .eyebrow{font-size:7px}.stage-heading .serial{display:none}aside{top:82px;right:16px;width:155px;display:block}.shift-card{padding:10px;background:#1d291dd9}.card-eyebrow{font-size:6px;letter-spacing:0}.card-eyebrow>span:last-child{display:none}.token-identity{gap:8px;margin:11px 0}.token-identity canvas{width:35px;height:35px;border-width:2px}.token-identity h2{font-size:11px}.token-identity p{font-size:8px}.status-row{padding:7px 0;font-size:8px}.status-row strong,.status-row button{font-size:8px}#notice{font-size:8px;line-height:1.6;min-height:0}.tip{left:18px;bottom:184px;width:160px;padding-left:10px}.tip p{font-size:8px}.tip>span{display:none}.aside-footer{display:none}.view-tools{left:50%;bottom:122px;transform:translateX(-50%);padding:4px;white-space:nowrap}.view-tools button{font-size:8px;padding:6px}.control-strip{bottom:57px;padding:10px 12px;gap:12px}.touch-dpad button{width:30px;height:30px}.action-keys{gap:5px}.small-key{font-size:7px;padding:7px}.action-keys .round-key{width:31px;height:31px}.keyboard-note{display:none}footer{left:0;right:0;bottom:18px;max-width:none;text-align:center;justify-content:center;font-size:6px}.guide{display:none}#stage{height:100dvh}}

#hardware-panel{position:fixed;z-index:5;left:8vw;top:24vh;max-width:620px;width:50vw;color:#dce3c3}#hardware-panel[hidden]{display:none}#hardware-panel h1{font-size:clamp(32px,4.5vw,68px);line-height:1.05;margin:20px 0}#hardware-panel p{font-size:15px;line-height:1.7;max-width:520px;color:#b8c4a8}#hardware-panel button{padding:14px;margin:4px;border:1px solid #788469;border-radius:8px;background:#29362b;color:#e5efd5}#hardware-panel a{color:#d3e69c}.hardware-mode .stage-panel,.hardware-mode .tip{visibility:hidden}.hardware-mode .shift-card{visibility:visible}@media(max-width:800px){#hardware-panel{left:5vw;top:110px;width:90vw;max-width:none}.hardware-mode aside{top:auto;bottom:30px}.hardware-mode .shift-card{max-height:220px;overflow:auto}#hardware-panel h1{font-size:32px}#hardware-panel p{font-size:13px}}

#open-jukebox{background:transparent;border:1px solid #46543e;border-radius:6px;color:#becba1;text-align:left;padding:9px 12px;cursor:pointer}#jukebox a{color:#637b39}#jukebox input[type=file]{padding:12px 0}

.random-logo{display:block;width:100%;padding:10px;border:1px solid #536149;border-radius:6px;background:#28352a;color:#d7e7b7;cursor:pointer;margin:0 0 16px}.random-logo:hover{background:#354532}

.midi-library{display:grid;gap:8px}.midi-library button{margin:0;text-align:left}.midi-library small{display:block;margin-top:5px;font-size:11px;opacity:.7}.random-logo:disabled{opacity:.4;cursor:default}

/* Cartridge identity stays in the HUD, leaving the game as the main surface. */
.rom-intro{width:255px;pointer-events:auto}
.rom-intro h1{font-size:24px;line-height:1.18;margin:12px 0}
.rom-intro p{font-size:12px;line-height:1.65;color:#b2c1a4;margin:12px 0}
.rom-intro .rom-bridge{font-size:10px;color:#8fa181}
.rom-download{display:block;padding:12px;border:1px solid #728955;border-radius:7px;background:#283923e6;color:#dcebc7;text-decoration:none;font-size:12px;font-weight:600;margin-top:18px}
.rom-download span{display:block;font:8px monospace;letter-spacing:1px;color:#9cb785;margin-top:7px}
.rom-download:hover{background:#3b4d2e}
.rom-hardware{margin-top:13px;font-size:11px;color:#b3c69f}
.rom-hardware summary{cursor:pointer;padding:5px 0}
.rom-hardware[open]{background:#1c291cf5;border:1px solid #526442;border-radius:7px;padding:10px;max-height:40dvh;overflow:auto}
.rom-hardware p{font-size:11px}
.rom-hardware a{display:block;margin:12px 0;color:#d0e8af}
@media(max-width:1100px){.rom-intro{width:205px}.rom-intro h1{font-size:20px}.rom-intro p{font-size:11px}}
@media(max-width:760px){.rom-intro{width:calc(50vw - 26px);max-width:230px}.rom-intro .eyebrow{font-size:6px;line-height:1.7;display:block}.rom-intro h1{font-size:16px;letter-spacing:-.4px;margin:8px 0}.rom-intro p{font-size:9px;line-height:1.5;margin:8px 0}.rom-intro .rom-bridge{font-size:8px}.rom-download{font-size:10px;padding:9px;margin-top:11px}.rom-download span{font-size:6px;letter-spacing:.3px}.rom-hardware{font-size:9px;margin-top:8px}.rom-hardware[open]{position:relative;width:calc(100vw - 36px);max-height:35dvh;z-index:6;box-shadow:0 8px 30px #0008}.rom-hardware p{font-size:11px}}

/* Keep the cartridge HUD legible against the detailed bedroom scene. */
.rom-intro{padding:16px;background:#192019df;border:1px solid #a1ad7c30;border-radius:10px;backdrop-filter:blur(12px)}
.stage-heading.rom-intro{left:22px;top:108px}
header{background:linear-gradient(#171919ed,transparent)}
.shift-card{background:#192019e8}
.tip{background:#192019df;padding:10px 12px;border-radius:6px}
@media(max-width:760px){.stage-heading.rom-intro{left:10px;top:82px;padding:10px;width:calc(50vw - 20px)}}

/* A gentle lens vignette grounds the room without covering game controls. */
#stage::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 51% 43%,transparent 35%,#11142255 100%);box-shadow:inset 0 -50px 100px #15101c22}
.aside-footer{background:#182019c9;border:1px solid #7b886430;border-radius:8px;padding:12px;backdrop-filter:blur(12px)}