:root {
  font-family: var(--font-sans);
  font-size: var(--type-body);
  font-weight: var(--weight-regular);
  line-height: var(--line-body);
  color: var(--ink);
  background: var(--paper);
  font-synthesis: none;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
* { box-sizing: border-box; letter-spacing: 0; }
body { margin: 0; min-height: 100svh; display: flex; flex-direction: column; }
body:not([data-stage="spec"]) { padding-top: var(--sticky-height, 96px); padding-bottom: var(--safe-bottom); }
html { scroll-padding-top: calc(var(--sticky-height, 0px) + 16px); }
.intro-active { overflow: hidden; }
.entry-intro { position: fixed; inset: 0; z-index: 50; background: var(--paper); opacity: 1; transition: opacity .9s ease .3s; }
.entry-intro[hidden] { display: none; }
.entry-intro.is-leaving { opacity: 0; }
.entry-intro.is-leaving .intro-skip { visibility: hidden; }
#introCanvas { display: block; width: 100%; height: 100%; transition: opacity .4s ease; }
.intro-words { position: absolute; top: calc(43% + 112px); left: var(--page-gutter); right: var(--page-gutter); text-align: center; pointer-events: none; }
.intro-words h1 { position: relative; height: 48px; display: grid; place-items: center; font-size: var(--type-section); line-height: var(--line-title); }
.intro-birth-char { position: absolute; left: calc(50% + 1em); top: 50%; transform: translateY(-50%); }
.entry-intro[data-phase="4"] .intro-words h1 { font-size: var(--type-number); }
.intro-words p { margin-top: var(--space-2); font-family: var(--font-serif); font-size: var(--type-caption); line-height: var(--line-caption); color: var(--muted); }
.entry-intro .intro-skip { position: absolute; right: var(--page-inset); bottom: calc(var(--space-8) + var(--safe-bottom)); color: var(--muted); }
@media (max-height: 519px) {
  .intro-words { top: calc(38% + 80px); }
  .entry-intro .intro-skip { bottom: calc(var(--space-4) + var(--safe-bottom)); }
}
button, input, textarea, select { font: inherit; }
button, a, input, textarea { -webkit-tap-highlight-color: transparent; }
button, a { touch-action: manipulation; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, figure, fieldset { margin: 0; }
h1, h2 { font-family: var(--font-serif); font-weight: var(--weight-regular); line-height: var(--line-title); }
strong { font-weight: var(--weight-medium); }
.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
:focus-visible { outline: var(--focus-ring); outline-offset: var(--space-1); }
h1[tabindex="-1"]:focus-visible { outline: none; }
svg.lucide { display: block; width: var(--icon-size); height: var(--icon-size); stroke-width: 1.5; flex-shrink: 0; }
.site-header, .site-footer, .app-shell { width: min(var(--shell-width),calc(100% - var(--page-inset) * 2)); margin-inline: auto; }
.site-header { position: fixed; top: 0; inset-inline: 0; z-index: 20; isolation: isolate; background: var(--paper); display: flex; align-items: center; justify-content: space-between; min-height: 96px; padding-top: var(--safe-top); gap: var(--space-8); border-bottom: 1px solid var(--line); }
.site-header::before, .teaching-banner::before { content: ""; position: absolute; inset: 0 calc(-1 * var(--page-inset)); z-index: -1; background: var(--paper); pointer-events: none; }
.wordmark { display: inline-flex; align-items: center; gap: var(--space-3); font-family: var(--font-serif); font-size: var(--type-title); line-height: var(--line-title); white-space: nowrap; }
.brand-mark { width: 20px; height: 20px; display: block; border-left: 2px solid var(--ink); border-bottom: 2px solid var(--ink); position: relative; }
.brand-mark::after { content: ""; position: absolute; width: 5px; height: 5px; border-radius: 50%; background: var(--red); top: 0; right: 0; }
.header-actions { display: flex; align-items: center; gap: var(--space-8); }
.journal-link { display: inline-flex; align-items: center; justify-content: center; gap: var(--control-gap); min-height: var(--control-height); padding: 0; border: 0; background: transparent; color: var(--text); font-size: var(--type-ui); line-height: var(--line-ui); }
.journal-link > span { text-decoration: underline var(--line) 1px; text-underline-offset: var(--action-underline-offset); }
.journal-link:hover { color: var(--red); }
.journal-link:hover > span { text-decoration-color: var(--red); }
.header-actions nav { border-left: 1px solid var(--line); padding-left: var(--space-8); }
.progress { display: flex; align-items: center; gap: var(--space-6); margin: 0; padding: 0; list-style: none; }
.progress li { position: relative; display: flex; align-items: baseline; gap: var(--space-2); min-height: 32px; padding-block: var(--space-1); color: var(--muted); font-size: var(--type-small); line-height: 24px; white-space: nowrap; cursor: default; }
.progress li > span { color: var(--muted); font-family: inherit; font-size: inherit; line-height: inherit; font-variant-numeric: tabular-nums; }
.progress li[aria-current], .progress li.is-complete { color: var(--ink); }
.progress li[aria-current] > span { color: var(--red); }
.progress li[aria-current]::after { content: ""; position: absolute; bottom: 0; left: 50%; width: 4px; height: 4px; border-radius: 50%; transform: translateX(-50%); background: var(--red); }
.app-shell { flex: 1; display: flex; flex-direction: column; justify-content: center; padding-block: var(--page-space); }
.flow-layout { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: var(--space-16); align-items: center; }
.step-card { width: 100%; min-width: 0; padding-block: var(--space-4); }
.eyebrow { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); color: var(--muted); font-size: var(--type-caption); line-height: var(--line-caption); }
.red-dot { display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: var(--red); flex-shrink: 0; }
.site-title { font-size: var(--type-display); line-height: 1.4; }
.opening-verse { margin-top: var(--space-3); margin-bottom: var(--space-8); font-family: var(--font-serif); font-size: var(--type-body); line-height: var(--line-body); color: var(--text); }
.section-title { display: flex; align-items: baseline; gap: var(--space-2); margin-bottom: var(--space-4); }
.section-title h2, .analysis-heading h2 { font-size: var(--type-section); }
.section-title .section-number { font-family: var(--font-serif); font-size: var(--type-section); line-height: var(--line-title); font-weight: var(--weight-regular); }
.section-number { font-family: var(--font-sans); font-size: var(--type-caption); line-height: var(--line-caption); color: var(--red); white-space: nowrap; }
.flow-form, .time-fields { display: grid; gap: var(--space-4); }
label { font-size: var(--type-ui); line-height: var(--line-ui); color: var(--text); }
textarea, input { width: 100%; min-width: 0; border: 1px solid var(--line); border-radius: 0; background: transparent; color: var(--ink); padding: var(--space-4); font-family: var(--font-sans); font-size: var(--type-body); line-height: var(--line-body); outline: none; }
textarea { min-height: 144px; max-height: 320px; resize: vertical; }
textarea::placeholder { color: var(--muted); }
[data-step="question"] textarea::placeholder { font-size: var(--type-caption); line-height: var(--line-caption); }
.form-bottom .quiet-note { font-family: var(--font-serif); font-size: var(--type-body); line-height: var(--line-body); color: var(--text); word-break: keep-all; }
input { min-height: var(--field-height); font-variant-numeric: tabular-nums; }
textarea:focus, input:focus { border-color: var(--red); }
textarea:focus-visible, input:focus-visible { outline: none; }
.form-bottom, .button-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.form-bottom { margin-top: var(--space-2); }
.button-row { margin-top: var(--space-6); }
.quiet-note { color: var(--muted); font-size: var(--type-small); line-height: var(--line-caption); }
.primary-action, .secondary-action, .home-action, .method-toggle, .text-tool, .daily-action {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--control-gap);
  min-height: var(--control-height); border-radius: 0; font-family: var(--font-sans);
  font-size: var(--type-ui); font-weight: var(--weight-regular); line-height: var(--line-ui);
  transition: color .18s, background .18s, border-color .18s;
}
.primary-action { justify-content: center; min-width: var(--action-min-width); padding: 0 var(--control-padding); border: solid transparent; border-width: var(--primary-hit-inset) 0; background: var(--ink); background-clip: padding-box; color: #fff; gap: var(--control-gap); }
.primary-action:hover { background-color: var(--red); }
.primary-action > span:first-child { display: flex; align-items: center; gap: var(--space-2); }
.secondary-action, .home-action, .method-toggle, .text-tool, .daily-action { border: 0; background: transparent; color: var(--text); padding: 0; text-decoration: none; }
.action-label, #dailyButtonLabel, #saveReadingLabel, #saveDeliveryLabel { text-decoration: underline var(--line) 1px; text-underline-offset: var(--action-underline-offset); }
.secondary-action:hover, .home-action:hover, .method-toggle:hover, .text-tool:hover, .daily-action:hover { color: var(--red); }
button:not(:disabled):active, a:active { opacity: .7; }
.secondary-action:hover .action-label, .home-action:hover .action-label, .method-toggle:hover .action-label, .text-tool:hover > span, .daily-action:hover > span { text-decoration-color: var(--red); }
.secondary-action > span[aria-hidden], .home-action > span[aria-hidden], .method-symbol { display: inline-block; text-decoration: none; }
button:disabled { opacity: .48; cursor: default; }
.primary-action:disabled { cursor: wait; }
.icon-button { display: grid; place-items: center; width: var(--control-height); height: var(--control-height); border: 0; border-radius: 0; background: var(--surface); color: var(--text); padding: 0; flex-shrink: 0; }
.icon-button:hover { color: var(--red); background: var(--line-soft); }
.question-preview, .asked-line { display: grid; gap: var(--space-3); }
.question-preview { margin-bottom: var(--space-2); border-bottom: 1px solid var(--line); padding-bottom: var(--space-6); }
.question-preview > span, .asked-line > span, .meta-grid span { font-size: var(--type-caption); line-height: var(--line-caption); color: var(--muted); }
.question-preview strong, .asked-line strong { font-size: var(--type-body); font-weight: var(--weight-regular); line-height: var(--line-body); white-space: pre-wrap; overflow-wrap: anywhere; }
.mode-switch { display: flex; gap: var(--space-6); width: fit-content; border-bottom: 1px solid var(--line); }
.mode-switch button { position: relative; min-height: var(--control-height); padding: 0; border: 0; background: transparent; color: var(--muted); font-size: var(--type-ui); line-height: var(--line-ui); }
.mode-switch button[aria-pressed="true"] { color: var(--ink); }
.mode-switch button:hover, .derivation-steps button:hover { color: var(--red); background: var(--surface); }
.mode-switch button[aria-pressed="true"]::after { content: ""; position: absolute; bottom: -1px; inset-inline: 0; height: 1px; background: var(--red); }
.numeric-fields { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: var(--space-6); }
.numeric-fields > div { display: grid; gap: var(--space-3); min-width: 0; }
.form-error { font-size: var(--type-small); line-height: var(--line-caption); color: var(--red); }
.form-error:empty { display: none; }
.origin-art { position: relative; width: 100%; min-width: 0; aspect-ratio: 1 / 1.12; max-height: 576px; }
#originCanvas { display: block; width: 100%; height: 100%; }
.origin-art figcaption { position: absolute; inset: auto 0 var(--space-3); display: flex; align-items: center; justify-content: space-between; padding-inline: var(--space-8); font-size: var(--type-caption); line-height: var(--line-caption); color: var(--muted); }
#artIndex { font-family: var(--font-serif); font-size: var(--type-body); color: var(--ink); }
.daily-band { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); border-top: 1px solid var(--line); margin-top: var(--space-8); padding-top: var(--space-4); }
.daily-band .quiet-note { font-size: var(--type-caption); }
.daily-action { color: var(--ink); font-size: var(--type-body); line-height: var(--line-ui); }
.site-footer { display: flex; justify-content: space-between; align-items: center; gap: var(--space-6); min-height: 72px; border-top: 1px solid var(--line); font-size: var(--type-caption); line-height: var(--line-caption); color: var(--muted); }
.site-footer > span:first-child { display: flex; align-items: center; gap: var(--space-4); }
.footer-divider { width: 16px; height: 1px; background: var(--line); }
.footer-signature { font-family: var(--font-sans); }
body:not([data-stage="question"]):not([data-stage="numbers"]) .flow-layout { display: none; }
body:not([data-stage="question"]):not([data-stage="numbers"]) .app-shell { justify-content: flex-start; }
.result-panel, .derivation-panel, .journal-panel, .delivery-panel { width: 100%; min-width: 0; }
.reading-header, .derivation-header, .journal-header, .delivery-header { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-6); }
.reading-header h1, .derivation-header h1, .journal-header h1, .delivery-header h1 { font-size: var(--type-page); }
.reading-header .eyebrow, .derivation-header .eyebrow, .journal-header .eyebrow, .delivery-header .eyebrow { margin-bottom: var(--space-3); }
.verdict-wrap { text-align: right; flex-shrink: 0; padding-bottom: var(--space-1); }
.verdict-wrap .quiet-note { font-size: var(--type-caption); }
.verdict { font-family: var(--font-serif); color: var(--red); font-size: var(--type-section); line-height: var(--line-title); margin-top: var(--space-2); }
.result-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 0 var(--space-6); margin-top: var(--space-4); }
#recordOrigin { margin-left: auto; font-size: var(--type-caption); }
.asked-line { grid-template-columns: 96px minmax(0,1fr); align-items: baseline; margin-top: var(--space-4); padding-top: var(--space-6); border-top: 1px solid var(--line); }
.hexagram-layout { display: grid; grid-template-columns: 1fr .64fr 1fr 1fr; gap: var(--space-8); align-items: center; padding-block: var(--space-12); }
.hexagram-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-6); min-width: 0; }
.hexagram-card > p { display: flex; align-items: baseline; gap: var(--space-3); font-size: var(--type-small); line-height: var(--line-caption); color: var(--text); }
.hexagram-card > p > span { font-family: var(--font-mono); font-size: var(--type-caption); color: var(--muted); }
.lines { display: flex; flex-direction: column; gap: 10px; width: min(100%,136px); }
.yao { display: flex; gap: 16px; width: 100%; height: 10px; }
.yao > span { flex: 1; background: var(--ink); }
.yao.moving > span { background: var(--red); }
.movement-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-3); padding-top: var(--space-8); }
.movement-card > small { font-size: var(--type-caption); line-height: var(--line-caption); color: var(--muted); }
#movingLine { font-family: var(--font-serif); font-size: var(--type-section); line-height: var(--line-title); color: var(--red); white-space: nowrap; }
.movement-rule { position: relative; width: 48px; height: 1px; background: var(--line); margin-top: var(--space-1); }
.movement-rule::after { content: ""; position: absolute; top: -2px; left: 22px; width: 4px; height: 4px; border-radius: 50%; background: var(--red); }
.meta-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); border-block: 1px solid var(--line); padding-block: var(--space-6); gap: var(--space-6); }
.meta-grid > div { display: grid; gap: var(--space-3); min-width: 0; }
.meta-grid > div + div { border-left: 1px solid var(--line); padding-left: var(--space-6); }
.meta-grid strong { font-family: var(--font-serif); font-size: var(--type-title); font-weight: var(--weight-regular); line-height: var(--line-title); overflow-wrap: anywhere; }
.body-use-line { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-3) var(--space-6); margin-top: var(--space-6); color: var(--muted); font-size: var(--type-small); line-height: var(--line-caption); }
.body-use-line strong { color: var(--ink); margin-left: var(--space-2); }
#bodyUseRelation { color: var(--red); }
.reading-tools { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); padding-top: var(--space-3); }
.method-toggle { color: var(--text); }
.method-symbol { display: inline-grid; place-items: center; width: var(--icon-size); height: var(--icon-size); font-size: var(--type-ui); line-height: 1; transition: transform .18s; }
.method-toggle[aria-expanded="true"] .method-symbol { transform: rotate(45deg); }
.method-panel { margin-top: var(--space-3); padding: var(--space-6); border-left: 1px solid var(--ink); background: var(--surface); color: var(--text); font-size: var(--type-ui); line-height: var(--line-body); overflow-wrap: anywhere; }
#methodText { white-space: pre-line; }
.analysis-block { display: grid; grid-template-columns: 144px minmax(0,1fr); gap: var(--space-8); margin-top: var(--space-8); padding-block: var(--space-8); border-top: 1px solid var(--line); }
.analysis-block + .analysis-block { margin-top: 0; }
.analysis-heading { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); }
.layered-analysis { display: grid; counter-reset: layers; max-width: 752px; }
.meaning-layer { position: relative; padding: 0 0 var(--space-6) var(--space-8); counter-increment: layers; }
.meaning-layer::before { content: "0" counter(layers); position: absolute; left: 0; top: 5px; font-family: var(--font-mono); font-size: var(--type-caption); line-height: var(--line-caption); color: var(--muted); }
.meaning-layer + .meaning-layer { border-top: 1px solid var(--line-soft); padding-top: var(--space-6); }
.meaning-layer + .meaning-layer::before { top: 29px; }
.meaning-layer:last-child { padding-bottom: 0; }
.meaning-layer strong { display: block; font-size: var(--type-body); line-height: var(--line-body); color: var(--ink); font-weight: var(--weight-medium); margin-bottom: var(--space-2); }
.meaning-layer p, .fortune-analysis, #advice { font-size: var(--type-body); line-height: var(--line-body); color: var(--text); max-width: 752px; overflow-wrap: anywhere; }
.fortune-summary { font-weight: var(--weight-medium); color: var(--ink); margin-bottom: var(--space-6); }
.fortune-points { margin: 0; padding-left: var(--space-6); }
.fortune-points li { padding-left: var(--space-1); }
.fortune-points li::marker { color: var(--red); font-size: var(--type-caption); }
.fortune-points li + li { margin-top: var(--space-3); }
.advice-block { border-bottom: 1px solid var(--line); }
.reading-bottom { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); padding-top: var(--space-6); }
.derivation-steps { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); padding: 0; margin: var(--space-8) 0 var(--space-6); list-style: none; border-bottom: 1px solid var(--line); counter-reset: scenes; }
.derivation-steps li { counter-increment: scenes; min-width: 0; }
.derivation-steps button { display: flex; align-items: baseline; justify-content: center; gap: var(--control-gap); position: relative; width: 100%; min-height: var(--control-height); padding: var(--space-3) var(--space-1); border: 0; background: transparent; font-size: var(--type-ui); line-height: var(--line-ui); color: var(--muted); }
.derivation-steps button::before { content: "0" counter(scenes); font-family: inherit; font-size: var(--type-caption); }
.derivation-steps button[aria-current], .derivation-steps .is-complete { color: var(--ink); }
.derivation-steps button[aria-current]::after { content: ""; position: absolute; bottom: -1px; inset-inline: 0; height: 1px; background: var(--red); }
.derivation-steps button[aria-current]::before { color: var(--red); }
.derivation-formula { min-height: 96px; display: flex; flex-wrap: wrap; justify-content: center; align-content: center; gap: var(--space-2) var(--space-6); padding-block: var(--space-3); font-size: var(--type-ui); line-height: var(--line-body); color: var(--text); text-align: center; overflow-wrap: anywhere; }
.derivation-formula > span { min-width: 0; max-width: 100%; }
#derivationCanvas { display: block; width: 100%; height: 352px; }
.derivation-caption { display: flex; align-items: baseline; gap: var(--space-6); min-height: 80px; padding-block: var(--space-6); border-block: 1px solid var(--line); }
.derivation-caption p { font-size: var(--type-ui); line-height: var(--line-body); color: var(--text); }
.derivation-controls { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-6); padding-top: var(--space-6); }
.playback-controls { display: flex; align-items: center; gap: var(--space-2); }
.play-button { color: var(--ink); }
#animationSpeed { font-size: var(--type-ui); line-height: var(--line-ui); color: var(--text); border: 0; border-bottom: 1px solid var(--line); background: transparent; padding-inline: var(--space-2); min-height: var(--control-height); }
.edit-input { margin-top: var(--space-4); }
body[data-stage="journal"] .header-actions nav { display: none; }
body[data-stage="journal"] .journal-link { color: var(--red); }
.journal-stats { display: flex; align-items: flex-end; gap: var(--space-12); margin-top: var(--space-8); padding-block: var(--space-6); border-block: 1px solid var(--line); }
.journal-stats > div { display: grid; gap: var(--space-3); }
.journal-stats > div > span { font-size: var(--type-caption); line-height: var(--line-caption); color: var(--muted); }
.journal-stats strong { font-family: var(--font-serif); font-size: var(--type-number); font-weight: var(--weight-regular); line-height: var(--line-title); font-variant-numeric: tabular-nums; }
.journal-stats small { font-family: var(--font-sans); font-size: var(--type-caption); color: var(--muted); }
.journal-stats > button { margin-left: auto; align-self: flex-end; padding-top: var(--space-6); }
.journal-layout { display: grid; grid-template-columns: 360px minmax(0,1fr); gap: var(--space-16); margin-top: var(--space-8); }
.calendar-toolbar { display: flex; align-items: center; gap: var(--space-2); min-height: var(--control-height); }
.calendar-toolbar h2 { flex: 1; text-align: center; font-family: var(--font-sans); font-size: var(--type-body); line-height: var(--line-ui); white-space: nowrap; }
.calendar-today { min-height: var(--control-height); border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--muted); font-size: var(--type-ui); line-height: var(--line-ui); padding-inline: var(--space-2); }
.calendar-today:hover { color: var(--red); }
.calendar-weekdays { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); margin-block: var(--space-6) var(--space-3); text-align: center; font-size: var(--type-caption); line-height: var(--line-caption); color: var(--muted); }
.calendar-grid { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: var(--space-1); }
.calendar-day { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; height: 48px; padding: 0 0 var(--space-2); border: 0; border-radius: 0; background: transparent; color: var(--ink); font-size: var(--type-ui); line-height: var(--line-ui); font-variant-numeric: tabular-nums; }
.calendar-day:hover { background: var(--surface); }
.calendar-day.outside { color: #a0a0a0; }
.calendar-day.today { color: var(--red); }
.calendar-day.selected { background: var(--ink); color: var(--paper); }
.calendar-day.selected.today { background: var(--red); }
.calendar-marks { position: absolute; bottom: 8px; display: flex; align-items: center; justify-content: center; gap: var(--space-1); min-height: 4px; }
.history-dot, .checkin-dot { display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: var(--ink); }
.checkin-dot { border-radius: 0; background: var(--red); }
.calendar-day.selected .history-dot, .calendar-day.selected .checkin-dot { background: var(--paper); }
.calendar-legend { display: flex; align-items: center; justify-content: center; gap: var(--space-6); margin-top: var(--space-6); color: var(--muted); font-size: var(--type-caption); line-height: var(--line-caption); }
.calendar-legend > span { display: flex; align-items: center; gap: var(--space-2); }
.day-records { min-width: 0; }
.day-records-header { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); padding-block: var(--space-3); border-bottom: 1px solid var(--line); }
.day-records-header h2 { font-size: var(--type-section); }
.record-row { display: grid; grid-template-columns: 36px minmax(0,1fr); gap: var(--space-6); padding-block: var(--space-6); border-bottom: 1px solid var(--line); }
.mini-lines { display: flex; flex-direction: column; gap: 3px; width: 36px; height: 36px; flex-shrink: 0; margin-top: 32px; }
.mini-lines .yao { height: 3px; gap: 5px; }
.record-content { min-width: 0; }
.record-meta { color: var(--muted); font-size: var(--type-caption); line-height: var(--line-caption); margin-bottom: var(--space-3); }
.record-content h3 { font-family: var(--font-sans); font-size: var(--type-body); font-weight: var(--weight-regular); line-height: var(--line-body); white-space: pre-wrap; overflow-wrap: anywhere; }
.record-hexagrams { font-size: var(--type-small); line-height: var(--line-body); color: var(--muted); margin-top: var(--space-3); overflow-wrap: anywhere; }
.record-actions { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-3); }
.record-actions .secondary-action { margin-right: auto; }
.journal-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-6); min-height: 240px; color: var(--muted); font-size: var(--type-ui); line-height: var(--line-body); text-align: center; }
.journal-empty svg.lucide { width: 24px; height: 24px; stroke-width: 1; }
.journal-local-note { margin-block: var(--space-6); padding-left: var(--space-4); border-left: 1px solid var(--red); font-size: var(--type-body); line-height: var(--line-body); color: var(--text); }
.journal-backup-actions { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2) var(--space-6); margin-top: var(--space-8); padding-top: var(--space-4); border-top: 1px solid var(--line); }
#backupStatus { width: 100%; color: var(--text); font-size: var(--type-body); line-height: var(--line-body); overflow-wrap: anywhere; }
#backupStatus:empty { display: none; }
.delivery-header { align-items: flex-start; margin-bottom: var(--space-8); }
.delivery-layout { display: grid; grid-template-columns: minmax(0,480px) minmax(0,1fr); gap: var(--space-16); align-items: start; }
.poster-preview { width: 100%; min-width: 0; }
#posterCanvas { display: block; width: 100%; height: auto; aspect-ratio: 3/4; border: 1px solid var(--line); }
.poster-preview figcaption { display: flex; justify-content: space-between; gap: var(--space-4); margin-top: var(--space-3); font-size: var(--type-caption); line-height: var(--line-caption); color: var(--muted); }
.delivery-options { min-width: 0; padding-top: 0; }
.delivery-reading .quiet-note { font-size: var(--type-caption); }
.delivery-reading h2 { font-size: var(--type-number); margin-top: var(--space-2); }
.delivery-verdict { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-6); margin-top: var(--space-4); color: var(--muted); font-size: var(--type-small); line-height: var(--line-caption); }
#deliveryVerdict { color: var(--red); font-size: var(--type-ui); }
#deliveryQuestion { margin-top: var(--space-6); max-height: 168px; overflow-y: auto; font-family: var(--font-sans); font-size: var(--type-body); line-height: var(--line-body); white-space: pre-wrap; overflow-wrap: anywhere; }
.delivery-related { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-items: baseline; gap: var(--space-6); margin-block: var(--space-6); color: var(--muted); font-size: var(--type-small); line-height: var(--line-caption); }
.delivery-related > span:last-child { text-align: right; }
.delivery-related strong { margin-left: var(--space-2); color: var(--ink); font-family: var(--font-serif); font-size: var(--type-body); font-weight: var(--weight-regular); }
.delivery-copy { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); border-block: 1px solid var(--line); padding-block: var(--space-3); margin-bottom: var(--space-6); }
.copy-main { color: var(--ink); }
.poster-theme { border: 0; padding: 0; }
.poster-theme legend { color: var(--muted); font-size: var(--type-caption); line-height: var(--line-caption); padding: 0; margin-bottom: var(--space-4); }
.theme-options { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--space-3); }
.theme-options label { position: relative; display: flex; justify-content: center; align-items: center; gap: var(--space-2); min-height: var(--control-height); padding: var(--space-2); border: 1px solid var(--line); cursor: pointer; }
.theme-options label:hover { border-color: var(--red); }
.theme-options input { position: absolute; width: 1px; height: 1px; min-height: 0; padding: 0; margin: 0; opacity: 0; }
.theme-options label:has(input:checked) { border-color: var(--red); color: var(--ink); background: var(--surface); }
.theme-options label:has(input:focus-visible) { outline: var(--focus-ring); outline-offset: var(--space-1); }
.theme-swatch { width: var(--icon-size); height: var(--icon-size); border: 1px solid #bcbcbc; }
.theme-swatch.white { background: var(--poster-paper); }
.theme-swatch.black { background: var(--poster-dark); border-color: var(--poster-dark); }
.poster-privacy { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: var(--control-height); margin-top: var(--space-4); cursor: pointer; }
.poster-privacy input { width: 16px; height: 16px; min-height: 0; padding: 0; margin: 0; accent-color: var(--red); cursor: pointer; }
.poster-export { display: flex; align-items: center; gap: var(--space-4); margin-top: var(--space-6); }
.poster-export .primary-action { flex: 1; min-width: 0; }
#posterStatus { min-height: 28px; margin-top: var(--space-2); font-size: var(--type-body); line-height: var(--line-body); }
.delivery-bottom { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); border-top: 1px solid var(--line); padding-top: var(--space-4); margin-top: var(--space-6); }
.share-dialog, .delete-dialog, .import-dialog { width: min(600px,calc(100% - 48px)); max-height: calc(100svh - 48px); border: 1px solid var(--line); border-top: 2px solid var(--red); padding: var(--space-8); background: var(--paper); color: var(--ink); border-radius: 0; overflow: auto; }
.share-ai-note { margin-block: var(--space-3) var(--space-4); font-size: var(--type-body); line-height: var(--line-body); color: var(--text); }
.import-dialog > p { font-size: var(--type-body); line-height: var(--line-body); overflow-wrap: anywhere; }
.import-note { color: var(--muted); margin-top: var(--space-4); }
#importBackupName { color: var(--muted); margin-bottom: var(--space-3); }
#importBackupError { color: var(--red); margin-top: var(--space-3); }
dialog::backdrop { background: rgba(0,0,0,.36); }
body:has(dialog[open]) { overflow: hidden; }
.share-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-6); }
.share-heading h2, .delete-dialog h2 { font-size: var(--type-section); }
#shareText { height: 320px; min-height: 192px; max-height: 42svh; font-size: var(--type-small); line-height: var(--line-body); resize: none; white-space: pre-wrap; }
.share-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-6); margin-top: var(--space-4); }
.share-feedback { min-height: 18px; margin-top: var(--space-2); font-size: var(--type-small); line-height: var(--line-caption); color: var(--muted); }
.delete-dialog { max-width: 440px; }
#deleteRecordName { max-height: 168px; overflow: auto; margin-top: var(--space-6); font-size: var(--type-ui); line-height: var(--line-body); color: var(--muted); overflow-wrap: anywhere; }
.toast { position: fixed; z-index: 30; bottom: var(--space-6); left: 50%; transform: translateX(-50%); width: max-content; max-width: calc(100% - 48px); padding: var(--space-3) var(--space-4); background: var(--ink); color: var(--paper); font-size: var(--type-small); line-height: var(--line-caption); text-align: center; pointer-events: none; }
.clipboard-helper { position: fixed; top: 0; left: 0; width: 1px; height: 1px; padding: 0; opacity: 0; }

