@font-face {
  font-family: "Barlow Condensed";
  src: url("/fonts/BarlowCondensed-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Smiley Sans";
  src: url("/fonts/SmileySans-Oblique.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Barlow Condensed";
  src: url("/fonts/BarlowCondensed-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-display: swap;
}

:root {
  color-scheme: light;
  --ground: var(--color-background);
  --paper: var(--color-surface);
  --paper-2: var(--color-surface-muted);
  --ink: var(--color-ink);
  --muted: var(--color-text-muted);
  --line: color-mix(in srgb, var(--color-ink) 28%, transparent);
  --line-strong: var(--color-ink);
  --primary: var(--color-primary);
  --on-primary: var(--color-inverse);
  --accent: var(--color-accent);
  --on-accent: var(--color-inverse);
  --mint: var(--color-sage);
  --butter: var(--color-gold);
  --plum: var(--color-plum);
  --focus: var(--color-focus);
  --danger: var(--color-error);
  --reader-size: 1.08rem;
  --max: var(--content-max);
  --header-height: 64px;
  --nav-height: 76px;
  --display: var(--font-display-data);
  --display-cn: var(--font-display-cn);
  --ui: var(--font-ui);
  --reader: var(--font-reader);
}

html[data-skin="plum"] {
  --primary: #604056;
  --accent: #a45f48;
  --mint: #788867;
  --butter: #b18a49;
  --plum: #4b3445;
}

html[data-skin="harbor"] {
  --primary: #3f7775;
  --accent: #aa5b45;
  --mint: #6f8f80;
  --butter: #af9554;
  --plum: #4d607a;
}

html[data-skin="amber"] {
  --primary: #8a642c;
  --accent: #ae573a;
  --mint: #71846c;
  --butter: #b99b5a;
  --plum: #4d607a;
}

html[data-mode="night"] {
  color-scheme: dark;
  --ground: #11131b;
  --paper: #1b1f2a;
  --paper-2: #252a37;
  --ink: #f7f3e8;
  --muted: #c6c1b6;
  --line: rgba(247, 243, 232, 0.28);
  --line-strong: #f7f3e8;
  --focus: #8bb7ff;
}

html[data-mode="eye"] {
  color-scheme: light;
  --ground: #dde5c1;
  --paper: #edf1da;
  --paper-2: #ced7ae;
  --ink: #253022;
  --muted: #4c5947;
  --line: rgba(37, 48, 34, 0.28);
  --line-strong: #253022;
  --focus: #1f6049;
}

html[data-font="compact"] { --reader-size: .96rem; }
html[data-font="large"] { --reader-size: 1.24rem; }

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  background-color: var(--ground);
  background-image: linear-gradient(118deg, rgba(255,255,255,.035), transparent 42%, rgba(17,17,15,.02));
  color: var(--ink);
  font-family: var(--ui);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 55;
  pointer-events: none;
  background: url("/assets/paper-texture.png") 0 0 / 520px 520px repeat;
  mix-blend-mode: multiply;
  opacity: .045;
}

html[data-mode="night"] body::after { mix-blend-mode: soft-light; opacity: .06; }

::selection { color: var(--on-primary); background: var(--primary); }
* { scrollbar-color: var(--primary) var(--paper-2); scrollbar-width: thin; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: var(--paper-2); }
*::-webkit-scrollbar-thumb { background: var(--primary); border: 2px solid var(--paper-2); }

button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
a { color: inherit; text-underline-offset: .22em; }
svg { display: block; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 1000;
  padding: 10px 14px;
  background: var(--ink);
  color: var(--paper);
  transform: translateY(-150%);
}
.skip-link:focus { transform: translateY(0); }

.app-shell { min-height: 100vh; }

.app-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 60;
  height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 max(22px, calc((100vw - var(--max)) / 2));
  background: var(--ground);
  border-bottom: 1px solid var(--line-strong);
}

body[data-surface="today"] .app-header {
  position: absolute;
  background: var(--butter);
  color: #11110f;
  border-bottom-color: transparent;
}

body[data-surface="today"] #app { padding-top: 0; }

.wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  text-decoration: none;
  font-weight: 800;
}
.wordmark-cn { font-size: 1.15rem; }
.wordmark-en { font-family: var(--display); font-size: 1.25rem; letter-spacing: .01em; }
.header-status { display: flex; align-items: center; gap: 14px; }
.header-timer { min-height: 42px; display: flex; align-items: center; gap: 9px; padding: 0 12px; border: 1px solid currentColor; background: color-mix(in srgb, var(--paper) 76%, transparent); color: inherit; cursor: pointer; }
.header-timer[hidden] { display: none; }
.header-timer svg { width: 20px; height: 20px; }
.header-timer > span { display: grid; grid-template-columns: auto auto; gap: 7px; align-items: baseline; }
.header-timer small { font-size: .66rem; font-weight: 700; }
.header-timer strong { font: 600 1rem/1 var(--display); font-variant-numeric: tabular-nums; }
.header-timer.is-running svg { color: var(--primary); }
.header-timer.is-paused { color: var(--muted); border-style: dashed; }
body[data-surface="today"] .header-timer { background: rgba(251, 249, 242, .46); }
.edition-mark { display: flex; align-items: center; gap: 10px; font: 600 .92rem/1 var(--display); letter-spacing: .08em; }
.registration-dot { width: 11px; height: 11px; border: 1px solid currentColor; position: relative; }
.registration-dot::before, .registration-dot::after { content: ""; position: absolute; background: currentColor; }
.registration-dot::before { width: 15px; height: 1px; left: -3px; top: 4px; }
.registration-dot::after { width: 1px; height: 15px; left: 4px; top: -3px; }

#app {
  width: min(100%, var(--max));
  min-height: 100vh;
  margin: 0 auto;
  padding: calc(var(--header-height) + 20px) 20px calc(var(--nav-height) + 58px);
}

.page {
  animation: program-arrival 520ms var(--ease-out) both;
}

@keyframes program-arrival {
  from { clip-path: inset(5% 0 0); filter: blur(3px); }
  to { clip-path: inset(0); filter: blur(0); }
}

.bottom-nav {
  position: fixed;
  left: 50%;
  bottom: 18px;
  z-index: 70;
  width: min(640px, calc(100vw - 32px));
  min-height: var(--nav-height);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  transform: translateX(-50%);
  background: var(--paper);
  border: 1px solid var(--line-strong);
}

.bottom-nav a {
  position: relative;
  min-width: 0;
  min-height: 74px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border-right: 1px solid var(--line);
  color: var(--muted);
  font-size: .78rem;
  font-weight: 700;
  text-decoration: none;
}
.bottom-nav a:last-child { border-right: 0; }
.bottom-nav svg { width: 25px; height: 25px; }
.bottom-nav a::after { content: ""; position: absolute; inset: auto 15% 0; height: 4px; transform: scaleX(0); transform-origin: left; transition: transform 260ms var(--ease-out); }
.bottom-nav a:nth-child(1)::after { background: var(--primary); }
.bottom-nav a:nth-child(2)::after { background: var(--accent); }
.bottom-nav a:nth-child(3)::after { background: var(--mint); }
.bottom-nav a:nth-child(4)::after { background: var(--plum); }
.bottom-nav a.active { color: var(--ink); background: color-mix(in srgb, var(--paper) 84%, var(--butter)); }
.bottom-nav a.active::after { transform: scaleX(1); }
.bottom-nav a:hover { color: var(--ink); }

