:root {
  --content-width:68rem;
  --page-gutter:clamp(1rem,3vw,2rem);
  --sans:"Avenir Next",Avenir,"Hiragino Kaku Gothic ProN","Yu Gothic",system-ui,sans-serif;
  --cream:var(--theme-bg);
  --paper:var(--theme-surface);
  --ink:var(--theme-text);
  --indigo:var(--theme-green);
  --muted:var(--theme-muted);
  --line:var(--theme-border);
  --green:var(--theme-green);
  --soft-green:var(--theme-green-soft);
  --error:var(--theme-red);
  --soft-error:var(--theme-red-soft);
  --focus:var(--theme-focus);
  --radius:20px;
  font-family:var(--sans);
  font-size:16px
}

* {
  box-sizing:border-box
}
body {
  margin:0;
  background:var(--cream);
  color:var(--ink);
  line-height:1.6
}
button,input {
  font:inherit
}
button {
  cursor:pointer
}
button:focus-visible,input:focus-visible {
  outline:3px solid var(--focus);
  outline-offset:4px
}
button:disabled {
  cursor:default
}
a {
  color:inherit
}
.wrap {
  padding-block:1.5rem 2.5rem
}
.eyebrow {
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:.75rem;
  font-weight:750;
  margin:0 0 20px;
  color:var(--muted)
}
.hero {
  border-top:5px solid var(--indigo);
  padding-top:25px;
  margin-bottom:27px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px
}
.hero h1 {
  font-size:clamp(1.65rem,3.5vw,2.65rem);
  line-height:1.65;
  letter-spacing:.015em;
  margin:0 0 7px;
  font-weight:700
}
.hero p {
  margin:0;
  color:var(--muted);
  font-size:1rem
}
.ticket {
  border:1px solid var(--line);
  border-left:5px solid var(--green);
  border-radius:8px;
  padding:13px 20px;
  min-width:142px;
  flex-shrink:0
}
.ticket strong {
  display:block;
  font-size:1.5rem;
  color:var(--indigo);
  letter-spacing:.025em;
  line-height:1.2
}
.ticket span {
  font-size:.75rem;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.1em
}
.toolbar {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  margin-bottom:25px
}
.toolbar-label {
  font-size:.875rem;
  margin-right:3px;
  color:var(--muted)
}
.toggle {
  border:1px solid var(--theme-control-border);
  border-radius:30px;
  background:var(--paper);
  color:var(--indigo);
  padding:10px 15px;
  min-height:44px;
  font-size:.875rem;
  font-weight:650;
  display:inline-flex;
  gap:9px;
  align-items:center
}
.toggle[aria-pressed="true"] {
  background:var(--indigo);
  border-color:var(--indigo);
  color:var(--theme-on-accent)
}
.toggle-dot {
  width:9px;
  height:9px;
  border-radius:50%;
  border:1px solid currentColor;
  background:transparent
}
.toggle[aria-pressed="true"] .toggle-dot {
  background:currentColor
}
.layout {
  display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(315px,1fr);
  gap:24px;
  align-items:start
}
.panel {
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden
}
.section-head {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:21px 25px;
  border-bottom:1px solid var(--line)
}
h2 {
  margin:0;
  font-size:1.12rem;
  letter-spacing:-.02em
}
.section-head .count {
  font-size:.75rem;
  font-weight:650;
  text-transform:uppercase;
  letter-spacing:.09em;
  color:var(--muted)
}
.reading {
  list-style:none;
  margin:0;
  padding:12px 25px 21px;
  counter-reset:sentence
}
.reading li {
  counter-increment:sentence;
  display:grid;
  grid-template-columns:25px minmax(0,1fr);
  gap:12px;
  padding:13px 0;
  border-bottom:1px solid var(--theme-border)
}
.reading li:last-child {
  border-bottom:0
}
.reading li:before {
  content:counter(sentence,decimal-leading-zero);
  font-size:.75rem;
  font-variant-numeric:tabular-nums;
  color:var(--theme-muted);
  padding-top:15px
}
.jp {
  font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,"Noto Sans CJK JP",sans-serif;
  font-size:1.2rem;
  line-height:2.35;
  margin:0;
  overflow-wrap:anywhere
}
.translation {
  margin:5px 0 2px;
  color:var(--muted);
  font-size:.9rem;
  line-height:1.65
}
.translation[hidden] {
  display:none
}
ruby {
  ruby-position:over
}
rt {
  font-size:.56em;
  font-weight:500;
  letter-spacing:0;
  color:var(--muted)
}
.hero rt {
  color:var(--muted)
}
.quiz-inner {
  padding:20px 23px 23px
}
.quiz-intro {
  margin:0 0 21px;
  font-size:.9rem;
  color:var(--muted)
}
fieldset {
  border:0;
  margin:0 0 23px;
  padding:0;
  min-width:0
}
legend {
  display:block;
  width:100%;
  padding:0;
  margin:0 0 11px;
  font-weight:650;
  font-size:1.06rem;
  line-height:2.1
}
.question-number {
  font-size:.75rem;
  display:block;
  font-weight:750;
  color:var(--green);
  text-transform:uppercase;
  letter-spacing:.1em;
  line-height:1.7;
  margin-bottom:5px
}
.choices {
  display:grid;
  gap:8px
}
.choice {
  display:flex;
  gap:10px;
  align-items:center;
  border:1px solid var(--line);
  padding:10px 12px;
  border-radius:9px;
  cursor:pointer;
  min-height:49px;
  background:var(--theme-surface)
}
.choice:hover {
  border-color:var(--theme-control-border);
  background:var(--theme-hover)
}
.choice:has(input:checked) {
  border-color:var(--indigo);
  background:var(--theme-selected);
  box-shadow:inset 0 0 0 1px var(--indigo)
}
.choice input {
  accent-color:var(--indigo);
  height:17px;
  width:17px;
  flex-shrink:0;
  margin:0
}
.letter {
  font-size:.75rem;
  color:var(--muted);
  font-weight:700;
  min-width:14px
}
.answer {
  font-size:1rem;
  line-height:1.65
}
.feedback {
  font-size:.875rem;
  margin:10px 0 0;
  padding:11px 13px;
  border-radius:8px;
  line-height:1.65;
  border-left:3px solid var(--green);
  background:var(--soft-green);
  color:var(--theme-green)
}
.feedback.error {
  border-color:var(--error);
  background:var(--soft-error);
  color:var(--theme-red)
}
.feedback[hidden] {
  display:none
}
.actions {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  border-top:1px solid var(--line);
  padding-top:20px
}
.primary,.secondary {
  border-radius:9px;
  min-height:46px;
  padding:10px 16px;
  font-size:.875rem;
  font-weight:700;
  border:1px solid var(--indigo)
}
.primary {
  background:var(--indigo);
  color:var(--theme-on-accent);
  flex:1
}
.primary:hover {
  background:var(--theme-link)
}
.secondary {
  background:transparent;
  color:var(--indigo)
}
.secondary:hover {
  background:var(--theme-selected)
}
.result {
  margin:16px 0 0;
  font-size:.95rem;
  font-weight:650;
  line-height:1.65
}
.result:empty {
  display:none
}
.result.success {
  color:var(--green)
}
.result.needs-work {
  color:var(--error)
}
footer {
  margin-top:24px;
  font-size:.8rem;
  color:var(--muted);
  text-align:center
}
noscript p {
  padding:12px;
  background:var(--soft-error);
  color:var(--error);
  border-radius:8px
}

