/* ═══════════════════════════════════════════════════════════════════════════
   COUNT DARCULA — site stylesheet
   ───────────────────────────────────────────────────────────────────────────
   Plain CSS, no build step, no framework.

   The whole page is painted from the theme's own palette, so switching
   variant in the header re-themes the site itself — you are always looking
   at the thing you are being sold.

   Contents
     01  Tokens — the three variants
     02  Tokens — type, space, motion
     03  Reset & base
     04  Typography
     05  Layout primitives
     06  Buttons & controls
     07  Header
     08  Hero
     09  Editor mockup
     10  Comparison & lightness chart
     11  Palette
     12  Variant cards
     13  Accessibility
     14  Battery
     15  Install
     16  Footer
     17  Motion & reveal
   ═══════════════════════════════════════════════════════════════════════════ */


/* ── 01 · Tokens — the three variants ─────────────────────────────────────
   Straight from src/palette.js. Nothing here is hand-picked; every value is
   rendered from an OKLCH coordinate at the theme's build time.            */

:root,
[data-variant="dark"] {
  --deep:#0a0c13;  --chrome:#14171f;  --surface:#1d2029; --editor:#282b35;
  --raised:#30343f; --overlay:#3b3f4c; --line:#4b4f5d;   --subtle:#5f6370;
  --comment:#8693b3; --dim:#adb1bc;   --fg:#d4d7e0;      --bright:#eceef4;

  --coral:#fb8c8d; --amber:#e4a15f; --gold:#d3ab54;   --green:#86c47f;
  --teal:#4fc5cb;  --azure:#5dbbf8; --violet:#be9df7; --rose:#e58ed9;

  --error:#ef7272; --warning:#eca84a; --info:#5cb4ef; --success:#73c076;

  /* semantic surfaces */
  --page:#0a0c13;
  --panel:#1d2029;
  --well:#282b35;
  --hairline:rgba(75,79,93,.42);
  --hairline-loud:rgba(75,79,93,.85);
  --veil:rgba(10,12,19,.72);
  --bloom:.5;                 /* strength of the accent glows */
  --grain:.035;
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 24px 60px -28px rgba(0,0,0,.85);
}

[data-variant="nocturne"] {
  --deep:#000000; --chrome:#000000; --surface:#000000; --editor:#000000;
  --raised:#04050b; --overlay:#0e1018; --line:#1d202a; --subtle:#3e424d;
  --comment:#7884a4; --dim:#9b9ea7;   --fg:#bbbdc6;    --bright:#d5d7dd;

  --coral:#e37b7d; --amber:#ce8f51; --gold:#be9946;   --green:#76b06f;
  --teal:#40b1b7;  --azure:#4fa8e1; --violet:#aa8ce0; --rose:#ce7dc3;

  --error:#db6465; --warning:#d6963b; --info:#4da1d8; --success:#63ac66;

  /* true black everywhere — so the hierarchy has to come from hairlines */
  --page:#000000;
  --panel:#000000;
  --well:#000000;
  --hairline:#191c25;
  --hairline-loud:#2b2f3b;
  --veil:rgba(0,0,0,.8);
  --bloom:.34;
  --grain:.02;
  --shadow:0 0 0 1px #14171f;
}

[data-variant="daylight"] {
  --deep:#dbdee6;  --chrome:#e5e8ef; --surface:#eef0f6; --editor:#f5f7fb;
  --raised:#eaedf3; --overlay:#ffffff; --line:#cdd1da;  --subtle:#a7aab7;
  --comment:#5e6b8c; --dim:#545864;   --fg:#2f323e;     --bright:#121521;

  --coral:#ad2d3a; --amber:#984d00; --gold:#875a00;   --green:#297623;
  --teal:#007780;  --azure:#006ab0; --violet:#7348ae; --rose:#97338d;

  --error:#bc272c; --warning:#aa5500; --info:#006eb8; --success:#077b30;

  --page:#e5e8ef;
  --panel:#f5f7fb;
  --well:#ffffff;
  --hairline:rgba(90,98,120,.22);
  --hairline-loud:rgba(90,98,120,.46);
  --veil:rgba(229,232,239,.78);
  --bloom:.16;
  --grain:.02;
  --shadow:0 1px 2px rgba(23,27,40,.06), 0 20px 44px -26px rgba(23,27,40,.32);
}

/* role aliases, so markup reads in English rather than in hex */
:root {
  --text:var(--fg);
  --text-loud:var(--bright);
  --text-dim:var(--dim);
  --text-quiet:var(--comment);
  --accent:var(--rose);
  --accent-2:var(--azure);
}


/* ── 02 · Tokens — type, space, motion ────────────────────────────────── */

:root {
  --font-ui:"Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  /* The face the theme's own GitHub preview page sets its title in — the
     platform's UI sans, so the headline reads there exactly as it does here. */
  --font-hero:ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
              "Helvetica Neue", Archivo, Arial, sans-serif;

  /* fluid type — one ratio, no magic numbers scattered through the file */
  --t-micro:  clamp(.68rem, .64rem + .18vw, .76rem);
  --t-small:  clamp(.8rem,  .77rem + .16vw, .88rem);
  --t-body:   clamp(.98rem, .94rem + .2vw, 1.08rem);
  --t-lead:   clamp(1.04rem, .97rem + .3vw, 1.22rem);
  --t-h3:     clamp(1.18rem, 1.06rem + .5vw, 1.45rem);
  --t-h2:     clamp(1.9rem, 1.35rem + 2.2vw, 3.1rem);
  --t-h1:     clamp(2.6rem, 1.4rem + 4.4vw, 5.4rem);
  --t-stat:   clamp(1.45rem, 1.1rem + 1.35vw, 2.1rem);

  --space:clamp(1.1rem, .85rem + 1.1vw, 1.75rem);
  --gutter:clamp(1.15rem, .6rem + 2.4vw, 3rem);
  --bay:clamp(5rem, 3.2rem + 6.8vw, 10.5rem);  /* vertical rhythm between sections */
  --measure:62ch;
  --shell:1280px;

  --r-sm:6px;
  --r:12px;
  --r-lg:20px;
  --r-xl:28px;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --tempo:.5s;
}


