/* ══════════════════════════════════════════════════════════════════════════
   FREE ESTATE — macro terminal language (ported from body.page-macro / mx5)
   The estate speaks the same Bloomberg-grade terminal dialect as macro.html:
   deep canvas, hairline-precise panels, tabular mono numerals, Inter UI, and a
   regime-rail section-header system. All tokens are SCOPED to body.estate so
   the rest of the site is byte-untouched; theme.css (shared/global) is never
   edited. Colour routes through house vars so dark/light + the zh red/green
   swap propagate at paint. Aesthetic north star: reads in 2 seconds; colour
   spent only on signal.
   ══════════════════════════════════════════════════════════════════════════ */
*{box-sizing:border-box;}
body.estate{
  /* deepened terminal canvas — richer "screen" black, scoped to the estate */
  --bg:#0a0c11; --panel:#14171e; --panel2:#1b1f28;
  /* terminal numeral face — SYSTEM mono stack, no web-font dependency */
  --num:"SF Mono", ui-monospace, "Cascadia Mono", "JetBrains Mono",
        "Roboto Mono", Menlo, Consolas, monospace;
  /* ink ramp — lift BODY copy off the ~40% muted soup; reserve --muted for
     genuine captions only (highest-leverage readability fix, per macro) */
  --ink-1: var(--text);
  --ink-2: color-mix(in srgb, var(--text) 64%, transparent);
  --ink-3: var(--muted);
  /* hairlines + inset surface material */
  --hair: color-mix(in srgb, var(--line) 72%, transparent);
  --hair-strong: var(--line);
  --tile: color-mix(in srgb, var(--panel2) 86%, var(--panel));
  --rule: var(--hair-strong);                    /* legacy alias — section rules */
  --ms: inset 0 1px 0 0 color-mix(in srgb, var(--text) 9%, transparent),
        0 1px 1px rgba(0,0,0,.28), 0 14px 30px -18px rgba(0,0,0,.55);
  /* type scale — the macro 10-step scale (estate prose runs a touch larger:
     --fs-md/15px reading copy since /learn + /blog are long-form) */
  --fs-display:46px; --fs-num-xl:38px; --fs-h1:28px; --fs-num-lg:22px;
  --fs-h2:17px; --fs-md:15px; --fs-body:14px; --fs-h3:14px;
  --fs-sm:12.5px; --fs-label:11px; --fs-micro:10px;
  /* spacing grid (4px) + radii + eyebrow tracking */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px;
  --r-sm:8px; --r-md:10px; --r-lg:14px; --trk:.18em;
  /* the single regime/accent rail on every section header */
  --rail: var(--link);
  --measure: 70ch;                               /* long-form reading line length */
}
html[data-theme="light"] body.estate{
  /* restore the airy light canvas (mirrors macro's light override) */
  --bg:#f6f7fa; --panel:#ffffff; --panel2:#eef1f6;
  --ink-2: color-mix(in srgb, var(--text) 70%, transparent);
  --hair: color-mix(in srgb, var(--line) 90%, transparent);
  --ms: inset 0 1px 0 0 rgba(255,255,255,.7),
        0 1px 2px rgba(20,30,50,.05), 0 14px 30px -20px rgba(20,30,50,.16);
}
html body.estate{
  background:var(--bg); color:var(--ink-1);
  font-family:var(--font-ui); font-size:var(--fs-md); line-height:1.6;
  margin:0; padding:0 0 72px;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
html,body{overflow-x:clip;}                                 /* 390px bleed guard */
body.estate a{color:var(--link); text-decoration:none;}
body.estate a:hover{text-decoration:underline; text-underline-offset:3px;}
.mono,body.estate .mono{font-family:var(--num); font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;}
.est-wrap{max-width:1120px; margin:0 auto; padding:0 24px;}

/* ── the section-header signature: the REGIME RAIL ──────────────────────────
   Every section title in the estate wears the macro rail — a 3px gradient bar
   before a strong sentence-case title, a mono eyebrow above, a hairline rule to
   the edge. This single shared rhythm is the motif that unifies hub, calculator
   and article (it replaces the old plotted-line underline). Applied to the
   estate section-header classes below. */
.est-sec-rule{border:none; height:1px; background:var(--hair-strong); margin:0;}

/* ── glyph family (.egl) — bespoke per-calculator line-art, macro idiom ──────
   Hairline strokes, monochrome + one --link accent, draw-on reveal. Geometry
   lives in _estate_glyphs.html.j2; styling is here so both variants share it. */
.egl{color:var(--ink-2); overflow:visible;}
.egl [class^="egl-"], .egl [class*=" egl-"]{
  stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke;}
.egl path.egl-still, .egl path.egl-draw, .egl path.egl-draw2,
.egl path.egl-mark, .egl path.egl-up, .egl path.egl-down{fill:none;}
.egl .egl-still{stroke:var(--ink-3); stroke-width:1.5; opacity:.6;}
.egl .egl-still-dot{fill:var(--ink-3); opacity:.7;}
.egl .egl-draw, .egl .egl-draw2{stroke:var(--ink-1); stroke-width:1.7;}
.egl .egl-fill{fill:color-mix(in srgb,var(--ink-2) 22%,transparent);
  stroke:var(--ink-2); stroke-width:1.4;}
/* the single accent — the --link mark (node, arrow, cap, ramp arc) */
.egl .egl-mark, .egl .egl-mark-dot, .egl .egl-draw-fill{stroke:var(--link);}
.egl .egl-mark{stroke-width:1.7;}
.egl .egl-mark-dot{fill:var(--link); stroke:none;}
.egl .egl-draw-fill{fill:color-mix(in srgb,var(--link) 22%,transparent); stroke-width:1.5;}
.egl .egl-up{stroke:var(--up); stroke-width:1.7;}
.egl .egl-down{stroke:var(--down); stroke-width:1.7;}
.egl .egl-down-dot{fill:var(--down); stroke:none;}
/* draw-on-reveal ink (traced lines) */
.egl .egl-draw, .egl .egl-draw2{stroke-dasharray:120; stroke-dashoffset:120;
  animation:eglDraw 1000ms cubic-bezier(.33,.62,.26,1) 140ms forwards;}
.egl .egl-draw2{animation-delay:260ms;}
.egl .egl-mark-dot, .egl .egl-down-dot{opacity:0;
  animation:eglPop .01s linear 1140ms forwards;}
@keyframes eglDraw{to{stroke-dashoffset:0;}}
@keyframes eglPop{to{opacity:1;}}
@media (prefers-reduced-motion:reduce){
  .egl .egl-draw, .egl .egl-draw2{animation:none; stroke-dashoffset:0;}
  .egl .egl-mark-dot, .egl .egl-down-dot{animation:none; opacity:1;}
}

/* ── estate top bar (slim; own toggles reuse house .theme-switch/.lang-toggle) ── */
.est-bar{position:sticky; top:0; z-index:60; background:color-mix(in srgb,var(--bg) 84%,transparent);
  -webkit-backdrop-filter:saturate(180%) blur(16px); backdrop-filter:saturate(180%) blur(16px);
  border-bottom:1px solid var(--line);}
.est-bar-in{max-width:1120px; margin:0 auto; padding:9px 24px;
  display:flex; align-items:center; gap:16px;}
.est-brand{display:inline-flex; align-items:center; gap:9px; flex:none; text-decoration:none;
  padding:3px 8px 3px 4px; border-radius:10px; transition:background .18s;}
.est-brand:hover{background:color-mix(in srgb,var(--link) 10%,transparent); text-decoration:none;}
.est-brand .glyph{width:26px; height:26px; flex:none; filter:drop-shadow(0 2px 6px rgba(40,56,128,.30));}
.est-brand .word{font-family:var(--font-ui); font-weight:900; font-size:13px; letter-spacing:.06em;
  color:var(--text); white-space:nowrap;}
.est-brand .word .sub{display:block; font-weight:600; font-size:9px; letter-spacing:.14em;
  color:var(--muted); margin-top:1px;}
.est-nav{display:flex; align-items:center; gap:2px; margin-left:6px; flex-wrap:wrap; min-width:0;}
.est-nav a{font-family:var(--font-ui); font-size:13.5px; font-weight:500; color:var(--muted);
  padding:6px 10px; border-radius:8px; text-decoration:none; white-space:nowrap;
  transition:color .16s,background .16s;}
.est-nav a:hover,.est-nav a[aria-current="page"]{color:var(--text);
  background:color-mix(in srgb,var(--link) 11%,var(--panel2)); text-decoration:none;}
.est-ctrls{margin-left:auto; display:flex; align-items:center; gap:9px; flex:none;}
.est-ctrls .est-cta{font-family:var(--font-ui);}
.est-ctrls .est-cta .cta-short{display:none;}
/* the house animated toggles are styled by theme.css? No — those visuals live in
   nav CSS the estate doesn't load. Give .theme-switch / .lang-toggle a compact,
   self-contained skin here so the class-bound theme.js listeners still fire. */
.est-ctrls .theme-switch{font:600 12px/1 var(--font-ui); cursor:pointer;
  border:1px solid var(--gbtn-brd); background:var(--gbtn-bg); color:var(--muted);
  border-radius:999px; padding:6px 10px; display:inline-flex; align-items:center; gap:5px;
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); transition:color .16s,border-color .16s;}
.est-ctrls .theme-switch:hover{color:var(--text); border-color:var(--gbtn-brd-hover);}
.est-ctrls .theme-switch .ic{font-size:13px; line-height:1;}
.est-ctrls .theme-switch .sun{display:none;} .est-ctrls .theme-switch .moon{display:inline;}
html[data-theme="light"] .est-ctrls .theme-switch .sun{display:inline;}
html[data-theme="light"] .est-ctrls .theme-switch .moon{display:none;}
.est-ctrls .theme-switch .knob{display:none;}
.est-ctrls .lang-toggle{position:relative; display:inline-flex; cursor:pointer; user-select:none;
  border:1px solid var(--gbtn-brd); background:var(--gbtn-bg); border-radius:999px; overflow:hidden;
  font:600 11.5px/1 var(--font-ui);}
