/* tsl-tpl.css — 시스템 템플릿 화면(글 상세·목록·작성자·검색·404)에만 싣는다(생성). */
/* 템플릿 부품 — 글 상세·아카이브·작성자·검색·404가 쓰는 부품의 기본 모양(wp-site-kit 엔진).
   디자인 시스템 bundle.css에 같은 부품(.tsl-prose)이 들어가면 엔진은 이 파일을 싣지 않는다 — 그때부터 디자인 시스템이 맡는다.
   값은 표준 토큰 변수와 면 문맥 변수(--fg·--fg-2·--fg-muted·--rule·--panel·--accent-text)만 쓴다. bundle.css 뒤에 싣는다.
   부품: Byline(글 정보) · Article(글 2단) · Toc(목차) · Prose(글 본문) · Chips(태그·카테고리) · Share(공유) · PostNav(이전·다음 글)
        · Search(검색 폼) · Results(검색 결과) + 기존 부품의 변형(Person --author · Split --num/--profile · Figure --wide) */

/* ── Byline: 글 정보 한 줄 ── */
.tsl-byline { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; font-size: 15px; line-height: 22px; color: var(--fg-muted); }
.tsl-byline__ava { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--paper-deep); color: var(--ink-muted); font-size: 15px; line-height: 1; font-weight: 800; }
.tsl-byline__name { display: inline-flex; align-items: center; min-height: 44px; color: var(--fg); font-weight: 700; text-decoration: none; }
a.tsl-byline__name:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
a.tsl-byline__name:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 4px; }
.tsl-byline__sep { opacity: .6; }
.tsl-byline__item { font-variant-numeric: tabular-nums; }

/* ── Figure·PostCard 변형: 이미지 비율 ── */
.tsl-figure--wide { --ratio: 16 / 9; }
.tsl-figure--square { --ratio: 1 / 1; }
.tsl-post__img--wide, .tsl-post__slot--wide { aspect-ratio: 16 / 9; }

/* ── Article: 본문 열 + 옆 열(목차). 마크업은 옆 열이 먼저 — 좁은 화면에서 목차가 본문 위에 온다 ── */
.tsl-article { display: flex; flex-direction: column; gap: var(--space-7); }
.tsl-article__main, .tsl-article__aside { min-width: 0; }
.tsl-article__main { max-width: 760px; }
@media (min-width: 1024px) {
  .tsl-article { display: grid; grid-template-columns: minmax(0, 760px) minmax(240px, 320px); grid-template-areas: "main aside"; gap: 80px; align-items: start; }
  .tsl-article--solo { grid-template-columns: minmax(0, 760px); grid-template-areas: "main"; }
  .tsl-article__main { grid-area: main; }
  .tsl-article__aside { grid-area: aside; position: sticky; top: calc(var(--header-h) + 24px); max-height: calc(100vh - var(--header-h) - 48px); overflow-y: auto; }
}

/* ── Toc: 목차 ── */
.tsl-toc { box-sizing: border-box; padding: 8px 24px; border-radius: var(--radius-2); background: var(--panel); color: var(--fg); }
.tsl-toc__title { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 44px; margin: 0; list-style: none; cursor: pointer;   /* summary(사이트) 또는 p(캔버스 보드) */ font-size: 15px; line-height: 22px; font-weight: 800; letter-spacing: -0.01em; }
.tsl-toc__title::-webkit-details-marker { display: none; }
.tsl-toc__title::marker { content: ""; }
.tsl-toc__title .tsl-icon { transition: transform .15s ease; }
.tsl-toc[open] .tsl-toc__title .tsl-icon { transform: rotate(180deg); }
.tsl-toc__title:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 8px; }
.tsl-toc__list { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 4px 0 12px; list-style: none; counter-reset: tsl-toc; }
.tsl-toc__list a { display: flex; gap: 10px; padding: 7px 0; font-size: 14px; line-height: 22px; font-weight: 500; color: var(--fg-2); text-decoration: none; }
.tsl-toc__list a::before { counter-increment: tsl-toc; content: counter(tsl-toc); flex: none; min-width: 20px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--accent-text); }
.tsl-toc__list a:hover { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }
.tsl-toc__list a:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 4px; }
@media (min-width: 1024px) {
  .tsl-toc__title { cursor: default; pointer-events: none; }
  .tsl-toc__title .tsl-icon { display: none; }
}
@media (max-width: 1023px) { .tsl-toc__list a { padding: 11px 0; } }