/* ── 03 · Reset & base ────────────────────────────────────────────────── */

*,*::before,*::after { box-sizing:border-box; }
* { margin:0; }

html {
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  /* Must clear the sticky masthead, which gains a second row of section
     chips below 960px. */
  scroll-padding-top:5.5rem;
}
@media (max-width:960px) { html { scroll-padding-top:7.75rem; } }

body {
  background:var(--page);
  color:var(--text);
  font-family:var(--font-ui);
  font-size:var(--t-body);
  font-variation-settings:"wght" 400;
  line-height:1.65;
  min-height:100svh;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  transition:background-color var(--tempo) var(--ease), color var(--tempo) var(--ease);
}

/* A film grain over the whole page. Flat dark surfaces read as plastic
   without it; this is the single cheapest thing that makes them read as
   photographed instead. */
body::after {
  content:"";
  position:fixed;
  inset:0;
  z-index:9999;
  pointer-events:none;
  opacity:var(--grain);
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img,svg { display:block; max-width:100%; }
a { color:inherit; text-decoration:none; }
button { font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
table { border-collapse:collapse; width:100%; }

:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:2px;
}

::selection { background:color-mix(in oklab, var(--accent) 32%, transparent); color:var(--text-loud); }

.visually-hidden {
  position:absolute; width:1px; height:1px;
  padding:0; overflow:hidden; clip:rect(0 0 0 0);
  white-space:nowrap; border:0;
}

.skip-link {
  position:absolute; left:var(--gutter); top:-100%;
  z-index:200; padding:.7rem 1.1rem;
  background:var(--accent); color:var(--page);
  border-radius:var(--r-sm); font-weight:600;
  transition:top .18s var(--ease);
}
.skip-link:focus { top:.75rem; }


/* ── 04 · Typography ──────────────────────────────────────────────────────
   Two voices in deliberate tension, because the theme itself is a hybrid:
   a Didone display serif for Dracula's aristocratic half, an industrial
   grotesk and a true code face for One Dark's engineering half.          */

.display {
  font-family:var(--font-hero);
  font-weight:750;
  line-height:1.02;
  letter-spacing:-.035em;
  color:var(--text-loud);
  text-wrap:balance;
}
/* The emphasis word carries the accent. No synthesised obliques — a grotesk
   at display size gets its stress from weight and colour, not slant. */
.display em {
  font-style:normal;
  font-weight:inherit;
  color:var(--accent);
}

h1 { font-size:var(--t-h1); }
h2 { font-size:var(--t-h2); }
h3 {
  font-family:var(--font-hero);
  font-size:var(--t-h3);
  font-weight:650;
  line-height:1.25;
  letter-spacing:-.021em;
  color:var(--text-loud);
}

.lead {
  font-size:var(--t-lead);
  line-height:1.62;
  color:var(--text-dim);
  max-width:52ch;
  text-wrap:pretty;
}

p { text-wrap:pretty; max-width:var(--measure); }
p + p { margin-top:1.05em; }

.mono {
  font-family:var(--font-mono);
  font-size:var(--t-small);
  font-feature-settings:"zero" 1;
}

/* The little numbered plates that label each section. Technical drawing
   convention, and it gives the eye somewhere to land on a long page. */
.eyebrow {
  display:flex;
  align-items:center;
  gap:.7rem;
  font-family:var(--font-mono);
  font-size:var(--t-micro);
  font-weight:500;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--text-quiet);
}
.eyebrow::before {
  content:attr(data-index);
  color:var(--accent);
  font-variant-numeric:tabular-nums;
}
.eyebrow::after {
  content:"";
  flex:1;
  height:1px;
  background:linear-gradient(90deg, var(--hairline-loud), transparent);
}

.tint-coral{color:var(--coral)} .tint-amber{color:var(--amber)}
.tint-gold{color:var(--gold)}   .tint-green{color:var(--green)}
.tint-teal{color:var(--teal)}   .tint-azure{color:var(--azure)}
.tint-violet{color:var(--violet)} .tint-rose{color:var(--rose)}


/* ── 05 · Layout primitives ───────────────────────────────────────────── */

.shell {
  width:min(100% - (var(--gutter) * 2), var(--shell));
  margin-inline:auto;
}

.bay {
  padding-block:var(--bay);
  position:relative;
}


.bay-head {
  display:grid;
  gap:1.4rem;
  margin-bottom:clamp(3rem, 1.9rem + 3.8vw, 5.75rem);
  max-width:68ch;
}
.bay-head .lead { margin-top:-.35rem; }

.panel {
  background:var(--panel);
  border:1px solid var(--hairline);
  border-radius:var(--r-lg);
}

/* A hairline between sections rather than a hard edge — it should register
   as a change of subject, not as a box. */
.bay + .bay::before {
  content:"";
  position:absolute;
  inset:0 auto auto 0;
  width:100%;
  height:1px;
  background:linear-gradient(90deg, transparent, var(--hairline) 12%, var(--hairline) 88%, transparent);
}

.grid { display:grid; gap:var(--space); }
/* An `auto` grid track floors at its content's min-content width, so a single
   long command in a code block was widening the whole page on phones. Floor
   the items at zero and let the block scroll inside itself. */
