/* =========================================================
   659060058 FEATURE V1 — TWO LENSES
   Content-driven: 70% teaching / 20% editorial / 10% linear
   Pure white paper, no cream/yellow cast.
   ========================================================= */
:root{
  --ji:#3f7268;
  --ta:#58658f;
  --paper-white:#ffffff;
  --paper-near:#fcfdfd;
  --feature-line:#dce3e0;
  --feature-line-strong:#c5d0cb;
}
html:not([data-theme="dark"]) body{
  background-color:#fff!important;
  background-image:
    radial-gradient(circle at 20% 15%,rgba(27,46,40,.010) .45px,transparent .55px),
    radial-gradient(circle at 75% 65%,rgba(27,46,40,.008) .4px,transparent .55px)!important;
  background-size:9px 9px,13px 13px!important;
}
html:not([data-theme="dark"]) .feature-two-lenses,
html:not([data-theme="dark"]) .feature-two-lenses .section,
html:not([data-theme="dark"]) .feature-two-lenses .section-tint-blue,
html:not([data-theme="dark"]) .feature-two-lenses .section-tint-sky,
html:not([data-theme="dark"]) .feature-two-lenses .section-tint-lilac,
html:not([data-theme="dark"]) .feature-two-lenses .section-tint-green,
html:not([data-theme="dark"]) .feature-two-lenses .section-tint-peach,
html:not([data-theme="dark"]) .feature-two-lenses .section-tint-ink,
html:not([data-theme="dark"]) .feature-two-lenses .section-tint-gold{
  background:#fff!important;
}
.feature-two-lenses .section{
  border-radius:0!important;
  box-shadow:none!important;
  border-color:var(--feature-line)!important;
}
.token-ji{color:var(--ji)!important}
.token-ta{color:var(--ta)!important}

/* Hero */
.feature-hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(260px,.65fr);
  gap:48px;
  align-items:end;
  margin-top:22px
}
.feature-hero-lead{
  max-width:760px!important;
  margin:0!important;
  color:#35443e!important;
  font-size:19px!important;
  line-height:1.9!important;
  text-align:left!important
}
.feature-hero-note{
  padding-left:22px;
  border-left:1px solid var(--feature-line-strong)
}
.feature-hero-note span{
  display:block;
  color:#8b9691;
  font-size:9px;
  font-weight:900;
  letter-spacing:.14em
}
.feature-hero-note strong{
  display:block;
  margin-top:7px;
  color:#17211f;
  font-size:18px;
  line-height:1.55
}
.feature-hero-note p{
  margin:7px 0 0!important;
  color:#65716d!important;
  font-size:13px!important
}

/* Editorial headings */
@media(min-width:901px){
  .feature-two-lenses .editorial-heading{
    max-width:820px!important;
    margin:0 0 38px!important;
    padding-left:70px!important;
    text-align:left!important;
    position:relative
  }
  .feature-two-lenses .editorial-heading::before{
    content:attr(data-no);
  }
  .feature-two-lenses #start .editorial-heading::before{content:"01"}
  .feature-two-lenses #scene .editorial-heading::before{content:"02"}
  .feature-two-lenses #pair .editorial-heading::before{content:"03"}
  .feature-two-lenses #forms .editorial-heading::before{content:"04"}
  .feature-two-lenses #mistakes .editorial-heading::before{content:"05"}
  .feature-two-lenses #jlpt .editorial-heading::before{content:"06"}
  .feature-two-lenses #summary .editorial-heading::before{content:"07"}
  .feature-two-lenses .editorial-heading::before{
    position:absolute;left:0;top:3px;
    color:#b7c2bd;
    font:400 36px/1 Georgia,serif
  }
  .feature-two-lenses .editorial-heading h2,
  .feature-two-lenses .editorial-heading p{
    text-align:left!important;
    margin-left:0!important;
    margin-right:0!important
  }
}

