/* ============================================================================
 * essentials-styles.css — "Japanese Essentials" v5 · "SUMI & PAPER"
 * ----------------------------------------------------------------------------
 * Design language:
 *   - Washi-paper ground with faint grain, sumi-ink typography
 *   - Kaki-iro (柿色) primary accent · shu-iro (朱) vermilion action
 *   - Ai-iro (藍) slate info · matcha (抹茶) success · night-ink dark theme
 *   - Kanji monograms, hanko stamps, enso circles — no emoji, no glass slop
 *   - Motion: quiet entrances, springy touches, honest hover states
 * ==========================================================================*/

/* ── 1. Tokens ─────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}

:root{
  color-scheme:light;
  /* ground & surfaces */
  --bg:#f4efe5;
  --card:#fffdf8;
  --card-hover:#fbf6ec;
  --inset:#f1ebdd;
  /* ink */
  --text:#26211a;
  --text-bright:#1d1913;
  --text-dim:#6f6552;
  /* lines */
  --border:#ddd2bd;
  --border-strong:#c6b896;
  /* palette */
  --accent:#a67c3a;            /* kaki */
  --accent-deep:#7d5c26;
  --accent-amber:#a67c3a;      /* alias */
  --accent-gold:#a67c3a;       /* alias */
  --action:#b23c2a;            /* shu vermilion */
  --action-deep:#8f2d1e;
  --info:#56687a;              /* ai slate */
  --accent-blue:#56687a;       /* alias */
  --accent-purple:#56687a;     /* alias */
  --accent-pink:#b23c2a;       /* alias */
  --accent-green:#3e7d52;      /* matcha */
  --again:#b23c2a;
  --hard:#a67c3a;
  --good:#3e7d52;
  --easy:#51749b;
  /* geometry */
  --radius-sm:9px;
  --radius:12px;
  --radius-lg:16px;
  --shadow-sm:0 1px 2px rgba(38,30,18,.06),0 1px 6px rgba(38,30,18,.04);
  --shadow-md:0 2px 6px rgba(38,30,18,.06),0 8px 22px rgba(38,30,18,.07);
  --shadow-lg:0 4px 12px rgba(38,30,18,.08),0 18px 44px rgba(38,30,18,.12);
  --shadow-press:inset 0 2px 6px rgba(38,30,18,.12);
  /* motion & type */
  --ease-spring:cubic-bezier(.34,1.45,.5,1);
  --ease-out:cubic-bezier(.22,1,.36,1);
  --transition:190ms var(--ease-out);
  --font-sans:"Noto Sans JP","Helvetica Neue",Arial,sans-serif;
  --font-serif:"Noto Serif JP",Georgia,serif;
}

/* Night-ink dark theme — manual choice */
html[data-theme="dark"]{
  color-scheme:dark;
  --bg:#161310;
  --card:#211c16;
  --card-hover:#282218;
  --inset:#2b241b;
  --text:#e9e0cf;
  --text-bright:#f7efe0;
  --text-dim:#a2937a;
  --border:#3b3325;
  --border-strong:#544832;
  --accent:#c9974a;
  --accent-deep:#e0b269;
  --accent-amber:#c9974a;
  --accent-gold:#c9974a;
  --action:#d05a41;
  --action-deep:#e0705a;
  --info:#8ba3b8;
  --accent-blue:#8ba3b8;
  --accent-purple:#8ba3b8;
  --accent-pink:#d05a41;
  --accent-green:#6fae85;
  --again:#d05a41;
  --hard:#c9974a;
  --good:#6fae85;
  --easy:#7f9fc4;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4),0 1px 6px rgba(0,0,0,.25);
  --shadow-md:0 2px 6px rgba(0,0,0,.35),0 10px 26px rgba(0,0,0,.35);
  --shadow-lg:0 6px 16px rgba(0,0,0,.4),0 22px 52px rgba(0,0,0,.5);
  --shadow-press:inset 0 2px 8px rgba(0,0,0,.5);
}
/* Night-ink dark theme — system default (no explicit choice) */
@media (prefers-color-scheme:dark){
  html:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#161310;
    --card:#211c16;
    --card-hover:#282218;
    --inset:#2b241b;
    --text:#e9e0cf;
    --text-bright:#f7efe0;
    --text-dim:#a2937a;
    --border:#3b3325;
    --border-strong:#544832;
    --accent:#c9974a;
    --accent-deep:#e0b269;
    --accent-amber:#c9974a;
    --accent-gold:#c9974a;
    --action:#d05a41;
    --action-deep:#e0705a;
    --info:#8ba3b8;
    --accent-blue:#8ba3b8;
    --accent-purple:#8ba3b8;
    --accent-pink:#d05a41;
    --accent-green:#6fae85;
    --again:#d05a41;
    --hard:#c9974a;
    --good:#6fae85;
    --easy:#7f9fc4;
    --shadow-sm:0 1px 2px rgba(0,0,0,.4),0 1px 6px rgba(0,0,0,.25);
    --shadow-md:0 2px 6px rgba(0,0,0,.35),0 10px 26px rgba(0,0,0,.35);
    --shadow-lg:0 6px 16px rgba(0,0,0,.4),0 22px 52px rgba(0,0,0,.5);
    --shadow-press:inset 0 2px 8px rgba(0,0,0,.5);
  }
}

/* ── 2. Base ───────────────────────────────────────────────────────────── */
html{height:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scroll-behavior:smooth;}
body{
  min-height:100%;
  font-family:var(--font-sans);
  line-height:1.65;
  color:var(--text);
  background-color:var(--bg);
  /* washi grain */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  overflow-x:hidden;
  transition:background-color .35s var(--ease-out),color .35s var(--ease-out);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
::selection{background:color-mix(in srgb,var(--accent) 30%,transparent);}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px;}
:focus:not(:focus-visible){outline:none;}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;-webkit-tap-highlight-color:transparent;}
a{color:var(--accent-deep);}
img,svg{vertical-align:middle;}

/* scrollbars */
html{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--accent) 55%,var(--border)) transparent;}
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--accent) 45%,var(--border));border-radius:999px;border:2px solid var(--bg);}
::-webkit-scrollbar-thumb:hover{background:var(--accent);}

/* giant vertical brand on wide screens — quiet editorial flourish */
@media (min-width:1360px){
  body::before{
    content:"日本の基礎";
    position:fixed;right:calc(50% - 640px);top:50%;
    transform:translateY(-50%);
    writing-mode:vertical-rl;
    font-family:var(--font-serif);font-weight:900;
    font-size:clamp(4rem,7vw,6.5rem);letter-spacing:.35em;
    color:transparent;-webkit-text-stroke:1px var(--border-strong);
    opacity:.25;pointer-events:none;user-select:none;z-index:0;
  }
}

.app{max-width:1180px;margin:0 auto;padding:clamp(16px,3vw,32px) clamp(14px,3vw,28px) 56px;position:relative;z-index:1;}

/* ── 3. Boot splash — enso ─────────────────────────────────────────────── */
.boot{display:flex;flex-direction:column;align-items:center;justify-content:center;height:82vh;gap:16px;color:var(--text-dim);text-align:center;}
.boot-enso{position:relative;width:112px;height:112px;display:flex;align-items:center;justify-content:center;}
.boot-enso svg{position:absolute;inset:0;width:100%;height:100%;color:var(--accent);}
.boot-enso .enso-ring{
  stroke-dasharray:327;stroke-dashoffset:327;
  transform-origin:60px 60px;
  animation:draw-enso 1.9s var(--ease-out) infinite;
}
.boot-mark{
  font-family:var(--font-serif);font-size:2.6rem;font-weight:900;color:var(--text-bright);
  animation:boot-mark-in 1.2s var(--ease-out) both;
}
.boot-title{font-family:var(--font-serif);font-size:1.7rem;font-weight:900;color:var(--text-bright);letter-spacing:.12em;animation:rise .6s .15s var(--ease-out) both;}
.boot-sub{font-size:.78rem;opacity:.65;max-width:340px;animation:rise .6s .25s var(--ease-out) both;}
.boot-bar{width:170px;height:3px;border-radius:999px;background:var(--inset);overflow:hidden;margin-top:8px;animation:rise .6s .35s var(--ease-out) both;}
.boot-bar i{display:block;height:100%;width:40%;border-radius:999px;background:linear-gradient(90deg,var(--accent),var(--action));animation:boot-slide 1.15s ease-in-out infinite;}
@keyframes draw-enso{0%{stroke-dashoffset:327;transform:rotate(-90deg) scale(.92);opacity:0}12%{opacity:1}55%{stroke-dashoffset:26;transform:rotate(-90deg) scale(1)}80%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;transform:rotate(-90deg) scale(1.02);opacity:0}}
@keyframes boot-mark-in{0%{opacity:0;transform:scale(.7)}60%{opacity:1;transform:scale(1.06)}100%{opacity:1;transform:scale(1)}}
@keyframes boot-slide{0%{transform:translateX(-110%)}100%{transform:translateX(410%)}}

/* ── 4. Topbar — sticky, blurred ───────────────────────────────────────── */
.topbar{
  position:sticky;top:10px;z-index:40;
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  margin-bottom:clamp(20px,3vw,30px);padding:12px 18px;
  background:color-mix(in srgb,var(--card) 88%,transparent);
  -webkit-backdrop-filter:blur(14px) saturate(1.25);
  backdrop-filter:blur(14px) saturate(1.25);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
  animation:rise .45s var(--ease-out) both;
}
.brand{
  font-family:var(--font-serif);font-size:1.32rem;font-weight:900;color:var(--text-bright);
  border-left:3px solid var(--accent);padding-left:14px;line-height:1.25;
  transition:border-color var(--transition);
}
.brand:hover{border-color:var(--action);}
.brand small{display:block;font-family:var(--font-sans);font-size:.62rem;color:var(--text-dim);font-weight:500;letter-spacing:.09em;text-transform:uppercase;}
.nav{display:flex;gap:5px;margin-left:auto;flex-wrap:wrap;align-items:center;}
.nav button{
  padding:8px 14px;border-radius:var(--radius-sm);font-size:.8rem;color:var(--text-dim);
  border:1px solid transparent;background:transparent;transition:all var(--transition);font-weight:500;
  white-space:nowrap;
}
.nav button:hover{border-color:var(--border);background:var(--card-hover);color:var(--text);transform:translateY(-1px);}
.nav button.active{
  color:var(--text-bright);font-weight:700;
  border-color:color-mix(in srgb,var(--accent) 55%,var(--border));
  background:color-mix(in srgb,var(--accent) 10%,var(--card));
  box-shadow:inset 0 -2px 0 var(--accent);
}
.home-link{
  color:var(--text-dim);text-decoration:none;font-size:.8rem;padding:8px 12px;
  border-radius:var(--radius-sm);transition:all var(--transition);white-space:nowrap;
}
.home-link:hover{color:var(--text);background:var(--card-hover);transform:translateY(-1px);}

/* theme toggle (injected by essentials-ui.js) */
.theme-toggle{
  width:36px;height:36px;padding:0!important;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--border)!important;border-radius:50%!important;
  color:var(--text-dim)!important;background:var(--card)!important;
  transition:all var(--transition)!important;
}
.theme-toggle:hover{border-color:var(--accent)!important;color:var(--accent-deep)!important;transform:rotate(15deg) scale(1.06)!important;}
.theme-toggle svg{width:17px;height:17px;}
.theme-toggle .ico-moon{display:none;}
html[data-theme="dark"] .theme-toggle .ico-sun{display:none;}
html[data-theme="dark"] .theme-toggle .ico-moon{display:block;}
@media (prefers-color-scheme:dark){
  html:not([data-theme="light"]) .theme-toggle .ico-sun{display:none;}
  html:not([data-theme="light"]) .theme-toggle .ico-moon{display:block;}
}

