/* ============================================================
   2419 TEXT_CLEAN — style.css
   출발점: DesignKit kit-swiss (엄격한 그리드 · 1px 헤어라인 · 모서리 0 · 그림자 없음 · 단색 액센트)
   변형: 굵은 2px 룰 헤더 · IBM Plex Sans KR + IBM Plex Mono · 모노 숫자 스텝 번호 ·
        3열 워크벤치(파이프라인 레일 | 입력 | 결과) · 문서 페이지는 좌측 메타열 + 우측 본문 비대칭 그리드.
   금지: 그라디언트·글래스·블러·글로우·다색 코딩·큰 그림자.
   ============================================================ */
:root {
  --bg: #ffffff;
  --bg-2: #f4f4f1;
  --ink: #141414;
  --ink-2: #474744;
  --ink-3: #75756f;
  --rule: #141414;
  --line: #e0e0da;
  --acc: #0b7659;
  --acc-ink: #ffffff;
  --acc-soft: #e5f1ec;
  --err: #b42318;
  --sans: 'IBM Plex Sans KR', 'Pretendard', system-ui, -apple-system, 'Segoe UI', 'Hiragino Sans', 'Noto Sans CJK SC', 'Noto Sans Arabic', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  --top-h: 56px;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #131514;
  --bg-2: #1b1e1c;
  --ink: #ecebe6;
  --ink-2: #b4b3ac;
  --ink-3: #8a8983;
  --rule: #ecebe6;
  --line: #2d312f;
  --acc: #43bf99;
  --acc-ink: #0b1310;
  --acc-soft: #1b2c26;
  --err: #f0806f;
  color-scheme: dark;
}
/* 라이트가 기본: 다크는 사용자가 토글했을 때만(data-theme="dark") 적용한다 */

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 15px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.005em;
}
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
code, pre, .mono { font-family: var(--mono); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: -999px; top: 0; background: var(--ink); color: var(--bg); padding: 8px 12px; z-index: 100; }
.skip:focus { left: 8px; }
:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
.ic { width: 16px; height: 16px; flex: none; vertical-align: -3px; }

/* ── 헤더: 2px 룰 ───────────────────────────── */
.top { position: sticky; top: 0; z-index: 40; background: var(--bg); border-bottom: 2px solid var(--rule); }
.top-in { max-width: 1480px; margin: 0 auto; height: var(--top-h); padding: 0 16px; display: flex; align-items: center; gap: 20px; }
.mark { text-decoration: none; font-family: var(--mono); font-size: 17px; letter-spacing: -0.02em; white-space: nowrap; display: inline-flex; align-items: baseline; }
.mark-a { font-weight: 600; }
.mark-sl { color: var(--acc); font-weight: 600; margin: 0 1px; }
.mark-b { font-weight: 400; }
.nav { display: flex; gap: 2px; margin-inline-start: 8px; overflow-x: auto; scrollbar-width: none; }
.nav::-webkit-scrollbar { display: none; }
.nav a { text-decoration: none; font-size: 14px; color: var(--ink-2); padding: 6px 10px; white-space: nowrap; border-bottom: 2px solid transparent; }
.nav a:hover { color: var(--ink); }
.nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--acc); font-weight: 600; }
.top-tools { margin-inline-start: auto; display: flex; align-items: center; gap: 8px; }
.lang { background: var(--bg); border: 1px solid var(--line); padding: 5px 6px; font-size: 13px; border-radius: 0; max-width: 110px; }
.theme { width: 34px; height: 34px; display: inline-grid; place-items: center; background: none; border: 1px solid var(--line); cursor: pointer; padding: 0; }
.theme:hover { border-color: var(--ink); }
.theme .i-moon { display: none; }
:root[data-theme="dark"] .theme .i-moon { display: block; }
:root[data-theme="dark"] .theme .i-sun { display: none; }
@media (max-width: 719px) {
  .top-in { gap: 10px; }
  .nav { order: 3; position: absolute; left: 0; right: 0; top: var(--top-h); background: var(--bg); border-bottom: 1px solid var(--line); padding: 0 8px; margin: 0; }
  .top { margin-bottom: 38px; }
  .nav a { padding: 8px 10px; font-size: 13px; }
}