/* 01 — split lenses */
.lens-stage{
  display:grid;
  grid-template-columns:1fr 56px 1fr;
  gap:0;
  max-width:980px;
  margin:0 auto
}
.lens-side{
  padding:28px 34px 30px;
  border-top:2px solid #1f2c28;
  border-bottom:1px solid var(--feature-line);
  min-width:0
}
.lens-label{
  display:flex;
  align-items:center;
  gap:14px
}
.lens-kanji{
  font-family:Georgia,"Noto Serif TC",serif;
  font-size:42px;
  line-height:1;
  color:#9aa6a1
}
.lens-label strong{display:block;font-size:23px}
.lens-label small{
  display:block;
  margin-top:2px;
  color:#98a39e;
  font-size:9px;
  font-weight:800;
  letter-spacing:.12em
}
.lens-side h3{
  margin:23px 0 8px;
  font-size:20px;
  line-height:1.45
}
.lens-rule{
  margin:0!important;
  color:#58645f!important;
  font-size:14px!important;
  line-height:1.85!important
}
.lens-example{
  margin:25px 0 0!important;
  color:#17211f!important;
  font-size:26px!important;
  line-height:2!important;
  font-weight:720!important
}
.lens-zh{
  margin:2px 0 0!important;
  color:#69746f!important;
  font-size:13px!important
}
.lens-structure{
  display:flex;
  justify-content:space-between;
  gap:18px;
  margin-top:22px;
  padding-top:13px;
  border-top:1px solid var(--feature-line);
  color:#5d6964;
  font-size:12px
}
.lens-divider{
  display:flex;
  justify-content:center;
  align-items:stretch;
  position:relative
}
.lens-divider::before{
  content:"";
  position:absolute;
  top:0;bottom:0;left:50%;
  width:1px;
  background:var(--feature-line)
}
.lens-divider span{
  position:relative;
  align-self:center;
  padding:7px 4px;
  background:#fff;
  color:#9aa5a0;
  font-size:9px;
  font-weight:900
}
.editorial-note{
  width:min(720px,100%);
  margin:28px 0 0 auto;
  padding:14px 0 0 18px;
  border-left:2px solid #c7d0cc
}
.editorial-note span{
  color:#8b9691;font-size:9px;font-weight:900;letter-spacing:.12em
}
.editorial-note p{
  margin:6px 0 0!important;
  color:#52605a!important;
  font-size:14px!important;
  line-height:1.85!important
}

/* 02 — pair rail */
.pair-rail{
  position:relative;
  max-width:980px;
  margin:0 auto;
  padding-left:34px
}
.pair-rail::before{
  content:"";
  position:absolute;
  left:8px;top:14px;bottom:14px;
  width:1px;
  background:var(--feature-line-strong)
}
.pair-rail-row{
  position:relative;
  display:grid;
  grid-template-columns:210px minmax(0,1fr);
  gap:30px;
  padding:24px 0 28px;
  border-bottom:1px solid var(--feature-line)
}
.pair-rail-row:last-child{border-bottom:0}
.pair-rail-row::before{
  content:"";
  position:absolute;
  left:-31px;
  top:32px;
  width:11px;height:11px;
  border-radius:50%;
  background:#fff;
  border:2px solid #8ea09a
}
.rail-pair-name b{
  display:flex;align-items:baseline;gap:7px;
  font-size:24px
}
.rail-pair-name i{
  color:#98a39e;
  font-style:normal;
  font-weight:500
}
.rail-pair-name small{
  display:block;margin-top:6px;color:#7c8883;font-size:11px
}
.rail-sentences{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:26px
}
.rail-sentences > div{
  min-width:0
}
.rail-tag{
  font-size:10px;
  font-weight:900
}
.rail-jp{
  margin:4px 0 0!important;
  color:#15201d!important;
  font-size:21px!important;
  line-height:1.9!important;
  font-weight:700!important
}
.rail-sentences > div > p:last-child{
  margin:3px 0 0!important;
  color:#707b76!important;
  font-size:12px!important
}