/* ── 5. Generic panel / titles ─────────────────────────────────────────── */
.panel{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:clamp(18px,2.6vw,26px);
  box-shadow:var(--shadow-sm);
  transition:box-shadow var(--transition),border-color var(--transition);
}
.section-title{
  font-size:.86rem;font-weight:800;color:var(--text-bright);margin-bottom:18px;
  display:flex;align-items:center;gap:9px;letter-spacing:.05em;
}
.section-title::before{
  content:"";width:4px;height:15px;border-radius:2px;flex:0 0 auto;
  background:linear-gradient(180deg,var(--accent),var(--action));
  box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 25%,transparent);
}
.muted{color:var(--text-dim);}

/* ── 6. Home layout ────────────────────────────────────────────────────── */
.grid2{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(300px,1fr);gap:clamp(18px,2.4vw,26px);align-items:start;}
.grid2 > .panel:first-child{animation:rise .5s .05s var(--ease-out) both;}
.start-panel{position:sticky;top:86px;animation:rise .5s .12s var(--ease-out) both;}
@media (max-width:980px){
  .grid2{grid-template-columns:1fr;}
  .start-panel{position:static;}
}

/* rotating proverb card (injected by essentials-ui.js) */
.quote-card{
  margin-top:22px;padding:18px 16px 16px;text-align:center;position:relative;overflow:hidden;
  background:linear-gradient(160deg,color-mix(in srgb,var(--accent) 9%,var(--card)),var(--card) 55%);
  border:1px solid color-mix(in srgb,var(--accent) 30%,var(--border));
  border-radius:var(--radius);
}
.quote-card::before{
  content:"言";position:absolute;right:-6px;bottom:-18px;
  font-family:var(--font-serif);font-size:5.2rem;font-weight:900;line-height:1;
  color:color-mix(in srgb,var(--accent) 12%,transparent);pointer-events:none;
}
.quote-card .q-jp{font-family:var(--font-serif);font-size:1.18rem;font-weight:700;color:var(--text-bright);letter-spacing:.06em;transition:opacity .4s var(--ease-out);}
.quote-card .q-en{font-size:.76rem;color:var(--text-dim);margin-top:6px;transition:opacity .4s var(--ease-out);}
.quote-card .q-cap{font-size:.6rem;font-weight:800;letter-spacing:2.5px;text-transform:uppercase;color:var(--accent-deep);margin-bottom:10px;display:flex;align-items:center;gap:8px;justify-content:center;}
.quote-card .q-cap::before,.quote-card .q-cap::after{content:"";width:22px;height:1px;background:color-mix(in srgb,var(--accent) 45%,transparent);}

/* ── 7. Category picker ────────────────────────────────────────────────── */
.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:12px;}
.cat-cell{
  border:1px solid var(--border);border-radius:var(--radius);padding:15px 14px 16px;cursor:pointer;
  transition:transform var(--transition),box-shadow var(--transition),border-color var(--transition),background var(--transition);
  background:var(--card);text-align:left;position:relative;overflow:hidden;
  box-shadow:var(--shadow-sm);will-change:transform;
  animation:cell-pop .4s var(--ease-out) both;
}
.cat-grid .cat-cell:nth-child(1){animation-delay:.02s}.cat-grid .cat-cell:nth-child(2){animation-delay:.05s}
.cat-grid .cat-cell:nth-child(3){animation-delay:.08s}.cat-grid .cat-cell:nth-child(4){animation-delay:.11s}
.cat-grid .cat-cell:nth-child(5){animation-delay:.14s}.cat-grid .cat-cell:nth-child(6){animation-delay:.17s}
.cat-grid .cat-cell:nth-child(7){animation-delay:.2s}.cat-grid .cat-cell:nth-child(8){animation-delay:.23s}
.cat-grid .cat-cell:nth-child(9){animation-delay:.26s}.cat-grid .cat-cell:nth-child(10){animation-delay:.29s}
.cat-grid .cat-cell:nth-child(11){animation-delay:.32s}.cat-grid .cat-cell:nth-child(12){animation-delay:.35s}
.cat-cell::after{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:radial-gradient(220px 90px at 18% 0%,color-mix(in srgb,var(--accent) 7%,transparent),transparent 70%);
  opacity:0;transition:opacity var(--transition);
}
.cat-cell:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--accent) 50%,var(--border));box-shadow:var(--shadow-md);}
.cat-cell:hover::after{opacity:1;}
.cat-cell:active{transform:translateY(-1px) scale(.985);transition-duration:80ms;}
.cat-cell.sel{
  border-color:var(--accent);
  background:color-mix(in srgb,var(--accent) 6%,var(--card));
  box-shadow:0 0 0 1px var(--accent),var(--shadow-sm);
}
.cat-cell .ci{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:10px;margin-bottom:9px;
  background:var(--inset);border:1px solid var(--border);
  font-family:var(--font-serif);font-size:1.2rem;font-weight:700;color:var(--accent-deep);
  transition:all var(--transition);
}
.cat-cell:hover .ci{transform:scale(1.08) rotate(-2deg);border-color:color-mix(in srgb,var(--accent) 45%,var(--border));background:color-mix(in srgb,var(--accent) 8%,var(--card));}
/* selected tile becomes a hanko stamp */
.cat-cell.sel .ci{
  background:var(--action);border-color:var(--action);color:#fff;
  transform:rotate(-4deg);
  box-shadow:0 2px 8px color-mix(in srgb,var(--action) 40%,transparent);
}
.cat-cell .cn{font-size:.88rem;color:var(--text-bright);font-weight:700;line-height:1.3;}
.cat-cell .cj{font-size:.7rem;color:var(--text-dim);margin-top:2px;}
.cat-cell .cmeta{font-size:.64rem;color:var(--text-dim);margin-top:10px;display:flex;gap:9px;flex-wrap:wrap;align-items:center;}
.cat-cell .cmeta b{color:var(--accent-deep);font-weight:800;}
.cat-cell .check{
  position:absolute;top:10px;right:11px;width:21px;height:21px;border-radius:50%;
  background:var(--action);color:#fff;display:flex;align-items:center;justify-content:center;
  font-size:.66rem;opacity:0;transform:scale(.3) rotate(-30deg);transition:all .25s var(--ease-spring);font-weight:800;
  box-shadow:0 2px 6px color-mix(in srgb,var(--action) 45%,transparent);
}
.cat-cell.sel .check{opacity:1;transform:scale(1) rotate(0);}
.cat-progress{position:absolute;left:0;bottom:0;height:3px;width:0;background:linear-gradient(90deg,var(--accent),var(--action));transition:width .5s var(--ease-out);}
.cat-cell .cfmt{
  margin-top:9px;font-size:.63rem;color:var(--accent-deep);font-weight:700;
  background:color-mix(in srgb,var(--accent) 7%,transparent);
  border:1px solid color-mix(in srgb,var(--accent) 22%,transparent);
  border-radius:999px;padding:3px 9px;display:inline-flex;gap:5px;align-items:center;max-width:100%;
}
.cat-cell .cfmt small{font-weight:400;color:var(--text-dim);font-size:.6rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.drill-toggle{
  margin-left:auto;font-size:.58rem;padding:3px 8px;border-radius:999px;border:1px dashed var(--border);
  color:var(--text-dim);transition:all var(--transition);font-weight:600;letter-spacing:.04em;
}
.drill-toggle.on{
  border-style:solid;border-color:var(--accent-green);color:var(--accent-green);
  background:color-mix(in srgb,var(--accent-green) 9%,transparent);
}
.drill-toggle:hover{border-color:var(--accent);color:var(--text);}

.cat-tools{display:flex;gap:8px;margin:14px 0 12px;flex-wrap:wrap;align-items:center;}
.chip{
  font-size:.73rem;padding:7px 14px;border-radius:999px;border:1px solid var(--border);
  background:var(--card);color:var(--text-dim);transition:all var(--transition);font-weight:600;
  min-height:32px;
}
.chip:hover{border-color:var(--accent);color:var(--text-bright);transform:translateY(-1px);box-shadow:var(--shadow-sm);}
.chip.sel{
  border-color:var(--accent);color:var(--text-bright);font-weight:700;
  background:color-mix(in srgb,var(--accent) 10%,var(--card));
  box-shadow:inset 0 -2px 0 var(--accent);
}

/* ── 8. Start panel (progress + drills) ────────────────────────────────── */
.start-panel .totals{display:flex;gap:10px;margin-bottom:20px;}
.totbox{
  flex:1;min-width:76px;background:var(--inset);border:1px solid var(--border);border-radius:var(--radius);
  padding:15px 10px;text-align:center;transition:all var(--transition);position:relative;overflow:hidden;
}
.totbox::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:currentColor;opacity:0;transition:opacity var(--transition);
}
.totbox:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);}
.totbox:hover::after{opacity:.5;}
.totbox b{display:block;font-size:1.75rem;color:var(--text-bright);font-variant-numeric:tabular-nums;line-height:1.2;}
.totbox span{font-size:.68rem;color:var(--text-dim);font-weight:600;letter-spacing:.03em;}
.field{margin-bottom:18px;}
.field label{display:block;font-size:.76rem;color:var(--text-dim);margin-bottom:9px;font-weight:600;letter-spacing:.02em;}
.modes{display:flex;gap:8px;flex-wrap:wrap;}
.mode-btn{
  padding:10px 13px;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--card);
  font-size:.8rem;color:var(--text-dim);transition:all var(--transition);
  display:flex;flex-direction:column;align-items:flex-start;gap:2px;font-weight:600;min-width:96px;flex:1;
}
.mode-btn small{font-size:.58rem;opacity:.75;font-weight:400;}
.mode-btn:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:var(--shadow-sm);}
.mode-btn.on{
  border-color:var(--accent);color:var(--text-bright);font-weight:700;
  background:color-mix(in srgb,var(--accent) 9%,var(--card));
  box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 45%,transparent),inset 0 -2px 0 var(--accent);
}
.btn-primary{
  width:100%;padding:16px;border-radius:var(--radius);font-size:.95rem;font-weight:800;
  color:var(--card);background:var(--text-bright);
  border:1px solid transparent;
  transition:background var(--transition),transform var(--transition),box-shadow var(--transition),color var(--transition);
  letter-spacing:.02em;position:relative;overflow:hidden;
}
.btn-primary::after{
  content:"";position:absolute;top:0;left:-80%;width:55%;height:100%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.22),transparent);
  transform:skewX(-18deg);transition:left .5s var(--ease-out);
}
.btn-primary:hover:not(:disabled){background:var(--action);color:#fff;transform:translateY(-2px);box-shadow:0 6px 18px color-mix(in srgb,var(--action) 38%,transparent);}
.btn-primary:hover:not(:disabled)::after{left:130%;}
.btn-primary:active:not(:disabled){transform:translateY(0) scale(.985);}
.btn-primary:disabled{opacity:.38;cursor:not-allowed;transform:none;box-shadow:none;}
.select{width:100%;}
select.select{
  padding:11px 34px 11px 12px;border-radius:var(--radius-sm);
  background:var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236f6552' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 12px center;
  border:1px solid var(--border);color:var(--text);font-size:.85rem;font-weight:500;
  transition:border-color var(--transition),box-shadow var(--transition);
  appearance:none;cursor:pointer;
}
select.select:hover{border-color:var(--accent);}
select.select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent);}

/* home footnote callout */
.grid2 .muted[style]{line-height:1.7;padding-left:12px;border-left:2px solid color-mix(in srgb,var(--accent) 40%,var(--border));}


