/* =============================================================================
   ALXEVT scaffold stylesheet.
   Part 1  tokens and the seven variant axes
   Part 2  base and the sales anatomy
   Part 3  the explainer apparatus
   Part 4  the tool instrument
   Nothing is inline: style-src is 'self'.
   ============================================================================= */

:root {
  --ground:#ffffff; --ink:#101014; --ink-soft:#4a4a55; --accent:#2f4bff;
  --accent-ink:#ffffff; --panel:#f5f5f7; --line:#dcdce3;
  --ff-display: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --ff-sub: var(--ff-display);
  --ff-body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --ff-label: ui-monospace, SFMono-Regular, Menlo, monospace;
  --fw-display:700; --stretch-display:normal; --tr-display:-0.02em;
  --tr-label:0.08em; --lh-display:1.05;
  --r-panel:12px; --r-btn:10px; --border:1px solid var(--line); --shadow:none; --panel-cut:0;
  --dur:620ms; --ease:cubic-bezier(.22,.61,.36,1);
  --measure:68ch; --pad-x:clamp(1.25rem,5vw,5rem); --gap-s:clamp(3.5rem,9vw,8rem);
  --surface:none; --surface-size:auto; --tx:0px; --ty:0px;
  --ok:#2e7d32; --warn:#b26a00; --bad:#b3261e;
}