/* 03 — particles */
.particle-layout{
  display:grid;
  grid-template-columns:140px minmax(0,1fr);
  gap:38px;
  max-width:930px;
  margin:0 auto
}
.particle-symbol{
  align-self:start;
  position:sticky;
  top:110px;
  font-family:"Noto Serif JP","Yu Mincho",serif;
  font-size:116px;
  line-height:.9;
  color:#d8dfdc
}
.particle-reading{
  border-top:2px solid #1f2c28
}
.particle-case{
  padding:26px 0 30px;
  border-bottom:1px solid var(--feature-line)
}
.particle-case-head{
  display:flex;justify-content:space-between;gap:20px;align-items:baseline
}
.particle-case-head span{
  color:#8d9893;font-size:9px;font-weight:900;letter-spacing:.12em
}
.particle-case-head strong{font-size:18px}
.particle-compare{
  display:grid;
  grid-template-columns:230px 30px minmax(0,1fr);
  gap:14px;
  align-items:center;
  margin-top:18px
}
.particle-jp{
  margin:0!important;
  color:#17211f!important;
  font-size:21px!important;
  font-weight:700!important
}
.particle-arrow{color:#a1aca7;text-align:center}
.particle-compare > p:last-child{
  margin:0!important;color:#5d6964!important;font-size:13px!important
}
.particle-examples-inline{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  margin-top:18px
}
.particle-examples-inline p{
  margin:0!important;
  padding-top:12px;
  border-top:1px solid var(--feature-line);
  color:#17211f!important;
  font-size:19px!important;
  font-weight:700!important
}
.particle-examples-inline small{
  display:block;margin-top:4px;color:#7c8782;font-size:11px;font-weight:500
}
.particle-note{
  margin:16px 0 0!important;
  color:#5c6963!important;
  font-size:13px!important
}

/* 04 — ending catalog */
.ending-catalog{
  max-width:930px;
  margin:0 auto;
  border-top:2px solid #1f2c28
}
.ending-head,.ending-row{
  display:grid;
  grid-template-columns:190px 280px minmax(0,1fr);
  gap:24px
}
.ending-head{
  padding:10px 0;
  color:#8a9690;
  font-size:9px;
  font-weight:900;
  letter-spacing:.1em;
  border-bottom:1px solid var(--feature-line)
}
.ending-row{
  padding:22px 0 24px;
  border-bottom:1px solid var(--feature-line)
}
.ending-row strong{font-size:18px}
.ending-row p{
  margin:0!important;
  color:#58655f!important;
  font-size:13px!important;
  line-height:1.85!important
}
.ending-order{
  max-width:720px;
  margin:28px 0 0 auto;
  padding-top:13px;
  border-top:1px solid var(--feature-line);
  display:flex;
  flex-wrap:wrap;
  gap:8px 12px;
  align-items:center
}
.ending-order span{
  margin-right:8px;
  color:#8d9893;font-size:9px;font-weight:900;letter-spacing:.1em
}
.ending-order b{font-size:13px}
.ending-order i{color:#a4afaa;font-style:normal}

/* 05 — myth list */
.myth-list{
  max-width:900px;
  margin:0 auto;
  border-top:2px solid #1f2c28
}
.myth-list article{
  display:grid;
  grid-template-columns:54px minmax(0,1fr);
  gap:18px;
  padding:22px 0 24px;
  border-bottom:1px solid var(--feature-line)
}
.myth-x{
  font-family:Georgia,serif;
  font-size:28px;
  line-height:1;
  color:#a56e69
}
.myth-list h3{margin:0 0 5px;font-size:18px}
.myth-list p{
  margin:0!important;color:#5d6964!important;font-size:14px!important;line-height:1.85!important
}

/* 06 — JLPT */
.jlpt-decision-line{
  max-width:930px;
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px
}
.jlpt-decision-line > div{
  padding-top:16px;
  border-top:2px solid #1f2c28
}
.jlpt-decision-line span{
  color:#929d98;font-size:10px;font-weight:900
}
.jlpt-decision-line strong{
  display:block;margin-top:7px;font-size:17px;line-height:1.55
}
.jlpt-decision-line p{
  margin:6px 0 0!important;color:#68746f!important;font-size:13px!important
}
.feature-practice{
  width:min(820px,100%);
  margin:42px auto 0;
  padding-top:24px;
  border-top:1px solid var(--feature-line)
}
.practice-kicker{
  margin:0!important;color:#356d86!important;font-size:9px!important;font-weight:900!important;letter-spacing:.12em!important
}
.feature-practice h3{margin:7px 0 7px;font-size:24px}
.practice-hint{margin:0!important;color:#69756f!important;font-size:13px!important}
.practice-question-box{
  margin-top:20px;
  padding:18px 0;
  border-top:1px solid var(--feature-line);
  border-bottom:1px solid var(--feature-line)
}
.practice-jp{
  margin:0!important;
  color:#17211f!important;
  font-size:23px!important;
  line-height:2!important;
  font-weight:700!important
}
.practice-question-box > p:last-child{
  margin:4px 0 0!important;color:#6a7670!important;font-size:13px!important
}
.feature-options{
  display:grid!important;
  grid-template-columns:repeat(3,1fr)!important;
  gap:10px!important;
  margin-top:16px!important
}
.feature-options button{
  min-height:46px!important;
  border-radius:6px!important;
  background:#fff!important
}
.feature-options button.is-correct{
  border-color:#56836c!important;
  background:#f4faf6!important
}
.feature-options button.is-wrong{
  border-color:#a66b65!important;
  background:#fff7f6!important
}
.feature-feedback{
  margin-top:12px;
  font-size:13px;
  font-weight:800
}
.feature-answer{
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid var(--feature-line);
  color:#5e6b65;
  font-size:13px
}
.feature-answer p{margin:5px 0 0!important;color:inherit!important;font-size:inherit!important}

/* 07 — hierarchy */
.summary-hierarchy{
  max-width:900px;
  margin:0 auto;
  border-top:2px solid #1f2c28
}
.summary-rank{
  display:grid;
  grid-template-columns:60px 210px minmax(0,1fr);
  gap:18px;
  align-items:baseline;
  padding:19px 0;
  border-bottom:1px solid var(--feature-line)
}
.summary-rank span{color:#98a49f;font:400 13px/1 Georgia,serif}
.summary-rank strong{font-size:17px}
.summary-rank p{margin:0!important;color:#66726d!important;font-size:13px!important}
.final-memory-line{
  max-width:720px;
  margin:28px 0 0 auto;
  padding-top:14px;
  border-top:1px solid var(--feature-line)
}
.final-memory-line span{
  display:block;color:#8f9a95;font-size:9px;font-weight:900;letter-spacing:.12em
}
.final-memory-line strong{
  display:block;margin-top:7px;font-size:17px;line-height:1.7
}

/* Dark */
html[data-theme="dark"]{
  --ji:#8fc5ba;
  --ta:#b0bbe4;
  --feature-line:#35423d;
  --feature-line-strong:#4b5a54
}
html[data-theme="dark"] .feature-hero-lead,
html[data-theme="dark"] .feature-hero-note strong,
html[data-theme="dark"] .lens-example,
html[data-theme="dark"] .rail-jp,
html[data-theme="dark"] .particle-jp,
html[data-theme="dark"] .practice-jp{
  color:#edf3f0!important
}
html[data-theme="dark"] .feature-hero-note,
html[data-theme="dark"] .lens-side,
html[data-theme="dark"] .pair-rail-row,
html[data-theme="dark"] .particle-reading,
html[data-theme="dark"] .particle-case,
html[data-theme="dark"] .ending-catalog,
html[data-theme="dark"] .ending-row,
html[data-theme="dark"] .myth-list,
html[data-theme="dark"] .myth-list article,
html[data-theme="dark"] .summary-hierarchy,
html[data-theme="dark"] .summary-rank{
  border-color:var(--feature-line)!important
}
html[data-theme="dark"] .lens-divider span,
html[data-theme="dark"] .pair-rail-row::before{
  background:#111716!important
}
html[data-theme="dark"] .particle-symbol{color:#303d38!important}

/* Responsive */
@media(max-width:900px){
  .feature-hero-grid{grid-template-columns:1fr;gap:24px}
  .feature-hero-note{border-left:0;border-top:1px solid var(--feature-line);padding:16px 0 0}
  .lens-stage{grid-template-columns:1fr}
  .lens-divider{height:44px;align-items:center}
  .lens-divider::before{left:0;right:0;top:50%;bottom:auto;width:auto;height:1px}
  .lens-divider span{padding:4px 10px}
  .particle-layout{grid-template-columns:90px minmax(0,1fr)}
  .particle-symbol{font-size:86px}
  .ending-head,.ending-row{grid-template-columns:150px 220px minmax(0,1fr)}
  .jlpt-decision-line{grid-template-columns:1fr}
}
@media(max-width:650px){
  .feature-hero-grid{margin-top:18px}
  .feature-hero-lead{font-size:16px!important}
  .lens-side{padding:22px 0}
  .lens-divider{height:34px}
  .lens-label strong{font-size:21px}
  .lens-example{font-size:21px!important}
  .editorial-note{width:100%;padding-left:14px}
  .pair-rail{padding-left:26px}
  .pair-rail::before{left:6px}
  .pair-rail-row{
    grid-template-columns:1fr;
    gap:14px;
    padding:22px 0 24px
  }
  .pair-rail-row::before{left:-25px;top:28px}
  .rail-sentences{grid-template-columns:1fr;gap:14px}
  .rail-jp{font-size:20px!important}
  .particle-layout{grid-template-columns:1fr;gap:16px}
  .particle-symbol{
    position:static;
    font-size:54px;
    border-bottom:1px solid var(--feature-line);
    padding-bottom:8px
  }
  .particle-compare{grid-template-columns:1fr;gap:6px}
  .particle-arrow{display:none}
  .particle-examples-inline{grid-template-columns:1fr}
  .ending-head{display:none}
  .ending-row{grid-template-columns:1fr;gap:8px;padding:20px 0}
  .ending-order{gap:6px 9px}
  .myth-list article{grid-template-columns:38px minmax(0,1fr);gap:10px}
  .feature-options{grid-template-columns:1fr!important}
  .summary-rank{grid-template-columns:36px minmax(0,1fr);gap:8px 12px}
  .summary-rank p{grid-column:2}
}


/* =========================================================
   V2 QA FIXES
   Final cascade layer: intentionally last in <head>.
   ========================================================= */

/* H1 ruby must remain secondary and must not enlarge the title line. */
.feature-two-lenses .comparison-head h1 rt{
  font-size:.27em!important;
  line-height:1!important;
  color:#7f8b86!important;
  font-weight:500!important;
  letter-spacing:.05em!important;
}

/* Desktop editorial copy follows the heading axis. */
@media(min-width:901px){
  .feature-two-lenses .editorial-heading > p:not(.section-kicker){
    max-width:720px!important;
    text-align:left!important;
  }
}

/* Mobile: CASE label sits above the heading rather than squeezing it. */
@media(max-width:650px){
  .feature-two-lenses .particle-case-head{
    flex-direction:column!important;
    align-items:flex-start!important;
    gap:4px!important;
  }
  .feature-two-lenses .particle-case-head strong{
    line-height:1.5!important;
  }
}

/* Dark-mode practice controls stay within the dark surface system. */
html[data-theme="dark"] .feature-two-lenses .feature-options button{
  background:#171e1c!important;
  color:#edf3f0!important;
  border-color:#46534f!important;
}
html[data-theme="dark"] .feature-two-lenses .feature-options button.is-correct{
  background:#17261e!important;
  border-color:#739d83!important;
}
html[data-theme="dark"] .feature-two-lenses .feature-options button.is-wrong{
  background:#2a1d1c!important;
  border-color:#b47e77!important;
}

/* Keep highlighted Japanese terms at the surrounding text size. */
.feature-two-lenses .token-ji,
.feature-two-lenses .token-ta{
  font-size:inherit!important;
  line-height:inherit!important;
  font-family:inherit!important;
}

/* Semantic chunks may wrap between chunks, never by shrinking Japanese. */
.feature-two-lenses .jp-semantic-chunk{
  display:inline-block!important;
  white-space:nowrap!important;
  max-width:100%!important;
  font-size:inherit!important;
  line-height:inherit!important;
  font-family:inherit!important;
}


/* =========================================================
   V3 QA — DARK MODE CONTRAST / LEGACY-ID OVERRIDE
   ========================================================= */

/* Old #jlpt rules have ID specificity, so override them with the same ID layer. */
html[data-theme="dark"] #jlpt .feature-practice .feature-options button{
  background:#18211f!important;
  color:#edf3f0!important;
  border-color:#46534f!important;
}
html[data-theme="dark"] #jlpt .feature-practice .feature-options button:hover,
html[data-theme="dark"] #jlpt .feature-practice .feature-options button:focus-visible{
  background:#202b27!important;
  color:#ffffff!important;
  border-color:#667a72!important;
}
html[data-theme="dark"] #jlpt .feature-practice .feature-options button.is-correct{
  background:#193126!important;
  color:#c6ead8!important;
  border-color:#5b8e73!important;
}
html[data-theme="dark"] #jlpt .feature-practice .feature-options button.is-wrong{
  background:#37201f!important;
  color:#f0c1bc!important;
  border-color:#95635d!important;
}

/* Secondary copy must remain readable on dark paper. */
html[data-theme="dark"] .feature-two-lenses .feature-hero-note p,
html[data-theme="dark"] .feature-two-lenses .lens-rule,
html[data-theme="dark"] .feature-two-lenses .lens-zh,
html[data-theme="dark"] .feature-two-lenses .lens-structure,
html[data-theme="dark"] .feature-two-lenses .editorial-note p,
html[data-theme="dark"] .feature-two-lenses .rail-pair-name small,
html[data-theme="dark"] .feature-two-lenses .rail-sentences > div > p:last-child,
html[data-theme="dark"] .feature-two-lenses .particle-compare > p:last-child,
html[data-theme="dark"] .feature-two-lenses .particle-examples-inline small,
html[data-theme="dark"] .feature-two-lenses .particle-note,
html[data-theme="dark"] .feature-two-lenses .ending-row p,
html[data-theme="dark"] .feature-two-lenses .ending-order,
html[data-theme="dark"] .feature-two-lenses .myth-list p,
html[data-theme="dark"] .feature-two-lenses .jlpt-decision-line p,
html[data-theme="dark"] .feature-two-lenses .practice-hint,
html[data-theme="dark"] .feature-two-lenses .practice-question-box > p:last-child,
html[data-theme="dark"] .feature-two-lenses .summary-rank p,
html[data-theme="dark"] .feature-two-lenses .feature-answer{
  color:#b8c4bf!important;
}

html[data-theme="dark"] #jlpt .feature-practice .feature-feedback{
  color:#c6d2cd!important;
}

html[data-theme="dark"] .feature-two-lenses .comparison-head h1 rt{
  color:#98a7a1!important;
}

.feature-two-lenses .editorial-note rt,
.feature-two-lenses .myth-list rt,
.feature-two-lenses .ending-catalog rt,
.feature-two-lenses .final-memory-line rt,
.feature-two-lenses .feature-hero-note rt{
  font-size:.58em!important;
  color:#89958f!important;
}
html[data-theme="dark"] .feature-two-lenses .editorial-note rt,
html[data-theme="dark"] .feature-two-lenses .myth-list rt,
html[data-theme="dark"] .feature-two-lenses .ending-catalog rt,
html[data-theme="dark"] .feature-two-lenses .final-memory-line rt,
html[data-theme="dark"] .feature-two-lenses .feature-hero-note rt{
  color:#97a69f!important;
}