/* ── 9. Study shell (lesson & practice & category) ─────────────────────── */
.study-wrap{max-width:760px;margin:0 auto;}
.study-top{display:flex;align-items:center;gap:12px;margin-bottom:20px;animation:rise .4s var(--ease-out) both;}
.progress{
  flex:1;height:8px;border-radius:999px;background:var(--inset);
  overflow:hidden;border:1px solid var(--border);position:relative;
}
.progress > i{
  display:block;height:100%;width:0;border-radius:999px;position:relative;overflow:hidden;
  background:linear-gradient(90deg,var(--accent),var(--action));
  transition:width .5s var(--ease-out);
}
.progress > i::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%);
  animation:sheen 2.6s ease-in-out infinite;
}
@keyframes sheen{0%{transform:translateX(-120%)}55%,100%{transform:translateX(220%)}}
.study-counts{display:flex;gap:10px;font-size:.76rem;color:var(--text-dim);align-items:center;white-space:nowrap;}
.study-counts span b{color:var(--text-bright);font-variant-numeric:tabular-nums;}
.study-counts .est{
  margin-left:2px;padding:3px 9px;border-radius:999px;background:var(--inset);
  border:1px solid var(--border);font-size:.63rem;color:var(--text-dim);font-weight:600;
}
.study-ring{flex:0 0 38px;width:38px;height:38px;position:relative;display:flex;align-items:center;justify-content:center;}
.prog-ring{width:38px;height:38px;transform:rotate(-90deg);}
.prog-ring circle:last-child{transition:stroke-dashoffset .5s var(--ease-out);}
.study-ring span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:.6rem;font-weight:800;color:var(--accent-deep);}

/* ── 10. Lesson card ───────────────────────────────────────────────────── */
.lesson-card{
  background:var(--card);
  border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:clamp(24px,4vw,40px) clamp(18px,3.4vw,32px);
  position:relative;overflow:hidden;box-shadow:var(--shadow-md);
  animation:rise .45s var(--ease-out) both;
}
.lesson-card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--accent),var(--action) 50%,var(--accent));
  background-size:200% 100%;
  animation:bar-drift 7s linear infinite;
}
@keyframes bar-drift{0%{background-position:0 0}100%{background-position:200% 0}}
/* faint corner ornament */
.lesson-card::after{
  content:"基";position:absolute;right:-14px;bottom:-34px;pointer-events:none;
  font-family:var(--font-serif);font-weight:900;font-size:9rem;line-height:1;
  color:color-mix(in srgb,var(--accent) 6%,transparent);user-select:none;
}
.lesson-term{text-align:center;margin:26px 0 4px;position:relative;z-index:1;}
.fc-title{font-size:.9rem;color:var(--accent-deep);margin-bottom:8px;font-weight:600;letter-spacing:.03em;}
.fc-main{
  font-family:var(--font-serif);font-weight:900;
  font-size:clamp(2.1rem,6vw,3.3rem);color:var(--text-bright);line-height:1.3;
}
.fc-struct{font-size:.98rem;color:var(--text-dim);margin-top:8px;letter-spacing:.14em;}
.lesson-hook{
  font-size:.87rem;color:var(--text-dim);font-style:italic;text-align:center;
  margin:10px auto 22px;max-width:560px;line-height:1.75;position:relative;z-index:1;
}
.lesson-format{position:relative;z-index:1;}
.lesson-divider{
  display:flex;align-items:center;gap:14px;margin:34px 0 18px;
  font-size:.68rem;font-weight:800;letter-spacing:2.5px;text-transform:uppercase;
  color:var(--accent-deep);position:relative;z-index:1;
}
.lesson-divider::before,.lesson-divider::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--border-strong));}
.lesson-divider::after{background:linear-gradient(90deg,var(--border-strong),transparent);}
.lesson-divider span{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;}
.lesson-divider span::before{content:"◆";font-size:.5em;opacity:.8;}
.lesson-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:26px;position:relative;z-index:1;}
@media (max-width:560px){.lesson-actions{grid-template-columns:1fr;}}
.lesson-actions .know-btn{padding:16px;}
.lesson-actions .next-btn{margin-top:0;}