[data-palette="ink-on-paper"]   { --ground:#faf8f4; --ink:#14130f; --ink-soft:#55524a; --accent:#c0341a; --accent-ink:#fff; --panel:#f2efe8; --line:#ddd8cd; }
[data-palette="night-neon"]     { --ground:#0b0d12; --ink:#eef1f7; --ink-soft:#9aa3b5; --accent:#8ef04a; --accent-ink:#0b0d12; --panel:#151923; --line:#252b39; }
[data-palette="warm-earth"]     { --ground:#efe6d9; --ink:#33251a; --ink-soft:#6b5748; --accent:#a4522c; --accent-ink:#fff; --panel:#e4d6c3; --line:#cfbda6; }
[data-palette="cold-steel"]     { --ground:#151a20; --ink:#f2f6fa; --ink-soft:#9fb0c0; --accent:#3ad4e6; --accent-ink:#0d1116; --panel:#1e252e; --line:#2f3a46; }
[data-palette="duotone-split"]  { --ground:#141034; --ink:#f6f2ff; --ink-soft:#c2b9e4; --accent:#ffbe3d; --accent-ink:#241a00; --panel:#1e1849; --line:#3b3178; }
[data-palette="high-key-pastel"]{ --ground:#fdfdff; --ink:#1b1b2a; --ink-soft:#5c5c75; --accent:#5b3df5; --accent-ink:#fff; --panel:#eef0ff; --line:#dcdff5; }
[data-palette="mono-accent"]    { --ground:#ffffff; --ink:#0a0a0a; --ink-soft:#5a5a5a; --accent:#ff3b1f; --accent-ink:#fff; --panel:#f0f0f0; --line:#d6d6d6; }
[data-palette="paper-ink"]      { --ground:#f7f4ee; --ink:#191714; --ink-soft:#57524a; --accent:#1f5f8b; --accent-ink:#fff; --panel:#efeae1; --line:#d8d1c4; }
[data-palette="slate-oxide"]    { --ground:#1c1f22; --ink:#e8eaec; --ink-soft:#a2a8ad; --accent:#c9622e; --accent-ink:#fff; --panel:#24282c; --line:#343a3f; }

/* Impact and Haettenschweiler are deliberately absent: they caused an unreadable
   card heading in production, and no fallback rescues a face illegible at 1.1rem. */
[data-type="grotesk-mono"]  { --ff-display:"Helvetica Neue",Inter,ui-sans-serif,system-ui,sans-serif; --ff-body:ui-sans-serif,system-ui,sans-serif; --ff-label:ui-monospace,Menlo,monospace; --fw-display:800; --tr-display:-.035em; }
[data-type="serif-sans"]    { --ff-display:"Iowan Old Style",Georgia,"Times New Roman",serif; --ff-body:ui-sans-serif,system-ui,sans-serif; --ff-label:ui-sans-serif,system-ui,sans-serif; --fw-display:700; --tr-display:-.01em; --lh-display:1.1; }
[data-type="condensed-lead"]{ --ff-display:"Arial Narrow","Helvetica Neue",system-ui,sans-serif; --ff-sub:ui-sans-serif,system-ui,sans-serif; --ff-body:ui-sans-serif,system-ui,sans-serif; --ff-label:ui-monospace,Menlo,monospace; --fw-display:700; --stretch-display:condensed; --tr-display:-.015em; --lh-display:1 }
[data-type="slab-geometric"]{ --ff-display:Rockwell,"Roboto Slab",Georgia,serif; --ff-body:Futura,"Century Gothic",ui-sans-serif,sans-serif; --ff-label:ui-monospace,monospace; --fw-display:700; }
[data-type="system-neutral"]{ --ff-display:system-ui,sans-serif; --ff-body:system-ui,sans-serif; --ff-label:system-ui,sans-serif; --fw-display:800; --tr-display:-.03em; }
[data-type="display-narrow"]{ --ff-display:"Avenir Next Condensed","Arial Narrow",sans-serif; --ff-sub:ui-sans-serif,system-ui,sans-serif; --ff-body:ui-sans-serif,system-ui,sans-serif; --ff-label:ui-sans-serif,sans-serif; --fw-display:700; --stretch-display:condensed; --tr-label:.22em; }
[data-type="mono-only"]     { --ff-display:ui-monospace,SFMono-Regular,Menlo,monospace; --ff-body:ui-monospace,SFMono-Regular,Menlo,monospace; --ff-label:ui-monospace,monospace; --fw-display:700; --tr-display:-.02em; --measure:62ch; }

[data-shape="sharp-0"]       { --r-panel:0; --r-btn:0; }
[data-shape="soft-24"]       { --r-panel:24px; --r-btn:16px; }
[data-shape="pill-999"]      { --r-panel:4px; --r-btn:999px; }
[data-shape="mixed-cut"]     { --r-panel:0; --r-btn:0; --panel-cut:22px; }
[data-shape="hairline-frame"]{ --r-panel:2px; --r-btn:2px; --panel:transparent; --border:1px solid var(--line); }
[data-shape="blocky-shadow"] { --r-panel:0; --r-btn:0; --shadow:6px 6px 0 var(--ink); }
[data-shape="mixed-cut"] .bento > *,[data-shape="mixed-cut"] .benefits > *,
[data-shape="mixed-cut"] .tiers > * { clip-path: polygon(0 0,100% 0,100% calc(100% - var(--panel-cut)),calc(100% - var(--panel-cut)) 100%,0 100%); }

[data-texture="grid-lines"] body   { --surface: repeating-linear-gradient(0deg, color-mix(in srgb, var(--line) 55%, transparent) 0 1px, transparent 1px 72px), repeating-linear-gradient(90deg, color-mix(in srgb, var(--line) 55%, transparent) 0 1px, transparent 1px 72px); }
[data-texture="dot-matrix"] body   { --surface: radial-gradient(color-mix(in srgb, var(--line) 90%, transparent) 1px, transparent 1.2px); --surface-size: 22px 22px; }
[data-texture="gradient-mesh"] body{ --surface: radial-gradient(60vw 60vw at 12% -10%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 70%), radial-gradient(50vw 50vw at 95% 30%, color-mix(in srgb, var(--accent) 11%, transparent), transparent 70%); }
[data-texture="grain-noise"] body  { --surface: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E"); }
[data-texture="glass-blur"] .bento > *,[data-texture="glass-blur"] .benefits > *,
[data-texture="glass-blur"] .nav__in { backdrop-filter: blur(14px); background: color-mix(in srgb, var(--panel) 62%, transparent); }

@media (prefers-reduced-motion: no-preference) {
  .reveal { transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), clip-path var(--dur) var(--ease); transition-delay: calc(var(--i,0) * 55ms); }
  [data-motion="fade-rise"]     .reveal { opacity:0; transform:translateY(16px); }
  [data-motion="scale-settle"]  .reveal { opacity:0; transform:scale(.965); }
  [data-motion="slide-lateral"] .reveal { opacity:0; transform:translateX(-28px); }
  [data-motion="slide-lateral"] .s:nth-of-type(even) .reveal,
  [data-motion="slide-lateral"] .bento > :nth-child(even) { transform:translateX(28px); }
  [data-motion="mask-wipe"]     .reveal { opacity:0; clip-path:inset(0 0 100% 0); }
  .reveal.is-in { opacity:1; transform:none; clip-path:inset(0 0 0 0); }
}
[data-motion="none-static"] .reveal { opacity:1 !important; transform:none !important; clip-path:none !important; }

main { display:flex; flex-direction:column; }
#hero { order:0 } #cta-final { order:90 }
[data-rhythm="classic"]     #problem{order:10} [data-rhythm="classic"]     #solution{order:20} [data-rhythm="classic"]     #features{order:30} [data-rhythm="classic"]     #proof{order:40} [data-rhythm="classic"]     #offer{order:50} [data-rhythm="classic"]     #faq{order:60}
[data-rhythm="proof-early"] #proof{order:10}   [data-rhythm="proof-early"] #problem{order:20}  [data-rhythm="proof-early"] #solution{order:30} [data-rhythm="proof-early"] #features{order:40} [data-rhythm="proof-early"] #offer{order:50} [data-rhythm="proof-early"] #faq{order:60}
[data-rhythm="offer-early"] #solution{order:10}[data-rhythm="offer-early"] #offer{order:20}    [data-rhythm="offer-early"] #problem{order:30}  [data-rhythm="offer-early"] #features{order:40} [data-rhythm="offer-early"] #proof{order:50} [data-rhythm="offer-early"] #faq{order:60}
[data-archetype="explainer"] main > *, [data-archetype="tool"] main > *, [data-archetype="data"] main > * { order:0 }

*,*::before,*::after { box-sizing:border-box }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto } }
body { margin:0; background-color:var(--ground); background-image:var(--surface);
  background-size:var(--surface-size); background-attachment:fixed; color:var(--ink);
  font-family:var(--ff-body); font-size:clamp(1rem,.55vw + .9rem,1.125rem);
  line-height:1.6; text-rendering:optimizeLegibility; }
h1,h2 { font-family:var(--ff-display); font-weight:var(--fw-display); font-stretch:var(--stretch-display);
  letter-spacing:var(--tr-display); line-height:var(--lh-display); margin:0 0 .5em }
h1 { font-size:clamp(2.6rem,6.6vw,5rem) }
h2 { font-size:clamp(1.7rem,3.4vw,2.7rem) }
h3 { font-family:var(--ff-sub); font-weight:700; font-size:1.1rem; letter-spacing:0; line-height:1.3; margin:.1rem 0 .5rem }
p { margin:0 0 1em; max-width:var(--measure) }
a { color:inherit }
code,kbd { font-family:var(--ff-label); font-size:.92em }
.eyebrow,.trust,.sticky__txt { font-family:var(--ff-label); font-size:.78rem; letter-spacing:var(--tr-label); text-transform:uppercase; color:var(--ink-soft) }
.lede { font-size:1.15em; color:var(--ink-soft) }
.skip { position:absolute; left:-9999px }
.skip:focus { left:1rem; top:1rem; z-index:99; background:var(--accent); color:var(--accent-ink); padding:.6rem 1rem }
:focus-visible { outline:3px solid var(--accent); outline-offset:3px }
.s { padding:var(--gap-s) var(--pad-x); scroll-margin-top:5rem }
.s--hero { padding-top:clamp(5rem,12vh,8rem); padding-bottom:clamp(4rem,10vw,7rem) }

.nav { position:sticky; top:0; z-index:40 }
.nav__in { display:flex; align-items:center; gap:1.25rem; padding:.7rem var(--pad-x);
  background:color-mix(in srgb, var(--ground) 82%, transparent); backdrop-filter:blur(10px); border-bottom:var(--border) }
.brand { display:flex; align-items:center; gap:.55rem; font-family:var(--ff-sub); font-weight:700; font-size:1rem; letter-spacing:0; text-decoration:none }
.brand__mark { display:grid; place-items:center; width:1.7em; height:1.7em; border-radius:var(--r-btn); background:var(--accent); color:var(--accent-ink); font-family:var(--ff-label); font-size:.85em }
.nav__links { display:none; gap:1.25rem; margin-left:auto; font-size:.95rem }
.nav__links a { text-decoration:none; color:var(--ink-soft) }
.nav__links a:hover { color:var(--ink) }
.nav .btn--sm { margin-left:auto }
@media (min-width:52rem){ .nav__links{display:flex} .nav .btn--sm{margin-left:0} }

.btn { display:inline-block; background:var(--accent); color:var(--accent-ink); text-decoration:none;
  font-weight:600; border-radius:var(--r-btn); box-shadow:var(--shadow); padding:.7rem 1.15rem;
  translate:var(--tx) var(--ty); transition:translate 180ms var(--ease), filter 180ms; border:0; cursor:pointer; font-size:1rem }
.btn--lg { padding:1rem 1.9rem; font-size:1.05rem }
.btn--sm { padding:.5rem .95rem; font-size:.9rem }
.btn--ghost { background:transparent; color:var(--ink); border:var(--border) }
.btn:hover { filter:brightness(1.08) }
@media (prefers-reduced-motion: reduce){ .btn{ translate:0 0 !important; transition:none } }
.cta-row { margin:1.6rem 0 .8rem }

.bento,.benefits,.tiers { display:grid; gap:clamp(.75rem,1.6vw,1.25rem); margin-top:2rem }
.benefits,.tiers { grid-template-columns:repeat(auto-fit,minmax(16rem,1fr)) }
.bento { grid-template-columns:repeat(2,1fr) }
@media (min-width:56rem){ .bento{ grid-template-columns:repeat(4,1fr) }
  .bento > :nth-child(1){ grid-column:span 2; grid-row:span 2 }
  .bento > :nth-child(4){ grid-column:span 2 } }
.bento > *,.benefits > *,.tiers > *,.proof blockquote { position:relative; overflow:hidden; padding:1.4rem;
  background:var(--panel); border:var(--border); border-radius:var(--r-panel); box-shadow:var(--shadow) }
/* Spotlight on EVERY panel - gate A14. */
.bento > *::after,.benefits > *::after,.tiers > *::after,.proof blockquote::after {
  content:""; position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity 220ms;
  background:radial-gradient(14rem 14rem at var(--mx) var(--my), color-mix(in srgb,var(--accent) 24%,transparent), transparent 70%) }
@media (hover:hover) and (pointer:fine){ .bento > *:hover::after,.benefits > *:hover::after,
  .tiers > *:hover::after,.proof blockquote:hover::after { opacity:1 } }
.tiers > .is-recommended { border-color:var(--accent); border-width:2px }

.pains { list-style:none; margin:2rem 0 0; padding:0; display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)) }
.pains li { padding-left:1.6rem; position:relative; color:var(--ink-soft) }
.pains li::before { content:"\2014"; position:absolute; left:0; color:var(--accent) }
.proof { margin-top:2rem; display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)) }
.proof blockquote,.proof blockquote p { margin:0 }
.proof cite { display:block; margin-top:.7rem; font-style:normal; font-family:var(--ff-label); font-size:.75rem; letter-spacing:var(--tr-label); text-transform:uppercase; color:var(--accent) }
.faq { margin-top:2rem; max-width:var(--measure); border-top:var(--border) }
.faq details { border-bottom:var(--border) }
.faq summary { cursor:pointer; padding:1rem 0; font-weight:600; list-style:none }
.faq summary::-webkit-details-marker { display:none }
.faq summary::after { content:"+"; float:right; color:var(--accent) }
.faq details[open] summary::after { content:"\2013" }
.faq details > p { padding-bottom:1rem; color:var(--ink-soft) }
.guarantee { margin-top:1.5rem; font-size:.95rem; color:var(--ink-soft) }
.hero__art { margin-top:2.5rem; max-width:100% }
.hero__art svg { width:100%; height:auto; display:block }
.figcap { margin-top:.9rem; font-family:var(--ff-label); font-size:.75rem; letter-spacing:var(--tr-label); text-transform:uppercase; color:var(--ink-soft); max-width:none }
.foot { padding:2.5rem var(--pad-x) 7rem; border-top:var(--border); font-size:.9rem; color:var(--ink-soft) }
.foot__links { display:flex; gap:1.25rem; flex-wrap:wrap }
.sticky { position:fixed; left:0; right:0; bottom:0; z-index:50; display:flex; align-items:center;
  justify-content:space-between; gap:1rem; padding:.7rem var(--pad-x);
  background:color-mix(in srgb,var(--ground) 92%,transparent); backdrop-filter:blur(12px);
  border-top:var(--border); transform:translateY(110%); transition:transform 260ms var(--ease);
  padding-bottom:calc(.7rem + env(safe-area-inset-bottom)) }
.sticky.is-on { transform:translateY(0) }
.sticky[hidden] { display:none }
@media (prefers-reduced-motion: reduce){ .sticky{ transition:none } }

[data-layout="stack-center"] .s { max-width:64rem; margin-inline:auto; text-align:center }
[data-layout="stack-center"] p,[data-layout="stack-center"] .pains { margin-inline:auto }
[data-layout="stack-center"] .cta-row { display:flex; justify-content:center }
[data-layout="split-asym"] .s--hero { display:grid; gap:2.5rem; align-items:center }
@media (min-width:60rem){ [data-layout="split-asym"] .s--hero{ grid-template-columns:1.5fr 1fr }
  [data-layout="split-asym"] .hero__art{ grid-row:1/6; grid-column:2; margin-top:0 } }
[data-layout="editorial-rail"] .s { max-width:78rem; margin-inline:auto; display:grid; gap:1.5rem }
@media (min-width:64rem){ [data-layout="editorial-rail"] .s{ grid-template-columns:12rem minmax(0,1fr) }
  [data-layout="editorial-rail"] .s > h2{ grid-column:1; font-size:1rem; position:sticky; top:5rem; align-self:start;
    font-family:var(--ff-label); font-weight:600; letter-spacing:var(--tr-label); text-transform:uppercase; color:var(--accent); font-stretch:normal }
  [data-layout="editorial-rail"] .s > :not(h2){ grid-column:2 }
  [data-layout="editorial-rail"] .s--hero{ grid-template-columns:minmax(0,1fr) }
  [data-layout="editorial-rail"] .s--hero > *{ grid-column:1 }
  [data-layout="editorial-rail"] .s--hero .lede{ max-width:34ch; font-size:1.3em } }
[data-layout="panel-mosaic"] .s:nth-of-type(odd) { background:var(--panel) }
[data-layout="panel-mosaic"] .s > * { max-width:72rem; margin-inline:auto }
[data-layout="wide-band"] .s { max-width:96rem; margin-inline:auto }
[data-layout="wide-band"] .lede,[data-layout="wide-band"] .s > p { max-width:46ch }
@media (min-width:70rem){ [data-layout="wide-band"] .s--problem .pains{ grid-template-columns:repeat(3,1fr) } }
[data-layout="sidebar-index"] .s { max-width:80rem; margin-inline:auto; position:relative }
@media (min-width:68rem){ [data-layout="sidebar-index"] .s{ padding-left:7rem }
  [data-layout="sidebar-index"] .s > h2::before{ content:counter(sec,decimal-leading-zero); counter-increment:sec;
    position:absolute; left:var(--pad-x); font-family:var(--ff-label); font-size:.8rem; color:var(--accent) }
  [data-layout="sidebar-index"] main{ counter-reset:sec } }
.s--hero .eyebrow { color:var(--accent) }
.s--hero::after { content:""; display:block; height:1px; margin-top:clamp(3rem,7vw,5rem);
  background:linear-gradient(90deg, var(--accent), transparent 60%) }

/* ---- Part 3: explainer apparatus ------------------------------------------ */
.masthead { display:flex; flex-wrap:wrap; align-items:baseline; gap:.5rem 1.25rem; padding:.7rem var(--pad-x);
  border-bottom:var(--border); font-family:var(--ff-label); font-size:.78rem; letter-spacing:var(--tr-label);
  text-transform:uppercase; color:var(--ink-soft) }
.masthead__title { color:var(--ink); font-weight:700; text-decoration:none }
.masthead__ver { color:var(--accent) }
.masthead__lang { margin-left:auto; display:flex; gap:.6rem }
.verdict { margin:2rem 0 0; padding:1.5rem; max-width:var(--measure); background:var(--panel);
  border:var(--border); border-left:4px solid var(--accent); border-radius:var(--r-panel) }
.verdict h2 { font-size:1rem; font-family:var(--ff-label); letter-spacing:var(--tr-label);
  text-transform:uppercase; color:var(--accent); font-stretch:normal; margin-bottom:.6rem }
.verdict p:last-child { margin-bottom:0 }
.contents { margin-top:2rem; max-width:var(--measure) }
.contents ol { list-style:none; margin:0; padding:0; counter-reset:toc; display:grid; gap:.15rem;
  grid-template-columns:repeat(auto-fit,minmax(17rem,1fr)) }
.contents li { counter-increment:toc }
.contents a { display:flex; gap:.7rem; align-items:baseline; padding:.45rem .2rem; text-decoration:none; border-bottom:1px solid transparent }
.contents a:hover { border-bottom-color:var(--line) }
.contents a::before { content:counter(toc,decimal-leading-zero); font-family:var(--ff-label); font-size:.75rem; color:var(--accent); flex:none }
.contents .kind { margin-left:auto; font-family:var(--ff-label); font-size:.68rem; letter-spacing:var(--tr-label); text-transform:uppercase; color:var(--ink-soft) }
.kicker { display:flex; flex-wrap:wrap; gap:.6rem; align-items:baseline; margin:0 0 .35rem;
  font-family:var(--ff-label); font-size:.72rem; letter-spacing:var(--tr-label); text-transform:uppercase }
.kicker b { color:var(--accent); font-weight:700 }
.kicker span { color:var(--ink-soft) }
.grade { display:inline-block; margin-left:.3em; padding:.05em .45em; vertical-align:.15em;
  font-family:var(--ff-label); font-size:.62rem; letter-spacing:.06em; text-transform:uppercase;
  border:1px solid currentColor; border-radius:2px; white-space:nowrap }
.grade--fact { color:var(--ok) } .grade--inference { color:var(--ink-soft) }
.grade--contested { color:var(--warn) } .grade--hypothesis { color:var(--bad) }
.legend { display:flex; flex-wrap:wrap; gap:.5rem 1.2rem; margin:1.2rem 0 0; padding:0; list-style:none; font-size:.85rem; color:var(--ink-soft); max-width:none }
.mono { font-family:var(--ff-label); font-size:.82rem; line-height:1.55; white-space:pre; overflow-x:auto;
  padding:1.1rem 1.2rem; margin:1.5rem 0; color:var(--ink); background:var(--panel); border:var(--border); border-radius:var(--r-panel) }
.datatable { width:100%; border-collapse:collapse; margin:1.5rem 0; font-size:.93rem }
.datatable caption { text-align:left; font-family:var(--ff-label); font-size:.72rem; letter-spacing:var(--tr-label); text-transform:uppercase; color:var(--ink-soft); padding-bottom:.5rem }
.datatable th { text-align:left; font-family:var(--ff-label); font-size:.72rem; letter-spacing:var(--tr-label); text-transform:uppercase; color:var(--ink-soft); border-bottom:2px solid var(--line); padding:.5rem .6rem .5rem 0 }
.datatable td { border-bottom:var(--border); padding:.6rem .6rem .6rem 0; vertical-align:top }
.timeline { list-style:none; margin:1.5rem 0 0; padding:0 }
.timeline li { display:grid; gap:.2rem 1.2rem; padding:.9rem 0; border-bottom:var(--border) }
@media (min-width:44rem){ .timeline li{ grid-template-columns:5.5rem minmax(0,1fr) } }
.timeline .yr { font-family:var(--ff-label); font-size:.85rem; color:var(--accent) }
.timeline .src { font-family:var(--ff-label); font-size:.72rem; color:var(--ink-soft) }
.limits { display:grid; gap:1rem; margin-top:2rem; grid-template-columns:repeat(auto-fit,minmax(18rem,1fr)) }
.limits > * { padding:1.3rem; background:var(--panel); border:var(--border); border-radius:var(--r-panel) }
.limits h3 { color:var(--accent) }
.sources { list-style:none; counter-reset:src; margin:1.5rem 0 0; padding:0; max-width:none }
.sources li { counter-increment:src; display:grid; grid-template-columns:2.2rem minmax(0,1fr); gap:.6rem; padding:.7rem 0; border-bottom:var(--border); font-size:.92rem }
.sources li::before { content:counter(src) "."; font-family:var(--ff-label); color:var(--accent) }
.sources a { word-break:break-all; color:var(--ink-soft) }
.method { margin-top:2rem; padding:1.2rem; font-size:.88rem; color:var(--ink-soft); border:var(--border); border-radius:var(--r-panel); max-width:none }
.method__checked { font-family:var(--ff-label); font-size:.72rem; letter-spacing:var(--tr-label); text-transform:uppercase; color:var(--accent) }

/* ---- Part 4: tool instrument ---------------------------------------------- */
.instrument { display:grid; place-items:center; gap:1.5rem; min-height:min(70vh,34rem); padding:clamp(2rem,6vw,5rem) var(--pad-x) }
.readout { font-family:var(--ff-display); font-weight:var(--fw-display); font-stretch:var(--stretch-display);
  font-size:clamp(4rem,20vw,14rem); line-height:.9; letter-spacing:var(--tr-display); font-variant-numeric:tabular-nums; margin:0 }
.readout--accent { color:var(--accent) }
.readout__unit { font-family:var(--ff-label); font-size:.14em; letter-spacing:var(--tr-label); text-transform:uppercase; color:var(--ink-soft); display:block; margin-top:.6em }
.controls { display:flex; flex-wrap:wrap; justify-content:center; gap:.6rem; padding:0 var(--pad-x) }
.presets { display:flex; flex-wrap:wrap; justify-content:center; gap:.4rem; padding:0 var(--pad-x) clamp(2rem,5vw,3rem) }
.presets .btn { background:transparent; color:var(--ink-soft); border:var(--border) }
.presets .btn[aria-pressed="true"] { background:var(--accent); color:var(--accent-ink); border-color:var(--accent) }
.keyhint { display:flex; flex-wrap:wrap; gap:.4rem 1.1rem; justify-content:center; font-family:var(--ff-label); font-size:.75rem; color:var(--ink-soft); max-width:none }
.keyhint kbd { padding:.1em .4em; border:var(--border); border-radius:3px; background:var(--panel) }
[data-state="running"] .nav,[data-state="running"] .presets,[data-state="running"] .keyhint { opacity:0; pointer-events:none; transition:opacity 400ms var(--ease) }
@media (prefers-reduced-motion: reduce){ [data-state="running"] .nav,[data-state="running"] .presets,[data-state="running"] .keyhint { transition:none } }
.nojs { display:none }
.no-js .nojs { display:block; padding:1rem var(--pad-x); color:var(--warn) }
.no-js .controls,.no-js .presets { display:none }

@media print { .nav,.sticky,.hero__art,.controls,.presets{display:none} body{background:#fff;color:#000} }