.wordmark:hover { color: var(--red); }
.method-more { margin-top: var(--space-4); }
.reading-limit { margin-top: var(--space-4); font-size: var(--type-caption); color: var(--muted); line-height: var(--line-caption); }
.time-hint { margin-top: var(--space-2); }
body[data-stage="learn"] .header-actions nav { display: none; }
body[data-stage="learn"] .site-header { display: none; }
body[data-stage="learn"] .app-shell { padding-top: 0; }
.teaching-panel { width: 100%; max-width: 960px; margin-inline: auto; }
.teaching-banner { display: none; position: fixed; top: 0; inset-inline: 0; width: min(960px,calc(100% - var(--page-inset) * 2)); margin-inline: auto; z-index: 20; isolation: isolate; background: var(--paper); padding-top: max(var(--space-4), var(--safe-top)); }
body[data-stage="learn"] .teaching-banner { display: block; }
body[data-stage="learn"] .teaching-panel { padding-top: var(--space-8); }
.teaching-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: 64px; }
.teaching-header h1 { display: flex; align-items: center; gap: var(--space-2); font-size: var(--type-section); white-space: nowrap; }
.teaching-header .brand-mark { width: 1em; height: 1em; border-left-width: .1em; border-bottom-width: .1em; flex-shrink: 0; }
.teaching-header .brand-mark::after { width: .25em; height: .25em; }
.teaching-header h1:focus-visible, #catalogName:focus-visible { outline: none; }
.teaching-header .opening-verse { margin-bottom: var(--space-6); }
.teaching-actions { display: flex; gap: var(--space-2); align-items: center; flex-shrink: 0; }
.lesson-tabs { display: flex; gap: var(--space-6); border-bottom: 1px solid var(--line); margin-bottom: var(--space-8); }
.lesson-tabs button, .lesson-methods button { min-height: var(--control-height); padding: 0; background: transparent; border: 0; color: var(--muted); font-size: var(--type-body); line-height: var(--line-ui); }
.lesson-tabs button { min-width: 48px; border-bottom: 1px solid transparent; margin-bottom: -1px; }
.lesson-tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--red); }
.lesson-tabs button:hover, .lesson-methods button:hover { color: var(--red); }
.teaching-banner .lesson-tabs { margin-bottom: 0; }
.lesson-introduction h2, .lesson-pane h3 { font-size: var(--type-section); font-family: var(--font-serif); font-weight: var(--weight-regular); line-height: var(--line-title); }
.lesson-pane p { font-size: var(--type-body); line-height: var(--line-body); color: var(--text); overflow-wrap: anywhere; }
.lesson-introduction p { margin-top: var(--space-4); max-width: 752px; }
.lesson-timeline { list-style: none; margin: var(--space-8) 0 0; padding: 0; }
.lesson-timeline li { display: grid; grid-template-columns: 160px minmax(0,1fr); gap: var(--space-8); padding-block: var(--space-6); border-top: 1px solid var(--line); }
.lesson-timeline p { margin-top: var(--space-3); }
.lesson-index, .lesson-pane .lesson-index { color: var(--muted); font-size: var(--type-caption); line-height: var(--line-caption); }
.lesson-pane .lesson-source { margin-top: var(--space-6); color: var(--muted); font-size: var(--type-caption); line-height: var(--line-caption); }
.lesson-source a { text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 4px; }
.lesson-source a:hover { color: var(--red); }
.lesson-note, .lesson-audit { margin-top: var(--space-8); padding-top: var(--space-6); border-top: 1px solid var(--line); }
.lesson-note > p, .lesson-audit > p { margin-top: var(--space-4); }
.lesson-trigrams { display: grid; grid-template-columns: repeat(8,minmax(0,1fr)); gap: var(--space-6); margin-block: var(--space-8); padding-block: var(--space-6); border-block: 1px solid var(--line); }
.lesson-trigrams figure { min-width: 0; }
.lesson-trigrams figcaption { display: flex; flex-direction: column; gap: var(--space-1); margin-top: var(--space-3); }
.lesson-trigrams figcaption > span:first-child { font-family: var(--font-serif); font-size: var(--type-body); }
.lesson-trigrams figcaption > span:last-child { font-size: var(--type-caption); color: var(--muted); }
.lesson-lines { display: flex; flex-direction: column; gap: 6px; width: 100%; max-width: 72px; }
.lesson-lines .yao { height: 4px; gap: 8px; }
.lesson-method-layout { display: grid; grid-template-columns: 160px minmax(0,1fr); gap: var(--space-8); }
.lesson-methods { display: flex; flex-direction: column; align-items: flex-start; }
.lesson-methods button[aria-pressed="true"] { color: var(--red); }
.lesson-method-content { min-width: 0; }
.lesson-method-content article > h3 { margin-top: var(--space-2); }
.lesson-method-content article > p:not(.lesson-index) { margin-top: var(--space-4); }
.lesson-formula { padding-left: var(--space-4); margin-block: var(--space-6); border-left: 1px solid var(--red); }
.lesson-formula p + p { margin-top: var(--space-2); }
.lesson-example { margin-top: var(--space-8); padding-top: var(--space-6); border-top: 1px solid var(--line); }
.lesson-example h3 { margin-bottom: var(--space-6); }
.lesson-example label { display: block; margin-bottom: var(--space-2); }
.lesson-example input { min-height: var(--control-height); }
.lesson-example-action { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-top: var(--space-3); }
.lesson-calculation { white-space: pre-wrap; margin-block: var(--space-4) var(--space-6); }
.lesson-example-figures { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--space-6); }
.lesson-example-figures .lesson-lines { max-width: 112px; gap: 8px; }
.lesson-example-figures figcaption { margin-top: var(--space-3); font-size: var(--type-caption); line-height: var(--line-caption); color: var(--text); }
.lesson-relations { margin-block: var(--space-6) 0; }
.lesson-relations > div { display: grid; grid-template-columns: 128px minmax(0,1fr); gap: var(--space-4); margin-top: var(--space-3); }
.lesson-relations dt, .lesson-relations dd { font-size: var(--type-body); line-height: var(--line-body); }
.lesson-relations dt { color: var(--ink); }
.lesson-relations dd { margin: 0; color: var(--text); }
.catalog-layout { display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1fr); gap: var(--space-8); margin-top: var(--space-8); }
.catalog-browser, .catalog-detail { min-width: 0; }
.catalog-search { display: grid; grid-template-columns: minmax(0,1fr) 128px; gap: var(--space-3); }
.catalog-search input, .catalog-search select { min-height: var(--control-height); padding: var(--space-2) var(--space-3); }
.catalog-search select { width: 100%; border: 1px solid var(--line); background: transparent; color: var(--text); font: inherit; }
.catalog-browser .lesson-source { margin-block: var(--space-3); }
.catalog-index { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: var(--space-1); max-height: 480px; overflow-y: auto; padding-right: var(--space-1); scrollbar-gutter: stable; }
.catalog-index-button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-1); height: 80px; min-width: 0; padding: var(--space-2) var(--space-1); border: 0; background: transparent; color: var(--text); }
.catalog-index-button:hover, .catalog-index-button[aria-pressed="true"] { background: var(--surface); color: var(--red); }
.catalog-index-label { display: flex; align-items: baseline; gap: var(--space-1); font-size: var(--type-body); line-height: var(--line-ui); white-space: nowrap; }
.catalog-mini { display: flex; flex-direction: column; gap: 3px; width: 28px; }
.catalog-mini .yao { height: 2px; gap: 4px; }
.catalog-detail, .catalog-browser { scroll-margin-top: var(--space-2); }
.catalog-return { display: none; }
.catalog-hero { display: grid; grid-template-columns: 80px minmax(0,1fr); gap: var(--space-6); align-items: center; min-height: 112px; }
.catalog-lines { display: flex; flex-direction: column; gap: 8px; }
.catalog-lines .yao { height: 8px; gap: 12px; }
.catalog-hero h3 { margin-block: var(--space-2); }
.catalog-text-section { padding-top: var(--space-6); margin-top: var(--space-6); border-top: 1px solid var(--line); }
.catalog-text-section > p { margin-top: var(--space-4); }
.catalog-judgment { margin: var(--space-4) 0 0; font-family: var(--font-serif); font-size: var(--type-section); line-height: 32px; color: var(--ink); overflow-wrap: anywhere; }
.catalog-navigation { display: flex; align-items: center; justify-content: space-between; margin-top: var(--space-6); }
.catalog-empty { padding-block: var(--space-6); }
@media (max-width: 700px) {
  body[data-stage="learn"] .site-header { min-height: 80px; padding-block: var(--space-6); }
  .teaching-header { flex-direction: row; gap: var(--space-2); }
  .teaching-header h1 { font-size: var(--type-body); }
  .teaching-actions { justify-content: flex-end; width: auto; margin-bottom: 0; }
  .lesson-introduction h2, .lesson-pane h3 { font-size: var(--type-body); }
  .lesson-timeline li { grid-template-columns: 1fr; gap: var(--space-3); }
  .lesson-trigrams { grid-template-columns: repeat(4,minmax(0,1fr)); gap: var(--space-6); }
  .lesson-method-layout { grid-template-columns: 1fr; gap: var(--space-6); }
  .lesson-methods { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 0 var(--space-4); align-items: stretch; }
  .lesson-methods button { text-align: left; }
  .lesson-example-action { flex-wrap: wrap; }
  .lesson-relations > div { grid-template-columns: 88px minmax(0,1fr); gap: var(--space-3); }
  .catalog-layout { grid-template-columns: 1fr; }
  .catalog-index { max-height: 320px; }
  .catalog-search { grid-template-columns: minmax(0,1fr) 120px; gap: var(--space-2); }
  .catalog-return { display: inline-flex; margin-bottom: var(--space-4); }
  .catalog-judgment { font-size: var(--type-body); line-height: var(--line-body); }
}