.fc-badge{
  position:absolute;top:16px;left:18px;font-size:.64rem;color:var(--text-dim);font-weight:600;
  border:1px solid var(--border);padding:4px 11px;border-radius:999px;background:color-mix(in srgb,var(--card) 80%,transparent);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  display:inline-flex;gap:6px;align-items:center;max-width:calc(100% - 76px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.est-badge{
  margin-left:2px;font-size:.6rem;padding:2px 8px;border-radius:999px;
  background:var(--inset);border:1px solid var(--border);color:var(--text-dim);font-weight:700;
}
.fc-tts{
  position:absolute;top:12px;right:16px;z-index:2;
  width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:50%;color:var(--text-dim);
  transition:all var(--transition);
}
.fc-tts:hover{color:var(--accent-deep);background:var(--inset);transform:scale(1.1);}
.ico-speaker{display:block;}
.ico-speaker.ico-lg{width:26px;height:26px;}

/* ── 11. Memory palace + did-you-know ──────────────────────────────────── */
.memory-aids{
  margin:18px 0 14px;position:relative;z-index:1;
  background:color-mix(in srgb,var(--info) 5%,var(--card));
  border:1px solid color-mix(in srgb,var(--info) 22%,var(--border));
  border-radius:var(--radius);overflow:hidden;
}
.mem-toggle{
  width:100%;display:flex;align-items:center;gap:10px;padding:13px 15px;
  background:transparent;text-align:left;transition:background var(--transition);
}
.mem-toggle:hover{background:color-mix(in srgb,var(--info) 8%,transparent);}
.mem-toggle b{font-size:.87rem;color:var(--text-bright);}
.mem-toggle small{font-size:.62rem;color:var(--text-dim);margin-left:6px;}
.mem-chev{margin-left:auto;font-size:.7rem;color:var(--text-dim);}
.mem-panel{padding:13px 15px;border-top:1px dashed color-mix(in srgb,var(--info) 30%,var(--border));animation:card-enter .32s var(--ease-out);}
.mem-label{font-size:.64rem;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:var(--info);}
.mem-tip p{font-size:.86rem;line-height:1.7;color:var(--text);margin:6px 0 0;}
.mem-srs{
  margin-top:10px;font-size:.73rem;color:var(--text-dim);background:var(--inset);
  border:1px solid var(--border);border-radius:var(--radius-sm);padding:9px 11px;
}
.mem-say-row{margin-top:10px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.mem-say{padding:10px 14px;font-size:.8rem;}
.mem-pitch{font-size:.71rem;color:var(--accent-deep);font-style:italic;}
.mem-slow-row{display:flex;gap:8px;margin-top:8px;}

.didyou{
  margin:14px 0 4px;position:relative;z-index:1;
  background:color-mix(in srgb,var(--accent) 6%,var(--card));
  border:1px dashed color-mix(in srgb,var(--accent) 35%,var(--border));
  border-radius:var(--radius);padding:13px 15px;text-align:left;
  display:flex;gap:11px;align-items:flex-start;
}
.didyou-tag{
  flex:0 0 auto;font-size:.62rem;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;
  color:#fff;background:var(--accent);border-radius:999px;padding:4px 10px;margin-top:1px;
}
.didyou p{font-size:.81rem;line-height:1.65;color:var(--text);margin:0;}

/* ── 12. Core block ────────────────────────────────────────────────────── */
.core-block{text-align:left;position:relative;z-index:1;}
.core-row{
  display:flex;gap:14px;padding:14px 16px;border-radius:var(--radius);margin-top:12px;
  align-items:flex-start;border:1px solid var(--border);
  transition:transform var(--transition),box-shadow var(--transition),border-color var(--transition);
  animation:rise .4s var(--ease-out) both;
}
.core-row:nth-child(1){animation-delay:.02s}.core-row:nth-child(2){animation-delay:.06s}
.core-row:nth-child(3){animation-delay:.1s}.core-row:nth-child(4){animation-delay:.14s}
.core-row:nth-child(5){animation-delay:.18s}.core-row:nth-child(6){animation-delay:.22s}
.core-row:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm);}
.core-tag{
  flex:0 0 38px;height:38px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;
  font-size:.74rem;font-weight:800;font-family:var(--font-serif);
  background:var(--inset);border:1px solid var(--border);color:var(--text-dim);
  transition:all var(--transition);
}
.core-row:hover .core-tag{transform:rotate(-4deg) scale(1.05);}
.core-row b{display:block;font-size:.68rem;letter-spacing:1.6px;text-transform:uppercase;margin-bottom:4px;color:var(--text-bright);}
.core-row p{font-size:.88rem;line-height:1.75;color:var(--text);}
.core-row .ex{flex:1;}
.core-row.meaning{background:color-mix(in srgb,var(--info) 5%,var(--card));border-color:color-mix(in srgb,var(--info) 20%,var(--border));}
.core-row.meaning .core-tag{color:var(--info);border-color:color-mix(in srgb,var(--info) 32%,transparent);background:color-mix(in srgb,var(--info) 8%,var(--card));}
.core-row.mistake{background:color-mix(in srgb,var(--again) 5%,var(--card));border-color:color-mix(in srgb,var(--again) 24%,var(--border));}
.core-row.mistake .core-tag{color:var(--again);border-color:color-mix(in srgb,var(--again) 36%,transparent);background:color-mix(in srgb,var(--again) 8%,var(--card));}
.core-row.nuance{background:color-mix(in srgb,var(--info) 5%,var(--card));border-color:color-mix(in srgb,var(--info) 22%,var(--border));}
.core-row.nuance .core-tag{color:var(--info);border-color:color-mix(in srgb,var(--info) 34%,transparent);background:color-mix(in srgb,var(--info) 8%,var(--card));}
.core-row.tip{background:color-mix(in srgb,var(--hard) 6%,var(--card));border-color:color-mix(in srgb,var(--hard) 28%,var(--border));}
.core-row.tip .core-tag{color:var(--hard);border-color:color-mix(in srgb,var(--hard) 38%,transparent);background:color-mix(in srgb,var(--hard) 9%,var(--card));}
.core-row.expl,.core-row.examples{background:var(--inset);}
.diff-dots{margin-top:12px;font-size:.72rem;color:var(--text-dim);letter-spacing:.18em;}
.diff-dots i{color:var(--accent);font-style:normal;}

/* example sentences */
.ex{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:12px 14px;margin-top:10px;text-align:left;position:relative;padding-right:38px;
  transition:border-color var(--transition),transform var(--transition),box-shadow var(--transition);
}
.core-row.examples .ex{background:color-mix(in srgb,var(--card) 65%,transparent);}
.ex:hover{border-color:color-mix(in srgb,var(--accent) 40%,var(--border));transform:translateX(3px);box-shadow:var(--shadow-sm);}
.ex .jp{font-size:.98rem;color:var(--text-bright);}
.ex .rd{font-size:.75rem;color:var(--accent-deep);margin-top:2px;}
.ex .en{font-size:.8rem;color:var(--text-dim);margin-top:4px;}
.ex-tts{
  position:absolute;right:6px;top:8px;width:26px;height:26px;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:7px;color:var(--text-dim);opacity:.55;
  transition:all var(--transition);
}
.ex-tts:hover{opacity:1;color:var(--accent-deep);background:var(--inset);transform:scale(1.1);}
.rd{font-size:.76rem;color:var(--accent-deep);margin-top:2px;}

/* ── 13. Quick check / quiz ────────────────────────────────────────────── */
.quick-check{position:relative;z-index:1;}
.quiz-q{font-size:1.28rem;color:var(--text-bright);margin-bottom:6px;line-height:1.55;font-family:var(--font-serif);font-weight:700;}
.quiz-q-en{font-size:.82rem;color:var(--text-dim);margin-bottom:20px;}
.opts{display:flex;flex-direction:column;gap:10px;width:100%;}
.opt-btn{
  padding:14px 16px;border-radius:var(--radius);border:1px solid var(--border);background:var(--card);
  font-size:.93rem;color:var(--text);text-align:left;transition:all var(--transition);
  display:flex;gap:12px;align-items:center;box-shadow:var(--shadow-sm);font-weight:500;
}
.opt-btn:hover:not(:disabled){border-color:var(--accent);transform:translateX(4px);box-shadow:var(--shadow-md);background:color-mix(in srgb,var(--accent) 4%,var(--card));}
.opt-btn .key{
  display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:8px;
  background:var(--inset);font-size:.72rem;font-weight:800;flex-shrink:0;
  border:1px solid var(--border);color:var(--text-dim);
  transition:all var(--transition);font-family:var(--font-sans);
}
.opt-btn:hover:not(:disabled) .key{border-color:var(--accent);color:var(--accent-deep);transform:rotate(-4deg);}
.opt-btn.correct{
  border-color:var(--good);background:color-mix(in srgb,var(--good) 9%,var(--card));
  color:var(--good);font-weight:700;
  box-shadow:0 0 0 1px color-mix(in srgb,var(--good) 35%,transparent);
  animation:pop-correct .35s var(--ease-spring);
}
.opt-btn.correct .key{background:var(--good);color:#fff;border-color:var(--good);}
.opt-btn.wrong{
  border-color:var(--again);background:color-mix(in srgb,var(--again) 7%,var(--card));
  color:var(--again);font-weight:600;
  box-shadow:0 0 0 1px color-mix(in srgb,var(--again) 30%,transparent);
  animation:shake .32s ease both;
}
.opt-btn.wrong .key{background:var(--again);color:#fff;border-color:var(--again);}
.opt-btn:disabled{cursor:default;}
.quiz-feedback{
  margin-top:16px;text-align:center;font-size:.9rem;font-weight:700;
  padding:12px;border-radius:var(--radius-sm);animation:stage-swap .28s var(--ease-out) both;
}
.quiz-feedback.ok{color:var(--good);background:color-mix(in srgb,var(--good) 8%,transparent);border:1px solid color-mix(in srgb,var(--good) 28%,transparent);}
.quiz-feedback.no{color:var(--again);background:color-mix(in srgb,var(--again) 7%,transparent);border:1px solid color-mix(in srgb,var(--again) 24%,transparent);}

/* know / next buttons */
.reveal-btn{
  width:100%;margin-top:20px;padding:15px;border-radius:var(--radius);font-size:.9rem;font-weight:700;
  color:var(--text);background:var(--inset);border:1px solid var(--border);transition:all var(--transition);
}
.reveal-btn:hover{border-color:var(--accent);color:var(--text-bright);transform:translateY(-1px);box-shadow:var(--shadow-sm);}
.next-btn{
  width:100%;margin-top:16px;padding:15px;border-radius:var(--radius);font-size:.95rem;font-weight:800;
  color:var(--card);background:var(--text-bright);
  transition:background var(--transition),transform var(--transition),box-shadow var(--transition),color var(--transition);
}
.next-btn:hover{background:var(--action);color:#fff;transform:translateY(-2px);box-shadow:0 6px 18px color-mix(in srgb,var(--action) 38%,transparent);}
.next-btn:active{transform:translateY(0) scale(.985);}
.know-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px;}
.know-btn{padding:15px;border-radius:var(--radius);font-weight:700;font-size:.9rem;transition:all var(--transition);border:1px solid var(--border);}
.know-btn:hover{transform:translateY(-2px);}
.know-btn.yes{background:color-mix(in srgb,var(--good) 10%,var(--card));border-color:color-mix(in srgb,var(--good) 45%,var(--border));color:var(--good);}
.know-btn.yes:hover{box-shadow:0 0 0 1px var(--good),var(--shadow-md);}
.know-btn.no{background:color-mix(in srgb,var(--again) 8%,var(--card));border-color:color-mix(in srgb,var(--again) 40%,var(--border));color:var(--again);}
.know-btn.no:hover{box-shadow:0 0 0 1px var(--again),var(--shadow-md);}

.kbd-hint{text-align:center;font-size:.68rem;color:var(--text-dim);margin-top:18px;position:relative;z-index:1;}
.kbd-hint kbd{
  background:var(--inset);border:1px solid var(--border);border-bottom-width:2px;border-radius:6px;
  padding:2px 7px;font-size:.66rem;font-family:var(--font-sans);font-weight:700;color:var(--text);
}
.next-btn kbd{background:rgba(255,255,255,.16);border-color:transparent;color:inherit;margin-left:6px;}

/* ── 14. Buttons ghost / rows ──────────────────────────────────────────── */
.btn-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px;}
.btn-ghost{
  padding:10px 16px;border-radius:var(--radius-sm);border:1px solid var(--border);
  background:var(--card);font-size:.82rem;color:var(--text);font-weight:600;
  transition:all var(--transition);
}
.btn-ghost:hover{border-color:var(--accent);color:var(--text-bright);transform:translateY(-1px);box-shadow:var(--shadow-sm);}
.btn-ghost:active{transform:translateY(0) scale(.98);}
.btn-ghost.danger{color:var(--again);}
.btn-ghost.danger:hover{border-color:var(--again);background:color-mix(in srgb,var(--again) 6%,var(--card));}

/* ── 15. Category view ─────────────────────────────────────────────────── */
.crumb{display:flex;align-items:center;gap:10px;margin-bottom:18px;flex-wrap:wrap;font-size:.85rem;color:var(--text);animation:rise .4s var(--ease-out) both;}
.crumb b{color:var(--text-bright);}
.crumb-sep{color:var(--text-dim);opacity:.5;}
.cfmt-inline{
  font-size:.66rem;color:var(--accent-deep);font-weight:700;
  background:color-mix(in srgb,var(--accent) 8%,transparent);
  border:1px solid color-mix(in srgb,var(--accent) 26%,transparent);
  border-radius:999px;padding:3px 10px;
}
.cat-head{margin-bottom:20px;}
.cat-head-info{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:14px;flex-wrap:wrap;}
.cat-head-title{font-family:var(--font-serif);font-size:clamp(1.45rem,3vw,1.9rem);font-weight:900;color:var(--text-bright);}
.cat-head-title small{font-family:var(--font-sans);font-size:.78rem;color:var(--text-dim);margin-left:10px;font-weight:400;}
.cat-head-meta{font-size:.82rem;color:var(--text-dim);font-variant-numeric:tabular-nums;}
.cat-head-meta b{color:var(--accent-green);font-weight:800;}
.catbar-track{
  flex:1;height:10px;border-radius:999px;background:var(--inset);
  border:1px solid var(--border);overflow:hidden;position:relative;
}
.catbar-track > i{
  display:block;height:100%;width:0;border-radius:999px;position:relative;overflow:hidden;
  background:linear-gradient(90deg,var(--accent),var(--action));
  transition:width .6s var(--ease-out);
}
.catbar-track > i::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.4) 50%,transparent 70%);
  animation:sheen 2.8s ease-in-out infinite;
}
.catbar-track.big{height:12px;margin-bottom:18px;}
.lvl-head{
  font-size:.74rem;font-weight:800;letter-spacing:2.2px;color:var(--accent-deep);
  margin:22px 0 10px;display:flex;align-items:center;gap:10px;text-transform:uppercase;
}
.lvl-head::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--border-strong),transparent);}
.lvl-head span{font-weight:500;color:var(--text-dim);margin-left:auto;text-transform:none;font-size:.7rem;letter-spacing:.02px;}
.lesson-row{
  display:flex;align-items:center;gap:13px;width:100%;text-align:left;
  padding:13px 16px;border-radius:var(--radius);
  border:1px solid transparent;border-bottom:1px solid var(--border);background:transparent;
  transition:all var(--transition);
}
.lesson-row:hover{background:var(--card-hover);border-color:var(--border);box-shadow:var(--shadow-sm);transform:translateX(3px);}
.lesson-row:active{transform:scale(.99);}
.lesson-row .lr-state{
  flex:0 0 28px;height:28px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  font-size:.7rem;border:1px solid var(--border);color:var(--text-dim);background:var(--card);
  transition:all var(--transition);
}
.lesson-row.done .lr-state{
  background:color-mix(in srgb,var(--accent-green) 14%,var(--card));
  border-color:color-mix(in srgb,var(--accent-green) 55%,var(--border));
  color:var(--accent-green);font-weight:800;
}
.lesson-row .lr-main{flex:1;min-width:0;}
.lesson-row .lr-main b{display:block;font-size:.98rem;color:var(--text-bright);font-family:var(--font-serif);font-weight:700;}
.lesson-row .lr-main small{
  display:block;font-size:.71rem;color:var(--text-dim);margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.lesson-row .lr-fmt{
  font-size:.74rem;width:30px;height:30px;flex:0 0 30px;display:inline-flex;
  align-items:center;justify-content:center;border-radius:8px;
  background:var(--inset);border:1px solid var(--border);
  font-family:var(--font-serif);font-weight:700;color:var(--accent-deep);
  transition:all var(--transition);
}
.lesson-row:hover .lr-fmt{border-color:color-mix(in srgb,var(--accent) 45%,var(--border));transform:rotate(-4deg) scale(1.06);}
.lesson-row.done .lr-main b{color:var(--text-dim);}
.lesson-row.done .lr-fmt{opacity:.55;}

/* ── 16. Practice flashcard ────────────────────────────────────────────── */
.flashcard{
  background:var(--card);
  border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:clamp(28px,4.5vw,46px) clamp(20px,3.5vw,34px);min-height:340px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  position:relative;overflow:hidden;box-shadow:var(--shadow-md);
  animation:rise .45s var(--ease-out) both;
}
.flashcard::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--accent),var(--action) 50%,var(--accent));
  background-size:200% 100%;animation:bar-drift 7s linear infinite;
}
.fc-prompt-label{
  font-size:.68rem;color:var(--text-dim);letter-spacing:2.2px;text-transform:uppercase;
  margin-bottom:18px;font-weight:800;
}
.fc-answer{width:100%;text-align:left;animation:stage-swap .3s var(--ease-out) both;}
.ans-reading{font-size:1.35rem;color:var(--accent-deep);margin-bottom:6px;font-weight:700;}
.ans-mean{font-size:1.12rem;color:var(--text-bright);margin-bottom:12px;}
.ans-meta{font-size:.76rem;color:var(--text-dim);margin-bottom:12px;}
.fc-divider{width:60%;height:1px;background:linear-gradient(90deg,transparent,var(--border-strong),transparent);margin:22px auto;}
.expl{font-size:.88rem;color:var(--text);line-height:1.7;text-align:left;margin-top:6px;}

.tts-replay{
  display:inline-flex;align-items:center;gap:10px;padding:12px 20px;
  border:1px solid var(--border);border-radius:999px;background:var(--card);
  color:var(--text);cursor:pointer;font-size:1rem;transition:all var(--transition);
}
.tts-replay span{font-size:.82rem;color:var(--text-dim);}
.tts-replay:hover{border-color:var(--accent);box-shadow:var(--shadow-md);transform:translateY(-2px);}
.tts-replay:active{transform:scale(.97);}

.session-done{text-align:center;padding:56px 20px;}
.session-done .big{font-size:3rem;margin-bottom:14px;color:var(--good);}
.done-mark{display:flex;align-items:center;justify-content:center;animation:pop-correct .5s var(--ease-spring) both;}
.done-mark svg{filter:drop-shadow(0 4px 12px color-mix(in srgb,var(--good) 35%,transparent));}
@keyframes pop-correct{0%{transform:scale(.6);opacity:0}70%{transform:scale(1.07)}100%{transform:scale(1);opacity:1}}


/* ── 17. Formats — shared ──────────────────────────────────────────────── */
.fmt{
  background:color-mix(in srgb,var(--card) 55%,var(--bg));
  border:1px solid var(--border);border-radius:var(--radius);padding:20px;overflow-x:auto;
  box-shadow:var(--shadow-sm);position:relative;
}
.fmt-heading{
  font-size:.9rem;font-weight:800;color:var(--text-bright);margin-bottom:14px;
  padding-bottom:10px;border-bottom:1px dashed var(--border);
  display:flex;align-items:center;gap:8px;
}
.fmt-heading::before{content:"◆";font-size:.5em;color:var(--accent);}
.fmt-hint{
  font-size:.73rem;color:var(--text-dim);margin-bottom:14px;text-align:center;
  font-style:italic;line-height:1.6;
}
.para{font-size:.9rem;line-height:1.85;color:var(--text);margin-bottom:12px;text-align:left;}
.para.lead::first-letter{
  font-size:1.9em;font-family:var(--font-serif);font-weight:900;
  color:var(--accent-deep);line-height:1;float:left;padding:2px 8px 0 0;
}
.pull-quote{
  font-family:var(--font-serif);font-size:1.05rem;font-weight:700;color:var(--accent-deep);text-align:center;
  padding:16px 12px;margin:8px 0;border-top:1px dashed var(--border);border-bottom:1px dashed var(--border);
  letter-spacing:.03em;
}
.reveal-more{margin-top:14px;}
.reveal-more .reveal-btn{margin-top:0;padding:12px;font-size:.84rem;}

