/* Belanjawan 2027 Explained, KTP & Company PLT */
/* Base reset (provided automatically when the page is shown inside Claude) */
:root { color-scheme: light; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; }
img { max-width: 100%; }
[hidden] { display: none !important; }
/* Layout: sticky top bar with five views (For me · Ask · Highlights · 2026 vs 2027 · Pillars); one view visible at a time, max 1080px */
:root {
  --bg: #f4f7f9;
  --surface: #ffffff;
  --fg: #12202c;
  --muted: #586773;
  --line: #dde5eb;
  --accent: #0d3b66;        /* deep navy */
  --accent-soft: #e3f1f9;
  --pop: #0b84bd;           /* KTP blue (logo #159BD7, darkened for text contrast) */
  --gold: #e0a400;
  --up: #14804a;
  --down: #b4321f;
  --font-display: "Archivo", "Noto Sans SC", "Arial Narrow", "Microsoft YaHei", system-ui, sans-serif;
  --font-body: "Instrument Sans", "Noto Sans SC", "Segoe UI", "Microsoft YaHei", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0c1621; --surface: #13212f; --fg: #e6eef4; --muted: #9db0bf; --line: #24384a;
    --accent: #8fcdf2; --accent-soft: #153049; --pop: #3fb3ea; --gold: #f4c242; --up: #4ccf88; --down: #ff8a75; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0c1621; --surface: #13212f; --fg: #e6eef4; --muted: #9db0bf; --line: #24384a;
  --accent: #8fcdf2; --accent-soft: #153049; --pop: #3fb3ea; --gold: #f4c242; --up: #4ccf88; --down: #ff8a75; color-scheme: dark;
}
* { box-sizing: border-box; }
body { background: var(--bg); color: var(--fg); font-family: var(--font-body); font-size: 16px; line-height: 1.55; margin: 0; }
h1, h2, h3 { font-family: var(--font-display); margin: 0; text-wrap: balance; line-height: 1.1; }
h1 { font-size: clamp(2rem, 5.5vw, 3rem); font-weight: 800; font-stretch: 80%; letter-spacing: -0.01em; }
h2 { font-size: 1.5rem; font-weight: 800; font-stretch: 85%; }
h3 { font-size: 1.05rem; font-weight: 700; }
p { margin: 0; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* Top bar */
.bar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 10; background: var(--bg); border-bottom: 1px solid var(--line); }
.bar-in { max-width: 1080px; margin: 0 auto; padding-inline: 16px; padding-block: 10px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.brand { font-family: var(--font-display); font-weight: 800; font-stretch: 80%; font-size: 1.25rem; display: flex; align-items: center; gap: 10px; margin-right: auto; }
.brand .logo { width: 40px; height: 40px; display: block; }
.brand span { padding-left: 10px; border-left: 1px solid var(--line); }
.foot-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; color: var(--fg); }
.foot-brand img { width: 48px; height: 48px; }
.brand b { color: var(--pop); }
nav { display: flex; gap: 4px; overflow-x: auto; max-width: 100%; }
nav button { background: none; border: 0; padding: 8px 12px; border-radius: 999px; font-weight: 500; color: var(--muted); white-space: nowrap; }
nav button[aria-current="true"] { background: var(--accent); color: var(--bg); }
.lang { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; padding: 2px; }
.lang button { background: none; border: 0; border-radius: 999px; padding: 4px 10px; font-size: 0.85rem; color: var(--muted); }
.lang button[aria-pressed="true"] { background: var(--pop); color: var(--bg); }
.theme-btn { background: none; border: 1px solid var(--line); border-radius: 999px; padding: 6px 10px; font-size: 0.85rem; color: var(--muted); }

main { max-width: 1080px; margin: 0 auto; padding-inline: 16px; padding-block: 28px 64px; }
.view { display: grid; gap: 24px; }
.head { display: grid; gap: 8px; max-width: 70ch; }
.eyebrow { font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--pop); }
.lede { color: var(--muted); font-size: 1.08rem; }
.note { font-size: 0.85rem; color: var(--muted); }

