:root{font-family:"Pretendard","Apple SD Gothic Neo","Malgun Gothic",sans-serif;color:#393442;background:#f8f5ee;font-synthesis:none;--purple:#7355dc;--muted:#91899a;--border:#e6dfd4;--s:#7951be;--o:#bb6a26;--c:#2b8982}
*{box-sizing:border-box}body{margin:0}button{font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}button:focus-visible{outline:3px solid #a586ed;outline-offset:4px}button:disabled{cursor:default}button:not(:disabled):active{transform:translateY(1px)}button,fieldset{min-width:0}svg{display:block}button svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}[hidden]{display:none!important}
.app-shell{width:min(100%,1920px);height:100dvh;min-height:610px;margin:auto;padding:0 clamp(24px,3.5vw,68px);display:flex;flex-direction:column}.site-header{height:104px;flex:none;display:flex;align-items:center;justify-content:space-between;gap:20px}.brand{display:flex;align-items:center;gap:14px}.brand-icon{width:46px;height:46px;border-radius:15px;background:var(--purple);display:grid;place-items:center;box-shadow:0 4px 0 #6245c2}.brand-icon svg{width:30px;height:30px;fill:none;stroke:#fff;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}.brand-eyebrow{font-size:11px;font-weight:600;color:#98909f;letter-spacing:1px}.brand h1{margin:3px 0 0;font-size:clamp(20px,1.7vw,29px);letter-spacing:-1px}.header-tools{display:flex;align-items:center;gap:12px}.timer{display:flex;align-items:center;gap:10px;margin-right:20px}.timer svg{width:25px;height:25px;fill:none;stroke:#968aa3;stroke-width:1.6;stroke-linecap:round}.timer #timeLeft{font-family:Arial,sans-serif;font-size:28px;letter-spacing:1px;font-weight:700;font-variant-numeric:tabular-nums}.timer-label{font-size:11px;color:var(--muted);align-self:center;max-width:24px;line-height:1.5}.icon-button{border:1px solid var(--border);background:#fffcf7;min-height:42px;border-radius:12px;padding:9px 13px;display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;color:#756b80}.icon-button:hover{background:#eee7fa}.icon-button[aria-pressed=false] .muted-stroke{display:block}.icon-button .muted-stroke{display:none}#soundButton[aria-pressed=false] path:first-child{d:path('m11 5-6 4H2v6h3l6 4Z')}
main{display:grid;grid-template-rows:minmax(0,1fr) 96px 116px;gap:18px;flex:1;min-height:0}.factory-panel{background:#fffcf6;border:1px solid var(--border);border-radius:28px;display:flex;flex-direction:column;min-height:0;overflow:hidden;position:relative;box-shadow:0 3px 0 #eae4d944}.stage-heading{display:flex;justify-content:space-between;gap:14px;align-items:center;padding:28px 34px 0;flex:none;position:relative;z-index:1}.tiny-label{font-size:10px;letter-spacing:2px;color:#a09588;font-weight:700;display:flex;align-items:center;gap:7px}.tiny-label>span{width:5px;height:5px;background:#ab99c5;border-radius:50%}.stage-heading h2{margin:9px 0 0;font-size:clamp(20px,2vw,32px);letter-spacing:-1px;font-weight:750}.status-badge{display:flex;align-items:center;gap:8px;border:1px solid #e5dcef;background:#f4eff9;color:#8a72a2;padding:10px 14px;border-radius:24px;font-size:12px;font-weight:600;white-space:nowrap}.status-dot{width:6px;height:6px;flex:none;border-radius:50%;background:#b6a1cc}body[data-phase=playing] .status-dot{background:#68a18a}body[data-phase=playing] .status-badge{background:#eef5ec;color:#58836d;border-color:#dcebdc}.stage-viewport{position:relative;flex:1;min-height:0;display:flex;align-items:center;padding:4px 12px}.factory-scene{width:100%;height:100%;overflow:visible}.factory-scene text{font-family:Arial,sans-serif}.factory-scene .letter-text{text-anchor:middle;font-size:111px;font-weight:800;user-select:none}.factory-scene .beat-line-label{font-family:inherit;text-anchor:middle;fill:#8e71b3;font-size:16px;font-weight:700;letter-spacing:1px}.letter-shell{stroke-width:3px}.stage-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:2px 34px 22px;flex:none;font-size:12px;color:#a0988e}.letter-legend{display:flex;align-items:center;gap:19px;font-family:Arial,sans-serif}.letter-legend>span{display:flex;align-items:center;gap:5px;font-size:12px;font-weight:600;white-space:nowrap}.letter-legend .legend-caption{font-family:inherit;font-size:10px;font-weight:400;color:#a0988e}.letter-legend b{font-size:17px}.legend-s{color:var(--s)}.legend-o{color:var(--o)}.legend-c{color:var(--c)}
.count-card{position:absolute;top:9%;left:39%;display:flex;align-items:center;gap:12px;background:#fffdf8ed;border:1px solid #e4d8f0;border-radius:18px;box-shadow:0 6px 24px #907ba015;padding:7px 19px;color:#9575b3;pointer-events:none}.count-card span{font-size:15px;font-weight:700}.count-card strong{font-family:Arial,sans-serif;font-size:42px;line-height:1.15;color:var(--purple);width:28px;text-align:center}.pause-card{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:11px;background:#fffcf6da;z-index:2;backdrop-filter:blur(3px)}.pause-symbol{display:grid;place-items:center;width:53px;height:53px;border:1px solid #dfd1ec;background:#ede3f9;border-radius:18px;font-size:28px;font-weight:700;color:#9372b3}.pause-card strong{font-size:25px;letter-spacing:-1px}.pause-card>span:last-child{font-size:12px;color:#918398;max-width:90%;text-align:center}
.beat-panel{display:flex;align-items:center;justify-content:space-between;padding:0 34px;border:1px solid #e5dded;border-radius:21px;background:#f0ebf6;gap:20px}.beat-caption{display:flex;align-items:center;gap:13px;min-width:225px}.small-note{font-size:31px;color:#a68ac3}.beat-caption strong{display:block;font-size:16px;color:#78628f;letter-spacing:-.4px}.beat-caption div>span{display:block;font-size:11px;color:#a093ae;margin-top:5px}.beat-track{position:relative;width:min(470px,50%);display:flex;justify-content:space-between;align-items:center;gap:16px}.beat-connector{position:absolute;height:2px;background:#e1d6ec;left:24px;right:24px;top:50%}.beat-dot{width:49px;height:49px;flex:none;border-radius:50%;border:1px solid #ddcfea;background:#f8f4fc;color:#bda8cf;display:grid;place-items:center;position:relative;font:700 22px Arial,sans-serif}.beat-dot.active{color:#fff;background:var(--purple);border-color:var(--purple);box-shadow:0 0 0 6px #e1d4f5}.tempo-tag{font:11px Arial,sans-serif;letter-spacing:.6px;color:#9982b0;margin-left:25px}.tempo-tag b{font-size:18px;margin-right:3px;font-weight:600}.teacher-controls{display:flex;align-items:center;gap:30px;padding:14px 26px;background:#fffdf9;border:1px solid var(--border);border-radius:22px}.teacher-controls fieldset{border:0;margin:0;padding:0;display:flex;align-items:center;gap:22px;flex:1}.teacher-controls legend{float:left;color:#9b91a2;font-size:12px;font-weight:600;min-width:53px;padding:0}.choice-options{display:flex;gap:8px;flex:1;max-width:490px}.choice-options button{flex:1;min-height:63px;border:1px solid #ebe6ee;background:#faf8fc;border-radius:13px;color:#9b90a6;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}.choice-options button strong{font-size:14px;font-weight:600}.choice-options button span{font:11px Arial,sans-serif;letter-spacing:.5px}.choice-options button[aria-pressed=true]{background:#eee7fc;color:#7956b6;border:1.5px solid #b59bde;box-shadow:0 2px 0 #d7c8ed}.choice-options button:disabled:not([aria-pressed=true]){opacity:.45}.control-divider{width:1px;height:46px;background:#ece5f0}.play-controls{display:flex;align-items:center;gap:11px;flex:1;max-width:500px}.primary-button{border:0;border-radius:15px;background:var(--purple);color:#fff;min-height:63px;display:flex;align-items:center;justify-content:center;gap:13px;font-size:21px;font-weight:700;box-shadow:0 4px 0 #5e40c2;padding:10px 24px;flex:1;white-space:nowrap}.primary-button:hover{background:#6849ce}.primary-button:disabled{opacity:.6}.primary-button>span:first-child{font-size:18px}.reset-button{display:flex;align-items:center;justify-content:center;gap:9px;min-height:63px;padding:10px 20px;border:1px solid #e5dceb;border-radius:15px;background:#fff;color:#92819f;font-size:14px;font-weight:600;white-space:nowrap}.reset-button:hover{background:#f7f1fb}.reset-button:disabled{opacity:.4}.page-footer{height:43px;flex:none;display:flex;align-items:center;justify-content:space-between;font-size:10px;color:#aea498;letter-spacing:.3px}.page-footer i{margin:0 8px;font-style:normal;color:#c4b9ad}
dialog{border:1px solid #e9dff2;border-radius:30px;padding:0;width:570px;max-width:calc(100vw - 28px);max-height:calc(100dvh - 28px);background:#fffdf9;color:#393442;box-shadow:0 30px 90px #34234033;overflow:auto}dialog::backdrop{background:#33263b80;backdrop-filter:blur(7px)}.completion-content{position:relative;z-index:1;padding:30px 40px;text-align:center}.celebration-icon{width:65px;height:65px;margin:0 auto 16px;border-radius:21px;background:#f0e7fb;color:#9871cc;font-size:40px;display:grid;place-items:center;transform:rotate(-8deg)}.completion-content .tiny-label{justify-content:center;letter-spacing:1px}.completion-content h2{font-size:34px;letter-spacing:-1.5px;margin:12px 0}.completion-content>p{font-size:14px;color:#9b8ca6}.total-result{margin-top:22px;background:#f4eefb;border:1px solid #e9def5;border-radius:19px;padding:18px}.total-result>span{display:block;font-size:12px;color:#9b84b0}.total-result>strong{color:var(--purple);font:700 58px Arial,sans-serif;display:block;margin-top:5px}.total-result small{font:500 17px "Malgun Gothic",sans-serif;margin-left:8px}.letter-results{display:flex;gap:10px;margin-top:13px}.letter-results>div{flex:1;padding:12px 10px;display:flex;align-items:center;justify-content:center;gap:12px;border-radius:13px}.letter-results b{font:700 35px Arial,sans-serif}.letter-results span{font-size:12px}.letter-results strong{font-size:20px;margin-right:4px}.result-s{color:var(--s);background:#efe5f9}.result-o{color:var(--o);background:#fcedd7}.result-c{color:var(--c);background:#e1f1eb}.completion-content p.result-note{font-size:11px;margin:18px 0 22px}.result-buttons{display:flex;gap:12px}.result-buttons .reset-button{flex:1}.result-buttons .primary-button{flex:1.5;font-size:18px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}#notice{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);max-width:calc(100vw - 32px);width:max-content;padding:12px 20px;border-radius:13px;background:#50415d;color:white;font-size:13px;z-index:20;text-align:center;box-shadow:0 3px 15px #45345720}#confetti{position:absolute;inset:0;pointer-events:none;overflow:hidden;border-radius:30px;z-index:2}#confetti i{position:absolute;width:7px;height:13px;top:-20px;animation:confetti-fall 1.7s ease-in forwards;animation-delay:var(--delay);transform:rotate(var(--angle));background:var(--color)}@keyframes confetti-fall{to{transform:translate(var(--drift),640px) rotate(400deg);opacity:0}}.expanded-view{position:fixed;inset:0;background:#f8f5ee;z-index:30;overflow:auto}:fullscreen{background:#f8f5ee}
@media(min-width:1550px) and (min-height:850px){.site-header{height:130px}main{grid-template-rows:minmax(0,1fr) 116px 139px;gap:24px}.stage-heading{padding:34px 44px 0}.stage-footer{padding:0 44px 28px;font-size:14px}.status-badge{font-size:14px}.letter-legend>span{font-size:15px}.letter-legend b{font-size:21px}.beat-caption strong{font-size:20px}.beat-caption div>span{font-size:13px}.beat-dot{width:59px;height:59px;font-size:27px}.teacher-controls{padding:20px 34px}.choice-options button,.primary-button,.reset-button{min-height:77px}.choice-options button strong{font-size:17px}.primary-button{font-size:26px}.reset-button{font-size:17px}.page-footer{height:53px;font-size:12px}}
@media(max-width:1050px){.app-shell{padding:0 22px}.site-header{height:91px}.brand{gap:10px}.brand h1{font-size:21px}.header-tools{gap:8px}.timer{margin-right:8px;gap:6px}.timer-label{display:none}.icon-button{padding:9px}.icon-button span{font-size:11px}.stage-heading{padding:23px 26px 0}.stage-heading h2{font-size:24px}.stage-footer{padding:0 25px 19px}.stage-hint{font-size:11px}.letter-legend{gap:12px}.letter-legend .legend-caption{display:none}.teacher-controls{gap:20px;padding:14px 20px}.teacher-controls fieldset{gap:13px}.teacher-controls legend{font-size:11px;min-width:45px}.choice-options button strong{font-size:13px}.primary-button{font-size:19px;padding:10px 15px}.reset-button{padding:10px 13px;font-size:13px}.beat-panel{padding:0 25px}.beat-caption{min-width:195px}.tempo-tag{margin-left:0}.beat-track{gap:10px}}
@media(max-width:650px) and (orientation:portrait){.app-shell{height:100dvh;min-height:700px;padding:0 14px}.site-header{height:104px;align-items:flex-start;padding-top:19px;position:relative;gap:8px}.brand{gap:9px}.brand-icon{width:34px;height:34px;border-radius:11px}.brand-icon svg{width:25px;height:25px}.brand-eyebrow{font-size:9px}.brand h1{font-size:18px;margin-top:1px}.header-tools{gap:6px}.icon-button{min-height:35px;border-radius:10px;padding:7px}.icon-button svg{width:18px;height:18px}.icon-button span{display:none}.timer{position:absolute;right:3px;bottom:12px;margin:0}.timer svg{width:18px;height:18px}.timer #timeLeft{font-size:20px}.timer-label{display:block;max-width:none;font-size:9px;margin-left:2px}main{grid-template-rows:minmax(275px,1fr) 81px 164px;gap:12px}.factory-panel{border-radius:22px}.stage-heading{padding:22px 19px 0;display:block}.tiny-label{font-size:8px;letter-spacing:1.3px}.stage-heading h2{font-size:21px;margin-top:11px}.status-badge{font-size:10px;padding:6px 10px;position:absolute;left:19px;top:84px}.stage-viewport{padding:40px 0 0;min-height:0}.factory-scene{width:100%;height:auto;max-height:100%}.stage-footer{display:block;padding:0 19px 17px}.stage-hint{font-size:10px;display:block;margin-bottom:11px;line-height:1.6}.letter-legend{justify-content:flex-end;gap:17px}.letter-legend .legend-caption{display:inline;font-size:9px;margin-right:auto}.letter-legend>span{font-size:10px}.letter-legend b{font-size:15px}.count-card{top:38px;left:auto;right:16px;padding:4px 11px;border-radius:12px;gap:7px}.count-card span{font-size:11px}.count-card strong{font-size:26px;width:18px}.beat-panel{padding:0 16px;gap:10px;border-radius:18px}.beat-caption{min-width:0;flex:none}.small-note{display:none}.beat-caption strong{font-size:12px}.beat-caption div>span{font-size:9px;margin-top:4px;max-width:87px;line-height:1.5}.beat-track{width:57%;gap:6px}.beat-dot{width:31px;height:31px;font-size:17px}.beat-dot.active{box-shadow:0 0 0 4px #e1d4f5}.tempo-tag{display:none}.teacher-controls{flex-direction:column;gap:11px;padding:13px 14px;border-radius:19px}.teacher-controls fieldset{width:100%;gap:10px}.teacher-controls legend{min-width:42px;font-size:10px}.choice-options{gap:6px}.choice-options button{min-height:53px;gap:4px;border-radius:10px}.choice-options button strong{font-size:12px}.choice-options button span{font-size:9px}.control-divider{display:none}.play-controls{width:100%;max-width:none;gap:9px}.primary-button,.reset-button{min-height:54px;border-radius:12px}.primary-button{font-size:19px}.reset-button{font-size:12px;min-width:102px}.page-footer{height:39px;font-size:8px}.page-footer i{margin:0 4px}.pause-card strong{font-size:21px}.pause-card>span:last-child{font-size:10px}.completion-content{padding:25px 21px}.completion-content h2{font-size:29px}.letter-results{gap:6px}.letter-results>div{gap:8px}.letter-results b{font-size:28px}.letter-results strong{font-size:18px}.result-buttons .reset-button{min-width:0}.celebration-icon{width:50px;height:50px;font-size:32px}}
@media(max-height:650px) and (orientation:landscape){.app-shell{min-height:340px;padding:0 18px}.site-header{height:60px}.brand-icon{width:33px;height:33px;border-radius:11px}.brand-icon svg{width:25px;height:25px}.brand-eyebrow{font-size:8px}.brand h1{font-size:19px}.header-tools{gap:7px}.timer{margin-right:6px}.timer #timeLeft{font-size:23px}.timer svg{width:20px;height:20px}.icon-button{min-height:34px;padding:6px 9px;font-size:10px}.icon-button svg{width:18px;height:18px}main{grid-template-rows:minmax(0,1fr) 49px 70px;gap:8px}.factory-panel{border-radius:18px}.stage-heading{padding:12px 20px 0}.tiny-label{font-size:8px}.stage-heading h2{font-size:17px;margin-top:4px}.status-badge{font-size:10px;padding:6px 10px}.stage-footer{padding:0 20px 9px;font-size:10px}.stage-hint{font-size:9px}.letter-legend>span{font-size:9px}.letter-legend b{font-size:13px}.stage-viewport{padding:0 8px}.beat-panel{padding:0 22px;border-radius:13px}.beat-caption{min-width:195px;gap:9px}.small-note{font-size:24px}.beat-caption strong{font-size:12px}.beat-caption div>span{font-size:9px;margin-top:2px}.beat-dot{width:31px;height:31px;font-size:16px}.beat-dot.active{box-shadow:0 0 0 3px #e1d4f5}.tempo-tag b{font-size:15px}.teacher-controls{padding:8px 15px;border-radius:14px;gap:16px}.teacher-controls fieldset{gap:10px}.teacher-controls legend{min-width:43px;font-size:10px}.choice-options{gap:6px}.choice-options button{min-height:45px;gap:3px;border-radius:9px}.choice-options button strong{font-size:11px}.choice-options button span{font-size:9px}.primary-button,.reset-button{min-height:45px;border-radius:10px}.primary-button{font-size:16px;box-shadow:0 3px 0 #5e40c2}.reset-button{font-size:11px;padding:8px 13px}.reset-button svg{width:16px;height:16px}.control-divider{height:32px}.page-footer{height:23px;font-size:8px}.count-card{top:2%;left:43%;padding:4px 12px;gap:7px;border-radius:12px}.count-card strong{font-size:28px;width:20px}.count-card span{font-size:11px}.pause-card{gap:6px}.pause-symbol{width:34px;height:34px;font-size:20px;border-radius:12px}.pause-card strong{font-size:18px}.pause-card>span:last-child{font-size:10px}.completion-content{padding:20px 28px}.celebration-icon{display:none}.completion-content h2{font-size:27px;margin:8px 0}.completion-content>p{margin:9px 0;font-size:11px}.total-result{padding:10px;margin-top:13px}.total-result>strong{font-size:38px}.letter-results{margin-top:8px}.letter-results>div{padding:7px 10px}.letter-results b{font-size:27px}.completion-content p.result-note{margin:10px 0}.result-buttons button{min-height:43px}}
@media(max-width:740px) and (orientation:landscape){.icon-button span{display:none}.stage-heading h2{font-size:15px}.tiny-label{display:none}.stage-heading{padding-top:9px}.stage-footer{padding-bottom:7px}.stage-hint{font-size:8px}.beat-caption{min-width:170px}.teacher-controls{gap:10px}.teacher-controls legend{display:none}.play-controls{gap:7px}.primary-button{padding:8px 11px}.reset-button{padding:8px 9px}}
@media(prefers-reduced-motion:reduce){#confetti{display:none}button{transition:none}}
@media(min-width:651px) and (min-height:651px) and (max-height:849px){.site-header{height:88px}main{grid-template-rows:minmax(0,1fr) 76px 100px;gap:14px}.page-footer{height:32px}.stage-heading{padding-top:24px}.stage-footer{padding-bottom:18px}.teacher-controls{padding-top:10px;padding-bottom:10px}.beat-dot{width:43px;height:43px;font-size:20px}}
@media(max-height:650px) and (orientation:landscape){.site-header{height:46px}main{grid-template-rows:minmax(0,1fr) 40px 60px;gap:7px}.page-footer{height:19px}.teacher-controls{padding-top:6px;padding-bottom:6px}.beat-dot{width:27px;height:27px;font-size:15px}.stage-heading{padding-top:8px}.stage-footer{padding-bottom:7px}.brand-icon{height:31px;width:31px}.brand h1{font-size:17px}.brand-eyebrow{font-size:7px}.beat-caption strong{font-size:11px}.beat-caption div>span{font-size:8px}}
/* Beat slots show straight, offbeat and connected phrases on a constant music grid. */
.factory-scene .letter-text{font-size:103px}.beat-caption{min-width:250px}.beat-track{width:min(510px,50%);gap:7px}.half-dot{position:relative;flex:none;width:25px;height:25px;display:grid;place-items:center;border-radius:50%;font:600 12px Arial,sans-serif;color:#c2b3ce;background:#eee7f4;border:1px solid transparent}.beat-dot.scheduled{border:2px solid #af92d1;color:#8a65b1;background:#fdfaff}.half-dot.scheduled{background:#d9c8ed;border-color:#bca0da;color:#7e59a2}.beat-dot.active{background:#e9dcf7;border-color:#a586cb;color:#8a66ab;box-shadow:0 0 0 4px #e3d7f1}.beat-dot.hit,.half-dot.hit{background:#7355dc;color:white;border-color:#7355dc;box-shadow:0 0 0 5px #d8c7f3}.beat-connector{right:10px}.beat-caption strong{font-size:16px}body[data-phase=playing] .small-note{color:#9670bf}
@media(max-width:1050px){.beat-caption{min-width:206px}.beat-track{gap:5px}.half-dot{width:21px;height:21px;font-size:10px}.beat-caption div>span{font-size:10px}}
@media(max-width:650px) and (orientation:portrait){.beat-caption{min-width:0;max-width:92px}.beat-caption strong{font-size:12px}.beat-caption div>span{font-size:9px}.beat-track{width:65%;gap:3px}.beat-dot{width:26px;height:26px;font-size:14px}.half-dot{width:14px;height:14px;font-size:8px}.beat-dot.active,.beat-dot.hit,.half-dot.hit{box-shadow:0 0 0 2px #d8c7f3}}
@media(max-height:650px) and (orientation:landscape){.beat-caption{min-width:190px}.beat-caption strong{font-size:11px}.beat-caption div>span{font-size:8px}.half-dot{width:17px;height:17px;font-size:9px}.beat-dot.active,.beat-dot.hit,.half-dot.hit{box-shadow:0 0 0 2px #d8c7f3}.beat-track{gap:5px}}
@media(min-width:1550px) and (min-height:850px){.beat-caption strong{font-size:20px}}
/* Simplified classroom surface: just the factory and teacher controls. */
main{grid-template-rows:minmax(0,1fr) 116px}.stage-heading{position:absolute;right:28px;top:22px;z-index:3;padding:0;pointer-events:none}.stage-viewport{padding:42px 20px 18px}.teacher-controls legend{min-width:68px}.choice-options button span{letter-spacing:1.5px;font-weight:600}
@media(min-width:1550px) and (min-height:850px){main{grid-template-rows:minmax(0,1fr) 139px}.stage-heading{right:34px;top:26px}}
@media(min-width:651px) and (min-height:651px) and (max-height:849px){main{grid-template-rows:minmax(0,1fr) 100px}}
@media(max-width:650px) and (orientation:portrait){main{grid-template-rows:minmax(275px,1fr) 164px}.stage-heading{top:18px;left:19px;right:auto;padding:0}.status-badge{position:static}.stage-viewport{padding:47px 0 18px}.teacher-controls legend{min-width:55px}}
@media(max-height:650px) and (orientation:landscape){main{grid-template-rows:minmax(0,1fr) 60px}.stage-heading{right:16px;top:9px;padding:0}.stage-viewport{padding:32px 8px 5px}.teacher-controls legend{min-width:55px}}
@media(max-width:740px) and (orientation:landscape){.teacher-controls legend{display:block;font-size:9px;min-width:51px}}

/* Difficulty and tempo remain independent, side by side on classroom screens. */
.teacher-controls{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) 1px minmax(260px,.92fr);gap:24px}.teacher-controls fieldset{gap:16px;width:100%}.teacher-controls legend{min-width:64px;white-space:nowrap}.choice-options{max-width:none}.speed-options button span{letter-spacing:0;font-weight:400}.play-controls{width:100%;max-width:none}.result-buttons{margin-top:22px}
@media(max-width:1200px){.teacher-controls{gap:16px;padding-left:20px;padding-right:20px;grid-template-columns:minmax(0,1fr) minmax(0,1fr) 1px minmax(230px,.9fr)}.teacher-controls fieldset{gap:10px}.teacher-controls legend{min-width:55px;font-size:10px}}
@media(min-width:651px) and (max-width:1050px) and (min-height:651px){main{grid-template-rows:minmax(0,1fr) 178px}.teacher-controls{grid-template-columns:1fr 1fr;gap:12px 24px;padding:14px 20px}.control-divider{display:none}.teacher-controls .play-controls{grid-column:1/-1}.teacher-controls .primary-button,.teacher-controls .reset-button{min-height:54px}}
@media(max-width:650px) and (orientation:portrait){main{grid-template-rows:minmax(275px,1fr) 222px}.teacher-controls{grid-template-columns:1fr;gap:11px;padding:13px 14px}.teacher-controls fieldset{gap:10px}.teacher-controls legend{min-width:55px}.choice-options button span{font-size:9px}.result-buttons{margin-top:18px}}
@media(max-height:650px) and (orientation:landscape){main{grid-template-rows:minmax(0,1fr) 85px}.teacher-controls{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(175px,.95fr);gap:14px;padding:8px 14px}.teacher-controls fieldset{display:block}.teacher-controls legend{display:block;float:none;min-width:0;font-size:9px;margin-bottom:6px}.control-divider{display:none}.choice-options{gap:5px}.choice-options button strong{font-size:11px}.choice-options button span{font-size:9px;letter-spacing:0}.teacher-controls .primary-button{font-size:14px;padding:8px;gap:7px}.teacher-controls .reset-button{font-size:10px;padding:8px;gap:4px}.teacher-controls .play-controls{gap:6px}.result-buttons{margin-top:13px}}