/* story */
.story-lines{text-align:left;}
.story-line{
  padding:14px 16px;border-radius:var(--radius);background:var(--card);border:1px solid var(--border);
  margin-bottom:10px;animation:pop-in .4s var(--ease-out) both;
  transition:border-color var(--transition),transform var(--transition),box-shadow var(--transition);
}
.story-line:hover{border-color:color-mix(in srgb,var(--accent) 38%,var(--border));transform:translateX(3px);box-shadow:var(--shadow-sm);}
.story-line .jp{font-size:1.06rem;color:var(--text-bright);font-family:var(--font-serif);cursor:pointer;}
.story-line .en{
  font-size:.8rem;color:var(--text);margin-top:8px;background:var(--inset);
  border:1px solid var(--border);border-radius:var(--radius-sm);padding:9px 11px;
  animation:stage-swap .28s var(--ease-out);
}
.story-en-toggle{
  margin-top:7px;font-size:.64rem;padding:4px 10px;border-radius:999px;background:var(--card);
  border:1px solid var(--border);color:var(--text-dim);transition:all var(--transition);font-weight:600;
}
.story-en-toggle.small{font-size:.6rem;padding:3px 8px;}
.story-en-toggle:hover{border-color:var(--accent);color:var(--text-bright);}
.story-say{
  font-size:.82rem;opacity:.5;transition:all var(--transition);margin-left:6px;
  vertical-align:middle;display:inline-flex;color:var(--text-dim);
}
.story-say:hover{opacity:1;color:var(--accent-deep);transform:scale(1.12);}

/* dialogue */
.chat{display:flex;flex-direction:column;gap:10px;}
.bubble{
  max-width:84%;padding:12px 16px;border-radius:16px;animation:pop-in .4s var(--ease-out) both;text-align:left;
  transition:box-shadow var(--transition),transform var(--transition);
}
.bubble:hover{box-shadow:var(--shadow-sm);transform:translateY(-1px);}
.bubble.l{align-self:flex-start;background:var(--card);border:1px solid var(--border);border-bottom-left-radius:4px;}
.bubble.r{
  align-self:flex-end;
  background:color-mix(in srgb,var(--info) 8%,var(--card));
  border:1px solid color-mix(in srgb,var(--info) 26%,var(--border));
  border-bottom-right-radius:4px;
}
.bubble .who{font-size:.6rem;font-weight:800;letter-spacing:1.5px;color:var(--info);text-transform:uppercase;margin-bottom:3px;}
.bubble .jp{font-size:.98rem;color:var(--text-bright);cursor:pointer;}
.bubble .dialogue-en{
  font-size:.78rem;color:var(--text);margin-top:7px;background:var(--inset);
  border:1px solid var(--border);border-radius:var(--radius-sm);padding:8px 10px;
  animation:stage-swap .28s var(--ease-out);
}

/* compare */
.cmp{width:100%;border-collapse:collapse;font-size:.85rem;}
.cmp th{padding:12px 10px;text-align:left;font-size:.78rem;border-bottom:2px solid var(--border-strong);}
.cmp th b{display:block;font-size:1.02rem;font-family:var(--font-serif);}
.cmp th small{color:var(--text-dim);font-weight:400;font-size:.68rem;}
.cmp th.ca{color:var(--info);}
.cmp th.cb{color:var(--action);}
.cmp td{padding:11px 10px;border-bottom:1px solid var(--border);vertical-align:top;line-height:1.6;}
.cmp td.pt{color:var(--text-dim);font-size:.72rem;font-weight:700;width:22%;}
.cmp td.ca{background:color-mix(in srgb,var(--info) 5%,transparent);border-radius:var(--radius-sm);}
.cmp td.cb{background:color-mix(in srgb,var(--action) 5%,transparent);border-radius:var(--radius-sm);}
.cmp tbody tr:last-child td{border-bottom:none;}
.cmp tbody tr:hover td{background:color-mix(in srgb,var(--accent) 5%,transparent);}
.cmp-row.has-note{cursor:pointer;}
.cmp-row.expanded td{background:color-mix(in srgb,var(--accent) 8%,transparent);}
.cmp-hint{font-size:.62rem;color:var(--accent-deep);margin-left:4px;}
.cmp-note td{padding:0;border:none;background:transparent!important;}
.cmp-note-inner{
  margin:4px 0 8px;background:color-mix(in srgb,var(--accent) 7%,var(--card));
  border:1px solid color-mix(in srgb,var(--accent) 26%,var(--border));
  border-radius:var(--radius-sm);padding:10px 12px;font-size:.82rem;line-height:1.65;color:var(--text);
  text-align:left;animation:card-enter .28s var(--ease-out);
}

/* scenario (signs) */
.signs{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin-top:14px;}
.sign{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:16px;text-align:center;
  animation:cell-pop .4s var(--ease-out) both;
  transition:transform var(--transition),box-shadow var(--transition),border-color var(--transition);
}
.sign:hover{transform:translateY(-3px) rotate(-.4deg);box-shadow:var(--shadow-md);border-color:color-mix(in srgb,var(--accent) 40%,var(--border));}
.sign-board{
  font-family:var(--font-serif);font-size:1.16rem;font-weight:800;color:var(--text-bright);
  background:var(--inset);
  border:2px solid var(--border-strong);border-radius:var(--radius-sm);
  padding:14px 10px;margin-bottom:10px;position:relative;
  box-shadow:inset 0 0 0 3px var(--card),inset 0 0 0 4px var(--border);
}
.decode{font-size:.83rem;color:var(--text);margin-top:6px;line-height:1.6;}
.sign-note{font-size:.71rem;color:var(--text-dim);margin-top:8px;border-top:1px dashed var(--border);padding-top:8px;}

/* timeline */
.tl{position:relative;padding-left:8px;}
.tl-step{display:flex;gap:14px;position:relative;padding-bottom:18px;text-align:left;animation:pop-in .4s var(--ease-out) both;}
.tl-step:not(:last-child)::before{
  content:"";position:absolute;left:14px;top:34px;bottom:2px;width:2px;border-radius:2px;
  background:linear-gradient(180deg,var(--accent) 0%,var(--border) 100%);
}
.tl-dot{
  flex:0 0 30px;height:30px;border-radius:50%;background:var(--card);
  border:2px solid var(--accent);color:var(--accent-deep);
  display:inline-flex;align-items:center;justify-content:center;
  font-size:.7rem;font-weight:800;z-index:1;
  box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 12%,transparent);
}
.tl-body{
  flex:1;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:12px 16px;
  transition:all var(--transition);box-shadow:var(--shadow-sm);
}
.tl-body:hover{transform:translateX(4px);border-color:color-mix(in srgb,var(--accent) 40%,var(--border));box-shadow:var(--shadow-sm);}
.tl-time{font-size:.68rem;font-weight:800;color:var(--info);letter-spacing:1.2px;text-transform:uppercase;}
.tl-body .jp{font-size:1rem;color:var(--text-bright);margin-top:2px;font-family:var(--font-serif);font-weight:700;}
.tl-body .en{font-size:.78rem;color:var(--text-dim);margin-top:3px;}

/* pattern */
.formula{
  font-family:var(--font-serif);font-size:1.06rem;font-weight:700;text-align:center;color:var(--text-bright);
  background:color-mix(in srgb,var(--accent) 6%,var(--card));
  border:1.5px dashed color-mix(in srgb,var(--accent) 55%,transparent);
  border-radius:var(--radius);padding:14px;margin-bottom:16px;
}
.pat{width:100%;border-collapse:collapse;font-size:.87rem;}
.pat td{padding:10px 12px;border-bottom:1px solid var(--border);text-align:left;}
.pat tr:last-child td{border-bottom:none;}
.pat td.pt{color:var(--text-dim);font-size:.74rem;font-weight:700;white-space:nowrap;}
.pat td.pj{font-family:var(--font-serif);font-size:1rem;font-weight:700;color:var(--text-bright);}
.pat td.pn{font-size:.75rem;color:var(--text-dim);line-height:1.55;}
.pat tr:nth-child(odd) td{background:color-mix(in srgb,var(--inset) 45%,transparent);}
.pat tr:hover td{background:color-mix(in srgb,var(--accent) 6%,transparent);}

/* rules */
.rule-card{
  display:flex;gap:14px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  padding:16px;margin-bottom:12px;text-align:left;
  animation:pop-in .4s var(--ease-out) both;
  transition:all var(--transition);
}
.rule-card:hover{border-color:color-mix(in srgb,var(--accent) 42%,var(--border));box-shadow:var(--shadow-sm);transform:translateY(-2px);}
.rule-n{
  flex:0 0 32px;height:32px;border-radius:9px;
  background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 16%,var(--card)),color-mix(in srgb,var(--accent) 7%,var(--card)));
  color:var(--accent-deep);font-weight:800;
  display:inline-flex;align-items:center;justify-content:center;font-size:.85rem;
  border:1px solid color-mix(in srgb,var(--accent) 35%,var(--border));
}
.rule-t{font-size:.92rem;font-weight:800;color:var(--text-bright);}
.rule-d{font-size:.82rem;color:var(--text);line-height:1.65;margin-top:3px;}
.rule-exs{margin-top:8px;display:flex;gap:8px;flex-wrap:wrap;}
.rule-ex{
  font-size:.8rem;background:var(--inset);border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:4px 10px;color:var(--text-bright);transition:all var(--transition);
}
.rule-ex:hover{border-color:var(--accent);transform:translateY(-1px);}
.rule-ex small{color:var(--accent-deep);font-size:.66rem;}

/* journey */
.jrn{position:relative;}
.jrn-stop{display:flex;gap:14px;padding-bottom:16px;position:relative;text-align:left;animation:pop-in .4s var(--ease-out) both;}
.jrn-stop:not(:last-child)::before{
  content:"";position:absolute;left:14px;top:34px;bottom:2px;border-left:2px dashed color-mix(in srgb,var(--accent-green) 45%,var(--border));
}
.jrn-pin{
  flex:0 0 30px;height:30px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);
  background:linear-gradient(145deg,var(--accent-green),color-mix(in srgb,var(--accent-green) 70%,var(--text)));
  display:inline-flex;align-items:center;justify-content:center;z-index:1;
  box-shadow:0 3px 8px color-mix(in srgb,var(--accent-green) 40%,transparent);
  color:#fff;font-size:.7rem;font-weight:800;
}
.jrn-pin span{color:#fff;}
.jrn-body{
  flex:1;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  padding:12px 16px;transition:all var(--transition);box-shadow:var(--shadow-sm);
}
.jrn-body:hover{transform:translateX(4px);border-color:color-mix(in srgb,var(--accent-green) 40%,var(--border));box-shadow:var(--shadow-sm);}
.jrn-body b{font-size:1rem;color:var(--text-bright);font-family:var(--font-serif);font-weight:700;}
.jrn-body .en{font-size:.8rem;color:var(--text-dim);margin-top:3px;line-height:1.6;}

/* origin */
.org-stage{display:flex;align-items:stretch;gap:12px;margin-bottom:16px;flex-wrap:wrap;}
.org-box{
  flex:1;min-width:150px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  padding:16px;text-align:center;transition:all var(--transition);
}
.org-box:hover{box-shadow:var(--shadow-md);transform:translateY(-2px);}
.org-box small{display:block;font-size:.6rem;letter-spacing:2.2px;text-transform:uppercase;color:var(--text-dim);margin-bottom:8px;font-weight:700;}
.org-box b{font-size:1rem;color:var(--text-bright);line-height:1.5;font-family:var(--font-serif);}
.org-box.lit{border-color:color-mix(in srgb,var(--info) 38%,var(--border));background:color-mix(in srgb,var(--info) 4%,var(--card));}
.org-box.fig{
  border-color:color-mix(in srgb,var(--accent) 50%,var(--border));
  background:color-mix(in srgb,var(--accent) 7%,var(--card));
}
.org-arrow{
  align-self:center;font-size:1.4rem;color:var(--accent);font-weight:800;
  animation:arrow-nudge 1.6s ease-in-out infinite;
}
@keyframes arrow-nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(5px)}}

