/* Candela-Lux Converter — The New multi-locale workspace. 20260905c
 *
 * One vertical axis for the whole workspace: the input field bar, the preset row and the
 * result metrics all run on the same 8-track grid with the same gap, and wide blocks merge
 * with `grid-column: span k` instead of switching track counts (ledger #42).
 *
 * The label reset is deliberately `> span:not(.tn-clx-control)`. The control is also a
 * direct span child of the field, so an unqualified `.tn-clx-field > span` rule at (0,1,1)
 * would beat `.tn-clx-control` at (0,1,0) and swallow the inner padding, gluing the value
 * to the border (추가 필수 확인 #3).
 *
 * `.tn-related-links` is owned by the shared fixed-partials CSS and is not redefined here.
 */
.tn-clx-page,
.tn-clx-page * { box-sizing: border-box; }

.tn-clx-page {
  --clx-paper: #faf6ee;
  --clx-wash: #f5efdf;
  --clx-panel: #fffaf0;
  --clx-ink: #1a1208;
  --clx-muted: #5a4a30;
  --clx-line: #b8a888;
  --clx-soft-line: #ddd4be;
  --clx-accent: #c44a00;
  --clx-primary-bg: #1a1208;
  --clx-primary-ink: #fff7e8;
  --clx-secondary-bg: #ede6d4;
  --clx-secondary-ink: #1a1208;
  --clx-error-bg: #f7e3da;
  --clx-error-ink: #7e2816;
  --clx-error-line: #c7836e;
  --clx-bar: #a4531a;
  --clx-bar-track: #e7ddc7;
  width: min(1180px, calc(100vw - 10px));
  max-width: 100%;
  min-width: 0;
  margin: 0 auto;
  color: var(--clx-ink);
  -webkit-text-fill-color: var(--clx-ink);
  font-family: "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
}

.tn-clx-page :where(ul, ol) { list-style: none; padding-left: 0; margin: 0; }
.tn-clx-page .tn-clx-tool :is(code, pre, kbd, samp) { padding: 0; border: 0; border-radius: 0; background: none; background-color: transparent; color: inherit; -webkit-text-fill-color: inherit; font-family: inherit; }

.tn-clx-tool {
  margin: 0 0 18px;
  color: var(--clx-ink);
  -webkit-text-fill-color: var(--clx-ink);
  background:
    linear-gradient(90deg, rgba(184, 168, 136, .13) 1px, transparent 1px) 0 0 / 18px 18px,
    linear-gradient(0deg, rgba(184, 168, 136, .10) 1px, transparent 1px) 0 0 / 18px 18px,
    var(--clx-paper);
  border: 1px solid var(--clx-line);
  padding: 12px;
  overflow: hidden;
}

.tn-clx-workspace { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; min-width: 0; }

.tn-clx-pane {
  min-width: 0;
  display: grid;
  grid-template-rows: auto;
  align-content: start;
  row-gap: 12px;
  background: color-mix(in srgb, var(--clx-panel) 92%, transparent);
  border: 1px solid var(--clx-line);
  padding: 12px;
}

.tn-clx-kicker {
  margin: 0;
  color: var(--clx-muted);
  -webkit-text-fill-color: var(--clx-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* Shared 8-track axis. */
.tn-clx-fieldbar,
.tn-clx-quick,
.tn-clx-metrics {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 10px;
  min-width: 0;
}

.tn-clx-fieldbar { align-items: end; }
.tn-clx-field--mode { grid-column: span 2; }
.tn-clx-field--value { grid-column: span 2; }
.tn-clx-field--distance { grid-column: span 2; }
.tn-clx-field--angle { grid-column: span 1; }
.tn-clx-field--reset { grid-column: span 1; }
.tn-clx-chip { grid-column: span 2; }
.tn-clx-metric { grid-column: span 2; }

.tn-clx-field {
  display: grid;
  grid-template-rows: auto auto;
  grid-template-columns: minmax(0, 1fr);
  gap: 5px;
  align-content: start;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--clx-muted);
  -webkit-text-fill-color: var(--clx-muted);
  font-size: 12.5px;
  line-height: 1.2;
  font-weight: 800;
}

.tn-clx-field > span:not(.tn-clx-control) { display: block; margin: 0; padding: 0; }
.tn-clx-field--reset .tn-clx-button { width: 100%; }

.tn-clx-control {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  height: 40px;
  padding: 0 10px;
  background: var(--clx-panel);
  border: 1px solid var(--clx-line);
}

.tn-clx-control input {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--clx-ink);
  -webkit-text-fill-color: var(--clx-ink);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  font-weight: 600;
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: normal;
  text-align: right;
  outline: 0;
}