/* For me */
.personas { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.persona { text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; display: grid; gap: 2px; }
.persona strong { font-family: var(--font-display); font-size: 1.1rem; font-stretch: 90%; }
.persona span { color: var(--muted); font-size: 0.88rem; }
.persona[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.persona[aria-pressed="true"] strong { color: var(--accent); }
.answer { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 24px; display: grid; gap: 16px; }
.answer .sum { font-size: 1.15rem; font-weight: 500; }
.answer ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 0; }
.answer li { padding: 12px 0 12px 28px; border-top: 1px solid var(--line); position: relative; }
.answer li::before { content: ""; position: absolute; left: 4px; top: 20px; width: 10px; height: 10px; border-radius: 2px; background: var(--gold); transform: rotate(45deg); }
.other { display: flex; gap: 8px; flex-wrap: wrap; }
.other input { flex: 1 1 260px; min-width: 0; font: inherit; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--fg); }
.btn { background: var(--accent); color: var(--bg); border: 0; border-radius: 10px; padding: 10px 18px; font-weight: 600; }
.btn:disabled { opacity: 0.5; cursor: default; }
.btn.ghost { background: none; color: var(--accent); border: 1px solid var(--line); }
.calc { background: var(--accent-soft); border-radius: 12px; padding: 16px; display: grid; gap: 10px; }
.calc-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.calc input { font: inherit; font-family: var(--font-mono); padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--fg); width: 200px; max-width: 100%; }
.calc .save { font-family: var(--font-display); font-weight: 800; font-size: 1.8rem; color: var(--up); }

/* Ask */
.chat { display: grid; gap: 14px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px; font-size: 0.9rem; text-align: left; }
.chip[aria-pressed="true"] { background: var(--accent); color: var(--bg); border-color: var(--accent); }
.msgs { display: grid; gap: 12px; }
.msg { max-width: 80ch; padding: 12px 16px; border-radius: 14px; white-space: pre-wrap; overflow-wrap: anywhere; }
.msg.q { justify-self: end; background: var(--accent); color: var(--bg); border-bottom-right-radius: 4px; }
.msg.a { background: var(--surface); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.ask-form { display: flex; gap: 8px; flex-wrap: wrap; }
.ask-form textarea { flex: 1 1 300px; min-width: 0; font: inherit; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--fg); resize: vertical; min-height: 48px; }
.unavailable { background: var(--surface); border: 1px dashed var(--line); border-radius: 12px; padding: 16px; color: var(--muted); }

