:root{--surface:#fffefa;--input:#ffffff;--control-line:#bacabd;--hint:#edf1e5;--hint-line:#9bb58c;--success-soft:#edf3e6;--warning-soft:#faeee5;--passage:#eff2e8;--green-hover:#173d32;--danger:#9a352c;--on-green:#ffffff;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--radius-sm:8px;--radius-md:13px;--radius-lg:16px;--shadow:0 8px 24px #203b3509}
:root{
  color-scheme:light;
  --ink:#203b35;
  --muted:#63776c;
  --green:#245848;
  --paper:#f6f6ef;
  --line:#dbe3d7;
  --pale:#e8efdf;
  --accent:#b16840;
  font:16px/1.7 "Leelawadee UI",Tahoma,"Yu Gothic UI",sans-serif;
  color:var(--ink);
  background:var(--paper)}
*{
  box-sizing:border-box}
body{
  margin:0}
button,input,textarea,select{
  font:inherit;
  color:inherit}
button,a{
  touch-action:manipulation}
button{
  cursor:pointer;
  border:1px solid var(--line);
  background:var(--surface);
  border-radius:9px;
  padding:10px 17px;
  min-height:44px}
button:hover{
  border-color:var(--green);
  background:var(--pale)}
button:disabled{
  opacity:.55;
  cursor:default}
.primary{
  background:var(--green);
  color:var(--on-green)}
.primary:hover{
  background:var(--green-hover)}
.quiet{
  background:transparent}
.danger{
  color:var(--danger)}
a{
  color:var(--green);
  text-underline-offset:4px}
input,textarea,select{
  border:1px solid var(--control-line);
  border-radius:8px;
  background:var(--input);
  padding:10px;
  max-width:100%}
textarea{
  width:100%;
  min-height:100px}
label{
  display:grid;
  gap:5px}
a,button,input,textarea,select{
  outline-offset:4px}
h1,h2,h3,p{
  margin:0 0 14px}
h1{
  font-size:clamp(27px,4vw,39px);
  line-height:1.35;
  letter-spacing:-1px}
h2{
  font-size:23px;
  line-height:1.5}
h3{
  font-size:19px}
.shell{
  display:grid;
  grid-template-columns:230px 1fr;
  min-height:100vh}
.sidebar{
  padding:32px 22px;
  border-right:1px solid var(--line);
  background:var(--surface);
  position:sticky;
  top:0;
  height:100vh;
  display:flex;
  flex-direction:column}
.brand{
  display:flex;
  gap:12px;
  align-items:center;
  font-size:21px;
  text-decoration:none;
  font-weight:700}
.mark{
  display:grid;
  place-items:center;
  width:43px;
  height:48px;
  background:var(--green);
  color:var(--on-green);
  border-radius:12px;
  font-size:26px}
.nav{
  display:grid;
  gap:8px;
  margin-top:45px}
.nav a{
  padding:12px 16px;
  border-radius:9px;
  text-decoration:none}
.nav a.active{
  background:var(--pale);
  font-weight:700}
.sidebar-foot{
  margin-top:auto;
  font-size:12px;
  color:var(--muted)}
.workspace{
  min-width:0}
.topbar{
  padding:20px 38px;
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px}
.topbar label{
  font-size:12px}
.topbar select{
  padding:5px 12px}
main{
  max-width:1160px;
  padding:38px;
  margin:0 auto}
.eyebrow{
  font-size:11px;
  color:var(--accent);
  letter-spacing:2px;
  text-transform:uppercase;
  font-weight:700;
  margin-bottom:12px}
.muted,.small{
  color:var(--muted)}
.small{
  font-size:13px}
.row,.actions{
  display:flex;
  gap:12px;
  align-items:center;
  flex-wrap:wrap}
.between{
  justify-content:space-between}
.actions{
  margin:18px 0}
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));
  gap:20px}
.card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:13px;
  padding:24px;
  margin:0 0 20px}