.est-ctrls .lang-toggle .opt{padding:6px 9px; color:var(--muted); transition:color .16s;}
.est-ctrls .lang-toggle .pill{display:none;}
html:not([data-lang="zh"]) .est-ctrls .lang-toggle .en-opt{color:var(--text);
  background:color-mix(in srgb,var(--link) 16%,transparent);}
html[data-lang="zh"] .est-ctrls .lang-toggle .zh-opt{color:var(--text);
  background:color-mix(in srgb,var(--link) 16%,transparent);}
:where(.est-brand,.est-nav a,.est-ctrls .theme-switch,.est-ctrls .lang-toggle,.est-cta):focus-visible{
  outline:2px solid color-mix(in srgb,var(--link) 70%,transparent); outline-offset:2px;}
@media (max-width:720px){
  .est-bar-in{flex-wrap:wrap; gap:8px 12px; padding:8px 16px;}
  .est-nav{order:3; width:100%; margin-left:0; gap:1px;}
  .est-nav a{padding:6px 9px; font-size:13px;}
  .est-ctrls{gap:7px;}
  /* compact CTA on phones: hide the long label, show the short bilingual one */
  .est-ctrls .est-cta .cta-long{display:none;}
  .est-ctrls .est-cta .cta-short{display:inline;}
}