.tn-clx-control input::-webkit-outer-spin-button,
.tn-clx-control input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.tn-clx-control input::placeholder,
.tn-clx-control input::-webkit-input-placeholder { color: var(--clx-muted); -webkit-text-fill-color: var(--clx-muted); font-weight: 400; opacity: .35; }
.tn-clx-control:has(input:focus-visible),
.tn-clx-control:has(select:focus-visible) { outline: 2px solid var(--clx-accent); outline-offset: -1px; }

.tn-clx-control b {
  flex: 0 0 auto;
  color: var(--clx-muted);
  -webkit-text-fill-color: var(--clx-muted);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 12.5px;
  font-weight: 800;
  font-variant-numeric: lining-nums tabular-nums;
  border-left: 1px solid var(--clx-soft-line);
  padding-left: 8px;
}

/* Distance unit picker. Native select keeps its accessibility; the chevron and the quiet
   wash make it read as a dropdown rather than a flat text chip (ledger #33). */
.tn-clx-unit {
  flex: 0 0 auto;
  appearance: none;
  -webkit-appearance: none;
  height: 26px;
  margin: 0;
  padding: 0 20px 0 8px;
  border: 0;
  border-left: 1px solid var(--clx-soft-line);
  border-radius: 0;
  background-color: transparent;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 9px center, right 5px center;
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
  color: var(--clx-muted);
  -webkit-text-fill-color: var(--clx-muted);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 12.5px;
  font-weight: 800;
  line-height: 26px;
  cursor: pointer;
  outline: none;
}

.tn-clx-page .tn-clx-tool .tn-clx-control { display: flex !important; align-items: center !important; min-width: 0 !important; }
.tn-clx-page .tn-clx-tool .tn-clx-control input { flex: 1 1 auto; width: auto; }
.tn-clx-page .tn-clx-tool .tn-clx-control :is(b, .tn-clx-unit) { flex: 0 0 auto; }

.tn-clx-seg {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  height: 40px;
  border: 1px solid var(--clx-line);
  overflow: hidden;
}