@media(max-width:820px) {
  .wrap {
  padding-block:1.25rem 2rem
}
.layout {
  grid-template-columns:1fr
}
.hero {
  align-items:flex-start
}
.ticket {
  min-width:105px;
  padding:11px 14px
}
.ticket strong {
  font-size:1.25rem
}
.quiz-inner {
  padding:22px 25px
}
.choices {
  grid-template-columns:repeat(3,minmax(0,1fr))
}
.choice {
  padding:12px 10px;
  gap:8px
}
.answer {
  font-size:1rem
}
.reading li {
  padding:12px 0
}
.hero h1 {
  font-size:1.9rem
}

}

@media(max-width:500px) {
  .wrap {
  padding-block:1rem 2rem
}
.eyebrow {
  margin-bottom:13px
}
.hero {
  padding-top:18px;
  margin-bottom:20px
}
.hero h1 {
  font-size:1.6rem;
  line-height:1.85
}
.hero p {
  font-size:.9rem
}
.ticket {
  display:none
}
.section-head {
  padding:18px 20px
}
.reading {
  padding:8px 18px 16px
}
.reading li {
  grid-template-columns:21px minmax(0,1fr);
  gap:9px
}
.jp {
  font-size:1.1rem;
  line-height:2.5
}
.reading li:before {
  padding-top:13px
}
.quiz-inner {
  padding:20px
}
.choices {
  grid-template-columns:1fr
}
.choice {
  padding:12px;
  gap:10px
}
.toolbar {
  gap:8px
}
.toolbar-label {
  width:100%;
  margin:0
}
.toggle {
  padding:9px 13px
}
.layout {
  gap:20px
}

}