.grid > *, .step, .code-block, .terminal, .panel { min-width:0; }
.cols-swatch { grid-template-columns:repeat(4, minmax(0,1fr)); }
@media (max-width:1024px) { .cols-swatch { grid-template-columns:repeat(3, minmax(0,1fr)); } }
@media (max-width:760px)  { .cols-swatch { grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:400px)  { .cols-swatch { grid-template-columns:1fr; } }
.cols-2 { grid-template-columns:repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.cols-3 { grid-template-columns:repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.cols-variants { grid-template-columns:1.22fr 1fr 1fr; }
@media (max-width:900px) { .cols-variants { grid-template-columns:1fr; } }
.cols-4 { grid-template-columns:repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }


/* ── 06 · Buttons & controls ──────────────────────────────────────────── */

.btn {
  --btn-bg:transparent;
  --btn-fg:var(--text-loud);
  --btn-edge:var(--hairline-loud);
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  padding:.82rem 1.4rem;
  background:var(--btn-bg);
  color:var(--btn-fg);
  border:1px solid var(--btn-edge);
  border-radius:100px;
  font-size:var(--t-small);
  font-variation-settings:"wght" 600;
  letter-spacing:.005em;
  white-space:nowrap;
  transition:transform .22s var(--ease-out), background-color .22s var(--ease),
             border-color .22s var(--ease), color .22s var(--ease);
}
.btn:hover { transform:translateY(-2px); }
.btn:active { transform:translateY(0); }

.btn-primary {
  --btn-bg:var(--accent);
  --btn-fg:var(--page);
  --btn-edge:var(--accent);
  box-shadow:0 0 0 0 color-mix(in oklab, var(--accent) 40%, transparent);
}
.btn-primary:hover {
  box-shadow:0 10px 34px -12px color-mix(in oklab, var(--accent) 75%, transparent);
}
.btn-ghost:hover { border-color:var(--accent); color:var(--accent); }

.btn svg { width:1.05em; height:1.05em; flex:none; }

/* Segmented control — used for the variant switcher, the language picker
   and the install tabs. One component, three jobs. */
.segment {
  display:inline-flex;
  flex-wrap:wrap;
  max-width:100%;
  padding:3px;
  gap:2px;
  background:color-mix(in oklab, var(--well) 70%, var(--page));
  border:1px solid var(--hairline);
  border-radius:100px;
}
.segment button {
  padding:.45rem .9rem;
  border-radius:100px;
  font-size:var(--t-micro);
  font-family:var(--font-mono);
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--text-quiet);
  white-space:nowrap;
  transition:color .2s var(--ease), background-color .2s var(--ease);
}
.segment button:hover { color:var(--text); }
.segment button[aria-selected="true"],
.segment button[aria-pressed="true"] {
  background:var(--raised);
  color:var(--text-loud);
}
[data-variant="daylight"] .segment button[aria-selected="true"],
[data-variant="daylight"] .segment button[aria-pressed="true"] { background:var(--overlay); }

/* Copy-to-clipboard affordance sitting inside code blocks */
.copy {
  position:absolute;
  top:.6rem;
  right:.6rem;
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.4rem .7rem;
  background:color-mix(in oklab, var(--raised) 90%, transparent);
  border:1px solid var(--hairline);
  border-radius:var(--r-sm);
  font-family:var(--font-mono);
  font-size:var(--t-micro);
  color:var(--text-dim);
  opacity:0;
  transition:opacity .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.code-block:hover .copy,
.copy:focus-visible { opacity:1; }
.copy:hover { color:var(--text-loud); border-color:var(--hairline-loud); }
.copy[data-copied="true"] { color:var(--success); border-color:var(--success); opacity:1; }
@media (hover:none) { .copy { opacity:1; } }


/* ── 07 · Header ──────────────────────────────────────────────────────── */

.masthead {
  position:sticky;
  top:0;
  z-index:100;
  background:color-mix(in oklab, var(--page) 82%, transparent);
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease), background-color .3s var(--ease);
}
.masthead[data-stuck="true"] { border-bottom-color:var(--hairline); }

.masthead-inner {
  display:flex;
  align-items:center;
  gap:var(--space);
  height:4.4rem;
}

.wordmark {
  display:flex;
  align-items:center;
  gap:.7rem;
  margin-right:auto;
  flex:none;
}
.wordmark img {
  width:34px;
  height:34px;
  border-radius:9px;
  border:1px solid var(--hairline);
}
.wordmark span {
  font-family:var(--font-hero);
  font-size:1.08rem;
  font-weight:700;
  letter-spacing:-.028em;
  color:var(--text-loud);
  white-space:nowrap;
}

.masthead nav {
  display:flex;
  gap:1.5rem;
  font-size:var(--t-small);
  color:var(--text-dim);
}
.masthead nav a { transition:color .2s var(--ease); }
.masthead nav a:hover { color:var(--text-loud); }

.masthead .icon-link {
  display:grid;
  place-items:center;
  width:2.2rem; height:2.2rem;
  border-radius:50%;
  border:1px solid var(--hairline);
  color:var(--text-dim);
  transition:color .2s var(--ease), border-color .2s var(--ease);
}
.masthead .icon-link:hover { color:var(--text-loud); border-color:var(--hairline-loud); }
.masthead .icon-link svg { width:1.05rem; height:1.05rem; }

@media (max-width:960px) {
  .masthead-inner {
    flex-wrap:wrap;
    height:auto;
    padding-block:.6rem .1rem;
    row-gap:.1rem;
  }
  .masthead nav {
    order:3;
    width:100%;
    gap:.4rem;
    margin-inline:calc(var(--gutter) * -1);
    padding:.15rem var(--gutter) .55rem;
    overflow-x:auto;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  .masthead nav::-webkit-scrollbar { display:none; }
  .masthead nav a {
    flex:none;
    padding:.42rem .8rem;
    border:1px solid var(--hairline);
    border-radius:100px;
    font-size:var(--t-micro);
    white-space:nowrap;
  }
  .masthead nav a:active { transform:scale(.96); }
}
@media (max-width:560px) {
  .wordmark span { display:none; }
  .segment button { padding:.5rem .7rem; }
}

/* Keep the top row to exactly one line on a phone: mark, variant switcher,
   source link. The section nav lives on the row below it. */
@media (max-width:600px) {
  .masthead-inner { gap:.5rem; }
  .masthead .segment { flex-wrap:nowrap; }
  .masthead .segment button {
    min-height:36px;
    padding:.4rem .58rem;
    letter-spacing:.02em;
  }
  .masthead .icon-link { width:2.3rem; height:2.3rem; }
}

/* Touch pointers need a bigger target than a mouse does. */
@media (pointer:coarse) {
  .segment button { min-height:38px; padding-inline:.95rem; }
  .btn { padding:.95rem 1.5rem; }
  .masthead .icon-link { width:2.6rem; height:2.6rem; }
  .copy { padding:.55rem .85rem; }
}


/* ── 08 · Hero ────────────────────────────────────────────────────────── */

.hero {
  position:relative;
  padding-top:clamp(3rem, 1rem + 7vw, 6.5rem);
  padding-bottom:clamp(2.5rem, 1.6rem + 2.6vw, 3.6rem);
  overflow:hidden;
}

/* Two accent blooms behind the type — rose and azure, the two ends of the
   palette. Scaled by --bloom so Nocturne stays genuinely black and
   Daylight doesn't turn milky. */
.hero::before {
  content:"";
  position:absolute;
  inset:-30% -10% auto -10%;
  height:120%;
  pointer-events:none;
  opacity:var(--bloom);
  background:
    radial-gradient(46% 42% at 18% 22%, color-mix(in oklab, var(--rose) 42%, transparent), transparent 70%),
    radial-gradient(40% 40% at 82% 12%, color-mix(in oklab, var(--azure) 30%, transparent), transparent 72%);
  filter:blur(20px);
}

.hero-grid {
  position:relative;
  display:grid;
  gap:clamp(2.5rem, 1rem + 5vw, 4.5rem);
  align-items:center;
  grid-template-columns:minmax(0, 1fr) minmax(0, 1.02fr);
}
@media (max-width:1040px) { .hero-grid { grid-template-columns:minmax(0,1fr); align-items:start; } }

.hero-mark {
  display:flex;
  align-items:center;
  gap:1rem;
  margin-bottom:1.6rem;
}
.hero-mark img {
  width:clamp(64px, 8vw, 92px);
  height:clamp(64px, 8vw, 92px);
  border-radius:20px;
  border:1px solid var(--hairline-loud);
  box-shadow:var(--shadow);
}
.hero-mark .stack { display:grid; gap:.35rem; }
.hero-mark .stack .mono { color:var(--text-quiet); letter-spacing:.16em; text-transform:uppercase; font-size:var(--t-micro); }

.hero h1 {
  /* background-clip:text paints only inside the padding box, and a .98
     line-height puts the last line's descender below it — which left the
     tail of a "g" unpainted rather than merely overflowing. The padding
     extends the paint area; the margin is trimmed to keep the rhythm. */
  padding-bottom:.2em;
  margin-bottom:.8rem;
  font-family:var(--font-hero);
  font-weight:800;
  font-variation-settings:"wght" 800;
  line-height:.98;
  letter-spacing:-.035em;
  color:var(--rose);
}
.hero h1 em {
  font-style:normal;
  font-weight:inherit;
  color:inherit;
}

/* Paint the whole headline with the palette's two ends. Kept behind
   @supports so anywhere background-clip is missing simply gets solid rose,
   which still clears AA on all three canvases. */
@supports (background-clip:text) or (-webkit-background-clip:text) {
  .hero h1 {
    background-image:linear-gradient(96deg, var(--rose) 8%, var(--violet) 78%);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    -webkit-text-fill-color:transparent;
  }
}

.hero-cta {
  display:flex;
  flex-wrap:wrap;
  gap:.75rem;
  margin-top:2rem;
}

/* Hero statistics — the four numbers that are the entire pitch */
.hero-stats {
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:1px;
  margin-top:2.8rem;
  background:var(--hairline);
  border:1px solid var(--hairline);
  border-radius:var(--r);
  overflow:hidden;
}
.hero-stats div {
  background:var(--page);
  padding:1.1rem 1.25rem 1.2rem;
  display:grid;
  gap:.15rem;
}
.hero-stats b {
  font-family:var(--font-hero);
  font-size:var(--t-stat);
  font-weight:700;
  letter-spacing:-.03em;
  line-height:1;
  color:var(--text-loud);
  font-variant-numeric:tabular-nums;
}
.hero-stats span {
  font-family:var(--font-mono);
  font-size:var(--t-micro);
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--text-quiet);
  line-height:1.4;
}
@media (max-width:720px) { .hero-stats { grid-template-columns:repeat(2, 1fr); } }
@media (max-width:640px) {
  .hero { padding-top:clamp(1.75rem, 1rem + 3vw, 3rem); }
  .hero-mark img { width:58px; height:58px; border-radius:15px; }
  .hero-cta { margin-top:1.6rem; }
  .hero-cta .btn { flex:1 1 auto; justify-content:center; }
  .hero-stats { margin-top:2rem; }
  .editor { font-size:.68rem; }
  .editor-bar .title { font-size:.64rem; }
}


/* ── 09 · Editor mockup ───────────────────────────────────────────────────
   A real VS Code window in HTML rather than a screenshot, so it re-themes
   live with the switcher and stays crisp at any zoom.                    */

.editor {
  background:var(--editor);
  border:1px solid var(--hairline-loud);
  border-radius:var(--r-lg);
  overflow:hidden;
  box-shadow:var(--shadow);
  font-family:var(--font-mono);
  font-size:.735rem;
  line-height:1.66;
  transition:background-color var(--tempo) var(--ease);
}

.editor-bar {
  display:flex;
  align-items:center;
  gap:.6rem;
  padding:.6rem .9rem;
  background:var(--chrome);
  border-bottom:1px solid color-mix(in oklab, var(--line) 40%, transparent);
  min-width:0;
}
.lights { display:flex; gap:.4rem; }
.lights i { width:11px; height:11px; border-radius:50%; display:block; }
.lights i:nth-child(1){ background:var(--coral); }
.lights i:nth-child(2){ background:var(--amber); }
.lights i:nth-child(3){ background:var(--green); }
.editor-bar .title {
  flex:1;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  text-align:center;
  font-size:.7rem;
  color:var(--comment);
  letter-spacing:.04em;
}

.editor-body { display:flex; min-width:0; min-height:0; }

.rail {
  flex:none;
  width:2.9rem;
  background:var(--chrome);
  padding:.7rem 0;
  display:grid;
  gap:1.05rem;
  justify-items:center;
  align-content:start;
}
.rail svg { width:1.15rem; height:1.15rem; color:var(--subtle); }
.rail svg:first-child { color:var(--fg); }

.sidebar {
  flex:none;
  width:9.9rem;
  background:var(--surface);
  padding:.85rem .5rem;
  font-size:.72rem;
  color:var(--dim);
}
.sidebar .heading {
  padding:0 .55rem .6rem;
  font-size:.62rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--comment);
}
.sidebar a {
  display:flex;
  align-items:center;
  gap:.45rem;
  padding:.2rem .55rem;
  border-radius:4px;
  color:var(--dim);
}
.sidebar a .dot { width:.5rem; height:.5rem; border-radius:2px; flex:none; }
.sidebar a[aria-current="true"] { background:var(--raised); color:var(--bright); }
@media (max-width:860px) { .sidebar, .rail { display:none; } }

.editor-main { flex:1; min-width:0; display:flex; flex-direction:column; }

.tabs {
  display:flex;
  background:var(--surface);
  border-bottom:1px solid color-mix(in oklab, var(--line) 34%, transparent);
  overflow-x:auto;
  scrollbar-width:none;
}
.tabs::-webkit-scrollbar { display:none; }
.tabs button {
  padding:.55rem .95rem;
  font-size:.72rem;
  color:var(--comment);
  border-right:1px solid color-mix(in oklab, var(--line) 28%, transparent);
  border-top:2px solid transparent;
  white-space:nowrap;
  transition:color .2s var(--ease), background-color .2s var(--ease);
}
.tabs button:hover { color:var(--dim); }
.tabs button[aria-selected="true"] {
  background:var(--editor);
  color:var(--bright);
  border-top-color:var(--accent);
}

.code-surface {
  display:flex;
  background:var(--editor);
  flex:1;
  min-height:20rem;
  overflow:hidden;
}
.gutter {
  flex:none;
  padding:1rem .7rem 1rem .9rem;
  text-align:right;
  color:var(--subtle);
  user-select:none;
  font-variant-numeric:tabular-nums;
}
.code-surface pre {
  flex:1;
  min-width:0;
  margin:0;
  padding:1rem 1rem 1rem 0;
  overflow-x:auto;
  color:var(--fg);
  tab-size:2;
}
.code-surface code { font:inherit; }

/* The minimap. Purely decorative, but its absence is the first thing that
   makes a VS Code mockup look fake. */
.minimap {
  flex:none;
  width:3rem;
  padding:1rem .45rem;
  display:grid;
  gap:3px;
  align-content:start;
  opacity:.5;
}
.minimap i { display:block; height:2px; border-radius:1px; }
@media (max-width:720px) { .minimap { display:none; } }

.status {
  display:flex;
  align-items:center;
  min-width:0;
  gap:1rem;
  padding:.3rem .9rem;
  background:var(--chrome);
  font-size:.68rem;
  color:var(--dim);
  border-top:1px solid color-mix(in oklab, var(--line) 34%, transparent);
}
.status .pip { color:var(--accent); }
.status .right { margin-left:auto; display:flex; gap:1rem; }
@media (max-width:640px) { .status .right span:nth-child(-n+2) { display:none; } }

/* syntax roles — bound to the palette, so they are literally the theme */
.t-key{color:var(--rose)}      .t-fn{color:var(--azure)}
.t-type{color:var(--gold)}     .t-prop{color:var(--coral)}
.t-str{color:var(--green)}     .t-num{color:var(--amber)}
.t-op{color:var(--teal)}       .t-flow{color:var(--violet)}
.t-com{color:var(--comment); font-style:italic}
.t-par{color:var(--fg); font-style:italic}
.t-fg{color:var(--fg)}


/* ── 10 · Comparison & lightness chart ────────────────────────────────────
   The core argument of the theme, drawn rather than asserted: plot every
   syntax colour of all three themes on one perceptual-lightness axis and
   the difference is visible in half a second.                            */

.spread {
  display:grid;
  grid-template-columns:auto repeat(3, minmax(0,1fr));
  gap:clamp(.6rem, .2rem + 1.6vw, 1.5rem);
  padding:clamp(1.2rem, .6rem + 2vw, 2.2rem);
}

.spread-axis {
  position:relative;
  width:2.6rem;
  margin-top:3.9rem;
  height:var(--track-h);
  font-family:var(--font-mono);
  font-size:var(--t-micro);
  color:var(--text-quiet);
}
.spread-axis span {
  position:absolute;
  right:0;
  transform:translateY(-50%);
  font-variant-numeric:tabular-nums;
}
.spread-axis::after {
  content:"L*";
  position:absolute;
  right:0;
  top:-2.2rem;
  color:var(--accent);
  letter-spacing:.1em;
}

.spread-col { --track-h:clamp(210px, 30vh, 300px); display:grid; gap:.85rem; }

.spread-col > header { display:grid; gap:.45rem; min-height:3.4rem; align-content:start; }
.spread-col h3 { font-size:var(--t-small); font-variation-settings:"wght" 620; }
.spread-col .canvas-chip {
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  font-family:var(--font-mono);
  font-size:var(--t-micro);
  color:var(--text-quiet);
}
.spread-col .canvas-chip i {
  width:.9rem; height:.9rem;
  border-radius:3px;
  box-shadow:inset 0 0 0 1px color-mix(in oklab, var(--text-quiet) 55%, transparent);
}

.track {
  position:relative;
  height:var(--track-h);
  background:color-mix(in oklab, var(--well) 60%, var(--page));
  border:1px solid var(--hairline);
  border-radius:var(--r);
  overflow:hidden;
}
/* horizontal rules every 10 L* so the eye has a reference */
.track::before {
  content:"";
  position:absolute;
  inset:0;
  background-image:repeating-linear-gradient(
    to bottom, var(--hairline) 0 1px, transparent 1px calc(100% / 4));
  opacity:.6;
}

.track .band {
  position:absolute;
  left:0; right:0;
  background:color-mix(in oklab, var(--text-quiet) 16%, transparent);
  border-top:1px dashed var(--hairline-loud);
  border-bottom:1px dashed var(--hairline-loud);
  transition:top 1.1s var(--ease-out), height 1.1s var(--ease-out);
}
.track.is-tight .band {
  background:color-mix(in oklab, var(--accent) 26%, transparent);
  border-color:var(--accent);
}

.track .dot {
  position:absolute;
  left:0;
  width:100%;
  height:0;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:top 1.1s var(--ease-out);
}
.track .dot i {
  width:clamp(16px, 2.4vw, 22px);
  height:clamp(16px, 2.4vw, 22px);
  border-radius:50%;
  box-shadow:0 0 0 1px color-mix(in oklab, var(--page) 55%, transparent),
             0 0 18px -2px currentColor;
  background:currentColor;
}
/* fan the dots out horizontally so overlapping lightnesses stay countable */
.track .dot:nth-child(2) { transform:translateX(-39%); }
.track .dot:nth-child(3) { transform:translateX(-26%); }
.track .dot:nth-child(4) { transform:translateX(-13%); }
.track .dot:nth-child(5) { transform:translateX(0); }
.track .dot:nth-child(6) { transform:translateX(13%); }
.track .dot:nth-child(7) { transform:translateX(26%); }
.track .dot:nth-child(8) { transform:translateX(39%); }

.spread-facts {
  display:grid;
  gap:.3rem;
  font-family:var(--font-mono);
  font-size:var(--t-micro);
}
.spread-facts div { display:flex; justify-content:space-between; gap:.5rem; color:var(--text-quiet); }
.spread-facts b {
  color:var(--text-loud);
  font-variant-numeric:tabular-nums;
  font-weight:500;
}
.spread-col.is-ours .spread-facts b { color:var(--accent); }
.spread-col.is-ours > header h3 { color:var(--accent); }

@media (max-width:820px) {
  .spread { grid-template-columns:auto 1fr; }
  .spread-axis { grid-row:span 3; }
}
@media (max-width:520px) {
  .spread { grid-template-columns:1fr; }
  .spread-axis { display:none; }
  .spread-col { --track-h:150px; }
  .spread-col > header { min-height:0; }
}

.verdict {
  margin-top:clamp(2rem,1rem + 3vw,3.2rem);
  padding:clamp(1.4rem,.8rem + 2vw,2.4rem);
  border-left:2px solid var(--accent);
  background:linear-gradient(90deg, color-mix(in oklab, var(--accent) 8%, transparent), transparent 60%);
  border-radius:0 var(--r) var(--r) 0;
}
.verdict p {
  font-family:var(--font-hero);
  font-size:var(--t-h3);
  font-weight:600;
  letter-spacing:-.022em;
  line-height:1.4;
  color:var(--text-loud);
  max-width:44ch;
}


/* ── 11 · Palette ─────────────────────────────────────────────────────── */

.swatch {
  position:relative;
  display:grid;
  grid-template-rows:auto auto 1fr auto;
  gap:.8rem;
  padding:1.15rem 1.15rem 1.25rem;
  background:var(--panel);
  border:1px solid var(--hairline);
  border-radius:var(--r);
  text-align:left;
  width:100%;
  transition:border-color .22s var(--ease), transform .22s var(--ease-out);
}
.swatch:hover { border-color:currentColor; transform:translateY(-3px); }

.swatch .chip {
  height:3.6rem;
  border-radius:var(--r-sm);
  background:currentColor;
  box-shadow:inset 0 0 0 1px color-mix(in oklab, var(--page) 22%, transparent);
}
.swatch .name {
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:.15rem .5rem;
  flex-wrap:wrap;
  font-variation-settings:"wght" 600;
  font-size:var(--t-small);
  color:var(--text-loud);
  text-transform:capitalize;
}
.swatch .name code {
  font-family:var(--font-mono);
  font-size:var(--t-micro);
  color:currentColor;
  text-transform:uppercase;
}
.swatch .role {
  font-size:var(--t-micro);
  color:var(--text-quiet);
  font-family:var(--font-mono);
  letter-spacing:.04em;
}
.swatch .metrics {
  display:flex;
  flex-wrap:wrap;
  gap:.3rem .85rem;
  font-family:var(--font-mono);
  font-size:var(--t-micro);
  color:var(--text-dim);
  border-top:1px solid var(--hairline);
  padding-top:.6rem;
  font-variant-numeric:tabular-nums;
}
.swatch .metrics span { display:flex; gap:.25rem; }
.swatch .metrics span::before { content:attr(data-label); color:var(--text-quiet); }
.swatch::after {
  content:"copied";
  position:absolute;
  inset:auto .8rem .8rem auto;
  font-family:var(--font-mono);
  font-size:var(--t-micro);
  color:var(--success);
  opacity:0;
  transform:translateY(4px);
  transition:opacity .2s var(--ease), transform .2s var(--ease);
  pointer-events:none;
}
.swatch[data-copied="true"]::after { opacity:1; transform:translateY(0); }

/* the twelve-step neutral ramp, as one continuous strip */
.ramp {
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:1fr;
  border:1px solid var(--hairline);
  border-radius:var(--r);
  overflow:hidden;
}
.ramp button {
  position:relative;
  aspect-ratio:1 / 2.1;
  display:grid;
  align-content:end;
  justify-items:center;
  padding-bottom:.5rem;
  font-family:var(--font-mono);
  font-size:.56rem;
  letter-spacing:.02em;
  transition:transform .25s var(--ease-out);
}
.ramp button span { writing-mode:vertical-rl; transform:rotate(180deg); opacity:.85; }
.ramp button:hover { transform:scaleY(1.04); z-index:2; }
/* The darkest steps are nearly the page colour — give every step an edge so
   the strip reads as twelve distinct surfaces rather than a fade to nothing. */
.ramp button { box-shadow:inset -1px 0 0 var(--hairline); }
.ramp button:last-child { box-shadow:none; }
@media (max-width:720px) {
  .ramp { grid-auto-flow:row; grid-template-columns:repeat(6, 1fr); }
  .ramp button { aspect-ratio:1 / 1.4; }
}

/* "colour means one thing everywhere" legend */
.legend { display:grid; gap:0; border-top:1px solid var(--hairline); }
.legend div {
  display:grid;
  grid-template-columns:6.5rem 1fr;
  gap:1rem;
  padding:.72rem .2rem;
  border-bottom:1px solid var(--hairline);
  font-size:var(--t-small);
  align-items:baseline;
}
.legend dt, .legend .role-name {
  font-family:var(--font-mono);
  font-size:var(--t-micro);
  letter-spacing:.1em;
  text-transform:uppercase;
}
.legend .role-desc { color:var(--text-dim); }
@media (max-width:520px) { .legend div { grid-template-columns:1fr; gap:.15rem; } }


/* ── 12 · Variant cards ───────────────────────────────────────────────── */

.variant-card {
  display:grid;
  grid-template-rows:auto auto 1fr auto;
  gap:1.25rem;
  padding:1.35rem;
  background:var(--panel);
  border:1px solid var(--hairline);
  border-radius:var(--r-lg);
  transition:border-color .25s var(--ease), transform .25s var(--ease-out);
}
.variant-card:hover { transform:translateY(-4px); border-color:var(--hairline-loud); }
.variant-card[data-active="true"] { border-color:var(--accent); }

.variant-card header { display:flex; align-items:flex-start; justify-content:space-between; gap:.75rem; }
.variant-card h3 { font-size:var(--t-small); font-variation-settings:"wght" 640; }
.variant-card .badge {
  flex:none;
  padding:.2rem .55rem;
  border-radius:100px;
  border:1px solid var(--hairline-loud);
  font-family:var(--font-mono);
  font-size:.6rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--text-quiet);
}
.variant-card[data-active="true"] .badge { border-color:var(--accent); color:var(--accent); }
.variant-card > p { font-size:var(--t-small); color:var(--text-dim); }

