:root{color-scheme:light;background:#ece5d8}
*{box-sizing:border-box}
html{min-width:320px;scroll-behavior:smooth}
body{margin:0;color:var(--tl-ink);font-family:var(--tl-font-ui);font-size:var(--tl-text-body);line-height:1.65;background:
radial-gradient(circle at 8% 5%,rgba(165,59,46,.15),transparent 29rem),
radial-gradient(circle at 91% 22%,rgba(31,112,135,.14),transparent 28rem),
linear-gradient(145deg,#f5f0e6 0%,#e9e0d0 54%,#dfe8e4 100%);min-height:100vh}
html[data-mode="dark"]{color-scheme:dark;background:#061522}
html[data-mode="dark"] body{background:
radial-gradient(circle at 8% 5%,rgba(232,137,119,.13),transparent 28rem),
radial-gradient(circle at 91% 22%,rgba(120,201,219,.12),transparent 28rem),
linear-gradient(145deg,#071522 0%,#0c2233 54%,#102d35 100%)}
button,a{font:inherit}
button{color:inherit}
a{color:inherit;text-underline-offset:.2em}
button:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--tl-focus);outline-offset:3px}
.page-shell{width:min(1120px,calc(100% - 32px));margin:0 auto;padding:var(--tl-space-5) 0 var(--tl-space-7)}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:var(--tl-space-4);padding:var(--tl-space-3) 0 var(--tl-space-6)}
.brand{display:inline-flex;align-items:center;gap:var(--tl-space-3);text-decoration:none;min-height:var(--tl-control-min)}
.brand-seal{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--tl-seal);color:#fff;font:600 21px var(--tl-font-shodo)}
.brand strong,.brand small{display:block}.brand strong{letter-spacing:.02em}.brand small{color:var(--tl-ink-soft);font:600 var(--tl-text-meta) var(--tl-font-mono);letter-spacing:.09em;text-transform:uppercase}
.quiet-button,.icon-button,.settings-dialog fieldset button{min-height:var(--tl-control-min);border:1px solid var(--tl-hair);border-radius:var(--tl-radius-control);background:var(--tl-glass);padding:0 var(--tl-space-4);cursor:pointer}
.hero{padding:var(--tl-space-6) 0 var(--tl-space-7);display:grid;grid-template-columns:minmax(0,1.25fr) minmax(260px,.55fr);gap:var(--tl-space-6);align-items:end}
.kicker,.folio{margin:0 0 var(--tl-space-3);color:var(--tl-seal);font:700 var(--tl-text-meta) var(--tl-font-mono);letter-spacing:.16em}
.hero .kicker,.hero h1{grid-column:1}
.hero h1{margin:0;font:600 var(--tl-text-title)/.98 var(--tl-font-shodo);letter-spacing:-.045em;text-wrap:balance}
.hero-copy{grid-column:2;grid-row:1/3;margin:0;color:var(--tl-ink-soft);font-size:var(--tl-text-body-large);max-width:31ch}
.session-meter{grid-column:1/-1;display:grid;grid-template-columns:auto 1fr;gap:var(--tl-space-4);align-items:center;margin-top:var(--tl-space-4);font:600 var(--tl-text-meta) var(--tl-font-mono);letter-spacing:.06em;color:var(--tl-ink-soft)}
.meter-track{height:2px;background:var(--tl-hair);overflow:hidden}.meter-track i{display:block;width:0;height:100%;background:var(--tl-seal);transition:width .25s ease}
.workbook{background:var(--tl-glass);border:1px solid var(--tl-glass-border);border-radius:var(--tl-radius-surface);box-shadow:var(--tl-shadow);backdrop-filter:blur(var(--tl-blur));padding:clamp(22px,4vw,52px);overflow:hidden}
.workbook-heading{display:flex;justify-content:space-between;align-items:end;gap:var(--tl-space-6);padding-bottom:var(--tl-space-5);border-bottom:1px solid var(--tl-hair)}
.workbook-heading h2,.route-note h2,.settings-dialog h2{margin:0;font:600 clamp(28px,3vw,42px)/1.05 var(--tl-font-shodo);letter-spacing:-.025em}
.workbook-heading>p{max-width:34ch;margin:0;color:var(--tl-ink-soft)}
.track-tabs{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--tl-hair)}
.track-tabs button{min-height:var(--tl-control-min);padding:var(--tl-space-4) var(--tl-space-3);border:0;border-bottom:3px solid transparent;background:transparent;cursor:pointer;color:var(--tl-ink-soft);font-weight:700}
.track-tabs button span{display:block;font:600 20px var(--tl-font-jp);color:var(--tl-ink);margin-bottom:2px}
.track-tabs button[aria-selected="true"]{color:var(--tl-seal);border-bottom-color:var(--tl-seal);background:var(--tl-wash)}
.practice-panel{min-height:520px;padding:var(--tl-space-6) 0 var(--tl-space-3)}
.practice-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--tl-space-5);align-items:start}
.practice-head h3{margin:0 0 var(--tl-space-3);font:600 clamp(31px,4vw,48px)/1.07 var(--tl-font-shodo);letter-spacing:-.035em}
.practice-head .summary{margin:0;color:var(--tl-ink-soft);max-width:58ch}
.source-state{align-self:start;border-left:2px solid var(--tl-seal);padding-left:var(--tl-space-3);max-width:26ch;color:var(--tl-ink-soft);font:600 var(--tl-text-meta)/1.5 var(--tl-font-mono)}
.practice-body{margin-top:var(--tl-space-6);border-top:1px solid var(--tl-hair)}
.prompt-row{display:grid;grid-template-columns:9rem minmax(0,1fr);gap:var(--tl-space-5);padding:var(--tl-space-5) 0;border-bottom:1px solid var(--tl-hair)}
.prompt-label{color:var(--tl-seal);font:700 var(--tl-text-meta) var(--tl-font-mono);letter-spacing:.12em;text-transform:uppercase}
.prompt-main{min-width:0}.jp-line{margin:0;font:600 clamp(21px,2.4vw,29px)/1.75 var(--tl-font-jp);overflow-wrap:anywhere}.jp-line rt{font-size:11px;font-weight:500}.translation{margin:var(--tl-space-2) 0 0;color:var(--tl-ink-soft)}
.action-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--tl-space-3);padding-top:var(--tl-space-5)}
.primary-button,.secondary-button,.option-button,.complete-button{min-height:var(--tl-control-min);border-radius:var(--tl-radius-control);padding:0 var(--tl-space-4);cursor:pointer;font-weight:700}
.primary-button,.complete-button{border:1px solid var(--tl-seal);background:var(--tl-seal);color:#fff}
.secondary-button{border:1px solid var(--tl-hair);background:var(--tl-paper-soft)}
.primary-button:disabled,.secondary-button:disabled,.complete-button:disabled{opacity:.5;cursor:not-allowed}
.record-note{color:var(--tl-ink-soft);font-size:14px;margin:var(--tl-space-3) 0 0}.recording{color:var(--tl-danger);font-weight:700}
.playback{display:block;width:min(100%,520px);margin-top:var(--tl-space-4)}
.model-answer{margin-top:var(--tl-space-4);padding:var(--tl-space-4) 0;border-top:1px solid var(--tl-hair)}
.model-answer[hidden],.playback[hidden]{display:none}
.options{display:grid;margin-top:var(--tl-space-4);border-top:1px solid var(--tl-hair)}
.option-button{display:grid;grid-template-columns:34px minmax(0,1fr);gap:var(--tl-space-3);align-items:center;text-align:left;border:0;border-bottom:1px solid var(--tl-hair);border-radius:0;background:transparent;padding:var(--tl-space-4) var(--tl-space-2)}
.option-button .option-index{display:grid;place-items:center;width:32px;height:32px;border:1px solid var(--tl-hair);border-radius:50%;font:700 12px var(--tl-font-mono)}
.option-button[aria-pressed="true"]{background:var(--tl-wash);color:var(--tl-seal)}
.option-button.is-correct{color:var(--tl-success);background:color-mix(in srgb,var(--tl-success) 9%,transparent)}
.option-button.is-wrong{color:var(--tl-danger);text-decoration:line-through;text-decoration-thickness:1px}
.feedback{margin:var(--tl-space-5) 0 0;border-left:3px solid var(--tl-seal);padding:var(--tl-space-2) 0 var(--tl-space-2) var(--tl-space-4)}
.feedback strong{display:block;margin-bottom:var(--tl-space-2)}
.feedback[hidden]{display:none}
.callback-retry,.transfer-draft{margin:var(--tl-space-5) 0;padding:var(--tl-space-4);border:1px solid var(--tl-hair);border-radius:var(--tl-radius-control);background:var(--tl-paper-soft)}
.callback-retry[hidden]{display:none}.draft-label{display:block;font-weight:700;margin:0 0 var(--tl-space-2)}
.callback-retry textarea,.transfer-draft textarea{display:block;width:100%;margin:var(--tl-space-2) 0 var(--tl-space-3);padding:var(--tl-space-3);border:1px solid var(--tl-hair);border-radius:var(--tl-radius-control);background:var(--tl-glass);color:var(--tl-ink);font:inherit;line-height:1.55;resize:vertical}
.check-label{margin-left:var(--tl-space-2)}.transfer-draft .complete-button{display:block;margin-top:var(--tl-space-4)}.retrieval-list{margin:var(--tl-space-2) 0 0;padding-left:1.25rem;color:var(--tl-ink-soft)}
.full-route{display:inline-flex;align-items:center;min-height:var(--tl-control-min);margin-top:var(--tl-space-5);font-weight:700;color:var(--tl-seal)}
.live-region{min-height:1.5em;margin:var(--tl-space-2) 0 0;color:var(--tl-ink-soft)}
.route-note{padding:var(--tl-space-8) clamp(0px,4vw,42px);max-width:790px}.route-note p:last-child{font-size:var(--tl-text-body-large);color:var(--tl-ink-soft)}
.consult-link{display:inline-flex;align-items:center;margin-top:var(--tl-space-4);text-decoration:none}
.footer{display:flex;justify-content:space-between;gap:var(--tl-space-4);padding:var(--tl-space-5) 0;border-top:1px solid var(--tl-hair);color:var(--tl-ink-soft);font:600 var(--tl-text-meta) var(--tl-font-mono);letter-spacing:.08em}
.footer a{display:inline-flex;align-items:center;min-height:var(--tl-control-min)}
.settings-dialog{width:min(520px,calc(100% - 28px));border:1px solid var(--tl-glass-border);border-radius:var(--tl-radius-panel);padding:0;background:var(--tl-glass-strong);color:var(--tl-ink);box-shadow:var(--tl-shadow);backdrop-filter:blur(var(--tl-blur))}
.settings-dialog::backdrop{background:rgba(4,14,22,.52);backdrop-filter:blur(4px)}
.settings-dialog form{padding:var(--tl-space-5)}
.dialog-heading{display:flex;justify-content:space-between;gap:var(--tl-space-4);align-items:start}.icon-button{width:44px;padding:0;font-size:24px}
.settings-dialog fieldset{border:0;border-top:1px solid var(--tl-hair);border-bottom:1px solid var(--tl-hair);margin:var(--tl-space-5) 0;padding:var(--tl-space-4) 0;display:flex;gap:var(--tl-space-3);flex-wrap:wrap}.settings-dialog legend{padding-top:var(--tl-space-4);font-weight:700}.settings-dialog p{color:var(--tl-ink-soft)}
.noscript{padding:var(--tl-space-4);background:#fff3cd;color:#563f00}
@media(max-width:720px){.page-shell{width:min(100% - 22px,1120px);padding-top:var(--tl-space-3)}.hero{grid-template-columns:1fr;padding-top:var(--tl-space-4)}.hero-copy{grid-column:1;grid-row:auto}.session-meter{grid-template-columns:1fr}.workbook{padding:var(--tl-space-5) var(--tl-space-4)}.workbook-heading,.practice-head{grid-template-columns:1fr;display:grid;gap:var(--tl-space-3)}.track-tabs button{font-size:13px}.prompt-row{grid-template-columns:1fr;gap:var(--tl-space-2)}.practice-panel{min-height:560px}.footer{flex-direction:column}}
@media(max-width:390px){.topbar{align-items:flex-start}.brand small{max-width:15ch}.quiet-button{padding:0 var(--tl-space-3)}.track-tabs button{padding-inline:4px}.track-tabs button span{font-size:18px}.workbook{border-radius:var(--tl-radius-panel)}.option-button{padding-inline:0}.hero h1{font-size:clamp(36px,13vw,50px)}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
@media(forced-colors:active){.meter-track i,.brand-seal,.primary-button,.complete-button{forced-color-adjust:none}}

/* Content-first work lesson: compact chrome, existing shared material/tokens. */
.lesson-toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--tl-space-2);padding-bottom:var(--tl-space-2)}
.lesson-toolbar h1{margin:0;font:600 var(--tl-text-body-large)/1.4 var(--tl-font-ui)}
.lesson-toolbar>span{font-size:14px;color:var(--tl-ink-soft)}
.workbook{padding:var(--tl-space-4);margin-top:var(--tl-space-3)}
.track-tabs button{padding:var(--tl-space-2)}
.track-tabs button span{display:inline;margin-right:var(--tl-space-2)}
.practice-panel{padding-top:var(--tl-space-4)}
.practice-head{display:block}.practice-head h3{font:600 clamp(24px,3vw,32px)/1.25 var(--tl-font-jp);margin:0}
.practice-details{margin-top:var(--tl-space-2);color:var(--tl-ink-soft)}
.practice-details summary{min-height:var(--tl-control-min);display:flex;align-items:center;cursor:pointer}
.practice-details p{margin:var(--tl-space-2) 0}
.practice-body{margin-top:var(--tl-space-3)}
.callback-scenario h4{margin:var(--tl-space-3) 0;font-size:var(--tl-text-body)}
.callback-scenario .prompt-jp{font:500 var(--tl-text-jp)/1.7 var(--tl-font-jp);margin:var(--tl-space-3) 0;overflow-wrap:anywhere}
.retrieval-session{border-top:1px solid var(--tl-hair);margin-top:var(--tl-space-4);padding-top:var(--tl-space-4)}
.retrieval-session textarea{width:100%;min-height:120px;padding:var(--tl-space-3);font:inherit;background:var(--tl-paper);color:var(--tl-ink);border:1px solid var(--tl-hair);border-radius:var(--tl-radius-control)}
.retrieval-session button{margin-top:var(--tl-space-3)}
/* The spoken exchange owns the first viewport; its reference stays in Settings. */
.topbar{padding-bottom:var(--tl-space-3)}
.workbook .practice-panel{padding-top:var(--tl-space-3)}
.workbook .practice-body{margin-top:var(--tl-space-2)}
.workbook .practice-head h3{font:650 23px/1.4 var(--tl-font-ui)}
.lesson-toolbar{padding:0;min-height:0}
.lesson-toolbar h1{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.lesson-toolbar>span{font-size:12px;line-height:1.2}
.workbook .prompt-row{padding-block:var(--tl-space-3)}
.workbook .practice-body{margin-top:var(--tl-space-1)}
.callback-scenario h4{margin:var(--tl-space-1) 0}
.callback-scenario .prompt-jp{margin:var(--tl-space-1) 0}