@media print {
  body {
  background:white
}
.wrap {
  padding:0;
  max-width:none;
  width:100%
}
.toolbar,.actions,footer {
  display:none
}
.layout {
  display:block
}
.panel {
  border:0;
  border-radius:0
}
.reading li {
  break-inside:avoid
}
.quiz {
  break-before:page
}
.ticket {
  display:none
}
.section-head {
  padding-left:0
}
.reading {
  padding-left:0
}
.quiz-inner {
  padding-left:0
}
.hero {
  margin-bottom:10px
}

}


/* Keep reading-aid labels legible with the shared dark-mode hover rules. */
:root .toolbar .toggle[aria-pressed="true"] {
  color:var(--theme-text);
  background:var(--theme-selected);
  border-color:var(--theme-control-border);
}
:root .toolbar .toggle:hover {
  color:var(--theme-text);
  background:var(--theme-hover);
}
/* Keep the shared reading controls in the page flow, beside the theme switch. */
.toolbar.reading-controls {
  display:none
}

.js .toolbar.reading-controls {
  position:static;
  display:flex;
  max-width:none;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  backdrop-filter:none
}

:root .toolbar .toggle[aria-pressed] .control-button__state {
  color:inherit;
  background:transparent
}

.back-link {
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  min-height:44px;
  margin-bottom:1rem;
  color:var(--theme-muted);
  font-size:.875rem;
  text-underline-offset:.2em
}

.reading li {
  list-style:none
}

@media print {
  .site-masthead,.back-link,.js .toolbar.reading-controls {
  display:none
}

}


/* Scenario materials use the same ink, paper, and accent as the reading. */
.lesson-column { display:grid; gap:24px; min-width:0 }
.scene { margin:0; padding:22px 25px }
.scene-intro { margin:0 0 18px; color:var(--muted); font-size:.9rem }
.scene-note { margin:16px 0 0; color:var(--muted); font-size:.8rem }
.scene .translation { font-size:.8rem }
.scene-origin { margin:15px 0 0; padding-top:12px; border-top:1px dashed var(--line); text-align:center; font-size:.86rem }
.route { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0 }
.route li { position:relative; min-width:0; padding:28px 3px 0; text-align:center; font-size:.94rem }
.route li::before { content:""; position:absolute; top:8px; left:0; width:100%; height:3px; background:var(--theme-control-border) }
.route li:first-child::before { left:50%; width:50% }
.route li:last-child::before { width:50% }
.route li::after { content:""; position:absolute; top:2px; left:calc(50% - 7px); width:14px; height:14px; border:3px solid var(--green); border-radius:50%; background:var(--paper) }
.route .route-stop::after { background:var(--green) }
.route time { display:block; margin-top:6px; font-size:.82rem; color:var(--muted) }
.route-label { display:block; margin-top:7px; font-size:.72rem; color:var(--green) }
.return-trip { margin-top:20px; padding:12px 14px; border:1px dashed var(--theme-control-border); border-radius:10px; font-size:.9rem; line-height:2; text-align:center }
.vocabulary { margin:0; padding:20px 25px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 20px }
.vocabulary dt { font-size:1rem; line-height:2; font-weight:600 }
.vocabulary dd { margin:2px 0 0; color:var(--muted); font-size:.85rem; line-height:1.55 }
.language-note { margin:0; padding:0 25px 22px; color:var(--muted); font-size:.86rem; line-height:1.8 }
.answer-key { margin:20px 0 0; font-size:.9rem }
.answer-key summary { cursor:pointer; min-height:44px; padding:10px 0; font-weight:650; color:var(--green) }
.answer-key li { margin:.7rem 0; line-height:1.65 }
.quiz .choices { grid-template-columns:1fr }
@media(max-width:500px) {
  .lesson-column { gap:20px }
  .scene { padding:18px }
  .vocabulary { padding:18px; gap:12px }
  .language-note { padding:0 18px 18px }
  .route li { font-size:.86rem }
}
@media print { .lesson-column { display:block } .scene { break-inside:avoid } .answer-key { display:none } }