/* visual grid & wheel */
.vis-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(106px,1fr));gap:12px;}
.vis-cell{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  padding:14px 10px;text-align:center;
  animation:cell-pop .4s var(--ease-out) both;cursor:pointer;
  transition:all var(--transition);box-shadow:var(--shadow-sm);
}
.vis-cell:hover{transform:translateY(-4px);border-color:var(--accent);box-shadow:var(--shadow-md);}
.vis-cell:active{transform:scale(.97);}
.vis-cell b{display:block;font-size:1.22rem;color:var(--text-bright);font-family:var(--font-serif);font-weight:700;}
.vis-cell small{display:block;font-size:.66rem;color:var(--accent-deep);margin-top:3px;}
.vis-cell span{display:block;font-size:.61rem;color:var(--text-dim);margin-top:4px;line-height:1.4;}
.vis-cell.irr,.wheel-cell.irr{
  border-color:color-mix(in srgb,var(--again) 45%,var(--border));
  background:color-mix(in srgb,var(--again) 6%,var(--card));
}
.vis-cell.irr::after,.wheel-cell.irr::after{
  content:"irregular";display:block;font-size:.55rem;color:var(--again);
  margin-top:4px;letter-spacing:.6px;font-weight:700;text-transform:uppercase;
}
.vis-cell.chosen,.wheel-cell.chosen{
  border-color:var(--accent);
  box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 30%,transparent),var(--shadow-md);
}
.wheel{position:relative;height:320px;}
.wheel::before{
  content:"";position:absolute;left:50%;top:50%;width:74%;height:74%;
  transform:translate(-50%,-50%);
  border:1.5px dashed color-mix(in srgb,var(--accent) 30%,transparent);
  border-radius:50%;pointer-events:none;
  animation:spin-slow 60s linear infinite;
}
@keyframes spin-slow{to{transform:translate(-50%,-50%) rotate(360deg)}}
.wheel-hub{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:94px;height:94px;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,color-mix(in srgb,var(--accent) 12%,var(--card)),var(--card) 70%);
  border:2px solid var(--accent);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-serif);font-size:1.12rem;font-weight:800;color:var(--text-bright);
  z-index:2;text-align:center;
  box-shadow:0 6px 22px color-mix(in srgb,var(--accent) 25%,transparent),0 0 0 6px color-mix(in srgb,var(--accent) 8%,transparent);
}
.wheel-cell{
  position:absolute;transform:translate(-50%,-50%);
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  padding:9px 11px;text-align:center;cursor:pointer;z-index:1;min-width:76px;
  animation:cell-pop .4s var(--ease-out) both;
  transition:all var(--transition);box-shadow:var(--shadow-sm);
}
.wheel-cell:hover{transform:translate(-50%,-50%) scale(1.08);z-index:3;border-color:var(--accent);box-shadow:var(--shadow-md);}
.wheel-cell b{display:block;font-size:.98rem;color:var(--text-bright);font-family:var(--font-serif);font-weight:700;}
.wheel-cell small{display:block;font-size:.61rem;color:var(--accent-deep);}
.vis-detail{
  margin-top:14px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  padding:14px;text-align:left;animation:card-enter .32s var(--ease-out);
}
.vis-detail-inner b{font-family:var(--font-serif);font-size:1.2rem;color:var(--text-bright);}
.vis-detail-inner p{font-size:.82rem;color:var(--text);margin-top:6px;line-height:1.6;}
.vis-irr-note{
  margin-top:8px;font-size:.73rem;color:var(--again);
  background:color-mix(in srgb,var(--again) 7%,transparent);
  border:1px solid color-mix(in srgb,var(--again) 26%,transparent);
  border-radius:var(--radius-sm);padding:6px 8px;
}
.vis-close{margin-top:10px;}

/* animate / array walk */
.anim-stage{
  text-align:center;padding:24px 14px;cursor:pointer;
  background:
    radial-gradient(280px 140px at 50% 0%,color-mix(in srgb,var(--accent) 6%,transparent),transparent 70%),
    var(--card);
  border:1px solid var(--border);border-radius:var(--radius);
  animation:stage-swap .45s var(--ease-out) both;box-shadow:var(--shadow-sm);position:relative;
  transition:border-color var(--transition);
}
.anim-stage:hover{border-color:color-mix(in srgb,var(--accent) 40%,var(--border));}
.anim-big{font-size:3.1rem;line-height:1.2;min-height:1.2em;font-family:var(--font-serif);font-weight:900;color:var(--accent-deep);}
.anim-jp{font-family:var(--font-serif);font-size:1.85rem;color:var(--text-bright);margin-top:8px;font-weight:700;}
.anim-en{font-size:.85rem;color:var(--text-dim);margin-top:6px;}
.anim-controls{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:16px;flex-wrap:wrap;}
.anim-btn{
  min-width:44px;height:40px;padding:0 12px;border-radius:var(--radius-sm);
  border:1px solid var(--border);background:var(--card);font-size:.95rem;
  color:var(--text);transition:all var(--transition);font-weight:600;
  display:inline-flex;align-items:center;justify-content:center;
}
.anim-btn:hover{border-color:var(--accent);color:var(--accent-deep);transform:translateY(-2px);box-shadow:var(--shadow-sm);}
.anim-btn:active{transform:scale(.94);}
.anim-btn.play{
  width:64px;background:var(--text-bright);color:var(--card);border-color:transparent;font-weight:800;font-size:.76rem;letter-spacing:.04em;
}
.anim-btn.play:hover{background:var(--action);color:#fff;box-shadow:0 5px 14px color-mix(in srgb,var(--action) 38%,transparent);}
.anim-dots{display:flex;gap:6px;margin-left:8px;}
.anim-dots i{
  width:9px;height:9px;border-radius:50%;background:var(--border);cursor:pointer;
  transition:all var(--transition);
}
.anim-dots i:hover{transform:scale(1.35);background:var(--text-dim);}
.anim-dots i.on{
  background:var(--accent);transform:scale(1.35);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 20%,transparent);
}
.anim-count{font-size:.66rem;color:var(--text-dim);margin-left:4px;font-weight:800;font-variant-numeric:tabular-nums;}
.anim-progress{
  position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--inset);
  border-top:1px solid var(--border);overflow:hidden;border-radius:0 0 11px 11px;
}
.anim-progress i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--action));transition:width .35s var(--ease-out);}

.arr-strip{
  display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-bottom:16px;
}
@media (max-width:640px){
  .arr-strip{
    flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;
    scroll-snap-type:x proximity;padding:6px 2px 10px;-webkit-overflow-scrolling:touch;
  }
  .arr-cell{scroll-snap-align:center;}
}
.arr-cell{
  position:relative;background:var(--card);border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:11px 12px 9px;text-align:center;min-width:86px;cursor:pointer;
  transition:all .28s var(--ease-spring);box-shadow:var(--shadow-sm);
}
.arr-cell:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--accent) 45%,var(--border));}
.arr-cell b{display:block;font-family:var(--font-serif);font-size:1rem;color:var(--text-bright);font-weight:700;}
.arr-cell small{display:block;font-size:.61rem;color:var(--accent-deep);margin-top:2px;}
.arr-cell .arr-idx{
  position:absolute;top:-8px;left:-8px;width:19px;height:19px;border-radius:50%;background:var(--inset);
  border:1px solid var(--border);font-size:.56rem;color:var(--text-dim);
  display:inline-flex;align-items:center;justify-content:center;font-weight:700;
}
.arr-cell .arr-arrow{
  position:absolute;top:50%;right:-14px;transform:translateY(-50%);
  color:var(--border-strong);font-weight:800;font-size:.9rem;z-index:1;transition:color .2s;
}
.arr-cell .arr-arrow.lit{color:var(--accent);}
.arr-cell.active{
  border-color:var(--accent);
  background:color-mix(in srgb,var(--accent) 9%,var(--card));
  transform:translateY(-5px) scale(1.07);
  box-shadow:0 10px 24px color-mix(in srgb,var(--accent) 26%,transparent);
  z-index:2;
}
.arr-cell.active b{color:var(--accent-deep);}
.arr-cell.passed{opacity:.5;}
.arr-cell.irr.active{border-color:var(--again);background:color-mix(in srgb,var(--again) 9%,var(--card));box-shadow:0 10px 24px color-mix(in srgb,var(--again) 24%,transparent);}
.arr-cell.irr.active b{color:var(--again);}
.arr-irr{font-size:.56rem;color:var(--again);margin-top:4px;display:block;text-transform:uppercase;letter-spacing:.6px;font-weight:700;}
.arr-detail{
  text-align:center;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  padding:16px;cursor:pointer;position:relative;padding-bottom:20px;
  animation:stage-swap .45s var(--ease-out) both;box-shadow:var(--shadow-sm);
  transition:border-color var(--transition);
}
.arr-detail:hover{border-color:color-mix(in srgb,var(--accent) 40%,var(--border));}
.arr-detail b{font-family:var(--font-serif);font-size:1.5rem;color:var(--accent-deep);font-weight:900;}
.arr-detail .rd{margin-left:10px;font-size:.85rem;}
.arr-detail p{font-size:.85rem;color:var(--text);margin-top:6px;}
.arr-detail-irr{margin-top:8px;font-size:.73rem;color:var(--again);font-weight:600;}

/* tree */
.tree-root{
  width:fit-content;max-width:100%;margin:0 auto;cursor:pointer;
  background:linear-gradient(160deg,color-mix(in srgb,var(--accent-green) 10%,var(--card)),var(--card) 70%);
  border:2px solid var(--accent-green);
  border-radius:var(--radius);padding:13px 26px;text-align:center;
  animation:cell-pop .4s var(--ease-out) both;
  box-shadow:0 4px 16px color-mix(in srgb,var(--accent-green) 18%,transparent);
  transition:all var(--transition);
}
.tree-root:hover{transform:translateY(-3px);box-shadow:0 10px 26px color-mix(in srgb,var(--accent-green) 26%,transparent);}
.tree-root b{display:block;font-family:var(--font-serif);font-size:1.3rem;color:var(--text-bright);font-weight:800;}
.tree-root span{display:block;font-size:.68rem;color:var(--text-dim);margin-top:2px;}
.tree-branches{list-style:none;margin:0;padding:0;}
.tree-branches::before{content:"";display:block;width:2px;height:18px;background:linear-gradient(180deg,var(--accent-green),var(--border));margin:0 auto;}
.tree-branch{position:relative;padding:10px 0 10px 26px;margin-left:20px;border-left:2px solid var(--border);text-align:left;}
.tree-branch:last-child{border-left-color:transparent;}
.tree-branch::before{content:"";position:absolute;left:0;top:20px;width:20px;height:2px;background:var(--border);}
.tree-label{font-size:.72rem;font-weight:800;color:var(--accent-green);letter-spacing:.8px;text-transform:uppercase;margin-bottom:8px;}
.tree-nodes{display:flex;gap:8px;flex-wrap:wrap;}
.tree-node{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:9px 13px;text-align:center;cursor:pointer;
  animation:cell-pop .4s var(--ease-out) both;
  transition:all var(--transition);box-shadow:var(--shadow-sm);
}
.tree-node:hover{border-color:var(--accent);transform:translateY(-3px) scale(1.03);box-shadow:var(--shadow-md);}
.tree-node b{display:block;font-family:var(--font-serif);font-size:.98rem;color:var(--text-bright);font-weight:700;}
.tree-node small{display:block;font-size:.63rem;color:var(--accent-deep);}
.tree-node span{display:block;font-size:.61rem;color:var(--text-dim);margin-top:2px;}