/* Miniature editor, painted from that variant's palette regardless of which
   variant the page is currently wearing — so all three are visible at once. */
.mini {
  border-radius:var(--r-sm);
  overflow:hidden;
  border:1px solid var(--hairline);
  font-family:var(--font-mono);
  font-size:.62rem;
  line-height:1.75;
}
.mini .mini-bar {
  display:flex;
  gap:.3rem;
  padding:.4rem .55rem;
  align-items:center;
}
.mini .mini-bar i { width:6px; height:6px; border-radius:50%; }
.mini pre { margin:0; padding:.7rem .75rem .85rem; overflow:hidden; }

.variant-card .facts {
  display:grid;
  gap:.28rem;
  font-family:var(--font-mono);
  font-size:var(--t-micro);
  border-top:1px solid var(--hairline);
  padding-top:.75rem;
}
.variant-card .facts div { display:flex; justify-content:space-between; gap:.5rem; color:var(--text-quiet); }
.variant-card .facts b { color:var(--text); font-weight:500; font-variant-numeric:tabular-nums; }


/* ── 13 · Accessibility ───────────────────────────────────────────────── */

.terminal {
  position:relative;
  background:var(--well);
  border:1px solid var(--hairline-loud);
  border-radius:var(--r);
  overflow:hidden;
  box-shadow:var(--shadow);
}
.terminal .terminal-bar {
  display:flex;
  align-items:center;
  gap:.55rem;
  padding:.5rem .8rem;
  background:var(--chrome);
  border-bottom:1px solid color-mix(in oklab, var(--line) 34%, transparent);
  font-family:var(--font-mono);
  font-size:var(--t-micro);
  color:var(--text-quiet);
}
.terminal pre {
  margin:0;
  padding:1rem 1.1rem 1.2rem;
  overflow-x:auto;
  font-family:var(--font-mono);
  font-size:.74rem;
  line-height:1.8;
  color:var(--text-dim);
}
.terminal .ok { color:var(--success); }
.terminal .cmd { color:var(--text-loud); }
.terminal .hint { color:var(--text-quiet); }

