.studio{grid-template-areas:"launch launch" "stage controls";scroll-margin-top:16px;align-items:start}
.launch{grid-area:launch;display:grid;grid-template-columns:1fr minmax(200px,300px);gap:12px 24px;align-items:center}
.launch h2{font-size:30px;letter-spacing:-.04em;margin:8px 0}.launch p{margin:4px 0}.launch .start{margin:0;min-height:56px;font-size:18px}
.launch .audio-feedback{grid-column:1/-1;margin:0;min-height:21px}.launch .practice-task{font-weight:600}.audio-feedback[data-error="true"]{color:#843922;font-weight:600}
.studio>.stage{grid-area:stage}.studio>.controls{grid-area:controls}.controls h3{font-size:17px;margin:0 0 16px}.controls label:first-of-type{margin-top:0}
.pack-stage{position:relative;min-height:300px;border-radius:24px;overflow:hidden;display:grid;place-items:center;background:#e0e8cf;isolation:isolate;transition:background .25s}
.pack-stage:before,.pack-stage:after{content:"";position:absolute;z-index:-1;pointer-events:none;border-radius:50%}
.pack-stage[data-scene="grove"]{background:radial-gradient(ellipse at 20% 0%,#fff7c5 0,transparent 55%),linear-gradient(#d6e5ca,#9ab49a)}
.pack-stage[data-scene="grove"]:before{width:280px;height:280px;background:#b4c99e;left:-130px;top:-100px}.pack-stage[data-scene="grove"]:after{width:320px;height:100px;background:#799b7b;bottom:-60px;right:-60px}
.pack-stage[data-scene="sunset"]{background:linear-gradient(#f7d7a8,#e9aa89 65%,#bc8b81)}
.pack-stage[data-scene="sunset"]:before{width:90px;height:90px;background:#fff0bd;right:22px;top:26px}.pack-stage[data-scene="sunset"]:after{width:130%;height:100px;background:#987a77;bottom:-65px;left:-15%}
.pack-stage[data-scene="moon"]{background:radial-gradient(circle at 15% 25%,#d6e2df 0 2px,transparent 3px),radial-gradient(circle at 80% 65%,#d6e2df 0 1px,transparent 2px),linear-gradient(#223847,#446373)}
.pack-stage[data-scene="moon"]:before{width:65px;height:65px;right:26px;top:25px;background:#e9e9c8;box-shadow:0 0 40px #e9e9c855}
.pack-stage[data-scene="plum"]{background:radial-gradient(ellipse at 20% 80%,#906c87,transparent 75%),linear-gradient(#392e48,#695572)}
.pack-stage[data-scene="plum"]:before{width:70px;height:70px;right:26px;top:25px;background:#efd4c6;box-shadow:0 0 42px #efd4c633}
#fox-canvas{display:block;width:min(100%,280px);height:auto;aspect-ratio:1;position:relative;z-index:1}
.pack-controls{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:20px 0}.pack-controls label{display:flex;flex-direction:column;gap:8px;font-size:13px;font-weight:650}
.pack-controls select{min-height:44px;width:100%;background:#fffdf6;border:1px solid #aabca2;border-radius:12px;padding:10px;color:#243d36}
#pack-start{width:100%;min-height:52px}.pack-caption{margin-top:10px}.pack-preview-status{min-height:22px;margin:10px 0 0}
.offer .terms{padding-left:21px}.pack-kicker{color:#9a5938}.offer h2{margin-top:12px}.muted-line{border-top:1px solid #d4d9ca;padding-top:14px}
@media(max-width:680px){.studio{grid-template-areas:"launch" "stage" "controls";gap:22px}.launch{grid-template-columns:1fr;gap:12px}.launch h2{font-size:27px}.launch .audio-feedback{grid-column:1}.studio>.stage{min-height:245px}.stage .character{height:220px}.pack-stage{min-height:280px}.pack-controls{gap:10px}.intro .lead{font-size:17px}.start{scroll-margin-top:20px}}
@media(prefers-reduced-motion:reduce){.pack-stage{transition:none}}

@media(max-width:680px){
  [data-home-entry] .intro{margin:12px 0 24px}
  [data-home-entry] .intro h1{font-size:36px;letter-spacing:-.03em;margin:0 0 12px}
  [data-home-entry] .intro .lead{margin:0;max-width:28ch}
  [data-home-entry] .launch h2{margin:4px 0 8px}
}