/* graph */
.graph-canvas{position:relative;width:100%;max-width:440px;aspect-ratio:1/1;margin:0 auto;height:auto;}
@supports not (aspect-ratio:1){.graph-canvas{height:340px;}}
.graph-canvas svg{position:absolute;inset:0;width:100%;height:100%;}
.graph-canvas line{stroke:var(--border-strong);stroke-width:1.6;vector-effect:non-scaling-stroke;transition:stroke var(--transition);}
.graph-canvas:hover line{stroke:color-mix(in srgb,var(--accent) 45%,var(--border));}
.ghub{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  background:var(--card);border:2px solid var(--info);border-radius:var(--radius);
  padding:12px 18px;text-align:center;z-index:2;box-shadow:var(--shadow-md);
}
.ghub b{display:block;font-family:var(--font-serif);font-size:1.22rem;color:var(--text-bright);font-weight:800;}
.ghub span{display:block;font-size:.62rem;color:var(--text-dim);}
.gnode{
  position:absolute;transform:translate(-50%,-50%);
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  padding:8px 11px;text-align:center;z-index:1;cursor:pointer;
  animation:cell-pop .4s var(--ease-out) both;
  transition:all var(--transition);box-shadow:var(--shadow-sm);
}
.gnode:hover{border-color:var(--accent);transform:translate(-50%,-50%) scale(1.07);box-shadow:var(--shadow-md);z-index:3;}
.gnode b{display:block;font-family:var(--font-serif);font-size:.93rem;color:var(--text-bright);font-weight:700;}
.gnode small{display:block;font-size:.58rem;color:var(--accent-deep);}
.gnode span{display:block;font-size:.56rem;color:var(--text-dim);max-width:112px;margin:2px auto 0;line-height:1.35;}

/* flash-reveal */
.fmt-flash .flash-stage{display:flex;align-items:center;justify-content:center;padding:10px;}
.flash-card{
  width:340px;max-width:100%;min-height:180px;position:relative;cursor:pointer;
  perspective:900px;transform-style:preserve-3d;
}
.flash-face{
  position:absolute;inset:0;background:var(--card);border:1px solid var(--border-strong);
  border-radius:var(--radius-lg);padding:24px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  transition:transform .55s cubic-bezier(.16,1,.3,1),opacity .25s,box-shadow .25s;
  box-shadow:var(--shadow-md);
}
.flash-front{transform:rotateY(0);}
.flash-back{transform:rotateY(180deg);background:color-mix(in srgb,var(--accent) 4%,var(--card));}
.flash-card.flipped .flash-front{transform:rotateY(-180deg);}
.flash-card.flipped .flash-back{transform:rotateY(0);}
.flash-card:not(.flipped) .flash-back{pointer-events:none;}
.flash-card:hover .flash-face{box-shadow:var(--shadow-lg);}
.flash-jp{font-family:var(--font-serif);font-size:1.8rem;color:var(--text-bright);font-weight:800;}
.flash-reading{font-size:.92rem;color:var(--accent-deep);margin-bottom:6px;font-weight:600;}
.flash-en{font-size:.9rem;color:var(--text);line-height:1.6;}
.flash-hint{
  margin-top:10px;font-size:.71rem;color:var(--text-dim);background:var(--inset);
  border:1px solid var(--border);border-radius:var(--radius-sm);padding:7px 10px;
}
.flash-tap{
  margin-top:12px;font-size:.6rem;color:var(--text-dim);letter-spacing:1.6px;
  text-transform:uppercase;opacity:.6;font-weight:700;
}
.flash-say{position:absolute;top:10px;right:10px;}

/* spot the difference */
.fmt-spot .spot-pair{
  display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:stretch;margin:14px 0;
}
@media (max-width:560px){
  .fmt-spot .spot-pair{grid-template-columns:1fr;}
  .spot-vs{transform:rotate(90deg);}
}
.spot-card{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  padding:18px 14px 16px;text-align:center;cursor:pointer;position:relative;
  transition:all var(--transition);box-shadow:var(--shadow-sm);
}
.spot-card:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:var(--shadow-md);}
.spot-card.picked{
  border-color:var(--accent);
  background:color-mix(in srgb,var(--accent) 7%,var(--card));
  box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 28%,transparent);
}
.spot-label{
  position:absolute;top:8px;left:10px;font-size:.6rem;font-weight:800;color:var(--text-dim);
  background:var(--inset);border:1px solid var(--border);border-radius:999px;padding:3px 9px;
}
.spot-jp{font-family:var(--font-serif);font-size:1.35rem;color:var(--text-bright);margin-top:8px;font-weight:800;}
.spot-en{font-size:.82rem;color:var(--text);margin-top:6px;line-height:1.55;transition:filter .4s;}
.spot-en.blurred{filter:blur(5px);user-select:none;}
.spot-vs{align-self:center;font-weight:900;color:var(--accent-deep);font-size:.88rem;letter-spacing:2.5px;}
.spot-diff{
  margin-top:12px;text-align:left;font-size:.86rem;line-height:1.65;color:var(--text);
  background:color-mix(in srgb,var(--accent-green) 7%,var(--card));
  border:1px solid color-mix(in srgb,var(--accent-green) 28%,var(--border));
  border-radius:var(--radius);padding:13px 16px;
  animation:card-enter .32s var(--ease-out);
}
.spot-diff small{color:var(--text-dim);}
.spot-drill-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;width:100%;margin-top:14px;}
.spot-drill-cell{
  padding:16px 12px;border-radius:var(--radius);border:1px solid var(--border);background:var(--card);
  text-align:center;transition:all var(--transition);
  display:flex;flex-direction:column;gap:6px;align-items:center;min-height:92px;justify-content:center;
  box-shadow:var(--shadow-sm);
}
.spot-drill-cell:hover:not(:disabled){border-color:var(--accent);transform:translateY(-3px);box-shadow:var(--shadow-md);}
.spot-drill-cell b{font-family:var(--font-serif);font-size:1.15rem;color:var(--text-bright);font-weight:800;}
.spot-drill-cell small{font-size:.66rem;color:var(--accent-deep);}
.spot-drill-cell span{font-size:.77rem;color:var(--text-dim);line-height:1.4;}
.spot-drill-cell.correct{border-color:var(--good);background:color-mix(in srgb,var(--good) 10%,var(--card));color:var(--good);animation:pop-correct .35s var(--ease-spring);}
.spot-drill-cell.wrong{border-color:var(--again);background:color-mix(in srgb,var(--again) 8%,var(--card));color:var(--again);animation:shake .32s ease both;}
.spot-drill-say{
  font-size:.85rem;color:var(--text);text-align:center;background:var(--inset);
  border:1px solid var(--border);border-radius:var(--radius-sm);padding:10px;
}


/* ── 18. Stats ─────────────────────────────────────────────────────────── */
.stat-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(155px,1fr));gap:14px;margin-bottom:22px;
  animation:rise .45s var(--ease-out) both;
}
.stat-grid + .stat-grid{animation-delay:.08s;}
.stat-box{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  padding:20px 14px;text-align:center;box-shadow:var(--shadow-sm);
  transition:all var(--transition);position:relative;overflow:hidden;
}
.stat-box::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
  background:linear-gradient(90deg,var(--accent),var(--action));
  transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease-out);
}
.stat-box:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:color-mix(in srgb,var(--accent) 40%,var(--border));}
.stat-box:hover::after{transform:scaleX(1);}
.stat-box b{display:block;font-size:1.85rem;color:var(--text-bright);font-variant-numeric:tabular-nums;line-height:1.25;font-weight:800;}
.stat-box span{font-size:.72rem;color:var(--text-dim);font-weight:600;letter-spacing:.03em;}
.heatmap{display:flex;gap:3px;flex-wrap:wrap;margin-top:12px;}
.heatmap i{
  width:12px;height:12px;border-radius:3.5px;background:var(--inset);
  border:1px solid color-mix(in srgb,var(--border) 60%,transparent);
  transition:transform .15s var(--ease-out),box-shadow .15s;
}
.heatmap i:hover{transform:scale(1.35);box-shadow:var(--shadow-sm);position:relative;z-index:2;}
.heatmap i.l1{background:color-mix(in srgb,var(--accent) 30%,var(--card));}
.heatmap i.l2{background:color-mix(in srgb,var(--accent) 55%,var(--card));}
.heatmap i.l3{background:color-mix(in srgb,var(--accent) 80%,var(--card));}
.heatmap i.l4{background:var(--accent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--text) 15%,transparent);}
.catbar-row{display:flex;align-items:center;gap:12px;padding:11px 6px;transition:all var(--transition);border-radius:var(--radius-sm);}
.catbar-row:hover{background:var(--card-hover);}
.catbar-row .cl{flex:0 0 150px;font-size:.83rem;color:var(--text);display:flex;gap:8px;align-items:center;font-weight:600;}
.catbar-row .ci{
  width:24px;height:24px;border-radius:7px;display:inline-flex;align-items:center;justify-content:center;
  background:var(--inset);border:1px solid var(--border);
  font-family:var(--font-serif);font-size:.72rem;font-weight:700;color:var(--accent-deep);
}
.catbar-track.big{height:12px;margin-bottom:18px;}
.catbar-row .cv{flex:0 0 110px;text-align:right;font-size:.72rem;color:var(--text-dim);font-variant-numeric:tabular-nums;}
.catbar-row .cv b{color:var(--text-bright);}
.weak-tag{
  display:inline-block;font-size:.7rem;font-weight:600;padding:3px 9px;border-radius:999px;margin:3px 4px 0 0;
  background:color-mix(in srgb,var(--again) 8%,transparent);
  border:1px solid color-mix(in srgb,var(--again) 28%,transparent);color:var(--again);
  transition:all var(--transition);
}
.weak-tag:hover{transform:translateY(-1px);box-shadow:var(--shadow-sm);}

/* ── 19. Toast / empty / confetti ──────────────────────────────────────── */
.toast{
  position:fixed;bottom:26px;left:50%;transform:translateX(-50%);z-index:80;
  background:color-mix(in srgb,var(--text-bright) 94%,var(--bg));
  color:var(--bg);
  border:1px solid color-mix(in srgb,var(--accent) 60%,transparent);
  padding:13px 24px;border-radius:999px;font-size:.84rem;font-weight:600;
  box-shadow:0 10px 34px rgba(0,0,0,.28);
  animation:toast-slide .38s cubic-bezier(.16,1,.3,1);
  transition:opacity .3s ease,transform .3s ease;
  max-width:min(92vw,420px);text-align:center;
}
.toast::before{content:"◆";color:var(--accent);margin-right:8px;font-size:.7em;vertical-align:1px;}
.toast.out{opacity:0;transform:translateX(-50%) translateY(12px);}
.toast.success{border-color:var(--good);}
.toast.success::before{content:"✓";color:var(--good);}
.toast.error{border-color:var(--again);}
.toast.error::before{content:"✕";color:var(--again);}
@keyframes toast-slide{from{opacity:0;transform:translateX(-50%) translateY(18px) scale(.95)}to{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}}

.empty{text-align:center;padding:56px 20px;color:var(--text-dim);}
.empty::before{content:"空";display:block;font-family:var(--font-serif);font-size:3rem;font-weight:900;opacity:.18;margin-bottom:8px;}

.confetti-host{position:fixed;inset:0;pointer-events:none;z-index:90;overflow:hidden;}
.confetti-host span{
  position:absolute;top:-14px;display:block;border-radius:2px;
  animation:confetti-fall 1.35s cubic-bezier(.16,1,.3,1) both;
}
@keyframes confetti-fall{
  0%{transform:translateY(-14px) rotate(0) scale(.9);opacity:0}
  10%{opacity:1}
  100%{transform:translateY(108vh) rotate(380deg) scale(1);opacity:0}
}