.tiers { font-size:var(--t-small); }
.tiers th, .tiers td {
  text-align:left;
  padding:.72rem .8rem;
  border-bottom:1px solid var(--hairline);
  vertical-align:top;
}
.tiers th {
  font-family:var(--font-mono);
  font-size:var(--t-micro);
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--text-quiet);
  font-weight:500;
}
.tiers td:first-child { color:var(--text-loud); font-variation-settings:"wght" 580; white-space:nowrap; }
.tiers td:last-child { font-family:var(--font-mono); white-space:nowrap; color:var(--accent); }
.tiers tbody tr:last-child td { border-bottom:0; }
.table-scroll { overflow-x:auto; }


/* ── 14 · Battery ─────────────────────────────────────────────────────── */

.power { display:grid; gap:.55rem; }
.power-row {
  display:grid;
  grid-template-columns:minmax(7rem, 12rem) 1fr auto;
  gap:.9rem;
  align-items:center;
  font-size:var(--t-small);
}
.power-row .label { color:var(--text-dim); }
.power-row.is-ours .label { color:var(--text-loud); font-variation-settings:"wght" 600; }
.power-row .meter {
  height:1.45rem;
  background:color-mix(in oklab, var(--well) 55%, var(--page));
  border:1px solid var(--hairline);
  border-radius:5px;
  overflow:hidden;
}
.power-row .meter i {
  display:block;
  height:100%;
  width:0;
  border-radius:4px 0 0 4px;
  background:color-mix(in oklab, var(--text-quiet) 55%, transparent);
  transition:width 1.2s var(--ease-out);
}
.power-row.is-ours .meter i { background:linear-gradient(90deg, var(--violet), var(--rose)); }
.power-row.is-best .meter i { background:linear-gradient(90deg, var(--teal), var(--green)); }
.power-row .value {
  font-family:var(--font-mono);
  font-size:var(--t-micro);
  color:var(--text-dim);
  font-variant-numeric:tabular-nums;
  min-width:4.2rem;
  text-align:right;
}
.power-row.is-best .value { color:var(--green); }
@media (max-width:600px) {
  .power-row { grid-template-columns:1fr auto; }
  .power-row .meter { grid-column:1 / -1; grid-row:2; }
}

