main.practice{max-width:var(--page-width);margin:0 auto;padding:0 var(--page-gutter) 64px}.practice .heading{padding:clamp(18px,3vw,30px) 0 18px}.practice .heading .way{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:10px}.practice .heading .way[hidden]{display:none}.practice .back{padding:10px 0;font-size:var(--text-label);font-weight:var(--weight-control);color:var(--soft);text-decoration:none}.practice .back:hover{color:var(--edge);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}.practice .heading .row{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 24px}.practice .kicker{margin:0 0 6px;font-size:var(--text-label);font-weight:var(--weight-control);color:var(--soft)}.practice h1{margin:0;font-size:var(--text-tool-title);font-weight:var(--weight-heading);letter-spacing:var(--tracking-heading);line-height:1.15;text-wrap:balance}.practice .count{margin:8px 0 0;font-size:var(--text-label);font-weight:var(--weight-label);color:var(--soft);font-variant-numeric:tabular-nums}.practice .acts{display:flex;flex-wrap:wrap;gap:8px;max-width:100%;margin-left:auto}.practice .acts[hidden]{display:none}.practice .acts .practice-tool{display:inline-flex;align-items:center;justify-content:center;width:var(--control-size);min-height:var(--control-size);padding:0}.practice .acts .practice-tool svg{width:22px;height:22px}.practice h2{margin:0 0 12px;font-size:var(--text-section);font-weight:var(--weight-heading);letter-spacing:var(--tracking-heading)}.practice h2 small{display:block;margin-top:4px;font-size:var(--text-label);font-weight:var(--weight-body);color:var(--soft)}.practice section{max-width:860px}.practice .note{max-width:860px;margin:0 0 16px;padding:10px 14px;border:2px solid var(--outline);background:var(--paper-hover);font-size:var(--text-label);font-weight:var(--weight-label)}.practice .go{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}.practice .go .btn{display:inline-flex;align-items:center;justify-content:center;min-width:120px;text-decoration:none;color:var(--edge)}.practice .btn.save{background:var(--mustard);box-shadow:var(--pop)}.practice .btn.save:disabled{background:var(--paper);box-shadow:none;opacity:.45;cursor:default}.practice section[hidden]{display:none}.choose p{margin:0 0 14px}.choose label{display:block;margin-bottom:6px;font-size:var(--text-label);font-weight:var(--weight-control);color:var(--soft)}.choose textarea{width:100%;max-width:560px;min-height:var(--control-size);padding:8px 12px;background:var(--surface);border:2px solid var(--outline);border-radius:0;font:400 20px/1.3 var(--read);color:var(--edge)}.choose textarea::placeholder{font:var(--weight-body) var(--text-body)/1.3 var(--ui);color:var(--soft);opacity:.8}.choose .missing{margin:8px 0 0;color:var(--tomato);font-size:var(--text-label);font-weight:var(--weight-label)}.doors{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:28px;padding-top:18px;border-top:1px solid var(--rule)}.doors a{font-weight:var(--weight-control);color:var(--edge)}.practice-workspace{display:none}.practice-workspace:has(>section:not([hidden])){display:grid;grid-template-columns:minmax(300px,360px) minmax(0,1fr);align-items:start;gap:32px}.practice .practice-workspace>section{min-width:0;max-width:none}.settings{position:sticky;top:16px;max-height:calc(100dvh - 80px);overflow-y:auto;overscroll-behavior-y:contain;scrollbar-gutter:stable;margin:0;padding:0 24px 24px 0;border-right:1px solid var(--rule)}.dials{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);align-items:end;gap:16px;padding:0 0 22px;border-bottom:1px solid var(--rule)}.dials label:has(#source-in),.dials label:has(#mode-in){grid-column:1 / -1}.dials label,.dials .type-mode{display:flex;flex-direction:column;align-items:stretch;gap:6px;min-width:0;font-size:var(--text-label);font-weight:var(--weight-control);color:var(--soft)}.dials .seg .btn{flex:1;padding-inline:10px;white-space:nowrap}.dials .seg .btn[aria-pressed=true]{box-shadow:none}.dials select{width:100%;min-width:0;min-height:var(--control-size);padding:0 10px;background:var(--surface);border:2px solid var(--outline);border-radius:0;color:var(--edge);font-weight:var(--weight-control)}.seed-control{grid-column:1 / -1;min-width:0}.seed-row{display:flex;gap:8px;margin-top:6px}.seed-row input{flex:1;min-width:0;width:100%;min-height:var(--control-size);padding:0 10px;background:var(--surface);border:2px solid var(--outline);border-radius:0;color:var(--edge);font-weight:var(--weight-control);font-variant-numeric:tabular-nums}.seed-row .btn{flex:none}.seed-control small{display:block;margin-top:6px;font-size:var(--text-caption);color:var(--soft)}.types{display:grid;grid-template-columns:minmax(0,1fr);align-items:start;gap:16px;margin-top:22px}.types .group{padding:16px;border:1px solid var(--rule);background:var(--paper)}.types h3{margin:0 0 10px;padding-bottom:10px;border-bottom:1px solid var(--rule);font-size:var(--text-label);font-weight:var(--weight-control);letter-spacing:.04em;text-transform:uppercase;color:var(--soft)}.types label{display:grid;grid-template-columns:18px minmax(0,1fr);gap:2px 10px;align-items:start;min-height:var(--control-size);padding:8px 0;cursor:pointer}.types label:not(.off):hover .what{text-decoration:underline;text-underline-offset:3px}.types label.off{color:var(--soft);cursor:default}.types input{width:18px;height:18px;margin:3px 0 0;accent-color:var(--edge)}.types .what{font-size:var(--text-label);font-weight:var(--weight-control);line-height:1.5}.types small{grid-column:2;font-size:var(--text-caption);color:var(--soft)}.settings .go{margin-top:22px}@media(max-width:900px){.practice-workspace:has(>section:not([hidden])){grid-template-columns:minmax(0,1fr)}.settings{position:static;max-height:none;overflow-y:visible;overscroll-behavior-y:auto;scrollbar-gutter:auto;padding:0 0 24px;border-right:0;border-bottom:1px solid var(--rule)}.dials{grid-template-columns:repeat(2,minmax(0,1fr))}.dials label:has(#mode-in){grid-column:auto}.types{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto 1fr}.types .group-hearing{grid-row:span 2}}@media(max-width:520px){.types{grid-template-columns:minmax(0,1fr);grid-template-rows:auto}.types .group-hearing{grid-row:auto}.dials label:has(#source-in){grid-column:1 / -1}.settings .go .btn{width:100%}}.questions{margin:0;padding:0;list-style:none}.questions .section{margin:18px 0 6px;font-size:var(--text-label);font-weight:var(--weight-control);letter-spacing:.04em;text-transform:uppercase;color:var(--soft)}.questions .q{margin:8px 0;padding:12px 14px;background:var(--surface);border:2px solid var(--outline)}.questions .head{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline}.questions .prompt{color:var(--soft);font-size:var(--text-label);font-weight:var(--weight-label)}.opts{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}.opt{display:inline-flex;align-items:center;gap:2px;padding:2px 4px 2px 12px;border:2px solid var(--rule);font:400 1.125rem/1.4 var(--read)}.opt.answer{border-color:var(--edge);background:var(--paper-hover);font-weight:700}.opt.asked{border-style:dashed}.opt.sound{font-family:var(--ui)}.opt.tile{padding-right:12px}.opt select{max-width:2.6em;padding:0;border:0;background:transparent;color:var(--edge);font-size:var(--text-label)}.speaker{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:0;background:transparent;color:var(--edge);cursor:pointer}.speaker svg{width:20px;height:20px}.speaker:hover{background:var(--paper-deep)}.tools{display:flex;flex-wrap:wrap;gap:6px}.tools .btn{min-height:36px;padding:0 10px;font-size:var(--text-caption)}.tools .btn:disabled{opacity:.35;cursor:default}.tools select{min-height:36px;padding:0 6px;background:var(--surface);border:2px solid var(--outline);border-radius:0;color:var(--edge);font-size:var(--text-caption);font-weight:var(--weight-control)}.questions .none{color:var(--soft)}.question-tip{margin:6px 0 12px;font-size:var(--text-label);color:var(--soft)}.play .question-tip{max-width:58ch;margin:-8px auto 20px}.practice:has(>.play:not([hidden])) .heading{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;padding-bottom:16px;border-bottom:1px solid var(--rule)}.practice:has(>.play:not([hidden])) .heading .way{margin-bottom:0}.practice:has(>.play:not([hidden])) .heading .row{flex:none}.practice:has(>.play:not([hidden])) .heading .row>div:first-child{display:none}.practice .play{max-width:800px;margin:28px auto 0;padding:28px clamp(16px,3vw,32px) 32px;text-align:center;background:var(--paper);border:1px solid var(--rule)}.play .progress{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 10px;margin:0 0 14px;font-size:var(--text-label);font-weight:var(--weight-control);color:var(--soft)}.play .prompt{margin:0 0 22px;font-size:clamp(1.5rem,3vw,1.875rem);text-wrap:balance}.play .hear{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 22px;margin-bottom:20px;font-size:var(--text-lead)}.play .hear svg{width:26px;height:26px}.play-controls{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;margin:0 8px 0 0;padding-right:16px;border-right:1px solid var(--rule)}.play-controls .practice-tool{display:grid;place-items:center;width:44px;min-height:44px;padding:0}.play-controls .practice-tool svg{width:22px;height:22px}.play-controls .practice-tool:disabled{opacity:.45;cursor:default}.question-hint{position:relative;display:flex;flex-wrap:wrap;justify-content:center;gap:10px;padding:16px;margin:12px 0 20px;background:var(--paper-hover);border:1px solid var(--rule)}.question-hint[hidden]{display:none}.question-hint p{flex-basis:100%;margin:0;padding-right:28px;font-size:var(--text-label)}.hint-close{position:absolute;top:0;right:0;width:44px;height:44px;padding:0;border:0;background:transparent;color:var(--edge);font-size:24px;cursor:pointer}.question-hint .btn{min-height:44px;font-size:var(--text-label)}.practice-tiles{display:block;--tile-gap: .1em;--ending-gap: .2em;max-width:100%;overflow-x:auto;margin:12px 0;padding:0 8px;list-style:none;font:400 24px/1 var(--read)}.practice-tiles .line{display:block;padding:0}.practice-tiles .unit{cursor:inherit}.practice-tiles .hint-unit{background:var(--mustard);border-color:var(--outline)}.hint-used{padding:2px 8px;background:var(--paper-hover);border:1px solid var(--rule);font-size:var(--text-caption)}.choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;max-width:600px;margin:0 auto}.choice{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-width:0;min-height:112px;padding:22px 12px 16px;background:var(--surface);border:2px solid var(--outline);border-radius:0;box-shadow:var(--pop);cursor:pointer}.choice-wrap{min-width:0;border:2px solid var(--outline);background:var(--surface);box-shadow:var(--pop);display:flex;flex-direction:column;align-items:center}.choice-wrap:last-child:nth-child(odd){grid-column:1 / -1;width:calc((100% - 14px)/2);justify-self:center}.choice-wrap .choice{width:100%;border:0;box-shadow:none;background:transparent}.choice-wrap .choice:hover{background:var(--paper-hover)}.choice-wrap .speaker.inline{width:44px;height:44px}.choice:hover{background:var(--paper-hover)}.choice:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--shadow)}.choice kbd{position:absolute;top:6px;left:8px;font:var(--weight-control) var(--text-caption)/1 var(--ui);color:var(--soft)}.choice .word{max-width:100%;overflow-wrap:anywhere;font:400 clamp(1.5rem,3vw,1.75rem)/1.3 var(--read);color:var(--edge)}.choices.listen .word{color:var(--soft)}.play .hint{margin:14px 0 0;font-size:var(--text-label);color:var(--soft)}.stage{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 16px;margin:0 0 20px}.stage-word{display:inline-flex;align-items:center;gap:4px;font:400 clamp(2rem,5vw,2.75rem)/1.2 var(--read);color:var(--edge)}.stage-word .speaker{width:44px;height:44px}.stage .gap{display:inline-block;width:1.6em;height:.9em;margin:0 .08em;border-bottom:3px solid var(--edge);vertical-align:baseline}.stage .op{font:var(--weight-heading) 1.75rem/1 var(--ui);color:var(--soft)}.btn.sound-cue{display:inline-flex;align-items:center;gap:8px;min-height:52px;padding:0 18px;font-size:var(--text-label)}.btn.sound-cue svg{width:22px;height:22px}.choices.values .word{font-family:var(--ui);font-weight:var(--weight-control)}.choices.values .word:lang(en){font-family:var(--read);font-weight:400}.build{display:grid;justify-items:center;gap:16px;max-width:600px;margin:0 auto}.built{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px;width:100%;min-height:72px;padding:10px;background:var(--surface);border:2px solid var(--outline)}.built .placeholder{font-size:var(--text-label);color:var(--soft)}.tile-bank{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}.tile{min-width:56px;min-height:56px;padding:0 12px;background:var(--surface);border:2px solid var(--outline);border-radius:0;box-shadow:var(--pop);font:400 1.75rem/1 var(--read);color:var(--edge);cursor:pointer}.tile:hover{background:var(--paper-hover)}.tile:disabled{opacity:.3;box-shadow:none;cursor:default}.tile.placed{min-width:48px;min-height:48px;box-shadow:none;background:var(--paper-hover)}.build .go{justify-content:center;margin-top:0}.dictation{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}.dictation input{width:min(100%,14em);min-height:52px;padding:8px 14px;background:var(--surface);border:2px solid var(--outline);border-radius:0;font:400 1.75rem/1.2 var(--read);color:var(--edge);text-align:center}.dictation .btn{min-height:52px;padding:0 22px}@media(max-width:520px){.practice:has(>.play:not([hidden])) .heading .row{flex:1 1 100%}.play-controls{margin-right:0;padding-right:0;border-right:0}.practice .play{margin-top:20px;padding:24px 16px}.choices{grid-template-columns:minmax(0,1fr)}.choice{min-height:88px}.choice-wrap:last-child:nth-child(odd){grid-column:auto;width:100%}}.marks{margin:0;padding:0;list-style:none}.marks>li{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:18px 0;border-bottom:1px solid var(--rule)}.review-prompt{flex-basis:100%;margin:0;font-size:var(--text-label);font-weight:var(--weight-control)}.explanation{flex-basis:100%;min-width:0;padding:14px;background:var(--paper);border:1px solid var(--rule)}.explanation p{margin:0 0 12px;font-size:var(--text-label)}.answer-comparison{display:grid;gap:6px}.feedback-option{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;padding:6px 10px;border:1px solid var(--rule)}.feedback-option.correct{background:var(--paper-hover);border-color:var(--edge)}.feedback-word{display:inline-flex;align-items:center;gap:6px;font-family:var(--read)}.feedback-detail{font-size:var(--text-label)}.feedback-status{margin-left:auto;font-size:var(--text-caption);font-weight:var(--weight-control)}.feedback-word .speaker{width:44px;height:44px}.marks b{width:1.4em;font-size:var(--text-lead)}.marks .right b{color:var(--leaf)}.marks .wrong b{color:var(--tomato)}.marks .given{color:var(--soft);font-size:var(--text-label)}.marks .add{display:inline-flex;align-items:center;gap:8px;min-height:36px;margin-left:auto;padding:0 10px;font-size:var(--text-caption)}.marks .add svg{width:18px;height:16px}.marks .add:disabled{opacity:.5;cursor:default}
