/* Layout: one quiet 720px reading column on cool ledger paper. Space and single hairlines separate
   sections; only things you act on or look into get object styling: the next-lesson card, the
   figure "scenes" (a fading NumberPlane grid, as in Manim), quiz options and form controls.
   Manim's colors live in the figures and data; the page itself stays ink, paper and one teal. */
:root {
  /* paper and ink */
  --paper: #F2F4F3;
  --sheet: #FFFFFF;
  --ink: #121816;
  --ink-2: #3B4642;
  --muted: #69746F;
  --rule: #E0E5E2;
  --rule-strong: #C7D0CB;
  --node: #EBEFED;
  --grid: #E3E9E6;
  /* one accent: Manim's deep teal */
  --accent: #165E6C;
  --accent-ink: #FFFFFF;
  --accent-soft: #E1EDEF;
  /* study-note highlighter */
  --hl: #F2CF55;
  --hl-mark: #FAE6A0;
  --hl-soft: #FBF4DA;
  --hl-ink: #2B2408;
  /* meaning */
  --money: #A0692B;
  --up: #C8372D;
  --down: #2459C7;
  --ok: #2E7A4E;
  --ok-soft: #E4F1E8;
  --bad: #B23A31;
  --bad-soft: #F9E8E5;
  /* lesson kinds (거시·미시·적용) from Manim's blue, green, gold */
  --k-macro: #1C758A;
  --k-macro-soft: #E0EDF0;
  --k-micro: #4F7F3B;
  --k-micro-soft: #E5EEE0;
  --k-apply: #9C6A2E;
  --k-apply-soft: #F3EADD;
  --on-kind: #FFFFFF;
  /* Manim palette for figures and charts */
  --m-blue: #1C758A;
  --m-blue-soft: #DCEEF2;
  --m-green: #5E9148;
  --m-green-soft: #E5F0DF;
  --m-gold: #C78D46;
  --m-gold-soft: #F8ECDC;
  --m-purple: #644172;
  --m-red: #CF5044;
  --m-grey: #7B8781;
  --s1: #4F7F3B;
  --s2: #1C758A;
  --s3: #644172;
  --c-gov: #7B8781;
  --c-firm: #1C758A;
  --c-house: #5E9148;
  --scrim: rgba(18, 24, 22, 0.42);
  --shadow: 0 1px 2px rgba(18, 24, 22, 0.05), 0 6px 18px -8px rgba(18, 24, 22, 0.12);
  --shadow-lg: 0 1px 2px rgba(18, 24, 22, 0.05), 0 18px 40px -22px rgba(18, 24, 22, 0.28);
  /* type */
  --f-display: "Hahmlet", "Nanum Myeongjo", "AppleMyungjo", "Batang", serif;
  --f-body: "IBM Plex Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", system-ui, sans-serif;
  --f-mono: "IBM Plex Mono", "IBM Plex Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --fs-xs: 12px;
  --fs-sm: 13.5px;
  --fs-base: 16px;
  --fs-md: 18px;
  --fs-lg: 21px;
  --fs-xl: 27px;
  --fs-2xl: 32px;
  --bar-h: 58px;
  --tab-h: 62px;
  --nav-h: 50px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0D1210;
    --sheet: #141A18;
    --ink: #E5EBE8;
    --ink-2: #BFCAC5;
    --muted: #8D9A94;
    --rule: #232C29;
    --rule-strong: #34403B;
    --node: #1A2220;
    --grid: #1C2623;
    --accent: #6CC6D8;
    --accent-ink: #062027;
    --accent-soft: #14303A;
    --hl: #E2C04B;
    --hl-mark: #4D4417;
    --hl-soft: #262312;
    --hl-ink: #F3E7BC;
    --money: #EDA54B;
    --up: #FF6B5F;
    --down: #78A2FF;
    --ok: #5FCB8E;
    --ok-soft: #13301F;
    --bad: #FF8077;
    --bad-soft: #391D1A;
    --k-macro: #58C4DD;
    --k-macro-soft: #15303A;
    --k-micro: #83C167;
    --k-micro-soft: #1A2C17;
    --k-apply: #E3A75E;
    --k-apply-soft: #33271A;
    --on-kind: #0D1210;
    --m-blue: #58C4DD;
    --m-blue-soft: #133039;
    --m-green: #83C167;
    --m-green-soft: #1B2E16;
    --m-gold: #F0AC5F;
    --m-gold-soft: #3A2A15;
    --m-purple: #9A72AC;
    --m-red: #FC6255;
    --m-grey: #A3B3AB;
    --s1: #83C167;
    --s2: #58C4DD;
    --s3: #9A72AC;
    --c-gov: #A3B3AB;
    --c-firm: #58C4DD;
    --c-house: #83C167;
    --scrim: rgba(0, 0, 0, 0.6);
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 20px -10px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 1px 2px rgba(0, 0, 0, 0.4), 0 20px 44px -24px rgba(0, 0, 0, 0.7);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #0D1210;
  --sheet: #141A18;
  --ink: #E5EBE8;
  --ink-2: #BFCAC5;
  --muted: #8D9A94;
  --rule: #232C29;
  --rule-strong: #34403B;
  --node: #1A2220;
  --grid: #1C2623;
  --accent: #6CC6D8;
  --accent-ink: #062027;
  --accent-soft: #14303A;
  --hl: #E2C04B;
  --hl-mark: #4D4417;
  --hl-soft: #262312;
  --hl-ink: #F3E7BC;
  --money: #EDA54B;
  --up: #FF6B5F;
  --down: #78A2FF;
  --ok: #5FCB8E;
  --ok-soft: #13301F;
  --bad: #FF8077;
  --bad-soft: #391D1A;
  --k-macro: #58C4DD;
  --k-macro-soft: #15303A;
  --k-micro: #83C167;
  --k-micro-soft: #1A2C17;
  --k-apply: #E3A75E;
  --k-apply-soft: #33271A;
  --on-kind: #0D1210;
  --m-blue: #58C4DD;
  --m-blue-soft: #133039;
  --m-green: #83C167;
  --m-green-soft: #1B2E16;
  --m-gold: #F0AC5F;
  --m-gold-soft: #3A2A15;
  --m-purple: #9A72AC;
  --m-red: #FC6255;
  --m-grey: #A3B3AB;
  --s1: #83C167;
  --s2: #58C4DD;
  --s3: #9A72AC;
  --c-gov: #A3B3AB;
  --c-firm: #58C4DD;
  --c-house: #83C167;
  --scrim: rgba(0, 0, 0, 0.6);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 20px -10px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 1px 2px rgba(0, 0, 0, 0.4), 0 20px 44px -24px rgba(0, 0, 0, 0.7);
  color-scheme: dark;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(env(safe-area-inset-top, 0px) + var(--bar-h) + 16px);
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: var(--fs-base);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto;
  height: env(safe-area-inset-top, 0px);
  z-index: 30;
  background: var(--paper);
}
a { color: var(--accent); text-underline-offset: 3px; }
strong, b { font-weight: 600; }
button, input, textarea, select { font: inherit; color: inherit; }
.mono { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
.sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
h1, h2, h3, h4 { text-wrap: balance; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

mark.hl {
  color: inherit;
  background-color: transparent;
  background-image: linear-gradient(transparent 56%, var(--hl-mark) 56%, var(--hl-mark) 92%, transparent 92%);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  padding: 0 0.1em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
mark.hit { color: inherit; background: var(--hl-soft); border-radius: 3px; padding: 0 1px; box-shadow: inset 0 -2px 0 var(--hl); }

/* ---------- top bar ---------- */
.bar {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 20;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .bar, .secnav, .tabs {
    background: color-mix(in srgb, var(--paper) 92%, transparent);
    -webkit-backdrop-filter: saturate(1.4) blur(14px);
    backdrop-filter: saturate(1.4) blur(14px);
  }
  .tabs { background: color-mix(in srgb, var(--sheet) 92%, transparent); }
}
.bar-in {
  max-width: 720px;
  margin: 0 auto;
  height: var(--bar-h);
  display: flex;
  align-items: center;
  gap: 12px;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.brand { display: flex; align-items: center; gap: 11px; min-width: 0; color: inherit; text-decoration: none; }
.brand svg { width: 30px; height: 30px; flex: none; }
.brand-mark { width: 30px; height: 30px; flex: none; display: block; border-radius: 8px; box-shadow: 0 1px 2px rgba(18, 24, 22, 0.2); }
.logo-sheet { fill: var(--sheet); stroke: var(--ink); stroke-width: 1.4; }
.logo-grid { fill: none; stroke: var(--rule-strong); stroke-width: 0.7; }
.logo-hl { fill: none; stroke: var(--hl); stroke-width: 6; stroke-linecap: round; opacity: 0.85; }
.logo-line { fill: none; stroke: var(--accent); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.logo-dot { fill: var(--up); transform-box: fill-box; transform-origin: center; }
.brand-text { display: grid; min-width: 0; line-height: 1.3; }
.brand-name { font-family: var(--f-display); font-weight: 600; font-size: 16.5px; letter-spacing: -0.01em; }
.brand-sub { font-size: var(--fs-xs); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-chip {
  margin-left: auto;
  font-size: var(--fs-xs);
  font-weight: 500;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--rule-strong);
  color: var(--ink-2);
  white-space: nowrap;
}

/* ---------- main column ---------- */
.view {
  max-width: 720px;
  margin: 0 auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  padding-block: 24px calc(var(--tab-h) + env(safe-area-inset-bottom, 0px) + 48px);
  outline: none;
  display: flex;
  flex-direction: column;
  gap: 34px;
}
.view > * { min-width: 0; }
.page-title { margin: 0; font-family: var(--f-display); font-size: var(--fs-xl); font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; }
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 16px; }
.lede { margin: 6px 0 0; color: var(--ink-2); font-size: 15px; line-height: 1.65; }
.sec { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.view > .sec:has(> .sec-h):not(:first-child) { border-top: 1px solid var(--rule); padding-top: 26px; }
.sec-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.sec-h h2 { margin: 0; font-family: var(--f-display); font-size: 19px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.35; }
.sec-h a.meta { text-decoration: none; }
.sec-h a.meta:hover { color: var(--accent); }
.eyebrow { margin: 0; font-family: var(--f-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.02em; color: var(--muted); line-height: 1.5; }
.meta { font-size: 12.5px; color: var(--muted); }
.hint { margin: 0; font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.65; }
.empty { margin: 0; padding: 18px 20px; border: 1px dashed var(--rule-strong); border-radius: 14px; color: var(--muted); font-size: 15px; }
.paper { background: var(--sheet); border: 1px solid var(--rule); border-radius: 16px; padding: 18px 20px; }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }

/* ---------- buttons, pills, segmented, chips ---------- */
.btn {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 9px 18px;
  border-radius: 12px;
  border: 1px solid transparent;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { background: color-mix(in srgb, var(--accent) 88%, var(--ink)); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--rule-strong); }
.btn-ghost:hover { border-color: var(--ink-2); }
.btn-text { background: none; border: 0; color: var(--accent); padding: 6px 2px; min-height: 0; font-weight: 600; }
.btn-text:hover { text-decoration: underline; }
.btn-sm { min-height: 36px; padding: 6px 14px; font-size: 14px; border-radius: 10px; }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.pill { display: inline-flex; align-items: center; gap: 4px; padding: 1px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; white-space: nowrap; line-height: 1.7; }
.pill.done { background: var(--ok-soft); color: var(--ok); }
.pill.ready { background: var(--accent-soft); color: var(--accent); }
.pill.wait { background: var(--node); color: var(--muted); }
.pill.over { background: var(--hl-soft); color: var(--hl-ink); box-shadow: inset 0 0 0 1px var(--hl); }
.pill.today { box-shadow: inset 0 0 0 1.5px var(--ink); color: var(--ink); }
.pill.retry { background: var(--bad-soft); color: var(--bad); }

.seg { display: inline-flex; padding: 3px; border-radius: 999px; border: 1px solid var(--rule-strong); margin: 0; }
.seg legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.seg label { position: relative; display: block; }
.seg input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.seg span { display: block; padding: 4px 14px; border-radius: 999px; font-size: 13.5px; color: var(--muted); white-space: nowrap; transition: background-color 0.15s ease, color 0.15s ease; }
.seg input:checked + span { background: var(--ink); color: var(--paper); font-weight: 600; }
.seg input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

.chips { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  appearance: none;
  flex: none;
  border: 1px solid var(--rule-strong);
  background: transparent;
  color: var(--ink-2);
  padding: 4px 13px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.6;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.chip:hover { border-color: var(--ink-2); color: var(--ink); }
.chip[aria-pressed="true"], .chip.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.chip-term { background: var(--sheet); border-color: var(--rule); color: var(--ink); }

/* ---------- home: next lesson ---------- */
.next {
  --kind: var(--accent);
  background: var(--sheet);
  border: 1px solid var(--rule);
  border-radius: 22px;
  padding: 22px 22px 20px;
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
/* a corner of graph paper fading out: the chart grid economics is drawn on */
.next::before {
  content: "";
  position: absolute;
  inset: 0 0 auto auto;
  width: 62%;
  height: 100%;
  z-index: -1;
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 22px 22px;
  background-position: right -1px top -1px;
  -webkit-mask-image: radial-gradient(120% 100% at 100% 0%, #000 0%, transparent 62%);
  mask-image: radial-gradient(120% 100% at 100% 0%, #000 0%, transparent 62%);
  pointer-events: none;
}
.next.k-macro { --kind: var(--k-macro); }
.next.k-micro { --kind: var(--k-micro); }
.next.k-apply { --kind: var(--k-apply); }
.next-num { margin: 6px 0 0; display: flex; align-items: baseline; gap: 10px; font-family: var(--f-display); font-size: 56px; font-weight: 500; line-height: 0.95; letter-spacing: -0.035em; color: var(--kind); font-variant-numeric: lining-nums tabular-nums; }
.next-num span { font-family: var(--f-mono); font-size: 13px; font-weight: 500; letter-spacing: 0.04em; color: var(--muted); }
.next-title { margin: 2px 0 0; font-family: var(--f-display); font-size: var(--fs-xl); font-weight: 600; line-height: 1.25; letter-spacing: -0.02em; }
.next-title .num { font-family: var(--f-mono); font-size: 0.6em; font-weight: 500; color: var(--kind); margin-right: 8px; letter-spacing: 0; }
.next-desc { margin: 0; color: var(--ink-2); line-height: 1.6; }
.next > .row { margin-top: 8px; }
.next > .hint { margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--rule); color: var(--muted); }
.waitbox { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 14px; background: var(--node); }
.waitbox p { margin: 0; font-size: 14.5px; color: var(--ink-2); }
.cmd { display: flex; gap: 8px; align-items: stretch; }
.cmd-input {
  flex: 1;
  min-width: 0;
  font-family: var(--f-mono);
  font-size: 15px;
  font-weight: 500;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px dashed var(--rule-strong);
  background: var(--sheet);
  color: var(--ink);
}

/* ---------- progress ---------- */
.verdict { margin: 0; font-family: var(--f-display); font-size: var(--fs-lg); font-weight: 600; line-height: 1.4; letter-spacing: -0.015em; }
.track { position: relative; height: 8px; margin-block: 6px 2px; border-radius: 4px; background: var(--node); }
.track-fill { position: absolute; inset: 0 auto 0 0; border-radius: 4px; background: var(--accent); }
.track-mark { position: absolute; top: -5px; bottom: -5px; width: 2px; border-radius: 1px; background: var(--ink); }
.track-mark::after { content: ""; position: absolute; left: 50%; top: -5px; width: 9px; height: 9px; margin-left: -4.5px; border-radius: 50%; background: var(--hl); box-shadow: 0 0 0 1.5px var(--ink); }
/* a small ledger: hairlines between the cells */
.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: 16px;
  overflow: hidden;
}
.stats > div { background: var(--sheet); padding: 12px 16px 13px; min-width: 0; }
.stats dt { font-size: var(--fs-xs); color: var(--muted); }
.stats dd { margin: 2px 0 0; font-size: 21px; font-weight: 600; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.confirm { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 14px; background: var(--hl-soft); }
.confirm p { margin: 0; font-size: 14.5px; }

/* ---------- 90-lesson board ---------- */
.board { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 6px; }
.sq {
  appearance: none;
  border: 0;
  margin: 0;
  padding: 0;
  aspect-ratio: 1 / 1;
  max-width: 100%;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: var(--node);
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  position: relative;
  transition: filter 0.15s ease;
}
.sq:hover { filter: brightness(0.95); }
.sq.macro { background: var(--k-macro-soft); }
.sq.micro { background: var(--k-micro-soft); }
.sq.apply { background: var(--k-apply-soft); }
.sq.done.macro { background: var(--k-macro); color: var(--on-kind); }
.sq.done.micro { background: var(--k-micro); color: var(--on-kind); }
.sq.done.apply { background: var(--k-apply); color: var(--on-kind); }
.sq.over { color: var(--hl-ink); box-shadow: inset 0 -3px 0 var(--hl); }
.sq.today { box-shadow: inset 0 0 0 1.5px var(--ink); color: var(--ink); font-weight: 600; }
.sq.over.today { box-shadow: inset 0 0 0 1.5px var(--ink), inset 0 -4px 0 var(--hl); }
.sq.ready:not(.done)::after { content: ""; position: absolute; right: 4px; top: 4px; width: 4px; height: 4px; border-radius: 50%; background: var(--accent); }
.legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: var(--fs-xs); color: var(--muted); }
.legend li { display: inline-flex; align-items: center; gap: 6px; }
.sw { width: 11px; height: 11px; border-radius: 3px; display: inline-block; flex: none; position: relative; }
.sw.macro { background: var(--k-macro); }
.sw.micro { background: var(--k-micro); }
.sw.apply { background: var(--k-apply); }
.sw.over { background: var(--node); box-shadow: inset 0 -3px 0 var(--hl); }
.sw.today { box-shadow: inset 0 0 0 1.5px var(--ink); }
.sw.ready { background: var(--node); }
.sw.ready::after { content: ""; position: absolute; right: 1.5px; top: 1.5px; width: 3.5px; height: 3.5px; border-radius: 50%; background: var(--accent); }

/* ---------- quote ---------- */
.quote { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.quote::before { content: "\201C"; display: block; height: 22px; font-family: var(--f-display); font-size: 54px; line-height: 0.9; color: var(--accent); }
.quote-ko { margin: 0; font-family: var(--f-display); font-size: 20px; font-weight: 500; line-height: 1.6; letter-spacing: -0.01em; }
.quote-en { margin: 0; font-size: var(--fs-sm); color: var(--muted); line-height: 1.6; }
.quote-by { margin: 2px 0 0; font-size: var(--fs-sm); color: var(--ink-2); }
.quote-by b { color: var(--ink); }
.quote-note { margin: 6px 0 0; padding-top: 12px; border-top: 1px solid var(--rule); font-size: 15px; color: var(--ink-2); line-height: 1.7; }

/* ---------- lessons list ---------- */
.unit { display: flex; flex-direction: column; gap: 8px; }
.unit-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; margin: 0; }
.unit-h h2 { margin: 0; font-family: var(--f-display); font-size: var(--fs-md); font-weight: 600; letter-spacing: -0.01em; }
.unit-bar { height: 3px; border-radius: 2px; background: var(--node); overflow: hidden; }
.unit-bar span { display: block; height: 100%; background: var(--accent); }
.rows { list-style: none; margin: 4px 0 0; padding: 0; background: var(--sheet); border: 1px solid var(--rule); border-radius: 16px; overflow: hidden; }
.rows li + li { border-top: 1px solid var(--rule); }
.lrow {
  appearance: none;
  width: 100%;
  border: 0;
  background: none;
  text-align: left;
  display: grid;
  grid-template-columns: 2.2rem minmax(0, 1fr) auto;
  gap: 4px 12px;
  align-items: start;
  padding: 13px 16px;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.lrow:hover { background: var(--node); }
.lrow-n { font-family: var(--f-mono); font-size: 13px; font-weight: 500; color: var(--muted); padding-top: 2px; }
.lrow.done .lrow-n { color: var(--ok); }
.lrow-t { display: block; font-weight: 600; line-height: 1.5; }
.lrow-d { display: block; font-size: var(--fs-sm); color: var(--muted); line-height: 1.55; }
.lrow-side { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 4px; max-width: 9.5rem; padding-top: 1px; }
.lrow-date { flex-basis: 100%; text-align: right; font-family: var(--f-mono); font-size: 11.5px; color: var(--muted); }

/* ---------- reader ---------- */
.back { align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; color: var(--muted); text-decoration: none; font-size: 14px; font-weight: 500; padding: 2px 0; margin-bottom: -16px; }
.back:hover { color: var(--ink); }
.back svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lesson-head { display: flex; flex-direction: column; gap: 10px; }
.lesson-title { margin: 0; font-family: var(--f-display); font-size: var(--fs-2xl); font-weight: 600; line-height: 1.22; letter-spacing: -0.025em; }
.lesson-title .num { display: block; font-family: var(--f-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.02em; color: var(--muted); margin-bottom: 10px; }
.lesson-meta { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; font-size: 13px; color: var(--muted); }
.lesson-meta .dotsep::before { content: "·"; margin-right: 10px; }

.secnav {
  position: sticky;
  top: calc(env(safe-area-inset-top, 0px) + var(--bar-h));
  z-index: 15;
  margin-top: -12px;
  margin-left: calc(-1 * max(16px, env(safe-area-inset-left, 0px)));
  margin-right: calc(-1 * max(16px, env(safe-area-inset-right, 0px)));
  padding-block: 9px;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}
.secnav .chips { padding-bottom: 0; gap: 2px; }
.secnav .chip { border-color: transparent; color: var(--muted); padding: 4px 12px; }
.secnav .chip:hover { color: var(--ink); border-color: transparent; background: var(--node); }
.secnav .chip.on { background: var(--ink); color: var(--paper); }
.lsec { scroll-margin-top: calc(env(safe-area-inset-top, 0px) + var(--bar-h) + var(--nav-h) + 14px); display: flex; flex-direction: column; gap: 16px; min-width: 0; border-top: 1px solid var(--rule); padding-top: 28px; }
.secnav + .lsec { border-top: 0; padding-top: 4px; }
.lsec-h { display: flex; align-items: baseline; gap: 12px; margin: 0; }
.lsec-h h2 { margin: 0; font-family: var(--f-display); font-size: var(--fs-lg); font-weight: 600; letter-spacing: -0.015em; line-height: 1.35; }
.lsec-h .eyebrow { flex: none; color: var(--accent); }

.terms { display: flex; flex-direction: column; gap: 4px; padding-block: 8px; }
.term-group + .term-group { border-top: 1px solid var(--rule); padding-top: 14px; margin-top: 10px; }
.term-group h3 { margin: 0 0 4px; font-family: var(--f-body); font-size: 12.5px; font-weight: 600; letter-spacing: 0.01em; color: var(--accent); }
.term-group dl { margin: 0; display: grid; grid-template-columns: minmax(7rem, 10.5rem) minmax(0, 1fr); column-gap: 16px; }
.term-group dt, .term-group dd { padding-block: 9px; border-top: 1px dashed var(--rule); }
.term-group dt:first-of-type, .term-group dt:first-of-type + dd { border-top: 0; }
.term-group dt { font-weight: 600; line-height: 1.55; }
.term-group dd { margin: 0; color: var(--ink-2); font-size: 15px; line-height: 1.65; }

.question {
  margin: 0;
  padding: 22px 22px 24px;
  border-radius: 18px;
  background: var(--sheet);
  border: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.question p { margin: 0; }
.q-text { font-family: var(--f-display); font-size: 22px; font-weight: 500; line-height: 1.6; letter-spacing: -0.012em; }
.q-text span { background-image: linear-gradient(transparent 58%, var(--hl-mark) 58%, var(--hl-mark) 92%, transparent 92%); background-repeat: no-repeat; background-size: 100% 100%; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

.prose { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.prose h3 { margin: 14px 0 0; font-family: var(--f-display); font-size: 19.5px; font-weight: 600; line-height: 1.4; letter-spacing: -0.012em; }
.prose p { margin: 0; max-width: 65ch; }
.prose > ul, .prose > ol { margin: 0; padding-left: 1.25em; display: flex; flex-direction: column; gap: 8px; max-width: 65ch; }
.prose > ul > li::marker, .prose > ol > li::marker { color: var(--muted); }
.src { margin: 0; font-size: var(--fs-xs); color: var(--muted); line-height: 1.6; }
.callout { padding: 16px 18px; border-radius: 14px; background: var(--node); display: flex; flex-direction: column; gap: 6px; max-width: 65ch; }
.callout.tip { background: var(--accent-soft); }
.callout.warn { background: var(--hl-soft); }
.callout.note { background: transparent; border: 1px dashed var(--rule-strong); }
.callout-t { margin: 0; font-weight: 600; font-size: var(--fs-sm); color: var(--accent); }
.callout.warn .callout-t { color: var(--hl-ink); }
.callout p { margin: 0; font-size: 15px; line-height: 1.7; }

/* figures are "scenes": a sheet with Manim's NumberPlane grid fading out at the edges */
.fig, .wg { margin: 0; padding: 18px; border-radius: 18px; background: var(--sheet); border: 1px solid var(--rule); display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.fig svg, .wg svg.fx { display: block; width: 100%; max-width: 460px; height: auto; margin: 0 auto; overflow: visible; }
.fig > svg.fx, .stage > svg.fx {
  background-image:
    radial-gradient(closest-side, transparent 55%, var(--sheet) 100%),
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 100% 100%, 20px 20px, 20px 20px;
  background-position: center, center, center;
  border-radius: 10px;
}
.fig figcaption, .wg-cap { font-size: 13px; color: var(--muted); margin: 0; line-height: 1.6; }
.fig figcaption { padding-top: 10px; border-top: 1px solid var(--rule); }
.fig text, .wg text { font-family: var(--f-body); }
.fx-t { fill: var(--ink); font-size: 14px; font-weight: 600; }
.fx-s { fill: var(--muted); font-size: 12px; }
.fx-in { fill: var(--ink-2); font-size: 12.5px; font-weight: 600; }
.fx-lab { fill: var(--ink-2); font-size: 12.5px; font-weight: 500; }
.fx-n { fill: var(--node); stroke: var(--rule-strong); stroke-width: 1; }
.fx-a { fill: var(--m-green-soft); stroke: var(--m-green); stroke-width: 1.2; }
.fx-m { fill: var(--m-gold-soft); stroke: var(--m-gold); stroke-width: 1.2; }
.fx-v { fill: var(--m-blue-soft); stroke: var(--m-blue); stroke-width: 1.2; }
.fx-l { stroke: var(--muted); stroke-width: 1.5; fill: none; }
.fx-lm { stroke: var(--m-gold); stroke-width: 2; fill: none; }
.fx-lg { stroke: var(--m-green); stroke-width: 2; fill: none; stroke-dasharray: 6 4; }
.fx-coin { fill: var(--m-gold); stroke: var(--sheet); stroke-width: 1.2; }
.fx-good { fill: var(--m-green); stroke: var(--sheet); stroke-width: 1; }
.fx-axis { stroke: var(--rule-strong); stroke-width: 1; }
.fx-dot { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 3; }
.fx-flow { pointer-events: none; }
.mk { fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.mk-n { stroke: var(--muted); }
.mk-m { stroke: var(--m-gold); }
.mk-g { stroke: var(--m-green); }
.flow-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: var(--fs-xs); color: var(--muted); }
.flow-legend span { display: inline-flex; align-items: center; gap: 6px; }
.flow-legend i { display: inline-block; width: 22px; border-top: 2px solid var(--m-gold); }
.flow-legend i.g { border-top: 2px dashed var(--m-green); }
.credit { margin: 0; font-size: var(--fs-xs); color: var(--muted); }

.stepper-cap { margin: 0; font-size: 14.5px; font-weight: 600; line-height: 1.55; min-height: 1.6em; }
.stepper-cap .mono { color: var(--muted); font-weight: 500; margin-right: 8px; font-size: 12.5px; }
.stepper-ctl { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 4px; }
.dots { display: flex; gap: 6px; }
.dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--rule-strong); transition: width 0.2s ease, background-color 0.2s ease; }
.dots i.on { width: 18px; border-radius: 3px; background: var(--ink); }

/* widgets */
.cash { display: flex; align-items: baseline; gap: 10px; }
.cash b { font-family: var(--f-mono); font-size: 24px; font-weight: 500; font-variant-numeric: tabular-nums; }
.cash-track { display: flex; height: 22px; border-radius: 6px; overflow: hidden; background: var(--node); }
.cash-track span { height: 100%; box-shadow: inset -1.5px 0 0 var(--sheet); }
.c-cash { background: var(--m-gold); }
.c-gov { background: var(--c-gov); }
.c-firm { background: var(--c-firm); }
.c-house { background: var(--c-house); }
.paid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.paid div { border: 1px solid var(--rule); border-radius: 12px; padding: 9px 12px; min-width: 0; }
.paid small { display: flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--muted); }
.paid small i { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }
.paid p { margin: 2px 0 0; font-size: 14px; }
.msg { margin: 0; font-size: 15px; line-height: 1.65; min-height: 3.3em; }

.slider { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr) 4.2rem; align-items: center; gap: 12px; }
.slider label { font-size: 14px; color: var(--ink-2); }
.slider input[type="range"] { width: 100%; accent-color: var(--accent); }
.slider output { font-family: var(--f-mono); font-size: 14px; font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; }
.toggle { display: flex; align-items: center; gap: 10px; font-size: 14.5px; cursor: pointer; }
.toggle input { width: 20px; height: 20px; accent-color: var(--accent); }
.kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.kpis div { background: var(--node); border-radius: 12px; padding: 11px 13px; min-width: 0; }
.kpis small { display: block; font-size: var(--fs-xs); color: var(--muted); }
.kpis b { display: block; font-family: var(--f-mono); font-size: 19px; font-weight: 500; font-variant-numeric: tabular-nums; }
.kpis em { display: block; font-style: normal; font-size: 13px; color: var(--muted); }
.kpis .up { color: var(--up); }
.kpis .down { color: var(--down); }
.big { font-family: var(--f-display); font-size: 34px; font-weight: 500; line-height: 1.15; letter-spacing: -0.02em; margin: 0; font-variant-numeric: tabular-nums; }
.hbar { display: grid; grid-template-columns: 4.6rem minmax(0, 1fr); align-items: center; gap: 12px; font-size: 13px; color: var(--muted); }
.hbar-t { height: 12px; border-radius: 6px; background: var(--node); overflow: hidden; }
.hbar-t span { display: block; height: 100%; border-radius: 6px; transition: width 0.2s ease; }

/* charts */
.chart { margin: 0; padding: 18px; border-radius: 18px; background: var(--sheet); border: 1px solid var(--rule); display: flex; flex-direction: column; gap: 14px; }
.chart-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.chart-h h4 { margin: 0; font-size: 15px; font-weight: 600; }
.bars { display: flex; flex-direction: column; gap: 10px; }
.bar-row { display: grid; grid-template-columns: 5.2rem minmax(0, 1fr) 3.6rem; align-items: center; gap: 12px; font-size: var(--fs-sm); }
.bar-row .lab { color: var(--ink-2); }
.bar-row .t { height: 12px; border-radius: 6px; background: var(--node); overflow: hidden; }
.bar-row .t span { display: block; height: 100%; background: var(--rule-strong); border-radius: 6px; }
.bar-row.hl .t span { background: var(--accent); }
.bar-row.hl .lab, .bar-row.hl .v { font-weight: 600; color: var(--ink); }
.bar-row .v { font-family: var(--f-mono); text-align: right; font-variant-numeric: tabular-nums; }
.stack-row { display: grid; grid-template-columns: 6.4rem minmax(0, 1fr) 3.2rem; align-items: center; gap: 12px; font-size: 13px; }
.stack-t { min-width: 0; }
.stack-bar { display: flex; height: 22px; border-radius: 6px; overflow: hidden; min-width: 0; }
.stack-bar span { height: 100%; box-shadow: inset -1.5px 0 0 var(--sheet); display: grid; place-items: center; font-family: var(--f-mono); font-size: 11px; color: var(--sheet); font-weight: 500; overflow: hidden; }
.stack-total { font-family: var(--f-mono); font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; }
.s1 { background: var(--s1); }
.s2 { background: var(--s2); }
.s3 { background: var(--s3); }
.tbl { overflow-x: auto; border: 1px solid var(--rule); border-radius: 14px; background: var(--sheet); }
.tbl table { border-collapse: collapse; width: 100%; font-size: 14px; min-width: 420px; }
.tbl th, .tbl td { padding: 10px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--rule); line-height: 1.6; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl th { font-size: 12.5px; color: var(--muted); font-weight: 600; }
.tbl td:first-child { font-weight: 600; color: var(--ink); }

/* summary */
.summary { margin: 0; padding: 20px 22px; border-radius: 18px; background: var(--hl-soft); font-family: var(--f-display); font-size: var(--fs-md); font-weight: 500; line-height: 1.75; letter-spacing: -0.01em; }

/* news */
.news-list { display: flex; flex-direction: column; gap: 12px; }
.news { background: var(--sheet); border: 1px solid var(--rule); border-radius: 18px; padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.news-src { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; font-size: var(--fs-xs); color: var(--muted); }
.news-src .no { font-family: var(--f-mono); font-weight: 500; color: var(--accent); }
.news-title { margin: 0; font-family: var(--f-display); font-size: 17.5px; font-weight: 600; line-height: 1.45; letter-spacing: -0.01em; }
.news-title a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--rule-strong); text-decoration-thickness: 1px; text-underline-offset: 5px; }
.news-title a:hover { text-decoration-color: var(--accent); }
.news-title svg { width: 14px; height: 14px; vertical-align: -1px; margin-left: 5px; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.news dl { margin: 4px 0 0; display: grid; grid-template-columns: 4.8rem minmax(0, 1fr); gap: 10px 14px; }
.news dt { font-size: var(--fs-xs); font-weight: 600; color: var(--muted); padding-top: 3px; }
.news dd { margin: 0; font-size: 15px; line-height: 1.7; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.news dd p { margin: 0; }
.news dd ul { margin: 0; padding-left: 1.2em; display: flex; flex-direction: column; gap: 4px; }
.news dt.think { color: var(--accent); }
.news details summary { cursor: pointer; font-size: 14px; font-weight: 600; color: var(--accent); }
.news details[open] summary { margin-bottom: 8px; }

/* quiz */
.quiz { display: flex; flex-direction: column; gap: 22px; }
.quiz-prev { margin: 0; font-size: 14px; color: var(--ink-2); padding: 11px 14px; border-radius: 12px; background: var(--node); }
.qq { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.qq legend { padding: 0; margin-bottom: 6px; font-size: 16px; font-weight: 600; line-height: 1.6; }
.qq legend .qn { font-family: var(--f-mono); font-weight: 500; color: var(--accent); margin-right: 8px; }
.qq legend .tag { display: inline-block; font-family: var(--f-mono); font-size: 11px; font-weight: 500; color: var(--muted); border: 1px solid var(--rule-strong); border-radius: 999px; padding: 0 7px; margin-right: 6px; vertical-align: 1px; }
.op { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--rule); border-radius: 12px; background: var(--sheet); font-size: 15px; line-height: 1.55; cursor: pointer; transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.op input { margin: 3px 0 0; flex: none; width: 18px; height: 18px; accent-color: var(--accent); }
.op:hover { border-color: var(--rule-strong); }
.op:has(input:checked) { border-color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--ink-2); }
.op.ok { background: var(--ok-soft); border-color: var(--ok); box-shadow: none; }
.op.no { background: var(--bad-soft); border-color: var(--bad); box-shadow: none; }
.op .mark { margin-left: auto; flex: none; font-size: 11.5px; font-weight: 600; padding-left: 8px; }
.op.ok .mark { color: var(--ok); }
.op.no .mark { color: var(--bad); }
.ex { margin: 4px 0 0; font-size: 14px; color: var(--ink-2); line-height: 1.7; }
.quiz-ctl { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.quiz-err { margin: 0; font-size: 14px; color: var(--bad); }
.result { padding: 18px 20px; border-radius: 18px; background: var(--sheet); border: 1px solid var(--rule-strong); display: flex; flex-direction: column; gap: 8px; }
.result-score { margin: 0; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.result-score b { font-family: var(--f-display); font-size: 34px; font-weight: 500; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.result p { margin: 0; font-size: 14.5px; color: var(--ink-2); }

/* tutor */
.tutor-box { display: flex; flex-direction: column; gap: 12px; }
.tutor-input { display: flex; flex-direction: column; gap: 8px; }
.tutor-input textarea { width: 100%; min-height: 88px; resize: vertical; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--rule-strong); background: var(--sheet); font-size: 15px; line-height: 1.65; }
.tutor-input textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.thread { display: flex; flex-direction: column; gap: 14px; }
.turn-q { align-self: flex-end; max-width: 88%; padding: 10px 14px; border-radius: 16px 16px 4px 16px; background: var(--ink); color: var(--paper); font-size: 15px; }
.turn-a { padding: 14px 16px; border-radius: 16px 16px 16px 4px; background: var(--sheet); border: 1px solid var(--rule); display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.turn-a p, .turn-a ul, .turn-a ol { margin: 0; font-size: 15px; }
.turn-a ul, .turn-a ol { padding-left: 1.3em; display: flex; flex-direction: column; gap: 4px; }
.turn-a .thinking { color: var(--muted); font-size: 14px; }
.turn-a .warn { color: var(--bad); font-size: 14px; }
.turn-tools { display: flex; gap: 8px; flex-wrap: wrap; }
.qnotes { display: flex; flex-direction: column; gap: 10px; }
.qnote { padding: 16px 18px; border-radius: 16px; background: var(--sheet); border: 1px solid var(--rule); display: flex; flex-direction: column; gap: 8px; }
.note-q { margin: 0; font-weight: 600; }
.note-a { display: flex; flex-direction: column; gap: 6px; font-size: 14.5px; color: var(--ink-2); }
.note-a p, .note-a ul, .note-a ol { margin: 0; }
.note-a ul, .note-a ol { padding-left: 1.2em; }
.note-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12.5px; color: var(--muted); }

/* lesson pager */
.pager { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; border-top: 1px solid var(--rule); padding-top: 26px; }
.pager a, .pager button { appearance: none; font: inherit; text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 2px; padding: 13px 16px; border-radius: 14px; border: 1px solid var(--rule); background: var(--sheet); text-decoration: none; color: var(--ink); min-width: 0; transition: border-color 0.15s ease; }
.pager a:hover, .pager button:hover { border-color: var(--ink-2); }
.pager .gap { visibility: hidden; }
.pager small { font-family: var(--f-mono); font-size: 11.5px; color: var(--muted); }
.pager b { font-weight: 600; font-size: 14.5px; line-height: 1.45; }
.pager .nx { text-align: right; align-items: flex-end; }

/* glossary */
.search { position: relative; }
.search input { width: 100%; padding: 12px 14px 12px 42px; border-radius: 14px; border: 1px solid var(--rule-strong); background: var(--sheet); font-size: 15.5px; }
.search svg { position: absolute; left: 14px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; }
.gl-group { display: flex; flex-direction: column; gap: 8px; }
.gl-group h3 { margin: 0; display: flex; gap: 10px; align-items: baseline; font-family: var(--f-display); font-size: 16.5px; font-weight: 600; }
.gl-group h3 .mono { font-size: 12px; font-weight: 500; color: var(--accent); }
.gl-group h3 a { color: inherit; text-decoration: none; }
.gl-group h3 a:hover { text-decoration: underline; }
.gl-list { list-style: none; margin: 0; padding: 0; background: var(--sheet); border: 1px solid var(--rule); border-radius: 16px; }
.gl-list li { padding: 12px 16px; display: grid; grid-template-columns: minmax(7rem, 10.5rem) minmax(0, 1fr); gap: 4px 16px; }
.gl-list li + li { border-top: 1px solid var(--rule); }
.gl-t { font-weight: 600; line-height: 1.55; }
.gl-d { color: var(--ink-2); font-size: 15px; line-height: 1.65; }
.gl-d small { display: block; margin-top: 2px; font-size: var(--fs-xs); color: var(--muted); }

/* review */
.score-list { list-style: none; margin: 0; padding: 0; background: var(--sheet); border: 1px solid var(--rule); border-radius: 16px; }
.score-list li { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr) 7rem 3.4rem; gap: 12px; align-items: center; padding: 11px 16px; font-size: 14px; }
.score-list li + li { border-top: 1px solid var(--rule); }
.score-list .n { font-family: var(--f-mono); color: var(--muted); font-weight: 500; }
.score-list .t { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.score-list .b { height: 6px; border-radius: 3px; background: var(--node); overflow: hidden; }
.score-list .b span { display: block; height: 100%; background: var(--ok); }
.score-list .b span.low { background: var(--bad); }
.score-list .s { font-family: var(--f-mono); text-align: right; font-weight: 500; font-variant-numeric: tabular-nums; }
.wrong { display: flex; flex-direction: column; gap: 10px; }
.wrong-item { padding: 16px 18px; border-radius: 16px; background: var(--sheet); border: 1px solid var(--rule); display: flex; flex-direction: column; gap: 6px; }
.wrong-item p { margin: 0; font-size: 14.5px; }
.wrong-q { font-weight: 600; font-size: 15px !important; }
.wrong-mine { color: var(--bad); text-decoration: line-through; text-decoration-thickness: 1px; }
.wrong-right { color: var(--ok); font-weight: 600; }

/* collection */
.quotes { display: flex; flex-direction: column; gap: 12px; }
.quote-card { background: var(--sheet); border: 1px solid var(--rule); border-radius: 18px; padding: 20px 22px 22px; }

/* moving the record between devices */
.transfer { border-top: 1px solid var(--rule); padding-top: 12px; margin-top: 2px; }
.transfer summary { cursor: pointer; font-size: 14px; font-weight: 600; color: var(--accent); list-style: none; display: inline-flex; align-items: center; gap: 6px; }
.transfer summary::-webkit-details-marker { display: none; }
.transfer summary::after { content: "+"; font-weight: 500; color: var(--muted); }
.transfer[open] summary::after { content: "\2212"; }
.transfer-body { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.transfer-body label { font-size: 13.5px; font-weight: 600; color: var(--ink-2); }
.transfer-body textarea { width: 100%; min-height: 76px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--rule-strong); background: var(--sheet); font-family: var(--f-mono); font-size: 12.5px; line-height: 1.5; resize: vertical; word-break: break-all; }
.transfer-body textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.transfer-body .meta { margin: 0; }

/* settings */
.field { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font-weight: 600; font-size: 15px; }
.field input[type="date"] { padding: 7px 12px; border-radius: 10px; border: 1px solid var(--rule-strong); background: var(--sheet); font-weight: 400; }

/* loading */
.loading { display: flex; flex-direction: column; gap: 12px; }
.loading i { display: block; height: 14px; border-radius: 7px; background: var(--node); }
.loading i:nth-child(1) { width: 40%; height: 24px; }
.loading i:nth-child(2) { width: 90%; }
.loading i:nth-child(3) { width: 75%; }

/* ---------- tabs ---------- */
.tabs {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 25;
  background: var(--sheet);
  border-top: 1px solid var(--rule);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.tabs-in { max-width: 520px; margin: 0 auto; height: var(--tab-h); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.tab {
  appearance: none;
  border: 0;
  background: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  position: relative;
  text-decoration: none;
  transition: color 0.15s ease;
}
.tab:hover { color: var(--ink-2); }
.tab svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.tab[aria-current="page"] { color: var(--ink); font-weight: 600; }
.tab[aria-current="page"]::before { content: ""; position: absolute; top: -1px; left: 50%; width: 20px; height: 2px; margin-left: -10px; border-radius: 0 0 2px 2px; background: var(--ink); }
.tab[aria-current="page"] svg .fillable { fill: var(--accent-soft); }

/* ---------- toast & sheet ---------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--tab-h) + env(safe-area-inset-bottom, 0px) + 14px);
  transform: translateX(-50%);
  z-index: 50;
  max-width: calc(100% - 32px);
  width: max-content;
  padding: 10px 16px;
  border-radius: 12px;
  background: var(--ink);
  color: var(--paper);
  font-size: 14px;
  font-weight: 500;
  box-shadow: var(--shadow);
}
.scrim { position: fixed; inset: 0; z-index: 40; background: var(--scrim); display: flex; align-items: flex-end; justify-content: center; }
.panel {
  width: 100%;
  max-width: 560px;
  background: var(--sheet);
  border-radius: 22px 22px 0 0;
  padding-top: 24px;
  padding-bottom: calc(22px + env(safe-area-inset-bottom, 0px));
  padding-left: max(20px, env(safe-area-inset-left, 0px));
  padding-right: max(20px, env(safe-area-inset-right, 0px));
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: var(--shadow-lg);
}
.panel h2 { margin: 0; font-family: var(--f-display); font-size: var(--fs-lg); font-weight: 600; line-height: 1.4; }
.panel p { margin: 0; color: var(--ink-2); font-size: 15px; }

/* install banner (installed web-app build only) */
.install {
  position: fixed;
  left: max(12px, env(safe-area-inset-left, 0px));
  right: max(12px, env(safe-area-inset-right, 0px));
  bottom: calc(var(--tab-h) + env(safe-area-inset-bottom, 0px) + 12px);
  z-index: 45;
  max-width: 520px;
  margin: 0 auto;
  padding: 14px 16px;
  border-radius: 16px;
  background: var(--sheet);
  border: 1px solid var(--rule);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.install p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--ink-2); }
.install-row { display: flex; gap: 8px; justify-content: flex-end; }

/* ---------- responsive ---------- */
@media (min-width: 760px) {
  .next { padding: 28px 30px 24px; }
  .next-num { font-size: 64px; }
  .next-title { font-size: 30px; }
  .lesson-title { font-size: 36px; }
}
@media (max-width: 560px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .term-group dl { grid-template-columns: minmax(0, 1fr); }
  .term-group dt { padding-bottom: 0; }
  .term-group dd { padding-top: 2px; border-top: 0; }
  .gl-list li { grid-template-columns: minmax(0, 1fr); }
  .news dl { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .news dd { margin-bottom: 10px; }
  .lesson-title { font-size: 28px; }
  .next-title { font-size: 25px; }
  .q-text { font-size: 20.5px; }
  .score-list li { grid-template-columns: 2.2rem minmax(0, 1fr) 3.2rem; }
  .score-list .b { display: none; }
  .paid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 380px) {
  .board { gap: 4px; }
  .sq { font-size: 10px; border-radius: 6px; }
  .kpis { grid-template-columns: minmax(0, 1fr); }
  .slider { grid-template-columns: 4.6rem minmax(0, 1fr) 3.8rem; }
  .next-num { font-size: 50px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}