@media (max-width: 1000px) {
  .flow-layout { gap: var(--space-8); }
  .header-actions { gap: var(--space-6); }
  .progress { gap: var(--space-4); }
  .journal-layout { grid-template-columns: 320px minmax(0,1fr); gap: var(--space-8); }
  .journal-stats { gap: var(--space-8); }
  .delivery-layout { grid-template-columns: minmax(0,1fr) minmax(0,.85fr); gap: var(--space-8); }
}
@media (max-width: 700px) {
  body:not([data-stage="spec"]) { padding-top: var(--sticky-height, 178px); }
  .site-header { display: grid; grid-template-columns: minmax(0,1fr) auto; column-gap: var(--space-6); row-gap: var(--space-6); min-height: 128px; padding-block: calc(var(--space-6) + var(--safe-top)) var(--space-4); }
  .wordmark { grid-row: 1; grid-column: 1; font-size: var(--type-body); }
  .header-actions { display: contents; }
  .journal-link { grid-row: 1; grid-column: 2; }
  .header-actions nav { grid-row: 2; grid-column: 1 / -1; width: 100%; border-left: 0; border-top: 1px solid var(--line); padding: var(--space-4) 0 0; }
  .progress { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 0; width: 100%; }
  .progress li { flex-direction: column; justify-content: center; align-items: center; gap: var(--space-1); min-height: 48px; padding-block: 0 var(--space-2); font-size: var(--type-caption); line-height: var(--line-caption); }
  body[data-stage="journal"] .site-header { min-height: 80px; padding-block: calc(var(--space-6) + var(--safe-top)) var(--space-6); }
  .flow-layout { grid-template-columns: 1fr; gap: var(--space-8); }
  .step-card { padding-block: 0; }
  .site-title { font-size: var(--type-number); }
  .opening-verse { margin-bottom: var(--space-8); font-family: var(--font-serif); font-size: var(--type-body); line-height: var(--line-body); }
  [data-step="question"] .section-title { gap: var(--space-2); }
  [data-step="question"] .section-title h2, [data-step="question"] .section-title .section-number { font-family: var(--font-sans); font-size: var(--type-body); font-weight: var(--weight-regular); line-height: var(--line-body); }
  [data-step="question"] .primary-action { font-size: var(--type-body); }
  textarea { min-height: 144px; }
  .form-bottom .quiet-note { font-size: var(--type-body); }
  .origin-art { aspect-ratio: 2 / 1; max-height: 224px; }
  .origin-art figcaption { bottom: 0; padding-inline: var(--space-3); }
  .daily-action { font-size: var(--type-body); gap: var(--space-2); }
  #artIndex { font-family: var(--font-sans); font-size: var(--type-caption); }
  .site-footer { min-height: 64px; gap: var(--space-4); }
  .site-footer > span:first-child { gap: var(--space-2); }
  .footer-divider { width: 12px; }
  .reading-header h1, .derivation-header h1, .journal-header h1, .delivery-header h1 { font-size: var(--type-number); }
  .verdict { font-size: var(--type-body); }
  .result-actions { gap: 0 var(--space-4); }
  .result-actions .text-tool { font-size: var(--type-body); }
  #recordOrigin { margin-left: 0; width: 100%; }
  .asked-line { grid-template-columns: 1fr; gap: var(--space-2); }
  .hexagram-layout { grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--space-6); padding-block: var(--space-8) var(--space-6); }
  .hexagram-card { gap: var(--space-6); }
  .hexagram-card > p { gap: var(--space-2); }
  .lines { gap: 8px; }
  .yao { height: 8px; gap: 12px; }
  .movement-card { grid-column: 1 / -1; grid-row: 2; flex-direction: row; gap: var(--space-3); padding-top: var(--space-3); }
  #movingLine { font-size: var(--type-body); }
  .movement-rule { margin: 0 0 0 var(--space-2); }
  .meta-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--space-6); }
  .meta-grid > div + div { border: 0; padding-left: 0; }
  .meta-grid strong { font-size: var(--type-body); }
  .analysis-block { grid-template-columns: 1fr; gap: var(--space-6); padding-block: var(--space-8); }
  .analysis-heading { flex-direction: row; align-items: baseline; gap: var(--space-4); }
  .section-title h2, .analysis-heading h2, .day-records-header h2, .share-heading h2, .delete-dialog h2 { font-size: var(--type-body); }
  .section-title .section-number { font-size: var(--type-body); }
  .meaning-layer { padding-left: var(--space-6); }
  .derivation-header { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
  .derivation-steps { margin-top: var(--space-6); }
  .derivation-steps button { flex-direction: column; align-items: center; gap: var(--space-2); min-height: 64px; }
  .derivation-formula { min-height: 112px; flex-direction: column; gap: var(--space-2); font-size: var(--type-small); }
  #derivationCanvas { height: 336px; }
  .derivation-caption { min-height: 112px; gap: var(--space-4); }
  .derivation-controls .primary-action { width: 100%; }
  .playback-controls { width: 100%; justify-content: center; gap: var(--space-1); }
  .journal-layout { grid-template-columns: 1fr; gap: var(--space-8); }
  .calendar-section { width: min(400px,100%); margin-inline: auto; }
  .journal-stats { gap: var(--space-4); flex-wrap: wrap; }
  .journal-stats > button { margin-left: auto; }
  .journal-header .secondary-action, .delivery-header .secondary-action { font-size: var(--type-body); }
  .record-row { gap: var(--space-4); }
  .delivery-layout { grid-template-columns: 1fr; gap: var(--space-8); }
  .poster-preview { width: min(420px,100%); margin-inline: auto; }
  .delivery-options { padding-top: 0; }
  .delivery-reading { display: none; }
  .delivery-copy { padding-block: var(--space-2); }
  .share-dialog, .delete-dialog, .import-dialog { padding: var(--space-6) var(--space-4); }
  .share-actions { gap: var(--space-2) var(--space-4); }
  .share-actions .text-tool { font-size: var(--type-body); }
}
@media (max-width: 360px) {
  .hexagram-layout { gap: var(--space-4); }
  .poster-export { gap: var(--space-3); }
  .poster-export .text-tool { font-size: var(--type-body); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
}