/* Hallmark · genre: quiet editorial learning · macrostructure: Narrative Workflow · design-system: DESIGN.md · designed-as-app · pre-emit critique: P5 H5 E5 S5 R5 V5 · contrast: pass (40–41) · nav/footer: existing site chrome · mobile: pass (34, 49–57) */
.lesson-page { background: var(--color-paper); }
.lesson-page .site-header { background: rgba(255,255,255,.97); }
.lesson-hero { position: relative; min-height: clamp(650px,76vh,780px); overflow: hidden; color: var(--color-on-dark); background: var(--color-lesson-surface); isolation: isolate; }
.lesson-hero-layer { position: relative; z-index: 2; min-height: clamp(650px,76vh,780px); display: grid; grid-template-rows: auto 1fr; }
.lesson-breadcrumb { min-height: 68px; display: flex; align-items: center; gap: 10px; color: var(--color-on-dark-muted); font-size: 12px; }
.lesson-breadcrumb a { transition: color var(--dur-short) var(--ease-out); }
.lesson-breadcrumb a:hover { color: var(--color-on-dark); }
.lesson-breadcrumb a:focus-visible { border-radius: 2px; outline: 2px solid var(--color-focus); outline-offset: 4px; }
.lesson-breadcrumb span[aria-current] { color: var(--color-lesson-accent); }
.lesson-hero-copy { width: min(700px,64%); align-self: center; padding: 32px 0 68px; text-shadow: 0 2px 24px color-mix(in oklch,var(--color-lesson-surface),transparent 70%); }
.lesson-kicker { display: flex; align-items: center; gap: 14px; margin: 0 0 28px; color: var(--color-lesson-accent); font-size: 11px; font-weight: 750; letter-spacing: .16em; text-transform: uppercase; }
.lesson-kicker::before { content: ""; width: 34px; height: 1px; background: currentColor; }
.lesson-hero h1 { min-width: 0; max-width: 680px; margin: 0; overflow-wrap: anywhere; font-family: var(--font-display); font-size: clamp(48px,5.2vw,78px); font-weight: 600; letter-spacing: -.055em; line-height: 1.14; text-wrap: balance; }
.lesson-hero h1 span { display: block; margin-top: 14px; color: var(--color-lesson-accent); font-family: "Yu Mincho", "Noto Serif JP", "Yu Gothic", sans-serif; font-size: .43em; font-weight: 500; letter-spacing: .035em; line-height: 1.55; }
.lesson-intro { max-width: 580px; margin: 26px 0 0; color: var(--color-on-dark-muted); font-size: 15px; line-height: 2; }
.lesson-goals { max-width: 660px; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 0; margin: 34px 0 0; padding: 20px 0 0; border-top: 1px solid color-mix(in oklch,var(--color-on-dark),transparent 78%); list-style: none; }
.lesson-goals li { display: grid; grid-template-columns: 20px 1fr; align-items: start; gap: 8px; padding-right: 18px; color: var(--color-on-dark); font-size: 12px; line-height: 1.7; }
.lesson-goals li::before { content: counter(list-item,decimal-leading-zero); color: var(--color-lesson-accent); font-family: Georgia, serif; font-size: 10px; font-weight: 700; line-height: 2.1; }
.lesson-scene { position: absolute; z-index: 0; inset: 0; min-width: 0; margin: 0; overflow: hidden; background: var(--color-lesson-surface); }
.lesson-scene::before { content: ""; position: absolute; z-index: 1; inset: 0; background: linear-gradient(90deg, color-mix(in oklch,var(--color-lesson-surface),transparent 6%) 0%, color-mix(in oklch,var(--color-lesson-surface),transparent 18%) 35%, color-mix(in oklch,var(--color-lesson-surface),transparent 58%) 57%, color-mix(in oklch,var(--color-lesson-surface),transparent 90%) 76%), linear-gradient(0deg, color-mix(in oklch,var(--color-lesson-surface),transparent 32%) 0%, transparent 36%, color-mix(in oklch,var(--color-lesson-surface),transparent 78%) 100%); }
.lesson-scene img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.lesson-page[data-level="N5"] .lesson-scene img { object-position: 64% center; }
.scene-tag { position: absolute; z-index: 2; right: max(28px,calc((100vw - 1200px)/2)); bottom: 26px; display: grid; grid-template-columns: auto auto; align-items: end; gap: 2px 12px; padding-left: 15px; border-left: 1px solid color-mix(in oklch,var(--color-on-dark),transparent 50%); color: var(--color-on-dark); text-align: right; text-shadow: 0 2px 18px color-mix(in oklch,var(--color-lesson-surface),transparent 28%); }
.scene-tag strong { grid-row: 1 / 3; color: var(--color-lesson-accent); font-family: Georgia, serif; font-size: 28px; font-weight: 500; line-height: 1; }
.scene-tag span { align-self: end; font-size: 11px; font-weight: 700; }
.scene-tag small { color: var(--color-on-dark-muted); font-size: 9px; letter-spacing: .1em; }
.lesson-levels { border-bottom: 1px solid var(--line); background: white; }
.lesson-levels-inner { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.lesson-levels p { margin: 0; color: var(--muted); font-size: 12px; }
.level-tabs { display: flex; gap: 8px; }
.level-tabs a { width: 54px; height: 36px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 999px; color: #77727e; font-size: 12px; font-weight: 750; }
.level-tabs a:hover, .level-tabs a:focus-visible { border-color: var(--purple); color: var(--purple); outline: 0; }
.level-tabs a[aria-current="page"] { border-color: var(--purple); color: white; background: var(--purple); }
.lesson-body { padding: 86px 0 108px; }
.lesson-route { position: relative; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: clamp(28px,5vw,72px); margin-bottom: 88px; padding: 28px 0 31px; border-top: 2px solid var(--color-rule); border-bottom: 1px solid var(--color-rule); }
.lesson-route::before { content: "LEARNING ROUTE"; position: absolute; top: -10px; left: 0; padding-right: 12px; color: var(--purple); background: var(--color-paper); font-size: 9px; font-weight: 800; letter-spacing: .16em; }
.lesson-route article { display: grid; grid-template-columns: 42px 1fr; gap: 16px; padding: 0; }
.lesson-route article + article { padding-left: 0; border-left: 0; }
.lesson-route span { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--color-rule); border-radius: 50%; color: var(--purple); background: transparent; font-family: Georgia, serif; font-size: 12px; }
.lesson-route strong, .lesson-route small { display: block; }
.lesson-route strong { font-size: 14px; }
.lesson-route small { margin-top: 3px; color: var(--muted); font-size: 11px; }
.lesson-section { margin-top: 84px; }
.lesson-section:first-of-type { margin-top: 0; }
.lesson-section-head { display: grid; grid-template-columns: minmax(0,1fr); align-items: start; gap: 7px; margin-bottom: 30px; padding-bottom: 18px; border-bottom: 1px solid #d7d3df; }
.lesson-section-head span { color: var(--purple); font-size: 10px; font-weight: 800; letter-spacing: .12em; }
.lesson-section-head h2 { margin: 0; font-family: "Noto Serif SC", "Songti SC", serif; font-size: clamp(27px,3vw,40px); font-weight: 600; }
.lesson-section-head p { margin: 1px 0 0; color: var(--muted); font-size: 12px; }
.reading-layout { display: grid; grid-template-columns: minmax(0,1.45fr) minmax(270px,.55fr); gap: 24px; }
.reading-paper { padding: 38px clamp(24px,4vw,54px); border: 1px solid #ded9e5; background: white; box-shadow: 0 18px 45px rgba(37,31,57,.055); }
.dialogue-list { display: grid; gap: 2px; }
.dialogue-line { display: grid; grid-template-columns: 84px 1fr; gap: 20px; padding: 21px 0; border-bottom: 1px solid #ece8f0; }
.dialogue-line:last-child { border-bottom: 0; }
.dialogue-speaker { color: var(--purple); font-size: 11px; font-weight: 800; }
.dialogue-line blockquote { margin: 0; }
.jp-line { margin: 0; color: #2c2932; font-family: "Yu Mincho", "Noto Serif JP", "Yu Gothic", sans-serif; font-size: 20px; line-height: 1.8; }
.reading-line { margin: 3px 0 0; color: #958e9d; font-size: 11px; }
.zh-line { margin: 8px 0 0; color: #6f6a76; font-size: 13px; }
.prose-list { counter-reset: prose; display: grid; gap: 0; }
.prose-item { position: relative; padding: 24px 0 24px 46px; border-bottom: 1px solid #ece8f0; }
.prose-item:last-child { border-bottom: 0; }
.prose-item::before { counter-increment: prose; content: counter(prose,decimal-leading-zero); position: absolute; top: 31px; left: 0; color: #a89dcc; font-family: Georgia, serif; font-size: 11px; }
.prose-item .jp-line { font-size: 18px; }
.study-rail { align-self: start; display: grid; gap: 18px; }
.audio-card, .focus-card, .reading-note { padding: 25px; border: 1px solid #ded9e5; background: white; }
.audio-card { color: white; border-color: #6252bd; background: #6252bd; }
.card-label { display: block; margin-bottom: 18px; color: #b8aec1; font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.audio-card .card-label { color: #d9d3ff; }
.audio-card strong { display: block; font-family: "Noto Serif SC", serif; font-size: 20px; }
.audio-card p { margin: 6px 0 20px; color: #d9d3f2; font-size: 12px; }
.audio-card audio { width: 100%; height: 42px; }
.audio-card ol { display: grid; gap: 8px; margin: 20px 0 0; padding: 18px 0 0 20px; border-top: 1px solid rgba(255,255,255,.18); color: #d9d3f2; font-size: 11px; }
.focus-card ul { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.focus-card li { position: relative; padding-left: 20px; color: #514c58; font-size: 13px; }
.focus-card li::before { content: ""; position: absolute; top: .7em; left: 0; width: 7px; height: 7px; border-radius: 50%; background: #afa2f2; }
.reading-note { background: #ebe7f5; }
.reading-note strong { display: block; font-family: "Noto Serif SC", serif; font-size: 18px; }
.reading-note p { margin: 8px 0 0; color: #686270; font-size: 12px; line-height: 1.8; }
.listening-layout { display: grid; grid-template-columns: minmax(280px,.55fr) minmax(0,1.45fr); gap: 18px; align-items: start; }
.listening-player { position: sticky; top: 116px; }
.quiz-form { border: 1px solid #ded9e5; background: white; box-shadow: 0 18px 45px rgba(37,31,57,.04); }
.quiz-intro { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 24px; padding: 24px 28px; border-bottom: 1px solid #e8e4ec; background: #f9f8fa; }
.quiz-intro strong, .quiz-intro span { display: block; }
.quiz-intro strong { font-family: "Noto Serif SC", serif; font-size: 18px; }
.quiz-intro span { margin-top: 2px; color: var(--purple); font-size: 11px; font-weight: 750; }
.quiz-intro p { justify-self: end; max-width: 360px; margin: 0; color: #7b7580; font-size: 11px; text-align: right; }
.quiz-question { margin: 0; padding: 28px; border: 0; border-bottom: 1px solid #e8e4ec; }
.quiz-question:focus { outline: 2px solid var(--purple); outline-offset: -2px; }
.quiz-question.needs-answer { background: #fff7f4; }
.quiz-question legend { width: 100%; display: flex; align-items: flex-start; gap: 14px; padding: 0; color: #302d35; font-family: "Yu Mincho", "Noto Serif JP", "Noto Serif SC", serif; font-size: 17px; font-weight: 650; line-height: 1.7; }
.quiz-question legend > span { min-width: 34px; color: var(--purple); font-family: Georgia, serif; font-size: 12px; line-height: 2.4; }
.quiz-options { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; margin-top: 18px; }
.quiz-options label { min-height: 52px; display: grid; grid-template-columns: auto 27px 1fr; align-items: center; gap: 9px; padding: 11px 13px; border: 1px solid #e3dfe7; border-radius: 3px; color: #514c57; font-size: 14px; line-height: 1.6; cursor: pointer; transition: border-color .16s, background .16s; }
.quiz-options label:hover { border-color: #a99ce9; background: #faf8ff; }
.quiz-options label:has(input:focus-visible) { outline: 2px solid var(--purple); outline-offset: 2px; }
.quiz-options label:has(input:checked) { border-color: var(--purple); background: #f0ecff; }
.quiz-options input { width: 17px; height: 17px; margin: 0; accent-color: var(--purple); }
.option-letter { color: var(--purple); font-family: Georgia, serif; font-size: 13px; font-weight: 700; }
.quiz-options label.correct-answer { border-color: #4d8f75; background: #e8f4ef; }
.quiz-options label.wrong-answer { border-color: #bd6b61; background: #fbebe8; }
.question-feedback { margin-top: 17px; padding: 15px 17px; border-left: 3px solid #aaa0d9; background: #f5f2fa; }
.question-feedback strong { display: block; color: #423b55; font-size: 13px; }
.question-feedback p { margin: 5px 0 0; color: #68616f; font-size: 12px; line-height: 1.75; }
.is-correct .question-feedback { border-left-color: #4d8f75; background: #edf7f2; }
.is-incorrect .question-feedback { border-left-color: #bd6b61; background: #fff2ef; }
.quiz-actions { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 12px; padding: 22px 28px; }
.quiz-submit, .quiz-reset { min-height: 44px; padding: 9px 18px; border: 1px solid var(--purple); border-radius: 3px; font: inherit; font-size: 13px; font-weight: 750; cursor: pointer; }
.quiz-submit { color: white; background: var(--purple); }
.quiz-submit:hover, .quiz-submit:focus-visible { background: #5444ac; outline: 2px solid #a99ce9; outline-offset: 2px; }
.quiz-submit:disabled { border-color: #aaa5b1; color: #f4f2f6; background: #aaa5b1; cursor: not-allowed; }
.quiz-reset { color: var(--purple); background: white; }
.quiz-reset:hover, .quiz-reset:focus-visible { background: #f3efff; outline: 2px solid #a99ce9; outline-offset: 2px; }
.quiz-status { margin: 0; color: #6d6773; font-size: 12px; text-align: right; }
.listening-transcript { margin-top: 18px; border: 1px solid #ded9e5; background: white; box-shadow: 0 18px 45px rgba(37,31,57,.04); }
.listening-transcript summary { min-height: 68px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px; padding: 15px 24px; color: #3d3942; font-size: 14px; font-weight: 700; cursor: pointer; list-style: none; }
.listening-transcript summary::-webkit-details-marker { display: none; }
.listening-transcript summary span { color: var(--purple); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
.listening-transcript summary b { color: var(--purple); font-size: 20px; font-weight: 400; transition: transform .2s; }
.listening-transcript[open] summary b { transform: rotate(45deg); }
.listening-transcript summary:focus-visible { outline: 2px solid var(--purple); outline-offset: -3px; }
.listening-transcript-inner { padding: 8px 34px 16px; border-top: 1px solid #e8e4ec; }
.listening-line { display: grid; grid-template-columns: 84px 1fr; gap: 20px; padding: 21px 0; border-bottom: 1px solid #ece8f0; }
.listening-line:last-child { border-bottom: 0; }
.listening-line .jp-line { font-size: 18px; }
.word-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
.word-card { min-height: 168px; padding: 24px; border: 1px solid #ded9e5; background: white; }
.word-card strong, .word-card ruby { font-family: "Yu Mincho", "Noto Serif JP", serif; font-size: 25px; font-weight: 600; }
.word-card rt { color: #7b7286; font-family: "Noto Sans SC", sans-serif; font-size: 9px; font-weight: 500; }
.word-card span { display: block; margin-top: 8px; color: var(--purple); font-size: 10px; font-weight: 750; }
.word-card p { margin: 14px 0 0; color: var(--muted); font-size: 12px; line-height: 1.7; }
.grammar-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 18px; }
.grammar-card { padding: 32px; border-top: 3px solid var(--purple); background: #2b2831; color: white; }
.grammar-card h3 { margin: 0; color: #c2b8ff; font-family: "Yu Mincho", "Noto Serif JP", serif; font-size: 25px; }
.grammar-card .connection { margin: 10px 0 20px; color: #aba4b2; font-size: 11px; }
.grammar-card > p:not(.connection) { color: #d5d0d9; font-size: 13px; line-height: 1.9; }
.grammar-example { margin-top: 24px; padding: 17px; border-left: 2px solid #8878df; background: rgba(255,255,255,.05); }
.grammar-example strong, .grammar-example span { display: block; }
.grammar-example strong { font-family: "Yu Mincho", "Noto Serif JP", serif; font-size: 17px; }
.grammar-example span { margin-top: 5px; color: #aaa4b1; font-size: 11px; }
.lesson-finish { display: grid; grid-template-columns: 130px 1fr auto; align-items: center; gap: 28px; margin-top: 84px; padding: 35px 38px; background: #e4dff4; }
.lesson-finish > span { color: var(--purple); font-family: Georgia, serif; font-size: 54px; }
.lesson-finish h2 { margin: 0; font-family: "Noto Serif SC", serif; font-size: 23px; }
.lesson-finish p { max-width: 680px; margin: 8px 0 0; color: #655f6c; font-size: 13px; }
.back-link { white-space: nowrap; color: var(--purple); font-size: 13px; font-weight: 750; }

@media (max-width: 1040px) {
  .lesson-hero-copy { width: min(720px,76%); }
  .lesson-scene::before { background: linear-gradient(90deg, color-mix(in oklch,var(--color-lesson-surface),transparent 6%) 0%, color-mix(in oklch,var(--color-lesson-surface),transparent 22%) 46%, color-mix(in oklch,var(--color-lesson-surface),transparent 76%) 78%), linear-gradient(0deg, color-mix(in oklch,var(--color-lesson-surface),transparent 28%) 0%, transparent 44%); }
  .reading-layout { grid-template-columns: 1fr; }
  .study-rail { grid-template-columns: 1fr 1fr; }
  .listening-layout { grid-template-columns: 1fr; }
  .listening-player { position: static; }
}

@media (max-width: 760px) {
  .lesson-hero, .lesson-hero-layer { min-height: 760px; }
  .lesson-hero-layer { width: min(100% - 36px,1200px); }
  .lesson-breadcrumb { min-height: 54px; overflow-x: auto; white-space: nowrap; font-size: 11px; scrollbar-width: thin; }
  .lesson-hero-copy { width: 100%; align-self: end; padding: 44px 0 92px; }
  .lesson-hero h1 { font-size: clamp(42px,12.5vw,58px); line-height: 1.14; }
  .lesson-hero h1 span { margin-top: 9px; font-size: .46em; }
  .lesson-intro { margin-top: 22px; font-size: 14px; line-height: 1.85; }
  .lesson-goals { grid-template-columns: 1fr; gap: 8px; margin-top: 24px; padding-top: 16px; }
  .lesson-goals li { padding-right: 0; font-size: 11px; }
  .lesson-scene::before { background: linear-gradient(0deg, color-mix(in oklch,var(--color-lesson-surface),transparent 2%) 0%, color-mix(in oklch,var(--color-lesson-surface),transparent 10%) 44%, color-mix(in oklch,var(--color-lesson-surface),transparent 70%) 72%, color-mix(in oklch,var(--color-lesson-surface),transparent 85%) 100%); }
  .lesson-scene img { object-position: 58% center; }
  .lesson-page[data-level="N5"] .lesson-scene img { object-position: 68% center; }
  .scene-tag { right: 18px; bottom: 19px; left: auto; min-width: 0; padding-left: 11px; }
  .scene-tag strong { font-size: 23px; }
  .scene-tag span { font-size: 10px; }
  .scene-tag small { display: none; }
  .lesson-levels-inner { min-height: 96px; align-items: flex-start; flex-direction: column; justify-content: center; gap: 9px; }
  .level-tabs { width: 100%; }
  .level-tabs a { flex: 1; width: auto; }
  .lesson-body { padding: 60px 0 78px; }
  .lesson-route { grid-template-columns: 1fr; gap: 0; margin-bottom: 58px; }
  .lesson-route article, .lesson-route article + article { padding: 17px 0; border-left: 0; border-bottom: 1px solid #d7d3df; }
  .lesson-route article:last-child { border-bottom: 0; }
  .lesson-section { margin-top: 64px; }
  .lesson-section-head p { display: none; }
  .reading-paper { padding: 22px 20px; }
  .dialogue-line { grid-template-columns: 1fr; gap: 7px; padding: 19px 0; }
  .dialogue-speaker { font-size: 10px; }
  .jp-line, .prose-item .jp-line { font-size: 17px; line-height: 1.9; }
  .prose-item { padding-left: 30px; }
  .study-rail { grid-template-columns: 1fr; }
  .quiz-intro { grid-template-columns: 1fr; gap: 8px; }
  .quiz-intro p { justify-self: start; text-align: left; }
  .quiz-question { padding: 24px 20px; }
  .quiz-options { grid-template-columns: 1fr; }
  .quiz-actions { grid-template-columns: 1fr 1fr; padding: 20px; }
  .quiz-status { grid-column: 1 / -1; text-align: left; }
  .listening-transcript summary { grid-template-columns: 1fr auto; gap: 4px 12px; }
  .listening-transcript summary span { grid-column: 1 / -1; }
  .listening-transcript-inner { padding: 8px 20px; }
  .listening-line { grid-template-columns: 1fr; gap: 7px; padding: 19px 0; }
  .word-grid, .grammar-grid { grid-template-columns: 1fr; }
  .word-card { min-height: 0; }
  .lesson-finish { grid-template-columns: 1fr; gap: 14px; padding: 28px 24px; }
  .lesson-finish > span { font-size: 42px; }
}

@media (prefers-reduced-motion: reduce) {
  /* Override component transitions when the operating system requests reduced motion. */
  *, *::before, *::after { transition-duration: .01ms !important; }
}