/* ── breadcrumb ─────────────────────────────────────────────────────────────── */
.est-crumb{max-width:1120px; margin:18px auto 0; padding:0 24px;
  font-family:var(--font-ui); font-size:12.5px; color:var(--muted);}
.est-crumb ol{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; align-items:center; gap:7px;}
.est-crumb a{color:var(--muted);} .est-crumb a:hover{color:var(--text);}
.est-crumb .sep{opacity:.4;}
.est-crumb li[aria-current="page"]{color:var(--text);}

/* ── shared prose vocabulary (CONTRACT §4 body classes) — terminal, not serif ── */
.est-prose{font-size:var(--fs-md); line-height:1.72; color:var(--ink-1);}
.est-prose > *{max-width:var(--measure);}
/* h2 wears the REGIME RAIL — the estate-wide section signature. A 3px gradient
   bar leads a strong sentence-case title with a hairline rule to the edge; the
   mono "01/02" mark sits after the rail. This is the macro header idiom. */
.est-prose h2{font-family:var(--font-ui); font-size:calc(var(--fs-h2) + 4px); font-weight:700;
  line-height:1.28; letter-spacing:-.01em; margin:38px 0 14px; scroll-margin-top:76px;
  display:flex; align-items:center; gap:11px; padding:0 0 var(--sp-3);
  border-bottom:1px solid var(--hair-strong);}
.est-prose h2::before{content:""; flex:none; align-self:center; width:3px; height:19px;
  border-radius:2px; background:linear-gradient(180deg, var(--rail),
    color-mix(in srgb, var(--rail) 35%, transparent));}
