/* A single stage, with a quiet and stable space for the grown-up's cue. */
.teddy-experience{display:flex;flex-direction:column;flex:1;min-height:0;gap:20px;padding-top:22px}
.teddy-heading{display:flex;justify-content:space-between;align-items:center;gap:20px}
.teddy-heading h1{font:900 clamp(30px,3.2vw,52px)/1.08 'Trebuchet MS',Arial,sans-serif;letter-spacing:-.045em}
.teddy-kicker{font-size:13px;font-weight:700;letter-spacing:.06em;margin-bottom:7px}
.teddy-world{display:grid;grid-template-columns:minmax(0,1fr) 300px;flex:1;min-height:0;border:2px solid var(--ink);border-radius:20px;overflow:hidden;background:var(--party-pink)}
.teddy-theatre{display:flex;flex-direction:column;min-width:0;min-height:0;padding:24px 20px 20px}
.teddy-chapters{list-style:none;display:flex;gap:24px;padding:0;margin:0;justify-content:center;flex-wrap:wrap;flex-shrink:0}
.teddy-chapters li{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:#5e4564}
.teddy-chapters li>span{display:grid;place-items:center;border:1.5px solid var(--ink);border-radius:50%;width:27px;height:27px;font-size:12px;background:var(--party-pink)}
.teddy-chapters [aria-current]{color:var(--ink)}
.teddy-chapters [aria-current]>span{background:var(--party-yellow)}
.teddy-chapters [aria-current]{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:2px}
.teddy-scene-slot{flex:1;min-height:0;display:grid;place-items:center;width:100%}
.teddy-scene-slot>svg{display:block;width:100%;height:100%;max-height:100%;overflow:hidden}
.teddy-scene-note{font-size:15px;line-height:1.4;font-weight:700;text-align:center;min-height:21px;margin-top:4px}
.teddy-guide{display:flex;flex-direction:column;justify-content:center;gap:32px;padding:32px;background:var(--party-yellow);border-left:2px solid var(--ink);min-width:0}
.teddy-guide-label{font-size:12px;font-weight:700;letter-spacing:.06em;display:block;margin-bottom:16px}
.teddy-guide h2{font:900 32px/1.12 'Trebuchet MS',Arial,sans-serif;letter-spacing:-.035em;max-width:19ch}
.teddy-guide p{font-size:17px;line-height:1.6;margin-top:18px;max-width:38ch}
.teddy-primary{flex-shrink:0}
#app .teddy-primary .action-button{--button-width:100%;--button-height:50px;background:var(--party-teal);padding:8px 18px}
#app .teddy-primary [data-action="music"][aria-pressed="true"]{background:var(--party-pink)}
.teddy-materials{display:flex;gap:18px;flex-wrap:wrap;margin-top:26px}
.teddy-materials>span{display:flex;gap:7px;align-items:center;font-size:13px;font-weight:700}
.teddy-materials i{display:grid;place-items:center;border:1.5px solid var(--ink);border-radius:50%;background:var(--party-pink);width:30px;height:30px;font-style:normal;font-size:17px}
.teddy-materials>span:nth-child(2) i{background:var(--party-teal)}
.teddy-steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:26px}
#app .teddy-steps .action-button{--button-width:100%;font-size:13px}
.teddy-tools{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;min-height:44px}
.teddy-tools-left,.teddy-tools-right,.teddy-picture-tools{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
#app .teddy-tools .action-button{--button-width:130px}
.teddy-duration{font-size:13px;font-weight:700}
.teddy-timer{position:relative}
.teddy-timer summary{display:flex;align-items:center;gap:12px;cursor:pointer;border:2px solid var(--ink);border-radius:9px;padding:0 12px;min-height:44px;font-size:13px;font-weight:bold;background:var(--party-yellow)}
.teddy-timer summary::after{content:'⌃';font-size:15px}
.teddy-timer summary:focus-visible{outline:4px solid var(--ink);outline-offset:4px}
.teddy-timer summary span{font-variant-numeric:tabular-nums}
.teddy-timer-popover{position:absolute;right:0;bottom:calc(100% + 12px);width:280px;padding:20px;display:grid;gap:12px;background:var(--party-yellow);border:2px solid var(--ink);border-radius:14px;z-index:4}
.teddy-timer-popover .timer{font-size:42px;margin:0}
.teddy-timer-popover p{font-size:13px;line-height:1.4}
#app .teddy-timer-popover .action-button{--button-width:100%}
.card[data-id="teddy"] .card-picture>svg{height:100%;width:100%;overflow:hidden}
@media(min-aspect-ratio:4/3) and (min-width:900px){
 .teddy-experience{gap:14px;padding-top:16px}
 .teddy-world{grid-template-columns:minmax(0,1fr) clamp(270px,24vw,370px)}
 .teddy-theatre{padding:18px 14px 16px}
 .teddy-guide{padding:clamp(22px,2.5vw,38px);gap:24px}
 .teddy-heading h1{font-size:clamp(30px,3vw,48px)}
}
@media(max-aspect-ratio:4/3) and (min-width:651px){
 .teddy-world{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto}
 .teddy-guide{border-left:0;border-top:2px solid var(--ink);flex-direction:row;align-items:center;justify-content:space-between;gap:40px;padding:26px 36px}
 .teddy-guide-copy{flex:1}.teddy-guide-label{margin-bottom:9px}.teddy-guide h2{max-width:none}.teddy-guide p{max-width:65ch;margin-top:10px}
 .teddy-primary{width:230px}.teddy-materials{margin-top:16px}.teddy-steps{display:flex;margin-top:16px}
 #app .teddy-steps .action-button{--button-width:90px}
}
@media(max-height:760px) and (min-width:900px){
 .teddy-heading h1{font-size:32px}.teddy-kicker{font-size:11px;margin-bottom:4px}
 .teddy-experience{gap:12px;padding-top:12px}.teddy-guide h2{font-size:28px}.teddy-guide p{font-size:15px;line-height:1.5;margin-top:12px}.teddy-guide-label{margin-bottom:12px}
 .teddy-theatre{padding:14px 10px 12px}.teddy-chapters{gap:16px}.teddy-chapters li{font-size:12px}.teddy-scene-note{font-size:13px}
 .teddy-materials,.teddy-steps{margin-top:18px}.teddy-guide{gap:20px}
}
@media(max-width:899px){.teddy-experience{flex:none}.teddy-scene-slot{min-height:300px}.teddy-world{min-height:530px}.teddy-tools{justify-content:center}.teddy-duration{font-size:12px}}
@media(max-width:650px){
 .teddy-experience{padding-top:20px;gap:16px}.teddy-heading{gap:12px}.teddy-heading h1{font-size:28px}.teddy-kicker{font-size:11px}
 #app .teddy-heading .action-button{--button-width:100px}
 .teddy-world{display:flex;flex-direction:column;min-height:0;border-radius:16px}
 .teddy-theatre{padding:18px 4px 16px}.teddy-chapters{gap:10px}.teddy-chapters li{font-size:10px;gap:4px}.teddy-chapters li>span{width:21px;height:21px;font-size:10px}
 .teddy-scene-slot{height:230px;min-height:0;flex:auto}.teddy-scene-note{font-size:12px;margin-top:0;padding:0 6px}
 .teddy-guide{border-left:0;border-top:2px solid var(--ink);padding:24px;gap:22px}.teddy-guide h2{font-size:28px}.teddy-guide p{font-size:16px;margin-top:12px}
 .teddy-guide-label{font-size:11px;margin-bottom:10px}.teddy-materials{margin-top:18px}.teddy-steps{display:flex;gap:6px;margin-top:20px}
 #app .teddy-steps .action-button{--button-width:calc((100% - 18px)/4);font-size:12px}
 .teddy-tools{gap:12px}.teddy-tools-left{order:2}.teddy-tools-right{order:3}.teddy-picture-tools{width:100%;justify-content:center;gap:8px}
 #app .teddy-picture-tools .action-button{--button-width:calc((100% - 16px)/3);font-size:12px}
 .teddy-timer-popover{left:0;right:auto}
}
/* Absolute SVG sizing prevents its intrinsic ratio from pushing through the caption. */
.teddy-scene-slot{position:relative}
.teddy-scene-slot>svg{position:absolute;inset:0;min-height:0;overflow:hidden!important}
@media(prefers-reduced-motion:reduce){#app .teddy-picture-tools [data-action="motion"],#app .teddy-picture-tools [data-action="replay-demo"]{display:none}}
/* Paper-theatre framing: a flat keyline and cut-paper lettering, not depth effects. */
.teddy-world{border-width:3px;box-shadow:0 0 0 4px #fffaf0}
.teddy-heading h1{-webkit-text-stroke:5px #fffaf0;paint-order:stroke fill}
.teddy-scene-note{align-self:center;background:#fffaf0;border:2px solid var(--ink);border-radius:8px;padding:8px 18px;min-height:0;max-width:calc(100% - 24px);line-height:1.3}
.teddy-chapters li>span{border-width:2px}
@media(max-width:650px){.teddy-heading h1{-webkit-text-stroke:3px #fffaf0}.teddy-scene-note{padding:7px 12px}.teddy-world{box-shadow:0 0 0 3px #fffaf0}}