.caveat {
  margin-top:2rem;
  padding:1.1rem 1.3rem;
  border:1px dashed var(--hairline-loud);
  border-radius:var(--r);
  font-size:var(--t-small);
  color:var(--text-dim);
}
.caveat strong { color:var(--text-loud); font-variation-settings:"wght" 620; }


/* ── 15 · Install ─────────────────────────────────────────────────────── */

.install-bar {
  display:flex;
  flex-wrap:wrap;
  gap:1.4rem 2rem;
  align-items:center;
  padding:1.1rem 1.25rem;
  background:var(--panel);
  border:1px solid var(--hairline);
  border-radius:var(--r);
  margin-bottom:2rem;
}
.install-bar .field { display:grid; gap:.5rem; }
.install-bar .field > span {
  font-family:var(--font-mono);
  font-size:var(--t-micro);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--text-quiet);
}

.step { display:grid; gap:1rem; }
.step > header { display:flex; align-items:baseline; gap:.8rem; }
.step > header .n {
  font-family:var(--font-mono);
  font-size:.86rem;
  font-weight:600;
  letter-spacing:.06em;
  padding-top:.35rem;
  color:var(--accent);
  line-height:1;
  flex:none;
}
.step > header p { color:var(--text-dim); font-size:var(--t-small); margin-top:.2rem; }