.card p:last-child{
  margin-bottom:0}
.hero{
  background:var(--pale);
  border-radius:16px;
  border:1px solid var(--line);
  padding:32px;
  margin-bottom:28px}
.hero .jp{
  font-size:40px;
  letter-spacing:5px}
.badge{
  display:inline-block;
  font-size:12px;
  color:var(--green);
  background:var(--pale);
  padding:3px 10px;
  border-radius:6px}
.jp{
  font-family:"Yu Gothic UI",Meiryo,sans-serif;
  font-size:22px;
  line-height:2}
.reading{
  font-size:14px;
  color:var(--muted)}
.example{
  border-top:1px solid var(--line);
  padding-top:15px;
  margin-top:15px}
.hint{
  background:var(--hint);
  border-left:3px solid var(--hint-line);
  padding:12px 16px;
  border-radius:0 6px 6px 0;
  font-size:14px;
  margin-bottom:18px}
.activity{
  display:grid;
  grid-template-columns:40px 1fr auto;
  gap:18px;
  align-items:center}
.activity-number{
  display:grid;
  place-items:center;
  border-radius:10px;
  background:var(--pale);
  height:40px}
.question{
  margin:22px 0;
  padding:25px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--surface)}
.options{
  display:grid;
  gap:10px;
  margin:20px 0}
.option{
  display:flex;
  align-items:center;
  gap:12px;
  border:1px solid var(--line);
  border-radius:9px;
  padding:12px 16px;
  cursor:pointer}
.option:has(input:checked){
  background:var(--pale);
  border-color:var(--green)}
input[type=radio],input[type=checkbox]{
  accent-color:var(--green);
  width:18px;
  height:18px}
.feedback{
  background:var(--success-soft);
  border-radius:8px;
  padding:16px;
  margin-top:18px}
.feedback.wrong{
  background:var(--warning-soft)}
.session-top{
  position:sticky;
  top:0;
  background:var(--paper);
  border-bottom:1px solid var(--line);
  padding:10px 0;
  z-index:2}
.timer{
  font-size:25px;
  font-variant-numeric:tabular-nums}
.passage{
  white-space:pre-wrap;
  background:var(--passage);
  padding:22px;
  border-radius:10px;
  margin:16px 0}
.annotated{
  border:0;
  border-bottom:1px dotted var(--green);
  border-radius:0;
  padding:0 2px;
  min-height:0;
  background:transparent;
  font:inherit}
.passage rt{
  font-size:12px;
  color:var(--muted)}
.hide-ruby rt{
  visibility:hidden}
.progress{
  width:100%;
  height:9px;
  accent-color:var(--green);
  margin:14px 0}
.settings{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  margin:15px 0}
.settings label,.checkline{
  display:flex;
  align-items:center;
  gap:8px}
.note-form{
  display:grid;
  gap:13px}
.note-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px}
dialog{
  border:1px solid var(--line);
  border-radius:15px;
  padding:28px;
  max-width:700px;
  width:92vw;
  max-height:88vh;
  overflow:auto;
  background:var(--surface);
  color:var(--ink)}
dialog::backdrop{
  background:#173d3266}
#status:not(:empty){
  position:fixed;
  bottom:20px;
  right:20px;
  max-width:calc(100vw - 40px);
  padding:14px 20px;
  background:var(--ink);
  color:var(--on-green);
  border-radius:10px;
  z-index:10}
.notebook-front{
  font-size:50px;
  text-align:center;
  margin:30px 0}
.error{
  color:var(--danger);
  background:var(--warning-soft);
  padding:15px;
  border-radius:8px}
.stats{
  display:flex;
  gap:25px;
  flex-wrap:wrap}
.stat b{
  display:block;
  font-size:30px}
.audio{
  width:100%;
  margin:10px 0}
.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  border:0}
footer{
  font-size:12px;
  color:var(--muted);
  text-align:center;
  padding:25px}
