@charset "UTF-8";
:root{--ink:#263f38;--green:#28564c;--green-dark:#1a4037;--muted:#6c7972;--cream:#f8f8f2;--line:#dfe5da;--pale:#eaf0e3;--yellow:#e6bc58;--red:#9c4438;--font:system-ui,-apple-system,"Microsoft JhengHei",sans-serif;--character:"標楷體","DFKai-SB","BiauKai","Noto Serif TC",serif}
*{box-sizing:border-box}body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.65}button,input,select{font:inherit}button,a,input,summary,select{touch-action:manipulation}button{cursor:pointer;color:inherit}a{color:var(--green)}button:disabled{opacity:.4;cursor:default}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #a97518;outline-offset:4px}input[type=checkbox],input[type=radio],input[type=range]{accent-color:var(--green)}[hidden]{display:none!important}button{transition:background .15s,transform .15s}button:hover:not(:disabled){filter:brightness(.96)}h1,h2,h3,p{margin-top:0}h2{font-size:25px;letter-spacing:.02em}h3{font-size:16px}small{font-size:13px}svg{fill:none;stroke:currentColor;stroke-width:1.7}.skip{position:fixed;top:-100px;z-index:10;background:white;padding:12px}.skip:focus{top:10px}.topbar{max-width:1240px;margin:auto;display:flex;justify-content:space-between;align-items:center;padding:26px 30px;border-bottom:1px solid var(--line)}.brand{display:flex;gap:13px;align-items:center;font-size:22px;font-weight:750;text-decoration:none;letter-spacing:2px}.brand small{display:block;font-weight:400;font-size:11px;letter-spacing:1px;color:var(--muted);margin-top:1px}.brand-icon{display:grid;place-items:center;width:45px;height:45px;border:2px solid var(--green);border-radius:11px;font-family:var(--character);font-size:28px;position:relative}.brand-icon span{position:absolute;width:18px;height:18px;border:2px solid var(--cream);background:var(--green);border-radius:50%;right:-7px;bottom:-4px}.brand-icon span:after{content:"";width:9px;height:2px;background:var(--green);position:absolute;right:-6px;bottom:-3px;transform:rotate(45deg)}nav{display:flex;gap:24px}.text-btn{border:0;background:transparent;font-size:14px;padding:8px 0}.text-btn span{margin-left:10px}main{max-width:1180px;padding:0 30px;margin:auto}.hero{display:flex;align-items:center;justify-content:space-between;min-height:425px;padding:40px 40px 45px 25px;gap:40px}.eyebrow{font-size:13px;letter-spacing:2px;display:flex;align-items:center;gap:9px;margin-bottom:16px}.dot{width:7px;height:7px;background:var(--green);border-radius:50%}.hero h1{font-size:49px;line-height:1.45;letter-spacing:2px;font-weight:700;margin-bottom:18px}.underlined{position:relative;z-index:0}.underlined:after{content:"";position:absolute;background:#ead591;height:11px;bottom:4px;left:0;width:100%;z-index:-1;border-radius:50%}.hero p{font-size:15px;color:#65756c;margin-bottom:22px;line-height:1.9}.hero-tags{display:flex;gap:9px;font-size:11px}.hero-tags span{border:1px solid var(--line);border-radius:5px;padding:3px 9px}.word-art{width:340px;position:relative;flex-shrink:0;margin-right:45px}.art-label{font-size:11px;letter-spacing:3px;margin:0 0 13px 11px;transform:rotate(-3deg);color:var(--muted)}.art-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;transform:rotate(-5deg);background:#e9eddf;padding:15px;border-radius:19px;box-shadow:12px 18px 0 #f0efe3}.art-grid>span{display:grid;place-items:center;aspect-ratio:1;background:#fffef8;color:#71806d;font-family:var(--character);font-size:40px;border-radius:9px;border:1px solid #dfe3d3;position:relative}.art-grid .found{background:var(--green);color:#fff;font-size:50px;transform:rotate(6deg) scale(1.08);box-shadow:0 7px 10px #28564c25;border:0}.found i{position:absolute;right:8px;top:18px;font:13px var(--font);writing-mode:vertical-rl;letter-spacing:2px}.art-note{position:absolute;right:-73px;top:135px;font-family:var(--character);font-size:20px;transform:rotate(8deg);color:var(--green)}.art-note svg{width:80px;height:50px;display:block;margin-left:-40px}.art-spark{position:absolute;right:3px;top:-24px;font-size:28px;color:#bd9550}.catalog{display:grid;grid-template-columns:234px 1fr;background:#fff;border:1px solid var(--line);border-radius:20px;overflow:hidden;box-shadow:0 6px 24px #29453404;scroll-margin-top:20px}.filters{padding:30px 24px;border-right:1px solid var(--line);background:#f3f5ed}.section-kicker{font-size:11px;color:var(--muted);letter-spacing:1.5px;margin-bottom:5px}.filters h2{font-size:21px;margin-bottom:29px}.filter-label{font-size:10px;color:#81907b;font-weight:650;letter-spacing:1px;margin-bottom:10px}.filter-label span{font-size:13px;margin-left:10px;color:var(--ink)}.publishers{display:grid;gap:6px;margin-bottom:25px}.publishers button{background:transparent;border:1px solid transparent;padding:10px 14px;border-radius:7px;text-align:left;font-size:14px;display:flex;justify-content:space-between}.publishers button span{opacity:0}.publishers button[aria-pressed=true]{background:var(--green);color:white;box-shadow:0 3px 5px #28564c16}.publishers button[aria-pressed=true] span{opacity:1}.grades{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.grades button{background:white;border:1px solid var(--line);border-radius:7px;padding:8px 0;font-size:13px}.grades button[aria-pressed=true]{border-color:var(--green);background:#e1e9d8;color:var(--green);font-weight:700}.support-note{border-top:1px solid #dde3d6;margin-top:30px;padding-top:20px}.note-icon{font-size:11px;border:1px solid #cdd7c4;border-radius:4px;padding:2px 6px;color:var(--green)}.support-note p{font-size:11px;color:var(--muted);line-height:1.9;margin:9px 0 0}.lesson-panel{padding:30px}.lesson-heading{display:flex;align-items:center;justify-content:space-between;gap:10px}.lesson-heading h2{margin-bottom:18px;font-size:23px}.count-label{font-size:11px;color:var(--muted);background:#f2f4ee;border-radius:30px;padding:4px 12px;white-space:nowrap}.search{display:flex;align-items:center;border:1px solid var(--line);border-radius:8px;padding:9px 12px;gap:8px;margin-bottom:21px;background:#fdfefb}.search svg{width:18px;height:18px;color:#8b988b}.search input{width:100%;font-size:13px;border:0;background:transparent;min-width:0;outline:none}.search kbd{font-size:12px;color:#99a38f;border:1px solid var(--line);border-radius:3px;padding:0 5px}.lessons{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.lesson-card{position:relative;min-height:145px;padding:17px 16px 14px;text-align:left;border:1px solid var(--line);background:white;border-radius:10px;display:flex;flex-direction:column;align-items:flex-start}.lesson-card:hover{border-color:#91a58b;background:#f9fbf5;transform:translateY(-2px)}.lesson-number{font-size:10px;letter-spacing:1px;color:#6b7b65;margin-bottom:8px}.lesson-card h3{font-size:15px;line-height:1.6;font-weight:650;margin:0 0 12px}.lesson-card .preview{font-family:var(--character);font-size:17px;color:#84917b;letter-spacing:4px;white-space:nowrap}.lesson-card .card-bottom{font-size:10px;color:var(--muted);width:100%;display:flex;justify-content:space-between;margin-top:auto;padding-top:12px}.card-bottom b{font-size:15px;color:var(--green);font-weight:400;line-height:1}.completed-dot{position:absolute;right:12px;top:14px;font-size:11px;color:var(--green)}.catalog-foot{font-size:11px;color:var(--muted);margin:20px 0 0}.method{display:grid;grid-template-columns:repeat(3,1fr);padding:32px 30px 28px;gap:40px}.method>div{display:grid;grid-template-columns:30px 1fr;column-gap:12px}.method span{font-family:Georgia,serif;color:#8a9d7a;font-size:20px;grid-row:span 2}.method h3{font-size:13px;margin:0}.method p{font-size:11px;color:var(--muted);margin:4px 0 0}footer{max-width:1180px;margin:auto;display:flex;justify-content:space-between;align-items:center;padding:25px 30px 32px;border-top:1px solid var(--line);font-size:11px;color:var(--muted)}.footer-brand{font-weight:700;letter-spacing:1px;color:var(--green)}.footer-brand span{font-weight:400;letter-spacing:0;margin-left:15px}dialog{border:1px solid var(--line);border-radius:18px;background:#fffef9;color:var(--ink);padding:26px;width:min(880px,94vw);max-height:92dvh;overflow:auto;box-shadow:0 25px 90px #17382f40}dialog::backdrop{background:#17382f88;backdrop-filter:blur(4px)}.dialog-top{display:flex;align-items:center;justify-content:space-between;gap:15px}.dialog-top h2{margin-bottom:10px}.icon-btn{border:0;background:transparent;font-size:28px;width:40px;height:40px;line-height:1;border-radius:50%}#lesson-title{font-size:28px;margin:8px 0 20px}.setup-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:22px}.setup-grid h3{margin:0 0 8px}.subtle{color:var(--muted);font-size:12px;font-weight:400}.tiny{font-size:11px;color:var(--muted);line-height:1.8}.hint-options{display:flex;gap:6px;flex-wrap:wrap}.hint-options label{cursor:pointer}.hint-options input{position:absolute;opacity:0;width:1px}.hint-options span{display:block;padding:8px 15px;border-radius:7px;border:1px solid #cbd5c4;background:#fff;font-size:13px}.hint-options input:checked+span{background:var(--green);color:white;border-color:var(--green)}.hint-options input:focus-visible+span{outline:3px solid #a97518;outline-offset:3px}.modes{display:flex;gap:8px;margin-bottom:10px}.modes label{display:flex;align-items:center;gap:7px;border:1px solid var(--line);background:white;padding:9px;border-radius:8px;flex:1}.modes b{font-size:13px}.modes small{display:block;font-size:10px;color:var(--muted)}.inline{display:flex;align-items:center;gap:8px;font-size:12px;margin:12px 0}.control-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:12px 0}.control-row h3{margin:0}.control-row label{font-size:12px}.voice-box{background:#f0f3e9;border-radius:12px;padding:18px;display:flex;flex-direction:column;align-items:stretch}.voice-box>label:not(.inline){font-size:12px;margin:10px 0 5px}.voice-box .small-btn{align-self:flex-start;margin-top:10px}select{border:1px solid #cbd5c4;background:white;border-radius:6px;padding:6px 10px;font-size:12px;max-width:100%}.small-btn{background:white;border:1px solid #cbd5c4;border-radius:6px;padding:7px 11px;font-size:12px;text-decoration:none}.primary{background:var(--green);color:white;border:1px solid var(--green);border-radius:8px;padding:12px 24px;font-size:15px;font-weight:600;white-space:nowrap}.primary span{margin-left:30px}.char-selection{border-top:1px solid var(--line);margin-top:20px;padding-top:10px}#char-options{display:flex;flex-wrap:wrap;gap:7px}#char-options label{cursor:pointer;border:1px solid var(--line);background:#fff;border-radius:7px;padding:3px 9px;display:flex;align-items:center;gap:6px;font-family:var(--character);font-size:25px}#char-options input{width:13px}details{margin-top:20px;border:1px solid var(--line);padding:10px 13px;border-radius:8px;font-size:13px}summary{cursor:pointer;color:var(--green);font-size:12px}.teacher-scroll{overflow:auto;max-height:300px}.teacher-table{border-collapse:collapse;width:100%;font-size:12px;margin-top:10px;min-width:570px}.teacher-table th,.teacher-table td{text-align:left;border-bottom:1px solid var(--line);padding:8px 5px}.teacher-table td:first-child{font-family:var(--character);font-size:25px}.teacher-table input{width:70px;border:1px solid var(--line);border-radius:4px;padding:4px}.teacher-table select{max-width:130px}.teacher-table th{font-weight:600;background:#f0f3e9;position:sticky;top:0}.teacher-table .status{display:block;font-size:10px;color:var(--muted)}.button-row{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:10px}.button-row a{font-size:11px}.file-label{cursor:pointer}.file-label input{display:none}.dialog-actions{border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:12px;align-items:center;padding-top:17px;margin-top:16px}.downloads{display:flex;gap:6px;flex-wrap:wrap}.error{font-size:12px;color:var(--red);min-height:20px;margin:10px 0 0}.notice{background:#fff5dc;border-left:3px solid var(--yellow);padding:10px 14px;font-size:12px;margin-bottom:15px}.game-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.game-top>div{display:flex;gap:20px;align-items:center;font-variant-numeric:tabular-nums;font-size:14px}#lives{font-size:12px;color:var(--red)}.game-lesson{text-align:center;font-size:15px;margin-bottom:18px;font-weight:600}.game-progress{display:flex;justify-content:space-between;font-size:11px;color:var(--muted)}progress{height:5px;border:0;width:100%;accent-color:var(--green);border-radius:6px}progress::-webkit-progress-bar{background:#e4eada;border-radius:5px}progress::-webkit-progress-value{background:var(--green);border-radius:5px}.question-label{text-align:center;font-size:13px;color:var(--muted);margin:20px 0 10px}.hints{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px;background:#eef2e6;border:1px solid #dce4d3;border-radius:12px;padding:15px;min-height:105px;margin-bottom:22px}.hint{text-align:center;min-width:80px}.hint small{display:block;font-size:10px;letter-spacing:2px;color:var(--muted)}.hint strong{display:block;font:30px var(--character);margin-top:6px;line-height:1.4}.hint .hint-bpm{font:26px var(--font);letter-spacing:2px}.hint .hint-bpm.long{font-size:20px}.hint em{font-style:normal;font-size:10px;display:block;color:#8c661b}.choices{display:grid;gap:12px;max-width:630px;margin:auto}.choice{position:relative;background:white;border:1px solid #ccd7c5;border-radius:11px;font:50px var(--character);min-height:95px;aspect-ratio:1.4;display:grid;place-items:center;box-shadow:0 3px 0 #e7ebdf}.choice small{position:absolute;left:9px;top:7px;font:10px var(--font);color:#85927c}.choice:hover:not(:disabled){background:#f4f6ed;border-color:#8fa581;transform:translateY(-2px)}.choice.correct{background:#e3efdf;border:2px solid #537f48;box-shadow:0 3px 0 #c7d8bb}.choice.wrong{background:#f8e8df;border-color:#b66e56;animation:shake .3s}.choice:disabled{opacity:1}.choice:disabled:not(.correct){color:#7a8775}.large .choice{font-size:68px}.feedback{min-height:32px;text-align:center;font-size:16px;margin:16px 0 8px;font-weight:600}.feedback.bad{color:var(--red)}.game-bottom{display:flex;justify-content:space-between;gap:10px}.center{text-align:center}.result-title{text-align:center;margin:20px 0 6px;font-size:32px}.result-mark{margin:15px auto;width:80px;height:80px;border:2px solid #9bb18c;color:var(--green);border-radius:50%;display:grid;place-items:center;font:44px var(--character);background:#ecf2e5}.result-stats{display:flex;justify-content:center;gap:36px;background:#f0f3e9;padding:20px;margin:20px 0;border-radius:12px;text-align:center}.result-stats b{font-size:25px;display:block}.result-stats span{font-size:11px;color:var(--muted)}.wrong-list{text-align:center;font:26px var(--character);line-height:2}.result-buttons{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}.record{border-bottom:1px solid var(--line);padding:15px 0;font-size:13px}.record small{color:var(--muted)}.record strong{float:right}.source-list{font-size:13px}.source-list p{line-height:1.9}.source-list a{overflow-wrap:anywhere}.source-list h3{margin-top:25px}.audit-list{font-size:12px}.toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);background:var(--green-dark);color:white;padding:10px 20px;border-radius:8px;z-index:100;font-size:13px;max-width:90vw}.empty{grid-column:1/-1;padding:40px 15px;text-align:center;color:var(--muted);font-size:14px}@keyframes shake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media(min-width:1450px){.hero{min-height:450px}.topbar{padding-top:32px;padding-bottom:32px}}@media(max-width:950px){.hero{padding-left:0;padding-right:30px}.hero h1{font-size:43px}.word-art{width:280px;margin-right:15px}.art-note{right:-48px;font-size:17px}.art-grid>span{font-size:32px}.art-grid .found{font-size:42px}.found i{right:4px;font-size:10px}.catalog{grid-template-columns:205px 1fr}.filters{padding:25px 20px}.lesson-panel{padding:25px 20px}.lessons{grid-template-columns:repeat(2,1fr)}}
@media(max-width:650px){.topbar{padding:18px 20px}.brand{font-size:19px;gap:10px}.brand small{font-size:9px;letter-spacing:0}.brand-icon{width:36px;height:36px;font-size:24px}nav{gap:10px}nav button{font-size:11px}nav button:last-child{max-width:70px;line-height:1.5}main{padding:0 18px}.hero{padding:26px 0 30px;min-height:0;gap:8px}.eyebrow{font-size:10px;letter-spacing:1px;margin-bottom:10px}.hero h1{font-size:32px;letter-spacing:0;margin-bottom:12px}.hero p{font-size:11px;margin-bottom:13px}.hero-tags{gap:5px;font-size:9px;flex-wrap:wrap}.hero-tags span{padding:2px 5px}.word-art{width:145px;margin:0 6px 20px 0;align-self:center}.art-label{font-size:8px;letter-spacing:0;margin-left:0}.art-grid{padding:8px;gap:4px;border-radius:11px;box-shadow:5px 8px 0 #f0efe3}.art-grid>span{font-size:24px;border-radius:4px}.art-grid .found{font-size:28px}.found i{right:2px;top:8px;font-size:7px;letter-spacing:0}.art-note{font-size:13px;right:-3px;top:auto;bottom:-28px}.art-note svg{display:none}.art-spark{font-size:19px;right:0;top:-14px}.catalog{display:block;border-radius:14px}.filters{border-right:0;border-bottom:1px solid var(--line);padding:18px}.filters>.section-kicker{display:none}.filters h2{font-size:18px;margin-bottom:15px}.publishers{grid-template-columns:repeat(3,1fr);margin-bottom:13px}.publishers button{justify-content:center;padding:7px}.publishers button span{display:none}.filter-label{margin-bottom:5px}.grades{grid-template-columns:repeat(6,1fr);gap:5px}.grades button{font-size:12px;padding:7px 0}.support-note{display:none}.lesson-panel{padding:22px 16px}.lesson-heading h2{font-size:20px;margin-bottom:15px}.lessons{gap:10px}.lesson-card{min-height:140px;padding:13px}.lesson-card h3{font-size:14px}.lesson-card .preview{font-size:16px;letter-spacing:3px}.catalog-foot{font-size:10px}.method{gap:15px;padding:25px 0}.method>div{display:block}.method span{font-size:17px}.method h3{margin-top:5px}.method p{font-size:10px}footer{padding:20px;gap:15px;align-items:flex-start;font-size:10px}.footer-brand span{display:block;margin:5px 0 0;font-size:10px}dialog{padding:18px;width:96vw;border-radius:13px;max-height:94dvh}.setup-grid{grid-template-columns:1fr;gap:15px}.voice-box{padding:14px}.dialog-actions{flex-direction:column;align-items:stretch}.dialog-actions>.primary{order:-1}.downloads{justify-content:center}.teacher-table{font-size:11px}.hint{min-width:60px}.hint strong{font-size:27px}.hint .hint-bpm{font-size:23px}.hints{padding:13px;gap:10px}.choices{gap:9px}.choice{min-height:76px;font-size:41px}.large .choice{font-size:54px}.game-bottom .primary{font-size:13px;padding:10px 15px}.game-top{margin-bottom:15px}.result-stats{gap:25px}.button-row{gap:7px}.primary span{margin-left:15px}}
@media(max-width:650px){.hero-copy{min-width:0;flex:1}.hero h1{font-size:30px}.word-art{width:110px;margin-right:0}.art-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:360px){.word-art{width:110px}.hero h1{font-size:26px}.hero p{font-size:10px}.brand small{display:none}.lesson-card .preview{font-size:14px;letter-spacing:2px}}@media print{header,footer,nav,.hero,.catalog,.method{display:none}}

/* SIL OFL 1.1 fonts. Copyright and license texts are included in fonts/. */
@font-face{font-family:"Findword Iansui";src:url("fonts/Iansui.woff2?v=115.36") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Findword Noto";src:url("fonts/NotoSansTC.woff2?v=115.36") format("woff2");font-weight:400;font-style:normal;font-display:swap}
:root{--character:"Findword Iansui","Findword Noto",serif;--char-size:64px}
body{font-size:16px}.topbar{padding:20px 30px}.text-btn{font-size:15px;min-height:44px}.brand small{font-size:12px;letter-spacing:0}.intro{display:flex;align-items:center;justify-content:space-between;gap:25px;padding:28px 0}.intro h1{font-size:27px;letter-spacing:1px;margin:0 0 3px}.intro p{font-size:14px;color:var(--muted);margin:0}.display-controls{display:flex;align-items:center;flex-wrap:wrap;gap:14px;background:#edf1e7;border:1px solid var(--line);padding:10px 14px;border-radius:10px}.display-controls label{display:flex;align-items:center;gap:8px;font-size:14px;white-space:nowrap}.display-controls select{font-size:14px;max-width:180px;min-height:38px}.size-control input{width:110px;min-height:30px}.size-control output{font-variant-numeric:tabular-nums;width:28px;font-size:13px}.filters{padding:25px 22px}.filters h2{font-size:20px;margin-bottom:22px}.filter-label{font-size:12px}.filter-label span,.publishers button,.grades button{font-size:15px}.publishers button,.grades button{min-height:44px}.lesson-panel{padding:25px}.lesson-heading h2{font-size:22px}.section-kicker{font-size:13px;letter-spacing:0}.count-label{font-size:13px}.search input{font-size:15px}.search{min-height:44px}.lesson-card{min-height:140px}.lesson-card h3{font-size:17px}.lesson-number,.lesson-card .card-bottom{font-size:12px}.lesson-card .preview{font-family:var(--character);font-size:clamp(21px,calc(var(--char-size)*.4),30px);letter-spacing:2px;max-width:100%;overflow:hidden;text-overflow:ellipsis}.catalog{margin-bottom:24px}footer{padding:18px 30px;font-size:12px}.small-btn{font-size:14px;min-height:40px}.inline,.control-row label,.voice-box>label:not(.inline),summary{font-size:14px}.hint-options span{font-size:15px;min-height:42px}.modes b{font-size:15px}.modes small{font-size:12px}.tiny{font-size:12px}.tiny:empty{display:none}.voice-box .tiny{margin-bottom:4px}.voice-box select{min-height:38px;font-size:13px}.dialog-actions .downloads .small-btn{font-size:12px}.game-top{margin-bottom:12px}#game-dialog>.display-controls{margin-bottom:16px;justify-content:center}.choice,.large .choice{font-family:var(--character);font-size:var(--char-size);line-height:1.2;aspect-ratio:1.4;min-height:calc(var(--char-size) + 32px)}.choices{max-width:100%;gap:12px}.hint strong{font-family:var(--character);font-size:clamp(30px,calc(var(--char-size)*.65),68px)}.hint .hint-bpm{font-family:var(--character);font-size:clamp(28px,calc(var(--char-size)*.55),60px);line-height:1.6}.hint .hint-bpm.long{font-size:clamp(22px,calc(var(--char-size)*.4),40px)}.hints{min-height:110px}.hint small{font-size:12px}.hints strong{overflow-wrap:anywhere}.question-label{font-size:15px}.game-progress{font-size:14px}.game-lesson{font-size:17px}.feedback{font-size:18px}.teacher-table td:first-child,#char-options label,.wrong-list{font-family:var(--character)}#char-options label{font-size:clamp(28px,calc(var(--char-size)*.5),44px)}.teacher-table td:first-child{font-size:30px}.source-list{font-size:15px}.source-list p{margin-bottom:14px}.source-list details p{font-size:13px}.notice{font-size:13px;padding:8px 12px}.hint em{font-size:12px}.button-row{font-size:13px}.game-bottom{flex-wrap:wrap;align-items:center}#info-dialog{max-width:720px}
@media(min-width:1350px){.catalog{grid-template-columns:230px 1fr}.lessons{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:900px){.intro{align-items:flex-start;flex-direction:column;gap:14px}.display-controls{width:100%;justify-content:flex-start}.catalog{grid-template-columns:190px minmax(0,1fr)}}
@media(max-width:650px){main{padding:0 14px}.topbar{padding:14px 18px;gap:12px}.brand{font-size:20px;letter-spacing:1px}.brand small{font-size:10px}.topbar nav{gap:12px;flex-shrink:0}.topbar nav button,.topbar nav button:last-child{font-size:13px;max-width:none}.intro{padding:20px 0;gap:14px}.intro h1{font-size:24px}.intro p{font-size:13px}.display-controls{padding:9px 11px;gap:12px;justify-content:space-between}.display-controls label{font-size:13px;gap:7px}.display-controls select{font-size:13px;width:135px;max-width:135px}.size-control input{width:80px}.catalog{display:block}.filters{padding:18px}.filters h2{font-size:18px;margin-bottom:12px}.filter-label{margin-bottom:7px}.filter-label span{font-size:14px}.publishers{margin-bottom:14px}.publishers button,.grades button{font-size:14px;min-height:44px}.lesson-panel{padding:20px 15px}.lesson-card{padding:13px;min-height:143px}.lesson-card h3{font-size:17px}.lesson-card .preview{font-size:clamp(22px,calc(var(--char-size)*.4),28px);letter-spacing:1px}.lesson-heading h2{font-size:21px}.section-kicker{font-size:12px}.count-label{font-size:12px}.choices{gap:10px}.choice,.large .choice{font-size:var(--char-size);min-height:calc(var(--char-size) + 32px);aspect-ratio:1.15}.game-top .small-btn{font-size:13px}.game-lesson{font-size:15px}#game-dialog>.display-controls{gap:10px;padding:8px}.game-progress{font-size:12px}.game-bottom{gap:8px}.game-bottom .primary{min-height:44px}.dialog-actions{position:static}.hint-options span{padding:9px 14px}#lesson-title{font-size:25px}.dialog-top .section-kicker{font-size:12px}footer{padding:18px}.game-top>div{gap:10px}.result-stats{gap:22px}.source-list{font-size:15px}}
@media(max-width:380px){.display-controls{flex-direction:column;align-items:stretch;gap:7px}.display-controls label{justify-content:space-between}.display-controls select{width:170px;max-width:170px}.size-control input{width:135px}.size-control output{text-align:right}.brand small{display:none}.topbar nav{gap:9px}.lesson-panel{padding:18px 12px}.lesson-card{padding:11px}.grades button{font-size:12px}.grades{gap:4px}}

.choice,.large .choice{aspect-ratio:auto;height:calc(var(--char-size) + 40px)}

.hint{max-width:100%;min-width:0}.hint .hint-bpm{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:2px;font-size:clamp(24px,calc(var(--char-size)*.55),min(60px,11vw));overflow-wrap:normal}.hint .hint-bpm.long{font-size:clamp(22px,calc(var(--char-size)*.4),min(40px,9vw))}.bpm-syllable{display:inline-block;white-space:nowrap}.bpm-separator{font-size:.7em}

/* Compact default sizes and Taiwan vertical Zhuyin. */
:root{--char-size:48px}.text-btn{font-size:14px}.lesson-card h3{font-size:15px}.lesson-number,.lesson-card .card-bottom{font-size:11px}.lesson-card .preview{font-size:18px}.small-btn{font-size:12px}.hint-options span{font-size:14px}.inline,.control-row label,.voice-box>label:not(.inline){font-size:13px}.choice,.large .choice{height:calc(var(--char-size) + 48px);min-height:80px}.choices{max-width:630px}
.hint .hint-bpm,.hint .hint-bpm.long{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:.18em;font-size:clamp(22px,calc(var(--char-size)*.5),36px);letter-spacing:0;line-height:1;font-weight:400}.hint .hint-bpm.long{font-size:clamp(20px,calc(var(--char-size)*.45),30px)}
.zhuyin-syllable{display:inline-block;position:relative;width:1.6em;height:4em;flex:0 0 1.6em;vertical-align:middle;font-family:var(--character);line-height:1;letter-spacing:0;font-weight:400;writing-mode:horizontal-tb;text-orientation:upright}
.zhuyin-stack{position:absolute;left:0;top:var(--stack-top);display:flex;flex-direction:column;align-items:center;width:1em}.zhuyin-stack>span{display:block;width:1em;height:1em;line-height:1;text-align:center;letter-spacing:0}
.zhuyin-tone{position:absolute;left:.95em;top:var(--tone-top);width:.7em;line-height:1;text-align:center}.zhuyin-neutral{position:absolute;left:0;top:calc(var(--stack-top) - .8em);width:1em;line-height:1;text-align:center}.bpm-separator{font-size:.65em}
.feedback{display:flex;align-items:center;justify-content:center;gap:8px;min-height:32px}.answer-character{font-family:var(--character);font-size:36px;font-weight:400}.answer-zhuyin{display:flex;align-items:center;font-size:14px}.answer-zhuyin .zhuyin-syllable{height:4em}.feedback:empty{min-height:32px}
@media(max-width:650px){.lesson-card h3{font-size:14px}.lesson-card .preview{font-size:17px}.choice,.large .choice{height:calc(var(--char-size) + 44px)}.hint .hint-bpm,.hint .hint-bpm.long{font-size:clamp(20px,calc(var(--char-size)*.5),30px)}}

.question-types{margin-bottom:20px}.question-types label{min-height:48px}.question-types b{font-size:14px}#hint-settings{margin-bottom:16px}.character-prompt{flex-direction:column;gap:2px;padding:12px}.target-character{font-family:var(--character);font-size:var(--char-size);line-height:1.35}.target-context{font-family:var(--character);font-size:18px;color:var(--muted)}
.choice.reading-choice{height:auto;min-height:calc(clamp(20px,calc(var(--char-size)*.5),48px)*4 + 24px);padding:12px 10px;font-size:clamp(20px,calc(var(--char-size)*.5),48px);line-height:1}.reading-options{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:.12em;width:100%;font-size:inherit;font-weight:400}.reading-options .zhuyin-syllable{flex-shrink:0}.reading-options .bpm-separator{font-family:var(--font)}
@media(max-width:650px){.question-types b{font-size:13px}.question-types label{padding:8px;gap:5px}.choice.reading-choice{padding:10px 6px}.target-context{font-size:16px}}

/* Lake blue, soft rounded controls. */
:root{--ink:#204553;--green:#1686a3;--green-dark:#126b85;--muted:#607d89;--cream:#f3fbfe;--line:#d4e8ef;--pale:#e5f5fb;--yellow:#efbe62}
body{background:linear-gradient(160deg,#f2fbff,#eaf7fc 55%,#f8fcff)}.topbar{flex-wrap:wrap;gap:12px}nav{flex-wrap:wrap;gap:16px}.brand-icon{border-radius:17px;background:#e0f5fc}.catalog{border-radius:28px;box-shadow:0 12px 34px #146c8610}.filters{background:#eaf7fc}.publishers button,.grades button{border-radius:14px}.grades button[aria-pressed=true]{background:#d7f0fa}.lesson-card{border-radius:22px;box-shadow:0 4px 12px #2978a006}.lesson-card:hover{background:#f0fbff;border-color:#72bdd3}.lesson-number,.lesson-card .preview{color:#588397}.count-label,.voice-box,.display-controls,.result-stats{background:#e8f6fc;border-color:var(--line)}.hints{background:#e7f5fb;border-color:#cce7f2;border-radius:24px}.primary{border-radius:18px;background:var(--green)}.small-btn,.icon-btn,select,input[type=text],textarea,.search{border-radius:14px}.search{background:#fbfeff}.modes label{border-radius:17px}.modes label:has(input:checked){background:#dff2fb;border-color:#7abed4}.hint-options span{border-radius:14px}.hint-options input:checked+span{background:#dff2fb}dialog{border-radius:28px;box-shadow:0 24px 90px #17576d28;background:#fcfeff}dialog::backdrop{background:#174c6366;backdrop-filter:blur(3px)}.choice{border-color:#bcdbe7;border-radius:22px;box-shadow:0 4px 0 #dceef5}.choice:hover:not(:disabled){background:#edfaff;border-color:#7abed4}.choice.correct{background:#daf3fa;border-color:#258eaa;box-shadow:0 4px 0 #b6e4f0}.choice:disabled:not(.correct){color:#668b99}.result-mark{background:#dff5fc;border-color:#78c3d7}.teacher-table th{background:#eaf7fc}progress::-webkit-progress-bar{background:#dceff7}.display-controls input{accent-color:#1686a3}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible,textarea:focus-visible{outline-color:#216bb2}
#celebration-layer{position:fixed;inset:0;pointer-events:none;z-index:500;overflow:hidden}.confetti{position:absolute;left:var(--x);top:-20px;width:9px;height:17px;border-radius:3px;animation:confetti-fall 3s var(--delay) ease-in forwards}.celebration-badge{position:absolute;top:15%;left:50%;transform:translateX(-50%);background:#dff6ff;color:#166f8a;border-radius:22px;padding:18px 30px;font-size:24px;box-shadow:0 6px 30px #1e6f8c22}@keyframes confetti-fall{to{transform:translate(var(--drift),105vh) rotate(var(--spin));opacity:0}}
#classroom-dialog{max-width:1000px}.class-tabs,.class-tools{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}.class-tabs button[aria-pressed=true]{background:var(--green);color:white}.class-panel{background:#eef8fc;border:1px solid var(--line);border-radius:22px;padding:18px;margin:14px 0}.class-panel h3{margin-bottom:12px}.class-form{display:flex;gap:10px;align-items:end;flex-wrap:wrap}.class-form label{display:flex;flex-direction:column;gap:5px;font-size:14px;flex:1;min-width:150px}.class-form input,.class-form textarea,.class-form select{padding:9px 12px;border:1px solid #bbdce8;background:white;width:100%;min-height:44px}.class-form textarea{min-height:100px;resize:vertical}.class-table{width:100%;border-collapse:collapse;font-size:14px}.class-table th,.class-table td{padding:11px 8px;text-align:left;border-bottom:1px solid var(--line)}.class-table th{white-space:nowrap;color:var(--muted)}.class-scroll{overflow-x:auto}.class-table button{white-space:nowrap}.task-card{border:1px solid var(--line);border-radius:22px;padding:18px;margin:12px 0;background:white;display:flex;justify-content:space-between;gap:12px;align-items:center}.task-card p{margin:4px 0;font-size:13px;color:var(--muted)}.class-message{padding:12px;background:#e4f5fc;border-radius:14px}.class-error{color:var(--red)}.class-status{font-size:13px;color:var(--muted);margin:10px 0}.class-link{width:100%;padding:10px;border:1px solid var(--line);border-radius:12px;font-size:13px}.student-heading{font-size:22px;margin-bottom:6px}.empty-class{padding:20px;color:var(--muted);text-align:center}.task-status{margin:12px 0;text-align:center;font-size:14px}.teacher-identity{font-size:13px;color:var(--muted)}
@media(max-width:650px){.topbar{padding:14px 18px}nav{width:100%;justify-content:space-between;gap:8px}.topbar nav button{font-size:13px}.catalog,dialog{border-radius:24px}.lesson-card{border-radius:20px}.task-card{align-items:flex-start;flex-direction:column}.class-panel{padding:14px}.class-form{align-items:stretch}.class-form .primary{width:100%}}

.class-form input{border-radius:14px}

/* Readability: stronger text contrast and larger supporting controls. */
:root{--ink:#163c4a;--green:#08758f;--green-dark:#075d74;--muted:#476574;--cream:#f4f9fc;--line:#c6dce6;--pale:#e7f4fa}
body{background:#f4f9fc;font-size:17px;line-height:1.7}.text-btn,.topbar nav button{font-size:16px;min-height:44px;padding:8px 5px}.brand small{font-size:14px}.intro h1{font-size:28px}.intro p{font-size:16px;color:var(--muted)}.section-kicker,.filter-label,.filter-label span{font-size:15px;color:var(--muted);letter-spacing:0}.publishers button,.grades button{font-size:18px;min-height:48px}.lesson-card{min-height:162px;padding:18px}.lesson-card h3{font-size:18px;line-height:1.7}.lesson-number,.lesson-card .card-bottom{font-size:14px;color:var(--muted)}.lesson-card .preview{font-size:22px;color:var(--muted)}.count-label{font-size:15px;color:var(--muted)}.search input{font-size:16px}.display-controls label,.display-controls select{font-size:16px}.size-control output{font-size:15px}.small-btn{font-size:16px;min-height:44px;padding:8px 12px}.primary{font-size:17px;min-height:48px}.inline,.control-row label,.voice-box>label:not(.inline),.hint-options span,.modes b,summary{font-size:16px}.modes small,.tiny,.subtle,.hint small,.hint em{font-size:15px}.inline{min-height:40px}.hint-options span{padding:9px 15px}.question-types b{font-size:16px}.game-lesson{font-size:18px}.game-progress,.question-label{font-size:16px}.feedback{font-size:18px}.dialog-top .section-kicker{font-size:15px}.voice-box select{font-size:15px}.teacher-table,.class-table{font-size:16px}.class-table small{font-size:14px;color:var(--muted)}.class-form label,.class-form input,.class-form select,.class-form textarea{font-size:16px}.task-card p,.class-status{font-size:16px}.source-list{font-size:16px}.class-link{font-size:16px}.search svg,.lesson-card .card-bottom,.lesson-number{color:var(--muted)}.choice small{color:var(--muted)}.lesson-card:hover{background:#f0f9fd}.choice:disabled:not(.correct){color:#476574}.choice.correct{border-color:#08758f}.filters{background:#eaf5fa}.display-controls input{accent-color:#08758f}dialog::backdrop{background:#163d5666;backdrop-filter:blur(2px)}footer{font-size:14px}
.school-landing{padding:16px 0 36px}.login-card{max-width:450px;margin:0 auto;border:1px solid var(--line);border-radius:28px;padding:28px;background:white;box-shadow:0 8px 28px #124c6810}.login-card h2{font-size:27px}.login-form label{display:flex;flex-direction:column;gap:7px;font-size:18px;margin:16px 0}.login-form input{width:100%;min-height:50px;border:1px solid #7c9dad;border-radius:14px;padding:10px 14px;font-size:20px}.login-form .primary{width:100%;font-size:19px}.password-field{display:flex;align-items:center;gap:8px}.password-field input{min-width:0}.teacher-signin{display:block;text-align:center;font-size:16px;padding:14px 0 0}.school-status{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;background:#e1f1f8;border:1px solid var(--line);border-radius:20px;padding:14px 18px;margin-bottom:20px;font-size:16px}.school-status>div{display:flex;flex-wrap:wrap;gap:8px}.result-filters label{display:flex;flex-direction:column;gap:5px;min-width:140px;font-size:16px}.result-filters select{padding:9px;border:1px solid var(--line);background:white;font-size:16px;max-width:220px}.answer-details{font-family:var(--character);font-size:20px;line-height:1.9;columns:2}.task-card span{font-size:16px}.error{font-size:16px;min-height:28px}.class-tools{margin-top:14px}.class-panel h3{font-size:19px}
@media(max-width:650px){body{font-size:16px}.topbar nav button,.display-controls label,.display-controls select{font-size:16px}.brand small{font-size:13px}.intro h1{font-size:25px}.lesson-card{min-height:162px;padding:15px}.lesson-card h3{font-size:17px}.lesson-card .preview{font-size:21px}.lesson-number,.lesson-card .card-bottom{font-size:14px}.publishers button,.grades button{font-size:17px;min-height:48px}.question-types b,.inline,.control-row label,.voice-box>label:not(.inline){font-size:16px}.game-progress{font-size:15px}.game-lesson{font-size:17px}.game-bottom .primary{font-size:16px}.dialog-actions .downloads .small-btn{font-size:14px}.class-form{gap:14px}.login-card{padding:22px}.school-status{align-items:flex-start}.answer-details{columns:1}.result-filters label{min-width:100%;max-width:100%}.result-filters select{max-width:100%;width:100%}.topbar nav{justify-content:flex-end;gap:14px}.class-table small{font-size:14px}}

.password-field .small-btn{white-space:nowrap;flex-shrink:0;min-width:64px}.login-password>label{margin:12px 0 7px}.login-card{padding:24px}.login-form label{margin:12px 0}.login-form .error{margin:4px 0;min-height:20px}.login-card .tiny{margin:12px 0}[data-version=school] .intro{padding:20px 0 14px}.school-landing{padding-top:8px}.teacher-signin{padding-top:6px}
@media(max-width:380px){.grades{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}}

.quick-presets{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 4px}.quick-presets button{border-color:#7ab6c8;min-height:44px;padding:10px 18px}.quick-presets button:focus-visible{outline:3px solid var(--primary);outline-offset:3px}

/* Compact lesson cards and settings behind a single icon. */
.lesson-card{min-height:82px;padding:18px;display:flex;align-items:center;justify-content:flex-start}.lesson-card h3{margin:0;font-size:20px;line-height:1.5}.hint-options span,.hint-options input:checked+span{color:#111}.voice-box{gap:5px;padding:16px}.voice-box .inline{margin:0;min-height:30px;line-height:1.4}.voice-box>label:not(.inline){margin:5px 0 0}.voice-box .control-row{margin:3px 0}.voice-box .small-btn{margin-top:2px}.voice-box .tiny{margin:0 0 3px}.voice-box>input[type=range]{margin:2px 0}.settings-trigger{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;min-width:44px;padding:9px;border:1px solid var(--line);background:#fff}.settings-trigger svg{width:24px;height:24px}.topbar nav{align-items:center}.intro{justify-content:flex-start}#display-dialog{max-width:460px}#display-dialog .display-controls{display:flex;flex-direction:column;align-items:stretch;gap:20px;border:0;background:transparent;padding:8px 0}#display-dialog .display-controls label{justify-content:space-between}#display-dialog .display-controls select{max-width:230px;width:230px}#display-dialog .size-control input{width:180px}
/* The whole question stays within the viewport; answer size fits the available grid. */
body:has(#game-dialog[open]){overflow:hidden}#game-dialog{width:min(1100px,100vw);height:100dvh;max-height:100dvh;max-width:100vw;margin:auto;padding:12px 20px;border-radius:20px;overflow:hidden;--hints-height:clamp(96px,14dvh,112px)}#game-dialog[open]{display:flex;flex-direction:column;gap:6px}.game-top{flex:0 0 44px;margin:0;gap:8px}.game-top>div{gap:10px}.game-top .small-btn{padding:7px 10px;min-height:40px}#playing{display:grid;flex:1;min-height:0;grid-template-rows:auto auto 6px auto var(--hints-height) minmax(0,1fr) 56px 46px;gap:6px}.game-lesson{margin:0;font-size:16px;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.game-progress{margin:0;font-size:15px;line-height:1.4}#progress{width:100%;height:6px;margin:0}.question-label{margin:0;font-size:16px;line-height:1.4}.hints{margin:0;min-height:0;height:100%;padding:5px 10px;gap:14px;overflow:hidden}.hint{min-width:0}.hint small{font-size:13px;line-height:1.2}.hint strong{font-size:min(calc(var(--char-size)*.65),48px);line-height:1.2}.hint .hint-bpm,.hint .hint-bpm.long{font-size:min(calc(var(--char-size)*.5),calc((var(--hints-height) - 28px)/4));flex-wrap:nowrap;gap:2px}.hint em{font-size:12px;margin:0}.target-character{font-size:min(var(--char-size),calc(var(--hints-height) - 38px));line-height:1.1}.target-context{font-size:16px;line-height:1.3}#choices{width:100%;height:100%;min-height:0;max-width:900px;margin:0 auto;gap:8px;align-self:stretch}.choice,.large .choice,.choice.reading-choice{height:100%;min-height:0;min-width:0;aspect-ratio:auto;padding:5px 9px;line-height:1.1;font-size:var(--game-char,36px);border-radius:18px}.choice.reading-choice{font-size:calc(var(--game-char,36px)*.5)}.choice small{font-size:12px;top:5px;left:7px}.reading-options{flex-wrap:nowrap;gap:0}.reading-options .bpm-separator{font-size:.7em}.feedback,.feedback:empty{min-height:0;height:56px;margin:0;font-size:16px;line-height:1.2}.answer-character{font-size:32px}.answer-zhuyin{font-size:12px}.game-bottom{flex-wrap:nowrap;gap:8px;margin:0;min-height:44px}.game-bottom .primary,.game-bottom .small-btn{padding:7px 10px;min-height:44px;font-size:16px}.game-bottom .primary{margin-left:auto}#playing>.tiny{display:none}#results{min-height:0;overflow:auto;flex:1;align-content:center}#results h2{margin-bottom:12px}#results .result-mark{margin:8px auto}#results .result-stats{margin:10px auto}.result-buttons{margin:12px auto}#results .tiny{margin:6px 0}
@media(max-width:650px){.lesson-card{min-height:76px;padding:15px}.lesson-card h3{font-size:19px}.topbar nav{width:auto;gap:10px;margin-left:auto}.brand{font-size:18px}.brand-icon{width:36px;height:36px;font-size:23px}.topbar{padding:10px 14px}.settings-trigger{width:40px;height:40px;min-width:40px;padding:8px}#game-dialog{padding:8px 10px;border-radius:0}.game-top>div{gap:6px;font-size:13px}.game-top .small-btn{font-size:14px}.game-lesson{font-size:15px}.game-progress{font-size:14px}.game-bottom .small-btn,.game-bottom .primary{font-size:14px;padding:7px 8px}.game-bottom{gap:5px}#display-dialog .display-controls select{width:175px;max-width:175px}#display-dialog .size-control input{width:130px}}
@media(max-height:600px){#game-dialog{--hints-height:88px;padding-top:5px;padding-bottom:5px}#playing{gap:3px;grid-template-rows:auto auto 4px auto var(--hints-height) minmax(0,1fr) 44px 42px}.game-top{flex-basis:40px}.feedback,.feedback:empty{height:44px}.answer-zhuyin{font-size:10px}.game-bottom .small-btn,.game-bottom .primary{min-height:40px}}

.lesson-card{flex-direction:column;justify-content:center;align-items:flex-start;gap:5px;text-align:left;min-height:98px}.lesson-card .lesson-number{font-size:15px;line-height:1.3;color:var(--muted)}.lesson-card h3{font-size:20px}

@font-face{font-family:"Findword Parts";src:url("fonts/Parts.woff2?v=115.36") format("woff2");font-weight:400;font-style:normal;font-display:swap}.teacher-table .component-input{font-family:var(--character);font-size:23px;min-width:110px}.hint .hint-component{font-size:clamp(20px,calc(var(--char-size)*.5),32px)}.hint .hint-component.long{font-size:clamp(14px,calc(var(--char-size)*.35),23px);max-width:min(42vw,310px);line-height:1.25}

/* Larger learning hints, one component, and a shared settings panel. */
@font-face{font-family:"Findword Huninn";src:url("fonts/Huninn.woff2?v=115.36") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Findword Serif";src:url("fonts/NotoSerifTC.woff2?v=115.36") format("woff2");font-weight:400;font-display:swap}
:root{--char-size:64px}body{font-size:18px}.setup-grid{grid-template-columns:1fr}.setup-grid h3{font-size:19px}.setup-grid .modes small{font-size:16px}.teacher-table .speech-input{font-family:var(--character);width:110px;font-size:25px;margin-top:6px}.teacher-table th{font-size:17px}.teacher-table td{vertical-align:top}
#display-dialog{max-width:600px}#display-dialog h2{font-size:26px;margin:0}#display-dialog .voice-box{display:flex;flex-direction:column;gap:7px;margin-top:16px;padding:18px}#display-dialog .voice-box h3{font-size:20px;margin-bottom:3px}#display-dialog .voice-box select{width:100%;font-size:17px;min-height:44px}#display-dialog .voice-box .inline{font-size:18px;min-height:32px}#display-dialog .display-controls label,#display-dialog .display-controls select{font-size:18px}#display-dialog .display-controls select{max-width:280px;width:280px}#display-dialog .voice-box .small-btn{align-self:flex-start}#display-dialog .tiny{font-size:16px;line-height:1.5}#display-dialog .size-control input{flex:1;max-width:280px}
.zhuyin-tone{top:calc(var(--tone-top) - .35em);font-family:"Findword Noto",sans-serif}.zhuyin-neutral{font-family:"Findword Noto",sans-serif}
#game-dialog{--hints-height:clamp(136px,23dvh,174px)}.hints{gap:clamp(22px,4.5vw,60px);padding:8px 16px;align-items:center}.hint{flex-shrink:0}.hint small{font-size:18px;line-height:1.3;margin-bottom:5px}.hint strong,.hint .hint-component{font-size:min(calc(var(--char-size)*.78),56px);line-height:1.2;white-space:nowrap}.hint .hint-bpm,.hint .hint-bpm.long{font-size:min(calc(var(--char-size)*.6),calc((var(--hints-height) - 40px)/4));gap:0}.hint .hint-bpm.long{font-size:min(calc(var(--char-size)*.5),calc((var(--hints-height) - 40px)/4))}.stroke-unit{font:18px var(--font)}.game-lesson{font-size:18px}.game-progress,.question-label{font-size:17px}.choice small{font-size:15px}.answer-character{font-size:36px}.answer-zhuyin{font-size:14px}.target-character{font-size:min(calc(var(--char-size)*1.2),calc(var(--hints-height) - 42px))}
@media(max-width:650px){#game-dialog{--hints-height:132px}.hints{gap:18px;padding:6px 10px}.hint small{font-size:16px}.hint strong,.hint .hint-component{font-size:min(calc(var(--char-size)*.7),42px)}.hint .hint-bpm,.hint .hint-bpm.long{font-size:23px}.stroke-unit{font-size:16px}.game-lesson{font-size:16px}.game-progress,.question-label{font-size:16px}#display-dialog .display-controls label{flex-wrap:wrap}#display-dialog .display-controls select{width:100%;max-width:100%}#display-dialog h2{font-size:23px}.answer-zhuyin{font-size:12px}}
@media(max-height:600px){#game-dialog{--hints-height:104px}.hint small{font-size:15px}.hint .hint-bpm,.hint .hint-bpm.long{font-size:17px}.hint strong,.hint .hint-component{font-size:34px}.hints{padding:3px 10px}}
.dialog-icons{display:flex;align-items:center;gap:10px}

/* Keep the shared settings easy to scan on a classroom computer. */
#display-dialog{max-width:900px}#display-dialog .settings-layout{display:grid;grid-template-columns:minmax(210px,.85fr) minmax(330px,1.3fr);gap:24px;align-items:start;margin-top:18px}#display-dialog .settings-display h3{font-size:20px;margin:0 0 12px}#display-dialog .display-controls label{display:flex;flex-wrap:wrap;white-space:normal;gap:8px}#display-dialog .display-controls select{max-width:100%;width:100%;min-height:44px}#display-dialog .display-controls .size-control input{max-width:100%;width:70%}#display-dialog .voice-box{margin:0;padding:16px;gap:5px;line-height:1.4}#display-dialog .voice-box>label:not(.inline){font-size:17px}#display-dialog .voice-box>input[type=range]{min-height:24px;width:100%}#display-dialog .voice-box .control-row{margin:0}#display-dialog .voice-extras{display:grid;grid-template-columns:1fr;gap:4px;margin-top:6px}#display-dialog .voice-extras .inline{font-size:17px;min-height:27px}#display-dialog .voice-box .tiny{margin:0;line-height:1.3;font-size:15px}
@media(max-width:700px){#display-dialog .settings-layout{grid-template-columns:1fr;gap:12px}#display-dialog .display-controls{gap:12px}#display-dialog .settings-display h3{margin-bottom:0}#display-dialog .voice-box{padding:14px}#display-dialog h2{font-size:22px}}

/* Completion icon and clear, readable mistake review. */
footer{justify-content:center;text-align:center;font-size:16px}.result-mark{display:grid;place-items:center}.result-mark svg{width:58px;height:58px;stroke:currentColor;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;fill:none}.mistake-cards{display:grid;gap:16px;margin:16px 0}.mistake-card{display:grid;grid-template-columns:1.3fr 1fr;align-items:center;gap:20px;border:1px solid var(--line);border-radius:22px;padding:18px;background:#f0f9fd}.review-correct>small,.review-choice>small{display:block;font-size:16px;color:var(--muted)}.review-word{display:flex;align-items:center;gap:12px}.review-word>strong{font:56px/1.2 var(--character)}.review-bpm{display:flex;font-size:22px}.review-bpm .zhuyin-syllable{flex-shrink:0}.review-selected{font:36px/1.4 var(--character);display:flex;align-items:center;flex-wrap:wrap;gap:8px}.review-selected.phonetic{font-size:20px}.review-separator{font:18px var(--font)}.record-review{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:8px}#review-play{margin-top:10px}#review-back{margin:10px 12px 0 0}.teacher-table .speech-input{min-height:44px}
@media(max-width:650px){.mistake-card{grid-template-columns:1fr;gap:8px;padding:14px}.review-word>strong{font-size:48px}.review-bpm{font-size:20px}.review-selected{font-size:32px}.record-review{align-items:flex-start;flex-direction:column}.result-mark svg{width:52px;height:52px}}
.review-word{flex-wrap:wrap}.review-bpm{max-width:100%;flex-wrap:wrap}.review-correct,.review-choice{min-width:0}
.result-title:focus{outline:none}

/* Keep the target word centered in a single column without flex wrapping. */
.hints.character-prompt{display:flex;flex-flow:column nowrap;justify-content:center;align-items:center;gap:6px;text-align:center;padding:6px 14px}.character-prompt .target-character{flex:0 0 auto;align-self:center;margin:0;text-align:center}.character-prompt .target-context{flex:0 0 auto;align-self:center;margin:0;text-align:center;line-height:1.35}
/* Dedicated teacher workspace and roster forms. */
[data-version=teacher] .intro,[data-version=teacher] #school-landing{display:none!important}.teacher-workspace{margin:24px 0;padding:26px;background:#fff;border:1px solid var(--line);border-radius:26px;min-height:440px}.teacher-workspace>h2{font-size:28px;margin-bottom:20px}.topbar nav a{text-decoration:none}.roster-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:end}.roster-form label{display:flex;flex-direction:column;gap:7px;font-size:18px}.roster-form input,.roster-form select,.roster-group-bar select,.import-sheet-label select{width:100%;min-height:46px;padding:9px 12px;border:1px solid #91b4c6;border-radius:14px;font-size:18px;background:#fff;min-width:0}.roster-group-bar{display:flex;align-items:end;gap:12px;flex-wrap:wrap;margin:18px 0}.roster-group-bar>label{display:flex;flex-direction:column;gap:6px;flex:1;min-width:160px;font-size:18px}.roster-list-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:22px 0 8px}.roster-list-heading h3{font-size:20px;margin:0}.roster-actions{display:flex;flex-wrap:wrap;gap:7px}.danger-btn{color:#973a31}.deleted-row{display:flex;gap:12px;justify-content:space-between;align-items:center;margin:10px 0}.deleted-row small{font-size:15px}.deleted-roster{margin-top:24px}.file-label input[type=file]{display:none}.import-sheet-label{display:flex;align-items:center;gap:10px;margin:14px 0}.import-sheet-label select{max-width:340px}#apply-import-roster{margin-top:14px}.roster-table .small-btn{white-space:nowrap}#roster-import-preview{margin-top:12px}.teacher-workspace .class-tabs{gap:10px;margin-bottom:20px}
@media(max-width:650px){.teacher-workspace{padding:16px;margin:16px 0;border-radius:22px}.teacher-workspace>h2{font-size:25px}.roster-form{grid-template-columns:1fr;gap:12px}.roster-group-bar{gap:8px}.roster-list-heading{align-items:flex-start;flex-direction:column}.roster-actions{min-width:155px}.deleted-row{align-items:flex-start}.teacher-workspace .class-panel{padding:14px}.teacher-workspace .class-tabs .small-btn{font-size:16px}}
.class-code-box{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:#e7f4fa;border:1px solid var(--line);border-radius:20px;padding:14px 18px;margin:12px 0}.class-code-box label{display:flex;flex-direction:column;gap:6px;font-size:16px}.class-code-box input{font:24px/1.4 ui-monospace,monospace;letter-spacing:.12em;width:200px;max-width:100%;padding:8px;border:1px solid var(--line);border-radius:12px;background:white;color:var(--ink)}.class-code-box>span{font-size:16px;flex:1;min-width:180px}.character-prompt .target-character{font-size:min(calc(var(--char-size)*1.2),calc(var(--hints-height) - 54px))}.character-prompt .target-context{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Inline roster credentials and task recipients. */
.roster-account-input,.roster-password-input{width:160px;min-width:120px;max-width:100%;padding:9px 11px;border:1px solid #91b4c6;border-radius:12px;font:16px/1.5 system-ui,sans-serif;color:var(--ink);background:white}.roster-password-input{width:176px}.roster-table td{vertical-align:middle}.roster-table .roster-actions{min-width:225px}.assignment-form{display:grid;gap:18px;max-width:800px}.assignment-form>label{display:flex;flex-direction:column;gap:7px;font-size:18px}.assignment-form>label>input,.assignment-form select{width:100%;padding:10px 12px;border:1px solid #91b4c6;border-radius:14px;background:white;font-size:18px}.assignment-target{border:1px solid var(--line);border-radius:20px;padding:16px}.assignment-target legend{font-weight:700;padding:0 8px}.assignment-target>.inline{display:inline-flex;margin-right:24px;gap:8px}.task-students{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding-top:12px}.task-students[hidden]{display:none}.task-student-option{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;background:#eaf6fc;overflow-wrap:anywhere}.task-student-option input{width:20px;height:20px;flex:none}.assignment-form>button{justify-self:start;min-width:160px}#cancel-assign{margin-top:20px}.class-code-box input{letter-spacing:0;width:260px}@media(max-width:650px){.task-students{grid-template-columns:1fr}.assignment-target>.inline{display:flex}.assignment-form{gap:14px}.class-code-box label{max-width:100%}}

/* Teacher roster and inline assignment workspace. */
#teacher-quick-assign{margin-left:auto}.credential-icon{padding:8px;width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center}.credential-icon[hidden]{display:none}.credential-icon svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.roster-account-input[readonly],.roster-password-input[readonly]{border-color:transparent;background:transparent;cursor:default}.roster-password-input{font-family:ui-monospace,Consolas,monospace}.editing-credentials{background:#effaff}.roster-table .roster-actions{min-width:245px}#add-student-panel>summary{font-size:20px;font-weight:700}#add-student-panel[open] #student-form{margin-top:16px}.task-builder-heading{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:16px}.task-builder-heading h3{margin:0}.task-builder-grid{display:grid;grid-template-columns:240px minmax(0,1fr);gap:20px;align-items:start}.task-material-picker{padding:14px;border:1px solid var(--line);background:#f0f9fd;border-radius:20px;display:grid;grid-template-columns:1fr 1fr;gap:10px}.task-material-picker label{display:flex;flex-direction:column;gap:6px;min-width:0}.task-material-picker input,.task-material-picker select{width:100%;min-width:0;padding:9px;border:1px solid #91b4c6;border-radius:12px;background:white;font-size:16px}.builder-search-label,.builder-lessons{grid-column:1/-1}.builder-lessons{display:grid;gap:8px;max-height:65vh;overflow:auto}.builder-lesson{text-align:left;padding:12px;border:1px solid var(--line);border-radius:15px;display:grid;gap:4px;background:white}.builder-lesson small{font-size:13px;color:var(--muted)}.builder-lesson b{font-size:17px}.builder-lesson.selected{border-color:#197e9e;background:#ddf4ff}.task-builder-content{min-width:0}.task-builder-content #lesson-dialog.inline-task-setup{position:static;inset:auto;margin:0;transform:none;width:100%;max-width:none;max-height:none;height:auto;overflow:visible;border:1px solid var(--line);box-shadow:none;padding:18px;border-radius:22px;background:white}.inline-task-setup:not([open]){display:none}.inline-task-setup[open]{display:block}.inline-task-setup .setup-grid{grid-template-columns:1fr}.inline-task-setup [data-close],.inline-task-setup #assign-task,.inline-task-setup #start-game{display:none!important}.inline-task-setup .dialog-actions{flex-wrap:wrap}.inline-task-setup .downloads{flex-wrap:wrap}.inline-task-setup #char-options{max-height:220px;overflow:auto}.inline-task-setup .teacher-scroll{max-width:100%}#inline-recipient-host:not(:empty){margin-top:18px;padding:18px;border:1px solid var(--line);border-radius:22px;background:#f1faff}#inline-recipient-host #cancel-assign{display:none}.inline-task-setup .char-selection{margin-top:18px}.inline-task-setup .quick-presets{flex-wrap:wrap}.inline-task-setup #teacher-details .teacher-scroll{overflow:auto}.task-builder-content .assignment-form{max-width:none}.task-builder-content #lesson-title{font-size:24px}.task-builder-content #lesson-dialog .setup-grid{display:block}.task-builder-content .modes{flex-wrap:wrap}.task-builder-content .hint-options{flex-wrap:wrap}
@media(max-width:850px){.task-builder-grid{grid-template-columns:1fr}.builder-lessons{max-height:250px;grid-template-columns:repeat(2,minmax(0,1fr))}.task-material-picker{grid-template-columns:1fr 1fr}.builder-search-label{grid-column:1/-1}.task-builder-content #lesson-dialog.inline-task-setup{padding:14px}.task-builder-content #lesson-title{font-size:21px}}@media(max-width:500px){#teacher-quick-assign{margin-left:0;width:100%}.builder-lessons{grid-template-columns:1fr}.inline-task-setup .dialog-actions .downloads{display:grid;width:100%}.inline-task-setup .quick-presets{gap:7px}.task-builder-heading{align-items:flex-start}}
.task-material-picker{position:sticky;top:16px}@media(max-width:850px){.task-material-picker{position:static}}
.inline-task-setup .modes small,.inline-task-setup .dialog-actions{display:none}

.custom-material{grid-column:1/-1;border-top:1px solid var(--line);padding-top:12px}.custom-material[open]{display:grid;gap:10px}.custom-material summary{font-weight:700;cursor:pointer}.task-material-picker textarea{width:100%;min-height:90px;padding:10px;border:1px solid #91b4c6;border-radius:12px;background:white;font:inherit;resize:vertical}.custom-reading-input{min-width:110px}.custom-radical-input,.custom-strokes-input{width:65px!important;min-width:0!important}.class-table td>.danger-btn{margin:6px 0 0 6px}

/* One inline editor for every student field. */
.roster-table{min-width:1040px}.roster-table input,.roster-table select{padding:8px;border:1px solid #91b4c6;border-radius:12px;font:16px/1.5 system-ui,sans-serif;min-height:44px;color:var(--ink);background:white;max-width:100%}.roster-table input[readonly],.roster-table select:disabled{border-color:transparent;background:transparent;color:var(--ink);opacity:1}.roster-table .roster-seat-input{width:65px}.roster-table .roster-name-input{width:105px}.roster-table .roster-account-input{width:115px;min-width:90px}.roster-table .roster-password-input{width:125px;min-width:90px}.roster-table select[data-inline-group]{width:140px}.roster-table select[data-inline-active]{width:85px}.roster-table .roster-actions{min-width:170px}.custom-task-heading{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:16px}.custom-task-heading h3{font-size:24px;margin:0}.custom-task-actions{display:flex;flex-wrap:wrap;gap:8px}.material-editor .task-material-picker>:not(#custom-material){display:none}.material-editor #custom-material{border:0;padding-top:0}.custom-task-actions .primary{padding:10px 18px}@media(max-width:650px){.custom-task-heading{align-items:flex-start;flex-direction:column}.custom-task-actions{width:100%}.custom-task-heading h3{font-size:22px}}

/* Saved task dispatch only selects its recipients. */
.dispatch-only{max-width:850px;margin:0 auto}.dispatch-only h3{font-size:26px;margin:0 0 6px}.dispatch-only #inline-task-description{margin-bottom:12px}.dispatch-only .assignment-form{gap:12px}.dispatch-only .assignment-target{padding:10px 14px}.dispatch-only .assignment-target>.inline{margin-top:4px;margin-bottom:4px}.dispatch-only .error:empty{display:none}.dispatch-only #cancel-assign{margin-top:10px}.dispatch-only #task-students{max-height:240px;overflow:auto;overscroll-behavior:contain}.class-entry-link{flex-basis:100%;display:flex;align-items:end;gap:10px}.class-entry-link label{flex:1;min-width:0}.class-entry-link input{width:100%;font:16px/1.4 system-ui,sans-serif;min-height:44px}.linked-class{display:flex;justify-content:space-between;align-items:center;gap:12px;background:#eaf6fc;border-radius:12px;padding:10px 12px;overflow-wrap:anywhere;font-size:17px}.linked-class a{font-size:15px;white-space:nowrap}
[data-student-task-view=true] .intro{display:none!important}[data-student-task-view=true] .student-workspace[open]{display:block;position:static;inset:auto;width:100%;max-width:none;max-height:none;transform:none;margin:18px 0;padding:22px;border:1px solid var(--line);border-radius:24px;box-shadow:none;background:white;overflow:visible}[data-student-task-view=true] .student-workspace>.dialog-top>[data-close]{display:none}[data-student-task-view=true] .student-workspace h2{font-size:26px;margin:0}[data-student-task-view=true] .school-status{margin-top:20px;margin-bottom:0}[data-student-task-view=true] .task-card p{margin:4px 0}[data-student-task-view=true] .task-card{margin:12px 0}[data-student-task-view=true] #main{min-height:65vh}@media(max-width:650px){.class-entry-link{flex-wrap:wrap}.class-entry-link label{min-width:100%}[data-student-task-view=true] .student-workspace[open]{padding:16px;margin:14px 0}.dispatch-only h3{font-size:23px}.dispatch-only #task-students{max-height:220px}}

/* Keep class login and learning results readable on touch screens. */
.result-filters select{min-height:44px}
@media(max-width:850px){
 .teacher-workspace .result-filters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:10px 0}
 .teacher-workspace .result-filters label{min-width:0;max-width:100%;gap:4px}
 .teacher-workspace .result-filters select{max-width:100%;width:100%;min-width:0;min-height:44px;font-size:16px}
 .teacher-workspace .result-filters button{align-self:end;min-width:0;min-height:44px;font-size:16px;padding:8px;line-height:1.35}
 .learning-results-scroll{overflow:visible}
 .learning-results,.learning-results tbody{display:block;width:100%}
 .learning-results thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
 .learning-results tbody>tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 14px;border:1px solid var(--line);border-radius:18px;padding:14px;margin:12px 0;background:#fff}
 .learning-results td{display:block;min-width:0;padding:0;border:0;font-size:18px;overflow-wrap:anywhere}
 .learning-results td[data-label]::before{content:attr(data-label);display:block;font:14px/1.4 var(--font);color:var(--muted);margin-bottom:4px}
 .learning-results td small{font-size:15px;line-height:1.5}
 .learning-results td:last-child{grid-column:1/-1}
 .learning-results td:last-child{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
 .learning-results td:last-child::before{display:none}
 .learning-results td>.danger-btn{margin:0}
 .learning-results tr.learning-detail{display:block;background:#eef8fc}
 .learning-results tr.learning-detail td{display:block}
 .learning-detail .answer-details{columns:1;font-size:20px;padding-left:24px;margin:0;overflow-wrap:anywhere}
}
@media(min-width:651px) and (max-width:850px){
 .learning-results tbody>tr{grid-template-columns:repeat(4,minmax(0,1fr))}
 .learning-results td:nth-child(6){grid-column:2/-1}
}
@media(max-width:650px){
 [data-version=school] .intro{padding:12px 0 8px}
 [data-version=school] .intro h1{font-size:22px;line-height:1.4;margin:0}
 [data-version=school] .intro p{margin:4px 0 0}
 .login-card{padding:18px}
 .login-card h2{font-size:25px;margin-bottom:12px}
 .login-form .error:empty{display:none}
 .login-form input{min-height:52px;font-size:20px}
 .login-form>.primary{margin-top:12px}
 .linked-class a{min-height:44px;display:inline-flex;align-items:center}
 .linked-class{padding:4px 10px}
 .school-landing{padding-bottom:18px}
 .settings-trigger,.icon-btn{width:44px;height:44px;min-width:44px}
 .game-top .small-btn,.game-bottom .small-btn,.game-bottom .primary{min-height:44px;font-size:16px}
 .topbar nav a{display:inline-flex;align-items:center;min-height:44px;font-size:16px}
 .teacher-workspace{padding:14px;margin:14px 0}
 .teacher-workspace>h2{margin-bottom:12px}
 .teacher-workspace .class-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-bottom:12px}
 .teacher-workspace .class-tabs>.small-btn,.teacher-workspace .class-tabs>.primary{padding:7px 3px;font-size:16px;min-height:44px;min-width:0;text-align:center;line-height:1.35}
 .teacher-workspace #teacher-quick-assign{margin:0;width:100%}
 .teacher-workspace .class-tabs a{display:flex;justify-content:center;align-items:center}
 .teacher-workspace #results-count{font-size:15px;line-height:1.5;margin:10px 0}
 [data-student-task-view=true] .school-status{margin-top:12px;padding:8px 12px}
 [data-student-task-view=true] .student-workspace[open]{margin:12px 0;padding:14px}
 [data-student-task-view=true] .task-card{padding:14px}
 [data-student-task-view=true] .task-card>.primary{min-width:120px}
}
@media(max-width:850px){
 #teacher-details .teacher-scroll{max-height:none;overflow:visible}
 #teacher-details .teacher-table,#teacher-details .teacher-table tbody{display:block;width:100%;min-width:0}
 #teacher-details .teacher-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
 #teacher-details .teacher-table tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;border:1px solid var(--line);border-radius:16px;padding:12px;margin:12px 0;background:white}
 #teacher-details .teacher-table td{display:block;min-width:0;padding:0;border:0;font-size:17px;overflow-wrap:anywhere}
 #teacher-details .teacher-table td[data-label]::before{content:attr(data-label);display:block;font:14px/1.4 var(--font);color:var(--muted);margin-bottom:5px}
 #teacher-details .teacher-table td:first-child{grid-column:1/-1;font-size:36px;line-height:1.3}
 #teacher-details .teacher-table td:nth-child(4),#teacher-details .teacher-table td:last-child{grid-column:1/-1}
 #teacher-details .teacher-table td:nth-child(4){display:grid;grid-template-columns:80px minmax(0,1fr);gap:8px;align-items:start}
 #teacher-details .teacher-table td:nth-child(4)::before,#teacher-details .teacher-table td:nth-child(4)>.status{grid-column:1/-1}
 #teacher-details .teacher-table input,#teacher-details .teacher-table select{width:100%;max-width:100%;min-width:0;min-height:44px;padding:8px;font-size:18px}
 #teacher-details .teacher-table button{min-height:44px;font-size:16px;padding:8px 10px}
 #teacher-details .teacher-table .status{font-size:14px;line-height:1.45}
}

.semesters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:24px}.semesters .small-btn{min-height:44px;padding:8px 6px}.semesters [aria-pressed=true]{background:#d9f0fa;border-color:var(--green);color:var(--ink);font-weight:700}.semester-label span{margin-left:0}

/* Use the desktop workspace width and keep every roster field within its column. */
[data-version=teacher] .topbar,[data-version=teacher] main,[data-version=teacher] footer{max-width:none;width:100%;padding-left:clamp(14px,2vw,38px);padding-right:clamp(14px,2vw,38px)}
[data-version=teacher] #classroom-dialog{width:100%;max-width:none;min-width:0;margin:16px 0;padding:clamp(16px,1.5vw,28px)}
.roster-table{min-width:0;width:100%;table-layout:fixed}.roster-table th,.roster-table td{padding:12px 8px;min-width:0;overflow-wrap:anywhere}
.roster-table th:nth-child(1){width:13%}.roster-table th:nth-child(2){width:7%}.roster-table th:nth-child(3){width:12%}.roster-table th:nth-child(4),.roster-table th:nth-child(5){width:14%}.roster-table th:nth-child(6){width:28%}.roster-table th:nth-child(7){width:12%}
.roster-table input,.roster-table select,.roster-table .roster-seat-input,.roster-table .roster-name-input,.roster-table .roster-account-input,.roster-table .roster-password-input,.roster-table select[data-inline-group],.roster-table select[data-inline-active]{width:100%;min-width:0;max-width:100%;font-size:18px}
.roster-table .roster-actions{min-width:0;gap:7px;align-items:center;flex-wrap:wrap}.roster-table .roster-actions .small-btn{min-height:44px;font-size:16px;padding:8px 12px}.roster-table .roster-actions .credential-icon{width:44px;min-width:44px;padding:8px;flex:none}
.issued-task-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;flex-shrink:0}.task-window-settings{border:1px solid var(--line);border-radius:16px;padding:12px 14px}.task-window-settings summary{cursor:pointer;font-weight:700}.task-window-settings>label{display:grid;gap:6px;margin-top:10px}.task-window-settings select,.task-window-times input{width:100%;min-width:0;min-height:44px;border:1px solid #91b4c6;border-radius:12px;background:white;padding:8px;font:inherit}.task-window-times{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:10px}.task-window-times label{display:grid;gap:6px;min-width:0}.task-window-times small{grid-column:1/-1;color:var(--muted)}
@media(max-width:1100px){
 .roster-table,.roster-table tbody{display:block;width:100%}.roster-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.roster-table tbody>tr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;border:1px solid var(--line);border-radius:18px;padding:14px;margin:12px 0}.roster-table td{display:block;border:0;padding:0;min-width:0}.roster-table td[data-label]::before{content:attr(data-label);display:block;font-size:15px;line-height:1.4;color:var(--muted);margin-bottom:5px}.roster-table td:nth-child(6){grid-column:1/-1;grid-row:3}.roster-table td:nth-child(7){grid-column:3;grid-row:2}.roster-table td:nth-child(6)::before{display:none}.roster-table input,.roster-table select{min-height:46px}
}
@media(max-width:600px){.roster-table tbody>tr{grid-template-columns:repeat(2,minmax(0,1fr))}.roster-table td:nth-child(6){grid-row:4}.roster-table td:nth-child(7){grid-column:auto;grid-row:auto}.task-window-times{grid-template-columns:1fr}.issued-task-actions{width:100%}}