:root {
  color-scheme: light;
  --paper: #f4efe5;
  --card: #fdfaf2;
  --center: #f3e7d2;
  --ink: #332921;
  --muted: #6c5b4d;
  --faint: #e3d7c5;
  --line: #cbb69a;
  --accent: #8e3e2b;
  --accent-dark: #672f24;
  --pine: #3b6260;
  --plum: #77516b;
  --teal: #306861;
  --reading-size: 16px;
  --report-dialog-width: 770px;
  --sans: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
  --serif: "Songti SC", "STSong", "Noto Serif CJK SC", SimSun, serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--paper); color: var(--ink); font: var(--body-size, 15px)/1.5 var(--sans); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; opacity: .56; }
button, a, input, textarea, select, summary { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--pine); outline-offset: 3px; }
h1, h2, h3, p { margin: 0; }
svg { width: 17px; height: 17px; display: block; flex: none; }
.masthead { border-bottom: 1px solid var(--faint); }
.masthead-inner, main, .site-footer { width: min(1480px, 100%); margin-inline: auto; padding-inline: clamp(16px, 3.3vw, 48px); }
.masthead-inner { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.identity { display: flex; align-items: center; gap: 12px; }
.site-nav { display: flex; align-items: center; gap: 5px; }
.site-nav .btn { border-color: transparent; }
.site-nav .btn:hover { border-color: var(--line); }
.wordmark { font: 700 22px/1 var(--serif); letter-spacing: .045em; }
.seal { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--accent); outline: 1px solid var(--accent); outline-offset: 2px; border-radius: 4px 5px 3px 5px; background: var(--accent); color: #fff4de; font: 700 23px/1 var(--serif); }
.skip-link { position: fixed; top: 8px; left: 12px; z-index: 11; transform: translateY(-150%); padding: 6px 12px; background: var(--card); color: var(--accent-dark); }
.skip-link:focus { transform: none; }
main { padding-block: 22px 40px; }
.welcome { position: relative; isolation: isolate; overflow: hidden; min-height: 310px; display: grid; align-items: center; padding: clamp(25px, 4.1vw, 56px); border: 1px solid var(--faint); border-radius: 3px 12px 12px 3px; background: #f7ecd8; }
.welcome-art { position: absolute; z-index: -1; inset: 0 0 0 auto; width: min(73%, 785px); height: 100%; object-fit: cover; object-position: right 29%; mask-image: linear-gradient(to right, transparent 1%, #000 34%); }
.welcome-copy { max-width: 48%; }
.welcome h1 { font: 700 clamp(38px, 4.35vw, 67px)/1.12 var(--serif); letter-spacing: .01em; text-wrap: balance; }
.welcome-copy p { max-width: 26em; margin-top: 14px; font-size: clamp(14px, 1.2vw, 16px); line-height: 1.8; color: var(--muted); text-wrap: pretty; }
.welcome-copy .welcome-privacy { max-width: 36em; margin-top: 10px; font-size: 12px; line-height: 1.6; }
.welcome-privacy strong { color: var(--accent-dark); font-weight: 650; }
.welcome-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 19px; }
.welcome-actions .btn { min-height: 42px; padding-inline: 16px; }
.welcome-link { color: var(--accent-dark); text-underline-offset: 4px; text-decoration-color: var(--line); font-size: 14px; white-space: nowrap; }
.welcome-link:hover { text-decoration-color: currentColor; }
.workspace-heading { display: flex; gap: 11px; flex-wrap: wrap; align-items: baseline; padding-top: 27px; margin-bottom: 12px; scroll-margin-top: 12px; }
.workspace-heading h2 { font: 700 clamp(22px, 2.25vw, 31px)/1.2 var(--serif); }
#sample-indicator { color: var(--muted); font-size: 12px; }
[data-edition="public"] .local-ai { display: none; }
.site-footer { display: flex; flex-wrap: wrap; gap: 4px 18px; justify-content: space-between; padding-block: 14px 25px; font-size: 12px; color: var(--muted); border-top: 1px solid var(--faint); }
.toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; }
.actions, .segmented, .analysis-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn { display: inline-flex; gap: 7px; align-items: center; justify-content: center; padding: 8px 13px; min-height: 39px; border: 1px solid #d9d0c1; border-radius: 7px; background: var(--card); color: #423c33; font-size: 14px; font-weight: 550; white-space: nowrap; text-decoration: none; }
.btn:hover { border-color: var(--accent); color: var(--accent-dark); background: #fcf2e3; }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn.primary { background: var(--accent); color: #fffaf1; border-color: var(--accent); }
.btn.primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
.btn.subtle { background: transparent; }
.btn.library-button { border-color: var(--line); }
.btn.chart-edit { color: var(--accent-dark); border-color: var(--line); background: #eee0ca; }
.btn.chart-edit:hover { border-color: var(--accent); }
.segmented { gap: 0; flex-wrap: nowrap; }
.segmented .btn { min-height: 35px; padding-block: 5px; border-radius: 0; }
.segmented .btn:first-child { border-radius: 7px 0 0 7px; }
.segmented .btn:last-child { border-radius: 0 7px 7px 0; margin-left: -1px; }
.segmented .btn[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); position: relative; }
.time-note { padding: 10px 14px; margin-bottom: 16px; border-left: 2px solid var(--line); border-radius: 0 6px 6px 0; background: #efe6d8; color: #544437; font-size: 13px; line-height: 1.7; }
.time-note strong { font-weight: 630; }
.time-note .arrow { margin-inline: 9px; }
.workspace { display: grid; grid-template-columns: minmax(0, 2.6fr) minmax(298px, 1fr); gap: 20px; align-items: start; }
.chart-scroll { overflow-x: auto; }
.chart-grid { min-width: 690px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(4, minmax(155px, 1fr)); gap: 1px; background: var(--line); border: 1px solid #a98970; }
.palace { display: flex; flex-direction: column; text-align: left; min-width: 0; min-height: 0; padding: 7px 8px 5px; background: var(--card); border: 0; color: var(--ink); font-size: clamp(11px, .93vw, 14px); line-height: 1.45; overflow-wrap: anywhere; }
.palace:hover { background: #fcf2e1; }
.palace:focus-visible { outline-offset: -3px; z-index: 1; }
.palace.related { background: #fbefd3; }
.palace.fly-target { box-shadow: inset 0 0 0 1px #c5a778; }
.palace.selected { background: #f8e8cd; box-shadow: inset 0 0 0 2px var(--accent); }
.palace-top { margin-bottom: 8px; }
.stars { display: flex; flex-wrap: wrap; align-items: baseline; gap: 1px 6px; }
.star { display: inline-flex; gap: 1px; align-items: baseline; white-space: nowrap; }
.major { color: var(--accent-dark); font-weight: 700; font-size: 1.18em; }
.minor { color: var(--pine); font-size: 1.06em; }
.adjective, .empty-star { color: var(--muted); }
.empty-star { font-weight: 450; }
.brightness { color: #766b5b; font-size: .78em; font-weight: 500; }
.mut { display: inline-block; border-radius: 3px; padding: 0 3px; color: white; line-height: 1.25; font-size: .77em; font-weight: 600; vertical-align: .05em; }
.lu { --mut: #3b694b; --wash: #edf1e6; }
.quan { --mut: #885113; --wash: #f7ebd6; }
.ke { --mut: #3c5f75; --wash: #e9efef; }
.ji { --mut: #983a38; --wash: #f7e7e3; }
.mut { background: var(--mut); }
.mut.self, .mut.cycle, .mut.annual { background: var(--wash); color: var(--mut); box-shadow: inset 0 0 0 1px var(--mut); }
.mut.cycle { border-bottom: 1px solid var(--plum); }
.mut.annual { border-bottom: 1px solid var(--teal); }
.layer-stars { color: var(--plum); font-size: .93em; margin-top: 2px; }
.layer-stars.annual { color: var(--teal); }
.palace-bottom { margin-top: auto; color: var(--muted); font-size: .9em; }
.palace-facts { display: flex; justify-content: space-between; gap: 4px; align-items: end; }
.palace-facts b { color: var(--accent); font-size: 1.14em; font-weight: 650; }
.palace-facts > :last-child { text-align: right; flex: none; }
.palace-footer { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; padding-top: 3px; margin-top: 3px; border-top: 1px dashed var(--line); font-size: .98em; color: var(--muted); }
.palace-footer strong { color: var(--accent-dark); font-size: 1.13em; }
.palace-footer .stem { margin-left: auto; font-weight: 600; }
.tag { display: inline-flex; align-items: center; padding: 0 3px; line-height: 1.35; border: 1px solid currentColor; border-radius: 3px; white-space: nowrap; font-size: .9em; }
.tag.body { color: #fff6e6; background: var(--accent-dark); border-color: var(--accent-dark); }
.tag.cause { color: #fff5d9; background: #9a581a; border-color: #9a581a; }
.tag.decade { color: var(--plum); }
.tag.annual { color: var(--teal); }
.tag.layer-life { color: #fff; background: var(--plum); border-color: var(--plum); }
.tag.annual.layer-life { background: var(--teal); border-color: var(--teal); }
.chart-center { grid-area: 2 / 2 / 4 / 4; display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: clamp(13px, 1.5vw, 24px); background: var(--center); }
.center-name { display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap; gap: 10px; margin-bottom: 11px; }
.center-name h2 { color: var(--accent); font: 700 clamp(21px, 2vw, 29px)/1.25 var(--serif); overflow-wrap: anywhere; }
.center-name span { color: var(--muted); font-size: 13px; }
.center-data { margin: 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 3px 11px; align-items: baseline; font: 550 clamp(12px, 1vw, 15px)/1.5 var(--serif); }
.center-data dt { color: var(--muted); }
.center-data dd { margin: 0; overflow-wrap: anywhere; }
.mut-label { color: var(--mut); font-weight: 700; }
.center-layer, .legend { display: flex; align-items: baseline; gap: 4px 10px; flex-wrap: wrap; font-size: clamp(11px, .96vw, 14px); }
.center-layer { margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--line); color: var(--plum); }
.center-layer .annual-key { color: var(--teal); }
.legend { margin-top: 8px; color: var(--muted); }
.legend .decade-key { color: var(--plum); }
.legend .annual-key { color: var(--teal); }
.chart-tip { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 3px 12px; margin: 12px 0 0; color: var(--muted); font-size: 13px; }
.timeline { background: #f9f3e8; border: 1px solid var(--faint); border-radius: 9px; padding: 15px 16px 5px; }
.timeline-heading { display: flex; align-items: center; justify-content: space-between; gap: 5px; margin-bottom: 1px; }
.timeline h2, .palace-detail h2, dialog h2 { font-size: 18px; font-weight: 650; }
.timeline h2 { font: 700 21px/1.25 var(--serif); color: var(--accent-dark); }
.timeline-item + .timeline-item { border-top: 1px solid #eae2d7; }
.timeline-toggle { width: 100%; display: grid; grid-template-columns: 14px minmax(0, 1fr); align-items: center; gap: 6px; padding: 15px 0; border: 0; background: transparent; text-align: left; }
.timeline-toggle:hover .decade-no { text-decoration: underline; }
.timeline-toggle[aria-expanded="true"] .chevron { transform: rotate(90deg); }
.decade-title { display: flex; align-items: baseline; flex-wrap: wrap; gap: 1px 9px; font-size: 14px; }
.decade-no { color: var(--plum); font-weight: 700; font-size: 15px; }
.year-range { color: var(--muted); font-variant-numeric: tabular-nums; }
.decade-place { color: var(--accent); flex-basis: 100%; }
.current { padding: 0 5px; border: 1px solid #d9aa91; border-radius: 3px; background: #fae9df; font-size: 11px; }
.timeline-open { padding: 0 0 14px; }
.transit { display: flex; gap: 4px; flex-wrap: wrap; align-items: baseline; font-size: 13px; }
.transit + .transit { margin-top: 7px; }
.flight { display: inline-block; padding: 1px 4px; border: 1px solid color-mix(in srgb, var(--mut) 30%, transparent); border-radius: 3px; color: var(--mut); background: var(--wash); font-size: .91em; }
.years { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; margin: 9px 0 0; }
.year { display: flex; flex-direction: column; align-items: center; min-width: 0; line-height: 1.25; padding: 6px 2px; border: 1px solid var(--faint); border-radius: 6px; background: transparent; font-size: 11px; color: var(--muted); }
.year b { color: var(--ink); font-size: 13px; font-variant-numeric: tabular-nums; }
.year:hover, .year.current-year { border-color: var(--accent); }
.year[aria-pressed="true"] { background: #f5e5d2; border-color: var(--accent); color: var(--accent-dark); }
.annual-note { margin-top: 9px; }
.palace-detail { margin-top: 15px; padding: 13px 15px; border: 1px solid var(--faint); border-radius: 7px; background: var(--card); }
.palace-detail header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 7px; color: var(--accent-dark); }
.detail-actions { display: flex; align-items: center; gap: 5px; }
.palace-detail p { margin-bottom: 7px; font-size: 13px; color: var(--muted); }
.text-button { border: 0; background: none; padding: 5px 0; color: var(--accent); font-size: 12px; }
.text-button:hover { text-decoration: underline; }
.reading-link { text-decoration: none; white-space: nowrap; }
.reading { margin-top: 28px; padding: clamp(16px, 3vw, 41px); border: 1px solid var(--faint); border-top: 2px solid var(--line); border-radius: 3px 3px 9px 9px; background: var(--card); font-size: var(--reading-size); line-height: 1.85; }
.reading-heading, .reading-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 3px 10px; flex-wrap: wrap; }
.reading-heading { padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.reading-heading h2 { font: 700 clamp(25px, 2.4vw, 34px)/1.25 var(--serif); color: var(--accent-dark); scroll-margin-top: 16px; }
.reading-name { font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.reading-intro { margin-top: 16px; }
.reading-intro > p, .reading-guide p, .reading-palace-body > p:not(.reading-example) { max-width: 42em; }
.reading-intro > p + p { margin-top: 7px; }
.reading-section { margin-top: 29px; }
.reading-section h3 { font: 700 20px/1.4 var(--serif); }
.reading-section > p { margin-top: 5px; color: var(--muted); }
.reading-guide { margin-top: 10px; border: 1px solid var(--faint); border-radius: 5px; }
.reading-guide summary { cursor: pointer; padding: 7px 10px; color: var(--accent-dark); font-size: 13px; }
.reading-guide > div { padding: 0 10px 10px; }
.reading-guide p + p { margin-top: 7px; }
.reading-palaces { margin-top: 4px; border-block: 1px solid var(--faint); }
.reading-palace + .reading-palace { border-top: 1px solid var(--faint); }
.reading-palace { scroll-margin-top: 12px; }
.reading-palace summary { display: grid; grid-template-columns: max-content 58px 1fr auto; align-items: baseline; gap: 7px; padding: 11px 4px; cursor: pointer; list-style: none; }
.reading-palace summary::-webkit-details-marker { display: none; }
.reading-palace summary::before { content: "›"; align-self: center; color: var(--accent); font-size: 19px; line-height: 1; }
.reading-palace[open] > summary::before { transform: rotate(90deg); }
.reading-palace summary:hover, .reading-palace[open] > summary { color: var(--accent-dark); background: #f8f0e1; }
.reading-palace summary > span, .reading-palace summary > small { color: var(--muted); font-size: 13px; }
.reading-palace summary > small { text-align: right; }
.reading-palace-body { padding: 10px 6px 16px 15px; }
.reading-palace-body > * + * { margin-top: 7px; }
.reading-basis { color: var(--muted); font-size: 13px; }
.reading-star-notes, .reading-mutations { list-style: none; margin-bottom: 0; padding: 0; }
.reading-star-notes li, .reading-mutations li { display: grid; grid-template-columns: minmax(58px, max-content) 1fr; gap: 7px; }
.reading-star-notes li + li { margin-top: 3px; }
.reading-star-notes li > strong { color: var(--accent-dark); }
.reading-mutations { margin-top: 7px; }
.reading-mutations li { padding: 6px 0; }
.reading-mutations li + li { border-top: 1px solid var(--faint); }
.reading-example { display: grid; gap: 3px; padding: 11px 14px; border-left: 2px solid var(--line); background: #f6ecda; }
.reading-example span { max-width: 43em; }
.reading-example > strong { color: var(--accent-dark); font-size: 13px; }
.reading-timing { margin-top: 8px; }
.reading-timing > * + * { margin-top: 6px; }
.reading-end { margin-top: 20px; padding-top: 10px; border-top: 1px solid var(--faint); color: var(--muted); font-size: 12px; }
.list-view { overflow-x: auto; border: 1px solid var(--line); background: var(--card); }
table { width: 100%; border-collapse: collapse; text-align: left; font-size: 13px; }
th, td { padding: 8px 10px; border-bottom: 1px solid var(--faint); }
th { background: var(--center); white-space: nowrap; }
td:first-child { min-width: 100px; }
.list-palace { font-size: 14px; font-weight: 650; }
.list-center { border-bottom: 1px solid var(--line); }
.list-center .center-data { grid-template-columns: max-content auto; justify-content: center; }
dialog { width: min(610px, calc(100% - 30px)); max-height: calc(100dvh - 36px); padding: 0; color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 16px 55px #39240e2b; }
dialog::backdrop { background: #2b241b68; }
.wide-dialog { width: min(770px, calc(100% - 30px)); }
.dialog-head, .dialog-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 13px 18px; }
.dialog-head { border-bottom: 1px solid var(--faint); color: var(--accent-dark); }
.dialog-foot { border-top: 1px solid var(--faint); justify-content: flex-end; }
.dialog-body { padding: 16px 18px; }
.icon-button { display: inline-grid; place-items: center; width: 33px; height: 33px; border: 0; background: none; border-radius: 5px; color: var(--muted); }
.icon-button:hover { background: #f4e9d8; color: var(--accent-dark); }
.birth-fields, .analysis-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: end; }
label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; }
label.check { flex-direction: row; align-items: center; min-height: 26px; }
label.align-end { min-height: 36px; }
input, select, textarea { min-width: 0; width: 100%; border: 1px solid #d8cebb; border-radius: 5px; background: #fffdf8; padding: 7px 9px; }
textarea { resize: vertical; line-height: 1.55; }
input[type="checkbox"] { width: 15px; height: 15px; accent-color: var(--accent); margin: 0 3px 0 0; }
.span-2 { grid-column: 1 / -1; }
.lunar-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; align-items: end; gap: 8px; border: 1px solid var(--faint); padding: 4px 8px 8px; border-radius: 5px; margin: 0; }
.lunar-fields legend { font-size: 13px; }
.lunar-fields .check { padding-bottom: 5px; white-space: nowrap; }
.checks { display: grid; align-content: center; }
.form-error { color: #a32427; font-size: 13px; }
.form-hint { color: var(--muted); font-size: 13px; margin-top: 8px; }
.privacy-note { padding: 9px 12px; border-left: 2px solid var(--line); border-radius: 0 5px 5px 0; background: #f3e9d9; color: #544437; font-size: 13px; line-height: 1.6; }
.privacy-note > strong { display: block; margin-bottom: 3px; color: var(--accent-dark); font-size: 14px; }
.privacy-note > p + p { margin-top: 4px; }
.export-options { display: flex; flex-wrap: wrap; gap: 8px; }
.file-button { cursor: pointer; flex-direction: row; position: relative; }
.file-button input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.file-button:focus-within { outline: 2px solid var(--pine); outline-offset: 2px; }
.record { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--faint); }
.record > div { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.record small { display: block; color: var(--muted); }
.record .btn { min-height: 31px; padding: 3px 8px; }
.analysis-body { display: grid; gap: 13px; }
.analysis-template { display: flex; justify-content: space-between; align-items: center; gap: 8px; color: var(--muted); }
#prompt, #result { font-family: ui-monospace, var(--sans); }
.local-ai { border-top: 1px solid var(--faint); padding-top: 10px; }
.local-ai summary { cursor: pointer; color: var(--accent-dark); }
.online-ai { border-top: 1px solid var(--faint); padding-top: 10px; }
.online-ai h3, .settings-form h3 { font: 700 18px/1.4 var(--serif); }
.growing { flex: 1; min-width: 130px; }
.settings-tabs, .settings-actions { display: flex; align-items: end; flex-wrap: wrap; gap: 7px; }
.settings-tabs { margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--faint); }
.settings-tabs .btn[aria-pressed="true"] { color: var(--accent-dark); border-color: var(--accent); background: var(--center); }
.settings-section { display: grid; gap: 12px; }
.settings-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-items: end; }
.advanced-settings { padding: 8px 10px; border: 1px solid var(--faint); border-radius: 5px; }
.advanced-settings summary { cursor: pointer; color: var(--accent-dark); font-size: 13px; }
.advanced-settings > div { margin-top: 8px; }
.settings-record, .history-record { flex-wrap: wrap; }
.endpoint { overflow-wrap: anywhere; word-break: break-word; }
#report-dialog { width: min(var(--report-dialog-width), calc(100% - 26px)); }
.report-chapters > section { margin-top: 15px; padding-top: 12px; border-top: 1px solid var(--faint); }
.report-chapters h3 { font: 700 20px/1.4 var(--serif); color: var(--accent-dark); }
.report-text { font-size: var(--reading-size); line-height: 1.75; overflow-wrap: anywhere; }
.report-text h4 { margin: 11px 0 5px; }
.report-text p:empty { min-height: .6em; }
.copy-fallback { position: fixed; inset: 0 auto auto 0; width: 1px; height: 1px; opacity: 0; }
.model-row { margin: 8px 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: end; }
.model-row label { flex: 1; min-width: 150px; }
#result-area { margin-top: 11px; }
#export-result { margin-top: 6px; }
.toast { position: fixed; z-index: 10; right: 18px; bottom: 17px; max-width: min(390px, calc(100% - 36px)); padding: 9px 14px; background: #35291f; color: #fff9ee; border-radius: 7px; font-size: 13px; }
[data-palette="ink"] { --center: #e9e7de; --line: #b9b5a7; --pine: #415a55; --plum: #5f5665; }
[data-palette="cinnabar"] { --center: #f7e3d9; --line: #cb9b85; --plum: #8b4c4c; }
[data-palette="indigo"] { --center: #e8edf0; --line: #a7b6bc; --pine: #3a5d6c; --plum: #4e607f; }
[data-font="small"] { --body-size: 14px; --reading-size: 14px; }
[data-font="large"] { --body-size: 16px; --reading-size: 18px; }
[data-font="xlarge"] { --body-size: 18px; --reading-size: 21px; }
[data-report-width="narrow"] { --report-dialog-width: 590px; }
[data-report-width="wide"] { --report-dialog-width: 1050px; }
[data-report-width="full"] { --report-dialog-width: 100vw; }
[data-theme="dark"] {
  color-scheme: dark;
  --paper: #26221f;
  --card: #302a26;
  --center: #3b322a;
  --ink: #f1e6d8;
  --muted: #d0bfae;
  --faint: #51453b;
  --line: #7e6855;
  --accent: #a94e38;
  --accent-dark: #f0bb9e;
  --pine: #a9c6be;
  --plum: #d2aec8;
  --teal: #9cc7bd;
}
[data-theme="dark"][data-palette="ink"] { --center: #33342f; --line: #73766c; }
[data-theme="dark"][data-palette="cinnabar"] { --center: #442e2a; --line: #996e60; }
[data-theme="dark"][data-palette="indigo"] { --center: #303b42; --line: #637e89; }
[data-theme="dark"] .welcome { background: #352e27; }
[data-theme="dark"] .welcome-art { opacity: .32; }
[data-theme="dark"] .btn:not(.primary), [data-theme="dark"] input, [data-theme="dark"] textarea, [data-theme="dark"] select {
  background: var(--card); color: var(--ink); border-color: var(--line);
}
[data-theme="dark"] .btn:not(.primary):hover, [data-theme="dark"] .btn[aria-pressed="true"],
[data-theme="dark"] .reading-palace summary:hover, [data-theme="dark"] .reading-palace[open] > summary,
[data-theme="dark"] .palace:hover, [data-theme="dark"] .palace.related, [data-theme="dark"] .palace.selected,
[data-theme="dark"] .icon-button:hover, [data-theme="dark"] .year[aria-pressed="true"] { background: var(--center); color: var(--ink); }
[data-theme="dark"] :is(.timeline, .reading-example, .time-note, .privacy-note) { background: var(--center); color: var(--ink); }
[data-theme="dark"] .timeline-item + .timeline-item { border-color: var(--faint); }
[data-theme="dark"] .primary:hover { background: #863923; border-color: #863923; }
[data-theme="dark"] .tag.layer-life { color: #2d232b; }
[data-theme="dark"] .tag.body { color: #381d13; }
[data-theme="dark"] .palace-facts b, [data-theme="dark"] .decade-place,
[data-theme="dark"] .center-name h2, [data-theme="dark"] .text-button, [data-theme="dark"] .segmented .btn[aria-pressed="true"] { color: var(--accent-dark); }
[data-theme="dark"] .current { background: #593b31; color: #f5c4a9; }
[data-theme="dark"] .mut-label.lu { color: #a4c995; }
[data-theme="dark"] .mut-label.quan { color: #edbe8a; }
[data-theme="dark"] .mut-label.ke { color: #9ebecd; }
[data-theme="dark"] .mut-label.ji { color: #f4ac9a; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .btn, .year, .palace { transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease; }
}
@media (min-width: 1360px) { .chart-grid { grid-template-rows: repeat(4, minmax(172px, 1fr)); } }
@media (max-width: 1050px) {
  .workspace { grid-template-columns: minmax(0, 1fr); }
  .timeline { margin-top: 3px; }
  .timeline-open .years { max-width: 530px; }
  .decade-place { flex-basis: auto; }
}
@media (max-width: 620px) {
  .masthead-inner { min-height: 60px; flex-wrap: wrap; padding-block: 10px 6px; gap: 6px; }
  .site-nav { width: 100%; justify-content: space-between; gap: 2px; }
  .site-nav .btn { font-size: 12px; min-height: 33px; padding: 5px 7px; gap: 4px; }
  .site-nav svg { width: 13px; height: 13px; }
  .wordmark { font-size: 19px; }
  .seal { width: 28px; height: 28px; font-size: 20px; }
  main { padding-top: 13px; }
  .welcome { min-height: 290px; padding: 23px 18px; }
  .welcome-art { inset: 0 0 auto auto; width: 76%; height: 100%; opacity: .62; object-position: 74% 48%; mask-image: linear-gradient(to right, transparent 0%, transparent 10%, #000 85%); }
  .welcome-copy { max-width: 100%; }
  .welcome-copy p { max-width: 16em; }
  .welcome-actions { gap: 11px; margin-top: 15px; }
  .welcome-actions .btn, .welcome-link { font-size: 13px; }
  .workspace-heading { padding-top: 22px; }
  .toolbar { align-items: flex-start; flex-direction: column; gap: 8px; }
  .actions { gap: 5px; }
  .actions .btn { font-size: 12px; min-height: 35px; padding: 5px 8px; gap: 5px; }
  .actions svg { width: 14px; height: 14px; }
  .time-note { font-size: 12px; padding: 8px 10px; }
  .chart-grid { min-width: 620px; grid-template-rows: repeat(4, minmax(135px, 1fr)); }
  .chart-tip { font-size: 12px; }
  .reading { font-size: calc(var(--reading-size) - 1px); }
  .reading-palace summary { grid-template-columns: max-content 45px 1fr auto; gap: 5px; }
  .reading-palace summary > span, .reading-palace summary > small { font-size: 11px; }
  .reading-mutations li { grid-template-columns: minmax(0, 1fr); gap: 1px; }
  .dialog-head, .dialog-foot, .dialog-body { padding-inline: 12px; }
  .birth-fields { gap: 9px; }
  .settings-form { gap: 8px; }
  .settings-tabs .btn { min-height: 35px; padding-inline: 8px; font-size: 12px; }
  .settings-form label { min-width: 0; }
  .history-record > div { flex-basis: 100%; }
}
@media print {
  @page { size: landscape; margin: 10mm; }
  body { background: white; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .masthead, .skip-link, .welcome, .workspace-heading, .toolbar, .timeline, .chart-tip, .palace-detail, .reading, .site-footer, .toast, dialog { display: none !important; }
  main { width: 100%; padding: 0; }
  .workspace { display: block; }
  .chart-scroll { overflow: visible; }
  .chart-grid { min-width: 0; grid-template-rows: repeat(4, minmax(100px, 1fr)); break-inside: avoid; }
  .chart-center { padding: 8px 12px; }
  .palace { font-size: 10px; padding: 4px; }
  .center-data, .center-layer, .legend { font-size: 10px; gap: 2px 5px; }
  .center-name { margin-bottom: 5px; }
  .center-layer, .legend { margin-top: 4px; }
  .time-note { font-size: 10px; margin-bottom: 7px; padding: 5px 8px; }
  body[data-print="report"] :is(main, .site-footer) { display: none !important; }
  body[data-print="report"] #report-dialog { position: static; display: block !important; width: 100%; max-width: none; max-height: none; margin: 0; border: 0; box-shadow: none; overflow: visible; }
  body[data-print="report"] #report-dialog :is(.dialog-foot, .icon-button) { display: none; }
  body[data-print="report"] #report-dialog::backdrop { display: none; }
}