:root{--bg:#f4f0e6;--paper:#fbf8ef;--panel:#fffdf7;--ink:#233027;--text:#526159;--muted:#7f8b82;--border:#ded7c7;--green:#23684c;--green-soft:#e7f1ea;--gold:#da8e32;--gold-dark:#9d641f;--track:#e7dfcd;--shadow:0 22px 60px #362d1e21;--sans:system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--mono:"SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;color:var(--text);background:var(--bg);font-family:var(--sans);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;line-height:1.5}*{box-sizing:border-box}body{background:linear-gradient(90deg, #23684c14 1px, transparent 1px), linear-gradient(180deg, #23684c0f 1px, transparent 1px), radial-gradient(circle at top left, #da8e3229, transparent 34%), var(--bg);background-size:34px 34px,34px 34px,auto,auto;min-width:320px;min-height:100svh;margin:0}#root{min-height:100svh}::selection{background:#da8e323d}.app-shell{place-items:center;min-height:100svh;padding:32px 18px;display:grid}.dojo-panel{border:1px solid var(--border);background:linear-gradient(180deg, #ffffffeb, #faf8f2f5), var(--panel);width:min(940px,100%);box-shadow:var(--shadow);border-radius:8px;overflow:hidden}.title-screen,.result-screen{padding:46px}.title-copy,.result-head{max-width:720px}.eyebrow,.section-label{color:var(--muted);letter-spacing:0;margin:0 0 8px;font-size:13px;font-weight:700}h1,h2,h3,p{margin-top:0}h1{color:var(--ink);margin-bottom:16px;font-size:44px;line-height:1.12}h2{color:var(--ink);margin-bottom:16px;font-size:22px}h3{color:var(--ink);margin-bottom:0;font-size:18px}.lead{color:var(--text);margin-bottom:0;font-size:17px;line-height:1.8}.category-box{margin:34px 0 28px}.category-options{grid-template-columns:repeat(3,1fr);gap:10px;display:grid}button{cursor:pointer;font:inherit;border:0;border-radius:7px}button:focus-visible,input:focus-visible{outline-offset:3px;outline:3px solid #da8e3257}.category-button{border:1px solid var(--border);color:var(--text);text-align:left;background:#fff;padding:13px 14px;transition:background .2s,border-color .2s,transform .2s}.category-button strong,.category-button span{display:block}.category-button strong{color:var(--ink);margin-bottom:5px;font-size:18px}.category-button span{color:var(--muted);font-size:13px;line-height:1.45}.category-button:hover,.category-button.active{background:var(--green-soft);color:var(--green);border-color:#23684c4d;transform:translateY(-1px)}.category-button:hover strong,.category-button.active strong{color:var(--green)}.primary-action,.secondary-action{min-height:48px;padding:0 24px;font-weight:800}.primary-action{background:var(--green);color:#fff;box-shadow:0 12px 24px #23684c2e}.primary-action:hover{background:#194f3a}.secondary-action{border:1px solid var(--border);color:var(--ink);background:#fff}.secondary-action:hover{background:var(--paper)}.pc-note{color:var(--muted);margin:14px 0 0;font-size:13px}.play-screen{padding:28px}.play-header{justify-content:space-between;align-items:center;gap:24px;margin-bottom:18px;display:flex}.play-header h1{margin-bottom:0;font-size:30px}.play-actions{align-items:center;gap:10px;display:flex}.menu-action{border:1px solid var(--border);color:var(--muted);background:#ffffffd1;min-height:38px;padding:0 14px;font-size:13px;font-weight:800}.menu-action:hover{background:var(--paper);color:var(--ink)}.timer-block{min-width:118px;color:var(--gold-dark);text-align:center;background:#fff7e9;border:1px solid #da8e3252;border-radius:8px;padding:12px 16px}.timer-value{font-size:38px;font-weight:900;line-height:1}.timer-label{font-size:13px;font-weight:700;display:block}.time-track,.exp-track{background:var(--track);border-radius:999px;overflow:hidden}.time-track{height:12px;margin-bottom:18px}.time-track span,.exp-track span{border-radius:inherit;height:100%;transition:width .25s;display:block}.time-track span{background:linear-gradient(90deg, var(--green), var(--gold))}.stats-grid{grid-template-columns:repeat(6,1fr);gap:10px;margin-bottom:16px;display:grid}.stat-card,.result-stat{border:1px solid var(--border);background:#ffffffc2;border-radius:8px;padding:14px}.stat-card span,.result-stat span{color:var(--muted);margin-bottom:6px;font-size:12px;font-weight:700;display:block}.stat-card strong,.result-stat strong{color:var(--ink);font-size:24px;line-height:1}.stat-card.accent{background:#fff7e9;border-color:#da8e3261}.stat-card.accent strong{color:var(--gold-dark)}.level-row{border:1px solid var(--border);background:#fff;border-radius:8px;grid-template-columns:1fr 1.25fr;align-items:center;gap:18px;margin-bottom:18px;padding:16px;display:grid}.level-row strong{color:var(--ink);font-size:18px;display:block}.exp-area span{color:var(--muted);margin-bottom:7px;font-size:13px;font-weight:700;display:block}.exp-track{height:13px}.exp-track span{background:linear-gradient(90deg,#da8e32,#f0c66b)}.typing-zone{border:1px solid var(--border);background:linear-gradient(135deg,#23684c14,#0000 44%),#fff;border-radius:8px;margin-bottom:18px;padding:24px;transition:border-color .2s,background .2s}.typing-zone.miss-state{background:linear-gradient(135deg,#be41341f,#0000 44%),#fff;border-color:#be41346b}.word-card{text-align:center}.category-pill{background:var(--green-soft);color:var(--green);border:1px solid #23684c3d;border-radius:999px;padding:4px 10px;font-size:12px;font-weight:800;display:inline-flex}.term{color:var(--ink);margin:12px 0 6px;font-size:46px;font-weight:900;line-height:1.2}.answer-guide{background:#fbfff9e6;border:1px solid #23684c38;border-radius:8px;width:min(620px,100%);margin:12px auto 14px;padding:14px 16px}.answer-guide span{color:var(--muted);margin-bottom:6px;font-size:12px;font-weight:800;display:block}.answer-guide strong{color:var(--green);font-family:var(--mono);overflow-wrap:anywhere;font-size:26px;line-height:1.25;display:block}.answer-guide p{color:var(--muted);margin:8px 0 0;font-size:13px;line-height:1.6}.answer-guide code{color:var(--text);font-family:var(--mono);overflow-wrap:anywhere}.progress-line{color:var(--muted);font-family:var(--mono);overflow-wrap:anywhere;margin:0 auto 10px;font-size:15px}.progress-line span{color:var(--green);font-weight:900}.progress-line em{color:var(--muted);font-style:normal}.input-hint{color:var(--muted);margin-bottom:8px;font-size:14px}.feedback-line{color:var(--gold-dark);margin-bottom:20px;font-size:14px;font-weight:800}.feedback-line.correct{color:var(--green)}.feedback-line.miss{color:#b64235}.typing-label{color:var(--ink);margin-bottom:8px;font-size:13px;font-weight:800;display:block}.typing-input{box-sizing:border-box;width:100%;color:var(--ink);font:700 24px/1.3 var(--mono);background:#fbfff9;border:2px solid #23684c38;border-radius:8px;padding:15px 16px}.typing-input:disabled{opacity:.6}.support-grid{grid-template-columns:1fr 1fr;gap:14px;display:grid}.explain-box,.log-box{border:1px solid var(--border);background:#ffffffc7;border-radius:8px;min-height:132px;padding:16px}.explain-box p,.empty-log{color:var(--text);margin-bottom:0;line-height:1.7}.log-box ol{margin:0;padding:0;list-style:none}.log-box li{border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;gap:12px;padding:8px 0;display:flex}.log-box li:last-child{border-bottom:0}.log-box strong{color:var(--ink)}.log-box span{color:var(--muted);font-family:var(--mono);font-size:13px}.result-grid{grid-template-columns:repeat(3,1fr);gap:10px;margin:30px 0;display:grid}.result-stat.wide{grid-column:span 2}.review-list{border-top:1px solid var(--border);padding-top:26px}.review-items{grid-template-columns:repeat(2,1fr);gap:12px;display:grid}.review-item{border:1px solid var(--border);background:#fff;border-radius:8px;padding:16px}.review-item span{color:var(--green);margin-bottom:4px;font-size:12px;font-weight:800;display:block}.review-item p{color:var(--text);margin:10px 0 0;line-height:1.7}.result-actions{flex-wrap:wrap;gap:12px;margin-top:28px;display:flex}@media (width<=760px){.app-shell{padding:14px}.title-screen,.result-screen,.play-screen{padding:22px}h1{font-size:34px}.category-options,.stats-grid,.level-row,.support-grid,.result-grid,.review-items{grid-template-columns:1fr}.play-header{flex-direction:column;align-items:stretch}.play-actions{flex-direction:column-reverse;align-items:stretch}.timer-block{width:auto}.term{font-size:34px}.result-stat.wide{grid-column:auto}}