:root{--ink:#244b47;--green:#245c57;--mint:#dce9df;--paper:#eff7fc;--coral:#db6d50;--line:#dfd9c9;--shadow:0 7px 0 #ded7c5;font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;color:var(--ink);background:var(--paper);font-synthesis:none}
*{box-sizing:border-box}body{margin:0}button,input{font:inherit}button{color:inherit;cursor:pointer;touch-action:manipulation}button:disabled{cursor:default}button:focus-visible,a:focus-visible,input:focus-visible{outline:4px solid #2570a3;outline-offset:4px}button{ -webkit-tap-highlight-color:transparent}button,h1,h2,.steps span,.eyebrow,.workshop-tag,.footer span,.no-timer{white-space:nowrap}button:hover:not(:disabled){filter:brightness(.96)}button:active:not(:disabled){transform:translateY(2px)}[hidden]{display:none!important}
.app{width:min(1240px,100%);padding:26px 32px 16px;margin:auto}.header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:22px}.brand{display:flex;align-items:center;gap:12px}.brand>svg{width:43px;height:43px;flex-shrink:0}.eyebrow{font-size:11px;letter-spacing:.08em;font-weight:700;margin:0 0 5px}.eyebrow span{background:#eadfc7;font-size:10px;padding:3px 6px;border-radius:4px;margin-left:8px}h1{font-size:25px;letter-spacing:.035em;margin:0}h2{font-size:18px;margin:0}.tools{display:flex;gap:8px}.quiet{min-height:44px;padding:9px 13px;border:1px solid #c9d4c9;border-radius:12px;background:#fffdf7;font-weight:700;font-size:12px}.quiet[aria-pressed=true]{background:var(--green);color:white}
.steps{display:flex;justify-content:center;gap:10px;margin-bottom:22px}.step{display:flex;align-items:center;gap:9px;padding:8px 16px;border:1px solid var(--line);border-radius:12px;background:#f0ecdf;color:#7b8476;min-width:132px;position:relative}.step+.step:before{content:"›";position:absolute;left:-9px;color:#a4ac98}.step.active{background:#e4eee6;border-color:#6e9f88;color:var(--ink)}.step.done{background:#e4eee6;color:var(--green)}.step-num{font-size:12px;border-radius:50%;background:#fffdf5;width:24px;height:24px;display:grid;place-items:center;font-weight:bold}.step svg{width:36px;height:28px}.step-name{font-size:13px;font-weight:700}.step.done .step-num{background:var(--green);color:white}
.play{display:grid;grid-template-columns:1.7fr 1fr;gap:22px;align-items:stretch}.search-panel{border:1px solid var(--line);border-radius:22px;background:#fffdf7;overflow:hidden;box-shadow:var(--shadow)}.search-heading{padding:18px 22px;display:flex;align-items:center;gap:14px;min-height:105px}.target-picture{width:84px;height:68px;border-radius:14px;background:#f5e8ca;border:2px dashed #c5ab72;display:grid;place-items:center;flex-shrink:0}.target-picture svg{width:72px;height:57px}.search-copy{flex:1}.search-copy h2{font-size:17px}.search-copy .eyebrow{color:#7f8c75;font-size:10px}.search-copy p:last-child{font-size:15px;font-weight:700;margin:5px 0 0}.hint{border:1px solid #d6c393;background:#fff5d8;border-radius:12px;padding:10px 13px;min-height:48px;font-size:13px;font-weight:700}.hint span{font-size:20px;color:#a66e25}.hint:disabled{opacity:.45}
.scene{aspect-ratio:800/470;position:relative;isolation:isolate;overflow:hidden}.room{position:absolute;inset:0;width:100%;height:100%}.object{position:absolute;width:12.8%;height:20%;min-width:44px;min-height:44px;padding:0;border:2px solid transparent;border-radius:13px;background:transparent;display:grid;place-items:center;transform:translate(-50%,-50%);transition:opacity .25s,background .2s}.object svg{width:94%;height:94%;filter:drop-shadow(1px 4px 1px #5c554426)}.object:hover:not(:disabled){background:#fff7dc99;filter:none}.object:active:not(:disabled){transform:translate(-50%,-48%)}.object:focus-visible{outline-offset:0;z-index:2}.object.found{opacity:0;pointer-events:none}.object.hinted{background:#fff7b1bb;border-color:#b27d2b;animation:hint 1.2s ease-in-out 2}.object.wiggle{animation:wiggle .35s ease-in-out}.scene-note{position:absolute;inset:36% 20% auto;background:#fffdf3ed;padding:14px;border-radius:18px;text-align:center;font-size:22px;font-weight:bold;border:2px solid #c5aa71;pointer-events:none}.search-footer{padding:12px 20px;display:flex;justify-content:space-between;gap:8px;font-size:11px;color:#637766}.no-timer{font-size:10px;color:#89907b}
.workshop{border-radius:22px;background:#e4ece2;border:1px solid #c9d7c6;padding:22px;display:flex;flex-direction:column;box-shadow:0 7px 0 #cbd8c8;position:relative;overflow:hidden}.workshop-title{display:flex;align-items:center;justify-content:space-between}.workshop-title h2{font-size:17px;letter-spacing:.1em}.workshop-tag{font-size:11px;border:1px solid #9fb5a2;border-radius:20px;padding:5px 10px}.assembly{position:relative;flex:1;min-height:180px;display:grid;align-items:center}.assembly svg{width:100%;max-height:275px;overflow:visible}.assembly .new-part{animation:attach .65s ease-out}.assembly .car-run{animation:drive 2s ease-in-out both;transform-box:fill-box;transform-origin:center}.assembly .spin{animation:spin .45s linear infinite;transform-box:fill-box;transform-origin:center}.assembly .car-stop{animation:bob .6s ease-out}.role-copy{font-size:14px;font-weight:700;line-height:1.7;min-height:48px;margin:4px 0 12px}.action-row{display:flex;gap:10px;align-items:center}.tray{width:62px;height:53px;background:#f8f6ea;border:2px dashed #a8b79d;border-radius:12px;flex-shrink:0;display:grid;place-items:center}.tray svg{width:54px;height:44px}.primary{background:var(--green);color:#fffef3;border:0;border-bottom:4px solid #16433f;border-radius:13px;min-height:55px;padding:12px 16px;font-size:16px;font-weight:700;flex:1}.primary:disabled{background:#c3d0bf;color:#64795f;border-bottom-color:#afbea9}.message{font-size:11px;line-height:1.7;min-height:38px;margin:12px 0 0;color:#536a54}.footer{display:flex;justify-content:center;align-items:center;gap:22px;padding-top:25px;color:#79856e;font-size:11px}.footer button{border:0;background:none;padding:10px 0;font-size:11px;text-decoration:underline;text-underline-offset:4px}.footer>span{font-size:11px;letter-spacing:.06em}
dialog{color:var(--ink);background:var(--paper);border:1px solid #c9d4c4;border-radius:22px;width:min(580px,calc(100% - 28px));max-height:85dvh;padding:22px 26px;box-shadow:0 20px 80px #173b3740;line-height:1.9;font-size:14px}dialog::backdrop{background:#1f403b70}.dialog-top{display:flex;gap:12px;align-items:center;justify-content:space-between;position:sticky;top:-22px;background:var(--paper);padding:8px 0 12px;z-index:2}.dialog-top h2{font-size:18px}dialog h3{font-size:15px;margin:22px 0 8px}dialog p{margin:10px 0}dialog a{color:var(--green)}.small{font-size:12px;color:#657761}.volume-label{display:flex;justify-content:space-between;font-size:13px;font-weight:bold}input[type=range]{width:100%;height:44px;accent-color:var(--green)}.help-step{display:flex;gap:12px;align-items:center}.help-step b{display:grid;place-items:center;background:var(--green);color:white;border-radius:50%;width:32px;height:32px;flex-shrink:0}
@keyframes attach{from{transform:translateY(-42px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes drive{from{transform:translateX(0)}to{transform:translateX(-350px)}}@keyframes spin{to{transform:rotate(-360deg)}}@keyframes bob{50%{transform:translateY(-4px)}}@keyframes hint{50%{background:#ffeb87;box-shadow:0 0 0 6px #f3cb6c44}}@keyframes wiggle{25%{transform:translate(-55%,-50%)}75%{transform:translate(-45%,-50%)}}
@media(min-width:1400px){.app{padding-top:45px}.header{margin-bottom:30px}.steps{margin-bottom:30px}}
@media(max-width:960px){.app{padding:20px}.play{gap:14px;grid-template-columns:1.5fr 1fr}.search-heading{padding:14px;gap:10px}.search-copy h2{font-size:14px}.target-picture{width:64px;height:58px}.target-picture svg{width:58px}.hint{padding:8px;font-size:12px}.workshop{padding:16px}.assembly{min-height:140px}.role-copy{font-size:12px}.primary{padding:10px;font-size:14px}.tray{width:48px}.tray svg{width:44px}.search-footer{padding:12px;font-size:10px}.no-timer{display:none}.steps{gap:10px}.step{min-width:120px;padding:7px 12px}.header .brand>svg{width:34px}.header h1{font-size:21px}.quiet{font-size:11px;padding:8px 10px}}
@media(max-width:650px){.app{padding:14px 12px 8px}.header{margin-bottom:14px;gap:6px;align-items:flex-start}.brand{gap:7px}.brand>svg{width:30px!important;height:36px}.eyebrow{font-size:9px;letter-spacing:.03em}.eyebrow span{font-size:8px;padding:2px 4px;margin-left:3px}.header h1{font-size:17px;letter-spacing:0}.tools{gap:5px}.tools .quiet{font-size:10px;min-height:44px;padding:6px 7px}.tools #about-open{display:none}.steps{gap:6px;margin-bottom:14px;justify-content:space-between}.step{min-width:0;flex:1;padding:7px 5px;gap:4px;border-radius:10px;justify-content:center}.step-num{width:19px;height:19px;font-size:10px}.step svg{width:23px;height:22px}.step-name{font-size:11px}.step+.step:before{left:-6px;font-size:12px}.play{grid-template-columns:1fr;gap:14px}.search-panel{border-radius:16px;box-shadow:0 4px 0 #ded7c5}.search-heading{padding:10px 12px;min-height:76px;gap:10px}.target-picture{width:61px;height:54px;border-radius:10px}.target-picture svg{width:56px;height:46px}.search-copy h2{font-size:14px}.search-copy .eyebrow{font-size:9px;margin:0 0 3px}.search-copy p:last-child{font-size:12px;margin:3px 0 0}.hint{min-height:44px;padding:6px 9px}.hint span{font-size:17px}.search-footer{padding:8px 12px;font-size:10px;min-height:30px}.no-timer{display:block;font-size:9px}.workshop{border-radius:16px;padding:12px 14px;display:grid;grid-template-columns:1fr 1fr;column-gap:12px;box-shadow:0 4px 0 #cbd8c8}.workshop-title{grid-column:1/-1}.workshop-title h2{font-size:13px;letter-spacing:.06em}.workshop-tag{font-size:9px;padding:3px 8px}.assembly{grid-column:1;grid-row:2/5;min-height:120px}.assembly svg{max-height:150px}.role-copy{grid-column:2;grid-row:2;margin:8px 0;min-height:34px;font-size:11px;line-height:1.65}.action-row{grid-column:2;grid-row:3;gap:5px}.tray{width:36px;height:44px;border-radius:8px}.tray svg{width:32px;height:35px}.primary{font-size:12px;min-height:46px;border-radius:10px;padding:8px 6px}.message{grid-column:2;grid-row:4;font-size:10px;min-height:30px;margin:7px 0 0;line-height:1.6}.footer{gap:14px;flex-wrap:wrap;padding-top:16px;row-gap:0}.footer>span{width:100%;text-align:center;font-size:10px;margin-bottom:2px}.footer button{padding:9px 0;min-height:44px}.footer:after{content:""}.scene-note{font-size:18px;padding:10px}dialog{padding:18px;font-size:13px}.dialog-top h2{font-size:16px}}
@media(max-width:359px){.header h1{font-size:15px}.header .brand>svg{width:25px!important}.tools .quiet{font-size:9px;padding:6px}.step{gap:3px;padding:6px 3px}.step svg{width:19px}.step-name{font-size:10px}.step-num{width:17px;height:17px}.search-copy h2{font-size:12px}.search-heading{gap:7px;padding:8px}.hint{font-size:11px;padding:5px 7px}.target-picture{width:52px;height:50px}.target-picture svg{width:46px}.no-timer{font-size:8px}.workshop{padding:10px;gap:8px}.primary{font-size:11px}.role-copy{font-size:10px}.tray{width:30px}.tray svg{width:27px}.message{font-size:9px}}
@media(orientation:landscape) and (max-height:550px) and (min-width:651px){.app{padding:10px 18px}.header{margin-bottom:8px}.header h1{font-size:18px}.header .eyebrow{font-size:9px}.steps{margin-bottom:10px}.step{padding:4px 12px}.play{grid-template-columns:1.55fr 1fr;max-width:830px;margin:auto}.search-heading{min-height:62px;padding:8px 12px}.target-picture{height:44px;width:54px}.target-picture svg{height:40px;width:48px}.search-copy p:last-child{margin-top:2px;font-size:12px}.search-copy .eyebrow{display:none}.scene{max-height:232px}.search-footer{padding:7px 12px}.assembly{min-height:80px}.assembly svg{max-height:140px}.workshop{padding:12px}.role-copy{font-size:11px;min-height:34px;margin:0 0 6px}.message{margin-top:5px;min-height:28px;font-size:10px}.primary{min-height:44px}.tray{height:44px}.footer{padding-top:10px;gap:18px}.footer button{padding:5px 0}}
body[data-theme=sky]{--ink:#234e65;--green:#2c6a84;--paper:#eff7fc;--line:#c9dbe5;--bench:#e2eef7;--bench-edge:#bed4e4;--shelf-wall:#e6f1fa;--shelf-floor:#bcd5df;--soft:#e8f2f7;--theme-shadow:#d0e0ea}
body[data-theme=peach]{--ink:#644d66;--green:#896485;--paper:#fff1ed;--line:#e9cdd5;--bench:#f2e7ef;--bench-edge:#ddc8df;--shelf-wall:#fae5e1;--shelf-floor:#dbc8d8;--soft:#f8eaf0;--theme-shadow:#ecd9da}
body[data-theme=leaf]{--ink:#365d46;--green:#3e785c;--paper:#f2f7e5;--line:#cedcbd;--bench:#e6efd9;--bench-edge:#c7d9b8;--shelf-wall:#eaf1d8;--shelf-floor:#bfceaf;--soft:#eef4e2;--theme-shadow:#d7e2c7}
body{color:var(--ink);background:var(--paper);min-height:100dvh;transition:background .25s}.search-panel{border-color:var(--line);box-shadow:0 6px 0 var(--theme-shadow)}.quiet{border-color:var(--line);background:#ffffffb8}.brand{color:var(--green)}.workshop{background:var(--bench);border-color:var(--bench-edge);box-shadow:0 6px 0 var(--theme-shadow)}.step.active{background:#fffdfa;border-color:var(--line);color:var(--ink)}.step.done{background:var(--soft);border-color:var(--green);color:var(--ink)}.step-num{background:var(--soft)}.search-copy .eyebrow,.search-footer,.message,.footer,.no-timer,.small{color:var(--ink)}.primary{border-bottom-color:color-mix(in srgb,var(--green),#000 22%)}.primary:disabled{background:var(--bench-edge);color:var(--ink);border-bottom-color:var(--line)}.tray{background:#ffffff9c;border-color:var(--bench-edge)}.workshop-tag{border-color:var(--bench-edge)}.room-wall{fill:var(--shelf-wall)}.room-floor{fill:var(--shelf-floor)}dialog{background:var(--paper);border-color:var(--line)}.dialog-top{background:var(--paper)}.theme-options{display:flex;gap:10px;margin:12px 0}.theme-options button{flex:1;min-height:48px;border:2px solid var(--line);border-radius:12px;background:#fffaf5;padding:8px;font-weight:bold;font-size:13px;display:flex;align-items:center;justify-content:center;gap:6px}.theme-options button[aria-pressed=true]{border-color:var(--green);box-shadow:0 0 0 2px var(--bench)}.theme-dot{width:20px;height:20px;border-radius:50%;border:1px solid #8698a0;display:inline-block;flex-shrink:0}.theme-dot.sky{background:#c9e4f8}.theme-dot.peach{background:#f7c9d0}.theme-dot.leaf{background:#d4e59d}.step+.step:before{content:none}
@media(orientation:landscape) and (max-height:550px) and (min-width:651px){.scene{height:clamp(164px,calc(100dvh - 220px),210px);aspect-ratio:auto}.assembly svg{max-height:110px}.assembly{min-height:80px}.workshop .message{font-size:9px}}
.step{min-height:44px}.step[aria-pressed=true]{outline:2px solid var(--green);outline-offset:2px}.word-card{display:grid;grid-template-columns:66px minmax(180px,1fr) minmax(250px,auto);align-items:center;gap:14px;padding:14px 20px;margin-top:22px;border:1px solid var(--line);border-radius:18px;background:#ffffffb8}.word-picture{width:66px;height:66px;background:var(--soft);border-radius:12px;display:grid;place-items:center}.word-picture svg{width:94%;height:94%}.word-copy .eyebrow{font-size:9px;margin:0 0 3px}.word-copy h2{font-size:16px;margin:0;white-space:nowrap}.word-copy #word-en-name{font-size:14px;font-weight:700;margin:2px 0;white-space:nowrap}.word-copy #word-detail{font-size:11px;line-height:1.6;margin:3px 0 0}.word-actions{display:grid;grid-template-columns:1fr 1fr 44px;gap:7px}.word-actions button{min-height:44px;border:1px solid var(--green);border-radius:10px;padding:8px 12px;background:var(--soft);font-size:12px;font-weight:700;white-space:nowrap}.word-actions button:disabled{opacity:.5;border-color:var(--line)}.word-actions #word-stop{padding:8px}.word-controls #word-status{font-size:10px;margin:6px 0 0;line-height:1.6}.footer{padding-top:14px}
@media(max-width:960px){.word-card{grid-template-columns:54px minmax(140px,1fr) minmax(220px,auto);padding:12px 14px;gap:10px}.word-picture{width:54px;height:54px}.word-actions button{padding:8px;font-size:11px}.word-copy h2{font-size:14px}}
@media(max-width:650px){.word-card{grid-template-columns:46px minmax(0,1fr);gap:8px 12px;margin-top:16px;padding:12px 14px}.word-picture{width:46px;height:54px}.word-copy h2{font-size:14px}.word-copy #word-en-name{font-size:13px}.word-copy #word-detail{font-size:10px}.word-controls{grid-column:1/-1}.word-actions button{font-size:12px}.word-controls #word-status{font-size:10px}.footer{padding-top:8px}}
@media(orientation:landscape) and (max-height:550px) and (min-width:651px){.word-card{margin-top:16px;grid-template-columns:48px minmax(150px,1fr) minmax(240px,auto)}.word-picture{width:48px;height:48px}}
@media(max-width:359px){.header{margin-bottom:9px}.steps{margin-bottom:9px}}
.reference{max-width:760px;margin:0 auto}.reference-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}.reference-heading h2{display:flex;align-items:center;gap:8px;font-size:18px}.reference-heading p{font-size:15px;font-weight:700;margin:0;white-space:nowrap}.instruction-number{display:inline-grid;place-items:center;width:26px;height:26px;flex-shrink:0;border-radius:50%;font-size:15px;font-weight:700;background:var(--green);color:#fff}.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:20px}.step{flex-direction:column;min-width:0;min-height:92px;gap:4px;padding:9px 10px}.step svg{width:70px;height:48px}.step-name{font-size:16px}.step-num{position:absolute;top:7px;right:8px}.step-num:empty{display:none}.step[aria-pressed=true]{outline:3px solid var(--green);outline-offset:2px;background:var(--soft)}.search-copy h2{font-size:20px;display:flex;align-items:center;gap:7px}.search-copy p:last-child{font-size:18px}.search-copy .eyebrow{font-size:12px}.search-footer{font-size:12px}.no-timer{font-size:11px}.find-title .instruction-number{width:24px;height:24px;font-size:14px}.object svg{filter:drop-shadow(1px 3px 1px #52627024)}
@media(max-width:960px){.reference{max-width:680px}.steps{gap:10px}.search-copy h2{font-size:17px}.search-copy p:last-child{font-size:16px}.search-heading{gap:9px}.target-picture{width:56px}.target-picture svg{width:52px}.search-footer{font-size:11px}}
@media(max-width:650px){.reference-heading{margin-bottom:8px}.reference-heading h2{font-size:15px;gap:6px}.reference-heading p{font-size:12px}.reference-heading .instruction-number{width:22px;height:22px;font-size:13px}.steps{gap:7px;margin-bottom:14px}.step{min-height:72px;padding:7px 4px;gap:2px}.step svg{width:49px;height:34px}.step-name{font-size:14px}.step-num{width:17px;height:17px;font-size:10px;top:4px;right:4px}.search-copy h2{font-size:16px;gap:5px}.find-title .instruction-number{width:20px;height:20px;font-size:12px}.search-copy p:last-child{font-size:15px}.search-copy .eyebrow{font-size:11px}.search-heading{padding:10px;gap:8px}.target-picture{width:48px;height:50px}.target-picture svg{width:44px;height:44px}.hint{padding:7px 9px}.search-footer{font-size:11px;padding:8px 10px}.no-timer{font-size:9px}.primary{font-size:14px}.role-copy{font-size:12px}.message{font-size:11px}}
@media(max-width:359px){.reference-heading h2{font-size:14px}.reference-heading p{font-size:11px}.reference-heading .instruction-number{width:20px;height:20px;font-size:12px}.step{min-height:66px}.step svg{width:44px;height:30px}.step-name{font-size:13px}.steps{gap:6px;margin-bottom:10px}.search-heading{padding:8px;gap:6px}.target-picture{width:42px;height:48px}.target-picture svg{width:39px}.search-copy h2{font-size:15px;gap:4px}.search-copy p:last-child{font-size:14px}.search-copy .eyebrow{font-size:10px}.find-title .instruction-number{width:18px;height:18px;font-size:11px}.hint{padding:6px;font-size:11px}.search-footer{font-size:10px}.tray{display:none}.primary{font-size:14px}.workshop{padding:10px}.role-copy{font-size:11px}.message{font-size:10px}}
@media(orientation:landscape) and (max-height:550px) and (min-width:651px){.reference{max-width:830px;display:grid;grid-template-columns:160px 1fr;gap:14px;align-items:center;margin-bottom:10px}.reference-heading{display:block;margin:0}.reference-heading h2{font-size:13px;gap:5px}.reference-heading p{font-size:11px;margin:5px 0 0 26px}.reference-heading .instruction-number{width:20px;height:20px;font-size:12px}.steps{margin:0;gap:7px}.step{min-height:48px;flex-direction:row;gap:5px;padding:5px}.step svg{width:36px;height:28px}.step-name{font-size:12px}.step-num{top:2px;right:2px;width:12px;height:12px;font-size:8px}.search-copy h2{font-size:15px}.search-copy p:last-child{font-size:14px}.find-title .instruction-number{width:18px;height:18px;font-size:11px}.target-picture{width:44px}.target-picture svg{width:42px}}
@media(max-width:650px) and (max-height:650px){.workshop[data-collected="0"]{grid-template-columns:1fr;gap:5px;padding:10px}.workshop[data-collected="0"] .assembly{display:none}.workshop[data-collected="0"] .workshop-title{grid-column:1;grid-row:1}.workshop[data-collected="0"] .role-copy{grid-column:1;grid-row:2;margin:0;min-height:0;font-size:11px;line-height:1.5}.workshop[data-collected="0"] .action-row{grid-column:1;grid-row:3}.workshop[data-collected="0"] .message{position:absolute;width:1px;height:1px;clip-path:inset(50%);overflow:hidden;min-height:0;white-space:nowrap}}
@media(max-width:650px) and (max-height:650px){.play{gap:8px}.workshop[data-collected="0"]{padding:8px;gap:3px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* v5: artwork above, one wide action directly underneath the assembly panel. */
.workshop-area{display:flex;flex-direction:column;gap:10px;min-width:0}
.workshop-area .workshop{flex:1;display:flex;flex-direction:column;gap:8px;position:relative}
.workshop-area .assembly{flex:1;min-height:130px;display:grid;place-items:center}
.workshop-area .assembly svg{width:100%;max-height:240px;overflow:hidden}
.workshop-area .role-copy{margin:0;min-height:0;line-height:1.65}
.workshop-area .tray{display:none}
.workshop-controls .primary{display:block;width:100%;min-height:48px;padding:10px 14px;border-radius:12px;font-size:17px}
.workshop-controls .message{margin:8px 4px 0;min-height:0;font-size:12px;line-height:1.7}
.car-run{animation:drive 2s cubic-bezier(.35,0,.8,.65) forwards}
.car-gone{transform:translateX(-350px)}
.wheel-spokes.spin{transform-box:fill-box;transform-origin:center;animation:spin .38s linear infinite}
@media(max-width:650px){
 .workshop-area{gap:8px}.workshop-area .workshop{padding:12px 14px;gap:5px}
 .workshop-area .assembly{min-height:100px}.workshop-area .assembly svg{max-height:160px}
 .workshop-area .role-copy{font-size:13px}.workshop-controls .primary{font-size:17px}
 .workshop-controls .message{font-size:12px}
}
@media(max-width:650px) and (max-height:650px){
 .workshop-area[data-phase="search"] .assembly{display:none}
 .workshop-area[data-phase="search"] .role-copy{font-size:11px}
 .workshop-area .assembly svg{max-height:125px}
}
@media(orientation:landscape) and (max-height:550px) and (min-width:651px){
 .workshop-area{gap:7px}.workshop-area .workshop{padding:10px;gap:3px}
 .workshop-area .assembly{min-height:60px}.workshop-area .assembly svg{max-height:95px}
 .workshop-area .role-copy{font-size:11px}.workshop-controls .primary{font-size:14px;min-height:44px;padding:8px}
 .workshop-controls .message{font-size:10px;margin-top:4px}
}
@media(prefers-reduced-motion:reduce){.car-run,.wheel-spokes.spin{animation:none!important}}

/* v8: phase colors stay consistent across the three background themes. */
.workshop-area[data-phase="gathered"] #action{background:#ad4f1b;border-bottom-color:#78350f;color:#fff}
.workshop-area[data-phase="attaching"] #action{background:#f3dbc9;border-bottom-color:#dfb28f;color:#743511}
.workshop-area[data-phase="ready"] #action{background:#2c6a84;border-bottom-color:#1d4d63;color:#fff}
.workshop-area[data-phase="running"] #action{background:#d0e4ed;border-bottom-color:#9abccf;color:#234e65}
.workshop-area[data-phase="complete"] #action{background:#34764f;border-bottom-color:#225135;color:#fff}
/* Hide the departed car even when the SVG viewport has side letterboxing. */
.car-gone{visibility:hidden}
/* Two current toys; the next authorized car appears only after its own work unit. */
.vehicle-choice{max-width:760px;margin:0 auto 18px}.vehicle-choice h2{font-size:15px;margin:0 0 8px}.vehicle-picker{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.vehicle-option{display:flex;align-items:center;justify-content:center;gap:12px;min-height:58px;border:2px solid var(--line);background:#fffdf8;border-radius:14px;padding:6px 12px;font-weight:700;font-size:16px}.vehicle-option svg{width:65px;height:43px}.vehicle-option span{white-space:nowrap}.vehicle-option[aria-pressed=true]{border-color:var(--green);background:var(--soft)}.vehicle-option:disabled{opacity:.65}
.water-flow{stroke-dasharray:10 6;animation:flow .45s linear infinite}.water-flow.still{animation:none}@keyframes flow{to{stroke-dashoffset:-32}}
@media(max-width:650px){.header{flex-wrap:wrap;row-gap:8px}.tools{margin-left:auto}.vehicle-choice{margin-bottom:12px}.vehicle-choice h2{font-size:14px}.vehicle-picker{gap:8px}.vehicle-option{flex-direction:column;gap:1px;min-height:74px;padding:5px;font-size:14px}.vehicle-option svg{width:62px;height:36px}.reference-heading{flex-wrap:wrap;row-gap:3px}}
@media(orientation:landscape) and (max-height:550px) and (min-width:651px){.vehicle-choice{display:flex;align-items:center;gap:12px;margin-bottom:8px}.vehicle-choice h2{font-size:12px;margin:0;white-space:nowrap}.vehicle-picker{flex:1;gap:8px}.vehicle-option{min-height:44px;font-size:13px;padding:3px 8px}.vehicle-option svg{width:45px;height:30px}.scene{height:clamp(164px,calc(100dvh - 260px),180px)}}
@media(prefers-reduced-motion:reduce){.water-flow{animation:none}}
@media(max-width:650px){
 .header h1{font-size:16px}.header .brand>svg{width:25px!important;height:30px}.tools #language-toggle{min-width:44px;padding-inline:7px}
 .vehicle-option{flex-direction:row;min-height:52px;gap:6px;padding:5px 6px}.vehicle-option svg{width:40px;height:34px;flex-shrink:0}
 .workshop[data-collected="0"] .assembly{display:none}
}
@media(max-width:359px){.header .brand>svg{display:none}.header h1{font-size:14px}.brand{gap:0}.vehicle-option{font-size:12px;gap:4px}.vehicle-option svg{width:32px}.vehicle-choice h2{font-size:13px}}
.workshop-title{gap:8px;flex-wrap:wrap}
@media(orientation:landscape) and (max-height:550px) and (min-width:651px){.workshop-title h2{font-size:13px;letter-spacing:0}.workshop-tag{font-size:10px;padding:4px 8px}}

/* Three toys: keep readable names and 44px controls without a scrolling picker. */
.vehicle-picker{grid-template-columns:repeat(3,minmax(0,1fr))}
.police-patrol{animation:patrol 3s ease-in forwards;transform-box:fill-box;transform-origin:center}
.police-patrol .wheel-spokes.spin{animation-duration:.75s}
@keyframes patrol{0%,12%{transform:translateX(0)}100%{transform:translateX(-350px)}}
@media(max-width:650px){.vehicle-picker{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.vehicle-option{flex-direction:column;gap:0;padding:5px 2px;min-height:68px;font-size:12px}.vehicle-option svg{width:53px;height:33px}}
@media(max-width:359px){.vehicle-picker{grid-template-columns:1fr;gap:5px}.vehicle-option{flex-direction:row;justify-content:flex-start;gap:12px;padding:3px 14px;min-height:44px;font-size:14px}.vehicle-option svg{width:45px;height:32px}}
@media(prefers-reduced-motion:reduce){.police-patrol{animation:none!important}}

/* Genre selection keeps the three vehicles together; only completed play scenes appear. */
.category-picker{display:flex;gap:10px;max-width:760px;margin:0 auto 10px}.category-option{flex:1;min-height:44px;border:2px solid var(--line);background:#fffdf8;border-radius:12px;padding:8px 12px;font-weight:700;font-size:15px}.category-option[aria-pressed=true]{background:var(--green);color:#fff;border-color:var(--green)}.category-option:disabled{opacity:.65}
body[data-play=pretend] .vehicle-picker{grid-template-columns:repeat(2,minmax(0,1fr))}
body[data-play=pretend] .steps{grid-template-columns:repeat(4,minmax(0,1fr))}
.kit-listen{animation:kit-listen 1.1s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.kit-beats{animation:kit-beats .9s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes kit-listen{50%{transform:translateY(-3px) rotate(-3deg)}}@keyframes kit-beats{50%{opacity:.7;transform:translateY(-3px)}}
@media(max-width:650px){.category-picker{gap:7px;margin-bottom:8px}.category-option{font-size:14px;padding:7px}.vehicle-choice{margin-bottom:10px}body[data-play=pretend] .vehicle-option{flex-direction:row;min-height:48px;gap:10px}body[data-play=pretend] .steps{grid-template-columns:repeat(2,minmax(0,1fr))}body[data-play=pretend] .step{flex-direction:row;gap:7px;justify-content:center;min-height:62px;padding:6px}body[data-play=pretend] .step svg{width:44px;height:38px}body[data-play=pretend] .step-name{font-size:14px}}
@media(max-width:359px){body[data-play=pretend] .step{flex-direction:column;gap:1px;min-height:74px}body[data-play=pretend] .step-name{font-size:14px}}
@media(orientation:landscape) and (max-height:550px) and (min-width:651px){.category-picker{margin-bottom:6px}.category-option{font-size:12px;min-height:44px;padding:4px}body[data-play=pretend] .steps{grid-template-columns:repeat(2,minmax(0,1fr))}body[data-play=pretend] .step-name{font-size:13px}body[data-play=pretend] .step{min-height:44px}}
@media(prefers-reduced-motion:reduce){.kit-listen,.kit-beats{animation:none!important}}

.party-confetti{animation:party-drift 1.4s ease-in-out infinite alternate;transform-box:fill-box;transform-origin:center}.party-cake{animation:party-bob 1s ease-in-out infinite;transform-box:fill-box;transform-origin:center}@keyframes party-drift{to{transform:translateY(8px) rotate(2deg)}}@keyframes party-bob{50%{transform:translateY(-3px)}}@media(prefers-reduced-motion:reduce){.party-confetti,.party-cake{animation:none!important}}
@media(max-width:359px){body[data-play=pretend] .vehicle-picker{grid-template-columns:1fr}}

.outing-go{animation:outing-go 2.5s ease-in-out forwards;transform-box:fill-box;transform-origin:center}@keyframes outing-go{0%{transform:translateX(0)}25%{transform:translate(5px,-3px)}50%{transform:translate(10px,0)}75%{transform:translate(14px,-3px)}100%{transform:translateX(18px)}}@media(prefers-reduced-motion:reduce){.outing-go{animation:none!important}}

/* Rocket: placement transforms stay on wrappers, animation on separate groups. */
body[data-scene=rocket] .steps{grid-template-columns:repeat(5,minmax(0,1fr))}
body[data-scene=rocket] .vehicle-picker{grid-template-columns:1fr;max-width:340px}
body[data-scene=rocket] .assembly svg{overflow:hidden}
.rocket-launch{animation:rocket-launch 3s cubic-bezier(.45,0,.7,1) forwards}
.rocket-gone{visibility:hidden}.rocket-smoke{animation:rocket-smoke 3s ease-out forwards;transform-box:fill-box;transform-origin:center}
@keyframes rocket-launch{0%,12%{transform:translateY(0)}100%{transform:translateY(-290px)}}
@keyframes rocket-smoke{0%{opacity:0;transform:scale(.55)}25%{opacity:.9}100%{opacity:0;transform:scale(1.4)}}
@media(max-width:650px){.category-option{font-size:13px;padding:7px 4px}body[data-scene=rocket] .steps{grid-template-columns:repeat(2,minmax(0,1fr))}body[data-scene=rocket] .step{flex-direction:row;min-height:58px;gap:7px}body[data-scene=rocket] .step:last-child{grid-column:1/-1}body[data-scene=rocket] .step svg{width:44px;height:38px}body[data-scene=rocket] .step-name{font-size:14px}}
@media(orientation:landscape) and (max-height:550px) and (min-width:651px){body[data-scene=rocket] .steps{grid-template-columns:repeat(5,minmax(0,1fr))}body[data-scene=rocket] .step{min-height:44px;flex-direction:column}body[data-scene=rocket] .step-name{font-size:13px}}
@media(prefers-reduced-motion:reduce){.rocket-launch,.rocket-smoke{animation:none!important}}
.assembly [data-rocket-part] .new-part{animation:rocket-attach .65s ease-out}
@keyframes rocket-attach{from{transform:translateY(8px);opacity:0}to{transform:translateY(0);opacity:1}}

/* Two exploration toys, with a full label for submarine on narrow screens. */
body[data-scene=rocket] .vehicle-picker,body[data-scene=submarine] .vehicle-picker{grid-template-columns:repeat(2,minmax(0,1fr));max-width:760px}
body[data-scene=submarine] .assembly svg{overflow:hidden}
.sub-swim{animation:sub-swim 3.2s ease-in-out forwards}
.sub-swim .sub-blades{animation:sub-spin .75s linear infinite;transform-box:fill-box;transform-origin:center}
.sub-gone{visibility:hidden}
.assembly [data-sub-part] .new-part{animation:sub-attach .65s ease-out}
@keyframes sub-attach{from{transform:translateY(8px);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes sub-spin{to{transform:rotate(-360deg)}}
@keyframes sub-swim{0%{transform:translate(0,0)}24%{transform:translate(-4px,45px)}100%{transform:translate(-410px,45px)}}
@media(max-width:650px){body[data-scene=submarine] .steps{grid-template-columns:repeat(2,minmax(0,1fr))}body[data-scene=submarine] .step{flex-direction:row;min-height:60px;gap:7px}body[data-scene=submarine] .step svg{width:44px;height:38px}body[data-scene=submarine] .step-name{font-size:14px}}
@media(max-width:359px){body[data-scene=rocket] .vehicle-picker,body[data-scene=submarine] .vehicle-picker{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.sub-swim,.sub-swim .sub-blades{animation:none!important}}

/* Three exploration toys. Original placement stays separate from motion. */
body[data-scene=rocket] .vehicle-picker,body[data-scene=submarine] .vehicle-picker,body[data-scene=balloon] .vehicle-picker{grid-template-columns:repeat(3,minmax(0,1fr));max-width:760px}
body[data-scene=balloon] .steps{grid-template-columns:repeat(3,minmax(0,1fr))}
body[data-scene=balloon] .assembly svg{overflow:hidden}
.balloon-rise{animation:balloon-rise 3.3s cubic-bezier(.35,.1,.65,1) forwards}.balloon-gone{visibility:hidden}
.assembly [data-balloon-part] .new-part{animation:balloon-attach .65s ease-out}
@keyframes balloon-rise{0%,18%{transform:translate(0,0)}100%{transform:translate(16px,-280px)}}
@keyframes balloon-attach{from{transform:translateY(7px);opacity:0}to{transform:translateY(0);opacity:1}}
@media(max-width:650px){body[data-scene=balloon] .steps{grid-template-columns:repeat(2,minmax(0,1fr))}body[data-scene=balloon] .step{flex-direction:row;min-height:60px;gap:7px}body[data-scene=balloon] .step:last-child{grid-column:1/-1}body[data-scene=balloon] .step svg{width:44px;height:38px}body[data-scene=balloon] .step-name{font-size:14px}}
@media(max-width:359px){body[data-scene=rocket] .vehicle-picker,body[data-scene=submarine] .vehicle-picker,body[data-scene=balloon] .vehicle-picker{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.balloon-rise{animation:none!important}}

/* v20: a toy flame shrinks as water reaches it; static in reduced motion. */
.toy-flame{transform-box:fill-box;transform-origin:50% 100%;animation:toy-flame 2s ease-in forwards}@keyframes toy-flame{0%,25%{transform:scale(1)}70%{transform:scale(.7)}100%{transform:scale(.22)}}.toy-flame.still{animation:none}

.kit-beats{animation:kit-beats-paired .8s ease-in-out infinite}@keyframes kit-beats-paired{0%,15%,26%,41%,100%{opacity:.65;transform:scale(1)}6%,32%{opacity:1;transform:scale(1.12)}}

/* v22: settings first, short points, optional detail. */
#about-content .about-lead{font-size:14px;line-height:1.6;margin:3px 0 12px}
#about-content .about-settings h3,#about-content .about-how h3{margin:14px 0 5px}
#about-content .about-settings p{margin:5px 0;line-height:1.6}
#about-content .theme-options{margin:8px 0 12px}
#about-content .about-how ol{padding-left:1.7em;margin:5px 0;font-size:13px;line-height:1.7}
.about-fold{border:1px solid var(--line);border-radius:12px;margin:10px 0;background:#ffffff70}
.about-fold>summary{cursor:pointer;min-height:48px;display:flex;align-items:center;gap:9px;padding:9px 12px;font-size:14px;font-weight:700;line-height:1.4;list-style:none;white-space:nowrap}
.about-fold>summary::-webkit-details-marker{display:none}.about-fold>summary:before{content:'＋';font-size:18px;width:20px;flex-shrink:0}.about-fold[open]>summary:before{content:'−'}.about-fold>summary:focus-visible{outline:3px solid var(--green);outline-offset:3px;border-radius:10px}
.about-fold>p,.about-fold>.about-reference{margin:8px 12px 14px}.toy-points{margin:0 12px 14px}.toy-points>div{border-top:1px solid var(--line);padding:10px 0}.toy-points dt{font-size:14px;font-weight:700;white-space:nowrap}.toy-points dd{margin:3px 0 0;font-size:13px;line-height:1.6}.about-credit{font-size:12px;line-height:1.6;margin-top:12px}
@media(max-width:650px){#about-content .about-lead{font-size:13px}#about-content .about-settings h3,#about-content .about-how h3{font-size:14px}#about-content .about-how ol{font-size:12px}.about-fold>summary{font-size:13px;padding:9px 10px}.toy-points dt{font-size:13px}.toy-points dd{font-size:12px}}

/* v23: compact source list; the sound preview is an explicit action. */
#sound-test{min-height:44px;white-space:nowrap}.reference-links{padding-left:1.2em;margin:8px 0;font-size:12px;line-height:1.7}.reference-links li{padding:4px 0}.reference-links a{display:inline-block;min-height:32px}.about-reference>p{font-size:12px;line-height:1.7}

/* v24: instruments have large optional play controls after assembly. */
.category-picker{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.instrument-controls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;width:100%}.instrument-controls[hidden]{display:none}.instrument-controls button{min-height:48px;white-space:nowrap;border:2px solid var(--green);background:#fffaf0;color:var(--ink);border-radius:12px;font-family:inherit;font-weight:700;font-size:15px;padding:9px 6px;cursor:pointer}.instrument-controls[data-instrument=guitar]{grid-template-columns:1fr}.instrument-controls[data-instrument=piano] button{background:linear-gradient(#fffefa,#f0ecde);border-bottom-width:5px;border-radius:4px 4px 10px 10px;min-height:58px}.instrument-controls button:active{background:var(--soft);transform:translateY(2px)}
body[data-play=music] .workshop{display:flex;flex-direction:column;gap:8px}body[data-play=music] .assembly{min-height:0}body[data-play=music] .assembly svg{max-height:260px}body[data-play=music] .role-copy{font-size:13px;line-height:1.6;margin:5px 0;min-height:0}
.music-string-vibrate{animation:music-strings .11s linear infinite;transform-box:fill-box;transform-origin:center}@keyframes music-strings{25%{transform:translateY(-1.1px)}75%{transform:translateY(1.1px)}}
.music-drum-hit{animation:music-drum .72s ease-in-out infinite;transform-box:fill-box;transform-origin:center}@keyframes music-drum{0%,20%,100%{transform:scale(1)}8%{transform:scale(1.04,.96)}}
.music-cymbal-hit{animation:music-cymbal .24s ease-in-out infinite alternate;transform-box:fill-box;transform-origin:center}@keyframes music-cymbal{to{transform:rotate(3deg)}}
.music-sticks-hit{animation:music-sticks .36s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 0}@keyframes music-sticks{40%{transform:translateY(7px) rotate(3deg)}}
.music-key-hit .piano-key-0,.music-key-hit .piano-key-2,.music-key-hit .piano-key-4{animation:music-key 1.14s ease-in-out infinite}.music-key-hit .piano-key-2{animation-delay:.38s}.music-key-hit .piano-key-4{animation-delay:.76s}@keyframes music-key{0%,100%{transform:translateY(0);fill:#fffdf2}8%,62%{transform:translateY(4px);fill:#f3cc75}}
.music-hammer-hit{animation:music-hammer .38s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 100%}@keyframes music-hammer{35%{transform:rotate(-9deg)}}
.music-touched [data-music-part=guitarStrings]>g{animation:music-strings .11s linear 6}.music-touched[data-music-tone=kick] [data-drum-head=bass],.music-touched[data-music-tone=snare] [data-drum-head=snare]{animation:music-drum .3s ease-in-out 1}.music-touched[data-music-tone=cymbal] [data-cymbal-plate]{animation:music-cymbal .15s ease-in-out 6 alternate}.music-touched[data-music-tone=piano-c] .piano-key-0,.music-touched[data-music-tone=piano-e] .piano-key-2,.music-touched[data-music-tone=piano-g] .piano-key-4{animation:music-key .45s ease-in-out 1}.music-touched [data-hammers]{animation:music-hammer .4s ease-in-out 1}
@media(max-width:650px){.category-picker{grid-template-columns:repeat(2,minmax(0,1fr))}body[data-play=music] .steps{grid-template-columns:repeat(2,minmax(0,1fr))}body[data-play=music] .step{flex-direction:row;min-height:60px;gap:7px}body[data-play=music] .step svg{width:44px;height:38px}body[data-play=music] .step-name{font-size:14px}body[data-play=music] .assembly svg{max-height:230px}.instrument-controls button{font-size:14px}}
@media(orientation:landscape) and (max-height:550px) and (min-width:651px){body[data-play=music] .steps{grid-template-columns:repeat(2,minmax(0,1fr))}body[data-play=music] .step{flex-direction:row;min-height:44px}body[data-play=music] .step-name{font-size:12px}body[data-play=music] .assembly svg{max-height:150px}.instrument-controls button{min-height:44px;padding:5px}}
@media(prefers-reduced-motion:reduce){.music-toy *,.music-touched *{animation:none!important;transition:none!important}}

/* Keep instrument feedback local to each positioned piece and the action window. */
[data-music-part]>g,[data-hammers]{transform-box:fill-box;transform-origin:center} [data-hammers]{transform-origin:50% 100%}

.music-toy .new-part{animation:music-attach .35s ease both}@keyframes music-attach{from{transform:translateY(5px);opacity:0}to{transform:translateY(0);opacity:1}}

/* Food-play: roomy names, original shared food shapes, small local assembly motion. */
.category-picker{grid-template-columns:repeat(5,minmax(0,1fr))}
body[data-play=cooking] .vehicle-picker{grid-template-columns:repeat(4,minmax(0,1fr))}
body[data-play=cooking] .steps{grid-template-columns:repeat(var(--part-count),minmax(0,1fr))}
.food-scene [data-food-part]>g{transform-box:fill-box;transform-origin:center}.food-new{animation:food-arrive .35s ease both}@keyframes food-arrive{from{transform:translateY(5px);opacity:0}to{transform:translateY(0);opacity:1}}
.food-spoon{animation:food-spoon 2.5s ease-in-out forwards}@keyframes food-spoon{0%,15%{transform:translate(0,0)}65%,100%{transform:translate(20px,-28px)}}
.food-noodle-lift{animation:food-noodles 2.5s ease-in-out forwards}@keyframes food-noodles{0%,15%{transform:translateY(0)}65%,100%{transform:translateY(-27px)}}
.food-slice-lift{animation:food-slice 2.5s ease-in-out forwards}@keyframes food-slice{0%,15%{transform:translate(0,0)}65%,100%{transform:translate(18px,-27px)}}
.food-ladle-stir{transform-box:fill-box;transform-origin:center;animation:food-stir 1.1s ease-in-out 2}@keyframes food-stir{25%{transform:translate(12px,3px) rotate(7deg)}75%{transform:translate(-12px,0) rotate(-7deg)}}
.food-steam{animation:food-steam 1.4s ease-in-out infinite alternate}@keyframes food-steam{to{opacity:.35;transform:translateY(-5px)}}
@media(max-width:650px){.category-picker{grid-template-columns:repeat(2,minmax(0,1fr))}.category-option:last-child{grid-column:1/-1}body[data-play=cooking] .vehicle-picker{grid-template-columns:repeat(2,minmax(0,1fr))}body[data-play=cooking] .steps{grid-template-columns:repeat(2,minmax(0,1fr))}body[data-play=cooking] .step{flex-direction:row;gap:7px;min-height:60px}body[data-play=cooking] .step svg{width:44px;height:38px}body[data-play=cooking] .step-name{font-size:13px}}
@media(orientation:landscape) and (max-height:550px) and (min-width:651px){body[data-play=cooking] .steps{grid-template-columns:repeat(3,minmax(0,1fr))}body[data-play=cooking] .step{min-height:44px}body[data-play=cooking] .step-name{font-size:12px}}
@media(prefers-reduced-motion:reduce){.food-scene *{animation:none!important;transition:none!important}}

.food-cheese-stretch{transform-box:fill-box;transform-origin:50% 100%;animation:food-cheese-stretch 2.5s ease-in-out forwards}@keyframes food-cheese-stretch{0%,15%{transform:scaleY(1)}65%,100%{transform:scaleY(2.1)}}@media(prefers-reduced-motion:reduce){.food-cheese-stretch{animation:none!important}}

.music-new-part{animation:music-model-attach .3s ease both}@keyframes music-model-attach{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}@media(prefers-reduced-motion:reduce){.music-new-part{animation:none!important}}

/* v26: model layers share scene coordinates. Moving parts never overwrite placement. */
.food-model-new{animation:food-model-arrive .3s ease both}@keyframes food-model-arrive{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
.food-ramen-chopsticks{animation:food-ramen-lift 2.6s linear forwards}@keyframes food-ramen-lift{0%,15%{transform:translateY(0)}72%,100%{transform:translateY(-27px)}}
.food-pizza-slice{animation:food-pizza-pull 2.6s linear forwards}@keyframes food-pizza-pull{0%,15%{transform:translate(0,0)}72%,100%{transform:translate(24px,-34px)}}
.food-stew-ladle{transform-box:fill-box;transform-origin:center;animation:food-stew-stir 1.3s ease-in-out 2}@keyframes food-stew-stir{25%{transform:translate(11px,3px) rotate(5deg)}75%{transform:translate(-11px,-2px) rotate(-5deg)}}
.food-model-steam{animation:food-model-steam 1.4s ease-in-out infinite alternate}@keyframes food-model-steam{to{opacity:.3;transform:translateY(-4px)}}
.food-ketchup-heart{stroke-dasharray:90;animation:food-draw-heart 1.8s ease-in-out forwards}@keyframes food-draw-heart{from{stroke-dashoffset:90}to{stroke-dashoffset:0}}
.food-ketchup-stream{stroke-dasharray:6 5;animation:food-ketchup-flow .4s linear infinite}@keyframes food-ketchup-flow{to{stroke-dashoffset:-22}}
@media(prefers-reduced-motion:reduce){.food-scene *{animation:none!important;transition:none!important}}

@media(max-width:650px){body[data-play=cooking] .step{flex-direction:column;gap:2px;min-height:86px;padding:6px}body[data-play=cooking] .step svg{width:60px;height:46px;flex-shrink:0}body[data-play=cooking] .step-name{font-size:13px}}

/* The demo follows the existing kick/snare/cymbal and C-E-G sound timing. */
.music-toy [data-music-part=snareDrum] .music-drum-hit{animation-delay:.36s}
.music-toy .music-cymbal-hit{animation-delay:1.42s}
.music-toy .music-sticks-hit{animation-duration:.72s;animation-delay:.072s}
.music-key-hit .piano-key-0,.music-key-hit .piano-key-2,.music-key-hit .piano-key-4{animation-duration:.55s;animation-iteration-count:1;animation-fill-mode:both}

.music-toy [data-drum-head],.music-toy [data-cymbal-plate]{transform-box:fill-box;transform-origin:center}

/* Complete toys can act again while the separate reset keeps its meaning. */
.workshop-controls #repeat-action[hidden]{display:none}
.workshop-controls #repeat-action{margin-bottom:8px;background:#2c6a84;border-bottom-color:#1d4d63;color:#fff}
.workshop-area[data-phase="complete"] #action{background:#fffdf6;color:#2a6049;border:2px solid #76a28b;border-bottom-width:4px;font-size:15px}

.music-toy.guitar-toy:has(.music-string-vibrate) .guitar-pick-motion,.music-touched[data-music-tone=guitar] .guitar-pick-motion{animation:guitar-pick-strum 2.1s ease-in-out 1}
@keyframes guitar-pick-strum{0%,100%{transform:translate(0,0)}18%,42%,66%{transform:translate(-96px,-39px)}30%,54%,78%{transform:translate(-96px,-20px)}}
@media(prefers-reduced-motion:reduce){.guitar-pick-motion{animation:none!important}}

/* Match the other three-choice genres without wrapping the names. */
body[data-play=pretend] .vehicle-picker{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:650px){body[data-play=pretend] .vehicle-option{flex-direction:column;gap:0;min-height:68px;padding:5px 2px;font-size:12px}body[data-play=pretend] .vehicle-option svg{width:53px;height:33px}}

/* v36: distinguish choosing a category, choosing a toy, and reference pictures. */
.category-section,.vehicle-choice,.reference{border:2px solid;border-radius:18px;padding:14px;margin:0 auto 16px;max-width:900px}
.category-section{background:#f0edf8;border-color:#bbb0d0}.category-section h2,.vehicle-choice h2{font-size:18px;margin:0 0 10px}
.category-section .category-picker{margin:0}.category-option{border-color:#b8accb}.category-option[aria-pressed=true]{background:#65517e;border-color:#65517e;color:white}
.vehicle-choice{background:#fff1de;border-color:#d9b885}.vehicle-choice .vehicle-picker{margin-bottom:0}.vehicle-option{border-color:#d9b885}.vehicle-option[aria-pressed=true]{background:#ffe1b2;border-color:#996127}
.reference{background:#edf6ef;border-color:#a8c7b2}.reference .reference-heading{flex-wrap:wrap}.reference .steps{margin-bottom:0}.reference .step{background:#fffefa;border:1px solid #b5cabb;color:var(--ink);box-shadow:none;outline:0;cursor:default}.reference .step.done{background:#d8ebde;border-color:#6e9c7d}.reference .step:before{display:none}
@media(max-width:650px){.category-section,.vehicle-choice,.reference{padding:10px;border-radius:14px;margin-bottom:12px}.category-section h2,.vehicle-choice h2{font-size:16px}.reference-heading h2{font-size:16px}.reference-heading p{font-size:13px}}
@media(max-width:650px){body[data-play=cooking] .vehicle-option{flex-direction:column;justify-content:center;gap:0;min-height:68px;padding:5px 2px}body[data-play=cooking] .vehicle-option svg{width:53px;height:33px}}

/* v37: wide screens use three work areas instead of a tall column. */
@media(min-width:1000px) and (min-height:700px){
.app{width:100%;max-width:1800px;margin:auto;padding:10px 14px;min-height:100dvh;display:grid;grid-template-columns:260px minmax(370px,1.6fr) minmax(285px,1fr);grid-template-rows:54px auto auto 1fr 44px;gap:10px;align-items:start}
.header{grid-column:1/-1;margin:0;align-self:center}.header h1{font-size:23px}.header .eyebrow{font-size:10px}
.category-section{grid-column:1;grid-row:2}.vehicle-choice{grid-column:1;grid-row:3}.reference{grid-column:1;grid-row:4}
.category-section,.vehicle-choice,.reference{width:100%;margin:0;padding:9px;border-radius:14px}.category-section h2,.vehicle-choice h2,.reference-heading h2{font-size:15px;margin-bottom:7px}
.category-picker{grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}.category-option{font-size:12px;padding:5px 2px;min-height:44px}.category-option:last-child{grid-column:1/-1}
body .vehicle-picker,body[data-play=cooking] .vehicle-picker,body[data-play=pretend] .vehicle-picker{grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}
body .vehicle-option{font-size:12px;padding:4px 1px;min-height:58px;flex-direction:column;gap:0}body .vehicle-option svg{width:48px;height:30px}
.reference-heading{flex-wrap:wrap;gap:3px;margin-bottom:6px}.reference-heading p{font-size:12px}.instruction-number{width:23px;height:23px;font-size:13px}
body .reference .steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}body .reference .step{min-height:56px;padding:4px 1px;gap:1px;flex-direction:column}body .reference .step svg{width:50px;height:32px}.step-name{font-size:12px}
.play{display:contents}.search-panel{grid-column:2;grid-row:2/5;align-self:start;width:100%}.search-heading{padding:10px;min-height:82px;gap:9px}.search-copy h2{font-size:17px}.search-copy p:last-child{font-size:14px}.target-picture{width:60px;height:54px}.target-picture svg{width:54px;height:46px}.search-footer{padding:9px;font-size:12px}.hint{padding:7px;min-height:44px;font-size:13px}
.workshop-area{grid-column:3;grid-row:2/4;gap:7px;min-width:0}.workshop-area .workshop{padding:12px;gap:5px}.workshop-title h2{font-size:15px}.workshop-tag{font-size:12px}.workshop-area .assembly{min-height:110px}.workshop-area .assembly svg,body[data-play=music] .assembly svg{max-height:190px}.workshop-area .role-copy{font-size:13px;line-height:1.5}.workshop-controls .message{font-size:12px;line-height:1.5;margin-top:5px}.workshop-controls .primary{min-height:44px;padding:7px;font-size:14px}.instrument-controls{gap:4px}.instrument-controls button{min-height:44px;font-size:12px;padding:5px}
.word-card{grid-column:3;grid-row:4;margin:0;padding:10px;min-width:0;gap:8px;grid-template-columns:52px minmax(0,1fr)}.word-picture{width:52px;height:58px}.word-picture svg{width:50px}.word-copy h2{font-size:16px}.word-copy #word-en-name{font-size:15px}.word-copy #word-detail{font-size:12px;line-height:1.5}.word-actions button{min-height:44px;padding:5px;font-size:13px}.word-controls{grid-column:1/-1}#word-status{font-size:11px;line-height:1.5;margin:5px 0 0}
.footer{grid-column:1/-1;grid-row:5;margin:0;padding:0;gap:18px;align-self:end}.footer button{min-height:44px;padding:5px}
}
@media(min-width:700px) and (max-width:999px) and (min-height:900px){
.app{padding:10px 12px;display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:1050px;margin:auto}.header{grid-column:1/-1;margin:0}.category-section,.vehicle-choice,.reference{margin:0;padding:10px;width:100%}.category-section{grid-column:1}.vehicle-choice{grid-column:2}.category-section h2,.vehicle-choice h2{font-size:16px}.category-picker{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.category-option{min-height:44px;font-size:13px;padding:5px}.category-option:last-child{grid-column:1/-1}
body .vehicle-picker,body[data-play=cooking] .vehicle-picker,body[data-play=pretend] .vehicle-picker{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}body .vehicle-option{flex-direction:column;gap:0;padding:4px 1px;font-size:12px;min-height:62px}body .vehicle-option svg{width:48px;height:32px}
.reference{grid-column:1/-1}.reference .steps,body[data-play=music] .reference .steps,body[data-play=pretend] .reference .steps,body[data-play=cooking] .reference .steps{grid-template-columns:repeat(var(--part-count),minmax(0,1fr));gap:5px}.reference .step{flex-direction:column;min-height:65px;padding:4px 1px;gap:1px}.reference .step svg{width:50px;height:34px}.reference .step-name{font-size:12px}.reference-heading{margin-bottom:6px}.reference-heading h2{font-size:15px}.reference-heading p{font-size:13px}
.play{grid-column:1/-1;display:grid;grid-template-columns:1.2fr 1fr;gap:10px}.search-heading{min-height:75px;padding:10px;gap:7px}.search-copy h2{font-size:15px}.search-copy p:last-child{font-size:12px}.target-picture{width:50px;height:45px}.target-picture svg{width:46px;height:40px}.hint{padding:5px;min-height:44px}.search-footer{padding:8px;font-size:11px}.workshop-area .workshop{padding:10px}.workshop-area .assembly{min-height:100px}.workshop-area .assembly svg,body[data-play=music] .assembly svg{max-height:170px}.workshop-area .role-copy{font-size:12px}.workshop-title h2{font-size:14px}.workshop-controls .message{font-size:11px}.workshop-controls .primary{min-height:44px;font-size:14px;padding:6px}.instrument-controls button{min-height:44px;font-size:12px;padding:4px}
.word-card{grid-column:1/-1;margin:0;padding:10px;gap:8px;grid-template-columns:60px 1fr 1fr}.word-picture{width:60px;height:65px}.word-copy h2{font-size:17px}.word-copy #word-en-name{font-size:15px}.word-copy #word-detail{font-size:12px}.word-controls{grid-column:auto}.word-actions button{min-height:44px;font-size:13px;padding:5px}#word-status{font-size:11px}.footer{grid-column:1/-1;padding:0;margin:0;gap:14px}.footer button{min-height:44px;padding:5px}
}
@media(min-width:1000px) and (min-height:700px){
.app{grid-template-columns:300px minmax(370px,1.6fr) minmax(285px,1fr);grid-template-rows:50px auto auto 1fr 44px;gap:8px;padding:8px 12px}
.category-section,.vehicle-choice,.reference{padding:7px}.category-section h2,.vehicle-choice h2,.reference-heading h2{margin-bottom:5px}
body .vehicle-option{min-height:52px}body .vehicle-option svg{height:26px}
body .reference:has(.step:nth-child(5)) .steps{grid-template-columns:repeat(3,minmax(0,1fr))}
body .reference .step{min-height:52px;padding:3px 1px}body .reference .step svg{height:28px}.reference:has(.step:nth-child(5)) .step-name{font-size:11px}
}
@media(min-width:700px){.tools .quiet,.footer button{min-height:44px;min-width:44px}}
@media(min-width:1000px) and (min-height:700px) and (max-height:800px){
.workshop-area .assembly{min-height:90px}.workshop-area .assembly svg,body[data-play=music] .assembly svg{max-height:145px}.workshop-area .workshop{padding:9px}.workshop-controls .message{margin-top:3px}.word-card{padding:8px;gap:5px}
}
@media(min-width:1000px) and (min-height:700px) and (max-height:800px){body[data-play=music] .assembly svg{max-height:115px}body[data-play=music] .workshop{gap:4px}.workshop-area .instrument-controls{margin:0}}
@media(min-width:700px) and (max-width:999px) and (min-height:900px){body[data-play=music] .assembly svg{max-height:115px}body[data-play=music] .workshop{gap:4px}.workshop-area .instrument-controls{margin:0}}