/* ── Prose: 글 본문(편집기가 낸 마크업을 태그 기준으로 입힌다) ── */
.tsl-prose { --p-size: 17px; --p-lh: 30px; --p-h2: 26px; --p-h2-lh: 34px; --p-h3: 20px; --p-h3-lh: 28px; max-width: 760px; color: var(--fg); font-size: var(--p-size); line-height: var(--p-lh); }
.tsl-prose > * { margin: 0; }
.tsl-prose > * + * { margin-top: 20px; }
.tsl-prose h2 { margin-top: 56px; font-size: var(--p-h2); line-height: var(--p-h2-lh); font-weight: 800; letter-spacing: -0.02em; text-wrap: balance; scroll-margin-top: calc(var(--header-h) + 16px); }
.tsl-prose h3, .tsl-prose h4 { margin-top: 36px; font-size: var(--p-h3); line-height: var(--p-h3-lh); font-weight: 800; letter-spacing: -0.01em; }
.tsl-prose > :first-child { margin-top: 0; }
.tsl-prose h2 + *, .tsl-prose h3 + *, .tsl-prose h4 + * { margin-top: 14px; }
.tsl-prose strong, .tsl-prose b { font-weight: 700; }
.tsl-prose a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; overflow-wrap: anywhere; }
.tsl-prose a:hover { text-decoration-color: var(--accent); text-decoration-thickness: 2px; }
.tsl-prose a:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 4px; }
.tsl-prose ul, .tsl-prose ol { display: flex; flex-direction: column; gap: 10px; padding: 0; list-style: none; }
.tsl-prose li { position: relative; padding-left: 24px; }
.tsl-prose ul > li::before { content: ""; position: absolute; left: 2px; top: calc(var(--p-lh) / 2 - 4px); width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.tsl-prose ol { counter-reset: tsl-ol; }
.tsl-prose ol > li { padding-left: 36px; counter-increment: tsl-ol; }
.tsl-prose ol > li::before { content: counter(tsl-ol); position: absolute; left: 0; top: calc(var(--p-lh) / 2 - 12px); display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: var(--ink); font-size: 13px; line-height: 1; font-weight: 800; }
.tsl-prose li > ul, .tsl-prose li > ol { margin-top: 10px; }
.tsl-prose code { padding: 2px 6px; border-radius: 6px; background: var(--panel); font-size: .9em; overflow-wrap: anywhere; }
.tsl-prose pre { overflow-x: auto; padding: 20px 24px; border-radius: var(--radius-2); background: var(--ink); color: var(--on-ink); font-size: 14px; line-height: 24px; }
.tsl-prose pre code { padding: 0; border-radius: 0; background: none; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: inherit; overflow-wrap: normal; white-space: pre; }
.tsl-prose blockquote { position: relative; padding: 22px 28px 20px; border-radius: var(--radius-3); background: var(--panel); font-weight: 600; }
.tsl-prose blockquote::after { content: ""; position: absolute; left: 40px; bottom: -14px; width: 28px; height: 28px; background: inherit; clip-path: polygon(0 0, 100% 0, 0 100%); }
.tsl-prose blockquote + * { margin-top: 34px; }
.tsl-prose blockquote > * { margin: 0; }
.tsl-prose blockquote > * + * { margin-top: 12px; }
.tsl-prose figure { margin-inline: 0; }
.tsl-prose img { display: block; max-width: 100%; height: auto; border-radius: var(--radius-2); }
.tsl-prose figcaption { margin-top: 8px; font-size: 13px; line-height: 20px; color: var(--fg-muted); }
.tsl-prose .wp-block-table, .tsl-prose figure:has(> table) { overflow-x: auto; }
.tsl-prose table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 15px; line-height: 25px; }
/* 표는 가로선만 — 선택자에 table을 넣어 워드프레스 표 블록 기본 CSS(.wp-block-table td·th 테두리 1px · thead·tfoot 3px)보다 앞서게, 칸 줄바꿈은 break-word(물려받은 anywhere는 「순서」 같은 짧은 머리를 글자 단위로 꺾는다) */
.tsl-prose table thead, .tsl-prose table tfoot { border: 0; }
.tsl-prose table th, .tsl-prose table td { padding: 12px 16px 12px 0; text-align: left; vertical-align: top; border: 0; border-bottom: 1px solid var(--rule); overflow-wrap: break-word; }
.tsl-prose table thead th { font-size: 14px; line-height: 22px; font-weight: 700; color: var(--fg-muted); border-bottom: 2px solid var(--fg); }
.tsl-prose hr { height: 1px; margin-block: 40px; border: 0; background: var(--rule); }
@media (max-width: 767px) {
  .tsl-prose { --p-size: 16px; --p-lh: 28px; --p-h2: 22px; --p-h2-lh: 30px; --p-h3: 18px; --p-h3-lh: 26px; }
  .tsl-prose h2 { margin-top: 44px; }
  .tsl-prose pre { padding: 16px 18px; }
}

/* ── Bubble 변형: 원고 라벨 「말풍선」 ── */
.tsl-bubble--say { max-width: 620px; }

/* ── Chips: 태그·카테고리(작은 선 알약 묶음) ── */
.tsl-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.tsl-chips .tsl-btn[aria-current="page"] { background: var(--fg); color: var(--bg); border-color: var(--fg); }

