:root{color-scheme:dark;--bg:#0a2736;--panel:#153e48;--mint:#b6ffdf;--gold:#ffe4a0;--muted:#b2c9ca;--line:#49716f}*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0;background:radial-gradient(ellipse at 20% 0,#286361 0,transparent 55%),var(--bg);color:#f2fff4;font-family:system-ui,-apple-system,sans-serif;min-height:100vh}button,input,select{font:inherit}button,a{touch-action:manipulation}button{min-height:46px;padding:12px 17px;border:1px solid var(--line);border-radius:13px;background:#224d56;color:inherit;font-weight:750;cursor:pointer}button:hover{background:#316570}button:active{filter:brightness(1.15)}button:disabled{opacity:.48;cursor:default}.primary{background:var(--mint);color:#123e44;border-color:var(--mint);box-shadow:0 4px 0 #33796f}.primary:hover{background:#d4ffde}:focus-visible{outline:3px solid var(--gold);outline-offset:3px}a{color:var(--gold)}h1,h2,h3,p{margin-top:0}p{line-height:1.55}h1{font-size:clamp(2.7rem,6vw,4.6rem);line-height:1.02;letter-spacing:-.05em;margin-bottom:24px}h1 span{color:var(--mint)}h2{font-size:1.65rem}.shell{max-width:1200px;margin:auto;padding:0 24px}.topbar{max-width:1260px;display:flex;align-items:center;gap:22px;margin:auto;padding:18px 25px}.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:#fff;font-weight:900;font-size:1.13rem}.brand b{color:var(--mint)}.brand small{display:block;font-size:.57rem;letter-spacing:.13em;color:var(--muted);margin-top:5px}.topbar nav{display:flex;gap:5px;margin-left:auto}.topbar nav button{border:0;background:transparent;padding:8px 12px}.portal{font-size:.8rem;white-space:nowrap;text-decoration:none}.hero{display:grid;grid-template-columns:1fr 1fr;gap:35px;align-items:center;padding:40px 0 25px}.hero-copy>p{color:var(--muted);max-width:510px}.eyebrow{font:800 .72rem ui-monospace,monospace;color:var(--gold);letter-spacing:.12em}.hero-actions,.pills{display:flex;gap:10px;flex-wrap:wrap}.pills{margin:20px 0}.pill{font-size:.75rem;border:1px solid #6bb2a277;border-radius:30px;padding:7px 12px}.hero-art{position:relative;min-height:350px;background:linear-gradient(145deg,#39888666,#10394b);padding:20px;border:1px solid #6faa9e;border-radius:28px;overflow:hidden}.hero-art canvas{width:100%;aspect-ratio:16/10;display:block;border-radius:15px}.hero-cart{width:105px;position:absolute;right:8px;top:4px;transform:rotate(9deg);filter:drop-shadow(8px 10px 8px #0006)}.art-label{display:flex;justify-content:space-between;color:var(--mint);font:800 .65rem ui-monospace,monospace;margin-bottom:12px}.caption{font-size:.8rem;text-align:center;color:var(--gold);margin:12px 0 0}.status-line{font-size:.85rem;color:var(--gold);margin:16px 0;min-height:24px}.zones{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:25px 0 40px}.zone,.panel{background:#173f4a;border:1px solid var(--line);border-radius:21px;padding:24px}.zone p{font-size:.9rem;color:var(--muted)}.zone small{color:var(--gold);font:800 .75rem ui-monospace,monospace}.zone button{font-size:.8rem}.arena{padding:15px;background:#102f41;border:1px solid var(--line);border-radius:23px;box-shadow:0 20px 60px #0004}.hud{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}.hud-title small{display:block;font:800 .65rem ui-monospace,monospace;color:var(--gold)}.hud-title strong{display:block;font-size:1.05rem}.hud-metrics{font:800 .78rem ui-monospace,monospace;display:flex;gap:15px;color:var(--mint)}.hud-tools{display:flex;gap:6px}.hud-tools button{width:44px;min-height:44px;padding:0;font-size:19px}.board-wrap{position:relative;overflow:hidden;border-radius:16px}.board-wrap canvas{display:block;width:100%;aspect-ratio:16/9;touch-action:none}.controls{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-top:12px}.run-controls{display:flex;gap:8px}.run-controls button,#jump{width:60px;height:55px;font-size:24px;padding:0}#jump{width:110px;font-size:16px;background:#2b655a}.control-note{font-size:.8rem;color:var(--muted);margin:12px 0 0}.feedback{padding:10px 15px;background:#254d51;border-left:3px solid var(--gold);border-radius:10px;margin:12px 0 0;font-size:.83rem;min-height:44px}.pause-overlay{display:none;position:absolute;inset:0;background:#0b263bce;align-items:center;justify-content:center;flex-direction:column;z-index:5}.pause-overlay.visible{display:flex}.progress{display:flex;gap:5px;margin-bottom:15px}.progress i{height:5px;background:#3b6161;flex:1;border-radius:4px}.progress .done{background:var(--mint)}.progress .current{background:var(--gold)}dialog{width:min(900px,95vw);max-height:92dvh;background:#153946;color:inherit;border:1px solid #73a9a2;border-radius:23px;padding:22px;box-shadow:0 25px 70px #0008}dialog::backdrop{background:#03212adb;backdrop-filter:blur(5px)}.dialog-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px;flex:none}.dialog-head h2{margin:0;font-size:22px}.dialog-head button{height:44px;min-width:44px;min-height:44px;padding:0;font-size:25px}.scroll-copy{overflow:auto;max-height:65dvh;font-size:.95rem;line-height:1.6;color:#d4e9dc}.scroll-copy li{margin-bottom:16px}#howto-go,#next-room{width:100%;margin-top:10px}#workshop[open]{display:flex;flex-direction:column;height:min(650px,92dvh);overflow:hidden;padding:14px;gap:8px;max-width:none;background:#103441}#workshop .dialog-head{height:44px;margin:0}#workshop-title{font-size:18px}#workshop-steps{display:flex;justify-content:center;gap:6px;flex:none}#workshop-steps button{min-height:44px;padding:6px 14px;font-size:12px}#workshop-steps .current{background:var(--mint);border-color:var(--mint);color:#103d45}#workshop-body{display:grid;grid-template-columns:1.1fr 1fr;gap:14px;align-items:center;flex:1;min-height:0;overflow:auto}#model-pane{display:flex;flex-direction:column;align-items:center;min-height:0;height:100%;justify-content:center}#model{width:100%;aspect-ratio:640/300;max-height:calc(100% - 52px);display:block;border:1px solid #72c7b52a;background:#092a36;border-radius:15px;object-fit:contain}.model-tools{display:flex;justify-content:center;gap:8px;margin-top:6px;flex:none}.model-tools button{min-height:44px;padding:6px 13px;font-size:12px}.model-tools .selected{background:#cff1c740;color:#d9ffd0;border-color:#b5ecc1}#mission-copy{font-size:17px;font-weight:650;line-height:1.45;margin-bottom:14px}#measurements,#order-measures{display:flex;flex-wrap:wrap;gap:6px}.dim{padding:7px 9px;background:#1f5355;border:1px solid #74b6a444;border-radius:8px;color:#d7ffee;font-size:12px}#measure-tip{font-size:12px;line-height:1.4;color:var(--gold);margin:12px 0 0}#order-pane{display:flex;flex-direction:column;justify-content:center;gap:7px;min-width:0}#formula{font-size:13px;line-height:1.35;color:var(--gold);margin:0}#order-measures .dim{font-size:11px;padding:5px 8px}.mini-label{font:800 11px ui-monospace,monospace;text-transform:uppercase;color:var(--muted);margin:0}#quantity{display:block;border:1px solid #a9ffdd77;background:#082c38;color:#dcffeb;font:800 28px ui-monospace,monospace;min-height:44px;line-height:42px;border-radius:12px;padding:0 12px;text-align:right;overflow:hidden}#unit-buttons{display:flex;gap:7px}#unit-buttons button{min-height:44px;flex:1;padding:5px;font-size:17px}#unit-buttons .chosen{background:var(--mint);color:#123946}#keypad{display:grid;grid-template-columns:repeat(4,minmax(44px,1fr));grid-auto-rows:44px;gap:6px;max-width:380px;width:100%;justify-self:center}#keypad button{min-height:44px;padding:0;font-size:21px;background:#225158;border-color:#77b7a977}#keypad .tool-key{font-size:12px;background:#52684b;color:#ffefbd}#order-notice{margin:0;color:#ffd5a5;font-size:12px;line-height:1.3;min-height:16px}#workshop-footer{display:flex;gap:10px;flex:none;align-items:center}#workshop-footer button{min-height:44px;height:44px;padding:6px 13px;font-size:13px}#workshop-main{margin-left:auto;min-width:190px;box-shadow:none!important;font-size:15px!important}#built-pane{text-align:center;color:#d9ffea}#built-pane h3{color:var(--mint);font-size:24px;margin-bottom:10px}#built-copy{font:800 23px ui-monospace,monospace;color:var(--gold)}#built-pane p:last-child{font-size:13px}#workshop[data-step=measure] #order-pane,#workshop[data-step=measure] #keypad,#workshop[data-step=measure] #built-pane,#workshop[data-step=order] #model-pane,#workshop[data-step=order] #mission-pane,#workshop[data-step=order] #built-pane,#workshop[data-step=calculator] #model-pane,#workshop[data-step=calculator] #mission-pane,#workshop[data-step=calculator] #built-pane,#workshop[data-step=built] #mission-pane,#workshop[data-step=built] #order-pane,#workshop[data-step=built] #keypad{display:none}#workshop[data-step=calculator] #keypad{grid-template-columns:repeat(5,minmax(44px,1fr));max-width:430px}#workshop[data-step=calculator] #unit-buttons{display:none}.score-big{font:900 48px ui-monospace,monospace;color:var(--gold);margin:0}.room-note{color:var(--muted);font-size:13px}.panel{margin:25px 0}label{display:block;font-size:.83rem;font-weight:700;margin-bottom:6px}input,select{background:#0c313c;color:#efffee;border:1px solid #58827c;border-radius:10px;padding:12px;width:100%;min-height:46px}.record-form,.filters{display:grid;grid-template-columns:1fr 1.4fr 1fr;gap:15px}.record-form button,.record-form p{grid-column:1/-1}.record-form p{font-size:.8rem;color:var(--muted);margin:0}.result-head{display:flex;justify-content:space-between;gap:20px;align-items:center}.result-head img{width:125px}.summary-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:20px 0}.summary-card{padding:13px;background:#235255;border-radius:12px;font-size:.85rem}.summary-card b{color:var(--mint)}.summary-card small{display:block;color:var(--muted)}.score-table{width:100%;border-collapse:collapse;font-size:.86rem}.score-table th,.score-table td{padding:12px;text-align:left;border-bottom:1px solid #53857855}.table-scroll{overflow:auto}.empty{padding:20px;text-align:center;color:var(--muted)}footer{margin-top:30px!important;margin-bottom:30px!important;color:var(--muted);font-size:.75rem}.skip{position:absolute;left:-9999px}.skip:focus{left:20px;top:10px;background:var(--bg);z-index:9999;padding:15px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.arcade-expanded{overflow:hidden;overscroll-behavior:none}.arena.immersive{position:fixed;inset:0;width:100vw;height:100dvh;max-width:none;padding:0;border:0;border-radius:0;overflow:hidden;z-index:1000;background:#102f41}.landscape-stage{position:absolute;inset:0;width:100%;height:100%;overflow:hidden;--edge-left:max(12px,env(safe-area-inset-left));--edge-right:max(12px,env(safe-area-inset-right));--edge-top:max(10px,env(safe-area-inset-top));--edge-bottom:max(10px,env(safe-area-inset-bottom))}.landscape-stage.rotated{inset:auto;left:50%;top:50%;width:100dvh;height:100vw;transform:translate(-50%,-50%) rotate(90deg);--edge-left:max(12px,env(safe-area-inset-top));--edge-right:max(12px,env(safe-area-inset-bottom));--edge-top:max(10px,env(safe-area-inset-left));--edge-bottom:max(10px,env(safe-area-inset-right))}.immersive .board-wrap{position:absolute;inset:0;display:flex;justify-content:center;align-items:center;border-radius:0}.immersive #board{flex:none;max-width:none;outline-offset:-4px}.immersive .hud{position:absolute;top:var(--edge-top);left:var(--edge-left);z-index:3;display:block;margin:0;padding:9px 13px;max-width:310px;background:#0d2d419e;backdrop-filter:blur(10px);border:1px solid #d5fff377;border-radius:17px;pointer-events:none}.immersive .hud-title small{font-size:9px;letter-spacing:.05em}.immersive .hud-title strong{font-size:15px;margin:3px 0}.immersive .hud-metrics{font-size:11px;gap:15px}.immersive .hud-tools{position:absolute;right:var(--edge-right);top:var(--edge-top);z-index:4;display:flex;gap:6px}.immersive .hud-tools button,.immersive .controls button{background:#d7ffe31d;border:1px solid #dcfff385;backdrop-filter:blur(10px);box-shadow:inset 0 1px 0 #fff2,0 4px 15px #0002;color:#edfff4;text-shadow:0 2px 5px #123544;user-select:none;-webkit-user-select:none;touch-action:none}.immersive .hud-tools button{width:44px;height:48px;font-size:19px}.immersive .hud-tools small{display:block;font-size:9px}.immersive .controls{display:contents}.immersive .run-controls{position:absolute;bottom:var(--edge-bottom);left:var(--edge-left);display:flex;gap:10px;z-index:4}.immersive .run-controls button{width:64px;height:64px;min-height:64px;border-radius:50%;font-size:32px}.immersive #jump{position:absolute;right:var(--edge-right);bottom:var(--edge-bottom);width:78px;height:78px;border-radius:50%;z-index:4;font-size:17px;padding:0}.immersive #interact{position:absolute;right:var(--edge-right);bottom:calc(var(--edge-bottom) + 90px);width:100px;min-height:48px;height:48px;padding:3px 8px;z-index:4;font-size:13px;box-shadow:none}.touch-pressed{background:#b6ffdf66!important;border-color:#d7ffee!important;transform:scale(.96)}.immersive .control-note{display:none}.immersive .feedback{position:absolute;bottom:var(--edge-bottom);left:50%;transform:translateX(-50%);z-index:3;margin:0;width:min(44%,420px);max-height:42px;min-height:0;padding:7px 11px;background:#0d344096;border:1px solid #d5ffea77;backdrop-filter:blur(8px);font-size:12px;text-align:center;border-radius:13px}.arcade-expanded dialog[open]{position:fixed;inset:auto;left:50%;top:50%;margin:0;transform:translate(-50%,-50%);width:min(1100px,calc(100vw - 16px));max-width:none;max-height:calc(100dvh - 16px);padding:12px;background:#103441;overflow:auto}.arcade-expanded #workshop[open]{height:calc(100dvh - 16px);max-height:calc(100dvh - 16px);padding:10px 14px;overflow:hidden;gap:6px}.arcade-expanded #workshop-steps{position:absolute;top:10px;left:50%;transform:translateX(-50%)}.arcade-expanded #workshop-title{font-size:17px;max-width:29%}.arcade-expanded #workshop-body{overflow:hidden}.arcade-expanded #room-dialog{width:min(520px,calc(100vw - 16px))}.arcade-expanded .scroll-copy{max-height:calc(100dvh - 140px)}.arcade-portrait dialog[open]{transform:translate(-50%,-50%) rotate(90deg);width:min(1100px,calc(100dvh - 16px));max-height:calc(100vw - 16px)}.arcade-portrait #workshop[open]{height:calc(100vw - 16px);max-height:calc(100vw - 16px)}.arcade-portrait #room-dialog{width:min(520px,calc(100dvh - 16px))}.arcade-portrait .scroll-copy{max-height:calc(100vw - 140px)}
@media(max-width:900px){.topbar{flex-wrap:wrap;gap:12px}.topbar nav{margin:0;order:3;width:100%;justify-content:center}.portal{margin-left:auto}.hero{gap:20px}.hero-cart{width:85px}.record-form,.filters{grid-template-columns:1fr}.summary-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.shell{padding:0 14px}.hero{grid-template-columns:1fr;padding-top:24px}.hero-art{min-height:0}.zones{grid-template-columns:1fr}.topbar{padding:12px}.topbar nav button{font-size:12px;padding:6px 8px}.hero-cart{width:95px}#workshop-body{grid-template-columns:1fr;overflow:auto;gap:12px}#model-pane{height:190px;min-height:190px}#mission-copy{font-size:15px}#workshop-steps button{padding:6px 10px}.summary-grid{grid-template-columns:1fr}.hud{flex-wrap:wrap}.hud-tools{margin-left:auto}.controls{flex-wrap:wrap}.panel{padding:18px}.immersive #workshop-body{grid-template-columns:1.1fr 1fr}.immersive #model-pane{height:100%;min-height:0}}
@media(max-height:420px) and (orientation:landscape),(max-width:420px) and (orientation:portrait){.arcade-expanded #workshop-title{font-size:14px}.arcade-expanded #workshop-steps{gap:4px}.arcade-expanded #workshop-steps button{font-size:11px;padding:6px 9px}.arcade-expanded #workshop-body{gap:12px;grid-template-columns:1.1fr 1fr}.arcade-expanded #mission-copy{font-size:14px;line-height:1.4;margin-bottom:7px}.arcade-expanded #measurements .dim{padding:4px 6px;font-size:11px}.arcade-expanded #measure-tip{margin-top:7px;font-size:11px}.arcade-expanded #formula{font-size:12px;line-height:1.3}.arcade-expanded #order-pane{gap:5px}.arcade-expanded #order-measures .dim{font-size:10px;padding:4px 5px}.arcade-expanded #keypad{gap:5px}.arcade-expanded #keypad button{font-size:20px}.arcade-expanded #keypad .tool-key{font-size:11px}.arcade-expanded #built-copy{font-size:21px}.arcade-expanded #built-pane h3{font-size:21px}.arcade-expanded #workshop-main{font-size:13px!important;min-width:168px}.arcade-expanded #model-pane{height:100%;min-height:0}.arcade-expanded .model-tools button{padding:4px 9px;font-size:11px}.immersive .hud-title strong{font-size:13px}.immersive .hud-title small{font-size:8px}.immersive .hud{padding:7px 10px;max-width:270px}.immersive .hud-tools{gap:5px}.immersive .hud-tools button{width:44px;height:44px}.immersive .run-controls button{width:58px;height:58px;min-height:58px}.immersive #jump{width:66px;height:66px}.immersive #interact{bottom:calc(var(--edge-bottom) + 77px);height:44px;min-height:44px;width:92px;font-size:12px}}
@media(max-height:340px) and (orientation:landscape),(max-width:340px) and (orientation:portrait){.arcade-expanded #workshop[open]{padding:6px 10px;gap:4px}.arcade-expanded #workshop-steps{top:6px}.arcade-expanded #workshop-body{gap:10px}.arcade-expanded #mission-copy{font-size:13px}.arcade-expanded #keypad{gap:4px}.arcade-expanded #formula{font-size:11px}.arcade-expanded #order-measures .dim{padding:3px 5px}.arcade-expanded #order-pane{gap:4px}.arcade-expanded #quantity{font-size:24px}.arcade-expanded #order-notice{font-size:11px;min-height:13px}.arcade-expanded #workshop-hint{font-size:11px;padding:4px 8px}.arcade-expanded #built-pane h3{font-size:18px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}

#quantity{height:44px;max-height:44px;white-space:nowrap;overflow-x:auto;scrollbar-width:none}#workshop[data-step=calculator] #quantity{font-size:18px}

#hint-pane{display:none}#workshop[data-step=hint] #model-pane,#workshop[data-step=hint] #mission-pane,#workshop[data-step=hint] #order-pane,#workshop[data-step=hint] #keypad,#workshop[data-step=hint] #built-pane{display:none}#workshop[data-step=hint] #workshop-body{grid-template-columns:1fr}#workshop[data-step=hint] #hint-pane{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;padding:0 20px}#hint-formula{font-size:16px;line-height:1.4;color:var(--mint);margin:0}#hint-calculation{font:800 22px ui-monospace,monospace;line-height:1.5;color:var(--gold);margin:0}#hint-unit{font-size:13px;margin:0}

/* Original chiptune controls. Music is independent of sound effects. */
.music-button{flex:none!important;min-width:44px!important;min-height:44px!important;touch-action:manipulation!important;cursor:pointer}.topbar .music-button{width:44px;padding:5px!important;font-size:22px;border:1px solid #a8cbd555;border-radius:10px;background:#ffffff0b}.music-button.music-muted{opacity:.75}.music-button small{font:700 9px system-ui}.topbar nav{flex-wrap:wrap}.topbar #sound-toggle{min-width:44px;min-height:44px}.immersive .music-button{pointer-events:auto!important}