/* ============================================================
   Lumaseed — cover + docs styles.
   Design tokens are the Luminary set (lime accent, Outfit +
   JetBrains Mono, light/dark via [data-theme]) so the product
   site, the app UI and luminary-dev.xyz all read as one family.
   Fonts are self-hosted; the page makes no third-party requests.
   ============================================================ */

@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('fonts/outfit-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url('fonts/jetbrains-mono-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root {
  --bg:        #ffffff;
  --off:       #f7f7f5;
  --accent:    #84cc16;
  --a-text:    #5a9e08;
  --a-dim:     rgba(132,204,22,.09);
  --a-border:  rgba(132,204,22,.28);
  --text:      #0d0d0f;
  --muted:     #6b7280;
  --subtle:    #c4c4c8;
  --border:    rgba(0,0,0,.07);
  --border-hi: rgba(0,0,0,.13);
  --sh:        0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04);
  --sh-md:     0 4px 20px rgba(0,0,0,.08),0 2px 6px rgba(0,0,0,.04);
  --ease:      cubic-bezier(0.16,1,0.3,1);
  --r:         1.1rem;
  --particle:  132,204,22;
  --on-accent: #0d0d0f;
  /* terminal */
  --t-bg:   #f2f2f0;
  --t-bdr:  rgba(0,0,0,.09);
  --t-ln:   #b4b4b8;
  --t-cmt:  #9ca3af;
  --t-txt:  #1e1e2e;
  --t-str:  #15803d;
  --t-kw:   #7c3aed;
  --t-hi:   #5a9e08;
}
[data-theme="dark"] {
  --bg:        #0b0b0d;
  --off:       #111113;
  --accent:    #a3e635;
  --a-text:    #a3e635;
  --a-dim:     rgba(163,230,53,.08);
  --a-border:  rgba(163,230,53,.2);
  --text:      #f4f4f5;
  --muted:     #71717a;
  --subtle:    #3f3f46;
  --border:    rgba(255,255,255,.06);
  --border-hi: rgba(255,255,255,.11);
  --sh:        none;
  --sh-md:     none;
  --particle:  163,230,53;
  --t-bg:   #0d0d0f;
  --t-bdr:  rgba(255,255,255,.06);
  --t-ln:   #3f3f46;
  --t-cmt:  #4a5568;
  --t-txt:  #f4f4f5;
  --t-str:  #c3e88d;
  --t-kw:   #c792ea;
  --t-hi:   #a3e635;
}

*,*::before,*::after { box-sizing:border-box;margin:0;padding:0 }
html { scroll-behavior:smooth;color-scheme:light dark;scroll-padding-top:84px }
body {
  font-family:'Outfit',system-ui,sans-serif;
  background:var(--bg);color:var(--text);
  -webkit-font-smoothing:antialiased;
  transition:background .28s var(--ease),color .28s var(--ease);
}
.mono { font-family:'JetBrains Mono',ui-monospace,monospace }
a { color:inherit;text-decoration:none }
.container { max-width:1140px;margin:0 auto;padding:0 28px }

a:focus-visible,button:focus-visible {
  outline:2px solid var(--accent);outline-offset:3px;border-radius:8px;
}
.skip {
  position:fixed;top:.75rem;left:.75rem;z-index:100;
  background:var(--text);color:var(--bg);padding:.6rem 1rem;border-radius:.6rem;
  font-size:.85rem;font-weight:700;transform:translateY(-160%);
  transition:transform .2s var(--ease);
}
.skip:focus-visible { transform:translateY(0) }

/* ---------------------------------------------------------- header */
.hd {
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid var(--border);
  transition:background .28s,border-color .28s;
}
.hd-inner { display:flex;height:60px;align-items:center;gap:14px }

/* Cover page: the header floats over the hero (which supplies its own
   backdrop), staying transparent until you scroll past it. Colours come from
   the page theme throughout, so this works in light and dark alike. */
body.cover .hd {
  position:fixed;left:0;right:0;
  background:transparent;border-bottom-color:transparent;
  backdrop-filter:none;-webkit-backdrop-filter:none;
}
body.cover .hd.scrolled {
  background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-bottom-color:var(--border);
}
.hd-mark { font-size:17px;font-weight:800;letter-spacing:-.04em }
.hd-mark span { color:var(--accent);transition:color .28s }
.hd-div { width:1px;height:15px;background:var(--border);flex-shrink:0 }
.hd-crumb { font-size:13px;font-weight:700;letter-spacing:-.01em }
.hd-crumb-muted { font-size:13px;color:var(--muted) }
.hd-actions { margin-left:auto;display:flex;align-items:center;gap:10px }

