/* Static light field and five-window display. */
.lux { background: var(--bg); color: var(--text); overflow: hidden; }
.lux__field {
  position: absolute; inset: 0 0 auto; height: 780px; z-index: -1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(var(--white-rgb), 0) 60%, var(--bg) 92%),
    radial-gradient(52% 62% at 88% -4%, rgba(var(--accent-rgb), .62) 0%, rgba(var(--accent-rgb), 0) 72%),
    radial-gradient(42% 48% at 4% -2%, rgba(var(--field-ink-rgb), .85) 0%, rgba(var(--field-ink-rgb), 0) 70%),
    linear-gradient(166deg, var(--field-ink) 0%, var(--accent-dark) 41%, var(--accent) 60%, var(--field-mist) 76%, var(--bg) 90%);
}
.preview-topbar { max-width: none; }
.lux__copy { max-width: 960px; margin-inline: auto; padding: 28px 24px 0; text-align: center; color: var(--on-dark); }
.chip-row { display: inline-flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; min-height: 30px; padding: 3px 14px 3px 4px; border: 1px solid rgba(var(--white-rgb), .22); border-radius: var(--r-pill); background: rgba(var(--white-rgb), .08); color: rgba(var(--white-rgb), .9); font-size: 13px; }
.tag-warm { display: inline-flex; align-items: center; min-height: 22px; padding: 1px 10px; border-radius: var(--r-pill); background: var(--grad-warm); color: var(--field-ink); font-size: var(--fs-caption); font-weight: var(--weight-strong); letter-spacing: .02em; }
.lux__title { margin: 18px 0 0; font-size: var(--fs-h1); font-weight: var(--weight-medium); line-height: 1.2; letter-spacing: 0; }
.lux__title-line { display: block; }
.lux__title em { font-style: normal; color: var(--amber); background: var(--grad-warm); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: var(--transparent); }
.lux__lead { margin: 14px auto 0; max-width: 760px; font-size: var(--fs-lead); line-height: 1.6; color: rgba(var(--white-rgb), .8); }
.lux__lead strong { color: var(--on-dark); }
.os-row { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px 30px; list-style: none; padding: 0; margin: 18px 0 0; }
.os-row a { display: inline-flex; align-items: center; gap: 8px; min-height: 22px; color: rgba(var(--white-rgb), .86); text-decoration: none; font-size: 13.5px; }
.os-row a:hover { color: var(--on-dark); }
.os-row svg { width: 16px; height: 16px; }
.shelf { margin-top: 28px; padding-bottom: 24px; }
.shelf__track { height: var(--shelf-focus-h); display: flex; justify-content: center; align-items: center; gap: 24px; }
.card { position: relative; flex: 0 0 var(--shelf-card-w); height: var(--shelf-card-h); padding: 22px 22px 0; display: flex; flex-direction: column; border-radius: var(--r-card); border: 1px solid rgba(var(--white-rgb), .24); overflow: hidden; color: var(--on-dark); }
.card::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(var(--white-rgb), .12), rgba(var(--white-rgb), 0) 42%); }
.card--deep { background: var(--accent-dark); color: var(--on-dark); }
.card--sky { background: var(--accent); color: var(--on-dark); }
.card--focus { flex-basis: var(--shelf-focus-w); height: var(--shelf-focus-h); background: var(--card-light); border-color: rgba(var(--white-rgb), .7); color: var(--text); box-shadow: var(--shadow-focus); }
.card--focus::before { background: linear-gradient(180deg, rgba(var(--white-rgb), .55), rgba(var(--white-rgb), 0) 45%); }
.card__head { position: relative; display: flex; align-items: center; gap: 10px; font: var(--weight-normal) 16px/1.4 var(--font-display); }
.card__head svg { width: 20px; height: 20px; }
.card--focus .card__head svg { color: var(--accent); }
.win { position: relative; flex: 1; min-width: 0; margin: 18px 0 -24px; display: flex; flex-direction: column; border-radius: var(--r-win); background: var(--bg); color: var(--text); overflow: hidden; box-shadow: 0 0 0 1px rgba(var(--white-rgb), .14); }
.card--focus .win { box-shadow: 0 0 0 1px var(--border); }
.win__bar { position: relative; flex: 0 0 34px; display: flex; align-items: center; gap: 7px; padding: 0 13px; background: var(--bg-panel); color: var(--text-muted); border-bottom: 1px solid var(--border); }
.win__dot { width: 10px; height: 10px; flex-shrink: 0; border-radius: var(--r-circle); }
.win__dot--close { background: var(--dot-close); }
.win__dot--min { background: var(--dot-min); }
.win__dot--max { background: var(--dot-max); }
.win__title { position: absolute; left: 50%; transform: translateX(-50%); font-size: var(--fs-caption); font-weight: var(--weight-medium); color: var(--text-muted); white-space: nowrap; }
.win__body { flex: 1; min-width: 0; padding: 16px; }
.form-row { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: center; gap: 10px; }
.form-row + .form-row { margin-top: 12px; }
.form-row__label { font-size: var(--fs-caption); color: var(--text-muted); white-space: nowrap; }
.input { display: flex; align-items: center; height: 28px; padding-inline: 10px; border: 1px solid var(--border); border-radius: var(--r-field); background: var(--bg); color: var(--text); }
.input--short { width: 46%; }
.ph { display: block; height: 6px; border-radius: var(--r-pill); background: var(--bg-panel2); }
.ph--w70 { width: 70%; }
.ph--w85 { width: 85%; }
.ph--w55 { width: 55%; }
.ph--w60 { width: 60%; }
.checkbox { width: 16px; height: 16px; display: grid; place-items: center; border-radius: var(--r-check); background: var(--accent); color: var(--on-dark); font-size: var(--fs-caption); }
.win__body--desk { position: relative; padding: 0; background: linear-gradient(180deg, var(--card-light), var(--bg)); color: var(--text); }
.menubar { height: 26px; display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding-inline: 10px; background: rgba(var(--white-rgb), .78); color: var(--text); border-bottom: 1px solid var(--border); }
.menubar__glyph { width: 14px; height: 7px; border-radius: var(--r-check); background: var(--text-muted); opacity: .32; }
.menubar__glyph--wide { width: 26px; }
.menubar__tray { width: 22px; height: 18px; display: grid; place-items: center; border-radius: var(--r-check); background: var(--accent); color: var(--on-dark); font-size: var(--fs-caption); }
.menu { position: absolute; top: 32px; right: 10px; width: 232px; padding: 6px; border: 1px solid var(--border); border-radius: var(--r-field); background: var(--bg); color: var(--text); box-shadow: var(--shadow-menu); }
.menu__label { padding: 3px 10px 4px; font-size: 11px; color: var(--text-muted); }
.menu__item { min-height: 30px; display: flex; align-items: center; gap: 8px; padding: 4px 10px; border-radius: var(--r-small); font-size: 13px; }
.menu__tick { width: 14px; flex-shrink: 0; }
.menu__item.is-on { background: var(--accent); color: var(--on-dark); }
.menu__sep { height: 1px; margin: 5px 4px; background: var(--border); }
.menu__meta { margin-left: auto; font-size: var(--fs-caption); color: var(--text-muted); }
.field-label { margin-bottom: 6px; font-size: 11.5px; color: var(--text-muted); }
.field-label--gap { margin-top: 14px; }
.select { min-height: 34px; display: flex; align-items: center; justify-content: space-between; padding: 4px 12px; border: 1px solid var(--border); border-radius: var(--r-field); background: var(--bg); color: var(--text); font-size: 13.5px; font-weight: var(--weight-medium); }
.rules { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.rule { min-height: 32px; display: flex; align-items: center; gap: 9px; padding: 5px 11px; border-radius: var(--r-field); background: var(--bg-panel); color: var(--text); font: var(--weight-normal) 12px/1.6 var(--font-mono); }
.rule__dot { width: 7px; height: 7px; flex-shrink: 0; border-radius: var(--r-circle); background: var(--success); }
.rule__dot--proxy { background: var(--accent); }
.rule__arrow { color: var(--text-muted); }
.rule__out { font-weight: var(--weight-medium); color: var(--text); }
.footnote { margin-top: 10px; font-size: 11.5px; color: var(--text-muted); }
.win--code { background: var(--code-bg); color: var(--field-mist); box-shadow: 0 0 0 1px rgba(var(--white-rgb), .1); }
.win--code .win__bar { background: var(--code-bar); color: var(--field-mist); border-color: rgba(var(--white-rgb), .06); }
.win--code .win__title { font-family: var(--font-mono); font-weight: var(--weight-normal); color: var(--field-mist); }
.code { margin: 0; padding: 14px 16px; font: var(--weight-normal) 11.5px/1.55 var(--font-mono); color: var(--code-punct); white-space: pre; overflow-x: auto; background: var(--code-bg); }
.code .k { color: var(--field-mist); }
.code .s { color: rgba(var(--white-rgb), .88); }
.code .kw { color: var(--accent); font-weight: var(--weight-medium); }
.seg { display: flex; height: 34px; padding: 3px; border-radius: var(--r-pill); background: var(--bg-panel2); color: var(--text-muted); }
.seg__opt { flex: 1; display: grid; place-items: center; border-radius: var(--r-pill); font-size: 13px; }
.seg__opt.is-sel { background: var(--accent); color: var(--on-dark); font-weight: var(--weight-medium); }
.setrows { margin-top: 14px; }
.setrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-block: 12px; border-top: 1px solid var(--border); font-size: 13.5px; }
.setrow > :first-child { min-width: 0; }
.switch { position: relative; width: 38px; height: 22px; flex-shrink: 0; border: 1px solid var(--border); border-radius: var(--r-pill); background: var(--bg-panel2); }
.switch::after { content: ""; position: absolute; top: 1px; left: 1px; width: 18px; height: 18px; border-radius: var(--r-circle); background: var(--bg); box-shadow: var(--shadow-switch); }
.switch--on { background: var(--accent); border-color: var(--accent); }
.switch--on::after { left: 17px; }
.pager { margin-top: 22px; display: flex; justify-content: center; align-items: center; gap: 8px; }
.pager span { width: 7px; height: 7px; border-radius: var(--r-pill); background: var(--border); }
.pager .is-cur { width: 24px; background: var(--accent); }