.tn-clx-seg button {
  appearance: none;
  -webkit-appearance: none;
  height: 100%;
  min-width: 0;
  margin: 0;
  padding: 0 4px;
  border: 0;
  border-right: 1px solid var(--clx-line);
  background: var(--clx-panel);
  color: var(--clx-muted);
  -webkit-text-fill-color: var(--clx-muted);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 12.5px;
  font-weight: 800;
  font-variant-numeric: lining-nums tabular-nums;
  line-height: 1;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tn-clx-seg button:last-child { border-right: 0; }
.tn-clx-seg button[aria-pressed="true"] { background: var(--clx-primary-bg); color: var(--clx-primary-ink); -webkit-text-fill-color: var(--clx-primary-ink); }

.tn-clx-button {
  appearance: none;
  -webkit-appearance: none;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0 12px;
  border: 1px solid var(--clx-line);
  background: var(--clx-secondary-bg);
  color: var(--clx-secondary-ink);
  -webkit-text-fill-color: var(--clx-secondary-ink);
  font-family: "Noto Sans KR", system-ui, sans-serif;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  outline: none;
}

.tn-clx-button:focus-visible,
.tn-clx-seg button:focus-visible,
.tn-clx-chip:focus-visible,
.tn-clx-mini:focus-visible,
.tn-clx-unit:focus-visible { outline: 2px solid var(--clx-accent); outline-offset: 2px; }

.tn-clx-chip {
  appearance: none;
  -webkit-appearance: none;
  min-width: 0;
  height: 34px;
  margin: 0;
  padding: 0 8px;
  border: 1px solid var(--clx-soft-line);
  background: var(--clx-wash);
  color: var(--clx-muted);
  -webkit-text-fill-color: var(--clx-muted);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 12.5px;
  font-weight: 800;
  font-variant-numeric: lining-nums tabular-nums;
  line-height: 1;
  cursor: pointer;
  outline: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tn-clx-chip[aria-pressed="true"] { background: var(--clx-primary-bg); color: var(--clx-primary-ink); -webkit-text-fill-color: var(--clx-primary-ink); border-color: var(--clx-primary-bg); }

.tn-clx-status {
  margin: 0;
  padding: 9px 11px;
  background: var(--clx-wash);
  border: 1px solid var(--clx-soft-line);
  color: var(--clx-muted);
  -webkit-text-fill-color: var(--clx-muted);
  font-size: 12.5px;
  line-height: 1.45;
  font-weight: 700;
}
.tn-clx-status[data-tone="error"] { background: var(--clx-error-bg); border-color: var(--clx-error-line); color: var(--clx-error-ink); -webkit-text-fill-color: var(--clx-error-ink); }

/* Result headline. The number track is content-sized so the unit sits right beside the
   last glyph instead of drifting to the far edge (ledger #18). */
.tn-clx-verdict {
  display: grid;
  grid-template-columns: max-content max-content minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 8px 10px;
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid var(--clx-line);
  background: var(--clx-panel);
}

.tn-clx-verdict-value {
  min-width: 0;
  margin: 0;
  color: var(--clx-ink);
  -webkit-text-fill-color: var(--clx-ink);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 32px;
  line-height: 1.2;
  font-weight: 800;
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: normal;
  white-space: nowrap;
}

.tn-clx-verdict-unit {
  color: var(--clx-accent);
  -webkit-text-fill-color: var(--clx-accent);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.2;
  font-weight: 800;
  white-space: nowrap;
}

.tn-clx-verdict-alt {
  min-width: 0;
  color: var(--clx-muted);
  -webkit-text-fill-color: var(--clx-muted);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
  line-height: 1.3;
  font-weight: 800;
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: normal;
  overflow-wrap: anywhere;
}

.tn-clx-mini {
  align-self: center;
  appearance: none;
  -webkit-appearance: none;
  height: 34px;
  margin: 0;
  padding: 0 10px;
  border: 1px solid var(--clx-soft-line);
  background: var(--clx-wash);
  color: var(--clx-muted);
  -webkit-text-fill-color: var(--clx-muted);
  font-family: "Noto Sans KR", system-ui, sans-serif;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  outline: none;
}
.tn-clx-mini:disabled { opacity: .5; cursor: not-allowed; }

.tn-clx-metrics { align-items: stretch; }
.tn-clx-metric {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 5px;
  margin: 0;
  padding: 10px 11px;
  border: 1px solid var(--clx-soft-line);
  background: var(--clx-panel);
}
.tn-clx-metric dt { margin: 0; color: var(--clx-muted); -webkit-text-fill-color: var(--clx-muted); font-size: 12px; line-height: 1.2; font-weight: 800; letter-spacing: .04em; }
.tn-clx-metric dd {
  margin: 0;
  color: var(--clx-ink);
  -webkit-text-fill-color: var(--clx-ink);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 15px;
  line-height: 1.3;
  font-weight: 800;
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: normal;
  overflow-wrap: anywhere;
}

/* Inverse-square falloff strip. Bars are plain divs so the chart carries no dependency,
   and the frame renders on an empty first paint with the values blank (추가 필수 확인 #10). */
.tn-clx-falloff,
.tn-clx-falloff-rows,
.tn-clx-ladder { display: grid; gap: 6px; min-width: 0; }

.tn-clx-block-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.tn-clx-block-title { color: var(--clx-muted); -webkit-text-fill-color: var(--clx-muted); font-size: 12px; font-weight: 800; letter-spacing: .04em; }
.tn-clx-block-note { color: var(--clx-muted); -webkit-text-fill-color: var(--clx-muted); font-size: 11.5px; font-weight: 700; font-variant-numeric: lining-nums tabular-nums; letter-spacing: normal; }

.tn-clx-falloff-row {
  display: grid;
  grid-template-columns: minmax(0, 84px) minmax(0, 1fr) minmax(0, 116px);
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 32px;
  padding: 5px 11px;
  border: 1px solid var(--clx-soft-line);
  background: var(--clx-panel);
}
.tn-clx-falloff-row[data-current="true"] { border-color: var(--clx-line); background: var(--clx-wash); }

.tn-clx-falloff-distance,
.tn-clx-falloff-value {
  min-width: 0;
  color: var(--clx-ink);
  -webkit-text-fill-color: var(--clx-ink);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 13px;
  line-height: 1.3;
  font-weight: 800;
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: normal;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tn-clx-falloff-value { text-align: right; }
.tn-clx-falloff-track { min-width: 0; height: 10px; background: var(--clx-bar-track); border: 1px solid var(--clx-soft-line); }
.tn-clx-falloff-fill { display: block; height: 100%; width: 0; background: var(--clx-bar); transition: width .18s ease; }

@media (prefers-reduced-motion: reduce) { .tn-clx-falloff-fill { transition: none; } }

.tn-clx-ladder-row {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr) minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 36px;
  padding: 6px 11px;
  border: 1px solid var(--clx-soft-line);
  background: var(--clx-panel);
}
.tn-clx-ladder-row i { display: block; width: 8px; height: 8px; background: var(--clx-bar-track); border: 1px solid var(--clx-soft-line); }
.tn-clx-ladder-row[data-current="true"] { background: var(--clx-primary-bg); border-color: var(--clx-primary-bg); }
.tn-clx-ladder-row[data-current="true"] i { background: var(--clx-accent); border-color: var(--clx-accent); }
.tn-clx-ladder-name { min-width: 0; color: var(--clx-ink); -webkit-text-fill-color: var(--clx-ink); font-size: 13.5px; line-height: 1.3; font-weight: 800; overflow-wrap: anywhere; }
.tn-clx-ladder-range {
  min-width: 0;
  color: var(--clx-muted);
  -webkit-text-fill-color: var(--clx-muted);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 13px;
  line-height: 1.3;
  font-weight: 800;
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: normal;
  overflow-wrap: anywhere;
}
.tn-clx-ladder-flag { color: var(--clx-muted); -webkit-text-fill-color: var(--clx-muted); font-size: 11.5px; font-weight: 800; white-space: nowrap; }
.tn-clx-ladder-row[data-current="true"] :is(.tn-clx-ladder-name, .tn-clx-ladder-range, .tn-clx-ladder-flag) { color: var(--clx-primary-ink); -webkit-text-fill-color: var(--clx-primary-ink); }

.tn-clx-notice {
  margin: 10px 0 0;
  padding: 10px 12px;
  background: var(--clx-wash);
  border: 1px solid var(--clx-soft-line);
  color: var(--clx-muted);
  -webkit-text-fill-color: var(--clx-muted);
  font-size: 12px;
  line-height: 1.5;
  font-weight: 700;
}

/* Article reference table. */
.tn-clx-page .tn-clx-table-wrap { width: 100%; max-width: 100%; margin-top: 12px; overflow-x: auto; overscroll-behavior-inline: contain; border: 1px solid var(--clx-line); background: var(--clx-panel); }
.tn-clx-page .tn-clx-table-wrap:focus-visible { outline: 2px solid var(--clx-accent); outline-offset: 2px; }
.tn-clx-page .tn-clx-rule-table { width: 100%; min-width: 520px; border-collapse: collapse; color: var(--clx-ink); -webkit-text-fill-color: var(--clx-ink); font-size: 13px; line-height: 1.45; }
.tn-clx-page .tn-clx-rule-table th,
.tn-clx-page .tn-clx-rule-table td { padding: 9px 10px; border-right: 1px solid var(--clx-soft-line); border-bottom: 1px solid var(--clx-soft-line); text-align: left; vertical-align: top; }
.tn-clx-page .tn-clx-rule-table tr > :last-child { border-right: 0; }
.tn-clx-page .tn-clx-rule-table tbody tr:last-child > * { border-bottom: 0; }
.tn-clx-page .tn-clx-rule-table thead th { background: var(--clx-primary-bg); color: var(--clx-primary-ink); -webkit-text-fill-color: var(--clx-primary-ink); font-weight: 800; }
.tn-clx-page .tn-clx-rule-table tbody th { background: var(--clx-wash); color: var(--clx-ink); -webkit-text-fill-color: var(--clx-ink); font-weight: 800; }
.tn-clx-page .tn-clx-rule-table td { background: var(--clx-panel); color: var(--clx-muted); -webkit-text-fill-color: var(--clx-muted); font-weight: 600; font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
.tn-clx-page .tn-clx-table-note { margin: 8px 0 0; color: var(--clx-muted); -webkit-text-fill-color: var(--clx-muted); font-size: 12.5px; line-height: 1.55; }

/* Same track count on every breakpoint keeps the column axis aligned (추가 필수 확인 #22). */
@media (max-width: 980px) {
  .tn-clx-fieldbar,
  .tn-clx-quick,
  .tn-clx-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tn-clx-field--mode,
  .tn-clx-field--value,
  .tn-clx-field--distance { grid-column: span 2; }
  .tn-clx-field--angle,
  .tn-clx-field--reset { grid-column: span 2; }
  .tn-clx-chip,
  .tn-clx-metric { grid-column: span 2; }
}

@media (max-width: 640px) {
  .tn-clx-tool { padding: 8px; }
  .tn-clx-pane { padding: 10px; }
  .tn-clx-verdict { grid-template-columns: max-content minmax(0, 1fr); }
  .tn-clx-verdict-value { font-size: 28px; }
  .tn-clx-verdict-alt { grid-column: 1 / -1; }
  .tn-clx-mini { grid-column: 1 / -1; width: 100%; }
  .tn-clx-falloff-row { grid-template-columns: minmax(0, 74px) minmax(0, 1fr) minmax(0, 96px); }
  .tn-clx-ladder-row { grid-template-columns: 8px minmax(0, 1fr) auto; row-gap: 4px; }
  .tn-clx-ladder-range { grid-column: 2 / -1; }
  .tn-clx-ladder-flag { grid-column: 3; grid-row: 1; }
  .tn-clx-page .tn-clx-rule-table { min-width: 480px; font-size: 12.5px; }
}

@media (max-width: 560px) {
  .tn-clx-fieldbar,
  .tn-clx-quick,
  .tn-clx-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tn-clx-field--mode,
  .tn-clx-field--value,
  .tn-clx-field--distance { grid-column: span 2; }
  .tn-clx-field--angle,
  .tn-clx-field--reset { grid-column: span 1; }
  .tn-clx-chip,
  .tn-clx-metric { grid-column: span 1; }
}

@media (max-width: 420px) {
  .tn-clx-seg button { font-size: 11.5px; }
  .tn-clx-metric dd { font-size: 14px; }
  .tn-clx-falloff-row { grid-template-columns: minmax(0, 66px) minmax(0, 1fr) minmax(0, 88px); }
}

/* Dark, inverse and automatic dark schemes. */
body:is([data-scheme="dark"], [data-scheme="inverse"], [data-scheme="auto"][data-l="dark"], [data-scheme="auto"][data-d="dark"]) .tn-clx-page,
html[data-scheme="dark"] body:not([data-scheme="light"]) .tn-clx-page {
  --clx-paper: #201811;
  --clx-wash: #2b2119;
  --clx-panel: #241c15;
  --clx-ink: #f7ecd8;
  --clx-muted: #d3c2a4;
  --clx-line: #6f5d40;
  --clx-soft-line: #4c3f2c;
  --clx-accent: #ff8a3d;
  --clx-primary-bg: #3d2f1e;
  --clx-primary-ink: #ffe9c6;
  --clx-secondary-bg: #33281c;
  --clx-secondary-ink: #f7ecd8;
  --clx-error-bg: #3a211c;
  --clx-error-ink: #ffc2b3;
  --clx-error-line: #854d40;
  --clx-bar: #ff9f5e;
  --clx-bar-track: #3a2f21;
  color: var(--clx-ink);
  -webkit-text-fill-color: var(--clx-ink);
}

@media (prefers-color-scheme: dark) {
  body[data-scheme="auto"] .tn-clx-page {
    --clx-paper: #201811;
    --clx-wash: #2b2119;
    --clx-panel: #241c15;
    --clx-ink: #f7ecd8;
    --clx-muted: #d3c2a4;
    --clx-line: #6f5d40;
    --clx-soft-line: #4c3f2c;
    --clx-accent: #ff8a3d;
    --clx-primary-bg: #3d2f1e;
    --clx-primary-ink: #ffe9c6;
    --clx-secondary-bg: #33281c;
    --clx-secondary-ink: #f7ecd8;
    --clx-error-bg: #3a211c;
    --clx-error-ink: #ffc2b3;
    --clx-error-line: #854d40;
    --clx-bar: #ff9f5e;
    --clx-bar-track: #3a2f21;
    color: var(--clx-ink);
    -webkit-text-fill-color: var(--clx-ink);
  }
}

body:is([data-scheme="dark"], [data-scheme="inverse"], [data-scheme="auto"][data-l="dark"], [data-scheme="auto"][data-d="dark"]) .tn-clx-page :is(.tn-clx-control input, .tn-clx-unit),
html[data-scheme="dark"] body:not([data-scheme="light"]) .tn-clx-page :is(.tn-clx-control input, .tn-clx-unit) { color-scheme: dark; }
@media (prefers-color-scheme: dark) { body[data-scheme="auto"] .tn-clx-page :is(.tn-clx-control input, .tn-clx-unit) { color-scheme: dark; } }

/* The global dark rule repaints every `tn-` class to cream text. These surfaces are the
   ones that must stay legible against their own dark background, so the token is restated
   at the same weight rather than left to lose a specificity fight (kill list #15). */
body:is([data-scheme="dark"], [data-scheme="inverse"], [data-scheme="auto"][data-l="dark"], [data-scheme="auto"][data-d="dark"]) .tn-clx-page .tn-clx-tool :is(.tn-clx-seg button[aria-pressed="true"], .tn-clx-chip[aria-pressed="true"], .tn-clx-ladder-row[data-current="true"] .tn-clx-ladder-name, .tn-clx-ladder-row[data-current="true"] .tn-clx-ladder-range, .tn-clx-ladder-row[data-current="true"] .tn-clx-ladder-flag),
html[data-scheme="dark"] body:not([data-scheme="light"]) .tn-clx-page .tn-clx-tool :is(.tn-clx-seg button[aria-pressed="true"], .tn-clx-chip[aria-pressed="true"], .tn-clx-ladder-row[data-current="true"] .tn-clx-ladder-name, .tn-clx-ladder-row[data-current="true"] .tn-clx-ladder-range, .tn-clx-ladder-row[data-current="true"] .tn-clx-ladder-flag),
body:is([data-scheme="dark"], [data-scheme="inverse"], [data-scheme="auto"][data-l="dark"], [data-scheme="auto"][data-d="dark"]) .tn-clx-page .tn-clx-rule-table thead th,
html[data-scheme="dark"] body:not([data-scheme="light"]) .tn-clx-page .tn-clx-rule-table thead th {
  color: var(--clx-primary-ink) !important;
  -webkit-text-fill-color: var(--clx-primary-ink) !important;
}

@media (prefers-color-scheme: dark) {
  body[data-scheme="auto"] .tn-clx-page .tn-clx-tool :is(.tn-clx-seg button[aria-pressed="true"], .tn-clx-chip[aria-pressed="true"], .tn-clx-ladder-row[data-current="true"] .tn-clx-ladder-name, .tn-clx-ladder-row[data-current="true"] .tn-clx-ladder-range, .tn-clx-ladder-row[data-current="true"] .tn-clx-ladder-flag),
  body[data-scheme="auto"] .tn-clx-page .tn-clx-rule-table thead th {
    color: var(--clx-primary-ink) !important;
    -webkit-text-fill-color: var(--clx-primary-ink) !important;
  }
}