/* The toy shelf: wood, paper, brass and glass from the receiver's room. */
.toy-thumbnail { width: 145px; height: 145px; }
.toy-thumbnail svg { display: block; width: 100%; height: 100%; }
.game-dialog:has(.toy-workbench) { width: min(680px,calc(100% - 20px)); }
.toy-workbench { position: relative; min-width: 0; margin: 16px auto; border: 1px solid #c4c7af; border-radius: 14px; overflow: hidden; background: #ede8d4; box-shadow: inset 0 2px 8px #796b4510; }
.toy-workbench:before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(0deg,transparent,transparent 7px,#99875405 8px); pointer-events: none; z-index: 1; }
.toy-workbench canvas { display: block; width: 100%; height: auto; touch-action: none; user-select: none; }
.toy-object { display: block; width: 100%; height: 100%; pointer-events: none; }
.toy-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; }
.toy-controls button, .toy-controls select { min-height: 44px; }
.toy-controls button[aria-pressed=true] { background: #d5dfbe; border-color: #59734c; }
.toy-controls button:disabled { opacity: .5; }
.toy-range { display: block; flex: 1 0 100%; max-width: 420px; text-align: left; padding: 4px 8px; font-size: 12px; }
.toy-range > span { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.toy-range output { font: 12px monospace; color: #5d7057; }
.toy-range input { display: block; width: 100%; height: 36px; margin: 0; accent-color: #647a50; }
.toy-select { font-size: 12px; display: flex; align-items: center; gap: 7px; }
.toy-select select { max-width: 155px; border: 1px solid #afb99e; border-radius: 5px; background: #f8f8eb; padding: 5px; color: #41563e; }
.toy-status { margin: 15px 0 5px; min-height: 42px; font-size: 12px; line-height: 1.8; color: #58704f; }
.toy-footnote { font-size: 11px; line-height: 1.9; color: #7c806c; margin: 8px 0 0; }
.toy-credit { font-size: 10px; line-height: 1.8; color: #7c806c; }
.toy-credit a { text-decoration: underline; }
.toy-plate { display: block; font: 9px/1.6 monospace; color: #d8dfbc; letter-spacing: .09em; }
.toy-calculator:not(.toy-workbench) { width: min(310px,100%); padding: 22px; margin: 20px auto; background: #748268; border-radius: 14px; border: 1px solid #53694d; box-shadow: 0 5px 0 #53604b; }
.calc-memory { margin: 8px 0 0; min-height: 23px; padding: 4px 12px; color: #536548; font: 11px monospace; background: #d9dfbc; border-radius: 5px 5px 0 0; text-align: right; }
.calc-screen { display: block; overflow-wrap: anywhere; min-height: 65px; padding: 0 12px 12px; font: 30px/1.5 monospace; letter-spacing: -.05em; text-align: right; background: #d9dfbc; color: #3b503c; border-radius: 0 0 5px 5px; box-shadow: inset 0 -3px 2px #3d51321a; }
.calc-keys { display: grid; grid-template-columns: repeat(4,1fr); gap: 9px; margin-top: 19px; }
.calc-keys button { min-height: 47px; border: 1px solid #e0dfc5; border-bottom: 4px solid #c3c5a9; border-radius: 6px; background: #f4f1dc; color: #3f5341; font-size: 20px; box-shadow: 0 2px 2px #2333211a; }
.calc-keys button.calc-operator { background: #c8aa75; border-color: #b8945b; }
.calc-keys button:active { transform: translateY(2px); border-bottom-width: 2px; }
.timer-machine { position: relative; width: min(320px,100%); height: 300px; margin: 12px auto; touch-action: none; cursor: grab; }
.timer-machine:focus-visible { outline: 2px dashed #657c4e; outline-offset: -4px; border-radius: 50%; }
.timer-clock { position: absolute; left: 25%; right: 25%; top: 50%; padding: 8px 0; border-radius: 5px; background: #d7dbb9; color: #425640; font: bold 29px monospace; box-shadow: inset 0 2px 3px #4b604b30; }
.timer-needle { position: absolute; top: 20%; left: calc(50% - 2px); width: 4px; height: 27%; background: #af6148; transform-origin: 50% 120%; border-radius: 3px; opacity: .8; }
.piano-case { padding: 20px 15px 15px; border-radius: 10px; background: linear-gradient(#5f7059,#3e5141); box-shadow: inset 0 0 0 5px #788765; }
.piano-case > .toy-plate { margin-bottom: 17px; }
.piano-scroll { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-color: #97a784 #586e54; }
.piano-navigation { display: none; }
.piano-keys { position: relative; display: flex; height: 230px; gap: 2px; touch-action: none; }
.piano-keys button { touch-action: none; user-select: none; border-radius: 0 0 5px 5px; padding: 0; }
.piano-white { position: relative; width: 12.5%; height: 100%; border: 1px solid #d9d8c3; border-bottom: 9px solid #c1c6b3; background: linear-gradient(90deg,#eeeedc,#fffdf1 35%,#f7f5e5); color: #73806b; }
.piano-white.pressed { background: #d9dfc4; border-bottom-width: 3px; }
.piano-black { position: absolute; z-index: 2; width: 8%; height: 62%; background: linear-gradient(90deg,#2b3b30,#53664f,#2d3e31); border: 1px solid #25352b; border-bottom: 6px solid #1c2d23; color: #ccd4b9; }
.piano-black.pressed { background: #758366; border-bottom-width: 2px; }
.piano-keys button span { position: absolute; bottom: 24px; left: 0; width: 100%; font-size: 11px; }
.piano-keys kbd { position: absolute; bottom: 7px; left: 0; width: 100%; font: 10px monospace; opacity: .7; }
.piano-felt { display: block; height: 8px; background: #a77655; margin-top: 7px; border-radius: 2px; }
.piano-octave { font: 12px monospace; color: #52694b; }
.whistle-mouth { display: block; position: relative; width: min(290px,100%); height: 290px; margin: auto; border: 0; background: transparent; touch-action: none; color: #546e50; }
.toy-object-label { display: block; position: absolute; bottom: 12px; width: 100%; font-size: 12px; }
.breath-note { position: absolute; right: 10%; top: 22%; font-size: 33px; opacity: 0; color: #7f966c; }
.blowing .breath-note { animation: toy-breath 1.1s ease-out infinite; }
.blowing .toy-object { transform: scale(1.02); }
.wind-scene { position: relative; min-height: 345px; background: linear-gradient(#e0e8df,#f6f2dc); overflow: hidden; }
.wind-thread { position: absolute; left: 50%; top: 0; height: 60px; border-left: 1px solid #889680; }
.wind-bell { position: absolute; width: 230px; height: 290px; left: calc(50% - 115px); top: 24px; transform-origin: 50% 12%; border: 0; background: transparent; padding: 0; touch-action: none; }
.wind-caption { position: absolute; right: 17px; bottom: 15px; writing-mode: vertical-rl; font-size: 11px; letter-spacing: .35em; color: #819075; }
.metronome-body { position: relative; width: 280px; max-width: 100%; aspect-ratio: 1; margin: 15px auto; }
.metronome-arm { position: absolute; left: calc(50% - 2px); top: 24.2%; height: 47.1%; width: 4px; background: linear-gradient(90deg,#bfc6b1,#657762); transform-origin: 50% 100%; box-shadow: 1px 1px 0 #495d4430; }
.metronome-arm span { position: absolute; left: -10px; top: 20%; width: 24px; height: 28px; background: #a5af98; border: 2px solid #76876c; border-radius: 2px; }
.record-player { position: relative; width: min(420px,100%); aspect-ratio: 1; margin: auto; }
.record-disc { position: absolute; left: 18.33%; top: 21.67%; width: 51.67%; aspect-ratio: 1; border-radius: 50%; background: repeating-radial-gradient(circle,#334638 0 2px,#2a3d30 3px 4px); border: 5px solid #344835; display: grid; place-items: center; touch-action: none; cursor: grab; box-shadow: 0 3px 6px #283b3030; }
.record-disc span { display: grid; place-content: center; width: 38%; aspect-ratio: 1; border-radius: 50%; border: 1px solid #d0b981; background: #c3a768; color: #4f6145; font: 10px/1.5 monospace; text-align: center; }
.record-disc.empty { opacity: 0; pointer-events: none; }
.record-arm { position: absolute; left: calc(76.25% - 3.5px); top: 27.08%; height: 37%; width: 7px; background: linear-gradient(90deg,#617663,#e2e5cc,#84917b); transform-origin: 50% 0%; transform: rotate(-5deg); border-radius: 4px; transition: transform .25s; pointer-events: none; }
.record-arm:after { content: ''; position: absolute; bottom: -2px; left: -4px; width: 16px; height: 24px; border-radius: 4px; background: #6d7e60; }
.record-arm.lowered { transform: rotate(26deg); }
.musicbox-machine { width: min(350px,100%); height: 300px; position: relative; margin: auto; }
.musicbox-crank { position: absolute; right: 4%; top: 34%; width: 90px; height: 90px; border-radius: 50%; border: 1px solid #ac9766; background: #efdfb390; color: #7f6842; touch-action: none; font-size: 64px; line-height: 1; }
.musicbox-crank span { display: block; pointer-events: none; }
.pudding-scene { height: 310px; position: relative; }
.pudding-plate { position: absolute; width: 230px; height: 50px; left: calc(50% - 115px); bottom: 26px; background: #f8f5e6; border: 2px solid #c3cbb2; border-radius: 50%; box-shadow: 0 5px 0 #aab49b; }
.pudding-cup { position: absolute; width: 130px; height: 125px; left: calc(50% - 65px); top: 70px; border: 3px solid #b6baa2; border-radius: 8px 8px 35px 35px; background: linear-gradient(#f0d58f 0 75%,#a77b4e 80%); box-shadow: inset 12px 0 0 #fff9; transition: transform .45s,opacity .3s; }
.pudding-lid { position: absolute; left: -9px; top: -8px; width: 142px; height: 35px; border: 2px solid #8d9d7b; border-radius: 50%; color: #526647; background: #d9e0ba; font: 10px/1.2 monospace; padding-top: 4px; transition: transform .4s,opacity .3s; transform-origin: 90% 10%; }
.pudding-tab { position: absolute; bottom: -12px; left: 54px; width: 14px; height: 18px; border: 2px solid #a7ae95; border-radius: 3px; background: #e2e2c7; }
.pudding-flan { position: absolute; width: 240px; height: 240px; top: 52px; left: calc(50% - 120px); opacity: 0; }
.pudding-scene[data-step="1"] .pudding-lid, .pudding-scene[data-step="2"] .pudding-lid, .pudding-scene[data-step="3"] .pudding-lid { transform: rotate(-65deg) translateY(-20px); opacity: 0; }
.pudding-scene[data-step="2"] .pudding-cup, .pudding-scene[data-step="3"] .pudding-cup { transform: rotate(180deg); }
.pudding-scene[data-step="3"] .pudding-tab { transform: rotate(-50deg); }
.pudding-scene[data-step="4"] .pudding-cup { transform: translateY(-70px) rotate(180deg); opacity: 0; }
.pudding-scene[data-step="4"] .pudding-plate { opacity: 0; }
.pudding-scene[data-step="4"] .pudding-flan { opacity: 1; animation: pudding-drop .8s ease-out; }
.pop-sheet { display: grid; grid-template-columns: repeat(5,minmax(44px,1fr)); gap: 9px; max-width: 360px; padding: 16px; margin: auto; touch-action: none; }
.pop-sheet button { width: 100%; min-height: 44px; aspect-ratio: 1; border: 2px solid #afc3b5; border-radius: 50%; background: radial-gradient(circle at 35% 28%,#fffefa,#e2ece1 50%,#aabfae); box-shadow: 2px 3px 1px #637b6225,inset 0 -3px 2px #829c7930; touch-action: none; }
.pop-sheet button.popped { background: repeating-conic-gradient(#d3dfd0 0 30deg,#e4e9da 30deg 60deg); box-shadow: inset 0 2px 4px #5d785d35; border-color: #bfcbb7; transform: scale(.91); }
.toy-jiggle { animation: toy-jiggle .15s linear 7; }
@keyframes toy-jiggle { 25% { transform: rotate(-2deg); } 75% { transform: rotate(2deg); } }
@keyframes toy-breath { from { opacity: .1; transform: translate(0,6px) scale(.8); } 35% { opacity: .9; } to { opacity: 0; transform: translate(20px,-18px) scale(1.1); } }
@keyframes pudding-drop { 0% { transform: translateY(-65px); } 45% { transform: scaleX(1.1) scaleY(.9); } 65% { transform: scaleX(.95) scaleY(1.04); } 85% { transform: scaleX(1.02) scaleY(.98); } }
@keyframes sand-turn { from { transform: rotate(-180deg); } to { transform: rotate(0); } }
.sand-flip { animation: sand-turn .45s ease-out; }
/* Physical housings: the controls belong to each object, rather than a flat icon. */
.toy-calculator:not(.toy-workbench) {
  position: relative; isolation: isolate; width: min(310px,calc(100% - 24px));
  padding: 24px 22px 28px; margin: 24px auto 30px;
  border: 1px solid #4c5d46; border-radius: 19px 19px 25px 25px;
  background: linear-gradient(110deg,#a1af8d 0%,#839376 15%,#6f8164 70%,#5f7358);
  box-shadow: inset 0 2px 1px #dbe5c29c,inset 2px 0 2px #c3d0a955,inset -3px 0 4px #293d3750,0 8px 0 #46563e,0 10px 1px #344430,0 17px 20px #3e432b26;
}
.toy-calculator:not(.toy-workbench):before,.toy-calculator:not(.toy-workbench):after { content:''; position:absolute; bottom:8px; width:7px; height:7px; border-radius:50%; background:linear-gradient(135deg,transparent 44%,#46533e 45% 55%,transparent 56%),radial-gradient(circle at 35% 30%,#e1e4c3,#8b9577 65%,#46523e 70%); box-shadow:0 1px 0 #c5ceab; }
.toy-calculator:not(.toy-workbench):before { left:13px; }.toy-calculator:not(.toy-workbench):after { right:13px; }
.toy-calculator:not(.toy-workbench) .toy-plate { color:#e9edd3; text-shadow:0 1px #45563c; font-size:9px; letter-spacing:.15em; }
.calc-memory { margin-top:14px; border:3px solid #46543d; border-bottom:0; padding:6px 9px 0; border-radius:7px 7px 0 0; background:linear-gradient(110deg,#c3cda6,#d3dab9); color:#586647; box-shadow:inset 0 3px 5px #43513d30; }
.calc-screen { min-height:59px; padding:0 9px 9px; border:3px solid #46543d; border-top:0; border-radius:0 0 7px 7px; background:linear-gradient(110deg,#c3cda6,#d3dab9); color:#35432e; text-shadow:1px 1px #ffffff55; box-shadow:inset -2px -2px 4px #f3f6da55,0 1px 0 #d4dfb97a; font-variant-numeric:tabular-nums; }
.calc-keys { gap:10px; padding:12px 5px 5px; border-top:1px solid #53694b; box-shadow:inset 0 1px 0 #bccba03b; }
.calc-keys button { min-height:48px; border:1px solid #7f8869; border-bottom:5px solid #b0b294; background:linear-gradient(115deg,#fffcec,#e3e1c7); border-radius:6px 6px 9px 9px; box-shadow:inset 0 1px 1px #fff,0 2px 0 #45583c,0 4px 4px #2c3b2c36; text-shadow:0 1px #fff9; }
.calc-keys button.calc-operator { background:linear-gradient(115deg,#efd49b,#c6a86b); border-bottom-color:#a68b56; }
.calc-keys button:active { transform:translateY(3px); box-shadow:inset 0 1px 3px #5b593733,0 1px 0 #45583c; }
.timer-machine { width:min(320px,100%); height:auto; aspect-ratio:1; margin:8px auto; }
.timer-machine > .toy-object { filter:drop-shadow(0 9px 8px #33433220); }
.timer-machine:active { cursor:grabbing; }
.timer-markers { position:absolute; inset:0; pointer-events:none; }
.timer-markers span { position:absolute; transform:translate(-50%,-50%); font:600 11px/1 Georgia,serif; color:#4d5745; text-shadow:0 1px #fffaf0; }
.timer-clock { left:32%; right:32%; top:51.5%; padding:5px 0; border:2px solid #8f9b77; border-radius:4px; background:linear-gradient(120deg,#cbd3aa,#e5e9cb); box-shadow:inset 0 2px 4px #40503530,0 1px 0 #fff8; font-size:clamp(18px,5.5vw,24px); font-variant-numeric:tabular-nums; }
.timer-needle { top:24%; height:21.83%; width:3px; left:calc(50% - 1.5px); transform-origin:50% 100%; background:linear-gradient(90deg,#824b36,#df9a72,#8b513a); opacity:1; box-shadow:1px 1px 2px #51432e55; }
.timer-needle:after { content:''; position:absolute; bottom:-7px; left:-6px; width:15px; height:15px; border-radius:50%; border:1px solid #8e7847; background:radial-gradient(circle at 35% 30%,#f1dda0,#b19657 60%,#6c623e); box-shadow:0 2px 2px #574c3333; }
.piano-case { position:relative; padding:24px 16px 21px; border:1px solid #5d4b32; border-radius:8px 8px 14px 14px; background:repeating-linear-gradient(3deg,transparent 0 8px,#d8bc8c13 9px,transparent 11px),linear-gradient(110deg,#a47c51,#775634 40%,#a47d51 80%,#694b30); box-shadow:inset 0 2px 2px #e6c89799,inset 3px 0 2px #bda47b66,inset -3px 0 3px #483a2c88,0 8px 0 #4b3c2b,0 12px 15px #3c39252b; margin:0 0 12px; }
.piano-case > .toy-plate { display:table; margin:0 auto 20px; padding:4px 12px; border:1px solid #715d35; border-radius:2px; background:linear-gradient(120deg,#e2cd8c,#ba9e5a,#dfca8a); color:#5b4e31; box-shadow:0 1px 2px #332a1a80,inset 0 1px #fff7; text-shadow:0 1px #fff5; letter-spacing:.19em; }
.piano-scroll { border:1px solid #4c3b28; border-top:8px solid #403528; background:#34352b; box-shadow:0 -3px 0 #a27351,inset 0 3px 5px #1d261d66; }
.piano-keys { gap:1px; }
.piano-white { border-left-color:#d0cbb0; border-right-color:#b4b49c; border-bottom-color:#c2bfa5; background:linear-gradient(90deg,#e3e0cb,#fffeed 15%,#fdf9e4 75%,#dddac3); box-shadow:inset 0 13px 10px #605c392b,inset 0 -2px 0 #f9f7e4; }
.piano-white:after { content:''; position:absolute; top:9%; bottom:20%; left:16%; width:1px; background:#fff9; pointer-events:none; }
.piano-black { background:linear-gradient(90deg,#222a24,#515548 18%,#2d382d 75%,#17221b); box-shadow:2px 5px 3px #1c271f80,inset 0 1px #a4aa8b; border:1px solid #18221b; border-bottom:8px solid #17241c; }
.piano-black:after { content:''; position:absolute; inset:5px 13% 13px; border-radius:2px; background:linear-gradient(#7f876d50,transparent 40%); pointer-events:none; }
.piano-white.pressed { background:linear-gradient(90deg,#dad8bf,#f4efda); box-shadow:inset 0 14px 15px #3e472a55; transform:translateY(3px); }
.piano-black.pressed { background:linear-gradient(90deg,#1c2b20,#4e5c46,#233424); transform:translateY(3px); box-shadow:1px 2px 2px #17221980; }
.piano-felt { height:6px; margin-top:10px; background:linear-gradient(#805042,#af7961); box-shadow:0 1px #d4a576; }
.piano-navigation button { background:#e9dfc6; }
.whistle-mouth { width:min(300px,100%); height:auto; aspect-ratio:1; margin:4px auto 16px; border-radius:50%; background:radial-gradient(ellipse at 50% 65%,#f6efd9 0 45%,#e5ddc322 64%,transparent 65%); }
.whistle-mouth:focus-visible { outline-offset:-4px; }
.whistle-mouth .toy-object { filter:drop-shadow(0 7px 4px #7d57351a); transform-origin:46% 64%; transition:transform .15s ease-out; }
.whistle-mouth .toy-object-label { bottom:1px; font-size:11px; color:#7c795c; letter-spacing:.12em; }
.wind-scene { min-height:360px; background:linear-gradient(90deg,#f4f3de77 0 12%,transparent 12% 88%,#f4f3de88 88%),linear-gradient(#dae5de,#f0f0d9 75%,#e6e6cd); }
.wind-scene:before { content:''; position:absolute; top:0; left:10%; right:10%; height:11px; border-top:1px solid #65715b; background:repeating-linear-gradient(0deg,#a69065 0 2px,#b3a078 3px 5px); box-shadow:0 4px 6px #435a3e18; }
.wind-thread { top:10px; height:45px; border-color:#8f8569; box-shadow:1px 0 #f3f4dc; }
.wind-bell { top:30px; left:0; right:0; width:min(270px,100%); height:auto; aspect-ratio:1; margin:0 auto; transform:none; transform-origin:50% 7%; overflow:visible; }
.wind-bell > .toy-object { position:absolute; inset:0; filter:drop-shadow(0 4px 3px #5e7d701c); }
.wind-clapper { position:absolute; left:calc(50% - .5px); top:28.3%; height:28.3%; width:1px; background:linear-gradient(90deg,#9b8260,#e5d3a6); transform-origin:50% 0; pointer-events:none; }
.wind-clapper:after { content:''; position:absolute; left:-3px; top:39%; width:7px; height:27%; border:1px solid #9c854e; border-radius:4px 4px 2px 2px; background:linear-gradient(90deg,#bfa163,#f5e1a2,#a88e50); box-shadow:1px 1px 2px #41604f30; }
.wind-paper { position:absolute; left:43.75%; top:60.4%; width:15.4%; height:29.2%; border:1px solid #b4b592; background:repeating-linear-gradient(0deg,transparent 0 3px,#a99b6c08 4px),linear-gradient(110deg,#fffce4,#e5e2c4); box-shadow:2px 3px 3px #6d836422,inset 1px 0 #fff; transform-origin:50% -18%; pointer-events:none; }
.wind-paper:before { content:''; position:absolute; left:50%; bottom:100%; height:18%; border-left:1px solid #9c8b64; }
.wind-paper:after { content:'涼'; position:absolute; left:0; right:0; top:22%; font:clamp(14px,5vw,20px)/1.6 Georgia,'Yu Mincho',serif; color:#6b8e78; }
.metronome-body { filter:drop-shadow(0 10px 7px #59493022); }
.metronome-arm { width:5px; left:calc(50% - 2.5px); background:linear-gradient(90deg,#6c705b,#ecedd0 36%,#929b81 72%,#626c55); box-shadow:2px 2px 2px #3b453b45; }
.metronome-arm span { left:-11px; width:27px; height:30px; border:1px solid #88733f; background:linear-gradient(110deg,#a78b4d,#f0d98d 35%,#c3a763 75%,#88723e); box-shadow:inset 0 1px #fff4,1px 2px 2px #4e4a2b50; }
.metronome-arm span:after { content:''; position:absolute; left:7px; top:8px; width:10px; height:10px; border:1px solid #9f874c; border-radius:50%; background:linear-gradient(135deg,transparent 43%,#857340 44% 55%,transparent 56%),radial-gradient(circle at 30% 30%,#f4dda0,#b69b59); }
.record-player > .toy-object { filter:drop-shadow(0 8px 5px #473e302e); }
.record-disc { background:radial-gradient(ellipse at 35% 20%,#c2cab426,transparent 35%),repeating-radial-gradient(circle,#222d25 0 1px,#465143 1.5px 2px,#202b23 2.5px 3px); border:3px solid #25352b; box-shadow:inset 0 0 0 2px #6d79604d,0 3px 2px #1b291d66; }
.record-disc:after { content:''; position:absolute; width:2.8%; height:2.8%; border-radius:50%; background:radial-gradient(circle at 30% 25%,#ffffe7,#909c83); box-shadow:1px 1px 1px #1e3025; pointer-events:none; }
.record-disc span { width:36%; color:#554c32; font-size:clamp(8px,2.7vw,11px); letter-spacing:.12em; background:repeating-radial-gradient(circle,transparent 0 9px,#88774b25 10px 11px),linear-gradient(100deg,#e8d69c,#c9b675); border:2px solid #d8c58b; box-shadow:inset 0 0 0 3px #6e663b44; text-shadow:0 1px #ffedb14d; }
.record-arm { box-shadow:2px 2px 2px #23392955; border:1px solid #647460; }
.record-arm:before { content:''; position:absolute; top:-7px; left:-7px; width:20px; height:20px; border:2px solid #8e956e; border-radius:50%; background:radial-gradient(circle at 35% 25%,#e2d9a2,#a29c6c 50%,#6e785a); }
.record-arm:after { border:1px solid #53684f; background:linear-gradient(90deg,#52644b,#8d9b78 35%,#51694e); box-shadow:2px 2px 2px #2b402b55; }
.musicbox-machine { width:min(420px,100%); height:auto; aspect-ratio:1; margin:2px auto; }
.musicbox-machine > .toy-object { filter:drop-shadow(0 10px 7px #51402d29); }
.musicbox-crank { left:56.08%; right:auto; top:41.92%; width:32%; height:32%; min-width:70px; min-height:70px; border:0; background:transparent; border-radius:50%; font-size:0; box-shadow:none; }
.musicbox-crank:focus-visible { outline:2px dashed #7f8c63; outline-offset:-1px; }
.musicbox-crank:before { content:''; position:absolute; left:calc(50% - 10px); top:calc(50% - 10px); width:20px; height:20px; border:1px solid #806b3e; border-radius:50%; background:radial-gradient(circle at 35% 30%,#ead897,#9a8347 75%); box-shadow:1px 2px 2px #5a503844; }
.musicbox-crank span { position:absolute; inset:12%; font-size:0; transform-origin:50% 50%; }
.musicbox-crank span:before { content:''; position:absolute; left:48%; top:calc(50% - 3px); width:45%; height:7px; border:1px solid #948051; border-radius:4px; background:linear-gradient(#f6e8b3,#b89c5c 55%,#856f3c); box-shadow:1px 2px 2px #5a503844; }
.musicbox-crank span:after { content:''; position:absolute; left:83%; top:calc(50% - 12px); width:16px; height:25px; border:1px solid #604a33; border-radius:8px; background:repeating-linear-gradient(90deg,transparent 0 4px,#d4ae771a 5px),linear-gradient(90deg,#775033,#bd9160 40%,#80603c); box-shadow:1px 3px 2px #4d412d50; }
.musicbox-drum { position:absolute; left:30%; top:35.8%; width:29%; height:7%; overflow:hidden; border:1px solid #806b3e; border-radius:50% / 20%; transform:rotate(-8deg); background:repeating-linear-gradient(90deg,#8e743d 0 1px,transparent 1px 12px),linear-gradient(#a08748,#f1d88b 35%,#b69a55 75%,#736338); box-shadow:1px 2px 2px #5e522d60; pointer-events:none; }
.musicbox-drum:after { content:''; position:absolute; inset:0; background:radial-gradient(circle,#f7e9b8 0 1px,transparent 1.6px) 1px var(--drum-phase,0px)/9px 8px; }
.musicbox-cylinder { position:absolute; left:24.17%; top:35.83%; width:32.08%; height:7.08%; border:1px solid #806b3e; border-radius:5px 5px 7px 7px; transform:rotate(-8deg); overflow:hidden; background:linear-gradient(#7b693b,#d3bb78 18%,#f8e5a1 35%,#b79b55 75%,#756337); box-shadow:inset 0 1px #fff7,1px 2px 2px #534a2f55; pointer-events:none; }
.musicbox-cylinder:before { content:''; position:absolute; inset:0 5%; background:radial-gradient(circle,#f6e2a4 0 1px,#826c3b 1.2px 1.7px,transparent 1.9px) 0 var(--drum-phase,0px)/11px 9px; }
.musicbox-cylinder:after { content:''; position:absolute; inset:0; border-left:4px solid #a68c50; border-right:4px solid #8f7944; border-radius:inherit; }
.musicbox-comb { position:absolute; left:29%; top:41.2%; width:33%; height:3.6%; transform:rotate(-8deg); border:1px solid #7a7654; background:repeating-linear-gradient(90deg,#d9ddbf 0 2px,#606c53 2px 3px,#b0b99a 3px 5px),linear-gradient(#c1c7a7,#768565); box-shadow:0 2px 1px #62684a66; pointer-events:none; }
.toy-piano { padding:14px 12px 4px; }
.pudding-scene { height:320px; }
.pudding-plate { height:48px; bottom:27px; background:radial-gradient(ellipse at 50% 45%,#d8dac4 0 47%,#fffdf0 49% 64%,#e0e2cf 66% 72%,#fbf8e7 75%); border-color:#adb59d; box-shadow:0 3px 0 #b6bda5,0 8px 8px #71634826,inset 0 2px 0 #fff; }
.pudding-cup { top:73px; width:132px; height:130px; left:calc(50% - 66px); border:2px solid #a4b4a5; border-top-color:#d8e3ce; border-radius:9px 9px 37px 37px; background:repeating-linear-gradient(90deg,transparent 0 17px,#faffea8c 19px,#bdcbb35e 21px,transparent 23px),linear-gradient(90deg,#d7c58c,#f0dca4 22%,#f5dfa4 65%,#c9b87f); box-shadow:inset 5px 0 2px #ffffff70,inset -7px 0 3px #839d8350,0 8px 6px #74613e24; }
.pudding-cup:after { content:''; position:absolute; bottom:5px; left:13%; width:74%; height:8px; border-radius:50%; border-bottom:2px solid #c0cbb0; pointer-events:none; }
.pudding-caramel { position:absolute; bottom:0; left:1px; right:1px; height:18%; border-radius:0 0 32px 32px; background:linear-gradient(90deg,#986239b0,#ba8b4b85,#7e4f31a0); box-shadow:0 -2px 0 #dbb35b70; }
.pudding-lid { z-index:1; top:-13px; left:-9px; width:146px; height:34px; border-color:#b0b294; background:radial-gradient(ellipse at 50% 40%,#e3eac8 0 50%,#788c61 52% 57%,#e6e5c8 60%); color:#56683c; box-shadow:0 2px 1px #687d5250,inset 0 1px #fff; font-size:9px; letter-spacing:.08em; }
.pudding-lid:after { content:''; position:absolute; right:-7px; top:13px; width:22px; height:13px; border:1px solid #9da989; border-radius:2px 8px 6px 2px; background:linear-gradient(100deg,#dfe5c4,#bac6a2); }
.pudding-tab { z-index:2; bottom:-13px; left:55px; height:19px; background:linear-gradient(90deg,#c0ccb2,#edf0d7,#a1b397); border-color:#8c9b7b; box-shadow:1px 2px 1px #7a885254; transform-origin:50% 0; }
.pudding-flan { filter:drop-shadow(0 6px 5px #80673a24); }
.pop-sheet { position:relative; width:calc(100% - 28px); max-width:360px; gap:8px; padding:20px 14px; margin:18px auto 22px; border:1px solid #bbc7b6; border-radius:3px 9px 4px 7px; background:repeating-linear-gradient(23deg,transparent 0 11px,#a7b9a41c 12px,transparent 14px),linear-gradient(120deg,#f4f8eaae,#dce7d3aa 55%,#edf2dbbb); box-shadow:inset 2px 2px 0 #ffffffc7,inset -2px -2px 0 #adbca64d,3px 5px 7px #516b4520; }
.pop-sheet:after { content:''; position:absolute; inset:5px; border:1px solid #fff9; pointer-events:none; }
.pop-sheet button { position:relative; border:1px solid #a8bba5; background:radial-gradient(ellipse at 28% 21%,#fff 0 5%,#fff9 7% 15%,transparent 22%),radial-gradient(ellipse at 44% 36%,#f9fbea 0 28%,#e8f1dc88 49%,#a7bf9e80 76%,#f8fce4 82%,#c1d0b8 91%,#eef4dc 94%); box-shadow:inset -1px -3px 4px #66855f38,inset 1px 1px 2px #fff,1px 2px 2px #617f5720; transition:transform .06s,box-shadow .06s; }
.pop-sheet button:before { content:''; position:absolute; inset:9%; border-radius:50%; border:1px solid #f9ffe866; pointer-events:none; }
.pop-sheet button.popped { transform:scale(.95); border-color:#aabc9f; background:linear-gradient(24deg,transparent 44%,#91aa8055 45%,#f7fbe899 48%,transparent 51%),linear-gradient(125deg,transparent 42%,#99ac8a77 45%,#f2f8df 47%,transparent 50%),radial-gradient(ellipse at 50% 57%,#c3d3b7,#dde7d0 63%,#eff5df 66%,#c8d4b9 80%,#eef4dc); box-shadow:inset 0 2px 3px #69875c44; }
.pop-sheet button.popped:before { inset:17% 25% 20% 18%; border-radius:35% 55% 30% 60%; border-color:#a5b79877; transform:rotate(28deg); }
@media(max-width:600px) {
  .game-dialog:has(.toy-workbench) { width: calc(100% - 10px); max-height: calc(100dvh - 10px); padding: 13px; border-radius: 15px; }
  .game-dialog:has(.toy-workbench) > .dialog-header { top: -13px; }
  .game-dialog:has(.toy-workbench) #game-title { font-size: 21px; }
  .game-dialog:has(.toy-workbench) .game-intro { font-size: 12px; margin: 10px 0; }
  .toy-workbench { margin: 12px auto; }
  .toy-controls { gap: 8px; }
  .toy-controls button { padding: 9px 12px; }
  .toy-calculator:not(.toy-workbench) { margin: 16px auto 26px; padding: 18px 16px 23px; }
  .calc-keys { gap: 7px; margin-top: 13px; }
  .calc-screen { font-size: 26px; }
  .piano-case { padding: 18px 9px 14px; }
  .piano-keys { height: 220px; min-width: 440px; }
  .piano-keys button span { font-size: 10px; bottom: 12px; }
  .piano-keys kbd { display: none; }
  .piano-black { width: 10%; }
  .piano-navigation { display: flex; gap: 8px; justify-content: space-between; padding-top: 10px; }
  .piano-navigation button { font-size: 11px; padding: 8px 10px; min-height: 44px; }
  .pop-sheet { gap: 5px; padding: 12px 8px; width:calc(100% - 16px); }
  .musicbox-crank { right:auto; }
  .toy-piano { padding:10px 5px 2px; }
  .wind-scene { min-height:330px; }
  .toy-status { font-size: 11px; min-height: 40px; }
  .toy-footnote { font-size: 10px; }
}
@media(prefers-reduced-motion:reduce) {
  .toy-jiggle,.blowing .breath-note,.pudding-flan,.sand-flip { animation: none!important; }
  .breath-note { opacity: 0; }
  .blowing .breath-note { opacity: 1; }
  .pudding-cup,.pudding-lid,.record-arm { transition: none; }
}

/* Moving pieces added by the individual toy controllers. */
.toy-range input { height:44px; }
.pop-sheet button.popped { transform:none; }
.timer-knob { position:absolute; left:calc(50% - 22px); top:calc(45.83% - 22px); width:44px; height:44px; padding:0; border:0; border-radius:50%; background:transparent; pointer-events:none; }
.timer-knob:before { content:''; position:absolute; inset:7px; border:1px solid #8d7846; border-radius:50%; background:radial-gradient(circle at 33% 25%,#f6ebc5,#d4bd7c 45%,#ad9252 70%,#776a40); box-shadow:0 2px 3px #594b3244,inset 0 1px #fff6; }
.timer-knob:after { content:''; position:absolute; top:10px; left:17px; width:10px; height:24px; border:1px solid #999f7c; border-radius:4px; background:linear-gradient(90deg,#c9d2aa,#f3f4d5 40%,#bdc69e); box-shadow:1px 1px 1px #73644370; }
.timer-needle { top:24%; height:21.83%; transform-origin:50% 100%; }
.timer-clock { top:77%; left:34%; right:34%; padding:2px 0; font-size:20px; }
.pudding-touch { position:absolute; inset:0; z-index:3; display:block; width:100%; height:100%; padding:0; border:0; background:transparent; color:transparent; border-radius:8px; touch-action:manipulation; cursor:pointer; }
.pudding-touch:focus-visible { outline:2px dashed #7f9264; outline-offset:-9px; }
.pudding-nudge .pudding-flan { animation:pudding-nudge .48s ease-out; transform-origin:50% 82%; }
@keyframes pudding-nudge { 0% { transform:scale(1); } 18% { transform:skewX(4deg) scaleX(1.035) scaleY(.965); } 38% { transform:skewX(-3deg) scaleX(.98) scaleY(1.02); } 59% { transform:skewX(1.8deg) scaleX(1.015) scaleY(.985); } 80% { transform:skewX(-.6deg); } 100% { transform:none; } }
.calc-keys button.key-tapped { transform:translateY(3px); border-bottom-width:2px; box-shadow:inset 0 1px 3px #5b593733,0 1px 0 #45583c; }
.whistle-air { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.whistle-air > i { position:absolute; left:63%; top:51%; width:26%; height:9px; border-top:1.5px solid #a0b29a; border-radius:50%; opacity:0; transform-origin:0 50%; }
.whistle-air > i:nth-child(2) { top:56%; width:30%; height:5px; }
.whistle-air > i:nth-child(3) { top:60%; width:23%; height:11px; }
.blowing .whistle-air > i { animation:whistle-stream calc(1.4s - var(--whistle-pitch,.3)*.5s) ease-out infinite; }
.blowing .whistle-air > i:nth-child(2) { animation-delay:-.35s; }
.blowing .whistle-air > i:nth-child(3) { animation-delay:-.7s; }
@keyframes whistle-stream { 0% { opacity:0; transform:translateX(-8px) scaleX(.5); } 25% { opacity:.75; } 100% { opacity:0; transform:translateX(14px) scaleX(1.1); } }
.musicbox-comb.comb-pluck,.comb-pluck .musicbox-comb { animation:comb-pluck .12s linear; }
@keyframes comb-pluck { 0%,100% { transform:rotate(-8deg); } 25%,75% { transform:rotate(-8deg) translateY(-1px); } 50% { transform:rotate(-8deg) translateY(1px); } }
@media(prefers-reduced-motion:reduce) {
  .pudding-nudge .pudding-flan,.blowing .whistle-air > i,.musicbox-comb.comb-pluck,.comb-pluck .musicbox-comb { animation:none!important; }
  .blowing .whistle-air > i { opacity:.65; }
  .calc-keys button.key-tapped { transform:none; }
}