.code-block {
  position:relative;
  background:var(--well);
  border:1px solid var(--hairline);
  border-radius:var(--r);
  overflow:hidden;
}
.code-block > .lang {
  display:block;
  padding:.5rem .9rem;
  border-bottom:1px solid var(--hairline);
  font-family:var(--font-mono);
  font-size:var(--t-micro);
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--text-quiet);
  background:color-mix(in oklab, var(--panel) 60%, transparent);
}
.code-block pre {
  margin:0;
  padding:1rem 1.1rem;
  overflow-x:auto;
  font-family:var(--font-mono);
  font-size:.78rem;
  line-height:1.75;
  color:var(--text);
}
.code-block .c-com { color:var(--comment); font-style:italic; }
.code-block .c-cmd { color:var(--green); }
.code-block .c-flag { color:var(--amber); }
.code-block .c-str { color:var(--gold); }
.code-block .c-key { color:var(--rose); }
.code-block .c-num { color:var(--violet); }
.code-block .c-path { color:var(--azure); }

kbd {
  display:inline-block;
  padding:.12rem .42rem;
  border:1px solid var(--hairline-loud);
  border-bottom-width:2px;
  border-radius:5px;
  background:var(--raised);
  font-family:var(--font-mono);
  font-size:.78em;
  color:var(--text-loud);
}