pre{
  white-space:pre-wrap}
button:focus-visible,a:focus-visible{
  outline:2px solid var(--green)}

@media(max-width:760px){
  .shell{
  grid-template-columns:1fr}
.sidebar{
  position:static;
  height:auto;
  padding:18px;
  border-right:0;
  border-bottom:1px solid var(--line)}
.nav{
  display:flex;
  overflow:auto;
  gap:4px;
  margin-top:14px}
.nav a{
  white-space:nowrap;
  padding:7px 12px;
  font-size:14px}
.sidebar-foot{
  display:none}
.topbar{
  padding:13px 18px;
  font-size:12px}
main{
  padding:24px 18px}
.hero{
  padding:24px}
.activity{
  grid-template-columns:32px 1fr;
  gap:10px}
.activity .actions{
  grid-column:2}
.note-grid{
  grid-template-columns:1fr}
.card,.question{
  padding:20px}
.session-top{
  top:0}
.grid{
  gap:8px}
}


/* Keep single-column grid tracks below intrinsic navigation widths on phones. */
@media(max-width:760px){
  .shell{
  grid-template-columns:minmax(0,1fr)}
.sidebar,.nav,main{
  min-width:0}
.nav{
  max-width:100%}
.topbar>span{
  min-width:0;
  overflow-wrap:anywhere}
main{
  width:100%}
.jp,.question{
  overflow-wrap:anywhere}
}


/* Explicit ruby: only mono units may wrap independently. */
ruby{
  ruby-position:over;
  ruby-align:center}
rt{
  font-size:.55em;
  font-weight:400;
  line-height:1.2}
.ruby-group,ruby{
  white-space:nowrap}
.ruby-mono{
  white-space:normal}
.ruby-mono>ruby{
  display:ruby}
.jp{
  line-height:2.3;
  word-break:normal;
  line-break:strict;
  overflow-wrap:normal}
.inline-gloss{
  font-size:.65em;
  color:var(--muted);
  white-space:normal}
.gloss-term{
  white-space:normal}
html[data-furigana="hidden"] rt{
  visibility:hidden}



.activity-card{
  border-left-width:5px}
.activity-card.completed{
  border-left-color:var(--green);
  background:var(--success-soft)}
.activity-card.inProgress{
  border-left-color:var(--accent)}
.activity-card.notStarted{
  border-left-color:var(--line)}
.status-badge{
  display:inline-block;
  font-size:13px;
  font-weight:700;
  margin-bottom:8px}
.notebook-toolbar{
  display:grid;
  grid-template-columns:minmax(220px,2fr) repeat(3,minmax(130px,1fr));
  gap:16px;
  margin:28px 0 16px;
  align-items:end}
.notebook-search input{
  width:100%}
.notebook-grid{
  align-items:start;
  gap:20px}
.notebook-grid .card{
  margin:0;
  min-width:0;
  overflow-wrap:anywhere}
.notebook-grid details{
  margin:14px 0}
.notebook-grid summary{
  cursor:pointer;
  min-height:44px;
  padding:8px 0}
.notebook-grid details p{
  white-space:pre-wrap}
.metric-explanation{
  margin-top:24px}
.pagination{
  justify-content:center}
.empty-state{
  padding:24px 0}
.stats .stat{
  min-width:125px;
  flex:1}
.activity h2{
  margin:0 0 6px}
@media(max-width:1000px){
  .notebook-toolbar{
  grid-template-columns:repeat(2,minmax(0,1fr))}
.notebook-search{
  grid-column:1/-1}
}
@media(max-width:480px){
  .notebook-toolbar{
  grid-template-columns:minmax(0,1fr)}
.notebook-search{
  grid-column:auto}
}