/* ── 20. Footer ────────────────────────────────────────────────────────── */
.site-footer{
  margin-top:clamp(28px,5vw,48px);
  border-top:1px solid var(--border);
  background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--inset) 55%,transparent));
  position:relative;z-index:1;
}
.site-footer::before{
  content:"";display:block;height:14px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='14' viewBox='0 0 56 14'%3E%3Cg fill='none' stroke='%23a67c3a' stroke-opacity='0.28'%3E%3Ccircle cx='0' cy='14' r='11'/%3E%3Ccircle cx='0' cy='14' r='6'/%3E%3Ccircle cx='28' cy='14' r='11'/%3E%3Ccircle cx='28' cy='14' r='6'/%3E%3Ccircle cx='56' cy='14' r='11'/%3E%3Ccircle cx='56' cy='14' r='6'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat:repeat-x;background-position:center bottom;
  opacity:.8;margin-bottom:18px;
}
.foot-inner{
  max-width:1180px;margin:0 auto;padding:6px clamp(14px,3vw,28px) 30px;
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;justify-content:space-between;
}
.foot-brand{display:flex;align-items:center;gap:10px;font-family:var(--font-serif);font-weight:800;color:var(--text-bright);font-size:.95rem;}
.foot-brand .foot-mark{
  width:30px;height:30px;border-radius:8px;background:var(--text-bright);color:var(--card);
  display:inline-flex;align-items:center;justify-content:center;font-size:.85rem;font-weight:900;
}
.foot-brand small{font-family:var(--font-sans);font-weight:500;color:var(--text-dim);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;}
.foot-links{display:flex;gap:4px;flex-wrap:wrap;}
.foot-links a{
  color:var(--text-dim);text-decoration:none;font-size:.76rem;font-weight:600;
  padding:6px 10px;border-radius:var(--radius-sm);transition:all var(--transition);
}
.foot-links a:hover{color:var(--text-bright);background:var(--card-hover);}
.foot-note{font-size:.7rem;color:var(--text-dim);font-style:italic;}

/* ── 21. Back-to-top (injected by essentials-ui.js) ────────────────────── */
.to-top{
  position:fixed;right:18px;bottom:18px;z-index:70;
  width:44px;height:44px;border-radius:50%;
  background:var(--text-bright);color:var(--card);
  display:flex;align-items:center;justify-content:center;
  box-shadow:var(--shadow-lg);
  opacity:0;transform:translateY(16px) scale(.85);pointer-events:none;
  transition:all .3s var(--ease-spring);
}
.to-top.show{opacity:1;transform:translateY(0) scale(1);pointer-events:auto;}
.to-top:hover{background:var(--action);color:#fff;transform:translateY(-3px);}

/* ── 22. Scroll-reveal (applied by essentials-ui.js) ───────────────────── */
.io-hide{opacity:0;transform:translateY(18px);}
.io-in{opacity:1;transform:none;transition:opacity .55s var(--ease-out),transform .55s var(--ease-out);}

/* ── 23. Keyframes ─────────────────────────────────────────────────────── */
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes pop-in{from{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:none}}
@keyframes cell-pop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}
@keyframes stage-swap{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes card-enter{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
@keyframes shake{10%,90%{transform:translateX(-1px)}20%,80%{transform:translateX(2px)}30%,50%,70%{transform:translateX(-4px)}40%,60%{transform:translateX(4px)}}

/* ── 24. Responsive ────────────────────────────────────────────────────── */
@media (max-width:1024px){
  .grid2{grid-template-columns:minmax(0,1.35fr) minmax(280px,1fr);}
}
@media (max-width:980px){
  .grid2{grid-template-columns:1fr;}
  .start-panel{position:static;}
  .catbar-row .cl{flex-basis:120px;}
}
@media (max-width:640px){
  .app{padding:14px 12px 48px;}
  .topbar{top:8px;padding:10px 12px;gap:8px;border-radius:var(--radius);}
  .brand{font-size:1.1rem;padding-left:10px;}
  .brand small{font-size:.55rem;}
  .nav{gap:3px;width:100%;order:3;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px;}
  .nav::-webkit-scrollbar{display:none;}
  .nav button{padding:7px 11px;font-size:.74rem;flex:0 0 auto;}
  .home-link{padding:7px 9px;font-size:.74rem;}
  .theme-toggle{width:32px;height:32px;flex:0 0 auto;}
  .cat-grid{grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:9px;}
  .cat-cell{padding:12px 10px 13px;}
  .cat-cell .ci{width:34px;height:34px;font-size:1.05rem;}
  .cat-cell .cn{font-size:.8rem;}
  .cat-cell .cmeta{font-size:.58rem;gap:7px;}
  .cat-cell .cfmt{font-size:.57rem;}
  .chip{padding:6px 12px;min-height:36px;}
  .mode-btn{min-width:calc(50% - 4px);}
  .totbox b{font-size:1.35rem;}
  .study-top{gap:8px;flex-wrap:wrap;}
  .study-ring,.prog-ring{width:32px;height:32px;flex-basis:32px;}
  .study-counts .est{display:none;}
  .est-badge{display:none;}
  .lesson-card{padding:24px 15px;}
  .lesson-card::after{font-size:6rem;right:-10px;bottom:-24px;}
  .lesson-term{margin:20px 0 4px;}
  .fc-main{font-size:clamp(1.6rem,9vw,2.3rem);}
  .fc-struct{font-size:.85rem;}
  .lesson-hook{font-size:.8rem;}
  .fc-badge{max-width:calc(100% - 64px);font-size:.58rem;}
  .fc-tts{width:32px;height:32px;top:10px;right:10px;}
  .core-row{padding:11px 12px;gap:10px;}
  .core-tag{flex-basis:30px;width:30px;height:30px;font-size:.64rem;border-radius:8px;}
  .core-row b{font-size:.62rem;}
  .core-row p{font-size:.83rem;}
  .fmt{padding:14px;}
  .fmt-heading{font-size:.84rem;}
  .wheel{height:250px;}
  .wheel::before{width:82%;height:82%;}
  .wheel-hub{width:72px;height:72px;font-size:.92rem;}
  .wheel-cell{min-width:62px;padding:6px 8px;}
  .wheel-cell b{font-size:.84rem;}
  .vis-grid{grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:8px;}
  .vis-cell{padding:10px 6px;}
  .vis-cell b{font-size:1rem;}
  .signs{grid-template-columns:1fr;}
  .sign-board{font-size:1.05rem;}
  .stat-grid{grid-template-columns:repeat(2,1fr);}
  .stat-box b{font-size:1.5rem;}
  .catbar-row{flex-wrap:wrap;gap:8px;}
  .catbar-row .cl{flex-basis:100%;}
  .catbar-row .cv{flex-basis:100%;text-align:left;}
  .catbar-row .catbar-track{flex-basis:100%;}
  .know-row{grid-template-columns:1fr;}
  .anim-big{font-size:2.3rem;}
  .anim-jp{font-size:1.4rem;}
  .anim-btn{min-width:38px;height:36px;padding:0 9px;font-size:.85rem;}
  .anim-btn.play{width:56px;font-size:.72rem;}
  .anim-dots i{width:7px;height:7px;}
  .bubble{max-width:92%;}
  .cmp{font-size:.76rem;}
  .cmp td{padding:8px;}
  .cmp td.pt{width:auto;}
  .story-line{padding:11px 12px;}
  .story-line .jp{font-size:.94rem;}
  .flash-card{min-height:150px;}
  .flash-face{padding:16px;}
  .flash-jp{font-size:1.4rem;}
  .spot-card{padding:14px 10px;}
  .spot-jp{font-size:1.1rem;}
  .spot-drill-grid{grid-template-columns:repeat(2,1fr);}
  .arr-cell{min-width:64px;padding:9px 7px;}
  .arr-cell b{font-size:.85rem;}
  .arr-detail b{font-size:1.2rem;}
  .tree-root{padding:9px 16px;}
  .tree-root b{font-size:1.05rem;}
  .tree-branch{padding:8px 0 8px 18px;margin-left:12px;}
  .tree-node{padding:6px 8px;}
  .tree-node b{font-size:.85rem;}
  .graph-canvas{max-width:300px;}
  .gnode{padding:5px 7px;}
  .gnode b{font-size:.8rem;}
  .gnode span{font-size:.52rem;}
  .kbd-hint{font-size:.6rem;}
  .kbd-hint kbd{font-size:.6rem;padding:1px 5px;}
  .opt-btn{padding:12px 13px;font-size:.87rem;}
  .quiz-q{font-size:1.12rem;}
  .session-done{padding:40px 16px;}
  .session-done .big{font-size:2.4rem;}
  .btn-row{gap:8px;}
  .btn-ghost{font-size:.78rem;padding:9px 12px;}
  .didyou{flex-direction:column;gap:8px;}
  .lvl-head{font-size:.7rem;margin:14px 0 6px;}
  .lesson-row{padding:11px 12px;}
  .lesson-row .lr-main b{font-size:.92rem;}
  .lesson-row .lr-state{width:24px;height:24px;flex-basis:24px;font-size:.66rem;}
  .lesson-row .lr-fmt{width:26px;height:26px;flex-basis:26px;font-size:.66rem;}
  .cat-head-title{font-size:1.25rem;}
  .crumb{font-size:.78rem;}
  .memory-aids{margin:12px 0 10px;}
  .mem-toggle{padding:10px 12px;}
  .mem-panel{padding:10px 12px;}
  .rule-card{padding:12px;gap:10px;}
  .rule-n{flex-basis:26px;width:26px;height:26px;font-size:.72rem;}
  .rule-t{font-size:.85rem;}
  .rule-d{font-size:.78rem;}
  .jrn-stop{gap:10px;}
  .jrn-pin{flex-basis:26px;width:26px;height:26px;font-size:.66rem;}
  .jrn-body{padding:8px 10px;}
  .jrn-body b{font-size:.9rem;}
  .org-stage{gap:8px;}
  .org-box{padding:12px;min-width:100px;}
  .org-box b{font-size:.9rem;}
  .org-arrow{font-size:1.1rem;}
  .anim-controls{gap:8px;}
  .anim-count{font-size:.62rem;}
  .tl-step{gap:10px;padding-bottom:12px;}
  .tl-dot{flex-basis:26px;width:26px;height:26px;font-size:.66rem;}
  .tl-body{padding:8px 10px;}
  .tl-body .jp{font-size:.9rem;}
  .formula{font-size:.92rem;padding:10px;}
  .pat td{padding:7px 8px;}
  .pat td.pj{font-size:.88rem;}
  .pat td.pt{font-size:.7rem;}
  .cmp th{padding:8px 6px;font-size:.74rem;}
  .cmp td{padding:7px 6px;}
  .cmp td.pt{font-size:.68rem;}
  .cmp th b{font-size:.88rem;}
  .spot-drill-cell{padding:12px 8px;min-height:76px;}
  .spot-drill-cell b{font-size:1rem;}
  .spot-drill-cell small{font-size:.62rem;}
  .spot-drill-cell span{font-size:.72rem;}
  .flash-reading{font-size:.82rem;}
  .flash-en{font-size:.82rem;}
  .flash-hint{font-size:.66rem;}
  .vis-detail{padding:10px;}
  .vis-detail-inner b{font-size:1rem;}
  .cmp-note-inner{font-size:.76rem;padding:8px 10px;}
  .quote-card .q-jp{font-size:1.05rem;}
  .to-top{right:14px;bottom:14px;width:40px;height:40px;}
}
@media (max-width:400px){
  .cat-grid{grid-template-columns:1fr 1fr;}
  .stat-grid{grid-template-columns:1fr 1fr;}
}

/* ── 25. Reduced motion ────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
  html{scroll-behavior:auto;}
}