/* ── Share: 공유 ── */
.tsl-share { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.tsl-share__label { margin-right: 4px; font-size: 14px; line-height: 20px; font-weight: 700; color: var(--fg-muted); }

/* ── Person 변형: 글 아래 작성자 카드 ── */
.tsl-person--author { max-width: 880px; }
.tsl-person--author .tsl-person__role { min-height: 0; }
.tsl-person--author .tsl-person__talk { flex: none; min-height: 0; }
.tsl-person__name a { color: inherit; text-decoration: none; }
.tsl-person__name a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.tsl-person__links { margin-top: 10px; }

/* ── Split 변형: 큰 숫자 · 작성자 첫 화면 ── */
.tsl-split--num, .tsl-split--profile { align-items: center; }
@media (min-width: 1024px) { .tsl-split--profile { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1023px) { .tsl-split--num > :last-child { order: -1; } }

/* ── PostNav: 이전·다음 글 ── */
.tsl-postnav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--grid-gap); max-width: 880px; }
.tsl-postnav__a { display: flex; flex-direction: column; gap: var(--space-2); box-sizing: border-box; min-width: 0; padding: 24px 28px; border-radius: var(--radius-2); background: var(--panel); color: var(--fg); text-decoration: none; }
.tsl-postnav__a--next { grid-column: 2; align-items: flex-end; text-align: right; }
.tsl-postnav__k { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; line-height: 20px; font-weight: 700; color: var(--accent-text); }
.tsl-postnav__a--prev .tsl-icon { transform: rotate(180deg); }
.tsl-postnav__t { font-size: 18px; line-height: 27px; font-weight: 800; letter-spacing: -0.01em; text-wrap: pretty; }
.tsl-postnav__a:hover .tsl-postnav__t { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.tsl-postnav__a:focus-visible { outline: none; box-shadow: var(--focus-ring); }
@media (max-width: 767px) {
  .tsl-postnav { grid-template-columns: minmax(0, 1fr); gap: var(--grid-gap-m); }
  .tsl-postnav__a { padding: 20px 22px; }
  .tsl-postnav__a--next { grid-column: auto; }
}

/* ── Search: 검색 폼 ── */
.tsl-search { display: flex; align-items: center; gap: var(--space-3); max-width: 640px; margin: 0; }
.tsl-search .tsl-input { flex: 1; min-width: 0; padding-inline: 22px; border-radius: var(--radius-full); }
.tsl-search .tsl-btn { flex: none; }

/* ── Results: 검색 결과 ── */
.tsl-results { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--fg); }
.tsl-result { border-bottom: 1px solid var(--rule); }
.tsl-result__a { display: flex; flex-direction: column; gap: var(--space-2); padding: 24px 0; color: var(--fg); text-decoration: none; }
.tsl-result__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); font-size: 14px; line-height: 20px; color: var(--fg-muted); }
.tsl-result__title { margin: 0; font-size: 22px; line-height: 30px; font-weight: 800; letter-spacing: -0.02em; text-wrap: pretty; }
.tsl-result__a:hover .tsl-result__title { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.tsl-result__excerpt { margin: 0; max-width: 760px; font-size: 16px; line-height: 27px; color: var(--fg-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tsl-result__a:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 8px; }
@media (max-width: 767px) { .tsl-result__title { font-size: 19px; line-height: 27px; } }

@media (prefers-reduced-motion: reduce) { .tsl-toc__title .tsl-icon { transition: none; } }

/* 템플릿 유틸 클래스(생성) */
.tsl-u-b5a98e { display:flex; flex-direction:column; gap:20px }
.tsl-u-031ffe { display:flex; flex-direction:column; gap:32px }

/* ==========================================================================
   xs-design-systems Aligned Override Layer (theprometheus.xyz#tpl)
   ========================================================================== */
/**
 * @package @xs-design-systems/haegyung
 * @file components/tsl-xs-alignment.css
 * @description
 *   Refined xs-design-systems alignment layer for Haegyung (HDLS) and ThePrometheus (TSL).
 *   Covers both primary pages (tsl.css) and system templates (tsl-tpl.css: single posts, archives, search, 404).
 *
 *   Key Architectural Guarantees:
 *   1. True semantic token polarity: `--on-ink` remains the true inverse (`var(--paper)`) on `:root`
 *      so `.tsl-bubble--ink`, `.tsl-tag--strong`, `.tsl-prose pre`, and `.tsl-pager__item[aria-current="page"]`
 *      always preserve high contrast, while `.tsl-section--ink` and `.tsl-footer` scope `--on-ink: var(--fg)`
 *      on their elevated `var(--bg-alt)` surface.
 *   2. Non-destructive internal hairlines: Enclosing containers use 2-sided architectural borders
 *      (`border-top` + `border-bottom` or `border-left` + `border-bottom`, keeping `nested_border_depth <= 1`)
 *      without stripping 1-sided internal horizontal dividers (`.tsl-card__lines`, `.tsl-step`, `.tsl-table td/th`).
 *   3. Full Light/Dark structural parity: Restores card, step, and bubble padding in dark mode
 *      where legacy night-layer rules previously collapsed padding to zero.
 *   4. Complete template alignment (`tsl-tpl.css`): Aligns `.tsl-byline`, `.tsl-toc`, `.tsl-prose`,
 *      `.tsl-postnav`, `.tsl-search`, and `.tsl-results` to 0px architectural geometry and WCAG AA contrast.
 */

:root,
html[data-theme="light"] {
  --paper: #FAF8F5;
  --paper-alt: #EAE3D5;
  --paper-deep: var(--paper-alt);
  --white: #FFFFFF;
  --ink: #18181B;
  --ink-2: #3F424A;
  --ink-secondary: #3F424A;
  --ink-muted: #5C606A;
  --muted: #5C606A;
  --line: #CFC8B8;
  --line-strong: #18181B;
  --rule: #CFC8B8;
  --rule-strong: #18181B;
  --accent: #8A381C;
  --accent-strong: #732D15;
  --accent-deep: #8A381C;
  --accent-tint: var(--paper-alt);
  --accent-tint-line: var(--rule);
  --accent-contrast: #FAF8F5;
  --accent-secondary: #134E5E;
  --on-accent: var(--accent-contrast);
  --highlight: transparent;

  --bg: var(--paper);
  --bg-alt: var(--paper-alt);
  --panel: var(--white);
  --fg: var(--ink);
  --fg-2: var(--ink-secondary);
  --fg-secondary: var(--ink-secondary);
  --fg-muted: var(--muted);
  --accent-text: var(--fg);
  --on-ink: var(--paper);
  --on-ink-muted: var(--paper-alt);
  --ink-line: var(--rule);

  --hg-bg-canvas: var(--bg);
  --hg-bg-surface: var(--panel);
  --hg-bg-soft: var(--bg-alt);
  --hg-text-ink: var(--fg);
  --hg-text-muted: var(--fg-secondary);
  --hg-border-line: var(--rule);
  --hg-color-primary: var(--accent-secondary);
  --hg-color-accent: var(--accent);
}

html[data-theme="dark"],
:root[data-theme="dark"] {
  --paper: #111418;
  --paper-alt: #2B3139;
  --paper-deep: var(--paper-alt);
  --white: #1B2026;
  --ink: #F2EDE1;
  --ink-2: #D0C9BA;
  --ink-secondary: #D0C9BA;
  --ink-muted: #A39C8E;
  --muted: #A39C8E;
  --line: #38404A;
  --line-strong: #C9C2B3;
  --rule: #38404A;
  --rule-strong: #C9C2B3;
  --accent: #C47A5E;
  --accent-strong: #D48B70;
  --accent-deep: #C47A5E;
  --accent-tint: var(--paper-alt);
  --accent-tint-line: var(--rule);
  --accent-contrast: #111418;
  --accent-secondary: #6BA3B2;
  --on-accent: var(--accent-contrast);
  --highlight: transparent;

  --bg: var(--paper);
  --bg-alt: var(--paper-alt);
  --panel: var(--white);
  --fg: var(--ink);
  --fg-2: var(--ink-secondary);
  --fg-secondary: var(--ink-secondary);
  --fg-muted: var(--muted);
  --accent-text: var(--fg);
  --on-ink: var(--paper);
  --on-ink-muted: var(--paper-alt);
  --ink-line: var(--rule);

  --hg-bg-canvas: var(--bg);
  --hg-bg-surface: var(--panel);
  --hg-bg-soft: var(--bg-alt);
  --hg-text-ink: var(--fg);
  --hg-text-muted: var(--fg-secondary);
  --hg-border-line: var(--rule);
  --hg-color-primary: var(--accent-secondary);
  --hg-color-accent: var(--accent);
}

/* 1. Zero Contextless Static Glow & Zero Static Rounding (FIXED-02, FIXED-08, FIXED-10) */
*,
*::before,
*::after {
  box-shadow: none !important;
  text-shadow: none !important;
  border-radius: 0 !important;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--accent) !important;
  outline-offset: 2px !important;
}

/* 2. Surface Elevation & 3-Tier Architectural Stroke Hierarchy (FIXED-03, FIXED-04, FIXED-05, FIXED-06)
 *    - Tier 3 (3px): Editorial top bar (.tsl-header) and left semantic indicator bars
 *    - Tier 2 (2px): Primary structural frames (.tsl-card, .tsl-steps, .tsl-table, .tsl-callout, .tsl-toc, .tsl-postnav__a)
 *    - Tier 1.5 (1.5px): Interactive controls (.tsl-theme-toggle, .tsl-header__cta, .tsl-btn--secondary, inputs)
 *    - Tier 1 (1px): Internal and section hairlines (.tsl-card__lines, .tsl-table td/th, .tsl-footer, .tsl-post)
 */

body,
html body.breakdance {
  background: var(--bg) !important;
  color: var(--fg) !important;
  --bg: var(--paper);
  --fg: var(--ink);
  --fg-2: var(--ink-secondary);
  --fg-muted: var(--muted);
  --rule: var(--line);
  --panel: var(--white);
}

.tsl-section {
  background: var(--bg) !important;
  color: var(--fg) !important;
}

.tsl-section--paper,
.tsl-section--soft,
.tsl-section--accent {
  --bg: var(--bg-alt) !important;
  --panel: var(--white) !important;
  --fg: var(--ink) !important;
  --fg-2: var(--ink-secondary) !important;
  --fg-muted: var(--muted) !important;
  --rule: var(--line) !important;
  --accent-text: var(--accent) !important;
  background: var(--bg-alt) !important;
  color: var(--fg) !important;
}

.tsl-header {
  background: var(--bg) !important;
  color: var(--fg) !important;
  border-top: 3px solid var(--accent) !important;
  border-bottom: 2px solid var(--rule-strong) !important;
  border-left: none !important;
  border-right: none !important;
}

.tsl-notice {
  background: var(--bg-alt) !important;
  color: var(--fg) !important;
  border-bottom: 1px solid var(--rule) !important;
}

/* Enclosing Structural Containers (2-sided borders -> enclosing_box_depth <= 1, preserving internal hairlines) */
.tsl-card,
.tsl-guarantee__col,
.tsl-callout,
.tsl-person,
.tsl-toc,
.tsl-postnav__a,
.tsl-event {
  background: var(--bg-alt) !important;
  color: var(--fg) !important;
  --fg: var(--ink) !important;
  --fg-2: var(--ink-secondary) !important;
  --fg-muted: var(--muted) !important;
  --rule: var(--line) !important;
  border-top: 2px solid var(--rule-strong) !important;
  border-right: none !important;
  border-bottom: 1px solid var(--rule) !important;
  border-left: none !important;
}

.tsl-card {
  padding: 28px 26px 26px !important;
}

.tsl-card__lines {
  border-top: 1px solid var(--rule) !important;
  border-right: none !important;
  border-bottom: none !important;
  border-left: none !important;
  padding-top: 16px !important;
}

.tsl-callout--done,
.tsl-callout--error,
.tsl-event {
  border-left: 3px solid var(--accent) !important;
  border-top: none !important;
  border-right: none !important;
  border-bottom: 1px solid var(--rule) !important;
}

.tsl-bubble,
.tsl-bubble--white,
.tsl-bubble--ink,
.tsl-bubble--dark,
.tsl-bubble--accent,
.tsl-bubble--soft {
  background: var(--bg-alt) !important;
  color: var(--fg) !important;
  --fg: var(--ink) !important;
  --fg-2: var(--ink-secondary) !important;
  --fg-muted: var(--muted) !important;
  --accent-text: var(--accent) !important;
  padding: 24px 28px 22px !important;
  border-top: none !important;
  border-right: none !important;
  border-bottom: 1px solid var(--rule) !important;
  border-left: 3px solid var(--accent) !important;
}

.tsl-bubble::before,
.tsl-bubble::after,
.tsl-person__talk::after,
.tsl-prose blockquote::after,
.tsl-stat__cap::after {
  display: none !important;
  content: none !important;
}

.tsl-person__talk {
  background: var(--panel) !important;
  color: var(--fg) !important;
  border-top: none !important;
  border-right: none !important;
  border-bottom: 1px solid var(--rule) !important;
  border-left: 3px solid var(--accent) !important;
}

.tsl-person__talk b {
  color: var(--fg-secondary) !important;
}

/* Steps & Tables: 2-sided outer frame + clean internal dividers in both Light & Dark */
.tsl-steps,
.tsl-table,
.tsl-results {
  background: var(--bg-alt) !important;
  color: var(--fg) !important;
  border-top: 2px solid var(--rule-strong) !important;
  border-bottom: 2px solid var(--rule-strong) !important;
  border-left: none !important;
  border-right: none !important;
}

.tsl-steps {
  gap: 0 !important;
}

.tsl-steps::before {
  display: none !important;
  content: none !important;
}

.tsl-step,
.tsl-step:nth-child(even) {
  background: var(--panel) !important;
  color: var(--fg) !important;
  --fg: var(--ink) !important;
  --fg-2: var(--ink-secondary) !important;
  --fg-muted: var(--muted) !important;
  padding: 24px 22px 28px !important;
  position: relative !important;
  border-top: none !important;
  border-right: none !important;
  border-bottom: 1px solid var(--rule) !important;
  border-left: 1px solid var(--rule) !important;
}

.tsl-step:first-child {
  border-left: none !important;
}

.tsl-step__num {
  position: static !important;
}

.tsl-faq__item,
.tsl-info__item,
.tsl-flow__step,
.tsl-stat__cap {
  background: var(--panel) !important;
  color: var(--fg) !important;
  border-top: 1px solid var(--rule) !important;
  border-bottom: 1px solid var(--rule) !important;
  border-left: none !important;
  border-right: none !important;
}

.tsl-plate,
.tsl-map {
  background-color: var(--panel) !important;
  border-top: 2px solid var(--rule-strong) !important;
  border-bottom: 2px solid var(--rule-strong) !important;
  border-left: none !important;
  border-right: none !important;
}

.tsl-plate__cap {
  background: var(--bg-alt) !important;
  color: var(--fg) !important;
  border-top: 1px solid var(--rule) !important;
}

.tsl-table thead th,
.tsl-prose table thead th {
  color: var(--fg) !important;
  border-top: none !important;
  border-right: none !important;
  border-left: none !important;
  border-bottom: 2px solid var(--rule-strong) !important;
}

.tsl-table th,
.tsl-table td,
.tsl-prose table th,
.tsl-prose table td,
.tsl-result {
  color: var(--fg) !important;
  border-top: none !important;
  border-right: none !important;
  border-left: none !important;
  border-bottom: 1px solid var(--rule) !important;
}

.tsl-footer,
.tsl-post {
  border-top: 1px solid var(--rule) !important;
}

.tsl-consent__box {
  background: var(--bg-alt) !important;
  color: var(--fg) !important;
  border-top: none !important;
  border-right: none !important;
  border-bottom: 1px solid var(--rule) !important;
  border-left: 3px solid var(--rule-strong) !important;
}

/* 3. Tags, Badges, Icons & Controls (Spot Color Economy <= 2.5% Viewport Area) */
.tsl-tag,
.tsl-tag--strong,
.tsl-tag--outline,
.tsl-tag--muted,
.tsl-chip {
  background: var(--panel) !important;
  color: var(--fg) !important;
  border-top: none !important;
  border-right: none !important;
  border-bottom: 1px solid var(--rule-strong) !important;
  border-left: 3px solid var(--accent) !important;
}

.tsl-tag::before {
  display: none !important;
}

.tsl-theme-toggle {
  background: var(--panel) !important;
  color: var(--fg) !important;
  border-top: 1.5px solid var(--rule-strong) !important;
  border-right: 1px solid var(--rule) !important;
  border-bottom: 1.5px solid var(--rule-strong) !important;
  border-left: 3px solid var(--accent) !important;
}

.tsl-title em,
.tsl-hero__title em,
.tsl-section__title em,
.tsl-stat__num--mark {
  background: transparent !important;
  color: var(--fg) !important;
  font-style: normal !important;
  border-bottom: 3px solid var(--accent) !important;
  padding: 0 0 2px 0 !important;
}

.tsl-step__num,
.tsl-num-badge,
.tsl-byline__ava,
.tsl-guarantee__col--yes .tsl-icon,
.tsl-guarantee__col--no .tsl-icon,
.tsl-callout__label .tsl-icon,
.tsl-faq__q .tsl-icon,
.tsl-list--ordered > li::before,
.tsl-prose ol > li::before {
  background: var(--bg-alt) !important;
  color: var(--fg) !important;
  border-top: none !important;
  border-right: none !important;
  border-bottom: 1px solid var(--rule-strong) !important;
  border-left: 3px solid var(--accent) !important;
}

.tsl-list > li::before,
.tsl-card__item::before,
.tsl-prose ul > li::before,
.tsl-eyebrow::before {
  background: var(--accent) !important;
  border-radius: 0 !important;
}

.tsl-program__row::before {
  background: var(--accent) !important;
  border: 2px solid var(--bg) !important;
}

/* Primary & Accent Buttons: High-contrast ink surface + 3px terracotta left edge bar */
.tsl-btn--primary,
.tsl-btn--accent,
button.tsl-btn--primary,
a.tsl-btn--primary,
a.tsl-btn--accent,
.tsl-section--ink .tsl-btn--primary,
.tsl-section--ink .tsl-btn--accent,
.tsl-form .ff-btn-submit,
.tsl-form .ff-btn,
html body .tsl-form .ff-btn-submit {
  background: var(--fg) !important;
  color: var(--paper) !important;
  border-top: 2px solid var(--fg) !important;
  border-right: 2px solid var(--fg) !important;
  border-bottom: 2px solid var(--fg) !important;
  border-left: 3px solid var(--accent) !important;
}

.tsl-btn--secondary,
a.tsl-btn--secondary,
.tsl-section--ink .tsl-btn--secondary {
  background: var(--panel) !important;
  color: var(--fg) !important;
  border-top: 1.5px solid var(--rule-strong) !important;
  border-right: 1.5px solid var(--rule-strong) !important;
  border-bottom: 1.5px solid var(--rule-strong) !important;
  border-left: 1.5px solid var(--rule-strong) !important;
}

.tsl-chips .tsl-btn[aria-current="page"],
.tsl-pager__item[aria-current="page"] {
  background: var(--fg) !important;
  color: var(--paper) !important;
  border-left: 3px solid var(--accent) !important;
}

.tsl-ctaband__a,
.tsl-ctaband__a--primary {
  background: var(--bg-alt) !important;
  color: var(--fg) !important;
  border-top: 2px solid var(--rule-strong) !important;
  border-bottom: 2px solid var(--rule-strong) !important;
  border-left: 3px solid var(--accent) !important;
  border-right: none !important;
}

/* Header CTA carries the focused spot color (< 1.2% of viewport) */
.tsl-header__cta,
a.tsl-header__cta,
:root[data-theme="dark"] .tsl-header__cta {
  background: var(--accent) !important;
  color: var(--accent-contrast) !important;
  border-top: 1.5px solid var(--accent) !important;
  border-right: 1.5px solid var(--accent) !important;
  border-bottom: 1.5px solid var(--accent) !important;
  border-left: 1.5px solid var(--accent) !important;
  font-weight: 700 !important;
}

/* Form Controls (Native & Fluent Forms) */
.tsl-input,
.tsl-search .tsl-input,
.tsl-form__input,
.tsl-form__select,
.tsl-form__textarea,
.tsl-form .ff-el-form-control,
html body .tsl-form .ff-el-form-control {
  background: var(--panel) !important;
  color: var(--fg) !important;
  border-top: none !important;
  border-left: 2px solid var(--rule-strong) !important;
  border-right: 1px solid var(--rule) !important;
  border-bottom: 1.5px solid var(--rule-strong) !important;
}

.tsl-check input,
.tsl-form .ff-el-form-check-input,
.tsl-form .ff_tc_checkbox input,
html body .tsl-form .ff-el-form-check-input,
html body .tsl-form .ff_tc_checkbox input {
  background-color: var(--panel) !important;
  border: 1.5px solid var(--rule-strong) !important;
}

.tsl-check input:checked,
.tsl-form .ff-el-form-check-input:checked,
.tsl-form .ff_tc_checkbox input:checked,
html body .tsl-form .ff-el-form-check-input:checked,
html body .tsl-form .ff_tc_checkbox input:checked {
  background-color: var(--fg) !important;
  border-color: var(--fg) !important;
}

/* 4. Template Components Alignment (`tsl-tpl.css`: Byline, TOC, Prose, PostNav, Results) */
.tsl-byline,
.tsl-byline__sep,
.tsl-byline__item,
.tsl-breadcrumb,
.tsl-breadcrumb .separator,
.tsl-breadcrumb span,
.tsl-breadcrumb a,
.tsl-post__date,
.tsl-post__cat,
.tsl-result__meta,
.tsl-share__label,
.tsl-link--pending,
.tsl-card--pending {
  opacity: 1 !important;
  color: var(--fg-secondary) !important;
}

.tsl-byline__name,
.tsl-breadcrumb .last {
  color: var(--fg) !important;
}

.tsl-toc__list a {
  color: var(--fg-secondary) !important;
}

.tsl-eyebrow,
.tsl-card__eyebrow,
.tsl-callout__label,
.tsl-postnav__k,
.tsl-toc__list a::before,
.tsl-program__kind,
html body .tsl-header .breakdance-menu .current-menu-item > .breakdance-menu-link,
html body .tsl-header .breakdance-menu .current-menu-ancestor > .breakdance-menu-link,
html body .tsl-header .breakdance-menu .current_page_parent > .breakdance-menu-link,
html body .tsl-header .bde-wp-menu .breakdance-menu .breakdance-menu-item--active > .breakdance-menu-link {
  color: var(--fg) !important;
  background: transparent !important;
}

.tsl-prose code {
  background: var(--bg-alt) !important;
  color: var(--fg) !important;
}

.tsl-prose pre {
  background: var(--bg-alt) !important;
  color: var(--fg) !important;
  border-top: 2px solid var(--rule-strong) !important;
  border-right: none !important;
  border-bottom: 1px solid var(--rule) !important;
  border-left: 3px solid var(--accent) !important;
}

.tsl-prose pre code {
  background: transparent !important;
  color: inherit !important;
}

.tsl-prose blockquote {
  background: var(--bg-alt) !important;
  color: var(--fg) !important;
  border-top: none !important;
  border-right: none !important;
  border-bottom: 1px solid var(--rule) !important;
  border-left: 3px solid var(--accent) !important;
}

.tsl-post__slot,
.tsl-figure__slot,
.tsl-person__slot,
.tsl-plate__slot {
  background: var(--bg-alt) !important;
  color: var(--fg-secondary) !important;
  border-top: 1px solid var(--rule) !important;
  border-bottom: 1px solid var(--rule) !important;
}

/* 5. Optimal Line Length (CPL) & Typography (FIXED-07) */
main p:not(.eyebrow):not(.hint):not(.tsl-byline),
.tsl-body,
.tsl-lead,
.tsl-post__excerpt,
.tsl-result__excerpt,
.tsl-step__desc,
.tsl-card__desc,
.tsl-faq__a,
.tsl-consent__box p,
.tsl-callout p,
.tsl-prose p,
.tsl-prose li,
.tsl-prose blockquote p {
  max-width: 55ch !important;
}

@media (max-width: 1023px) {
  .tsl-step,
  .tsl-step:nth-child(even) {
    border-left: none !important;
    border-top: 1px solid var(--rule) !important;
    padding: 22px 20px 24px !important;
  }
  .tsl-step:first-child {
    border-top: none !important;
  }
}

@media (max-width: 767px) {
  main p:not(.eyebrow):not(.hint):not(.tsl-byline),
  .tsl-body,
  .tsl-lead,
  .tsl-post__excerpt,
  .tsl-result__excerpt,
  .tsl-step__desc,
  .tsl-card__desc,
  .tsl-faq__a,
  .tsl-consent__box p,
  .tsl-callout p,
  .tsl-hero__desc,
  .tsl-prose p,
  .tsl-prose li,
  .tsl-prose blockquote p {
    font-size: 16px !important;
    line-height: 1.65 !important;
    max-width: 29ch !important;
  }

  .tsl-card {
    padding: 24px 22px !important;
  }

  .tsl-bubble {
    padding: 20px 22px 18px !important;
  }
}

/* 6. Section--Ink, Footer & Restored Content Theme Parity (WCAG AA + Zero Overflow) */
html .tsl-section--ink,
html[data-theme="light"] .tsl-section--ink,
html[data-theme="dark"] .tsl-section--ink,
html .tsl-footer,
html[data-theme="light"] .tsl-footer,
html[data-theme="dark"] .tsl-footer {
  --bg: var(--bg-alt) !important;
  --panel: var(--white) !important;
  --ink-panel: var(--white) !important;
  --rule: var(--line) !important;
  --ink-line: var(--rule) !important;
  background: var(--bg-alt) !important;
}

html .tsl-section--ink,
html[data-theme="light"] .tsl-section--ink,
html[data-theme="dark"] .tsl-section--ink {
  --fg: var(--ink) !important;
  --fg-2: var(--ink-secondary) !important;
  --fg-muted: var(--muted) !important;
  --on-ink: var(--ink) !important;
  --on-ink-muted: var(--ink-secondary) !important;
  color: var(--ink) !important;
}

html .tsl-footer,
html[data-theme="light"] .tsl-footer,
html[data-theme="dark"] .tsl-footer {
  --on-ink: var(--fg) !important;
  --on-ink-muted: var(--fg-secondary) !important;
  color: var(--fg) !important;
}

html .tsl-footer *,
html[data-theme="light"] .tsl-footer *,
html[data-theme="dark"] .tsl-footer * {
  opacity: 1 !important;
  color: var(--fg-secondary) !important;
}

html .tsl-footer .tsl-footer__brand,
html[data-theme="light"] .tsl-footer .tsl-footer__brand,
html[data-theme="dark"] .tsl-footer .tsl-footer__brand,
html .tsl-footer .tsl-footer__name,
html[data-theme="light"] .tsl-footer .tsl-footer__name,
html[data-theme="dark"] .tsl-footer .tsl-footer__name,
html .tsl-footer .tsl-footer__title,
html[data-theme="light"] .tsl-footer .tsl-footer__title,
html[data-theme="dark"] .tsl-footer .tsl-footer__title,
html body .tsl-footer .breakdance-menu .current-menu-item > .breakdance-menu-link,
html body .tsl-footer .breakdance-menu .current-menu-ancestor > .breakdance-menu-link,
html body .tsl-footer .breakdance-menu .current_page_parent > .breakdance-menu-link,
html body .tsl-footer .bde-wp-menu .breakdance-menu .breakdance-menu-item--active > .breakdance-menu-link,
html .tsl-footer [aria-current="page"],
html .tsl-footer strong,
html .tsl-footer a:hover {
  color: var(--fg) !important;
  background: transparent !important;
}

html body #oxy-main.hg-restored-content {
  background: var(--bg) !important;
  color: var(--fg) !important;
  --hg-bg-canvas: var(--bg) !important;
  --hg-bg-surface: var(--panel) !important;
  --hg-bg-soft: var(--bg-alt) !important;
  --hg-text-ink: var(--fg) !important;
  --hg-text-muted: var(--fg-secondary) !important;
  --hg-border-line: var(--rule) !important;
  --hg-color-primary: var(--accent-secondary) !important;
  --hg-color-accent: var(--accent) !important;
}