.est-prose h2 .est-h2-mark{font-family:var(--num); font-variant-numeric:tabular-nums;
  font-size:12px; font-weight:700; letter-spacing:.04em; color:var(--ink-3); flex:none;}
html[data-lang="zh"] .est-prose h2{letter-spacing:0;}
.est-prose h3{font-family:var(--font-ui); font-size:var(--fs-md); font-weight:700;
  margin:26px 0 6px; color:var(--ink-1); letter-spacing:-.005em;}
.est-prose p{margin:12px 0; color:var(--ink-1);}
.est-prose ul,.est-prose ol{margin:12px 0; padding-left:24px;}
.est-prose li{margin:7px 0;}
.est-prose li::marker{color:var(--ink-3);}
.est-prose strong{font-weight:700; color:var(--ink-1);}
.est-prose em{font-style:italic;}
.est-prose code{font-family:var(--num); font-size:.88em; background:var(--panel2);
  border:1px solid var(--hair-strong); border-radius:5px; padding:1px 6px;}
.est-prose a{border-bottom:1px solid color-mix(in srgb,var(--link) 40%,transparent); text-decoration:none;}
.est-prose a:hover{border-bottom-color:var(--link); text-decoration:none;}
.est-prose blockquote{margin:18px 0; padding:4px 0 4px 20px; border-left:3px solid var(--rail);
  color:var(--ink-1); font-style:italic; opacity:.94;}

/* callouts — lead / warn / key (house colours, mono heading label) */
.est-prose .callout{border-radius:var(--r-md); padding:15px 18px; margin:18px 0;
  border:1px solid var(--hair-strong); background:var(--panel2); position:relative; max-width:var(--measure);}
.est-prose .callout .co-h{display:block; margin-bottom:4px; font-family:var(--num);
  font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;}
.est-prose .callout p{margin:6px 0;} .est-prose .callout > :first-child.co-h + p{margin-top:0;}
.est-prose .callout.lead{border-left:4px solid var(--link);}
.est-prose .callout.lead .co-h{color:var(--link);}
.est-prose .callout.warn{border-left:4px solid var(--warn);
  background:color-mix(in srgb,var(--warn) 8%,var(--panel2));}
.est-prose .callout.warn .co-h{color:var(--warn);}
.est-prose .callout.key{border-left:4px solid var(--ok);
  background:color-mix(in srgb,var(--ok) 9%,var(--panel2));}
.est-prose .callout.key .co-h{color:var(--ok);}

/* formula — the desk's chalk line. Mono, on a faint tile with an accent edge. */
.est-prose .formula{font-family:var(--num); font-variant-numeric:tabular-nums;
  font-size:var(--fs-md); line-height:1.7; background:var(--tile);
  border:1px solid var(--hair-strong); border-left:3px solid var(--rail);
  border-radius:var(--r-md); padding:16px 18px; margin:18px 0; overflow-x:auto;
  max-width:var(--measure); color:var(--ink-1); letter-spacing:.005em;}
.est-prose .formula strong{color:var(--link); font-weight:700;}

/* worked example — a machined tile with a mono heading + top hairline. */
.est-prose .worked{border:1px solid var(--hair-strong); border-radius:var(--r-md); margin:18px 0;
  padding:16px 18px; max-width:var(--measure); box-shadow:var(--ms);
  background:linear-gradient(var(--hair-strong),var(--hair-strong)) 0 0/100% 1px no-repeat, var(--panel);}
.est-prose .worked .co-h{display:block; margin-bottom:6px; font-family:var(--num);
  font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3);}
.est-prose .worked .num,.est-prose .worked code{font-family:var(--num); font-variant-numeric:tabular-nums;}

/* data table — the terminal ruled column (mono body, mono caps head) */
.est-prose table.data{border-collapse:collapse; width:100%; max-width:var(--measure);
  font-family:var(--num); font-variant-numeric:tabular-nums; font-size:var(--fs-sm); margin:18px 0;}
.est-prose table.data th{text-align:left; padding:9px 12px; background:var(--panel2);
  color:var(--ink-3); font-family:var(--num); font-weight:700; font-size:var(--fs-micro);
  letter-spacing:.08em; text-transform:uppercase; border-bottom:1px solid var(--hair-strong);}
.est-prose table.data td{padding:8px 12px; border-bottom:1px solid var(--hair); vertical-align:top; color:var(--ink-1);}
.est-prose table.data tr:hover td{background:color-mix(in srgb,var(--link) 6%,transparent);}
.est-prose table.data .num{font-variant-numeric:tabular-nums; white-space:nowrap; text-align:right;}
.est-tbl-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch; margin:18px 0; max-width:var(--measure);}
.est-tbl-scroll table.data{margin:0;}