/* Highlights */
.filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.sort { margin-left: auto; display: flex; gap: 4px; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 16px; display: grid; grid-template-rows: auto auto auto 1fr auto; gap: 6px; min-width: 0; }
.card .cat { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.card .fig { font-family: var(--font-display); font-weight: 800; font-stretch: 80%; font-size: 1.9rem; color: var(--accent); line-height: 1.05; }
.card p { color: var(--muted); font-size: 0.92rem; }
.vote { justify-self: end; display: inline-flex; gap: 6px; align-items: center; background: none; border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px; font-family: var(--font-mono); font-size: 0.8rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.vote[aria-pressed="true"] { color: var(--pop); border-color: var(--pop); }
.vote:disabled { cursor: default; opacity: 0.6; }

/* Compare */
.legend { display: flex; gap: 16px; font-size: 0.88rem; color: var(--muted); }
.legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.cmp-group { display: grid; gap: 12px; }
.cmp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
@media (max-width: 420px) { .cmp-grid { grid-template-columns: 1fr; } }
.cmp { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; display: grid; gap: 8px; min-width: 0; }
.cmp-top { display: flex; justify-content: space-between; gap: 8px; align-items: start; }
.delta { font-family: var(--font-mono); font-size: 0.78rem; padding: 2px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--up); white-space: nowrap; }
.delta.down { color: var(--down); }
.row { display: grid; grid-template-columns: 40px 1fr auto; gap: 10px; align-items: center; font-size: 0.85rem; font-variant-numeric: tabular-nums; }
.row .yr { font-family: var(--font-mono); color: var(--muted); font-size: 0.75rem; }
.track { height: 10px; background: var(--accent-soft); border-radius: 999px; overflow: hidden; }
.track span { display: block; height: 100%; border-radius: 999px; }
.y26 { background: var(--muted); opacity: 0.55; }
.y27 { background: var(--accent); }
.row .val { min-width: 5.5em; text-align: right; }
.row.now .val { font-weight: 600; }
.split { display: grid; gap: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 16px; }
.stack { display: flex; height: 28px; border-radius: 6px; overflow: hidden; }
.stack span { display: block; height: 100%; }
.stack-legend { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px 16px; font-size: 0.88rem; }
.stack-legend div { display: flex; gap: 8px; align-items: center; }
.stack-legend i { width: 12px; height: 12px; border-radius: 3px; flex: none; }
.stack-legend b { margin-left: auto; font-variant-numeric: tabular-nums; }

/* Pillars */
.tools { display: flex; gap: 8px; }
.root { background: var(--accent); color: var(--bg); border-radius: 14px; padding: 18px 20px; display: grid; gap: 2px; }
.root h2 { color: var(--bg); }
.tree { display: grid; gap: 10px; border-left: 2px solid var(--line); margin-left: 18px; padding-left: 18px; }
.pillar { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; position: relative; }
.pillar::before { content: ""; position: absolute; left: -20px; top: 26px; width: 18px; border-top: 2px solid var(--line); }
.pillar summary { list-style: none; cursor: pointer; padding: 14px 16px; display: flex; gap: 12px; align-items: center; }
.pillar summary::-webkit-details-marker { display: none; }
.pnum { font-family: var(--font-mono); font-size: 0.72rem; color: var(--pop); letter-spacing: 0.08em; white-space: nowrap; }
.pillar summary h3 { flex: 1; }
.count { font-family: var(--font-mono); font-size: 0.78rem; color: var(--muted); }
.chev { transition: transform 0.2s; color: var(--muted); }
.pillar[open] .chev { transform: rotate(90deg); }
.pillar ul { list-style: none; margin: 0; padding: 0 16px 14px; display: grid; gap: 0; }
.pillar li { display: grid; grid-template-columns: 110px 1fr; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 0.92rem; }
.pillar li b { font-family: var(--font-display); font-stretch: 85%; color: var(--accent); }
.pillar li span { color: var(--muted); }
.pillar li strong { color: var(--fg); font-weight: 600; }
@media (max-width: 520px) { .pillar li { grid-template-columns: 1fr; gap: 2px; } .tree { margin-left: 6px; padding-left: 12px; } .pillar::before { left: -14px; width: 12px; } }

footer { max-width: 1080px; margin: 0 auto; padding-inline: 16px; padding-block: 0 40px; font-size: 0.82rem; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* Personal tax */
.tax-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 760px) { .tax-grid { grid-template-columns: 1fr; } }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 18px; display: grid; gap: 12px; min-width: 0; }
.table-wrap { overflow-x: auto; }
table.rates { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: 0.92rem; }
table.rates th, table.rates td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); }
table.rates th { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
table.rates tr.chg td { background: var(--accent-soft); }
table.rates td.old { color: var(--muted); text-decoration: line-through; }
table.rates td.new { font-weight: 600; color: var(--pop); }
.relief { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.relief li { display: grid; grid-template-columns: 22px 1fr; gap: 8px; }
.relief li::before { content: "+"; font-family: var(--font-mono); color: var(--up); font-weight: 700; }

/* Industries */
.ind-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.ind-card { text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 14px; display: grid; gap: 6px; align-content: start; }
.ind-card strong { font-family: var(--font-display); font-size: 1.05rem; font-stretch: 90%; }
.ind-card span { color: var(--muted); font-size: 0.88rem; }
.ind-card[aria-pressed="true"] { border-color: var(--pop); box-shadow: inset 0 0 0 1px var(--pop); background: var(--accent-soft); }
.brief { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 22px; display: grid; gap: 18px; scroll-margin-top: 90px; }
.brief-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 860px) { .brief-cols { grid-template-columns: 1fr; } }
.brief-col { display: grid; gap: 10px; align-content: start; }
.brief-col h3 { display: flex; gap: 8px; align-items: center; }
.step { font-family: var(--font-mono); font-size: 0.72rem; width: 22px; height: 22px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--accent); color: var(--bg); flex: none; }
.brief-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.brief-col li { font-size: 0.93rem; padding-left: 12px; border-left: 2px solid var(--line); }
.brief-col.todo li { border-left-color: var(--up); }
.tag { display: inline-block; font-family: var(--font-mono); font-size: 0.7rem; color: var(--muted); border: 1px solid var(--line); border-radius: 6px; padding: 0 6px; margin-left: 4px; white-space: nowrap; }
.src-note { font-size: 0.82rem; color: var(--muted); border-top: 1px solid var(--line); padding-top: 12px; }
.cta { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; background: var(--accent-soft); border-radius: 12px; padding: 14px 16px; }
.cta a { color: var(--pop); font-weight: 600; }