.page-loader { min-height: 55vh; display: grid; place-content: center; text-align: center; }
.loader-mark { width: 62px; height: 62px; display: grid; place-items: center; margin: 0 auto; background: var(--butter); border: 1px solid var(--ink); font: 600 2.6rem/1 var(--display); color: #11110f; }
.page-loader p { color: var(--muted); }
.inline-icon { width: 22px; height: 22px; flex: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }

/* Today */
.today-page { border: 1px solid var(--line-strong); }
.today-pass {
  min-height: 244px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 42px;
  padding: 82px 46px 28px;
  background: var(--butter);
  color: #11110f;
  border-bottom: 1px solid #11110f;
}
.today-pass h1 { max-width: 720px; margin: 0; font-family: var(--display-cn); font-size: clamp(2.5rem, 4.5vw, 4rem); font-weight: 400; line-height: .94; letter-spacing: -.025em; text-wrap: balance; }
.pass-note { margin: 16px 0 0; font-size: .95rem; }
.date-ticket { min-width: 138px; display: flex; flex-direction: column; align-items: center; justify-content: center; border-left: 1px dashed rgba(17,17,15,.7); font: 600 1rem/1 var(--display); }
.date-ticket strong { font-size: clamp(3.8rem, 7vw, 5.8rem); line-height: .82; font-variant-numeric: tabular-nums; }
.program-board { display: grid; grid-template-columns: 275px minmax(0, 1fr); min-height: 565px; }
.program-track { margin: 0; padding: 0; list-style: none; background: var(--paper); border-right: 1px solid var(--line-strong); }
.program-track li { position: relative; min-height: 141px; display: grid; grid-template-columns: 62px 1fr; grid-template-rows: auto auto; column-gap: 12px; align-content: center; padding: 18px 24px; border-bottom: 1px solid var(--line); }
.program-track li:last-child { border-bottom: 0; }
.program-track li::after { content: ""; position: absolute; right: -5px; top: calc(50% - 4px); width: 8px; height: 8px; background: var(--ink); }
.program-track time { font: 600 .95rem/1 var(--display); font-variant-numeric: tabular-nums; }
.program-track strong { grid-row: 1 / 3; grid-column: 2; font: 600 3.25rem/.82 var(--display); font-variant-numeric: tabular-nums; }
.program-track span { grid-column: 1; font-weight: 800; }
.program-track small { grid-column: 1 / 3; margin-top: 10px; color: var(--muted); font-size: .72rem; }
.program-track .is-current { background: color-mix(in srgb, var(--butter) 45%, var(--paper)); }
.program-track .is-current::after, .program-track .is-done::after { background: var(--accent); }
.program-feature { position: relative; min-width: 0; display: grid; grid-template-rows: 1fr auto; background: var(--primary); color: var(--on-primary); }
.program-feature::before, .program-feature::after { content: ""; position: absolute; z-index: 2; width: 15px; height: 15px; opacity: .78; }
.program-feature::before { right: 18px; top: 18px; border-top: 1px solid currentColor; border-left: 1px solid currentColor; }
.program-feature::after { right: 25px; top: 11px; border-left: 1px solid currentColor; }
.program-copy { display: flex; flex-direction: column; min-height: 470px; padding: 42px 48px 34px; }
.program-meta { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 30px; font-size: .74rem; font-weight: 700; }
.program-copy h2 { max-width: 800px; margin: auto 0 22px; font: 600 clamp(3.1rem, 6.2vw, 5.7rem)/.88 var(--display); letter-spacing: -.02em; text-wrap: balance; }
.program-copy > p { max-width: 61ch; margin: 0; color: color-mix(in srgb, var(--on-primary) 84%, transparent); line-height: 1.65; }
.lesson-facts { display: flex; gap: 12px; margin-top: 26px; }
.lesson-facts span { padding: 8px 12px; border: 1px solid currentColor; font: 600 1rem/1 var(--display); }
.program-cta { min-height: 94px; display: flex; align-items: center; justify-content: space-between; gap: 20px; width: 100%; padding: 18px 38px 18px 54px; border: 0; border-top: 1px solid #11110f; background: var(--accent); color: var(--on-accent); clip-path: polygon(18px 0,100% 0,100% 100%,18px 100%,18px 66%,0 50%,18px 34%); font-size: clamp(1.35rem, 3vw, 2.15rem); font-weight: 900; cursor: pointer; }
.program-cta svg { width: 34px; height: 34px; transition: transform 240ms var(--ease-out); }
.program-cta:hover svg { transform: translateX(7px); }
.editor-note { display: grid; grid-template-columns: 185px 1fr; background: var(--mint); color: #11110f; border-top: 1px solid #11110f; border-bottom: 1px solid #11110f; }
.note-stub { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 28px; border-right: 1px dashed #11110f; font: 600 .85rem/1 var(--display); writing-mode: vertical-rl; }
.note-stub strong { font-size: 2.2rem; }
.editor-note > div:last-child { padding: 32px 42px; }
.editor-note h2 { margin: 0 0 10px; font-size: 1.5rem; }
.editor-note p { max-width: 68ch; margin: 0; line-height: 1.7; }
.next-programs { padding: 50px 46px 44px; background: var(--paper); }
.section-title-row { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.section-title-row h2 { margin: 0 0 8px; font-size: 1.65rem; }
.section-title-row p { margin: 0; color: var(--muted); }
.section-title-row a { font-weight: 800; }
.program-list { border-top: 1px solid var(--line-strong); }
.program-list article { display: grid; grid-template-columns: 145px 1fr auto; gap: 24px; align-items: center; min-height: 94px; border-bottom: 1px solid var(--line); }
.topic-block { align-self: stretch; display: grid; place-items: center; padding: 14px; color: #11110f; font-weight: 800; text-align: center; }
.topic-block.mint { background: var(--mint); }
.topic-block.coral { background: var(--accent); color: var(--on-accent); }
.program-list strong, .program-list small { display: block; }
.program-list small { margin-top: 6px; color: var(--muted); }
.availability { margin-right: 18px; padding: 6px 10px; border: 1px solid var(--line); font-size: .75rem; }

/* Discover */
.discover-page { background: var(--paper); border: 1px solid var(--line-strong); }
.discover-hero { min-height: 324px; display: grid; grid-template-columns: 1fr 156px; background: var(--accent); color: var(--on-accent); border-bottom: 1px solid #11110f; }
.discover-hero > div:first-child { display: flex; flex-direction: column; justify-content: end; padding: 46px; }
.discover-hero h1, .learn-hero h1 { margin: 0; font-family: var(--display-cn); font-weight: 400; font-size: clamp(2.65rem, 5.2vw, 4.45rem); line-height: .94; letter-spacing: -.025em; text-wrap: balance; }
html[data-locale="en"] .today-pass h1,
html[data-locale="en"] .discover-hero h1,
html[data-locale="en"] .learn-hero h1,
html[data-locale="en"] .page-heading h1,
html[data-locale="en"] .welcome-copy h1,
html[data-locale="en"] .choice-stage > h1 { font-family: var(--display); font-weight: 600; }
.today-pass h1,
.discover-hero h1,
.learn-hero h1,
.page-heading h1,
.welcome-copy h1,
.choice-stage > h1 { position: relative; width: fit-content; }
.today-pass h1::before,
.discover-hero h1::before,
.learn-hero h1::before,
.page-heading h1::before,
.welcome-copy h1::before,
.choice-stage > h1::before { content: ""; position: absolute; left: -.22em; top: .1em; width: .13em; height: .13em; background: var(--accent); transform: rotate(17deg); }
.today-pass h1::after,
.discover-hero h1::after,
.learn-hero h1::after,
.page-heading h1::after,
.welcome-copy h1::after,
.choice-stage > h1::after { content: ""; position: absolute; right: 4%; bottom: -.12em; width: .72em; height: .15em; border-top: 2px solid currentColor; border-radius: 50%; transform: rotate(-5deg); opacity: .72; }
.today-pass h1::before { background: var(--primary); }
.discover-hero h1::before { background: var(--butter); }
.learn-hero h1::before { background: var(--accent); }
.discover-hero p, .learn-hero p { max-width: 57ch; margin: 26px 0 0; line-height: 1.65; }
.discover-code, .learn-issue { display: flex; flex-direction: column; align-items: center; justify-content: center; border-left: 1px dashed currentColor; font-family: var(--display); }
.discover-code strong, .learn-issue strong { font-size: 5.8rem; line-height: .82; }
.topic-filter { display: flex; overflow-x: auto; border-bottom: 1px solid var(--line-strong); background: var(--paper); }
.topic-filter button { flex: 0 0 auto; min-height: 54px; padding: 0 18px; border: 0; border-right: 1px solid var(--line); background: transparent; cursor: pointer; }
.topic-filter button[aria-pressed="true"] { background: var(--butter); color: #11110f; font-weight: 800; }
.curation-stage { padding: 48px; }
.curation-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; margin-bottom: 30px; }
.curation-intro h2 { margin: 0; font-size: 2.4rem; }
.curation-intro p { margin: 0; color: var(--muted); line-height: 1.65; }
.venue-grid { display: grid; grid-template-columns: 1.35fr .65fr .65fr; grid-template-rows: 260px 230px; border: 1px solid var(--line-strong); }
.venue-feature { grid-row: 1 / 3; display: flex; flex-direction: column; padding: 34px; background: var(--primary); color: var(--on-primary); border-right: 1px solid #11110f; }
.venue-feature h3 { margin: auto 0 18px; font: 600 clamp(3.2rem, 6vw, 5.4rem)/.85 var(--display); letter-spacing: -.02em; }
.venue-feature p { line-height: 1.55; }
.venue-feature button { display: flex; align-items: center; justify-content: space-between; min-height: 58px; margin-top: 24px; padding: 0 18px; border: 1px solid currentColor; background: transparent; color: inherit; font-weight: 800; cursor: pointer; }
.venue-number { font: 600 .85rem/1 var(--display); letter-spacing: .06em; }
.venue-block { padding: 26px; color: #11110f; border-right: 1px solid #11110f; border-bottom: 1px solid #11110f; }
.venue-block:nth-child(3), .venue-block:nth-child(4) { border-bottom: 0; }
.venue-block:nth-child(3) { border-right: 0; }
.venue-block.butter { background: var(--butter); }
.venue-block.mint { background: var(--mint); }
.venue-block.plum { grid-column: 3; grid-row: 2; background: var(--plum); color: #fff; border-right: 0; }
.venue-block h3 { margin: 48px 0 10px; font-size: 1.45rem; line-height: 1.3; }
.venue-block p { margin: 0; font-size: .85rem; line-height: 1.55; }

/* Learn */
.learn-page { border: 1px solid var(--line-strong); background: var(--paper); }
.learn-hero { min-height: 316px; display: grid; grid-template-columns: 1fr 156px; background: var(--plum); color: #fff; border-bottom: 1px solid #11110f; }
.learn-hero > div:first-child { display: flex; flex-direction: column; justify-content: end; padding: 46px; }
.learning-ticket { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--line-strong); }
.learning-ticket > div { min-height: 150px; display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto 1fr; padding: 24px; border-right: 1px solid var(--line); }
.learning-ticket > div:last-child { border-right: 0; }
.learning-ticket span { grid-column: 1 / 3; color: var(--muted); font-size: .82rem; }
.learning-ticket strong { align-self: end; font: 600 3.8rem/.84 var(--display); font-variant-numeric: tabular-nums; }
.learning-ticket small { align-self: end; }
.learning-bands { padding: 40px 46px; }
.learning-band { position: relative; min-height: 132px; display: grid; grid-template-columns: 180px 1fr auto; grid-template-rows: 1fr 1fr; align-items: center; gap: 8px 28px; padding: 24px 28px; border: 1px solid #11110f; border-bottom: 0; color: #11110f; text-decoration: none; }
.learning-band:last-child { border-bottom: 1px solid #11110f; }
.learning-band.cobalt { background: var(--primary); color: var(--on-primary); }
.learning-band.mint { background: var(--mint); }
.learning-band.coral { background: var(--accent); }
.learning-band > span { grid-row: 1 / 3; font: 600 1rem/1 var(--display); }
.learning-band strong { align-self: end; font-size: 1.25rem; }
.learning-band small { align-self: start; color: currentColor; opacity: .8; }
.learning-band svg { grid-column: 3; grid-row: 1 / 3; width: 30px; height: 30px; }
.study-clock { display: grid; grid-template-columns: 1.25fr 1fr 1fr auto; border-bottom: 1px solid var(--line-strong); background: var(--paper); }
.study-clock > div, .study-clock > button { min-height: 104px; padding: 20px 24px; border: 0; border-right: 1px solid var(--line); background: transparent; text-align: left; }
.study-clock > button { display: flex; align-items: center; justify-content: center; gap: 9px; min-width: 150px; border-right: 0; background: color-mix(in srgb, var(--butter) 58%, var(--paper)); font-weight: 800; cursor: pointer; }
.study-clock > button svg { width: 22px; height: 22px; }
.study-clock small, .study-clock strong { display: block; }
.study-clock small { margin-bottom: 9px; color: var(--muted); font-size: .75rem; }
.study-clock strong { font: 600 1.72rem/1 var(--display); font-variant-numeric: tabular-nums; }
.clock-state { display: flex; align-items: center; gap: 14px; }
.clock-state > svg { width: 30px; height: 30px; color: var(--primary); }
.clock-state > span { min-width: 0; }

.calendar-month-controls { display: grid; grid-template-columns: 48px minmax(132px, auto) 48px; align-items: stretch; min-height: 48px; border: 1px solid var(--line-strong); }
.calendar-month-controls button { display: grid; place-items: center; border: 0; border-right: 1px solid var(--line); background: transparent; cursor: pointer; }
.calendar-month-controls button:last-child { border-right: 0; border-left: 1px solid var(--line); }
.calendar-month-controls button svg { width: 20px; height: 20px; }
.calendar-month-controls strong { display: grid; place-items: center; padding: 0 12px; font: 600 1.05rem/1 var(--display); font-variant-numeric: tabular-nums; }
.checkin-button { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding: 0 15px; border: 1px solid var(--line-strong); background: var(--accent); color: var(--on-accent); font-weight: 900; cursor: pointer; }
.checkin-button svg { width: 23px; height: 23px; }
.calendar-sheet { min-width: 0; padding: 24px 28px 30px; }
.calendar-weekdays, .calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.calendar-weekdays { border: 1px solid var(--line-strong); border-bottom: 0; }
.calendar-weekdays span { min-height: 34px; display: grid; place-items: center; border-right: 1px solid var(--line); color: var(--muted); font: 600 .78rem/1 var(--display); }
.calendar-weekdays span:last-child { border-right: 0; }
.calendar-grid { border: 1px solid var(--line-strong); }
.calendar-grid > * { min-width: 0; min-height: 88px; border: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.calendar-grid > :nth-child(7n) { border-right: 0; }
.calendar-grid > :nth-last-child(-n+7) { border-bottom: 0; }
.calendar-blank { background: var(--paper-2); }
.calendar-day { position: relative; display: grid; place-items: center; padding: 15px 5px 7px; background: var(--paper); color: var(--ink); }
button.calendar-day { width: 100%; appearance: none; cursor: pointer; }
.calendar-day.is-future { opacity: .42; }
.calendar-day.is-today { box-shadow: inset 0 0 0 2px var(--primary); }
.calendar-day-number { position: absolute; top: 7px; left: 8px; z-index: 2; font: 600 .78rem/1 var(--display); font-variant-numeric: tabular-nums; }
.calendar-check { position: absolute; right: 5px; bottom: 5px; font: 600 .58rem/1 var(--display); letter-spacing: .04em; }

/* Me */
.me-page { border: 1px solid var(--line-strong); background: var(--paper); }
.profile-pass { min-height: 250px; display: flex; align-items: center; gap: 30px; padding: 42px 48px; background: var(--mint); color: #11110f; border-bottom: 1px solid #11110f; }
.profile-avatar { width: 112px; height: 112px; display: grid; place-items: center; background: var(--plum); color: #fff; font-size: 3rem; font-weight: 900; border: 1px solid #11110f; }
.profile-pass h1 { margin: 0; font-size: 2.25rem; }
.profile-pass p { margin: 10px 0 16px; }
.profile-pass span { font: 600 .9rem/1 var(--display); letter-spacing: .1em; }
.settings-section { border-bottom: 1px solid var(--line-strong); }
.settings-heading { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; padding: 34px 46px 20px; }
.settings-heading h2, .settings-heading p { margin: 0; }
.settings-heading p { color: var(--muted); line-height: 1.55; }
.setting-row { display: grid; grid-template-columns: minmax(220px, .7fr) 1.3fr; gap: 32px; align-items: center; min-height: 104px; padding: 20px 46px; border-top: 1px solid var(--line); }
.setting-row > div:first-child strong, .setting-row > div:first-child small { display: block; }
.setting-row > div:first-child small { margin-top: 7px; color: var(--muted); }
.mode-control, .font-control { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line-strong); }
.language-control { grid-template-columns: repeat(2, 1fr); }
.mode-control button, .font-control button { min-height: 52px; border: 0; border-right: 1px solid var(--line); background: transparent; cursor: pointer; }
.mode-control button:last-child, .font-control button:last-child { border-right: 0; }
.mode-control button[aria-pressed="true"], .font-control button[aria-pressed="true"] { background: var(--butter); color: #11110f; font-weight: 800; }
.font-control button { display: flex; align-items: baseline; justify-content: center; gap: 6px; }
.font-control .font-compact span { font-size: .9rem; }
.font-control .font-standard span { font-size: 1.2rem; }
.font-control .font-large span { font-size: 1.55rem; }
.skin-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; padding: 0 46px 38px; }
.skin-grid button { position: relative; min-height: 112px; padding: 14px; border: 1px solid var(--line); border-right: 0; background: transparent; text-align: left; cursor: pointer; }
.skin-grid button:last-child { border-right: 1px solid var(--line); }
.skin-grid button[aria-pressed="true"] { border-color: var(--line-strong); background: color-mix(in srgb, var(--butter) 32%, var(--paper)); }
.skin-grid button > svg { position: absolute; right: 10px; bottom: 10px; width: 18px; height: 18px; opacity: 0; }
.skin-grid button[aria-pressed="true"] > svg { opacity: 1; }
.skin-swatch { display: grid; grid-template-columns: 2fr 1fr 1fr; height: 44px; margin-bottom: 12px; border: 1px solid #11110f; }
.skin-swatch i { display: block; }
.archive-console { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) 1.35fr; margin: 0 46px 38px; border: 1px solid var(--line-strong); }
.archive-console > div { min-height: 116px; display: flex; flex-direction: column; justify-content: space-between; padding: 18px; border-right: 1px solid var(--line); }
.archive-console > div:last-child { border-right: 0; }
.archive-console span { color: var(--muted); font-size: .76rem; }
.archive-console strong { font: 600 1.7rem/1 var(--display); font-variant-numeric: tabular-nums; }
.archive-actions { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px; align-content: center; }
.archive-actions .secondary-button { min-width: 0; gap: 8px; padding-inline: 12px; font-size: .82rem; white-space: nowrap; }
.archive-actions .inline-icon { width: 19px; height: 19px; }
.archive-import { position: relative; cursor: pointer; }
.archive-import:focus-within { outline: 3px solid var(--focus); outline-offset: 3px; }
.file-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.account-form { display: grid; grid-template-columns: 1fr 1fr auto; gap: 18px; align-items: end; padding: 0 46px 28px; }
.account-form label, .onboarding-form label, .field { display: grid; gap: 8px; font-weight: 700; }
input, textarea, select { width: 100%; border: 1px solid var(--line-strong); border-radius: 0; background: var(--paper); color: var(--ink); caret-color: var(--primary); }
input, select { min-height: 48px; padding: 0 13px; }
textarea { min-height: 124px; padding: 13px; resize: vertical; }
input::placeholder, textarea::placeholder { color: color-mix(in srgb, var(--muted) 82%, transparent); opacity: 1; }
input:disabled { background: var(--paper-2); color: var(--muted); }
.cloud-note { display: grid; grid-template-columns: 42px 1fr; gap: 16px; margin: 0 46px 38px; padding: 22px; background: var(--butter); color: #11110f; border: 1px solid #11110f; }
.cloud-note svg { width: 32px; height: 32px; }
.cloud-note p { margin: 6px 0 0; line-height: 1.55; }
.tools-section { border-bottom: 0; }
.tools-section > a, .tools-section > button { width: 100%; min-height: 74px; display: grid; grid-template-columns: 180px 1fr auto; gap: 18px; align-items: center; padding: 0 46px; border: 0; border-top: 1px solid var(--line); background: transparent; color: inherit; text-align: left; text-decoration: none; cursor: pointer; }
.tools-section > * span { color: var(--muted); }
.tools-section svg { width: 24px; height: 24px; }
.tools-section .danger-action { color: var(--danger); }

/* Onboarding */
body[data-onboarding] .app-header, body[data-onboarding] .bottom-nav { display: none; }
body[data-onboarding] #app { width: 100%; max-width: none; padding: 0; }
.onboarding-screen { position: relative; min-height: 100dvh; background: var(--paper); }
.onboarding-progress { position: fixed; inset: auto 0 0; z-index: 20; height: 7px; background: color-mix(in srgb, var(--ink) 12%, transparent); }
.onboarding-progress span { display: block; height: 100%; background: var(--primary); }
.onboarding-welcome { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(420px, .9fr); grid-template-rows: auto 1fr; }
.onboarding-identity { grid-column: 1; align-self: start; display: flex; align-items: center; gap: 12px; padding: 26px 40px; background: var(--butter); color: #11110f; font-weight: 900; }
.onboarding-mark { width: 38px; height: 38px; display: grid; place-items: center; background: #11110f; color: var(--butter); font: 600 1.6rem/1 var(--display); }
.welcome-copy { grid-column: 1; display: flex; flex-direction: column; justify-content: center; padding: 64px 7vw 90px; background: var(--butter); color: #11110f; border-right: 1px solid #11110f; }
.step-count { margin: 0 0 30px; font: 600 1rem/1 var(--display); letter-spacing: .06em; }
.welcome-copy h1, .choice-stage > h1 { margin: 0; font-family: var(--display-cn); font-weight: 400; font-size: clamp(2.8rem, 5vw, 4.5rem); line-height: .95; letter-spacing: -.025em; }
.welcome-copy > p:last-child, .choice-stage > p { max-width: 55ch; margin: 30px 0 0; line-height: 1.7; }
.onboarding-form { grid-column: 2; grid-row: 1 / 3; align-self: center; display: grid; gap: 22px; padding: 54px clamp(34px, 6vw, 86px); }
.method-switch { display: grid; grid-template-columns: 1fr 1fr; margin-bottom: 8px; border: 1px solid var(--line-strong); }
.method-switch button { min-height: 54px; border: 0; border-right: 1px solid var(--line); background: transparent; cursor: pointer; }
.method-switch button:last-child { border-right: 0; }
.method-switch button[aria-pressed="true"] { background: var(--primary); color: var(--on-primary); font-weight: 800; }
.prototype-notice { margin: 0; padding: 14px; background: var(--paper-2); color: var(--muted); font-size: .82rem; line-height: 1.55; }
.onboarding-primary, .primary-button { min-height: 54px; display: inline-flex; align-items: center; justify-content: space-between; gap: 18px; padding: 0 20px; border: 1px solid var(--line-strong); background: var(--primary); color: var(--on-primary); font-weight: 800; cursor: pointer; }
.onboarding-primary svg { width: 25px; height: 25px; }
.onboarding-skip { min-height: 42px; padding: 0 10px; border: 0; background: transparent; color: var(--muted); text-decoration: underline; text-underline-offset: .22em; cursor: pointer; }
.onboarding-top { height: 68px; display: grid; grid-template-columns: 68px 1fr auto; align-items: center; gap: 18px; padding-right: 28px; border-bottom: 1px solid var(--line-strong); font-weight: 800; }
.back-button { width: 68px; height: 68px; display: grid; place-items: center; border: 0; border-right: 1px solid var(--line-strong); background: var(--butter); color: #11110f; cursor: pointer; }
.back-button svg { width: 26px; height: 26px; }
.choice-stage { width: min(960px, calc(100% - 40px)); margin: 0 auto; padding: 58px 0 150px; }
.choice-stage > h1 { font-size: clamp(2.6rem, 4.5vw, 4.1rem); }
.choice-grid { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 44px; border: 1px solid var(--line-strong); }
.choice-tile { position: relative; min-height: 142px; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; padding: 18px; border: 0; border-right: 1px solid #11110f; border-bottom: 1px solid #11110f; background: var(--paper); color: #11110f; font-weight: 900; text-align: left; cursor: pointer; }
.choice-tile:nth-child(4n) { border-right: 0; }
.choice-tile:nth-last-child(-n+3) { border-bottom: 0; }
.choice-tile.color-1 { background: var(--primary); color: var(--on-primary); }
.choice-tile.color-2 { background: var(--butter); }
.choice-tile.color-3 { background: var(--mint); }
.choice-tile.color-4 { background: var(--accent); color: var(--on-accent); }
.choice-tile[aria-pressed="true"] { box-shadow: inset 0 0 0 5px #11110f; }
.choice-tile[aria-pressed="true"]::after { content: ""; position: absolute; right: 16px; top: 16px; width: 14px; height: 8px; border-left: 3px solid currentColor; border-bottom: 3px solid currentColor; transform: rotate(-45deg); }
.onboarding-bottom { position: fixed; inset: auto 0 7px; z-index: 15; min-height: 84px; display: flex; align-items: center; justify-content: flex-end; gap: 18px; padding: 14px max(24px, calc((100vw - 960px) / 2)); background: color-mix(in srgb, var(--paper) 94%, transparent); border-top: 1px solid var(--line-strong); }
.onboarding-bottom .onboarding-primary { min-width: 220px; }
.choice-fieldset { margin: 40px 0 0; padding: 0; border: 0; }
.choice-fieldset legend { margin-bottom: 14px; font-weight: 900; }
.choice-fieldset legend span { color: var(--muted); font-weight: 400; }
.segmented-list { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line-strong); }
.segmented-list button { min-height: 62px; border: 0; border-right: 1px solid var(--line); background: transparent; cursor: pointer; }
.segmented-list button:last-child { border-right: 0; }
.segmented-list button[aria-pressed="true"] { background: var(--mint); color: #11110f; font-weight: 800; }
.level-list { border-top: 1px solid var(--line-strong); }
.level-list button { width: 100%; min-height: 62px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 20px; padding: 0 18px; border: 0; border-bottom: 1px solid var(--line); background: transparent; text-align: left; cursor: pointer; }
.level-list button[aria-pressed="true"] { background: var(--butter); color: #11110f; font-weight: 800; }
.goal-stack { margin-top: 40px; border-top: 1px solid var(--line-strong); }
.goal-stack button { width: 100%; min-height: 72px; display: grid; grid-template-columns: 56px 1fr auto; align-items: center; padding: 0 18px; border: 0; border-bottom: 1px solid var(--line); background: transparent; text-align: left; cursor: pointer; }
.goal-stack button > span { font: 600 1rem/1 var(--display); }
.goal-stack button svg { width: 22px; height: 22px; opacity: 0; }
.goal-stack button[aria-pressed="true"] { background: var(--primary); color: var(--on-primary); }
.goal-stack button[aria-pressed="true"] svg { opacity: 1; }
.onboarding-bottom.final { justify-content: space-between; }
.onboarding-bottom.final p { margin: 0; color: var(--muted); }

/* Shared internal pages */
.topline { display: flex; justify-content: space-between; gap: 32px; padding: 42px; background: var(--butter); color: #11110f; border: 1px solid #11110f; }
.page-heading h1 { max-width: 760px; margin: 0; font-family: var(--display-cn); font-weight: 400; font-size: clamp(2.2rem, 3.8vw, 3.6rem); line-height: 1; letter-spacing: -.02em; }
.lede { max-width: 68ch; color: var(--muted); line-height: 1.65; }
.topline .lede { color: rgba(17,17,15,.72); }
.section-label, .date-line, .eyebrow { font: 600 .82rem/1.3 var(--display); letter-spacing: .06em; }
.date-line { white-space: nowrap; }
.primary-button, .secondary-button, .text-button { text-decoration: none; }
.secondary-button { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0 18px; border: 1px solid var(--line-strong); background: var(--paper); color: var(--ink); font-weight: 800; cursor: pointer; }
.text-button { border: 0; background: transparent; color: var(--primary); font-weight: 800; cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .52; }
.empty-card { margin-top: 36px; padding: 34px; background: var(--paper); border: 1px solid var(--line-strong); }
.empty-card strong { display: block; margin-bottom: 10px; font-size: 1.35rem; }
.metrics-grid { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 30px; border: 1px solid var(--line-strong); }
.metric-card { min-height: 170px; display: flex; flex-direction: column; padding: 22px; border-right: 1px solid var(--line); background: var(--paper); }
.metric-card:last-child { border-right: 0; }
.metric-value { margin: auto 0 10px; font: 600 3.6rem/.84 var(--display); }
.metric-detail, .metric-card small { color: var(--muted); }
.progress-columns { display: grid; grid-template-columns: 1.3fr .7fr; gap: 24px; margin-top: 24px; }
.panel { padding: 30px; background: var(--paper); border: 1px solid var(--line-strong); }
.panel h2 { margin: 0; font-size: 2rem; }
.evidence-ledger { margin-top: 24px; border-top: 1px solid var(--line-strong); }
.evidence-ledger > div { min-height: 74px; display: grid; grid-template-columns: 1fr auto; gap: 7px 20px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
.evidence-ledger strong { font: 600 1.4rem/1 var(--display); font-variant-numeric: tabular-nums; }
.evidence-ledger small { grid-column: 1 / 3; color: var(--muted); }
.evidence-time { display: grid; grid-template-columns: repeat(3, 1fr); margin: 24px 0; border: 1px solid var(--line-strong); }
.evidence-time > div { min-height: 94px; display: flex; flex-direction: column; justify-content: space-between; padding: 14px; border-right: 1px solid var(--line); }
.evidence-time > div:last-child { border-right: 0; }
.evidence-time span { color: var(--muted); font-size: .75rem; }
.evidence-time strong { font: 600 1.35rem/1 var(--display); font-variant-numeric: tabular-nums; }
.library-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 28px; }
.library-card { padding: 28px; background: var(--paper); border: 1px solid var(--line-strong); }
.library-card .term { font: 600 2rem/1 var(--display); }
.collocation-list { display: flex; flex-wrap: wrap; gap: 8px; }
.collocation-list span { padding: 5px 8px; background: var(--paper-2); border: 1px solid var(--line); font-size: .78rem; }
.review-card { max-width: 760px; margin: 38px auto; padding: 38px; background: var(--paper); border: 1px solid var(--line-strong); }
.review-term { font: 600 clamp(3rem, 8vw, 6rem)/.9 var(--display); }
.review-answer { margin: 26px 0; padding: 22px; background: var(--butter); color: #11110f; }
.grade-row { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line-strong); }
.grade-row button { min-height: 68px; border: 0; border-right: 1px solid var(--line); background: transparent; cursor: pointer; }
.grade-row button:last-child { border-right: 0; }

/* Reader and coach */
.reader-header { display: grid; grid-template-columns: 1fr auto; gap: 34px; align-items: end; padding: 38px 42px; background: var(--primary); color: var(--on-primary); border: 1px solid #11110f; }
.reader-header h1 { max-width: 900px; margin: 0; font: 600 clamp(2.7rem, 5vw, 4.6rem)/.9 var(--display); letter-spacing: -.02em; }
.reader-subtitle { max-width: 72ch; line-height: 1.55; opacity: .84; }
.reader-meta { font: 600 .88rem/1 var(--display); }
.reader-actions { display: flex; gap: 10px; }
.reader-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; align-items: start; border: 1px solid var(--line-strong); border-top: 0; }
.article-column { min-width: 0; background: var(--paper); border-right: 1px solid var(--line-strong); }
.pre-read-card { padding: 28px 42px; background: var(--butter); color: #11110f; border-bottom: 1px solid #11110f; }
.pre-read-card > p { max-width: 72ch; line-height: 1.65; }
.pre-read-card .question { font-weight: 900; }
.article-paper { padding: 36px clamp(26px, 6vw, 74px); }
.article-kicker { display: flex; justify-content: space-between; gap: 18px; margin-bottom: 36px; }
.level-chip, .source-badge { padding: 6px 9px; border: 1px solid var(--line); font-size: .75rem; }
.article-paragraph { position: relative; max-width: 75ch; margin: 0 auto; padding: 24px 0 30px 48px; border-bottom: 1px solid var(--line); }
.article-paragraph.selected { background: color-mix(in srgb, var(--mint) 15%, transparent); }
.article-paragraph > p { margin: 0; font: 400 var(--reader-size)/1.82 Georgia, "Times New Roman", serif; }
.paragraph-number { position: absolute; left: 0; top: 30px; color: var(--muted); font: 600 .85rem/1 var(--display); }
.paragraph-tools { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.paragraph-tools button, .reveal-button, .save-button { min-height: 38px; padding: 0 10px; border: 1px solid var(--line); background: transparent; color: var(--ink); cursor: pointer; }
.role-label { display: none; width: 100%; color: var(--muted); font-size: .8rem; }
.role-label.visible { display: block; }
.vocab-term { display: inline; padding: 0 2px; border: 0; border-bottom: 2px solid var(--mint); background: transparent; color: inherit; font: inherit; cursor: pointer; }
.completion-zone, .quiz-section, .writing-section { padding: 44px; border-top: 1px solid var(--line-strong); }
.completion-zone { background: var(--mint); color: #11110f; }
.quiz-item { margin-top: 28px; padding: 22px; border: 1px solid var(--line-strong); }
.quiz-item legend { padding: 0 8px; font-weight: 800; }
.answer-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.answer-button { min-height: 58px; padding: 10px 14px; border: 1px solid var(--line); background: transparent; text-align: left; cursor: pointer; }
.answer-button.selected { background: var(--butter); color: #11110f; border-color: #11110f; }
.quiz-feedback { margin-top: 12px; }
.quiz-result { padding: 14px; background: var(--paper-2); }
.quiz-result.correct { background: color-mix(in srgb, var(--mint) 45%, var(--paper)); }
.quiz-result.wrong { background: color-mix(in srgb, var(--accent) 35%, var(--paper)); }
.quiz-submit-row, .writing-toolbar, .publish-row { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-top: 18px; }
.writing-section textarea { margin-top: 18px; font-family: Georgia, serif; font-size: var(--reader-size); line-height: 1.65; }
.feedback-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 24px; }
.feedback-item { padding: 20px; background: var(--paper-2); }
.polished-copy { grid-column: 1 / 3; }
.coach-panel { position: sticky; top: calc(var(--header-height) + 16px); max-height: calc(100vh - var(--header-height) - var(--nav-height) - 56px); overflow: auto; background: var(--paper); }
.coach-head { position: sticky; top: 0; z-index: 2; background: var(--paper); border-bottom: 1px solid var(--line-strong); }
.coach-head-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px; }
.coach-title { display: flex; align-items: center; gap: 9px; font-weight: 900; }
.coach-spark { display: grid; place-items: center; width: 28px; height: 28px; background: var(--butter); color: #11110f; }
.coach-head-actions { display: flex; align-items: center; gap: 10px; }
.coach-close { width: 34px; height: 34px; display: none; place-items: center; border: 1px solid var(--line); background: transparent; }
.coach-tabs { display: grid; grid-template-columns: repeat(3, 1fr); }
.coach-tab { min-height: 44px; border: 0; border-top: 1px solid var(--line); border-right: 1px solid var(--line); background: transparent; font-size: .75rem; cursor: pointer; }
.coach-tab:last-child { border-right: 0; }
.coach-tab.active { background: var(--primary); color: var(--on-primary); }
.coach-body { padding: 18px; }
.coach-placeholder { padding: 22px; color: var(--muted); line-height: 1.7; border: 1px dashed var(--line); }
.big-mark { display: block; margin-bottom: 10px; font: 600 3rem/1 var(--display); }
.help-card, .word-card { margin-bottom: 12px; padding: 16px; border: 1px solid var(--line); }
.help-card p, .word-card p { line-height: 1.55; }
.chunk-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.chunk { padding: 6px 8px; background: var(--butter); color: #11110f; }
.word-title { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; }
.word-title strong { font: 600 1.75rem/1 var(--display); }
.pronunciation { color: var(--muted); font-size: .78rem; }
.save-button.saved { background: var(--mint); color: #11110f; }

/* Admin */
.admin-grid { display: grid; grid-template-columns: minmax(330px, .75fr) minmax(0, 1.25fr); gap: 24px; margin-top: 26px; }
.form-card, .draft-placeholder, .draft-preview { padding: 28px; background: var(--paper); border: 1px solid var(--line-strong); }
.form-card { display: grid; gap: 18px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.mode-banner { padding: 16px; background: var(--mint); color: #11110f; border: 1px solid #11110f; line-height: 1.55; }
.mode-banner.demo { background: var(--butter); }
.required-note { color: var(--danger); font-weight: 400; }
.draft-placeholder { min-height: 360px; display: grid; place-content: center; text-align: center; }
.draft-preview h2 { font-size: 2rem; }
.draft-body-preview { max-height: 480px; overflow: auto; margin-top: 24px; padding: 20px; background: var(--paper-2); }
.draft-body-preview p { line-height: 1.72; }
.checklist { display: grid; gap: 12px; margin-top: 24px; }
.checklist label { display: grid; grid-template-columns: 22px 1fr; gap: 10px; font-weight: 400; line-height: 1.5; }
.checklist input { width: 18px; min-height: 18px; }

.toast { position: fixed; left: 50%; bottom: calc(var(--nav-height) + 38px); z-index: 100; max-width: min(90vw, 520px); padding: 13px 18px; background: var(--ink); color: var(--paper); border: 1px solid var(--paper); opacity: 0; pointer-events: none; transform: translate(-50%, 12px); transition: opacity 180ms, transform 240ms var(--ease-out); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

html[data-mode="night"] .program-track .is-current {
  background: #303548;
  color: #ffffff;
}

html[data-mode="night"] .program-track .is-current small { color: #d9dce7; }

@media (max-width: 900px) {
  :root { --header-height: 58px; --nav-height: 72px; }
  .app-header { padding: 0 16px; }
  .header-status { gap: 9px; }
  .header-timer { min-height: 38px; padding: 0 9px; }
  .header-timer small { display: none; }
  #app { padding: var(--header-height) 0 calc(var(--nav-height) + env(safe-area-inset-bottom)); }
  .page { border-left: 0; border-right: 0; }
  .bottom-nav { left: 0; bottom: 0; width: 100%; min-height: calc(var(--nav-height) + env(safe-area-inset-bottom)); transform: none; border-right: 0; border-bottom: 0; border-left: 0; padding-bottom: env(safe-area-inset-bottom); }
  .bottom-nav a { min-height: var(--nav-height); }
  .today-pass { min-height: 225px; gap: 14px; padding: 76px 18px 16px; }
  .today-pass h1 { font-size: clamp(2.15rem, 8.7vw, 3.05rem); line-height: .96; }
  .pass-note { max-width: 34ch; margin-top: 10px; font-size: .73rem; }
  .date-ticket { min-width: 76px; }
  .date-ticket strong { font-size: 3.55rem; }
  .program-board { grid-template-columns: 104px minmax(0, 1fr); min-height: 420px; }
  .program-track li { min-height: 105px; display: flex; flex-direction: column; justify-content: center; gap: 3px; padding: 10px 12px; }
  .program-track strong { font-size: 2.05rem; }
  .program-track time { font-size: .7rem; }
  .program-track small { display: none; }
  .program-copy { min-height: 342px; padding: 22px 18px 16px; }
  .program-meta { display: block; margin-bottom: 16px; }
  .program-meta span { display: block; margin-bottom: 5px; }
  .program-copy h2 { margin: auto 0 12px; font-size: clamp(2.3rem, 10.2vw, 3.45rem); line-height: .9; }
  .program-copy > p { display: -webkit-box; overflow: hidden; font-size: .82rem; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
  .lesson-facts { margin-top: 12px; }
  .program-cta { min-height: 78px; padding: 14px 20px; font-size: 1.2rem; }
  .today-page .next-programs { padding: 0; }
  .today-page .next-programs .section-title-row { display: none; }
  .today-page .program-list { border-top: 0; }
  .today-page .program-list article { min-height: 58px; }
  .today-page .program-list small { display: none; }
  .editor-note { grid-template-columns: 82px 1fr; }
  .note-stub { padding: 18px; }
  .editor-note > div:last-child { padding: 24px 20px; }
  .next-programs { padding: 36px 20px; }
  .section-title-row { align-items: start; }
  .section-title-row p { font-size: .82rem; }
  .program-list article { grid-template-columns: 104px 1fr; gap: 14px; }
  .availability { display: none; }
  .topic-block { font-size: .8rem; }

  .discover-hero, .learn-hero { min-height: 264px; grid-template-columns: 1fr 84px; }
  .discover-hero > div:first-child, .learn-hero > div:first-child { padding: 28px 22px; }
  .discover-hero h1, .learn-hero h1 { font-size: clamp(2.3rem, 9.5vw, 3.35rem); line-height: .98; }
  .discover-hero p, .learn-hero p { font-size: .82rem; }
  .discover-code strong, .learn-issue strong { font-size: 3.65rem; }
  .curation-stage { padding: 34px 20px; }
  .curation-intro { grid-template-columns: 1fr; gap: 12px; }
  .venue-grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  .venue-feature { grid-column: 1 / 3; grid-row: auto; min-height: 410px; border-right: 0; border-bottom: 1px solid #11110f; }
  .venue-feature h3 { margin-top: auto; }
  .venue-block { min-height: 210px; }
  .venue-block.plum { grid-column: 1 / 3; grid-row: auto; }
  .venue-block:nth-child(3) { border-right: 0; border-bottom: 1px solid #11110f; }

  .learning-ticket { grid-template-columns: repeat(2, 1fr); }
  .learning-ticket > div { min-height: 125px; border-bottom: 1px solid var(--line); }
  .learning-ticket > div:nth-child(2) { border-right: 0; }
  .learning-ticket > div:nth-child(3), .learning-ticket > div:nth-child(4) { border-bottom: 0; }
  .learning-ticket strong { font-size: 3rem; }
  .study-clock { grid-template-columns: 1fr 1fr; }
  .study-clock > div, .study-clock > button { min-height: 88px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
  .study-clock > :nth-child(2) { border-right: 0; }
  .study-clock > :nth-child(3), .study-clock > :nth-child(4) { border-bottom: 0; }
  .study-clock > button { min-width: 0; border-right: 0; }
  .calendar-month-controls { width: 100%; grid-template-columns: 48px 1fr 48px; }
  .calendar-sheet { padding: 20px; }
  .learning-bands { padding: 30px 20px; }
  .learning-band { grid-template-columns: 1fr auto; grid-template-rows: auto auto auto; min-height: 150px; padding: 20px; }
  .learning-band > span { grid-column: 1; grid-row: 1; }
  .learning-band strong { grid-column: 1; grid-row: 2; }
  .learning-band small { grid-column: 1; grid-row: 3; }
  .learning-band svg { grid-column: 2; grid-row: 1 / 4; }

  .profile-pass { min-height: 210px; padding: 28px 22px; }
  .profile-avatar { width: 84px; height: 84px; }
  .settings-heading { grid-template-columns: 1fr; gap: 8px; padding: 28px 20px 18px; }
  .setting-row { grid-template-columns: 1fr; gap: 16px; padding: 22px 20px; }
  .skin-grid { grid-template-columns: repeat(2, 1fr); padding: 0 20px 28px; }
  .skin-grid button:nth-child(2) { border-right: 1px solid var(--line); }
  .skin-grid button:nth-child(-n+2) { border-bottom: 0; }
  .archive-console { grid-template-columns: repeat(2, 1fr); margin: 0 20px 28px; }
  .archive-console > div { min-height: 102px; border-bottom: 1px solid var(--line); }
  .archive-console > div:nth-child(2) { border-right: 0; }
  .archive-console > div:nth-child(3), .archive-console > div:nth-child(4) { border-bottom: 0; }
  .archive-actions { border-right: 0 !important; }
  .account-form { grid-template-columns: 1fr; padding: 0 20px 24px; }
  .cloud-note { margin: 0 20px 28px; }
  .tools-section > a, .tools-section > button { grid-template-columns: 1fr auto; padding: 14px 20px; }
  .tools-section > * span { grid-column: 1; font-size: .78rem; }
  .tools-section svg { grid-column: 2; grid-row: 1 / 3; }

  .onboarding-welcome { display: block; }
  .onboarding-identity { padding: 18px 22px; }
  .welcome-copy { min-height: 42vh; padding: 38px 22px; border-right: 0; border-bottom: 1px solid #11110f; }
  .welcome-copy h1, .choice-stage > h1 { font-size: clamp(2.2rem, 9.2vw, 3.2rem); line-height: 1; }
  .welcome-copy > p:last-child { margin-top: 20px; font-size: .85rem; }
  .onboarding-form { padding: 30px 22px 70px; }
  .choice-stage { width: calc(100% - 36px); padding: 38px 0 130px; }
  .choice-grid { grid-template-columns: repeat(2, 1fr); }
  .choice-tile { min-height: 118px; }
  .choice-tile:nth-child(4n) { border-right: 1px solid #11110f; }
  .choice-tile:nth-child(2n) { border-right: 0; }
  .choice-tile:nth-last-child(-n+3) { border-bottom: 1px solid #11110f; }
  .choice-tile:last-child { border-bottom: 0; }
  .segmented-list { grid-template-columns: repeat(2, 1fr); }
  .segmented-list button:nth-child(2) { border-right: 0; border-bottom: 1px solid var(--line); }
  .segmented-list button:nth-child(1) { border-bottom: 1px solid var(--line); }
  .onboarding-bottom { padding: 12px 18px; }
  .onboarding-bottom.final p { display: none; }

  .topline { display: block; padding: 30px 22px; }
  .date-line { display: block; margin-top: 20px; }
  .metrics-grid { grid-template-columns: repeat(2, 1fr); }
  .metric-card:nth-child(2) { border-right: 0; }
  .metric-card:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .progress-columns, .library-grid, .admin-grid { grid-template-columns: 1fr; }
  .grade-row { grid-template-columns: repeat(2, 1fr); }
  .grade-row button:nth-child(2) { border-right: 0; border-bottom: 1px solid var(--line); }
  .grade-row button:nth-child(1) { border-bottom: 1px solid var(--line); }

  .reader-header { grid-template-columns: 1fr; padding: 28px 22px; }
  .reader-header h1 { font-size: clamp(2.45rem, 10.8vw, 3.85rem); }
  .reader-actions { flex-wrap: wrap; }
  .reader-layout { display: block; }
  .article-column { border-right: 0; }
  .pre-read-card, .completion-zone, .quiz-section, .writing-section { padding: 28px 22px; }
  .article-paper { padding: 28px 20px; }
  .article-paragraph { padding-left: 36px; }
  .answer-grid, .feedback-grid { grid-template-columns: 1fr; }
  .polished-copy { grid-column: auto; }
  .coach-panel { position: fixed; inset: auto 0 calc(var(--nav-height) + env(safe-area-inset-bottom)) 0; z-index: 80; max-height: min(72vh, 660px); border-top: 1px solid var(--line-strong); transform: translateY(110%); transition: transform 360ms var(--ease-out); box-shadow: 0 -20px 38px rgba(17,17,15,.18); }
  .coach-panel.mobile-open { transform: translateY(0); }
  .coach-close { display: grid; }
  .field-row { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .wordmark-en { display: none; }
  .edition-mark { display: none; }
  .header-timer strong { font-size: .9rem; }
  .bottom-nav a { font-size: .72rem; }
  .bottom-nav svg { width: 23px; height: 23px; }
  .program-board { grid-template-columns: 92px minmax(0, 1fr); }
  .program-track li { padding: 10px; }
  .program-copy { padding-inline: 17px; }
  .program-copy h2 { font-size: clamp(2.2rem, 10vw, 3.05rem); }
  .program-cta { padding-inline: 16px; }
  .today-pass { padding-inline: 18px; }
  .date-ticket { min-width: 66px; }
  .date-ticket strong { font-size: 3.25rem; }
  .choice-stage { width: calc(100% - 28px); }
  .calendar-sheet { padding: 14px 10px 18px; }
  .calendar-grid > * { min-height: 64px; }
  .calendar-day { padding: 14px 2px 4px; }
  .calendar-day-number { top: 5px; left: 5px; font-size: .68rem; }
  .calendar-check { display: none; }
  .study-clock strong { font-size: 1.45rem; }
  .study-clock > div, .study-clock > button { padding-inline: 14px; }
  .archive-actions { grid-template-columns: 1fr; }
  .onboarding-bottom { justify-content: stretch; }
  .onboarding-bottom .onboarding-primary { flex: 1; min-width: 0; }
  .onboarding-bottom > .onboarding-skip { flex: 0 0 auto; }
}

/* Approved Margin Rail reproduction — 2026-08-30
   The locked desktop/mobile composition is the visual contract for all primary pages. */

:root {
  --header-height: 62px;
  --nav-height: 98px;
  --sheet-width: min(calc(100% - 20px), var(--max));
}

body {
  background: var(--ground);
}

.app-shell {
  width: 100%;
  min-height: 100dvh;
}

.app-header,
body[data-surface="today"] .app-header {
  position: fixed;
  top: 18px;
  left: 50%;
  right: auto;
  width: var(--sheet-width);
  height: var(--header-height);
  padding: 0 38px;
  transform: translateX(-50%);
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--line-strong);
  border-bottom-color: var(--line);
}

.header-brand,
.header-tools,
.header-tool,
.header-status {
  display: flex;
  align-items: center;
}

.header-brand { min-width: 0; gap: 18px; }

.wordmark {
  gap: 9px;
  color: var(--ink);
  font-weight: 400;
  white-space: nowrap;
}

.wordmark-cn {
  font-family: Georgia, "STSong", "SimSun", serif;
  font-size: 2rem;
  font-weight: 400;
  letter-spacing: -.05em;
}

.wordmark-en {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.9rem;
  font-weight: 400;
  letter-spacing: -.025em;
}

.header-divider {
  width: 1px;
  height: 28px;
  background: var(--line);
}

.header-tagline {
  color: var(--muted);
  font-family: Georgia, "STSong", "SimSun", serif;
  font-size: 1rem;
  letter-spacing: .035em;
  white-space: nowrap;
}

.header-tools { gap: 17px; }
.header-tool { gap: 8px; padding: 7px 0; border: 0; background: transparent; color: var(--muted); cursor: pointer; }
.header-tool svg { width: 22px; height: 22px; }
.header-tool span { font-family: Georgia, "STSong", "SimSun", serif; font-size: .95rem; }
.header-tool:hover { color: var(--ink); }
.header-tool-rule { width: 1px; height: 28px; background: var(--line); }
.header-avatar { width: 34px; height: 34px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--plum); color: var(--color-inverse); font-family: Georgia, serif; font-size: 1.1rem; cursor: pointer; }
.header-menu { width: 24px; height: 34px; display: grid; place-items: center; padding: 0; border: 0; background: transparent; color: var(--muted); cursor: pointer; }
.header-menu svg { width: 20px; height: 20px; }

.header-timer { display: none; }
.header-timer[hidden] { display: none; }

body[data-surface="today"] #app,
#app {
  width: var(--sheet-width);
  min-height: 100dvh;
  margin: 0 auto;
  padding: calc(18px + var(--header-height)) 0 var(--nav-height);
}

.page { animation: margin-sheet-arrival 360ms var(--ease-out) both; }

.today-page,
.discover-page,
.learn-page,
.me-page,
.settings-page {
  min-height: calc(100dvh - 18px - var(--header-height) - var(--nav-height));
  border: 1px solid var(--line-strong);
  border-top: 0;
  border-bottom: 0;
  background: var(--paper);
}

.bottom-nav {
  left: 50%;
  bottom: 0;
  width: var(--sheet-width);
  height: var(--nav-height);
  min-height: var(--nav-height);
  transform: translateX(-50%);
  background: var(--paper);
  border: 1px solid var(--line-strong);
}

.bottom-nav a {
  min-height: calc(var(--nav-height) - 2px);
  flex-direction: row;
  gap: 14px;
  color: var(--muted);
  font-family: Georgia, "STSong", "SimSun", serif;
  font-size: 1.05rem;
  font-weight: 400;
}

.bottom-nav svg { width: 31px; height: 31px; stroke-width: 1.65; }
.bottom-nav a::after { inset: auto 29% 0; height: 3px; background: var(--accent) !important; transform-origin: center; }
.bottom-nav a.active { color: var(--accent); background: transparent; }

/* Today — exact structure of the approved reference */

.today-issue,
.editorial-shell {
  grid-template-columns: clamp(280px, 20.7vw, 320px) minmax(0, 1fr);
  min-height: calc(100dvh - 18px - var(--header-height) - var(--nav-height));
}

.margin-rail {
  gap: 0;
  padding: 54px 42px 38px 58px;
  background: var(--paper);
  border-right: 1px solid var(--accent);
}

.margin-rail::before,
.margin-rail::after { display: none; }

.rail-date { align-items: flex-start; padding-bottom: 28px; }
.rail-date strong { color: var(--primary); font: 400 4.05rem/.86 Georgia, serif; }
.rail-date span { margin-top: 7px; color: var(--primary); font: 400 1.08rem/1 Georgia, serif; letter-spacing: .01em; text-transform: none; }
.rail-date span:last-child { margin-top: 12px; color: var(--ink); }
.rail-date::after { content: ""; width: 94px; height: 1px; margin-top: 14px; background: var(--primary); opacity: .65; }

.rail-mobile-issue,
.rail-mobile-bookmark { display: none; }

.rail-note { padding: 18px 0 30px; border-bottom: 1px solid var(--line); }
.rail-note > span,
.rail-section-title { color: var(--primary); font-family: Georgia, "STSong", "SimSun", serif; font-size: 1rem; font-weight: 600; letter-spacing: .04em; }
.rail-note p { margin-top: 14px; color: var(--muted); font-family: Georgia, "STSong", "SimSun", serif; font-size: .88rem; line-height: 1.72; }

.rail-facts-wrap { padding: 22px 0 28px; border-bottom: 1px solid var(--line); }
.rail-facts { gap: 9px; margin-top: 18px; padding: 0; border: 0; }
.rail-facts div { grid-template-columns: 54px minmax(0, 1fr); }
.rail-facts dt { color: var(--muted); font-family: Georgia, "STSong", "SimSun", serif; font-size: .78rem; }
.rail-facts dd { min-width: 0; color: var(--muted); font-family: Georgia, "STSong", "SimSun", serif; font-size: .8rem; }
.source-stamp { display: inline-block; max-width: 100%; padding: 3px 5px; border: 1px solid var(--line); font-size: .62rem; line-height: 1.3; text-align: left; }

.rail-timer { margin-top: auto; padding-top: 26px; }
.rail-timer > span { margin: 0; color: var(--primary); font: 600 .88rem/1.3 Georgia, "STSong", serif; letter-spacing: .03em; text-transform: none; }
.rail-timer > div { display: flex; align-items: center; gap: 16px; margin-top: 18px; }
.rail-timer i { position: relative; width: 50px; height: 50px; border: 2px solid var(--accent); border-radius: 50%; }
.rail-timer i::before,
.rail-timer i::after { content: ""; position: absolute; left: 23px; top: 10px; width: 1px; height: 14px; background: var(--accent); transform-origin: bottom; }
.rail-timer i::after { transform: rotate(90deg); }
.rail-timer strong { margin: 0; color: var(--ink); font: 400 2.35rem/1 Georgia, serif; }
.rail-timer small { margin: 4px 0 0 66px; color: var(--muted); font-family: Georgia, "STSong", serif; }

.issue-content,
.editorial-content {
  min-width: 0;
  padding: 62px clamp(52px, 6vw, 92px) 34px;
}

.issue-lead {
  position: relative;
  padding: 8px 118px 20px 0;
  border: 0;
}

.issue-lead::after { left: 12px; right: auto; bottom: 11px; width: 118px; height: 2px; background: var(--plum); transform: rotate(-3deg); }
.issue-lead h1 { max-width: 960px; margin: 0; color: var(--plum); font: 400 clamp(3rem, 4vw, 3.75rem)/1.02 var(--display-cn); letter-spacing: -.035em; text-wrap: pretty; }
.issue-folio { position: absolute; top: 6px; right: 0; color: var(--primary); font: 400 1.15rem/1 Georgia, serif; }
.issue-folio::after { content: ""; display: block; width: 32px; height: 1px; margin-top: 8px; background: var(--primary); }

.issue-story { display: block; padding: 32px 0 24px; }
.issue-story h2 { max-width: none; margin: 0; color: #252524; font: 400 clamp(3.7rem, 5.3vw, 5.1rem)/.98 Georgia, "Times New Roman", serif; letter-spacing: -.045em; text-wrap: balance; }
.story-subtitle { max-width: none; margin: 14px 0 0; color: var(--muted); font: 400 clamp(1.2rem, 1.7vw, 1.55rem)/1.35 Georgia, serif; }

.story-meta { display: flex; align-items: center; gap: 0; margin-top: 32px; color: var(--primary); font: 600 .82rem/1.2 Georgia, "STSong", serif; letter-spacing: .01em; }
.story-meta span { min-width: 0; display: flex; align-items: center; gap: 8px; padding: 0 18px; border-right: 1px solid var(--line); white-space: nowrap; }
.story-meta span:first-child { padding-left: 0; }
.story-meta span:last-child { max-width: 42%; border: 0; overflow: hidden; text-overflow: ellipsis; }
.story-meta svg { width: 21px; height: 21px; color: var(--primary); }

.story-value-row { display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: 42px; align-items: end; margin-top: 30px; }
.story-value { max-width: 72ch; padding: 0; border: 0; }
.story-value h3 { color: var(--plum); font-family: Georgia, "STSong", serif; font-size: 1rem; font-weight: 600; }
.story-value p { margin-top: 10px; color: var(--muted); font-family: Georgia, "STSong", serif; font-size: .9rem; line-height: 1.65; }
.issue-cta { min-height: 66px; padding: 0 24px 0 28px; border: 0; background: var(--accent); color: #fffaf3; font-family: Georgia, "STSong", serif; font-size: 1.05rem; font-weight: 600; }

.today-page .next-programs { margin-top: 0; padding: 16px 0 0; border-top: 1px solid var(--primary); background: transparent; }
.today-page .section-title-row { margin: 0 0 7px; }
.today-page .section-title-row h2 { margin: 0; color: var(--primary); font-family: Georgia, "STSong", serif; font-size: 1rem; font-weight: 600; }
.today-page .program-list { border: 0; }
.today-page .program-list article { min-height: 42px; grid-template-columns: 48px minmax(0, 1fr) 150px 64px 68px 28px; gap: 12px; padding: 0; border-bottom: 1px solid var(--line); }
.today-page .program-list article:last-child { border-bottom: 0; }
.today-page .program-list .list-number { color: var(--primary); font: 400 .85rem/1 Georgia, serif; }
.today-page .program-list strong { overflow: hidden; color: var(--ink); font: 400 .88rem/1.2 Georgia, serif; text-overflow: ellipsis; white-space: nowrap; }
.today-page .program-list small { margin: 0; color: var(--primary); font: 400 .72rem/1 Georgia, "STSong", serif; }
.today-page .program-list button { display: grid; place-items: center; padding: 0; border: 0; background: transparent; color: var(--primary); cursor: pointer; }
.today-page .program-list button svg,
.list-bookmark svg { width: 19px; height: 19px; }

/* The other primary pages inherit the same publication world */

.editorial-lead { min-height: 116px; padding: 4px 112px 24px 0; border-bottom: 1px solid var(--line); }
.editorial-lead::after { right: 0; width: 74px; height: 2px; background: var(--plum); }
.editorial-lead::before { position: absolute; top: 8px; right: 0; color: var(--primary); font: 400 .78rem/1 Georgia, serif; letter-spacing: .08em; }
.discover-lead::before { content: "DISCOVER 02"; }
.learn-lead::before { content: "LEARN 03"; }
.editorial-lead h1 { max-width: 930px; margin: 0; color: var(--plum); font: 400 clamp(3rem, 4vw, 3.75rem)/1.02 var(--display-cn); letter-spacing: -.035em; }
.editorial-lead p { max-width: 66ch; margin-top: 14px; color: var(--muted); font-family: Georgia, "STSong", serif; font-size: .88rem; line-height: 1.65; }

.section-margin-rail .rail-date { padding-bottom: 20px; }
.section-margin-rail .rail-date strong { font-size: 3.6rem; }
.section-margin-rail .rail-date span { font-family: var(--display); font-size: .86rem; letter-spacing: .08em; }
.section-margin-rail .rail-issue { align-items: flex-start; margin: 6px 0 24px; padding: 18px 0; border-block: 1px solid var(--line); }
.section-margin-rail .rail-issue span { margin: 0; color: var(--primary); font: 600 .75rem/1.3 Georgia, "STSong", serif; letter-spacing: .04em; text-transform: none; }
.section-margin-rail .rail-issue strong { margin-top: 8px; color: var(--primary); font: 400 1.6rem/1.05 Georgia, serif; }
.section-margin-rail .rail-facts { display: grid; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); }

.editorial-filter { margin-top: 28px; border-color: var(--line); }
.editorial-filter button { background: var(--paper); font-family: Georgia, "STSong", serif; }
.editorial-filter button[aria-pressed="true"] { background: var(--primary); }
.editorial-catalogue { border-color: var(--line); }
.catalogue-heading,
.catalogue-feature,
.catalogue-list article { font-family: Georgia, "STSong", serif; }
.catalogue-feature { background: color-mix(in srgb, var(--paper) 80%, var(--color-fog)); }
.catalogue-feature h3 { font-family: Georgia, "Times New Roman", serif; font-size: clamp(2.2rem, 3.5vw, 3.25rem); }

.learn-content .learning-directory { margin-top: 28px; }
.learning-directory { border-color: var(--primary); }
.learning-directory a { min-height: 88px; grid-template-columns: 164px minmax(0, 1fr) auto; padding: 16px 26px; font-family: Georgia, "STSong", serif; }
.learning-directory span { color: var(--primary); font-family: Georgia, "STSong", serif; font-size: .85rem; }
.learning-directory strong { font-size: 1.02rem; }
.learn-content .next-study-action { margin-top: 24px; border-color: var(--accent); font-family: Georgia, "STSong", serif; }
.compact-calendar { margin-top: 28px; border-color: var(--primary); }
.compact-calendar-heading { padding: 18px 22px; background: color-mix(in srgb, var(--paper) 82%, var(--color-fog)); }
.compact-calendar-heading h2 { color: var(--plum); font-family: var(--display-cn); }
.compact-calendar-grid { padding: 15px 22px 5px; }
.compact-calendar .calendar-grid > * { min-height: 48px; }
.compact-calendar-action { min-height: 62px; }

.learning-overview { margin-top: 28px; border: 1px solid var(--primary); }
.learn-content .learning-ticket { margin: 0; border: 0; border-bottom: 1px solid var(--primary); }
.learn-content .learning-ticket > div { min-height: 92px; }
.learn-content .learning-ticket strong { font-family: Georgia, serif; font-size: 2.2rem; font-weight: 400; }
.learn-content .study-clock { border: 0; background: color-mix(in srgb, var(--paper) 82%, var(--color-fog)); }
.learn-content .study-clock > div,
.learn-content .study-clock > button { min-height: 78px; }

.profile-summary { min-height: 142px; padding: 4px 0 28px; }
.profile-summary .profile-avatar { background: var(--plum); }
.profile-copy h1 { color: var(--plum); font: 400 clamp(3rem, 4vw, 3.75rem)/1 var(--display-cn); }
.profile-copy p,
.profile-copy span { font-family: Georgia, "STSong", serif; }
.settings-entry { align-self: start; border-color: var(--primary); font-family: Georgia, "STSong", serif; }
.learning-archive { border-color: var(--primary); }
.learning-archive > header { background: color-mix(in srgb, var(--paper) 82%, var(--color-fog)); }
.learning-archive h2 { color: var(--plum); }

@media (max-width: 900px) {
  :root {
    --header-height: 56px;
    --nav-height: 68px;
    --sheet-width: 100%;
  }

  .app-header,
  body[data-surface="today"] .app-header {
    top: 0;
    width: 100%;
    padding: 0 16px;
    border: 0;
    border-bottom: 1px solid var(--line-strong);
  }

  .header-brand { gap: 0; }
  .wordmark-cn { font-size: 1.45rem; }
  .wordmark-en { display: inline; font-size: 1.38rem; }
  .header-divider,
  .header-tagline,
  .header-tools { display: none; }

  .header-timer:not([hidden]) { min-height: 0; display: flex; padding: 0; border: 0; background: transparent; color: var(--ink); }
  .header-timer svg { width: 18px; height: 18px; }
  .header-timer > span { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
  .header-timer strong { font: 400 .82rem/1 Georgia, serif; }
  .header-timer small { color: var(--muted); font: 400 .58rem/1 var(--ui); }

  body[data-surface="today"] #app,
  #app { width: 100%; padding: var(--header-height) 0 var(--nav-height); }

  .today-page,
  .discover-page,
  .learn-page,
  .me-page,
  .settings-page { min-height: calc(100dvh - var(--header-height) - var(--nav-height)); border: 0; }

  .bottom-nav { width: 100%; height: var(--nav-height); min-height: var(--nav-height); border-inline: 0; }
  .bottom-nav a { min-height: var(--nav-height); flex-direction: row; gap: 6px; font-family: var(--ui); font-size: .78rem; font-weight: 700; }
  .bottom-nav svg { width: 22px; height: 22px; }
  .bottom-nav a::after { inset-inline: 25%; height: 3px; }

  .today-issue,
  .editorial-shell { grid-template-columns: 74px minmax(0, 1fr); min-height: calc(100dvh - var(--header-height) - var(--nav-height)); }

  .margin-rail { align-items: center; padding: 24px 9px 28px; border-right-color: var(--accent); }
  .rail-date { align-items: center; width: 100%; padding-bottom: 18px; text-align: center; }
  .rail-date strong { font-size: 2.75rem; }
  .rail-date span { margin-top: 5px; font-size: .68rem; }
  .rail-date span:last-child { margin-top: 8px; font-size: .58rem; }
  .rail-date::after { width: 42px; margin-top: 10px; }
  .rail-mobile-issue { display: flex; flex-direction: column; align-items: center; gap: 4px; padding-top: 12px; color: var(--primary); }
  .rail-mobile-issue span { font: 600 .52rem/1 var(--display); letter-spacing: .08em; }
  .rail-mobile-issue strong { font: 400 1.2rem/1 Georgia, serif; }
  .rail-mobile-bookmark { display: block; margin-top: auto; color: var(--primary); }
  .rail-mobile-bookmark svg { width: 24px; height: 24px; }
  .today-page .rail-note,
  .today-page .rail-facts-wrap,
  .today-page .rail-timer { display: none; }

  .issue-content,
  .editorial-content { padding: 25px 18px 36px 20px; }
  .issue-lead { padding: 3px 0 23px; }
  .issue-lead h1 { max-width: none; font-size: clamp(2rem, 9vw, 2.55rem); line-height: 1.02; }
  .issue-lead::after { left: 5px; bottom: 13px; width: 74px; }
  .issue-folio { display: none; }

  .issue-story { padding: 26px 0 22px; }
  .issue-story h2 { font-size: clamp(2.65rem, 12vw, 4rem); line-height: .98; text-wrap: pretty; }
  .story-subtitle { margin-top: 13px; font-size: 1rem; line-height: 1.35; }
  .story-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 10px; margin-top: 24px; }
  .story-meta span { padding: 0 8px; border-right: 0; font-size: .64rem; white-space: normal; }
  .story-meta span:nth-child(odd) { padding-left: 0; border-right: 1px solid var(--line); }
  .story-meta span:last-child { grid-column: 1 / 3; max-width: 100%; padding: 9px 0 0; border-top: 1px solid var(--line); }
  .story-meta svg { width: 17px; height: 17px; }
  .story-value-row { display: block; margin-top: 24px; }
  .story-value h3 { font-size: .9rem; }
  .story-value p { font-size: .78rem; line-height: 1.62; }
  .issue-cta { width: 100%; min-height: 58px; margin-top: 22px; font-size: .92rem; }

  .today-page .next-programs { padding-top: 14px; }
  .today-page .section-title-row h2 { font-size: .9rem; }
  .today-page .program-list article { min-height: 56px; grid-template-columns: 32px minmax(0, 1fr) 22px; gap: 8px; }
  .today-page .program-list article > small { display: none; }
  .today-page .program-list strong { font-size: .76rem; white-space: normal; }
  .today-page .program-list button,
  .today-page .program-list .list-bookmark { grid-column: 3; }

  .section-margin-rail .rail-date { padding-bottom: 16px; }
  .section-margin-rail .rail-date strong { font-size: 2.4rem; }
  .section-margin-rail .rail-date span { font-size: .54rem; text-align: center; }
  .section-margin-rail .rail-issue { align-items: center; width: 100%; margin: 0; padding: 14px 0; text-align: center; }
  .section-margin-rail .rail-issue span { font-size: .52rem; }
  .section-margin-rail .rail-issue strong { font-size: .82rem; overflow-wrap: anywhere; }
  .section-margin-rail .rail-note,
  .section-margin-rail .rail-facts { display: none; }

  .editorial-lead { min-height: 0; padding: 2px 0 20px; }
  .editorial-lead::before { display: none; }
  .editorial-lead h1 { font-size: clamp(2rem, 9vw, 2.5rem); line-height: 1.02; }
  .editorial-lead p { margin-top: 12px; font-size: .76rem; }
  .editorial-filter { margin-top: 20px; }
  .editorial-filter button { min-height: 44px; }

  .learn-content .learning-directory { margin-top: 20px; }
  .learning-directory a { min-height: 84px; grid-template-columns: 1fr auto; gap: 7px 12px; padding: 14px 14px; }
  .learning-directory a span { grid-column: 1 / 3; }
  .learning-directory strong { font-size: .82rem; line-height: 1.45; }
  .learn-content .next-study-action { margin-top: 18px; }
  .compact-calendar { margin-top: 22px; }
  .compact-calendar-heading { grid-template-columns: 1fr; gap: 12px; padding: 14px; }
  .compact-calendar-grid { padding: 10px 8px 4px; }
  .compact-calendar .calendar-grid > * { min-height: 40px; }
  .compact-calendar-action { padding: 10px 12px; }

  .learning-overview { margin-top: 22px; }
  .learn-content .learning-ticket { grid-template-columns: repeat(2, 1fr); }
  .learn-content .learning-ticket > div { min-height: 86px; }
  .learn-content .learning-ticket > div:nth-child(2) { border-right: 0; }
  .learn-content .learning-ticket > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .learn-content .study-clock { grid-template-columns: repeat(2, 1fr); }
  .learn-content .study-clock > div,
  .learn-content .study-clock > button { min-height: 78px; }

  .profile-summary { grid-template-columns: 58px minmax(0, 1fr) 44px; gap: 12px; min-height: 0; padding-bottom: 22px; }
  .profile-summary .profile-avatar { width: 58px; height: 58px; font-size: 1.8rem; }
  .profile-copy h1 { font-size: 2.1rem; }
  .settings-entry { width: 44px; min-width: 44px; height: 44px; min-height: 44px; padding: 0; }
  .settings-entry span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .learning-archive { margin-top: 22px; }
}

@media (max-width: 420px) {
  .catalogue-feature { grid-template-columns: 1fr; }
  .catalogue-feature > button { grid-column: 1; }
  .catalogue-feature h3 { font-size: 1.8rem; }
  .archive-metrics { grid-template-columns: repeat(2, 1fr); }
  .archive-note { grid-template-columns: 1fr; }
}

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

/* --------------------------------------------------------------------------
   Margin Rail — approved desktop and mobile visual world
   -------------------------------------------------------------------------- */

body {
  background-color: var(--ground);
  background-image: none;
}

body::after {
  z-index: 90;
  opacity: .032;
}

.app-header,
body[data-surface="today"] .app-header {
  position: fixed;
  height: var(--header-height);
  padding-inline: max(24px, calc((100vw - var(--max)) / 2 + 24px));
  background: color-mix(in srgb, var(--paper) 96%, transparent);
  color: var(--ink);
  border-bottom: 1px solid var(--line-strong);
}

body[data-surface="today"] #app,
#app {
  padding: calc(var(--header-height) + 18px) 0 calc(var(--nav-height) + 34px);
}

.wordmark {
  gap: 10px;
  font-weight: 700;
}

.wordmark-cn {
  font-family: var(--display-cn);
  font-size: 1.45rem;
  font-weight: 400;
}

.wordmark-en {
  font-family: var(--reader);
  font-size: 1.32rem;
  font-weight: 400;
}

.header-timer {
  min-height: 40px;
  border-color: var(--line);
  background: transparent;
}

body[data-surface="today"] .header-timer { background: transparent; }

.edition-mark { color: var(--muted); }

.bottom-nav {
  bottom: 0;
  width: min(100%, var(--max));
  min-height: var(--nav-height);
  background: color-mix(in srgb, var(--paper) 97%, transparent);
  border-color: var(--line-strong);
  border-bottom: 0;
}

.bottom-nav a {
  min-height: var(--nav-height);
  font-weight: 650;
}

.bottom-nav a::after { inset-inline: 26%; height: 3px; }
.bottom-nav a:nth-child(n)::after { background: var(--accent); }
.bottom-nav a.active { color: var(--ink); background: color-mix(in srgb, var(--paper) 88%, var(--fog, #c9d5da)); }

.page {
  animation: margin-sheet-arrival 420ms var(--ease-out) both;
}

@keyframes margin-sheet-arrival {
  from { clip-path: inset(0 0 2.5%); filter: blur(2px); }
  to { clip-path: inset(0); filter: blur(0); }
}

/* Approved Today composition */

.today-page {
  overflow: hidden;
  border: 1px solid var(--line-strong);
  background: var(--paper);
}

.today-issue {
  display: grid;
  grid-template-columns: 252px minmax(0, 1fr);
  min-height: calc(100dvh - var(--header-height) - var(--nav-height) - 54px);
}

.margin-rail {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 30px;
  padding: 42px 30px 36px;
  background: color-mix(in srgb, var(--paper) 90%, var(--ground));
  border-right: 1px solid var(--accent);
}

.margin-rail::before,
.margin-rail::after {
  content: "";
  position: absolute;
  right: -5px;
  width: 9px;
  height: 1px;
  background: var(--accent);
}

.margin-rail::before { top: 25%; }
.margin-rail::after { bottom: 25%; }

.rail-date,
.rail-issue,
.rail-timer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.rail-date strong {
  color: var(--primary);
  font: 400 4rem/.9 var(--reader);
  font-variant-numeric: tabular-nums;
}

.rail-date span,
.rail-issue span,
.rail-timer span {
  margin-top: 8px;
  color: var(--muted);
  font: 600 .78rem/1.35 var(--display);
  letter-spacing: .05em;
  text-transform: uppercase;
}

.rail-issue {
  padding-block: 18px;
  border-block: 1px solid var(--line);
}

.rail-issue strong,
.rail-timer strong {
  margin-top: 6px;
  color: var(--primary);
  font: 600 2rem/1 var(--display);
  font-variant-numeric: tabular-nums;
}

.rail-note > span {
  color: var(--primary);
  font-weight: 800;
}

.rail-note p {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: .88rem;
  line-height: 1.72;
}

.rail-facts {
  display: grid;
  gap: 9px;
  margin: 0;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.rail-facts div { display: grid; grid-template-columns: 52px 1fr; gap: 10px; }
.rail-facts dt { color: var(--muted); font-size: .75rem; }
.rail-facts dd { margin: 0; font-size: .78rem; text-align: right; }
.rail-timer { margin-top: auto; }

.issue-content {
  min-width: 0;
  padding: 48px 58px 44px;
}

.issue-lead {
  position: relative;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--line);
}

.issue-lead::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  width: 74px;
  height: 3px;
  background: var(--plum);
}

.issue-mark,
.story-meta {
  font: 600 .76rem/1.35 var(--display);
  letter-spacing: .055em;
}

.issue-mark { color: var(--primary); }

.issue-lead h1 {
  max-width: 760px;
  margin: 16px 0 0;
  color: var(--plum);
  font-family: var(--display-cn);
  font-size: clamp(3.25rem, 4.7vw, 3.75rem);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -.025em;
  text-wrap: balance;
}

.issue-story {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(250px, 31%);
  gap: 22px 36px;
  padding-block: 34px 30px;
}

.story-meta,
.issue-story h2,
.story-subtitle { grid-column: 1 / 3; }

.story-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  color: var(--muted);
}

.story-meta span {
  padding: 0 13px;
  border-right: 1px solid var(--line);
}

.story-meta span:first-child { padding-left: 0; }
.story-meta span:last-child { border-right: 0; }

.issue-story h2 {
  max-width: 930px;
  margin: 4px 0 0;
  color: var(--ink);
  font-family: var(--reader);
  font-size: clamp(3.15rem, 5.25vw, 4.25rem);
  font-weight: 400;
  line-height: 1.01;
  letter-spacing: -.03em;
  text-wrap: balance;
}

.story-subtitle {
  max-width: 68ch;
  margin: -6px 0 0;
  color: var(--muted);
  font-family: var(--reader);
  font-size: 1.08rem;
  line-height: 1.5;
}

.story-value {
  align-self: end;
  max-width: 64ch;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.story-value h3 {
  margin: 0;
  color: var(--plum);
  font-size: 1rem;
}

.story-value p {
  margin: 9px 0 0;
  color: var(--muted);
  font-size: .9rem;
  line-height: 1.68;
}

.issue-cta {
  min-height: 68px;
  align-self: end;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 0 24px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--on-accent);
  cursor: pointer;
  font-size: 1.05rem;
  font-weight: 800;
  transition: background 180ms ease, color 180ms ease;
}

.issue-cta svg { transition: transform 220ms var(--ease-out); }
.issue-cta:hover { background: color-mix(in srgb, var(--accent) 90%, var(--ink)); }
.issue-cta:hover svg { transform: translateX(7px); }

.reading-route {
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  list-style: none;
  border-block: 1px solid var(--line-strong);
}

.reading-route li {
  min-width: 0;
  min-height: 76px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 3px 10px;
  align-content: center;
  padding: 12px 16px;
  border-right: 1px solid var(--line);
}

.reading-route li:last-child { border-right: 0; }
.reading-route li > span { color: var(--primary); font: 600 .82rem/1 var(--display); }
.reading-route li strong { font-size: .9rem; }
.reading-route li small { grid-column: 2; color: var(--muted); font-size: .7rem; }
.reading-route li.is-current { background: color-mix(in srgb, var(--paper) 60%, #c9d5da); }
.reading-route li.is-done > span { color: var(--mint); }

.today-page .next-programs { padding: 34px 0 0; background: transparent; }
.today-page .section-title-row h2 { font-family: var(--display-cn); font-size: 1.75rem; font-weight: 400; }
.today-page .program-list { border-top-color: var(--line-strong); }
.today-page .program-list article { grid-template-columns: 58px minmax(0, 1fr) auto; min-height: 64px; padding: 10px 0; }
.list-number { color: var(--primary); font: 600 .95rem/1 var(--display); }
.today-page .program-list strong { font-family: var(--reader); font-size: .98rem; font-weight: 400; }

/* Shared editorial refinements */

.discover-page,
.learn-page,
.me-page,
.reader-page,
.page > .topline,
.page > .panel,
.page > .empty-card {
  background: var(--paper);
}

.discover-hero,
.learn-hero {
  min-height: 250px;
  grid-template-columns: minmax(0, 1fr) 132px;
  background: #c9d5da;
  color: var(--ink);
}

.learn-hero { background: color-mix(in srgb, var(--paper) 36%, var(--plum)); color: var(--on-primary); }
.discover-hero > div:first-child,
.learn-hero > div:first-child { padding: 38px 44px; }
.discover-hero h1,
.learn-hero h1 { max-width: 720px; font-size: clamp(3rem, 4.5vw, 3.7rem); }
.discover-code,
.learn-issue { border-left-color: currentColor; }
.discover-code strong,
.learn-issue strong { font-size: 4.4rem; }

.curation-stage { padding: 44px; }
.venue-grid { grid-template-rows: 230px 210px; }
.venue-feature { background: var(--primary); }
.venue-block.butter { background: color-mix(in srgb, var(--paper) 54%, var(--butter)); }
.venue-block.mint { background: color-mix(in srgb, var(--paper) 45%, var(--mint)); }
.venue-block.plum { background: var(--plum); }

.next-study-action {
  min-height: 92px;
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
  padding: 18px 26px;
  background: var(--accent);
  color: var(--on-accent);
  border-bottom: 1px solid var(--line-strong);
  text-decoration: none;
}

.next-study-action > span { font: 600 .88rem/1 var(--display); letter-spacing: .04em; }
.next-study-action div { display: grid; gap: 5px; }
.next-study-action strong { font-size: 1.18rem; }
.next-study-action small { color: color-mix(in srgb, var(--on-accent) 78%, transparent); }
.next-study-action svg { width: 26px; height: 26px; transition: transform 220ms var(--ease-out); }
.next-study-action:hover svg { transform: translateX(7px); }

.learning-ticket > div { min-height: 126px; }
.learning-ticket strong { font-size: 3.2rem; }
.study-clock { background: color-mix(in srgb, var(--paper) 86%, #c9d5da); }
.learning-bands { padding: 34px 42px; }
.learning-band { min-height: 116px; }
.learning-band.cobalt { background: var(--primary); }
.learning-band.mint { background: color-mix(in srgb, var(--paper) 30%, var(--mint)); }
.learning-band.coral { background: var(--accent); color: var(--on-accent); }

.profile-pass { background: var(--plum); color: var(--color-inverse); }
.settings-heading { padding-block: 26px 16px; }
.setting-row { min-height: 106px; }
.skin-grid button { background: color-mix(in srgb, var(--paper) 92%, var(--ground)); }

.reader-header {
  padding: 36px 42px;
  background: #c9d5da;
  color: var(--ink);
}

.reader-header h1 {
  font-family: var(--reader);
  font-size: clamp(2.75rem, 5vw, 4.25rem);
  font-weight: 400;
  letter-spacing: -.03em;
}

.article-paper { background: var(--paper); }
.article-paragraph p { max-width: var(--reader-measure); font-family: var(--reader); }
.pre-read-card { background: color-mix(in srgb, var(--paper) 52%, #c9d5da); }
.coach-panel { background: var(--paper); }
.coach-tab.active { background: var(--primary); }

.onboarding-welcome { background: var(--paper); }
.welcome-copy { background: #c9d5da; }
.welcome-copy h1,
.choice-stage > h1 { font-size: clamp(3.1rem, 5vw, 3.75rem); }
.onboarding-form { background: var(--paper); }
.choice-tile.color-1 { background: var(--primary); }
.choice-tile.color-2 { background: color-mix(in srgb, var(--paper) 40%, var(--accent)); }
.choice-tile.color-3 { background: color-mix(in srgb, var(--paper) 42%, var(--mint)); }
.choice-tile.color-4 { background: var(--plum); }

.rights-desk { margin-top: 28px; }
.rights-desk > .secondary-button { margin-top: 28px; }

@media (max-width: 900px) {
  .app-header,
  body[data-surface="today"] .app-header { padding-inline: 16px; }

  body[data-surface="today"] #app,
  #app { padding: var(--header-height) 0 calc(var(--nav-height) + env(safe-area-inset-bottom)); }

  .today-page { border-inline: 0; }
  .today-issue { grid-template-columns: 124px minmax(0, 1fr); min-height: 0; }
  .margin-rail { padding: 30px 18px; }
  .rail-date strong { font-size: 3.2rem; }
  .rail-note p { font-size: .78rem; }
  .rail-facts { display: none; }
  .issue-content { padding: 34px 28px 44px; }
  .issue-story { grid-template-columns: 1fr; }
  .story-meta,
  .issue-story h2,
  .story-subtitle { grid-column: 1; }
  .issue-story h2 { font-size: clamp(2.6rem, 7.5vw, 3.65rem); }
  .issue-cta { width: 100%; }
  .reading-route li { min-height: 66px; padding: 10px; }
  .reading-route li small { display: none; }

  .discover-hero,
  .learn-hero { min-height: 230px; grid-template-columns: 1fr 84px; }
  .discover-hero > div:first-child,
  .learn-hero > div:first-child { padding: 30px 24px; }
  .discover-hero h1,
  .learn-hero h1 { font-size: clamp(2.55rem, 8vw, 3.25rem); }
  .next-study-action { grid-template-columns: 88px 1fr auto; padding-inline: 20px; }
}

@media (max-width: 520px) {
  .wordmark-en { display: inline; font-size: 1.08rem; }
  .wordmark-cn { font-size: 1.2rem; }
  .header-timer { border: 0; padding: 0; }

  .bottom-nav a { min-height: var(--nav-height); }

  .today-issue { grid-template-columns: 52px minmax(0, 1fr); }

  .margin-rail {
    gap: 20px;
    padding: 24px 7px;
    align-items: center;
  }

  .rail-date,
  .rail-issue { align-items: center; text-align: center; }
  .rail-date strong { font: 400 2.45rem/.9 var(--reader); }
  .rail-date span { font-size: .62rem; }
  .rail-issue { width: 100%; padding-block: 12px; }
  .rail-issue span { font-size: .58rem; }
  .rail-issue strong { font-size: 1.15rem; }
  .rail-note,
  .rail-facts,
  .rail-timer { display: none; }

  .issue-content { padding: 24px 16px 34px 18px; }
  .issue-lead { padding-bottom: 20px; }
  .issue-lead h1 { margin-top: 12px; font-size: clamp(2.05rem, 9.8vw, 2.35rem); line-height: 1.03; }

  .issue-story { gap: 16px; padding-block: 24px; }
  .story-meta { row-gap: 7px; font-size: .67rem; }
  .story-meta span { padding-inline: 8px; }
  .issue-story h2 { font-size: clamp(2.2rem, 10.6vw, 2.85rem); line-height: 1.02; }
  .story-subtitle { margin-top: -2px; font-size: .92rem; }
  .story-value { padding-top: 14px; }
  .story-value p { font-size: .82rem; }
  .issue-cta { min-height: 58px; padding-inline: 18px; font-size: .98rem; }

  .reading-route { grid-template-columns: repeat(4, 1fr); }
  .reading-route li { min-height: 56px; display: flex; flex-direction: column; gap: 5px; align-items: center; padding: 9px 3px; }
  .reading-route li > span { font-size: .66rem; }
  .reading-route li strong { font-size: .78rem; }

  .today-page .next-programs { padding-top: 26px; }
  .today-page .section-title-row { display: flex; }
  .today-page .section-title-row h2 { font-size: 1.4rem; }
  .today-page .section-title-row p { display: none; }
  .today-page .program-list article { grid-template-columns: 42px minmax(0, 1fr); }
  .today-page .program-list strong { font-size: .88rem; }
  .today-page .availability { display: none; }

  .discover-hero,
  .learn-hero { min-height: 210px; }
  .discover-hero h1,
  .learn-hero h1 { font-size: clamp(2.15rem, 10vw, 2.7rem); }
  .discover-hero p,
  .learn-hero p { margin-top: 16px; }
  .next-study-action { grid-template-columns: 1fr auto; gap: 8px 14px; min-height: 108px; }
  .next-study-action > span { grid-column: 1 / 3; }
  .next-study-action strong { font-size: 1rem; }

  .reader-header h1 { font-size: clamp(2.3rem, 11vw, 3rem); }
  .welcome-copy h1,
  .choice-stage > h1 { font-size: clamp(2.15rem, 10vw, 2.75rem); }
}

/* Unified Margin Rail world — Discover, Learn, Me, Settings */

.discover-page,
.learn-page,
.me-page,
.settings-page {
  overflow: hidden;
  border: 1px solid var(--line-strong);
  background: var(--paper);
}

.editorial-shell {
  display: grid;
  grid-template-columns: 252px minmax(0, 1fr);
  min-height: calc(100dvh - var(--header-height) - var(--nav-height) - 54px);
}

.editorial-content {
  min-width: 0;
  padding: 48px 58px 64px;
}

.section-margin-rail .rail-issue strong {
  max-width: 100%;
  overflow-wrap: anywhere;
}

.editorial-lead {
  position: relative;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--line);
}

.editorial-lead::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  width: 74px;
  height: 3px;
  background: var(--plum);
}

.editorial-lead h1 {
  max-width: 760px;
  margin: 0;
  color: var(--plum);
  font-family: var(--display-cn);
  font-size: clamp(3.25rem, 4.7vw, 3.75rem);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -.025em;
  text-wrap: balance;
}

.editorial-lead p {
  max-width: 68ch;
  margin: 18px 0 0;
  color: var(--muted);
  line-height: 1.7;
}

/* Discover */

.editorial-filter {
  display: flex;
  flex-wrap: wrap;
  margin-top: 28px;
  border: 1px solid var(--line-strong);
  border-bottom: 0;
}

.editorial-filter button {
  min-height: 48px;
  padding: 0 18px;
  border: 0;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line-strong);
  background: var(--paper);
  color: var(--muted);
  font-size: .82rem;
  cursor: pointer;
}

.editorial-filter button[aria-pressed="true"] {
  background: var(--primary);
  color: var(--on-primary);
  font-weight: 800;
}

.editorial-filter button:focus-visible { position: relative; z-index: 1; }

.editorial-catalogue { border: 1px solid var(--line-strong); border-top: 0; }

.catalogue-heading {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: end;
  padding: 28px 26px 20px;
}

.catalogue-heading h2,
.catalogue-heading p { margin: 0; }
.catalogue-heading h2 { font-family: var(--display-cn); font-size: 1.8rem; font-weight: 400; }
.catalogue-heading p { color: var(--muted); font-size: .8rem; }

.catalogue-feature {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) 168px;
  gap: 24px;
  align-items: center;
  padding: 28px 26px;
  border-block: 1px solid var(--line-strong);
  background: color-mix(in srgb, var(--paper) 54%, var(--fog, #c9d5da));
}

.catalogue-index { align-self: stretch; display: flex; flex-direction: column; justify-content: space-between; border-right: 1px solid var(--line); }
.catalogue-index span { color: var(--primary); font: 600 .72rem/1 var(--display); letter-spacing: .08em; }
.catalogue-index strong { color: var(--primary); font: 600 2.2rem/1 var(--display); }
.catalogue-feature > div:nth-child(2) { min-width: 0; }
.catalogue-feature p { margin: 0 0 12px; color: var(--muted); font: 600 .75rem/1.3 var(--display); letter-spacing: .04em; }
.catalogue-feature h3 { max-width: 780px; margin: 0; font-family: var(--reader); font-size: clamp(1.8rem, 3.3vw, 2.45rem); font-weight: 400; line-height: 1.02; letter-spacing: -.025em; }
.catalogue-feature small { display: block; max-width: 62ch; margin-top: 12px; color: var(--muted); line-height: 1.55; }
.catalogue-feature > button { min-height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 18px; border: 1px solid var(--accent); background: var(--accent); color: var(--on-accent); font-weight: 800; cursor: pointer; }
.catalogue-feature > button svg { width: 22px; height: 22px; transition: transform 200ms var(--ease-out); }
.catalogue-feature > button:hover svg { transform: translateX(6px); }

.catalogue-list article {
  min-height: 88px;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 92px;
  gap: 18px;
  align-items: center;
  padding: 16px 26px;
  border-bottom: 1px solid var(--line);
}

.catalogue-list article:last-child { border-bottom: 0; }
.catalogue-list article > span { color: var(--primary); font: 600 .95rem/1 var(--display); }
.catalogue-list h3,
.catalogue-list p { margin: 0; }
.catalogue-list h3 { font-family: var(--reader); font-size: 1.08rem; font-weight: 400; }
.catalogue-list p { margin-top: 5px; color: var(--muted); font-size: .8rem; }
.catalogue-list small { justify-self: end; color: var(--muted); font-size: .75rem; }

/* Learn */

.learn-content .editorial-lead::after { background: var(--plum); }
.learn-content .next-study-action { margin-top: 28px; border: 1px solid var(--accent); }

.learn-content .learning-ticket {
  margin-top: 26px;
  border: 1px solid var(--line-strong);
  border-bottom: 0;
}

.learn-content .learning-ticket > div { min-height: 108px; }
.learn-content .learning-ticket strong { font-size: 2.45rem; }

.learn-content .study-clock {
  border: 1px solid var(--line-strong);
  background: color-mix(in srgb, var(--paper) 76%, var(--fog, #c9d5da));
}

.learn-content .study-clock > div,
.learn-content .study-clock > button { min-height: 92px; }

.compact-calendar {
  margin-top: 30px;
  border: 1px solid var(--line-strong);
  background: var(--paper);
}

.compact-calendar-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid var(--line-strong);
  background: color-mix(in srgb, var(--paper) 70%, var(--fog, #c9d5da));
}

.compact-calendar-heading h2,
.compact-calendar-heading p { margin: 0; }
.compact-calendar-heading h2 { font-family: var(--display-cn); font-size: 1.55rem; font-weight: 400; }
.compact-calendar-heading p { margin-top: 4px; color: var(--muted); font-size: .78rem; }
.compact-calendar-grid { padding: 20px 24px 8px; }
.compact-calendar .calendar-grid > * { min-height: 58px; }
.compact-calendar .calendar-day { padding: 8px; }
.compact-calendar .calendar-day-number { position: static; z-index: auto; align-self: start; justify-self: start; }
.calendar-fill { width: 13px; height: 13px; display: block; align-self: center; justify-self: center; background: var(--mint); border: 1px solid var(--ink); }
.compact-calendar .calendar-day.is-filled { background: color-mix(in srgb, var(--paper) 54%, var(--mint)); }
.compact-calendar .calendar-check { right: 5px; bottom: 5px; color: var(--ink); }
.compact-calendar .calendar-day.just-checked .calendar-fill { animation: calendar-fill-in 360ms var(--ease-out) both; }

@keyframes calendar-fill-in {
  from { transform: scale(.35); opacity: .25; }
  to { transform: scale(1); opacity: 1; }
}

.compact-calendar-action {
  min-height: 70px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 10px 24px;
  border-top: 1px solid var(--line-strong);
}

.compact-calendar-action > span { color: var(--muted); font-size: .8rem; }
.compact-calendar-action .checkin-button,
.compact-calendar-action .secondary-button { min-height: 48px; margin: 0; }

.learning-directory {
  margin-top: 30px;
  border: 1px solid var(--line-strong);
}

.learning-directory a {
  min-height: 82px;
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) auto;
  gap: 22px;
  align-items: center;
  padding: 14px 24px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  text-decoration: none;
}

.learning-directory a:last-child { border-bottom: 0; }
.learning-directory span { color: var(--primary); font: 600 .82rem/1 var(--display); letter-spacing: .04em; }
.learning-directory strong { font-size: 1rem; }
.learning-directory svg { width: 22px; height: 22px; transition: transform 200ms var(--ease-out); }
.learning-directory a:hover svg { transform: translateX(6px); }

/* Me */

.profile-summary {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) auto;
  gap: 26px;
  align-items: center;
  padding-bottom: 34px;
  border-bottom: 1px solid var(--line);
}

.profile-summary .profile-avatar { width: 96px; height: 96px; background: var(--plum); color: var(--color-inverse); font-size: 2.6rem; }
.profile-copy { min-width: 0; }
.profile-copy h1 { margin: 0; color: var(--plum); font-family: var(--display-cn); font-size: clamp(2.65rem, 4.5vw, 3.5rem); font-weight: 400; line-height: 1; }
.profile-copy p { margin: 9px 0 14px; color: var(--ink); }
.profile-copy span { display: block; color: var(--muted); font-size: .82rem; line-height: 1.5; }

.settings-entry {
  min-width: 96px;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 0 14px;
  border: 1px solid var(--line-strong);
  color: var(--ink);
  text-decoration: none;
  font-weight: 800;
}

.settings-entry svg { width: 20px; height: 20px; }
.settings-entry:hover { background: color-mix(in srgb, var(--paper) 58%, var(--fog, #c9d5da)); }

.learning-archive { margin-top: 32px; border: 1px solid var(--line-strong); }
.learning-archive > header { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; padding: 24px 26px; background: color-mix(in srgb, var(--paper) 64%, var(--fog, #c9d5da)); }
.learning-archive h2,
.learning-archive header p { margin: 0; }
.learning-archive h2 { font-family: var(--display-cn); font-size: 1.75rem; font-weight: 400; }
.learning-archive header p { color: var(--muted); line-height: 1.55; }
.archive-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line-strong); }
.archive-metrics > div { min-height: 118px; display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto 1fr; padding: 18px; border-right: 1px solid var(--line); }
.archive-metrics > div:last-child { border-right: 0; }
.archive-metrics span { grid-column: 1 / 3; color: var(--muted); font-size: .75rem; }
.archive-metrics strong { align-self: end; font: 600 2.25rem/.9 var(--display); font-variant-numeric: tabular-nums; }
.archive-metrics small { align-self: end; }
.archive-note { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px; align-items: center; padding: 20px 24px; border-top: 1px solid var(--line-strong); }
.archive-note > p { max-width: 60ch; margin: 0; color: var(--muted); font-size: .8rem; line-height: 1.6; }
.archive-note .archive-actions { display: flex !important; gap: 8px; }

/* Settings */

.settings-lead {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 20px;
  align-items: center;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--line);
}

.back-to-me { width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid var(--line-strong); color: var(--ink); }
.back-to-me svg { width: 21px; height: 21px; }
.settings-lead h1 { margin: 0; color: var(--plum); font-family: var(--display-cn); font-size: 2.7rem; font-weight: 400; line-height: 1; }
.settings-lead p { margin: 7px 0 0; color: var(--muted); }

.settings-content .settings-section { border: 1px solid var(--line-strong); border-bottom: 0; }
.settings-content .settings-lead + .settings-section { margin-top: 30px; }
.settings-content .settings-section:last-child { border-bottom: 1px solid var(--line-strong); }
.settings-content .settings-heading { padding: 22px 24px 16px; background: color-mix(in srgb, var(--paper) 78%, var(--fog, #c9d5da)); }
.settings-content .setting-row { padding-inline: 24px; }
.settings-content .skin-grid { padding-inline: 24px; }
.settings-content .account-form { padding-inline: 24px; }
.settings-content .cloud-note { margin-inline: 24px; }
.settings-content .tools-section > a,
.settings-content .tools-section > button { padding-inline: 24px; }

@media (max-width: 900px) {
  .discover-page,
  .learn-page,
  .me-page,
  .settings-page { border-inline: 0; }

  .editorial-shell { grid-template-columns: 124px minmax(0, 1fr); min-height: 0; }
  .editorial-content { padding: 34px 28px 48px; }
  .editorial-lead h1 { font-size: clamp(2.6rem, 7.5vw, 3.45rem); }
  .catalogue-feature { grid-template-columns: 58px minmax(0, 1fr); }
  .catalogue-feature > button { grid-column: 2; width: 100%; }
  .learning-archive > header { grid-template-columns: 1fr; gap: 8px; }
  .archive-metrics { grid-template-columns: repeat(2, 1fr); }
  .archive-metrics > div:nth-child(2) { border-right: 0; }
  .archive-metrics > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .archive-note { grid-template-columns: 1fr; }
  .archive-note .archive-actions { justify-content: stretch; }
  .archive-note .archive-actions > * { flex: 1; }
}

@media (max-width: 520px) {
  .editorial-shell { grid-template-columns: 52px minmax(0, 1fr); }
  .editorial-content { padding: 24px 16px 36px 18px; }
  .editorial-lead { padding-bottom: 20px; }
  .editorial-lead h1 { font-size: clamp(2.05rem, 9.8vw, 2.35rem); line-height: 1.03; }
  .editorial-lead p { margin-top: 14px; font-size: .84rem; }

  .editorial-filter { flex-wrap: nowrap; overflow-x: auto; margin-top: 22px; scrollbar-width: thin; }
  .editorial-filter button { flex: 0 0 auto; padding-inline: 14px; }
  .catalogue-heading { grid-template-columns: 1fr; gap: 6px; padding: 22px 16px 16px; }
  .catalogue-heading h2 { font-size: 1.45rem; }
  .catalogue-feature { grid-template-columns: 1fr; gap: 16px; padding: 20px 16px; }
  .catalogue-index { min-height: 24px; flex-direction: row; border-right: 0; border-bottom: 1px solid var(--line); }
  .catalogue-index strong { font-size: 1.15rem; }
  .catalogue-feature h3 { font-size: 1.8rem; }
  .catalogue-feature > button { grid-column: 1; }
  .catalogue-list article { grid-template-columns: 32px minmax(0, 1fr); gap: 10px; min-height: 84px; padding: 14px 16px; }
  .catalogue-list small { grid-column: 2; justify-self: start; }

  .learn-content .next-study-action { margin-top: 22px; }
  .learn-content .learning-ticket { grid-template-columns: repeat(2, 1fr); margin-top: 20px; }
  .learn-content .learning-ticket > div { min-height: 94px; }
  .learn-content .learning-ticket > div:nth-child(2) { border-right: 0; }
  .learn-content .learning-ticket > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .learn-content .learning-ticket strong { font-size: 2.15rem; }
  .learn-content .study-clock { grid-template-columns: repeat(2, 1fr); }
  .learn-content .study-clock > div,
  .learn-content .study-clock > button { min-height: 82px; border-bottom: 1px solid var(--line); }
  .learn-content .study-clock > :nth-child(2) { border-right: 0; }
  .learn-content .study-clock > :nth-child(n+3) { border-bottom: 0; }
  .learn-content .study-clock > button { min-width: 0; }

  .compact-calendar { margin-top: 22px; }
  .compact-calendar-heading { grid-template-columns: 1fr; gap: 14px; padding: 16px; }
  .calendar-month-controls { grid-template-columns: 44px minmax(0, 1fr) 44px; width: 100%; }
  .compact-calendar-grid { padding: 12px 10px 6px; }
  .compact-calendar .calendar-weekdays span { min-height: 28px; font-size: .66rem; }
  .compact-calendar .calendar-grid > * { min-height: 43px; }
  .compact-calendar .calendar-day { padding: 5px; }
  .compact-calendar .calendar-day-number { font-size: .68rem; }
  .calendar-fill { width: 9px; height: 9px; }
  .compact-calendar .calendar-check { display: none; }
  .compact-calendar-action { display: grid; gap: 10px; padding: 12px 14px; }
  .compact-calendar-action .checkin-button,
  .compact-calendar-action .secondary-button { width: 100%; }

  .learning-directory { margin-top: 22px; }
  .learning-directory a { grid-template-columns: 1fr auto; gap: 7px 14px; min-height: 84px; padding: 14px 16px; }
  .learning-directory a span { grid-column: 1 / 3; }
  .learning-directory strong { font-size: .9rem; }

  .profile-summary { grid-template-columns: 64px minmax(0, 1fr) 48px; gap: 14px; padding-bottom: 24px; }
  .profile-summary .profile-avatar { width: 64px; height: 64px; font-size: 2rem; }
  .profile-copy h1 { font-size: 2.2rem; }
  .profile-copy p { margin: 5px 0 8px; font-size: .78rem; }
  .profile-copy span { font-size: .7rem; }
  .settings-entry { min-width: 48px; width: 48px; height: 48px; padding: 0; }
  .settings-entry span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .learning-archive { margin-top: 24px; }
  .learning-archive > header { padding: 18px 16px; }
  .learning-archive h2 { font-size: 1.45rem; }
  .archive-metrics > div { min-height: 92px; padding: 14px; }
  .archive-metrics strong { font-size: 1.8rem; }
  .archive-note { gap: 14px; padding: 16px; }
  .archive-note .archive-actions { display: grid !important; }

  .settings-lead { gap: 14px; padding-bottom: 22px; }
  .settings-lead h1 { font-size: 2.15rem; }
  .settings-content .settings-lead + .settings-section { margin-top: 22px; }
  .settings-content .settings-heading { padding: 18px 16px 12px; }
  .settings-content .setting-row { padding-inline: 16px; }
  .settings-content .skin-grid { padding-inline: 16px; }
  .settings-content .account-form { padding-inline: 16px; }
  .settings-content .cloud-note { margin-inline: 16px; }
  .settings-content .tools-section > a,
  .settings-content .tools-section > button { grid-template-columns: 1fr auto; gap: 6px 12px; padding-inline: 16px; }
  .settings-content .tools-section > * span { grid-column: 1 / 2; }
  .settings-content .tools-section svg { grid-column: 2; grid-row: 1 / 3; }
}