.est-prose figure{margin:20px 0; max-width:var(--measure);}
.est-prose figcaption{font-family:var(--num); font-size:var(--fs-sm); color:var(--ink-3); margin-top:8px;}

/* ── related rail + CTA (shared by article + calculator layouts) ────────────── */
.est-related{margin:34px 0 0; padding:20px 0 0; border-top:1px solid var(--hair-strong);}
.est-related .rel-h{font-family:var(--num); font-size:var(--fs-label); font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-3); margin:0 0 12px;}
.est-related .rel-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:12px;}
.est-relcard{display:block; border:1px solid var(--hair-strong); border-radius:var(--r-md); padding:13px 15px;
  background:var(--panel); box-shadow:var(--ms); text-decoration:none;
  transition:transform .18s,border-color .18s,box-shadow .18s;}
.est-relcard:hover{transform:translateY(-2px); border-color:color-mix(in srgb,var(--link) 45%,var(--hair-strong));
  box-shadow:0 14px 30px -18px color-mix(in srgb,var(--link) 40%,transparent); text-decoration:none;}
.est-relcard .rc-kind{font-family:var(--num); font-size:var(--fs-micro); letter-spacing:.09em;
  text-transform:uppercase; color:var(--link);}
.est-relcard .rc-title{display:block; margin-top:4px; font-family:var(--font-ui); font-size:var(--fs-md);
  font-weight:700; color:var(--ink-1); line-height:1.32; letter-spacing:-.005em;}

.est-cta-block{margin:32px 0 0; border:1px solid color-mix(in srgb,var(--link) 30%,var(--hair-strong));
  border-radius:var(--r-lg); padding:22px 24px; background:
    radial-gradient(120% 140% at 0% 0%, color-mix(in srgb,var(--link) 10%,transparent), transparent 60%),
    var(--panel); box-shadow:var(--ms); display:flex; align-items:center; gap:18px; flex-wrap:wrap;}
.est-cta-block .cta-copy{flex:1 1 260px; min-width:0;}
.est-cta-block .cta-k{font-family:var(--num); font-size:var(--fs-label); letter-spacing:.08em;
  text-transform:uppercase; color:var(--link);}
.est-cta-block .cta-t{font-family:var(--font-ui); font-size:calc(var(--fs-h2) + 1px); font-weight:700;
  margin:3px 0 0; line-height:1.3; letter-spacing:-.01em; color:var(--ink-1);}
.est-cta-block .gbtn{flex:none; font-family:var(--font-ui);}

/* ── estate footer ──────────────────────────────────────────────────────────── */
.est-footer{max-width:1120px; margin:56px auto 0; padding:24px 24px 8px;
  border-top:1px solid var(--hair-strong); font-family:var(--font-ui);}
.est-foot-links{display:flex; flex-wrap:wrap; gap:6px 22px; margin-bottom:14px;}
.est-foot-col{display:flex; flex-direction:column; gap:5px; min-width:150px;}
.est-foot-col .fh{font-family:var(--num); font-size:var(--fs-label); font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-3); margin-bottom:3px;}
.est-foot-col a{font-size:var(--fs-sm); color:var(--ink-2); text-decoration:none;}
.est-foot-col a:hover{color:var(--ink-1);}
.est-foot-disc{font-size:var(--fs-sm); color:var(--ink-3); line-height:1.6;
  border-top:1px solid var(--hair-strong); padding-top:13px; margin-top:6px;}
.est-foot-disc .mono{opacity:.85;}

/* ── page header — the estate hero: mono kicker + terminal title + dek ────────
   The plotted-line signature is retired (the regime rail is the new motif);
   .est-kicker-plot / .plot-line are hidden so the inlined SVGs collapse cleanly
   without touching every template. The eyebrow now wears a short accent rule. */
.plot-line, .est-kicker-plot{display:none !important;}
.est-head{max-width:1120px; margin:20px auto 0; padding:0 24px;}
.est-kicker{font-family:var(--num); font-size:var(--fs-label); font-weight:700; letter-spacing:var(--trk);
  text-transform:uppercase; color:var(--link); display:inline-flex; align-items:center; gap:9px;
  margin:0 0 12px;}