/* Stateful and editorial components. */
.tabs { min-width: 0; }
.tablist, [role="tablist"] { display: flex; align-items: center; gap: 6px; max-width: 100%; overflow-x: auto; padding: 5px; border-radius: var(--r-pill); background: var(--bg-panel2); color: var(--text); scrollbar-width: thin; }
.tab, [role="tab"] { display: inline-flex; align-items: center; justify-content: center; gap: 10px; flex-shrink: 0; min-height: 44px; padding: 10px 20px; border: 0; border-radius: var(--r-pill); background: var(--transparent); color: var(--text-muted); font-size: var(--fs-small); text-decoration: none; }
.tab svg { width: 18px; height: 18px; }
.tab[aria-selected="true"], [role="tab"][aria-selected="true"] { background: var(--accent); color: var(--on-dark); }
.tab:hover { color: var(--accent-dark); }
.tab[aria-selected="true"]:hover { color: var(--on-dark); }
.tabpanel { min-width: 0; padding-top: 24px; }
.settings-stage { padding: 40px; border-radius: var(--r-stage); background: var(--bg-panel); color: var(--text); }
.settings-window { border: 1px solid var(--border); border-radius: var(--r-win); background: var(--bg); color: var(--text); overflow: hidden; }
.settings-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); }
.settings-layout > * { min-width: 0; }
.settings-sidebar { display: flex; flex-direction: column; align-items: stretch; gap: 6px; padding: 20px 14px; border-radius: 0; background: var(--bg-panel); color: var(--text); }
.settings-sidebar .tab { justify-content: flex-start; }
.settings-detail { padding: 32px; }
.settings-detail h3 { margin: 0 0 18px; font-size: 26px; font-weight: var(--weight-normal); }
.settings-detail p { color: var(--text-muted); }
.toc { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 32px; padding: 16px; border-radius: var(--r-tile); background: var(--bg-panel); color: var(--text); }
.toc a { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 16px; border-radius: var(--r-pill); color: var(--text-muted); text-decoration: none; font-size: var(--fs-small); }
.toc a:hover, .toc a[aria-current] { background: var(--bg); color: var(--accent-dark); }
.toc--sticky { position: sticky; top: 12px; z-index: 10; }
.faq-item { border-bottom: 1px solid var(--border); background: var(--bg); color: var(--text); }
.faq-item summary { position: relative; padding: 22px 44px 22px 0; cursor: pointer; list-style: none; font-weight: var(--weight-medium); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; position: absolute; right: 8px; top: 19px; color: var(--accent-dark); font-size: 24px; line-height: 1.4; }
.faq-item[open] summary::after { content: "−"; }
.faq-item__answer { padding-bottom: 24px; max-width: 800px; color: var(--text-muted); }
.faq-item__answer p:last-child { margin-bottom: 0; }
.term-card, .client-card, .article-card { min-width: 0; padding: 28px; border-radius: var(--r-card); background: var(--bg-panel); color: var(--text); }
.term-card h3, .client-card h3, .article-card h3 { margin: 0 0 12px; }
.term-card p, .client-card p, .article-card p { color: var(--text-muted); }
.term-card__alias { display: block; margin-bottom: 12px; font: var(--weight-normal) var(--fs-caption)/1.6 var(--font-mono); color: var(--text-muted); }
.client-card__head { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; margin-bottom: 20px; }
.client-card__head h3 { margin: 0; }
.client-card__icon { width: 56px; height: 56px; flex-shrink: 0; }
.client-card__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.client-card__meta { margin-top: 16px; font-size: var(--fs-small); color: var(--text-muted); }
.badge, .tag { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 4px 11px; border-radius: var(--r-pill); background: var(--bg-panel2); color: var(--text-muted); font-size: var(--fs-caption); line-height: 1.5; overflow-wrap: anywhere; }
.badge--first { background: var(--grad-warm); color: var(--field-ink); }
.badge--recommended { background: var(--card-light); color: var(--accent-dark); }
.badge--retired { background: var(--bg-panel2); color: var(--text-muted); border: 1px solid var(--border); }
.badge__dot { width: 6px; height: 6px; flex-shrink: 0; border-radius: var(--r-circle); background: var(--success); }
.tag-row { display: flex; flex-wrap: wrap; gap: 8px; }
.article-card { display: flex; flex-direction: column; }
.article-card__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 20px; font-size: var(--fs-caption); color: var(--text-muted); }
.article-card h3 { font-size: 20px; line-height: 1.5; }
.article-card h3 a { color: var(--text); text-decoration: none; }
.article-card h3 a:hover { color: var(--accent-dark); }
.article-card__more { margin-top: auto; padding-top: 16px; color: var(--accent-dark); font-size: var(--fs-small); }
.callout { margin: 24px 0; padding: 24px 28px; border: 0; border-left: 3px solid var(--accent); border-radius: var(--r-win); background: var(--bg-panel); color: var(--text); }
.callout p:last-child { margin-bottom: 0; }
.callout--warn { border-left-color: var(--warn); background: var(--bg-panel); color: var(--text); }
.callout--error { border-left-color: var(--error); background: var(--bg-panel); color: var(--text); }
.table-scroll { max-width: 100%; min-width: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--border); border-radius: var(--r-win); background: var(--bg); color: var(--text); }
.data-table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); text-align: left; }
.data-table th, .data-table td, .prose table th, .prose table td, .article-body table th, .article-body table td {
  min-width: 7em; padding: 16px 20px; border-bottom: 1px solid var(--border);
  overflow-wrap: normal; word-break: normal; white-space: normal; vertical-align: top;
}
.data-table th, .prose table th, .article-body table th { background: var(--bg-panel); color: var(--text); font-weight: var(--weight-medium); }
.data-table td, .prose table td, .article-body table td { background: var(--bg); color: var(--text); }
.data-table tr:last-child td { border-bottom: 0; }
.data-table code, .prose table code, .article-body table code { overflow-wrap: anywhere; }
.prose table, .article-body table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; min-width: 0; border-collapse: collapse; }
.prose div, .article-body div { min-width: 0; }
.download-tail { margin-top: 48px; padding: 32px; border-radius: var(--r-card); background: var(--bg-panel); color: var(--text); display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.download-tail h2 { font-size: 24px; margin: 0 0 10px; }
.download-tail p { margin: 0; color: var(--text-muted); }
.download-tail .btn { flex-shrink: 0; }
.dl-fab { position: fixed; right: 24px; bottom: 24px; z-index: 20; display: flex; align-items: center; gap: 12px; padding: 12px 22px; max-width: calc(100% - 32px); min-height: 52px; border-radius: var(--r-pill); background: var(--accent); color: var(--on-dark); text-decoration: none; font-size: var(--fs-small); }
.dl-fab svg { width: 22px; height: 22px; }
.dl-fab small { display: block; font-size: var(--fs-caption); }
.dl-fab:hover { background: var(--accent-dark); color: var(--on-dark); }

/* Preview specimens use the same tokens, never inline paint. */
.swatches { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.swatch { min-width: 0; margin: 0; border: 1px solid var(--border); border-radius: var(--r-win); overflow: hidden; background: var(--bg); color: var(--text); }
.swatch__paint { height: 72px; }
.swatch figcaption { padding: 12px; font: var(--weight-normal) var(--fs-caption)/1.7 var(--font-mono); overflow-wrap: anywhere; }
.paint-bg { background: var(--bg); }
.paint-panel { background: var(--bg-panel); }
.paint-panel2 { background: var(--bg-panel2); }
.paint-border { background: var(--border); }
.paint-accent { background: var(--accent); }
.paint-accent-dark { background: var(--accent-dark); }
.paint-text { background: var(--text); }
.paint-muted { background: var(--text-muted); }
.paint-success { background: var(--success); }
.paint-warn { background: var(--warn); }
.paint-error { background: var(--error); }
.paint-ink { background: var(--field-ink); }
.paint-mist { background: var(--field-mist); }
.paint-light { background: var(--card-light); }
.paint-coral { background: var(--coral); }
.paint-amber { background: var(--amber); }
.paint-code { background: var(--code-bg); }
.paint-codebar { background: var(--code-bar); }
.paint-punct { background: var(--code-punct); }
.paint-close { background: var(--dot-close); }
.paint-min { background: var(--dot-min); }
.paint-max { background: var(--dot-max); }
.paint-warm { background: var(--grad-warm); }
.preview-stack > * + * { margin-top: 24px; }
.preview-mobile { display: none; }
.preview-dark { padding: 24px; border-radius: var(--r-win); background: var(--field-ink); color: var(--on-dark); }
@media (max-width: 1280px) {
  .preview-mobile { display: block; }
  .preview-mobile > summary { display: flex; }
  .preview-mobile[open] .mobile-drawer { display: block; }
}
@media (max-width: 760px) {
  :root { --shelf-card-w: 272px; --shelf-card-h: 340px; --shelf-focus-w: 288px; --shelf-focus-h: 364px; }
  .lux__lead { font-size: 15px; }
  .lux__copy { padding-inline: 20px; }
  .os-row { gap: 12px 20px; }
  .shelf__track { height: auto; flex-direction: column; gap: 20px; padding-inline: var(--gutter); }
  .shelf .card { flex: none; width: min(100%, var(--shelf-card-w)); }
  .shelf .card--focus { width: min(100%, var(--shelf-focus-w)); }
  .card { padding: 18px 16px 0; }
  .menu { width: 210px; }
  .settings-stage { padding: 16px; }
  .settings-layout { grid-template-columns: minmax(0, 1fr); }
  .settings-sidebar { flex-direction: row; padding: 12px; border-radius: 0; }
  .settings-sidebar .tab { flex-shrink: 0; }
  .settings-detail { padding: 24px; }
  .settings-detail h3 { font-size: 23px; }
  .swatches { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .download-tail { align-items: flex-start; flex-direction: column; padding: 24px; }
  .dl-fab { bottom: 16px; right: 16px; padding: 12px 18px; }
}
@media (max-width: 640px) {
  .chip-row { font-size: 11px; gap: 6px; }
  .tag-warm { font-size: 11px; }
  .lux__title-line .keep { display: inline-block; }
  .term-card, .client-card, .article-card { padding: 24px; }
  .callout { padding: 20px; }
  .toc { padding: 10px; gap: 4px; }
}