/* ── 공통 버튼 ─────────────────────────────── */
.btn { display: inline-flex; align-items: center; gap: 6px; background: var(--bg); border: 1px solid var(--line); padding: 5px 10px; font-size: 13px; line-height: 1.4; cursor: pointer; text-decoration: none; white-space: nowrap; border-radius: 0; }
.btn:hover { border-color: var(--ink); }
.btn-solid { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.btn-solid:hover { background: var(--acc); border-color: var(--acc); color: var(--acc-ink); }

/* ── 워크벤치 ───────────────────────────────── */
.bench-wrap { max-width: 1480px; margin: 0 auto; padding: 0 16px 24px; }
.bench { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "in" "rail" "out"; border-bottom: 1px solid var(--line); }
.pane-in { grid-area: in; }
.pane-out { grid-area: out; }
.rail { grid-area: rail; }
.pane { display: flex; flex-direction: column; min-width: 0; padding: 14px 0; }
.pane-head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin-bottom: 8px; }
.pane-no { font-family: var(--mono); font-weight: 600; font-size: 13px; width: 22px; height: 22px; display: inline-grid; place-items: center; background: var(--ink); color: var(--bg); }
.pane-out .pane-no { background: var(--acc); color: var(--acc-ink); }
.pane-head label { font-weight: 700; font-size: 15px; }
.stat { font-family: var(--mono); font-size: 12px; color: var(--ink-3); }
.pane-act { margin-inline-start: auto; display: flex; flex-wrap: wrap; gap: 4px; }
.ta { width: 100%; min-height: 220px; height: 34vh; resize: vertical; border: 1px solid var(--line); border-top: 2px solid var(--rule); background: var(--bg); padding: 12px; font: 400 13.5px/1.65 var(--mono); tab-size: 4; border-radius: 0; }
.ta:focus { outline: none; border-color: var(--ink); border-top-color: var(--acc); }
.pane-out .ta { background: var(--bg-2); }

.rail { border-top: 1px solid var(--line); padding: 14px 0; min-width: 0; }
.rail-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 10px; }
.rail-t { margin: 0; font-size: 15px; font-weight: 700; }
.recipe-bar { display: flex; flex-wrap: wrap; gap: 4px; flex: 1 1 260px; }
.recipe-bar select { flex: 1 1 160px; min-width: 0; background: var(--bg); border: 1px solid var(--ink); padding: 5px 8px; font-size: 13px; border-radius: 0; }

.steps { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.steps-empty { color: var(--ink-3); font-size: 13px; margin: 10px 0; }
.step { border-bottom: 1px solid var(--line); padding: 8px 0 10px; }
.step.is-new { animation: stepIn .5s ease-out; }
@keyframes stepIn { from { background: var(--acc-soft); } to { background: transparent; } }
.step-head { display: flex; align-items: center; gap: 8px; min-height: 30px; }
.step-no { font-family: var(--mono); font-size: 20px; font-weight: 600; line-height: 1; color: var(--acc); min-width: 30px; letter-spacing: -0.04em; }
.step-name { font-weight: 600; font-size: 14px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.step-meta { font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); white-space: nowrap; }
.step-meta.is-err { color: var(--err); font-weight: 600; }
.step-meta.is-same { color: var(--ink-3); opacity: .75; }
.step-ctl { margin-inline-start: auto; display: flex; align-items: center; gap: 2px; }
.ib { width: 28px; height: 28px; display: inline-grid; place-items: center; background: none; border: 1px solid transparent; cursor: pointer; color: var(--ink-2); padding: 0; }
.ib:hover:not(:disabled) { border-color: var(--line); color: var(--ink); }
.ib:disabled { opacity: .25; cursor: default; }
.sw { position: relative; display: inline-block; width: 30px; height: 16px; margin-inline-end: 4px; cursor: pointer; }
.sw input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.sw i { position: absolute; inset: 0; border: 1px solid var(--ink-3); background: var(--bg); }
.sw i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 10px; height: 10px; background: var(--ink-3); transition: transform .15s; }
.sw input:checked + i { border-color: var(--acc); background: var(--acc); }
.sw input:checked + i::after { transform: translateX(14px); background: var(--acc-ink); }
.sw input:focus-visible + i { outline: 2px solid var(--acc); outline-offset: 2px; }
.step.is-off .step-name, .step.is-off .step-no, .step.is-off .step-body { opacity: .4; }
.step-body { display: flex; flex-wrap: wrap; gap: 6px 14px; padding-inline-start: 38px; }
.step-body:empty { display: none; }
.fld { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-2); }
.fld-txt, .fld-num, .fld-sel { flex-wrap: wrap; }
.fld input[type="text"], .fld input[type="number"], .fld select { border: 0; border-bottom: 1px solid var(--ink-3); background: transparent; padding: 3px 2px; font-size: 13px; border-radius: 0; color: var(--ink); }
.fld input[type="text"] { font-family: var(--mono); width: 150px; }
.fld input[type="number"] { width: 64px; font-family: var(--mono); }
.fld input:focus, .fld select:focus { outline: none; border-bottom: 2px solid var(--acc); }
.fld-chk { cursor: pointer; }
.fld-chk input { accent-color: var(--acc); width: 15px; height: 15px; margin: 0; }

