:root{color-scheme:light;--ink:#4e2d13;--green:#47623a;--paper:#fff9e8;--rim:#b78649}*{box-sizing:border-box}body{margin:0;background:#ecdfc6;color:var(--ink);font-family:"BIZ UDPGothic","Yu Gothic",Meiryo,sans-serif}button,input{font:inherit;color:inherit}button{cursor:pointer;touch-action:manipulation}button:disabled{cursor:default}button:focus-visible,input:focus-visible{outline:3px solid #255b6a;outline-offset:3px}button:hover:not(:disabled){filter:brightness(1.035)}[hidden]{display:none!important}.toy-app{position:relative;max-width:1536px;margin:auto;color:var(--ink);--scene-width:min(100vw,calc((100svh - 62px)*1.5))}.toy-app p{margin:.3em 0}.title-screen{position:relative;min-height:690px;height:calc(100svh - 58px);background:url('./images/01-title-background-v2.webp') center/cover no-repeat;display:flex;justify-content:center}.title-content{width:min(620px,50%);text-align:center;display:flex;flex-direction:column;align-items:center;padding:22px 10px 18px;gap:6px}.title-content h1{width:100%;margin:0;line-height:0}.title-logo{width:min(100%,530px);height:auto;max-height:30svh;object-fit:contain}.subtitle{font-size:clamp(19px,2.2vw,28px);font-weight:900;letter-spacing:.15em;padding:5px 32px;border:2px solid #ce9a51;border-radius:16px;background:#f6d49b;box-shadow:0 3px 0 #a47b41}.tagline{font-size:clamp(15px,1.8vw,23px);font-weight:800;padding:6px 0 12px;text-shadow:0 1px 2px #fff}.image-button{border:0;background:transparent center/100% 100% no-repeat;font-weight:900;min-height:48px;display:inline-flex;justify-content:center;align-items:center;text-shadow:0 1px #fff7;line-height:1.2}.yellow{background-image:url('./images/12-button-yellow.webp')}.cream{background-image:url('./images/13-button-cream.webp')}.title-content>.yellow{width:88%;height:clamp(76px,10svh,104px);font-size:clamp(25px,3vw,39px)}.title-content>.cream{width:65%;height:57px;font-size:23px}.record-panel{background:url('./images/16-panel-record.webp') center/100% 100% no-repeat;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:15px 25px;min-width:200px;min-height:84px;line-height:1.4}.record-panel>span{font-size:14px;font-weight:800}.record-panel strong{font-size:30px;font-variant-numeric:tabular-nums}.title-note{font-size:12px;background:#fff7e8de;padding:5px 12px;border-radius:12px}.small{border:1px solid #ac8556;border-radius:13px;background:#fff9ec;min-height:44px;padding:8px 15px;font-weight:700;font-size:14px;box-shadow:0 2px 0 #875f3720}.sound{width:98px;white-space:nowrap}.notice,.sound-note{font-size:13px;text-align:center;background:#fff5df;line-height:1.7}.notice:empty,.sound-note:empty{display:none}.notice{padding:8px;border-radius:8px}.sound-note{padding:6px}.room-wrap{position:relative;width:var(--scene-width);max-width:100%;margin:auto}.room{position:relative;aspect-ratio:3/2;isolation:isolate;overflow:hidden}.room-background{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.toy{position:absolute;padding:0;border:0;background:transparent;z-index:3;border-radius:18px;display:flex;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent}.toy img{display:block;pointer-events:none;object-fit:contain;max-width:none;filter:drop-shadow(0 5px 3px #75502520)}.toy:disabled{opacity:1}.toy.is-stored{z-index:1;pointer-events:none}.toy.is-moving{z-index:2;pointer-events:none}.foreground{position:absolute;z-index:2;pointer-events:none}.play-hud{position:absolute;top:2%;left:1.2%;right:1.2%;display:grid;grid-template-columns:22% 38% 29%;justify-content:space-between;align-items:start;gap:2%;pointer-events:none}.mini-logo{width:100%;max-height:100px;object-fit:contain}.status-panel{min-height:68px;background:url('./images/14-panel-status.webp') center/100% 100% no-repeat;padding:14px 18px;display:flex;align-items:center;justify-content:center;gap:14px;font-weight:900;white-space:nowrap;font-size:clamp(14px,1.7vw,25px)}.status-panel strong{font-size:clamp(22px,3vw,39px);font-variant-numeric:tabular-nums;line-height:1.1}.timer{flex-direction:column;gap:1px;padding:10px 22px}.timer span{font-size:clamp(12px,1.3vw,17px)}.play-actions{position:absolute;top:14%;right:2%;display:flex;gap:7px;z-index:5}.input-panel{position:absolute;left:9%;right:9%;bottom:2.5%;height:23%;margin:0;background:url('./images/15-panel-input.webp') center/100% 100% no-repeat;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:14px 6%;gap:3px}.input-panel label{font-weight:900;font-size:clamp(14px,1.7vw,24px)}.input-row{display:flex;width:100%;gap:9px;max-width:720px}.input-row input{width:0;flex:1;min-width:0;font-size:clamp(24px,3vw,40px);font-weight:800;letter-spacing:.06em;border:2px solid #cda36b;border-radius:14px;background:#fffdf4;padding:3px 16px;min-height:48px;box-shadow:inset 0 2px 4px #ab6c1920}.input-row button{width:120px;font-size:24px;min-height:50px}#input-guide{font-size:12px;font-weight:700}.feedback-line{display:flex;align-items:center;justify-content:center;gap:12px;min-height:36px;width:100%}#feedback{font-size:clamp(12px,1.2vw,16px);font-weight:700;text-align:center;line-height:1.5}#feedback b{font-size:23px;color:var(--green);letter-spacing:.04em}#say{font-size:12px;min-height:36px;padding:5px 10px;white-space:nowrap}.result-screen{position:absolute;inset:31% 8% auto;z-index:8;padding-bottom:24px}.result-card{background:#fff9eaf2;border:3px solid #c99a5f;border-radius:24px;padding:20px 28px;text-align:center;box-shadow:0 8px 25px #61411d26}.result-card h2{font-size:clamp(21px,2.8vw,32px);margin:4px 0 10px}.eyebrow{font-weight:900;color:var(--green)}.result-times{display:flex;justify-content:center;gap:20px}.result-times .record-panel{min-width:0;width:220px}.best-message{color:var(--green);font-weight:900;font-size:19px}.result-actions{display:flex;gap:12px;justify-content:center;align-items:center;margin:10px 0}.result-actions .image-button{width:200px;min-height:56px;font-size:21px}.result-card h3{font-size:17px;margin:12px 0 0}.review-note{font-size:12px}.review{display:grid;grid-template-columns:repeat(8,1fr);gap:9px;margin-top:10px}.review button{background:#fffdfa;border:1px solid #d6b88d;border-radius:12px;padding:6px 2px;min-width:0;display:flex;flex-direction:column;align-items:center;gap:2px}.review img{width:100%;max-width:65px;height:54px;object-fit:contain}.review b{font-size:18px}.review span{font-size:12px}.toy-app[data-screen=result] .input-panel,.toy-app[data-screen=result] .play-actions{visibility:hidden}dialog{width:min(94vw,560px);border:3px solid #c49a61;border-radius:22px;background:#fff9e9;color:var(--ink);padding:25px;text-align:center;max-height:90dvh;overflow:auto;line-height:1.8}dialog::backdrop{background:#35200f66}dialog h2{margin:0 0 12px}.help-example{display:flex;justify-content:center;align-items:center;gap:16px}.help-example img{height:110px;width:104px;object-fit:contain}.help-example span{font-size:18px}.help-example b{font-size:28px}.dialog-actions{display:flex;justify-content:center;gap:12px}.dm-completion-status{position:relative;z-index:10;background:#fff6dc;color:var(--ink);padding:12px;text-align:center}.dm-completion-status button{min-height:44px}
@media(max-width:899px){.toy-app{--scene-width:100%}.title-screen{height:auto;min-height:calc(100svh - 58px);background-position:center;background-size:auto 100%}.title-content{width:min(95%,470px);padding:24px 14px 20px;gap:9px}.title-logo{max-height:25svh;width:93%}.subtitle{font-size:20px;padding:4px 26px}.tagline{font-size:16px;background:#fff8e9e8;border-radius:20px;padding:7px 12px}.title-content>.yellow{height:82px;font-size:30px;max-width:355px}.title-content>.cream{font-size:21px;width:70%}.record-panel{min-height:90px}.play-hud{position:relative;top:auto;left:auto;right:auto;order:0;padding:6px 6px 0;grid-template-columns:22% 36% 38%;gap:2%;background:#f2e2c2;align-items:center}.mini-logo{max-height:58px}.room-wrap{display:flex;flex-direction:column}.room{order:2;width:100%}.status-panel{font-size:11px;min-height:53px;padding:8px;gap:2px;flex-direction:column;line-height:1.1}.status-panel strong{font-size:23px}.timer span{font-size:10px}.timer strong{font-size:21px}.play-actions{position:relative;order:1;top:auto;right:auto;background:#f2e2c2;justify-content:flex-end;padding:5px 8px;gap:8px}.play-actions .small{min-height:38px;font-size:12px;padding:6px 12px}.input-panel{position:sticky;order:3;bottom:0;left:auto;right:auto;height:auto;min-height:184px;padding:14px 18px 10px;gap:5px;background-color:#f3ddb9;border-radius:16px;z-index:6;border:1px solid #bf955f;box-shadow:0 -3px 10px #60411516}.input-panel label{font-size:15px}.input-row input{font-size:27px;min-height:51px;padding:4px 10px}.input-row button{width:78px;font-size:20px;min-height:51px}.feedback-line{gap:5px;min-height:42px;flex-wrap:wrap}#feedback{font-size:12px}#feedback b{font-size:20px}#say{font-size:11px;min-height:36px}.result-screen{position:relative;inset:auto;padding:10px 7px}.toy-app[data-screen=result] .play-screen{height:calc(100vw * .22 + 114px);overflow:hidden}.toy-app[data-screen=result] .play-actions{visibility:hidden;min-height:20px;padding:0}.result-card{padding:16px 10px;border-radius:18px}.result-times{gap:8px}.result-times .record-panel{padding:12px 8px;min-height:80px}.record-panel strong{font-size:25px}.result-times .record-panel span{font-size:12px}.result-actions{gap:7px;flex-wrap:wrap}.result-actions .image-button{width:44%;font-size:19px;min-height:52px}.review{grid-template-columns:repeat(4,1fr);gap:7px}.review img{height:55px}.review b{font-size:17px}.result-card h2{font-size:21px}.best-message{font-size:17px}.help-example{gap:6px}.help-example span{font-size:14px}dialog{padding:18px 13px}}
@media(min-width:900px) and (max-height:720px){.toy-app{--scene-width:min(100vw,1000px)}.title-screen{height:auto;min-height:690px}.title-logo{max-height:215px}}
/* Keep the supplied button proportions and fit the real controls inside the wood. */
.title-screen{height:auto;min-height:calc(100svh - 58px)}.title-content{padding:12px 10px 18px;gap:5px}.title-content>*{flex-shrink:0}.title-logo{max-height:190px}.subtitle{font-size:22px;line-height:1.4;padding:4px 26px}.tagline{font-size:18px;padding:4px 0 9px}.title-content>.yellow{width:min(88%,360px);height:auto;aspect-ratio:3.34;font-size:32px}.title-content>.cream{width:min(70%,270px);height:51px;font-size:22px}.title-content>.record-panel{min-height:80px;padding:10px 25px}.title-note{line-height:1.5}
@media(min-width:900px){.input-panel{padding:8px 6%;gap:2px}.input-panel label{font-size:16px;line-height:1.3}.input-row input{font-size:30px;line-height:1.2;min-height:48px;max-height:48px}.input-row button{min-height:48px;max-height:48px}.feedback-line{min-height:32px}#say{min-height:32px;font-size:11px}#input-guide{line-height:1.2}.toy-app{--scene-width:min(100vw,calc((100svh - 62px)*1.5))}}
@media(max-width:899px){.title-logo{max-height:170px}.title-content{padding:20px 14px}.subtitle{font-size:19px}.tagline{font-size:15px;padding:7px 12px}.title-content>.yellow{font-size:28px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}}

@media(min-width:900px) and (max-height:700px){.toy-app{--scene-width:min(100vw,1050px)}}
@media(max-width:899px){.play-actions .small{min-height:44px}}
.storage-front{inset:0;width:100%;height:100%}
/* Preparation is shown inside the fixed-size sound buttons. Keep the live
   announcement available to screen readers without adding page height. */
.sound{padding-inline:8px}
.sound-note.is-preparing{position:absolute;top:0;left:0;width:1px;height:1px;padding:0;margin:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}