/* Japanese Interior: warm plaster, washi surfaces and quiet wood accents. */
:root[data-theme="interior"] {
  --paper:#F5F1E8; --surface:#FFFDF8; --input:#FFFDF8; --line:#D5C8B5;
  --ink:#28332D; --muted:#5E685E; --green:#264D40; --green-hover:#193B30;
  --pale:#E8DDCB; --accent:#7A5941; --control-line:#B89B7A;
  --hint:#F0E8DA; --hint-line:#B89B7A; --success-soft:#EDF1E7;
  --warning-soft:#F8EBDD; --passage:#F4EEE2; --danger:#963A2D;
  --shadow:0 6px 24px #7A59410A;
}
[data-theme="interior"] .sidebar {
  background-color:var(--pale);
  background-image:repeating-linear-gradient(91deg,transparent 0 27px,#7A594106 28px 29px,transparent 30px 45px);
  border-right-color:var(--control-line);
}
[data-theme="interior"] .hero {
  background-color:var(--pale);
  background-image:repeating-linear-gradient(0deg,transparent 0 4px,#FFFDF830 5px 6px);
  border-color:var(--control-line);
}
[data-theme="interior"] .card,[data-theme="interior"] .question {box-shadow:var(--shadow)}
[data-theme="interior"] .activity-number {border:1px solid var(--control-line)}
.appearance-controls {display:flex;align-items:end;gap:var(--space-4);flex-wrap:wrap}
.topbar {flex-wrap:wrap}
.topbar select {min-height:44px}
.card,.question,dialog {border-radius:var(--radius-md)}
.card,.question {padding:var(--space-6)}
button,input,select,textarea {border-radius:var(--radius-sm)}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible {outline:3px solid var(--green);outline-offset:3px}
.card,.question,.passage {min-width:0;overflow-wrap:anywhere}
.jp {overflow-wrap:normal}
.data-section {margin-bottom:var(--space-8)}
.file-field {margin:var(--space-6) 0;gap:var(--space-3);font-weight:600}
input[type="file"] {width:100%;padding:var(--space-4);font-weight:400;background:var(--input)}
input::file-selector-button {font:inherit;padding:8px 12px;border:1px solid var(--control-line);border-radius:var(--radius-sm);background:var(--pale);color:var(--ink);cursor:pointer;margin-right:12px}
.sample-downloads {padding-top:var(--space-6);margin-top:var(--space-6);border-top:1px solid var(--line)}
.download-link {display:inline-flex;align-items:center;min-height:44px;padding:8px 12px;border:1px solid var(--line);border-radius:var(--radius-sm)}
.restore-consent {margin:var(--space-6) 0;align-items:flex-start;line-height:1.7}
.restore-consent input {flex-shrink:0;margin-top:5px}
.checkline {font-weight:400}
button.danger {border-color:var(--control-line)}
button:disabled {opacity:.6;cursor:not-allowed}
h1,h2,h3 {overflow-wrap:anywhere}
h3 ruby,h2 ruby {line-height:2.1}
@media(max-width:760px) {
  .topbar {align-items:start}.appearance-controls {width:100%;display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .appearance-controls select {width:100%;padding:8px;min-width:0}.appearance-controls label {min-width:0}
  .card,.question {padding:var(--space-5)}
}
@media(prefers-reduced-motion:reduce) {*,*::before,*::after {animation:none!important;transition:none!important;scroll-behavior:auto!important}}

.notebook-toolbar>label{min-width:0}.notebook-toolbar select{width:100%;min-width:0}

/* Native ruby layout reserves the same annotation space when readings hide. */
ruby{display:ruby;ruby-position:over;ruby-align:center;white-space:nowrap}
rt{display:ruby-text;font-size:max(12px,.55em);line-height:1.2;font-weight:400}
.full-reading{margin:8px 0 14px;line-height:1.8;overflow-wrap:anywhere}
.reading-label{font-weight:600}.option-copy{display:grid;gap:4px;min-width:0}
.choice-japanese{line-height:2.3}.choice-translation{font-size:14px}

.app-version{display:block;margin-top:4px}.version-notice p:last-of-type{margin-bottom:16px}.start-current-round{margin-top:8px}

[hidden]{display:none!important}.activity-tabs{display:flex;gap:8px;margin:20px 0;flex-wrap:wrap}.activity-tabs [aria-selected="true"]{background:var(--accent);color:var(--paper,#fff)}.question-navigation{display:flex;align-items:center;gap:16px;margin:16px 0}.study-panel>.start-practice{margin-top:20px}.study-category{min-width:0;margin-block:24px 36px}.study-category>h2{margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--line)}.source-reference{overflow-wrap:anywhere}.practice-panel,.study-panel{min-width:0}

.study-card{position:relative;padding-top:64px}.save-icon{position:absolute;right:12px;top:12px;min-width:44px;min-height:44px;padding:10px;display:grid;place-items:center}.save-icon svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7}.save-icon.is-saved svg{fill:currentColor}.kanji-character{font-size:4rem;line-height:1.3;margin:0 0 16px;font-family:serif}.kanji-details dl{display:grid;grid-template-columns:auto 1fr;gap:8px 16px}.kanji-details dd{margin:0}.kanji-compounds{padding-left:20px}.kanji-compounds li{margin-block:14px}.kanji-compounds .jp{display:inline;margin-right:12px}.grammar-pattern{display:inline-flex;align-items:baseline;flex-wrap:wrap;gap:4px;line-height:1.9}.grammar-variable{font-style:normal;font-weight:750;font-family:system-ui,sans-serif;background:var(--paper);border:1px solid var(--line);border-radius:5px;padding:0 7px;white-space:pre-wrap}.practice-section{border-left:4px solid var(--accent);padding:12px;background:var(--surface)}.grammar-list{display:flex;flex-direction:column;gap:12px}.grammar-accordion{padding:0}.grammar-accordion>summary{display:flex;align-items:center;gap:16px;cursor:pointer;padding:20px;list-style:none;min-height:44px}.grammar-accordion>summary::-webkit-details-marker{display:none}.grammar-summary{min-width:0;flex:1}.grammar-summary .jp{margin:0 0 5px}.grammar-title{display:block;font-weight:650}.grammar-short{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:4px;font-size:.9em}.grammar-expanded{padding:0 20px 20px}.grammar-accordion[open] .chevron{transform:rotate(180deg)}.source-details{overflow-wrap:anywhere}.source-details summary{font-size:.85em}.notebook-tabs{margin-block:20px}.notebook-tabs [role=tab]{min-height:44px}.grammar-accordion summary:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

.grammar-list{align-items:stretch}.notebook-grid .grammar-accordion{width:100%;margin:0}.grammar-summary>.jp{display:block}

.dialogue{display:flex;flex-direction:column;gap:16px;margin-block:16px}.dialogue-turn{display:grid;grid-template-columns:minmax(28px,max-content) minmax(0,1fr);gap:12px;align-items:baseline}.dialogue-speaker{font-weight:700;max-width:100px;overflow-wrap:anywhere}.dialogue-body{min-width:0}.dialogue-body .jp{margin:0;line-height:2}.dialogue-translation{margin:6px 0 0}.question-instruction{font-weight:600;border-left:3px solid var(--accent);padding-left:12px}.ordering-bank,.ordering-sequence{display:flex;flex-wrap:wrap;gap:8px;margin-block:14px;min-width:0}.ordering-sequence{min-height:64px;border:1px dashed var(--line);padding:12px;border-radius:8px}.ordering-exercise button{min-height:44px;min-width:44px}.ordered-answer{display:block;font-size:1.2rem;line-height:2}.instruction-vocabulary{margin-block:20px}.instruction-vocabulary summary{min-height:44px;cursor:pointer}.instruction-vocabulary dl{display:grid;grid-template-columns:minmax(80px,max-content) minmax(0,1fr);gap:12px}.instruction-vocabulary dd{margin:0}.completion-progress{font-weight:600}