/* theme toggle (ported from the landing page) */
.tt {
  position:relative;width:52px;height:28px;flex-shrink:0;
  border:1px solid var(--border);border-radius:100px;
  background:var(--off);cursor:pointer;padding:0;
  box-shadow:inset 2px 2px 5px rgba(0,0,0,.12),inset -2px -2px 5px rgba(255,255,255,.6);
  transition:background .28s,border-color .28s,box-shadow .28s;
}
[data-theme="dark"] .tt { box-shadow:inset 2px 2px 6px rgba(0,0,0,.55),inset -2px -2px 6px rgba(255,255,255,.04) }
.tt:active { transform:scale(.96) }
.tt-knob {
  position:absolute;top:50%;left:3px;transform:translateY(-50%);
  width:22px;height:22px;border-radius:50%;
  background:var(--accent);color:var(--on-accent);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 5px rgba(0,0,0,.28);
  transition:transform .42s cubic-bezier(.85,.05,.18,1.35),background .28s;
}
[data-theme="dark"] .tt-knob { transform:translate(22px,-50%) }
.tt svg { width:12px;height:12px }
.tt .moon { display:none }
[data-theme="dark"] .tt .sun { display:none }
[data-theme="dark"] .tt .moon { display:block }

/* ---------------------------------------------------------- buttons */
.btn {
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  border-radius:999px;font-weight:700;border:1px solid transparent;
  cursor:pointer;white-space:nowrap;
  transition:background .28s,color .28s,border-color .28s,transform .25s var(--ease),box-shadow .25s;
}
.btn-primary { background:var(--accent);color:var(--on-accent);padding:.62rem 1.25rem;font-size:.85rem }
.btn-primary:hover { transform:translateY(-1px);box-shadow:0 10px 26px rgba(var(--particle),.34) }
.btn-primary:active { transform:scale(.97) }
.btn-lg { padding:1rem 2.1rem;font-size:1.02rem;gap:.65rem }
.btn-lg svg { width:19px;height:19px }
.btn-outline {
  background:transparent;color:var(--text);
  border-color:var(--border-hi);padding:1rem 1.9rem;font-size:1.02rem;
}
.btn-outline:hover { border-color:var(--accent);color:var(--a-text);transform:translateY(-1px) }
.btn-outline:active { transform:scale(.97) }
/* hero "Read the docs" — frosted liquid glass, matching the command panel */
.hero-ctas .btn-outline {
  position:relative;overflow:hidden;isolation:isolate;
  background:color-mix(in srgb, var(--t-bg) 42%, transparent);
  border-color:color-mix(in srgb, var(--text) 16%, transparent);
  -webkit-backdrop-filter:blur(16px) saturate(180%);
  backdrop-filter:blur(16px) saturate(180%);
  box-shadow:0 10px 30px rgba(0,0,0,.18), inset 0 1px 0 color-mix(in srgb,#fff 35%,transparent);
}
.hero-ctas .btn-outline::before {
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;
  background:linear-gradient(135deg, color-mix(in srgb,#fff 22%,transparent) 0%, transparent 45%),
             radial-gradient(120% 80% at 0% 0%, color-mix(in srgb,#fff 14%,transparent), transparent 60%);
}
[data-theme="dark"] .hero-ctas .btn-outline::before {
  background:linear-gradient(135deg, color-mix(in srgb,#fff 12%,transparent) 0%, transparent 46%),
             radial-gradient(120% 80% at 0% 0%, color-mix(in srgb,#fff 8%,transparent), transparent 60%);
}
.hero-ctas .btn-outline:hover {
  border-color:var(--accent);color:var(--a-text);transform:translateY(-1px);
  box-shadow:0 14px 34px rgba(var(--particle),.26), inset 0 1px 0 color-mix(in srgb,#fff 40%,transparent);
}

/* ---------------------------------------------------------- chips */
.chip {
  display:inline-flex;align-items:center;gap:.42rem;
  font-size:.7rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--a-text);padding:.28rem .8rem;
  border:1px solid var(--a-border);border-radius:100px;background:var(--a-dim);
}
.chip::before { content:'';width:5px;height:5px;border-radius:50%;background:var(--accent);flex-shrink:0 }

/* ---------------------------------------------------------- hero
   The hero follows the page theme: light on light, dark on dark. The
   Hyperspeed backdrop is recoloured per theme in site.js (and its bloom
   damped in light mode, where additive glow would blow out to white). */
.hero {
  position:relative;overflow:hidden;
  border-bottom:1px solid var(--border);
  /* Top padding clears the fixed 60px header, which floats over the hero. */
  padding:calc(7.5rem + 60px) 0 6.5rem;
  background:var(--bg);
}
/* Instant fallback: a road-like vertical gradient that reads immediately and
   remains underneath the canvas, so a WebGL failure is never a blank box. */
.hero::before {
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(120% 80% at 50% 108%, rgba(132,204,22,.18), transparent 62%),
    linear-gradient(180deg, var(--bg) 0%, var(--off) 62%, #ececE7 100%);
}
[data-theme="dark"] .hero::before {
  background:
    radial-gradient(120% 80% at 50% 108%, rgba(163,230,53,.20), transparent 62%),
    linear-gradient(180deg, #05050a 0%, #07070d 55%, #0b0b12 100%);
}
[data-theme="dark"] .hero { background:#05050a }

.hero-fx {
  position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;
  opacity:0;transition:opacity 1.1s ease;
}
.hero-fx.ready { opacity:.72 }
[data-theme="dark"] .hero-fx.ready { opacity:.9 }
.hero-fx canvas { display:block;width:100%;height:100% }
/* Keeps the headline legible over the busiest part of the effect — tinted to
   the page background so it works in both themes. */
.hero-scrim {
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(72% 62% at 50% 42%, rgba(255,255,255,.86), rgba(255,255,255,.42) 58%, transparent 80%);
}
[data-theme="dark"] .hero-scrim {
  background:radial-gradient(72% 62% at 50% 42%, rgba(5,5,10,.82), rgba(5,5,10,.35) 58%, transparent 78%);
}
.hero-glow {
  position:absolute;z-index:0;pointer-events:none;
  top:-25%;left:50%;transform:translateX(-50%);width:70%;height:120%;
  background:radial-gradient(closest-side,var(--accent),transparent 70%);
  opacity:.11;filter:blur(70px);
}
.hero-inner { position:relative;z-index:1;text-align:center;display:flex;flex-direction:column;align-items:center;gap:1.4rem }
h1.hero-h1 {
  font-size:clamp(2.6rem,6.2vw,4.4rem);font-weight:800;
  letter-spacing:-.045em;line-height:1.02;max-width:16ch;
}
h1.hero-h1 em { font-style:normal;color:var(--accent);transition:color .28s }
.hero-lede { font-size:clamp(1rem,1.6vw,1.16rem);color:var(--muted);max-width:60ch;line-height:1.65 }
.hero-ctas { display:flex;gap:1rem;flex-wrap:wrap;justify-content:center;margin-top:.6rem }
.hero-note { font-size:.8rem;color:var(--muted);font-family:'JetBrains Mono',monospace }
/* the localhost address is interactive: colour shift + animated underline on hover */
.local-link { color:inherit;text-decoration:none;position:relative;padding-bottom:2px;transition:color .22s var(--ease) }
.local-link::after {
  content:'';position:absolute;left:0;right:0;bottom:0;height:1.5px;border-radius:2px;
  background:var(--a-text);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease);
}
.local-link:hover,.local-link:focus-visible { color:var(--a-text);text-shadow:0 0 14px rgba(var(--particle),.45) }
.local-link:hover::after,.local-link:focus-visible::after { transform:scaleX(1) }

/* command block */
.cmd {
  display:flex;align-items:center;gap:.9rem;
  background:var(--t-bg);border:1px solid var(--t-bdr);border-radius:100px;
  padding:.7rem 1.4rem;font-family:'JetBrains Mono',monospace;font-size:.86rem;
  color:var(--t-txt);transition:background .28s,border-color .28s,color .28s;
}
.cmd .prompt { color:var(--t-hi);font-weight:700 }
/* multi-line variant: clone + cd + run, stacked left-aligned inside a
   frosted "liquid glass" panel that blurs the moving hero backdrop behind it */
.cmd.cmd-multi {
  align-items:center;gap:1rem;border-radius:18px;padding:.95rem 1.25rem;
  text-align:left;max-width:100%;position:relative;overflow:hidden;isolation:isolate;
  background:color-mix(in srgb, var(--t-bg) 42%, transparent);
  border:1px solid color-mix(in srgb, var(--text) 14%, transparent);
  -webkit-backdrop-filter:blur(16px) saturate(180%);
  backdrop-filter:blur(16px) saturate(180%);
  box-shadow:
    0 10px 34px rgba(0,0,0,.20),
    inset 0 1px 0 color-mix(in srgb, #fff 35%, transparent),
    inset 0 0 0 1px color-mix(in srgb, #fff 6%, transparent);
}
/* glossy sheen sweeping across the top-left, the tell of liquid glass */
.cmd.cmd-multi::before {
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;
  background:linear-gradient(135deg, color-mix(in srgb,#fff 22%,transparent) 0%, transparent 42%),
             radial-gradient(120% 80% at 0% 0%, color-mix(in srgb,#fff 14%,transparent), transparent 60%);
}
[data-theme="dark"] .cmd.cmd-multi::before {
  background:linear-gradient(135deg, color-mix(in srgb,#fff 12%,transparent) 0%, transparent 44%),
             radial-gradient(120% 80% at 0% 0%, color-mix(in srgb,#fff 8%,transparent), transparent 60%);
}
.cmd-lines { display:flex;flex-direction:column;gap:.3rem;min-width:0;overflow-x:auto }
.cmd-line { display:flex;align-items:baseline;gap:.55rem;white-space:nowrap }
.cmd-multi .copy { flex:none;align-self:center }
.copy {
  background:none;border:none;cursor:pointer;color:var(--muted);
  display:inline-flex;padding:2px;transition:color .2s;
}
.copy:hover { color:var(--a-text) }
.copy svg { width:15px;height:15px }

/* ---------------------------------------------------------- sections */
section.band { padding:5.5rem 0;border-bottom:1px solid var(--border) }
.sec-head { max-width:62ch;margin-bottom:3rem }
.sec-head h2 { font-size:clamp(1.8rem,3.4vw,2.5rem);font-weight:800;letter-spacing:-.035em;line-height:1.12;margin:.85rem 0 .9rem }
.sec-head p { color:var(--muted);line-height:1.7;font-size:1.02rem }

.grid3 { display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem }
.grid2 { display:grid;grid-template-columns:repeat(2,1fr);gap:1.25rem }
.card {
  background:var(--off);border:1px solid var(--border);border-radius:var(--r);
  padding:1.9rem;box-shadow:var(--sh);
  transition:background .28s,border-color .3s var(--ease),transform .32s var(--ease),box-shadow .32s var(--ease);
}
.card:hover { border-color:var(--a-border);transform:translateY(-3px);box-shadow:var(--sh-md) }
.card h3 { font-size:1.12rem;font-weight:700;letter-spacing:-.015em;margin-bottom:.5rem }
.card p { color:var(--muted);font-size:.93rem;line-height:1.68 }
.card .ico {
  width:38px;height:38px;border-radius:11px;margin-bottom:1.1rem;
  background:var(--a-dim);border:1px solid var(--a-border);
  display:flex;align-items:center;justify-content:center;color:var(--a-text);
}
.card .ico svg { width:19px;height:19px }

/* app screenshot mock */
.shot {
  background:var(--off);border:1px solid var(--border);border-radius:var(--r);
  padding:1.4rem;box-shadow:var(--sh-md);
  transition:background .28s,border-color .28s;
}
.shot-bar { display:flex;align-items:center;gap:.45rem;margin-bottom:1.1rem }
.shot-dot { width:11px;height:11px;border-radius:50% }
.shot-row { display:flex;align-items:center;justify-content:space-between;gap:.75rem }
.shot-name { font-family:'JetBrains Mono',monospace;font-size:.78rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap }
.shot-chip {
  flex-shrink:0;font-size:.62rem;font-weight:700;letter-spacing:.06em;
  color:var(--a-text);background:var(--a-dim);border:1px solid var(--a-border);
  border-radius:100px;padding:.14rem .55rem;
}
.shot-bar-track { height:4px;border-radius:100px;background:var(--border-hi);overflow:hidden;margin:.85rem 0 .65rem }
.shot-bar-fill { display:block;height:100%;border-radius:100px;background:var(--accent);box-shadow:0 0 10px 0 rgba(var(--particle),.55) }
.shot-stats { display:flex;gap:1rem;flex-wrap:wrap;font-family:'JetBrains Mono',monospace;font-size:.66rem;color:var(--muted) }

/* ---------------------------------------------------------- contact */
.contact-grid { align-items:stretch }
.contact-card {
  display:flex;flex-direction:column;align-items:flex-start;
  background:var(--off);border:1px solid var(--border);border-radius:var(--r);
  padding:1.9rem;box-shadow:var(--sh);color:var(--text);text-decoration:none;
  transition:background .28s,border-color .3s var(--ease),transform .32s var(--ease),box-shadow .32s var(--ease);
}
.contact-card:hover { border-color:var(--a-border);transform:translateY(-3px);box-shadow:var(--sh-md) }
.contact-card .ico {
  width:38px;height:38px;border-radius:11px;margin-bottom:1.1rem;
  background:var(--a-dim);border:1px solid var(--a-border);
  display:flex;align-items:center;justify-content:center;color:var(--a-text);
}
.contact-card .ico svg { width:19px;height:19px }
.contact-card h3 { font-size:1.12rem;font-weight:700;letter-spacing:-.015em;margin-bottom:.4rem }
.contact-card p { color:var(--muted);font-size:.9rem;line-height:1.6;margin-bottom:1rem }
.contact-val { font-size:.82rem;color:var(--text);margin-top:auto }
.contact-go { display:inline-flex;align-items:center;gap:.35rem;margin-top:.9rem;font-size:.85rem;font-weight:600;color:var(--a-text) }
.contact-go svg { width:14px;height:14px;transition:transform .25s var(--ease) }
.contact-card:hover .contact-go svg { transform:translateX(3px) }

/* ---------------------------------------------------------- footer */
footer { padding:3.5rem 0;text-align:center;color:var(--muted);font-size:.85rem;border-top:1px solid var(--border) }
footer a { color:var(--a-text) }
footer a:hover { text-decoration:underline }
.ft-brand { font-weight:800;font-size:1.2rem;letter-spacing:-.04em;color:var(--text) }
.ft-brand span { color:var(--accent) }
.ft-blurb { max-width:48ch;margin:.6rem auto 1.5rem;color:var(--muted);line-height:1.6;font-size:.9rem }
.ft-links { display:flex;gap:1.4rem;justify-content:center;flex-wrap:wrap;margin-bottom:1.4rem }
.ft-fine { margin-top:.5rem;color:var(--muted);opacity:.75;font-size:.78rem }

/* ---------------------------------------------------------- reveal */
.up { opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease),transform .6s var(--ease) }
.up.in { opacity:1;transform:none }

@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto }
  *,*::before,*::after { animation:none !important;transition:none !important }
  .up { opacity:1;transform:none }
}
@media (max-width:900px) {
  .grid3 { grid-template-columns:1fr }
  .grid2 { grid-template-columns:1fr }
  .container { padding:0 20px }
  .hero { padding:calc(4.5rem + 60px) 0 4rem }
  section.band { padding:4rem 0 }
  .hd-crumb-muted { display:none }
}

/* ============================================================
   Docs — hero with jump chips, sticky TOC aside, numbered
   sections. Mirrors the Lumagram docs layout.
   ============================================================ */
.d-hero { position:relative;overflow:hidden;border-bottom:1px solid var(--border);padding:4.5rem 0 3.2rem }
.d-hero h1 { font-size:clamp(2.1rem,4.6vw,3.2rem);font-weight:800;letter-spacing:-.04em;line-height:1.06;margin:.9rem 0 1rem;max-width:20ch }
.d-lede { color:var(--muted);font-size:1.05rem;line-height:1.7;max-width:68ch }
.d-chips { display:flex;flex-wrap:wrap;gap:.6rem;margin-top:2rem }
.d-chip {
  display:inline-flex;align-items:center;gap:.5rem;
  border:1px solid var(--border);border-radius:100px;background:var(--off);
  padding:.4rem .9rem;font-size:.82rem;color:var(--muted);
  transition:border-color .2s,color .2s,background .2s,transform .2s var(--ease);
}
.d-chip strong { font-family:'JetBrains Mono',monospace;font-size:.7rem;color:var(--a-text);font-weight:700 }
.d-chip:hover { border-color:var(--a-border);color:var(--text);transform:translateY(-1px) }

.d-body { display:grid;grid-template-columns:210px 1fr;gap:3.5rem;padding:3.5rem 0 5rem;align-items:start }
.d-aside { position:sticky;top:84px }
.d-aside-label { font-size:.66rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--subtle);margin-bottom:.85rem }
.toc { display:flex;flex-direction:column;gap:.1rem;list-style:none }
.toc a {
  display:block;padding:.4rem .7rem;border-radius:8px;
  font-size:.85rem;color:var(--muted);border-left:2px solid transparent;
  transition:color .2s,background .2s,border-color .2s;
}
.toc a:hover { color:var(--text);background:var(--off) }
.toc a.active { color:var(--a-text);border-left-color:var(--accent);background:var(--a-dim);font-weight:600 }
.d-aside .btn { margin-top:1.5rem;width:100% }

.d-section { scroll-margin-top:84px;padding-bottom:3.5rem;border-bottom:1px solid var(--border);margin-bottom:3.5rem }
.d-section:last-of-type { border-bottom:none;margin-bottom:0 }
.d-eyebrow {
  display:inline-block;font-family:'JetBrains Mono',monospace;
  font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--a-text);margin-bottom:.7rem;
}
.d-section h2 { font-size:clamp(1.5rem,2.8vw,2rem);font-weight:800;letter-spacing:-.03em;line-height:1.15;margin-bottom:1rem }
.d-section h3 { font-size:1.06rem;font-weight:700;letter-spacing:-.015em;margin:2rem 0 .6rem }
.d-section p { color:var(--muted);line-height:1.75;margin-bottom:1rem;max-width:68ch }
.d-section p strong { color:var(--text);font-weight:600 }
.d-section ul { color:var(--muted);line-height:1.75;margin:0 0 1rem 1.1rem;max-width:68ch }
.d-section li { margin:.35rem 0 }
.d-section a { color:var(--a-text);text-decoration:underline;text-underline-offset:2px }

code.inline {
  font-family:'JetBrains Mono',monospace;font-size:.86em;
  background:var(--off);border:1px solid var(--border);border-radius:5px;
  padding:.08rem .38rem;color:var(--a-text);
}

/* code block with copy button */
.code {
  position:relative;background:var(--t-bg);border:1px solid var(--t-bdr);
  border-radius:.9rem;margin:0 0 1.4rem;overflow:hidden;
  transition:background .28s,border-color .28s;
}
.code pre {
  margin:0;padding:1.1rem 3.2rem 1.1rem 1.3rem;overflow-x:auto;
  font-family:'JetBrains Mono',monospace;font-size:.82rem;line-height:1.7;color:var(--t-txt);
}
.code .cmt { color:var(--t-cmt) }
.code .str { color:var(--t-str) }
.code .kw  { color:var(--t-kw) }
.code .hi  { color:var(--t-hi) }
.code .copy { position:absolute;top:.7rem;right:.8rem;padding:5px;border-radius:7px }
.code .copy:hover { background:var(--bg) }

/* settings / spec table */
.d-table { width:100%;border-collapse:collapse;margin:0 0 1.4rem;font-size:.88rem }
.d-table th, .d-table td { text-align:left;padding:.7rem .8rem;border-bottom:1px solid var(--border);vertical-align:top }
.d-table th { font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--subtle);font-weight:700 }
.d-table td { color:var(--muted);line-height:1.6 }
.d-table td:first-child { color:var(--text);font-family:'JetBrains Mono',monospace;font-size:.82rem;white-space:nowrap }

/* callout */
.note {
  display:flex;gap:.85rem;border-radius:.9rem;padding:1.05rem 1.2rem;margin:0 0 1.4rem;
  background:var(--a-dim);border:1px solid var(--a-border);
}
.note.warn { background:rgba(217,119,6,.08);border-color:rgba(217,119,6,.28) }
.note svg { width:17px;height:17px;flex-shrink:0;margin-top:.15rem;color:var(--a-text) }
.note.warn svg { color:#d97706 }
[data-theme="dark"] .note.warn svg { color:#fbbf24 }
.note p { margin:0;color:var(--text);font-size:.9rem;line-height:1.65 }

@media (max-width:900px) {
  .d-body { grid-template-columns:1fr;gap:0;padding:2.5rem 0 4rem }
  .d-aside { position:static;margin-bottom:2.5rem }
  .toc { flex-direction:row;flex-wrap:wrap;gap:.4rem }
  .toc a { border-left:none;border:1px solid var(--border);border-radius:100px;font-size:.8rem }
  .toc a.active { border-color:var(--a-border) }
  .d-aside .btn { width:auto }
}