/* FAQ */
.faq { display: grid; gap: 10px; max-width: 820px; }
.faq details { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.faq summary { cursor: pointer; padding: 14px 16px; font-weight: 600; list-style: none; display: flex; gap: 12px; justify-content: space-between; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--font-mono); color: var(--pop); }
.faq details[open] summary::after { content: "−"; }
.faq .ans { padding: 0 16px 16px; color: var(--muted); display: grid; gap: 8px; }
.linkbtn { background: none; border: 0; padding: 0; color: var(--pop); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* Tax commentary (MIA order) */
.taxc { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 28px; align-items: start; }
@media (max-width: 860px) { .taxc { grid-template-columns: 1fr; } }
.toc { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 76px); background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 14px; display: grid; gap: 8px; }
@media (max-width: 860px) { .toc { position: static; } }
.toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.toc-link { width: 100%; text-align: left; background: none; border: 0; border-radius: 8px; padding: 7px 8px; display: grid; grid-template-columns: 22px 1fr; gap: 2px 8px; font-size: 0.9rem; }
.toc-link:hover { background: var(--accent-soft); }
.toc-n { font-family: var(--font-mono); color: var(--pop); font-weight: 500; grid-row: span 2; }
.toc-c { font-size: 0.75rem; color: var(--muted); }
.taxc-body { display: grid; gap: 34px; min-width: 0; }
.taxc-sec { display: grid; gap: 14px; scroll-margin-top: 90px; }
.taxc-sec > h2 { display: flex; gap: 12px; align-items: baseline; padding-bottom: 10px; border-bottom: 2px solid var(--accent); }
.sec-n { font-family: var(--font-mono); font-size: 1rem; color: var(--bg); background: var(--accent); border-radius: 6px; padding: 2px 9px; flex: none; }
.taxc-item { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; display: grid; gap: 10px; }
.taxc-item h3 { display: flex; gap: 10px; align-items: baseline; }
.item-n { font-family: var(--font-mono); font-size: 0.78rem; color: var(--muted); flex: none; }
.taxc-dl { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 8px 14px; margin: 0; font-size: 0.93rem; }
@media (max-width: 520px) { .taxc-dl { grid-template-columns: 1fr; gap: 2px; } .taxc-dl dd { margin-bottom: 8px; } }
.taxc-dl dt { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); padding-top: 3px; }
.taxc-dl dd { margin: 0; }
.taxc-dl dd.cur { color: var(--muted); }
.eff { display: inline-block; font-family: var(--font-mono); font-size: 0.8rem; background: var(--accent-soft); color: var(--accent); border-radius: 6px; padding: 1px 8px; }
.taxc-dl dd.ktpnote { border-left: 3px solid var(--pop); padding-left: 10px; }
.none { background: var(--surface); border: 1px dashed var(--line); border-radius: 12px; padding: 16px 18px; color: var(--muted); }

[hidden] { display: none !important; }

/* Tax commentary: contents summary table */
.sum-card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 18px 20px 8px; display: grid; gap: 10px; scroll-margin-top: 90px; }
.sum-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.sum-rows { display: grid; min-width: 560px; }
.sum-row { display: grid; grid-template-columns: 40px minmax(180px, 1.1fr) minmax(220px, 2fr) 56px; gap: 14px; align-items: center; text-align: left; background: none; border: 0; border-top: 1px solid var(--line); padding: 12px 6px; font-size: 0.93rem; border-radius: 0; }
.sum-row:not(.sum-head):hover { background: var(--accent-soft); }
.sum-head { border-top: 0; padding-block: 4px 8px; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.sum-head span:last-child, .sum-c { text-align: center; }
.sum-n { font-family: var(--font-mono); font-size: 0.85rem; width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: var(--accent); color: var(--bg); }
.sum-t { font-weight: 600; }
.sum-k { color: var(--muted); }
.sum-c { font-family: var(--font-mono); font-weight: 600; color: var(--pop); font-variant-numeric: tabular-nums; }
.sum-row.empty .sum-n { background: var(--line); color: var(--muted); }
.sum-row.empty .sum-t, .sum-row.empty .sum-k, .sum-c.zero { color: var(--muted); font-weight: 400; }

/* Tax commentary: slim sticky side menu with current-section highlight */
.taxc { grid-template-columns: 210px minmax(0, 1fr); }
.toc { padding: 12px; }
.toc-list { display: grid; gap: 2px; }
.toc-link { grid-template-columns: 24px 1fr; align-items: center; padding: 7px 8px; border-left: 3px solid transparent; border-radius: 0 8px 8px 0; color: var(--fg); }
.toc-n { grid-row: auto; }
.toc-link.empty { color: var(--muted); }
.toc-link[aria-current="true"] { background: var(--accent-soft); border-left-color: var(--pop); font-weight: 600; }
@media (max-width: 860px) { .taxc { grid-template-columns: 1fr; } .toc { display: none; } }
.back-top { justify-self: start; font-size: 0.85rem; }

/* Ask: suggested questions grouped by audience */
.ask-groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 900px) { .ask-groups { grid-template-columns: 1fr; } }
.ask-group { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 14px; display: grid; gap: 8px; align-content: start; }
.ask-group-h { font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pop); }
.ask-qs { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; counter-reset: q; }
.ask-qs li { counter-increment: q; }
.ask-q { width: 100%; text-align: left; display: grid; grid-template-columns: 22px 1fr; gap: 8px; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 9px 10px; font-size: 0.9rem; line-height: 1.4; }
.ask-q::before { content: counter(q); font-family: var(--font-mono); font-size: 0.75rem; color: var(--muted); padding-top: 2px; }
.ask-q:hover { border-color: var(--pop); background: var(--accent-soft); }

/* Footer disclaimer */
footer { display: grid; gap: 12px; }
.foot-disc { display: grid; gap: 6px; border-top: 1px solid var(--line); padding-top: 12px; max-width: 90ch; }
.foot-disc p { margin: 0; font-size: 0.8rem; color: var(--muted); line-height: 1.5; }
.foot-disc .foot-disc-h { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg); }