.folder-table { font-size:var(--t-small); }
.folder-table th, .folder-table td {
  text-align:left;
  padding:.6rem .8rem;
  border-bottom:1px solid var(--hairline);
}
.folder-table th {
  font-family:var(--font-mono);
  font-size:var(--t-micro);
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--text-quiet);
  font-weight:500;
}
.folder-table td:last-child { font-family:var(--font-mono); color:var(--azure); white-space:nowrap; }
.folder-table tbody tr:last-child td { border-bottom:0; }
.folder-table tr[data-editor-row][data-on="true"] td { background:color-mix(in oklab, var(--accent) 9%, transparent); }
.folder-table tr[data-editor-row][data-on="true"] td:first-child { color:var(--text-loud); font-variation-settings:"wght" 620; }


/* ── 16 · Footer ──────────────────────────────────────────────────────── */

.colophon {
  border-top:1px solid var(--hairline);
  padding-block:clamp(3rem, 2rem + 3vw, 5rem) 3rem;
  background:color-mix(in oklab, var(--page) 92%, var(--well));
}
.colophon-grid {
  display:grid;
  gap:2.5rem;
  grid-template-columns:minmax(0,1.4fr) repeat(2, minmax(0,1fr));
  align-items:start;
}
@media (max-width:760px) { .colophon-grid { grid-template-columns:1fr 1fr; } .colophon-grid > *:first-child { grid-column:1 / -1; } }

.colophon h4 {
  font-family:var(--font-mono);
  font-size:var(--t-micro);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--text-quiet);
  font-weight:500;
  margin-bottom:.9rem;
}
.colophon ul { list-style:none; padding:0; display:grid; gap:.55rem; font-size:var(--t-small); }
.colophon a { color:var(--text-dim); transition:color .2s var(--ease); }
.colophon a:hover { color:var(--accent); }
.colophon .fineprint {
  margin-top:3rem;
  padding-top:1.6rem;
  border-top:1px solid var(--hairline);
  display:flex;
  flex-wrap:wrap;
  gap:.6rem 1.5rem;
  justify-content:space-between;
  font-size:var(--t-micro);
  font-family:var(--font-mono);
  color:var(--text-quiet);
}
.colophon .fineprint p { max-width:none; }


/* ── 17 · Motion & reveal ─────────────────────────────────────────────── */

/* Gated on .js (set by the inline head script) so that with scripting off,
   every one of these is simply visible. */
.js [data-reveal] {
  opacity:0;
  transform:translateY(18px);
  transition:opacity .75s var(--ease-out), transform .75s var(--ease-out);
  transition-delay:var(--delay, 0ms);
}
.js [data-reveal].is-in { opacity:1; transform:none; }

/* Grid children waterfall in on their own index — set once in main.js, so
   there are no per-element inline delays scattered through the markup. */
.js [data-stagger] > * {
  opacity:0;
  transform:translateY(14px);
  transition:opacity .6s var(--ease-out), transform .6s var(--ease-out);
  transition-delay:calc(var(--i, 0) * 55ms);
}
.js [data-stagger].is-in > * { opacity:1; transform:none; }

/* Tactile feedback: everything clickable acknowledges the press. */
.swatch:active, .variant-card:active, .ramp button:active,
.segment button:active, .copy:active { transform:scale(.985); }
.btn:active { transform:translateY(1px) scale(.99); }

@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after {
    animation-duration:.01ms !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .js [data-reveal], .js [data-stagger] > * { opacity:1; transform:none; }
}

@media print {
  .masthead, .hero::before, body::after { display:none; }
  body { background:#fff; color:#000; }
}


/* ── 18 · Outbound credits ────────────────────────────────────────────────
   One Dark and Dracula are named all over this page. Wherever they are,
   they link back — underlined on the accent so they read as a citation
   rather than as UI chrome. */

.ext {
  color:var(--text-loud);
  text-decoration:underline;
  text-decoration-color:color-mix(in oklab, var(--accent) 60%, transparent);
  text-underline-offset:.18em;
  text-decoration-thickness:1px;
  transition:color .2s var(--ease), text-decoration-color .2s var(--ease);
}
.ext:hover { color:var(--accent); text-decoration-color:var(--accent); }
.spread-col h3 .ext { color:inherit; }