.est-kicker::before{content:""; width:22px; height:2px; border-radius:1px;
  background:linear-gradient(90deg, var(--link), color-mix(in srgb,var(--link) 20%,transparent));}
.est-title{font-family:var(--font-ui); font-size:clamp(28px,4.4vw,var(--fs-display)); font-weight:800;
  line-height:1.06; letter-spacing:-.025em; margin:0; color:var(--ink-1);}
html[data-lang="zh"] .est-title{letter-spacing:-.01em;}
.est-dek{font-family:var(--font-ui); font-size:calc(var(--fs-h2) + 1px); line-height:1.5; color:var(--ink-2);
  margin:14px 0 0; max-width:62ch;}
.est-meta{font-family:var(--num); font-size:var(--fs-sm); color:var(--ink-3); margin:16px 0 0;
  display:flex; flex-wrap:wrap; gap:6px 14px; align-items:center;}
.est-meta .dot{opacity:.4;}

@media (max-width:600px){
  html body.estate{font-size:var(--fs-body);}
  .est-wrap,.est-head,.est-crumb,.est-footer{padding-left:16px; padding-right:16px;}
  .est-prose{font-size:var(--fs-md);}
  .est-prose h2{font-size:var(--fs-h2); margin:30px 0 10px;}
  .est-prose h3{font-size:var(--fs-body);}
  .est-dek{font-size:var(--fs-md);}
  .est-cta-block{padding:18px; gap:14px;}
}

  .cx-head{max-width:1120px; margin:20px auto 0; padding:0 24px;}
  .cx-shell{max-width:1120px; margin:22px auto 0; padding:0 24px;
    display:grid; grid-template-columns:minmax(0,1fr) 210px; gap:44px; align-items:start;}
  .cx-main{min-width:0;}
  .cx-toc{position:sticky; top:76px; font-family:var(--font-ui); font-size:var(--fs-sm);
    border-left:1px solid var(--hair-strong); padding-left:15px;}
  .cx-toc .toc-h{font-family:var(--num); font-size:var(--fs-micro); letter-spacing:.13em;
    text-transform:uppercase; color:var(--ink-3); margin:0 0 9px;}
  .cx-toc a{display:block; color:var(--ink-2); padding:5px 0 5px 14px; margin-left:-15px; line-height:1.35;
    border-left:2px solid transparent; transition:color .15s,border-color .15s;}
  .cx-toc a:hover{color:var(--ink-1);} .cx-toc a.active{color:var(--ink-1); border-left-color:var(--link); font-weight:700;}

  /* ── the calculator card — the desk instrument, above the fold ──────────────
     A machined terminal panel (hairline frame, inset top edge, house shadow)
     crowned by the calculator's OWN glyph so it reads as one family with the
     hub card that led here. */
  .calc-card{position:relative; border:1px solid var(--hair-strong); border-radius:var(--r-lg);
    background:var(--panel); box-shadow:var(--ms); padding:18px 22px 22px; overflow:hidden;}
  .calc-card::before{content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
    background:linear-gradient(180deg, var(--rail), color-mix(in srgb,var(--rail) 20%,transparent));}
  /* the crown row: a mono eyebrow + the per-calculator glyph */
  .calc-card .cc-crown{display:flex; align-items:center; justify-content:space-between; gap:12px;
    margin:0 0 14px; padding:0 0 12px; border-bottom:1px solid var(--hair);}
  .calc-card .cc-eyebrow{font-family:var(--num); font-size:var(--fs-label); font-weight:700;
    letter-spacing:var(--trk); text-transform:uppercase; color:var(--ink-3);}
  .calc-card .cc-glyph{flex:none; width:72px; height:40px;}
  .calc-card .cc-lede{font-family:var(--font-ui); font-size:var(--fs-md); color:var(--ink-2); margin:0 0 16px; line-height:1.5;}

  .calc-in{display:grid; grid-template-columns:repeat(2,1fr); gap:14px 18px;}
  @media (max-width:560px){ .calc-in{grid-template-columns:1fr;} }
  .ci{display:flex; flex-direction:column; gap:6px; min-width:0;}
  .ci.ci-wide{grid-column:1 / -1;}
  .ci-l{font-family:var(--font-ui); font-size:var(--fs-sm); font-weight:600; color:var(--ink-2); letter-spacing:.005em;}
  .ci-l .hint{font-weight:400; color:var(--ink-3);}
  .ci input, .ci select{font-family:var(--num); font-size:16px; font-variant-numeric:tabular-nums;
    background:var(--tile); border:1px solid var(--hair-strong); border-radius:var(--r-md); color:var(--ink-1);
    padding:11px 13px; width:100%; outline:none; transition:border-color .16s,box-shadow .16s;}
  .ci input:focus, .ci select:focus{border-color:var(--link);
    box-shadow:0 0 0 3px color-mix(in srgb,var(--link) 20%,transparent);}
  .ci input::placeholder{color:var(--ink-3); opacity:.7;}

  /* segmented toggle (§6) — long/short, forward/inverse, etc. */
  .ci-seg{display:inline-flex; background:var(--tile); border:1px solid var(--hair-strong); border-radius:var(--r-md);
    padding:3px; gap:3px; align-self:start;}
  .ci-seg button{font-family:var(--font-ui); font-size:var(--fs-sm); font-weight:600; color:var(--ink-3);
    background:transparent; border:none; border-radius:7px; padding:8px 16px; cursor:pointer;
    transition:color .16s,background .16s;}
  .ci-seg button:hover{color:var(--ink-1);}
  .ci-seg button.on{color:var(--ink-1); background:color-mix(in srgb,var(--link) 18%,var(--panel2));}
  .ci-seg button:focus-visible{outline:2px solid var(--link); outline-offset:2px;}

  /* ── the readout — the terminal signature: a big mono-tabular number ──────── */
  .calc-out{margin:20px 0 0; padding:18px 20px; border-radius:var(--r-md); border:1px solid var(--hair-strong);
    border-left:3px solid var(--rail); background:var(--panel2);}
  .co-main{display:flex; align-items:baseline; gap:9px; flex-wrap:wrap;}
  .co-main #out-main, .co-main [data-out-main]{font-family:var(--num); font-variant-numeric:tabular-nums;
    font-feature-settings:"tnum" 1; font-size:clamp(var(--fs-num-xl),7vw,52px); font-weight:800; line-height:1;
    letter-spacing:-.02em; color:var(--ink-1);}
  .co-main .co-unit{font-family:var(--font-ui); font-size:var(--fs-md); font-weight:600; color:var(--ink-3);}
  /* Law 3: the big number ALWAYS carries a plain-word interpretation sentence */
  .co-plain{font-family:var(--font-ui); font-size:var(--fs-md); line-height:1.5; color:var(--ink-1); margin:10px 0 0; max-width:60ch;}
  .co-plain.warn{color:var(--warn);}
  .co-rows{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px 20px;
    margin:16px 0 0; padding-top:14px; border-top:1px solid var(--hair);}
  .co-rows > div{display:flex; flex-direction:column; gap:2px;}
  .co-rows dt{font-family:var(--num); font-size:var(--fs-label); color:var(--ink-3); letter-spacing:.04em; text-transform:uppercase;}
  .co-rows dd{font-family:var(--num); font-variant-numeric:tabular-nums; font-size:var(--fs-num-lg); font-weight:800;
    color:var(--ink-1); margin:0; line-height:1.1;}
  .co-rows dd.pos{color:var(--up);} .co-rows dd.neg{color:var(--down);}

  .calc-actions{margin:16px 0 0; display:flex; gap:10px; align-items:center; flex-wrap:wrap;}
  .calc-actions .copied{font-family:var(--font-ui); font-size:var(--fs-sm); color:var(--ok); opacity:0;
    transition:opacity .2s;}
  .calc-actions .copied.show{opacity:1;}
  .calc-actions .gbtn{font-family:var(--font-ui);}

  .cx-explainer{margin:40px 0 0;}
  @media (max-width:900px){
    .cx-shell{grid-template-columns:1fr; gap:12px;}
    .cx-toc{position:static; top:auto; border-left:none; padding:12px 14px; margin:22px 0 2px; order:2;
      display:flex; flex-wrap:wrap; gap:6px; border:1px solid var(--hair-strong); border-radius:var(--r-md); background:var(--panel2);}
    .cx-toc .toc-h{flex-basis:100%; margin:0 0 2px;}
    .cx-toc a{border:1px solid var(--hair-strong); border-radius:999px; padding:6px 11px; margin:0; color:var(--ink-2);}
    .cx-toc a.active{border-color:var(--link); color:var(--ink-1);}
    .cx-main{order:1;}
  }
  @media (max-width:560px){ .calc-card{padding:16px 16px 18px;} }