#oxy-main.hg-restored-content :is(.book-header, .hdls-header) {
  background: var(--bg-alt) !important;
  color: var(--fg) !important;
  border-bottom: 1px solid var(--rule) !important;
}

#oxy-main.hg-restored-content :is(.tool-section, .book-cover-plate, .hdls-card, .type-specimen) {
  background: var(--bg-alt) !important;
  color: var(--fg) !important;
  border-top: 2px solid var(--rule-strong) !important;
  border-bottom: 1px solid var(--rule) !important;
  border-left: none !important;
  border-right: none !important;
}

#oxy-main.hg-restored-content :is(.lens-card, .symbol-box, .swatch-card, .cds-table) {
  background: var(--panel) !important;
  color: var(--fg) !important;
  border-top: 1px solid var(--rule) !important;
  border-bottom: 1px solid var(--rule) !important;
  border-left: none !important;
  border-right: none !important;
}

.oxy-skip-link:not(:focus),
.screen-reader-text:not(:focus),
.tsl-sr:not(:focus) {
  display: none !important;
}

.breakdance-dropdown:not(.breakdance-dropdown--open) .breakdance-dropdown-floater {
  display: none !important;
}

@media (max-width: 767px) {
  .tsl-theme-toggle__label,
  .tsl-table--stack thead {
    display: none !important;
  }
}
/* Site Token Profile: theprometheus.xyz (TSL Field-Note & Nocturnal Constellation) */
:root,
html[data-theme="light"] {
  --paper: #F6F4EE;
  --paper-alt: #E6E2D6;
  --paper-deep: var(--paper-alt);
  --white: #FFFFFF;
  --ink: #121212;
  --ink-2: #34332F;
  --ink-secondary: #34332F;
  --ink-muted: #5A5953;
  --muted: #5A5953;
  --line: #CBC7BC;
  --line-strong: #121212;
  --rule: #CBC7BC;
  --rule-strong: #121212;
  --accent: #8C3B20;
  --accent-strong: #752E16;
  --accent-deep: #8C3B20;
  --accent-contrast: #F6F4EE;
  --accent-secondary: #121212;
  --on-accent: var(--accent-contrast);
  --on-ink: var(--paper);
  --on-ink-muted: var(--paper-alt);
}

html[data-theme="dark"],
:root[data-theme="dark"] {
  --paper: #0F121A;
  --paper-alt: #2B313C;
  --paper-deep: var(--paper-alt);
  --white: #1B2028;
  --ink: #F2EDE1;
  --ink-2: #C8C2B4;
  --ink-secondary: #C8C2B4;
  --ink-muted: #959BAA;
  --muted: #959BAA;
  --line: #38404C;
  --line-strong: #C8C2B4;
  --rule: #38404C;
  --rule-strong: #C8C2B4;
  --accent: #CC9052;
  --accent-strong: #D69B5E;
  --accent-deep: #CC9052;
  --accent-contrast: #0F121A;
  --accent-secondary: #F2EDE1;
  --on-accent: var(--accent-contrast);
  --on-ink: var(--paper);
  --on-ink-muted: var(--paper-alt);
}