:root{--bjt-ink:#1e2a35;--bjt-muted:#52606a;--bjt-navy:#1f3c54;--bjt-oxide:#a25b43;--bjt-wash:#f6f1e6;--bjt-line:rgba(45,61,71,.22);--bjt-soft:rgba(255,253,247,.7);--bjt-dark:#101b26;--bjt-paper-dark:rgba(24,36,48,.9)}
*{box-sizing:border-box}body{margin:0;min-width:320px;color:var(--bjt-ink);font-family:var(--tl-font-ui,system-ui,sans-serif);font-size:17px;line-height:1.62;background:#d8e0de;background-image:linear-gradient(120deg,rgba(255,255,255,.45),transparent 50%),repeating-linear-gradient(90deg,rgba(24,58,79,.045) 0 1px,transparent 1px 84px),linear-gradient(160deg,#dce7e3,#d6d9d0 62%,#d6d1c7)}
body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.32;background:radial-gradient(circle at 18% 11%,rgba(255,255,255,.9),transparent 24rem),radial-gradient(circle at 84% 82%,rgba(162,91,67,.18),transparent 25rem)}
.paper{position:relative;width:min(1120px,calc(100% - 28px));min-height:calc(100vh - 28px);margin:14px auto;padding:0 clamp(18px,4.5vw,70px) 52px;border:1px solid rgba(255,255,255,.78);border-radius:28px;background:linear-gradient(115deg,rgba(255,253,247,.84),rgba(255,252,243,.69));box-shadow:0 18px 70px rgba(31,60,84,.16);backdrop-filter:blur(18px)}
.site-head{min-height:80px;display:flex;align-items:center;gap:18px;border-bottom:1px solid var(--bjt-line)}.brand{display:inline-flex;align-items:center;gap:10px;color:inherit;text-decoration:none;font-weight:700}.seal{display:grid;place-items:center;width:38px;height:38px;border:1px solid var(--bjt-oxide);border-radius:50%;color:var(--bjt-oxide);font-family:var(--tl-font-jp,serif);font-size:19px}.course-mark{margin:0;color:var(--bjt-muted);font-family:var(--tl-font-mono,ui-monospace,monospace);font-size:13px;letter-spacing:.08em;text-transform:uppercase}.theme{margin-left:auto;display:flex;align-items:center;gap:8px;font-size:14px}.theme select{min-height:44px;border:0;background:transparent;color:inherit;font:inherit}
.loading{padding:60px 0}.hero{padding:clamp(34px,7vw,78px) 0 30px;border-bottom:1px solid var(--bjt-line)}.eyebrow{margin:0 0 10px;color:var(--bjt-oxide);font-family:var(--tl-font-mono,ui-monospace);font-size:12px;letter-spacing:.14em;text-transform:uppercase}.hero h1{max-width:830px;margin:0;font-family:var(--tl-font-jp,serif);font-size:clamp(30px,4vw,52px);font-weight:600;line-height:1.22;letter-spacing:.02em}.hero .goal{max-width:740px;margin:16px 0 0;font-size:clamp(18px,2vw,21px)}.state-line{display:flex;gap:12px;align-items:center;margin-top:18px;color:var(--bjt-muted);font-size:14px}.state-line:before{content:"";width:8px;height:8px;border-radius:50%;background:var(--bjt-oxide)}
.journey{display:flex;gap:0;margin:26px 0;border-block:1px solid var(--bjt-line);overflow-x:auto}.journey button{flex:1 0 max-content;min-height:48px;padding:0 15px;border:0;border-right:1px solid var(--bjt-line);background:transparent;color:var(--bjt-muted);font:inherit;font-size:14px}.journey button:last-child{border-right:0}.journey button[aria-current="step"]{color:var(--bjt-navy);font-weight:700;background:rgba(31,60,84,.06)}
.unit-picker{display:flex;align-items:center;gap:12px;margin:20px 0 2px}.unit-picker label{font-size:14px;color:var(--bjt-muted)}.unit-picker select{min-height:44px;max-width:100%;border:0;border-bottom:1px solid var(--bjt-line);background:transparent;color:inherit;font:inherit}.chapter{padding:clamp(26px,4vw,46px) 0;border-bottom:1px solid var(--bjt-line)}.chapter:last-child{border-bottom:0}.chapter-head{display:flex;gap:15px;align-items:baseline}.chapter-number{margin:0;color:var(--bjt-oxide);font-family:var(--tl-font-mono,ui-monospace);font-size:13px}.chapter h2{margin:0;font-family:var(--tl-font-jp,serif);font-size:clamp(23px,3vw,31px);font-weight:600;line-height:1.3}.chapter h3{margin:22px 0 9px;font-size:19px}.context{max-width:780px;color:var(--bjt-muted)}
.terms{display:grid;grid-template-columns:repeat(3,1fr);gap:0 28px}.term{padding:15px 0;border-bottom:1px solid var(--bjt-line)}.term .jp{margin:0;font-family:var(--tl-font-jp,serif);font-size:24px}.term p{margin:3px 0}.term small{color:var(--bjt-muted)}ruby rt{font-size:11px}.speaker{padding:17px 0;border-bottom:1px solid var(--bjt-line)}.speaker:first-child{border-top:1px solid var(--bjt-line)}.speaker-label{margin:0;color:var(--bjt-oxide);font-family:var(--tl-font-mono,ui-monospace);font-size:12px;letter-spacing:.08em;text-transform:uppercase}.speaker .jp{margin:4px 0;font-family:var(--tl-font-jp,serif);font-size:21px}.speaker .vi{margin:0;color:var(--bjt-muted)}
.scenario-control{display:flex;flex-wrap:wrap;gap:9px;margin:0 0 18px}.scenario-control button{min-height:44px;padding:8px 13px;border:1px solid var(--bjt-line);border-radius:12px;background:transparent;color:inherit;font:inherit}.scenario-control button[aria-pressed="true"]{border-color:var(--bjt-navy);background:rgba(31,60,84,.08);color:var(--bjt-navy);font-weight:700}.material{margin:20px 0;padding:20px 0;border-top:1px solid var(--bjt-line)}.material figure{margin:0}.material img{display:block;width:100%;max-width:760px;height:auto;border:1px solid var(--bjt-line);background:white}.material figcaption{margin-top:8px;color:var(--bjt-muted);font-size:14px}.data-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:0 22px;margin:16px 0 0}.data-grid div{padding:9px 0;border-bottom:1px solid var(--bjt-line)}.data-grid dt{color:var(--bjt-muted);font-size:13px}.data-grid dd{margin:3px 0;font-family:var(--tl-font-jp,serif);overflow-wrap:anywhere}.material-boundary{padding:16px;border-left:3px solid var(--bjt-oxide);background:rgba(162,91,67,.08);color:var(--bjt-ink)}.material-boundary p{margin:7px 0 0}
.audio-state{display:flex;gap:10px;align-items:flex-start;padding:16px 0;border-top:1px solid var(--bjt-line);color:var(--bjt-muted)}.audio-state strong{color:var(--bjt-ink)}.worked{padding:18px 0;border-top:1px solid var(--bjt-line)}.worked p{margin:8px 0}.worked .wrong{color:#864637}.worked .correct{color:var(--bjt-navy)}
.question-nav{display:flex;gap:10px;align-items:center;justify-content:space-between;margin:0 0 20px}.question-nav button,.submit,.action{min-height:46px;padding:10px 16px;border:1px solid var(--bjt-navy);border-radius:12px;background:transparent;color:var(--bjt-navy);font:inherit;font-weight:700}.question-nav button:disabled{opacity:.38}.question{max-width:830px}.question .passage{font-family:var(--tl-font-jp,serif);font-size:19px;line-height:1.85}.question legend{padding:0;font-family:var(--tl-font-jp,serif);font-size:clamp(20px,2.8vw,27px);line-height:1.5}.question .translation{margin:8px 0 16px;color:var(--bjt-muted)}fieldset{margin:0;padding:0;border:0}.option{display:flex;gap:13px;align-items:center;min-height:54px;padding:11px 0;border-bottom:1px solid var(--bjt-line);font-family:var(--tl-font-jp,serif);font-size:18px;cursor:pointer}.option input{width:20px;height:20px;accent-color:var(--bjt-navy)}.submit{margin-top:18px;background:var(--bjt-navy);color:#fff}.feedback{margin-top:18px;padding:16px 18px;border-left:3px solid var(--bjt-navy);background:rgba(31,60,84,.07)}.feedback[hidden]{display:none}.feedback p{margin:4px 0}.feedback ol{margin-bottom:0;padding-left:22px}.feedback [data-correct="true"]{color:#245b45;font-weight:700}
.transfer label{display:block;margin-top:16px;font-weight:700}.transfer textarea{display:block;width:100%;min-height:140px;margin-top:8px;padding:14px;border:1px solid var(--bjt-line);border-radius:12px;background:var(--bjt-soft);color:inherit;font:inherit;line-height:1.65}.transfer details{margin-top:16px}.transfer summary{min-height:44px;cursor:pointer;font-weight:700}.rubric{padding-left:21px}.save-status{min-height:26px;color:var(--bjt-muted)}.review-list{padding-left:22px}.review-list li{margin-bottom:8px}.footer-note{padding:27px 0 0;color:var(--bjt-muted);font-size:14px}
button,select,textarea,a{outline-offset:3px}button:focus-visible,select:focus-visible,textarea:focus-visible,a:focus-visible{outline:3px solid rgba(162,91,67,.65)}
html[data-mode="dark"] body{color:#e8e4d9;background:#0d1720;background-image:linear-gradient(120deg,rgba(69,92,103,.25),transparent 50%),repeating-linear-gradient(90deg,rgba(233,227,213,.04) 0 1px,transparent 1px 84px)}html[data-mode="dark"] .paper{background:linear-gradient(115deg,rgba(19,31,42,.92),rgba(28,39,47,.86));border-color:rgba(255,255,255,.16);box-shadow:0 20px 70px rgba(0,0,0,.32)}html[data-mode="dark"] .hero h1,html[data-mode="dark"] .chapter h2,html[data-mode="dark"] .term .jp,html[data-mode="dark"] .speaker .jp{color:#f4eee1}html[data-mode="dark"] .context,html[data-mode="dark"] .course-mark,html[data-mode="dark"] .state-line,html[data-mode="dark"] .term small,html[data-mode="dark"] .speaker .vi,html[data-mode="dark"] .footer-note,html[data-mode="dark"] .save-status,html[data-mode="dark"] .journey button{color:rgba(244,238,225,.78)}html[data-mode="dark"] .journey button[aria-current="step"]{color:#f4eee1;background:rgba(255,255,255,.08)}html[data-mode="dark"] .option{color:#f4eee1}html[data-mode="dark"] .material-boundary,html[data-mode="dark"] .feedback{background:rgba(255,255,255,.06)}html[data-mode="dark"] .transfer textarea{background:rgba(255,255,255,.05)}html[data-mode="dark"] .submit{background:#c17659;border-color:#c17659}.error{padding:36px 0;color:#9d3e32}
@media(max-width:700px){.paper{width:100%;min-height:100vh;margin:0;border-radius:0;border-inline:0;padding-inline:18px}.site-head{gap:10px;min-height:72px}.course-mark{display:none}.theme{font-size:0}.theme select{font-size:14px}.terms{grid-template-columns:1fr}.journey{margin-inline:-18px}.journey button{font-size:13px;padding-inline:12px}.unit-picker{align-items:flex-start;flex-direction:column;gap:2px}.chapter-head{align-items:flex-start;flex-direction:column;gap:3px}.question-nav{align-items:stretch}.question-nav button{padding-inline:11px}.material img{width:100%}}

/* Approved V5 paper hierarchy, adapted to BJT's quiet office correspondence. */
@font-face{font-family:BrandScript;src:url('/assets/learner-design/brand-script.woff2') format('woff2');font-weight:700;font-display:swap}
body{background:#e8e7e0;color:#263e44;background-image:none}
body:before{inset:0;opacity:1;background:linear-gradient(90deg,rgba(248,246,239,.18),rgba(248,246,239,.04)),url('assets/bjt-office-washi-v1.png') center/cover fixed no-repeat}
.paper{width:min(1120px,calc(100% - 32px));min-height:calc(100vh - 32px);margin:16px auto;padding:0 clamp(20px,4vw,62px) 42px;border:1px solid rgba(255,255,255,.72);border-radius:28px;background:rgba(255,253,248,.77);box-shadow:0 10px 38px rgba(76,71,53,.08),inset 0 1px rgba(255,255,255,.58);backdrop-filter:blur(9px)}
.site-head{min-height:62px;gap:14px;border-bottom:1px solid rgba(101,126,123,.28)}.brand{gap:10px}.seal{display:block;width:36px;height:43px;padding:3px 7px;border:1px solid #be8f83;border-radius:0;background:#be8f83;box-shadow:inset 0 0 0 2px #dfc4b6;color:#fff7ea;font-family:var(--tl-font-jp,serif);font-size:17px;line-height:1.04;text-align:center}.brand-copy{display:flex;flex-direction:column;gap:0}.brand-copy b{font:700 27px/1 BrandScript,Georgia,serif;color:#29434b}.brand-copy small{margin-top:4px;font:600 8px/1 var(--tl-font-ui,system-ui);letter-spacing:.29em;color:#485f62}.theme{width:44px;height:44px;display:grid;place-items:center;position:relative;margin-left:auto;border:1px solid #9bacac;border-radius:50%;color:#546c70;font-size:18px}.theme select{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.lesson-lead{padding:20px 0 16px;border-bottom:1px solid rgba(101,126,123,.28)}.eyebrow{margin:0 0 7px;color:#6b7d7d;font-size:11px;letter-spacing:.15em}.lead-row{display:flex;align-items:end;justify-content:space-between;gap:26px}.lead-row h1{max-width:760px;margin:0;color:#29434b;font-family:var(--tl-font-jp,Georgia,serif);font-size:clamp(28px,3.25vw,42px);font-weight:500;line-height:1.2;letter-spacing:0}.lead-row .goal{max-width:690px;margin:7px 0 0;color:#4b6264;font-size:17px;line-height:1.5}.next-action{flex:0 0 auto;min-height:46px;padding:0 15px;border:0;border-radius:8px;background:#718a85;color:#fffdf5;font:16px var(--tl-font-ui,system-ui);white-space:nowrap}.next-action span{margin-left:8px;font-size:22px}.lesson-controls{display:flex;align-items:center;gap:10px;min-height:48px;padding:4px 0;border-bottom:1px solid rgba(101,126,123,.28);color:#607573;font-size:14px}.lesson-controls select{min-height:40px;max-width:min(610px,70vw);padding:0 4px;border:0;border-bottom:1px solid rgba(101,126,123,.35);border-radius:0;background:transparent;color:#29434b;font:inherit}.lesson-controls span{margin-left:auto;color:#687c7b;font-size:13px}
.chapter{padding:22px 0;border-bottom:1px solid rgba(101,126,123,.28)}.chapter-head{gap:9px;align-items:baseline}.chapter-number{color:#b07f73;font:12px Georgia,serif}.chapter h2{color:#29434b;font-family:var(--tl-font-ui,system-ui);font-size:20px;font-weight:600;letter-spacing:.01em}.material-chapter{padding-top:18px}.material-chapter .context{margin:0 0 11px}.context{max-width:820px;color:#4b6264;font-size:17px;line-height:1.55}.scenario-control{gap:7px;margin:0 0 12px}.scenario-control button{min-height:42px;padding:7px 12px;border:1px solid #99aaa5;border-radius:7px;color:#526c6a;background:rgba(255,253,243,.38);font-size:14px}.scenario-control button[aria-pressed="true"]{border-color:#718a85;background:#718a85;color:#fffdf5}.material{margin:12px 0 0;padding:13px 0 0;border-top:1px solid rgba(101,126,123,.22)}.material h3{margin:0 0 10px;color:#29434b;font-size:17px}.material img{max-width:850px;border:0;background:transparent}.material figcaption{color:#687c7b}.data-grid{gap:0 18px;margin-top:10px}.data-grid div{padding:7px 0;border-color:rgba(101,126,123,.2)}.speaker{padding:12px 0;border-color:rgba(101,126,123,.22)}.speaker .jp{margin:2px 0;color:#29434b;font-size:20px;line-height:1.6}.speaker .vi{font-size:15px;color:#4b6264}.speaker-label{color:#866055;font-size:10px}.audio-state{padding:12px 0 0;border-top:1px solid rgba(101,126,123,.22);font-size:14px}.terms{gap:0 24px}.term{padding:10px 0;border-color:rgba(101,126,123,.24)}.term .jp{color:#29434b;font-size:23px}.term p{font-size:16px}.term small{color:#617572}.worked{padding:14px 0;border-color:rgba(101,126,123,.22)}.worked h3{font-size:16px}.worked p{font-size:16px}.question .passage{font-size:18px}.question legend{font-size:23px}.option{min-height:52px;font-size:17px;border-color:rgba(101,126,123,.25)}.submit{background:#718a85;border-color:#718a85}.feedback{background:rgba(113,138,133,.1);border-left-color:#718a85}.transfer textarea{background:rgba(255,253,243,.48);border-color:#99aaa5}.footer-note{display:none}
html[data-mode="dark"] body{background:#172229;color:#e9e3d5}html[data-mode="dark"] body:before{filter:saturate(.66) brightness(.53);opacity:.9;background:linear-gradient(90deg,rgba(15,25,32,.3),rgba(15,25,32,.1)),url('assets/bjt-office-washi-v1.png') center/cover fixed no-repeat}html[data-mode="dark"] .paper{background:rgba(20,31,39,.80);border-color:rgba(240,233,217,.2);box-shadow:0 15px 42px rgba(0,0,0,.26)}html[data-mode="dark"] .site-head,html[data-mode="dark"] .lesson-lead,html[data-mode="dark"] .lesson-controls,html[data-mode="dark"] .chapter{border-color:rgba(240,233,217,.18)}html[data-mode="dark"] .brand-copy b,html[data-mode="dark"] .lead-row h1,html[data-mode="dark"] .chapter h2,html[data-mode="dark"] .material h3,html[data-mode="dark"] .term .jp,html[data-mode="dark"] .speaker .jp{color:#f4eee1}html[data-mode="dark"] .brand-copy small,html[data-mode="dark"] .eyebrow,html[data-mode="dark"] .lead-row .goal,html[data-mode="dark"] .context,html[data-mode="dark"] .lesson-controls,html[data-mode="dark"] .lesson-controls span,html[data-mode="dark"] .speaker .vi,html[data-mode="dark"] .term small{color:rgba(244,238,225,.8)}html[data-mode="dark"] .lesson-controls select{color:#f4eee1;border-color:rgba(240,233,217,.35)}html[data-mode="dark"] .theme{border-color:rgba(240,233,217,.48);color:#f4eee1}html[data-mode="dark"] .scenario-control button{border-color:rgba(240,233,217,.35);background:rgba(255,255,255,.04);color:#f4eee1}html[data-mode="dark"] .scenario-control button[aria-pressed="true"],html[data-mode="dark"] .next-action,html[data-mode="dark"] .submit{background:#849b96;border-color:#849b96}html[data-mode="dark"] .material,.speaker,.audio-state,.term,.worked,.option{border-color:rgba(240,233,217,.18)}html[data-mode="dark"] .transfer textarea{background:rgba(255,255,255,.05);border-color:rgba(240,233,217,.3)}
@media(max-width:700px){.paper{width:100%;min-height:100vh;margin:0;padding:0 18px 32px;border:0;border-radius:0;background:rgba(255,253,248,.84)}.site-head{min-height:58px}.brand-copy b{font-size:24px}.brand-copy small{font-size:7px}.seal{width:34px;height:40px;font-size:16px}.lead-row{display:block}.lead-row h1{font-size:29px;line-height:1.18}.lead-row .goal{font-size:17px}.next-action{margin-top:12px;width:100%;min-height:44px}.lesson-controls{flex-wrap:wrap;gap:3px 8px}.lesson-controls label{width:100%;font-size:12px}.lesson-controls select{width:100%;max-width:100%;font-size:15px}.lesson-controls span{display:none}.chapter{padding:18px 0}.chapter-head{flex-direction:row;align-items:baseline}.chapter h2{font-size:19px}.context{font-size:16px}.material img{width:100%}.terms{grid-template-columns:1fr}.material-chapter .context{margin-bottom:9px}}
.lesson-controls select,.scenario-control button{min-height:44px}
.reading-start{max-width:790px;margin:16px 0 0;padding:13px 0 0;border-top:1px solid rgba(101,126,123,.24);color:#4b6264;font-size:15px;line-height:1.52}.reading-start p{margin:5px 0}.reading-start strong{color:#29434b}.reading-source{margin-top:2px}.reading-source section{padding:12px 0;border-top:1px solid rgba(101,126,123,.18)}.reading-source section:first-child{border-top:0}.reading-source .jp{margin:0;color:#29434b;font:20px/1.75 var(--tl-font-jp,serif)}.reading-source .vi{margin:5px 0 0;color:#607573;font-size:15px}.evidence-note{margin-top:9px!important;color:#4b6264;font-size:14px}
.next-action,.submit,.scenario-control button[aria-pressed="true"]{background:#3a5d59;border-color:#3a5d59;color:#fffdf5}
.data-grid dt{color:#4b6264;font-weight:700}.data-grid dt span{display:block;margin-top:2px;font:13px var(--tl-font-jp,serif);font-weight:400}.data-grid dd{color:#29434b}
html[data-mode="dark"] .next-action,html[data-mode="dark"] .submit,html[data-mode="dark"] .scenario-control button[aria-pressed="true"]{background:#365853;border-color:#365853;color:#fffdf5}html[data-mode="dark"] .data-grid dt{color:#d9e6df}html[data-mode="dark"] .data-grid dd{color:#f4eee1}
html[data-mode="dark"] .reading-start,html[data-mode="dark"] .reading-source .vi,html[data-mode="dark"] .evidence-note{color:rgba(244,238,225,.8)}html[data-mode="dark"] .reading-start strong,html[data-mode="dark"] .reading-source .jp{color:#f4eee1}
.teacher-mark{margin-left:auto;color:#866055;font:11px var(--tl-font-mono,ui-monospace);letter-spacing:.14em}.teacher-plan{list-style:none;padding:0;margin:0}.teacher-plan li{display:grid;grid-template-columns:90px 1fr;gap:14px;padding:13px 0;border-bottom:1px solid rgba(101,126,123,.22)}.teacher-plan strong{color:#866055}.teacher-key{border-left:3px solid #3a5d59;padding-left:12px}.teacher-key p{color:#31534f}.teacher-note{margin:20px 0 0;color:#617572;font-size:14px}@media(max-width:700px){.teacher-plan li{grid-template-columns:1fr;gap:2px}.teacher-mark{font-size:9px}}

/* Reading source relationships: open columns on the existing paper. */
.reading-relation{margin-block:var(--tl-space-5,24px);border-block:1px solid var(--bjt-line);padding-block:var(--tl-space-4,16px)}
.relation-steps{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--tl-space-5,24px)}
.relation-steps li{min-width:0;border-inline-start:2px solid var(--bjt-oxide);padding-inline-start:var(--tl-space-4,16px)}
.relation-role{font-weight:700}.relation-steps p{margin-block:8px;font-size:16px}.reading-relation a,.evidence-note a{display:inline-flex;align-items:center;min-height:44px;color:inherit;text-underline-offset:4px}.relation-limit{font-size:16px}
.reading-source section.is-evidence,.reading-source section:target{outline:2px solid var(--bjt-oxide);outline-offset:5px;background:rgba(162,91,67,.08)}
.reading-relation a:focus-visible,.evidence-note a:focus-visible{outline:2px solid var(--bjt-oxide);outline-offset:3px}
@media(max-width:700px){.relation-steps{grid-template-columns:1fr}.relation-steps li+li:before{content:'↓';display:block;color:var(--bjt-oxide)}}