.palette { margin-top: 12px; }
.palette > summary { cursor: pointer; list-style: none; font-weight: 700; font-size: 14px; display: flex; align-items: center; gap: 6px; padding: 8px 0; border-bottom: 2px solid var(--rule); }
.palette > summary::-webkit-details-marker { display: none; }
.pal { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0 18px; }
.pal-g { padding-top: 10px; }
.pal-h { margin: 0 0 4px; font: 600 11px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.pal-ops { display: flex; flex-direction: column; }
.pal-op { display: flex; align-items: center; gap: 6px; text-align: start; background: none; border: 0; border-bottom: 1px solid var(--line); padding: 7px 2px; font-size: 13.5px; cursor: pointer; color: var(--ink); }
.pal-op .pal-plus { width: 13px; height: 13px; color: var(--ink-3); }
.pal-op:hover { color: var(--acc); }
.pal-op:hover .pal-plus { color: var(--acc); }

@media (min-width: 720px) {
  .bench { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "rail rail" "in out"; column-gap: 24px; }
  .rail { border-top: 0; border-bottom: 1px solid var(--line); }
  .pal { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ta { height: 46vh; }
}
@media (min-width: 1120px) {
  .bench { grid-template-columns: 360px minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "rail in out"; column-gap: 0; height: calc(100vh - var(--top-h) - 2px - 12px); min-height: 560px; }
  .rail { border-bottom: 0; border-inline-end: 1px solid var(--line); padding: 16px 20px 16px 0; overflow-y: auto; }
  .pane { padding: 16px 0 16px 20px; }
  .pane-in { border-inline-end: 1px solid var(--line); padding-inline-end: 20px; }
  .ta { flex: 1; height: auto; min-height: 0; resize: none; }
  .pal { grid-template-columns: 1fr 1fr; }
  .step-body { padding-inline-start: 38px; }
}

/* ── 광고 슬롯(애드핏 규정: 래퍼에 radius/overflow 금지) ── */
.ad-wrap { margin: 20px auto 0; }
.ad-grid { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%; max-width: 672px; margin-left: auto; margin-right: auto; }
.ad-grid[data-ad-layout="mixed"] { max-width: 760px; }
.ad-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; width: 100%; }
.ad-cell { min-height: 50px; max-width: 100%; }
.ad-row.ad-pc { display: none; }
@media (min-width: 720px) {
  .ad-row.ad-pc { display: flex; }
  .ad-row.ad-mo { display: none; }
}

/* ── 문서 페이지: 좌측 메타열 + 본문 ─────────── */
.page { max-width: 1180px; margin: 0 auto; padding: 20px 16px 40px; }
.crumb { font-size: 12.5px; color: var(--ink-3); display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; font-family: var(--mono); }
.crumb a { text-decoration: none; color: var(--ink-2); }
.crumb a:hover { color: var(--acc); }
.crumb .sep { color: var(--line); }
.page-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.page-side { border-top: 2px solid var(--rule); padding-top: 10px; }
.kicker { display: block; font: 600 11.5px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--acc); }
.page-main { min-width: 0; }
.page-main h1 { font-size: clamp(26px, 5vw, 40px); line-height: 1.18; letter-spacing: -0.03em; font-weight: 700; margin: 0 0 12px; }
.lead { font-size: 17px; color: var(--ink-2); margin: 0 0 24px; max-width: 720px; }
.toc { list-style: none; counter-reset: t; margin: 14px 0 0; padding: 0; font-size: 13px; display: none; }
.toc li { counter-increment: t; border-top: 1px solid var(--line); }
.toc a { display: flex; gap: 8px; text-decoration: none; color: var(--ink-2); padding: 6px 0; }
.toc a::before { content: counter(t, decimal-leading-zero); font-family: var(--mono); color: var(--ink-3); }
.toc a:hover { color: var(--acc); }
.side-block { margin-top: 20px; display: none; }
.side-k { display: block; font: 600 11px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.side-list { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.side-list a { display: block; padding: 5px 0; text-decoration: none; color: var(--ink-2); }
.side-list a:hover { color: var(--acc); }
@media (min-width: 960px) {
  .page-grid { grid-template-columns: 230px minmax(0, 1fr); gap: 56px; }
  .page-side { position: sticky; top: calc(var(--top-h) + 20px); align-self: start; max-height: calc(100vh - var(--top-h) - 40px); overflow-y: auto; }
  .toc, .side-block { display: block; }
}

.prose { max-width: 760px; font-size: 16px; line-height: 1.8; }
.prose h2 { font-size: 21px; letter-spacing: -0.02em; margin: 40px 0 12px; padding-top: 12px; border-top: 2px solid var(--rule); scroll-margin-top: calc(var(--top-h) + 16px); line-height: 1.35; }
.prose h3 { font-size: 17px; margin: 26px 0 8px; }
.prose p { margin: 0 0 14px; }
.prose ul, .prose ol { margin: 0 0 16px; padding-inline-start: 22px; }
.prose li { margin-bottom: 6px; }
.prose li::marker { color: var(--acc); font-family: var(--mono); }
.prose code { font-size: .88em; background: var(--bg-2); border: 1px solid var(--line); padding: 1px 5px; word-break: break-word; }
.prose blockquote { margin: 18px 0; padding: 10px 14px; border-inline-start: 3px solid var(--acc); background: var(--bg-2); font-size: 15px; }
.prose a { color: var(--acc); text-underline-offset: 3px; }
.prose strong { font-weight: 700; }
pre.ex { margin: 0 0 16px; padding: 12px 14px; background: var(--bg-2); border: 1px solid var(--line); border-top: 2px solid var(--rule); font: 400 13px/1.6 var(--mono); white-space: pre-wrap; word-break: break-word; overflow-x: auto; }
.ws { color: var(--acc); opacity: .8; }
.upd { font-family: var(--mono); font-size: 12px; color: var(--ink-3); margin-top: 28px; }

.example { margin: 8px 0 12px; }
.example h2 { margin-top: 8px; }
.ex-opts { list-style: none; padding: 0; margin: 0 0 12px; display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 13px; }
.ex-opts li { display: inline-flex; gap: 6px; margin: 0; }
.ex-opts .ex-k { font: 600 11px/1.9 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.ex-opts span { color: var(--ink-2); }
.ex-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 16px; }
@media (min-width: 720px) { .ex-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.ex-lbl { display: block; font: 600 11px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 4px; }
pre.ex-out { border-top-color: var(--acc); }
.ws-legend { font-size: 12px; color: var(--ink-3); margin: -6px 0 14px; }

.op-list, .g-list { border-top: 1px solid var(--line); margin-bottom: 8px; }
.op-row, .g-row { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 2px 12px; padding: 12px 0; border-bottom: 1px solid var(--line); text-decoration: none; }
.op-row:hover .op-t, .g-row:hover .g-t { color: var(--acc); }
.op-no { grid-row: span 2; font: 600 18px/1.3 var(--mono); color: var(--ink-3); }
.op-t, .g-t { font-weight: 700; font-size: 16px; line-height: 1.4; }
.op-d, .g-d { font-size: 14px; color: var(--ink-2); line-height: 1.55; }
.prose .op-row, .prose .g-row { color: var(--ink); }

.feats { display: grid; grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--line); }
@media (min-width: 720px) { .feats { grid-template-columns: 1fr 1fr; column-gap: 28px; } }
.feat { padding: 14px 0; border-bottom: 1px solid var(--line); }
.feat-no { font: 600 13px/1 var(--mono); color: var(--acc); }
.feat h3 { margin: 6px 0 4px; font-size: 16px; }
.feat p { margin: 0; font-size: 14.5px; color: var(--ink-2); line-height: 1.65; }
.recipes { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 720px) { .recipes { grid-template-columns: 1fr 1fr; } }
.recipe-card { border: 1px solid var(--line); border-top: 2px solid var(--rule); padding: 12px 14px 14px; margin: 14px 0; background: var(--bg); }
.recipes .recipe-card { margin: 0; }
.rc-head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 6px; }
.rc-k { font: 600 11px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--acc); }
.rc-steps { font-size: 14px; margin: 0 0 12px !important; }
.recipe-card .btn { color: var(--bg); text-decoration: none; }
.recipe-card .btn:hover { color: var(--acc-ink); }
.faq { border-top: 1px solid var(--line); }
.faq:last-of-type { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; font-weight: 600; padding: 12px 0; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--mono); color: var(--acc); }
.faq[open] summary::after { content: "−"; }
.faq p { margin: 0 0 14px; color: var(--ink-2); font-size: 15px; }
.mailbox { margin-top: 24px; padding: 16px 0; border-top: 2px solid var(--rule); border-bottom: 1px solid var(--line); }
.mail { font: 600 18px/1.4 var(--mono); color: var(--acc); word-break: break-all; }
.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 36px; border-top: 2px solid var(--rule); padding-top: 12px; }
.pager a { text-decoration: none; font-size: 14px; font-weight: 600; color: var(--ink); line-height: 1.4; }
.pager a span { display: block; font: 600 11px/1.6 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.pager .nx { text-align: end; }
.pager a:hover { color: var(--acc); }
.lang-list { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; }

/* ── 푸터 ─────────────────────────────────── */
.foot { border-top: 2px solid var(--rule); margin-top: 24px; }
.foot-in { max-width: 1480px; margin: 0 auto; padding: 22px 16px 8px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
@media (min-width: 720px) { .foot-in { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; } }
.foot-col { display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; }
.foot-k { font: 600 11px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); padding-bottom: 6px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
.foot-col a { text-decoration: none; color: var(--ink-2); padding: 3px 0; }
.foot-col a:hover { color: var(--acc); }
.foot-col .more { color: var(--ink); font-weight: 600; }
.foot-note { max-width: 1480px; margin: 8px auto 0; padding: 0 16px; font-size: 12.5px; color: var(--ink-3); }
.foot-base { max-width: 1480px; margin: 4px auto 0; padding: 0 16px 28px; font: 400 11.5px/1.4 var(--mono); color: var(--ink-3); }
.is-tool .foot { margin-top: 8px; }

/* ── 토스트 ───────────────────────────────── */
.toast { position: fixed; left: 50%; bottom: 20px; transform: translate(-50%, 20px); background: var(--ink); color: var(--bg); padding: 9px 14px; font-size: 13.5px; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 60; max-width: calc(100vw - 32px); }
.toast.on { opacity: 1; transform: translate(-50%, 0); }

/* ── RTL ──────────────────────────────────── */
[dir="rtl"] .ic-arrow, [dir="rtl"] .btn .ic { transform: scaleX(-1); }
[dir="rtl"] .ta { direction: rtl; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }
.prose a.btn { text-decoration: none; }
.prose a.btn-solid { color: var(--bg); }
.prose a.btn-solid:hover { color: var(--acc-ink); }
/* 아랍 문자는 자간을 벌리면 글자 연결이 끊긴다 */
[dir="rtl"] .pal-h, [dir="rtl"] .kicker, [dir="rtl"] .side-k, [dir="rtl"] .foot-k, [dir="rtl"] .ex-lbl, [dir="rtl"] .ex-opts .ex-k,
[dir="rtl"] .rc-k, [dir="rtl"] .pager a span, [dir="rtl"] .stat, [dir="rtl"] .crumb, [dir="rtl"] .step-meta { letter-spacing: 0; font-family: var(--sans); }