/* =====================================================================
   SERIOUS BITS — DESIGN SYSTEM · serious-bits.css  (v1.0, bundled)
   Drop-in stylesheet: tokens + semantic theme (light/dark) +
   components + motion + quotestorm. Pair with serious-bits.js.
   Generated from the modular sources — edit those, then rebuild.
   ===================================================================== */
/* self-hosted by scripts/sync-ds.mjs — no Google Fonts request, no visitor IP leaving the EU */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/ds/fonts/space-grotesk-latin.woff2') format('woff2');
  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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/ds/fonts/space-grotesk-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/ds/fonts/hanken-grotesk-latin.woff2') format('woff2');
  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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/ds/fonts/hanken-grotesk-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/ds/fonts/jetbrains-mono-latin.woff2') format('woff2');
  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+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-weight: 400 700;
  font-display: swap;
  src: url('/ds/fonts/jetbrains-mono-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* ======================== tokens.css ======================== */
/* ============================================================
   SERIOUS BITS — Design Tokens & Brand Foundation styles
   v1 · warm-professional system
   ============================================================ */

:root {
  /* ---- Color ------------------------------------------------ */
  --sb-ink:        #211B14;  /* warm espresso near-black — primary text/structure */
  --sb-ink-2:      #3D352B;  /* softer ink — secondary headings */
  --sb-paper:      #F7F1E6;  /* warm cream — primary background */
  --sb-paper-2:    #EFE7D7;  /* deeper cream — panels, cards */
  --sb-green:      #6DAF8E;  /* HERO accent — soft pastel sage */
  --sb-green-600:  #3A7355;  /* green for text/contrast on paper */
  --sb-green-100:  #D7EAE0;  /* green tint */
  --sb-amber:      #E6A878;  /* SECONDARY accent — soft peach */
  --sb-amber-600:  #BC7B45;  /* amber for text/contrast on paper */
  --sb-amber-100:  #F7E6D4;  /* amber tint */
  --sb-stone:      #6E6353;  /* warm grey — captions, meta */
  --sb-line:       #E4D9C5;  /* hairline on paper */
  --sb-line-2:     #D8CBB3;  /* stronger hairline */
  --sb-line-dark:  rgba(247,241,230,0.16);

  /* ---- Type ------------------------------------------------- */
  --sb-display: 'Space Grotesk', system-ui, sans-serif;
  --sb-body:    'Hanken Grotesk', system-ui, sans-serif;
  --sb-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* ---- Radius ----------------------------------------------- */
  --sb-r-sm: 6px;
  --sb-r-md: 12px;
  --sb-r-lg: 20px;
  --sb-r-pill: 999px;

  /* ---- Space (4pt base) ------------------------------------- */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;

  /* ---- Elevation (subtle, warm-tinted) ---------------------- */
  --sb-shadow-sm: 0 1px 2px rgba(33,27,20,.05), 0 2px 6px rgba(33,27,20,.04);
  --sb-shadow-md: 0 2px 6px rgba(33,27,20,.06), 0 14px 34px rgba(33,27,20,.09);

  /* ---- Mark color contexts (inherited into <use>) ----------- */
  --c-base:   var(--sb-ink);
  --c-accent: var(--sb-green);
  --c-gap:    var(--sb-paper);
}

/* ============================================================
   Base
   ============================================================ */
* { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body {
  margin: 0;
  background: var(--sb-paper);
  color: var(--sb-ink);
  font-family: var(--sb-body);
  font-size: 17px;
  line-height: 1.6;
  /* very subtle warm grain for atmosphere */
  background-image:
    radial-gradient(120% 80% at 100% 0%, rgba(224,122,43,0.05), transparent 55%),
    radial-gradient(90% 70% at 0% 100%, rgba(46,107,87,0.045), transparent 55%);
  background-attachment: fixed;
}
::selection { background: var(--sb-amber); color: #fff; }

/* ============================================================
   Layout
   ============================================================ */
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 var(--s7); }
@media (max-width: 720px){ .wrap { padding: 0 var(--s5); } }

.section { padding: var(--s9) 0; border-top: 1px solid var(--sb-line); }
.section--tight { padding: var(--s8) 0; }
.section:first-of-type { border-top: 0; }

/* eyebrow / section label */
.eyebrow {
  font-family: var(--sb-mono);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sb-stone);
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin: 0 0 var(--s5);
}
.eyebrow b { color: var(--sb-green-600); font-weight: 500; }
.eyebrow::after { content: ""; flex: 1; height: 1px; background: var(--sb-line); }

/* ============================================================
   Type utilities
   ============================================================ */
.display {
  font-family: var(--sb-display);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.02;
  margin: 0;
}
.h-xl { font-size: clamp(40px, 6vw, 72px); }
.h-lg { font-size: clamp(30px, 4vw, 46px); }
.h-md { font-size: clamp(23px, 2.6vw, 30px); letter-spacing: -0.01em; }
.lead { font-size: clamp(18px, 2vw, 22px); color: var(--sb-ink-2); line-height: 1.5; }
.prose { max-width: 60ch; color: var(--sb-ink-2); }
.prose strong { color: var(--sb-ink); font-weight: 600; }
.meta { font-family: var(--sb-mono); font-size: 12.5px; color: var(--sb-stone); letter-spacing: 0.04em; }

/* chips */
.chips { display: flex; flex-wrap: wrap; gap: var(--s2); }
.chip {
  font-family: var(--sb-mono);
  font-size: 12.5px;
  letter-spacing: 0.02em;
  padding: 7px 13px;
  border: 1px solid var(--sb-line-2);
  border-radius: var(--sb-r-pill);
  color: var(--sb-ink-2);
  background: rgba(255,255,255,0.35);
}
.chip b { color: var(--sb-green-600); font-weight: 700; }

/* ============================================================
   THE MARK — bits (squares). One <symbol>, recolored per context
   via inherited custom properties on the host <svg>.
   ============================================================ */
.mk { display: block; height: 100%; width: auto; aspect-ratio: 1 / 1; }

.on-paper  { --c-base: var(--sb-ink);   --c-accent: var(--sb-green); --c-gap: var(--sb-paper); }
.on-paper2 { --c-base: var(--sb-ink);   --c-accent: var(--sb-green); --c-gap: var(--sb-paper-2); }
.on-dark   { --c-base: var(--sb-paper); --c-accent: var(--sb-green); --c-gap: var(--sb-ink); }
.on-green  { --c-base: #ffffff;          --c-accent: var(--sb-ink);   --c-gap: var(--sb-green); }
.on-amber  { --c-base: #ffffff;          --c-accent: var(--sb-ink);   --c-gap: var(--sb-amber); }

/* Wordmark (set as real text) */
.wm {
  font-family: var(--sb-display);
  font-weight: 600;
  letter-spacing: -0.035em;
  color: var(--sb-ink);
  line-height: 1;
  white-space: nowrap;
}
.wm .lo { color: var(--sb-ink); }
/* green square 'period' — the typographic bit (rounded for play) */
.wm-dot {
  display: inline-block;
  width: 0.17em; height: 0.17em;
  border-radius: 0.045em;
  background: var(--sb-green);
  vertical-align: baseline;
  margin-left: 0.07em;
  transform: rotate(17deg);
}

/* primary horizontal lockup */
.lockup { display: inline-flex; align-items: center; gap: var(--s5); }
.lockup .mk { height: 1.15em; }

/* ============================================================
   Logo spec cards
   ============================================================ */
.grid { display: grid; gap: var(--s5); }
.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 860px){ .cols-3, .cols-4 { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){ .cols-2, .cols-3, .cols-4 { grid-template-columns: 1fr; } }

.card {
  background: rgba(255,255,255,0.45);
  border: 1px solid var(--sb-line);
  border-radius: var(--sb-r-lg);
  padding: var(--s6);
  position: relative;
}
.card__label {
  font-family: var(--sb-mono);
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sb-stone);
  margin: 0 0 var(--s2);
}
.card__note { font-size: 14.5px; color: var(--sb-stone); margin: var(--s3) 0 0; line-height: 1.45; }

.stage {
  background: var(--sb-paper);
  border: 1px solid var(--sb-line);
  border-radius: var(--sb-r-md);
  display: flex; align-items: center; justify-content: center;
  min-height: 150px;
  padding: var(--s6);
}
.stage--dark { background: var(--sb-ink); border-color: transparent; }
.stage--green { background: var(--sb-green); border-color: transparent; }
.stage--amber { background: var(--sb-amber); border-color: transparent; }

/* dark full-bleed panel */
.panel-dark {
  background: var(--sb-ink);
  color: var(--sb-paper);
  border-radius: var(--sb-r-lg);
  padding: var(--s9) var(--s7);
}
.panel-dark .eyebrow { color: #B8AC97; }
.panel-dark .eyebrow::after { background: var(--sb-line-dark); }
.panel-dark .wm { color: var(--sb-paper); }

/* ============================================================
   Color swatches
   ============================================================ */
.swatch { border: 1px solid var(--sb-line); border-radius: var(--sb-r-md); overflow: hidden; background:#fff; }
.swatch__chip { height: 116px; }
.swatch__body { padding: var(--s4); }
.swatch__name { font-family: var(--sb-display); font-weight: 600; font-size: 16px; margin: 0; }
.swatch__role { font-size: 13px; color: var(--sb-stone); margin: 2px 0 var(--s3); }
.swatch__hex { font-family: var(--sb-mono); font-size: 12px; color: var(--sb-ink-2); display:flex; justify-content: space-between; gap: var(--s3); }
.swatch__hex span:last-child { color: var(--sb-stone); }

/* ============================================================
   Type specimen
   ============================================================ */
.spec { border-top: 1px solid var(--sb-line); padding: var(--s5) 0; display: grid; grid-template-columns: 150px 1fr; gap: var(--s5); align-items: baseline; }
.spec:first-child { border-top: 0; }
.spec__meta { font-family: var(--sb-mono); font-size: 12px; color: var(--sb-stone); line-height: 1.5; }
.spec__meta b { color: var(--sb-ink); font-weight: 700; display: block; font-size: 13px; }
@media (max-width: 640px){ .spec { grid-template-columns: 1fr; gap: var(--s2);} }

.fam { display: grid; grid-template-columns: 1fr; gap: var(--s2); }
.fam__sample { font-size: clamp(26px, 3.4vw, 38px); line-height: 1.1; margin: 0; }

/* code block */
.code {
  background: var(--sb-ink);
  border-radius: var(--sb-r-md);
  padding: var(--s5) var(--s6);
  font-family: var(--sb-mono);
  font-size: 14px;
  line-height: 1.7;
  color: #D7CDBC;
  overflow-x: auto;
}
.code .k { color: #E9A56B; }     /* keyword */
.code .s { color: #8FC9AE; }     /* string */
.code .c { color: #8A7E6B; }     /* comment */
.code .p { color: #B8AC97; }     /* punctuation */

/* ============================================================
   Applications
   ============================================================ */
.tab {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--sb-paper-2);
  border: 1px solid var(--sb-line);
  border-bottom: none;
  border-radius: 10px 10px 0 0;
  padding: 10px 16px 12px;
  font-family: var(--sb-body); font-size: 14px; font-weight: 500;
}
.tab .mk { height: 18px; }

.bizcard {
  aspect-ratio: 1.75 / 1;
  border-radius: var(--sb-r-md);
  padding: var(--s5);
  display: flex; flex-direction: column; justify-content: space-between;
  box-shadow: var(--sb-shadow-md);
}
.bizcard--front { background: var(--sb-paper); border: 1px solid var(--sb-line); }
.bizcard--back { background: var(--sb-ink); color: var(--sb-paper); }
.bizcard__name { font-family: var(--sb-display); font-weight: 600; font-size: 19px; margin: 0; }
.bizcard__role { font-size: 13.5px; color: var(--sb-stone); margin: 3px 0 0; }
.bizcard--back .bizcard__role { color: #B8AC97; }
.bizcard__meta { font-family: var(--sb-mono); font-size: 11.5px; letter-spacing: 0.03em; color: var(--sb-stone); line-height: 1.7; }

.label-device {
  background: var(--sb-ink); color: var(--sb-paper);
  border-radius: var(--sb-r-md);
  padding: var(--s5) var(--s6);
  display: flex; align-items: center; gap: var(--s4);
}
.label-device .mk { height: 40px; }
.label-device .ld__t { font-family: var(--sb-display); font-weight: 600; font-size: 17px; }
.label-device .ld__s { font-family: var(--sb-mono); font-size: 11.5px; color: #B8AC97; letter-spacing: 0.06em; }

.sig { font-family: var(--sb-body); font-size: 14px; line-height: 1.5; display: flex; gap: var(--s4); align-items: center; }
.sig .mk { height: 46px; }
.sig__name { font-family: var(--sb-display); font-weight: 600; font-size: 16px; color: var(--sb-ink); }
.sig__div { width: 1px; align-self: stretch; background: var(--sb-line-2); }
.sig__meta { color: var(--sb-stone); font-size: 13px; }
.sig__meta a { color: var(--sb-green-600); text-decoration: none; }

/* footer */
.colophon { padding: var(--s8) 0 var(--s9); color: var(--sb-stone); }
.colophon .meta { display:flex; flex-wrap: wrap; gap: var(--s5); }


/* ======================== ds-tokens.css ======================== */
/* ============================================================
   SERIOUS BITS — Design System · Semantic theme tokens
   Maps brand tokens (tokens.css) → semantic UI roles, with a
   full dark theme. Load AFTER tokens.css.
   ============================================================ */

:root,
[data-theme="light"] {
  /* surfaces */
  --ds-bg:           #F7F1E6;   /* page background */
  --ds-surface:      #FDFAF3;   /* cards, inputs */
  --ds-surface-2:    #EFE7D7;   /* sunken / subtle panels */
  --ds-surface-3:    #E7DCC8;   /* hover on subtle */
  --ds-overlay:      rgba(33,27,20,0.42);

  /* text */
  --ds-text:         #211B14;
  --ds-text-2:       #3D352B;
  --ds-text-muted:   #6E6353;
  --ds-text-on-primary:#211B14;
  --ds-text-inverse: #F7F1E6;

  /* lines */
  --ds-border:       #E4D9C5;
  --ds-border-2:     #D8CBB3;
  --ds-border-strong:#C8B99B;

  /* brand / interactive */
  --ds-primary:      #6DAF8E;
  --ds-primary-hover:#5C9B7B;
  --ds-primary-press:#4E876A;
  --ds-primary-text: #3A7355;   /* primary used as text on paper */
  --ds-primary-tint: #D7EAE0;
  --ds-ring:         rgba(109,175,142,0.45);

  --ds-accent:       #E6A878;
  --ds-accent-text:  #9C602F;
  --ds-accent-tint:  #F7E6D4;

  /* status */
  --ds-success:      #3A7355;  --ds-success-tint:#D7EAE0;
  --ds-warning:      #BC7B45;  --ds-warning-tint:#F7E6D4;
  --ds-danger:       #BB4A3E;  --ds-danger-tint: #F4DAD4;  --ds-danger-solid:#BB4A3E;
  --ds-info:         #456F7E;  --ds-info-tint:   #DCE9EC;

  /* code surface */
  --ds-code-bg:      #211B14;
  --ds-code-text:    #D7CDBC;

  /* elevation */
  --ds-shadow-sm: 0 1px 2px rgba(33,27,20,.06), 0 1px 3px rgba(33,27,20,.05);
  --ds-shadow-md: 0 2px 6px rgba(33,27,20,.06), 0 10px 24px rgba(33,27,20,.08);
  --ds-shadow-lg: 0 6px 18px rgba(33,27,20,.10), 0 24px 56px rgba(33,27,20,.14);
}

[data-theme="dark"] {
  --ds-bg:           #17120C;
  --ds-surface:      #211B14;
  --ds-surface-2:    #2A2319;
  --ds-surface-3:    #352C20;
  --ds-overlay:      rgba(0,0,0,0.58);

  --ds-text:         #F3EBDD;
  --ds-text-2:       #DDD3C2;
  --ds-text-muted:   #A99C86;
  --ds-text-on-primary:#15110B;
  --ds-text-inverse: #211B14;

  --ds-border:       rgba(247,241,230,0.12);
  --ds-border-2:     rgba(247,241,230,0.18);
  --ds-border-strong:rgba(247,241,230,0.28);

  --ds-primary:      #82C3A0;
  --ds-primary-hover:#93CFAE;
  --ds-primary-press:#A4D8BC;
  --ds-primary-text: #93CFAE;
  --ds-primary-tint: rgba(130,195,160,0.16);
  --ds-ring:         rgba(130,195,160,0.50);

  --ds-accent:       #E8B084;
  --ds-accent-text:  #ECB98F;
  --ds-accent-tint:  rgba(232,176,132,0.16);

  --ds-success:      #82C3A0;  --ds-success-tint:rgba(130,195,160,0.16);
  --ds-warning:      #E8B084;  --ds-warning-tint:rgba(232,176,132,0.16);
  --ds-danger:       #E08A7E;  --ds-danger-tint: rgba(224,138,126,0.18); --ds-danger-solid:#C25647;
  --ds-info:         #84AEBD;  --ds-info-tint:   rgba(132,174,189,0.16);

  --ds-code-bg:      #0E0B07;
  --ds-code-text:    #D7CDBC;

  --ds-shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --ds-shadow-md: 0 2px 8px rgba(0,0,0,.45), 0 12px 28px rgba(0,0,0,.4);
  --ds-shadow-lg: 0 8px 24px rgba(0,0,0,.5), 0 28px 64px rgba(0,0,0,.55);
}

html { color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }


/* ======================== ds-components.css ======================== */
/* ============================================================
   SERIOUS BITS — Design System · Component library
   All components use semantic tokens (ds-tokens.css) so they
   theme automatically in light & dark.
   ============================================================ */

/* ---- shared font stacks (from brand) ---------------------- */
.ds-display { font-family: var(--sb-display); font-weight:600; letter-spacing:-0.02em; }
.ds-mono { font-family: var(--sb-mono); }

/* ============================================================
   BUTTONS
   ============================================================ */
.ds-btn {
  --_bg: var(--ds-primary);
  --_fg: var(--ds-text-on-primary);
  --_bd: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--sb-body); font-weight: 600; font-size: 15px; line-height: 1;
  padding: 11px 18px; border-radius: 10px;
  background: var(--_bg); color: var(--_fg);
  border: 1px solid var(--_bd);
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background .16s ease, border-color .16s ease, color .16s ease, transform .06s ease, box-shadow .16s ease;
  -webkit-tap-highlight-color: transparent;
}
.ds-btn:hover { background: var(--ds-primary-hover); }
.ds-btn:active { transform: translateY(1px); }
.ds-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ds-ring); }
.ds-btn .ds-ic { width: 17px; height: 17px; flex-shrink: 0; }

.ds-btn--secondary { --_bg: transparent; --_fg: var(--ds-text); --_bd: var(--ds-border-strong); }
.ds-btn--secondary:hover { background: var(--ds-surface-2); --_bd: var(--ds-border-strong); }

.ds-btn--ghost { --_bg: transparent; --_fg: var(--ds-text); --_bd: transparent; }
.ds-btn--ghost:hover { background: var(--ds-surface-2); }

.ds-btn--accent { --_bg: var(--ds-accent); --_fg: #3A2A18; }
.ds-btn--accent:hover { background: var(--ds-accent); filter: brightness(0.96); }

.ds-btn--danger { --_bg: var(--ds-danger-solid); --_fg: #fff; }
.ds-btn--danger:hover { filter: brightness(1.05); }

.ds-btn--link { --_bg: transparent; --_fg: var(--ds-primary-text); --_bd: transparent; padding-left: 6px; padding-right: 6px; }
.ds-btn--link:hover { background: transparent; text-decoration: underline; text-underline-offset: 3px; }

.ds-btn--sm { font-size: 13.5px; padding: 8px 13px; border-radius: 8px; gap:6px; }
.ds-btn--lg { font-size: 16.5px; padding: 14px 24px; border-radius: 12px; }
.ds-btn--icon { padding: 11px; }
.ds-btn--block { display: flex; width: 100%; }

.ds-btn[disabled], .ds-btn--disabled { opacity: .5; pointer-events: none; }
.ds-btn--loading { color: transparent !important; position: relative; pointer-events: none; }
.ds-btn--loading::after {
  content:""; position:absolute; width:16px; height:16px; border-radius:50%;
  border: 2px solid currentColor; border-top-color: transparent; color: var(--ds-text-on-primary);
  animation: ds-spin .7s linear infinite;
}
@keyframes ds-spin { to { transform: rotate(360deg); } }

.ds-btn-group { display: inline-flex; }
.ds-btn-group .ds-btn { border-radius: 0; border-left-width: 0; }
.ds-btn-group .ds-btn:first-child { border-radius: 10px 0 0 10px; border-left-width: 1px; }
.ds-btn-group .ds-btn:last-child { border-radius: 0 10px 10px 0; }

/* ============================================================
   BADGES & TAGS
   ============================================================ */
.ds-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--sb-mono); font-size: 12px; font-weight: 500; letter-spacing: .02em;
  padding: 4px 10px; border-radius: 999px;
  background: var(--ds-surface-2); color: var(--ds-text-2); border: 1px solid transparent;
}
.ds-badge--primary { background: var(--ds-primary-tint); color: var(--ds-primary-text); }
.ds-badge--accent  { background: var(--ds-accent-tint);  color: var(--ds-accent-text); }
.ds-badge--success { background: var(--ds-success-tint); color: var(--ds-success); }
.ds-badge--warning { background: var(--ds-warning-tint); color: var(--ds-warning); }
.ds-badge--danger  { background: var(--ds-danger-tint);  color: var(--ds-danger); }
.ds-badge--info    { background: var(--ds-info-tint);    color: var(--ds-info); }
.ds-badge--outline { background: transparent; border-color: var(--ds-border-2); color: var(--ds-text-muted); }
.ds-badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ============================================================
   FORMS
   ============================================================ */
.ds-field { display: grid; gap: 7px; }
.ds-label { font-size: 14px; font-weight: 600; color: var(--ds-text); display:flex; align-items:center; gap:8px; }
.ds-label .req { color: var(--ds-danger); }
.ds-help { font-size: 13px; color: var(--ds-text-muted); line-height: 1.45; }
.ds-error-text { font-size: 13px; color: var(--ds-danger); display:flex; gap:6px; align-items:center; }

.ds-input, .ds-textarea, .ds-select {
  font-family: var(--sb-body); font-size: 15px; color: var(--ds-text);
  background: var(--ds-surface); border: 1px solid var(--ds-border-2); border-radius: 10px;
  padding: 11px 14px; width: 100%;
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.ds-input::placeholder, .ds-textarea::placeholder { color: var(--ds-text-muted); opacity: .7; }
.ds-input:hover, .ds-textarea:hover, .ds-select:hover { border-color: var(--ds-border-strong); }
.ds-input:focus, .ds-textarea:focus, .ds-select:focus {
  outline: none; border-color: var(--ds-primary); box-shadow: 0 0 0 3px var(--ds-ring);
}
.ds-input:disabled, .ds-textarea:disabled, .ds-select:disabled {
  opacity: .55; cursor: not-allowed; background: var(--ds-surface-2);
}
.ds-input--error, .ds-textarea--error { border-color: var(--ds-danger); }
.ds-input--error:focus { box-shadow: 0 0 0 3px var(--ds-danger-tint); }
.ds-textarea { resize: vertical; min-height: 92px; line-height: 1.5; }

.ds-input--sm { font-size: 13.5px; padding: 8px 11px; border-radius: 8px; }
.ds-input--lg { font-size: 16.5px; padding: 14px 16px; border-radius: 12px; }

/* input with leading icon / addon */
.ds-input-wrap { position: relative; display: flex; align-items: center; }
.ds-input-wrap .ds-ic { position: absolute; left: 13px; width: 17px; height: 17px; color: var(--ds-text-muted); pointer-events: none; }
.ds-input-wrap .ds-input { padding-left: 40px; }
.ds-input-affix {
  display: flex; align-items: stretch; border: 1px solid var(--ds-border-2); border-radius: 10px; overflow: hidden; background: var(--ds-surface);
}
.ds-input-affix:focus-within { border-color: var(--ds-primary); box-shadow: 0 0 0 3px var(--ds-ring); }
.ds-input-affix .addon { display: flex; align-items: center; padding: 0 13px; background: var(--ds-surface-2); color: var(--ds-text-muted); font-family: var(--sb-mono); font-size: 13.5px; border-right: 1px solid var(--ds-border); }
.ds-input-affix .ds-input { border: 0; box-shadow: none !important; border-radius: 0; }

/* select chevron */
.ds-select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236E6353' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 13px center; padding-right: 40px; }

/* checkbox & radio */
.ds-check { display: inline-flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: 15px; color: var(--ds-text); line-height: 1.4; }
.ds-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.ds-check .box {
  width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--ds-border-strong);
  background: var(--ds-surface); flex-shrink: 0; display: grid; place-items: center; margin-top: 1px;
  transition: background .14s, border-color .14s; position: relative;
}
.ds-check .box.radio { border-radius: 50%; }
.ds-check .box svg { width: 13px; height: 13px; stroke: #fff; stroke-width: 3; fill: none; opacity: 0; transition: opacity .12s; }
.ds-check input:checked + .box { background: var(--ds-primary); border-color: var(--ds-primary); }
.ds-check input:checked + .box svg { opacity: 1; }
.ds-check .box.radio::after { content:""; width:8px; height:8px; border-radius:50%; background:#fff; opacity:0; transition:opacity .12s; }
.ds-check input:checked + .box.radio::after { opacity: 1; }
.ds-check input:focus-visible + .box { box-shadow: 0 0 0 3px var(--ds-ring); }
.ds-check input:disabled + .box { opacity: .5; }

/* toggle / switch */
.ds-switch { display: inline-flex; align-items: center; gap: 11px; cursor: pointer; font-size: 15px; color: var(--ds-text); }
.ds-switch input { position: absolute; opacity: 0; }
.ds-switch .track {
  width: 42px; height: 24px; border-radius: 999px; background: var(--ds-border-strong);
  position: relative; transition: background .18s ease; flex-shrink: 0;
}
.ds-switch .track::after {
  content:""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform .18s ease;
}
.ds-switch input:checked + .track { background: var(--ds-primary); }
.ds-switch input:checked + .track::after { transform: translateX(18px); }
.ds-switch input:focus-visible + .track { box-shadow: 0 0 0 3px var(--ds-ring); }
.ds-switch input:disabled + .track { opacity: .5; }

/* range */
.ds-range { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 999px; background: var(--ds-surface-3); outline: none; }
.ds-range::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%; background: var(--ds-primary); cursor: pointer; border: 3px solid var(--ds-surface); box-shadow: var(--ds-shadow-sm); }
.ds-range::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--ds-primary); cursor: pointer; border: 3px solid var(--ds-surface); }

/* segmented control */
.ds-segment { display: inline-flex; background: var(--ds-surface-2); border-radius: 10px; padding: 3px; gap: 3px; }
.ds-segment button {
  font-family: var(--sb-body); font-size: 14px; font-weight: 500; color: var(--ds-text-muted);
  padding: 7px 15px; border: 0; background: transparent; border-radius: 8px; cursor: pointer; transition: background .14s, color .14s;
}
.ds-segment button:hover { color: var(--ds-text); }
.ds-segment button[aria-pressed="true"], .ds-segment button.is-active { background: var(--ds-surface); color: var(--ds-text); box-shadow: var(--ds-shadow-sm); }

/* ============================================================
   CARDS & SURFACES
   ============================================================ */
.ds-card { background: var(--ds-surface); border: 1px solid var(--ds-border); border-radius: 16px; overflow: hidden; }
.ds-card__media { height: 150px; background: var(--ds-surface-2); border-bottom: 1px solid var(--ds-border); }
.ds-card__body { padding: 22px; display: grid; gap: 8px; }
.ds-card__title { font-family: var(--sb-display); font-weight: 600; font-size: 19px; color: var(--ds-text); margin: 0; }
.ds-card__text { color: var(--ds-text-2); font-size: 15px; line-height: 1.55; margin: 0; }
.ds-card__footer { padding: 16px 22px; border-top: 1px solid var(--ds-border); display: flex; gap: 12px; align-items: center; }
.ds-card--interactive { cursor: pointer; transition: border-color .16s, transform .16s, box-shadow .16s; }
.ds-card--interactive:hover { border-color: var(--ds-primary); transform: translateY(-3px); box-shadow: var(--ds-shadow-md); }

.ds-divider { height: 1px; background: var(--ds-border); border: 0; margin: 0; }
.ds-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--ds-primary-tint); color: var(--ds-primary-text); display: grid; place-items: center; font-family: var(--sb-display); font-weight: 600; font-size: 15px; flex-shrink: 0; }
.ds-avatar--ink { background: var(--ds-text); color: var(--ds-bg); }

/* ============================================================
   ALERTS
   ============================================================ */
.ds-alert { display: flex; gap: 13px; padding: 15px 17px; border-radius: 12px; border: 1px solid; align-items: flex-start; }
.ds-alert .ds-ic { width: 19px; height: 19px; flex-shrink: 0; margin-top: 1px; }
.ds-alert__body { display: grid; gap: 3px; }
.ds-alert__title { font-weight: 600; font-size: 15px; color: var(--ds-text); }
.ds-alert__text { font-size: 14px; color: var(--ds-text-2); line-height: 1.5; }
.ds-alert--info { background: var(--ds-info-tint); border-color: color-mix(in srgb, var(--ds-info) 30%, transparent); }
.ds-alert--info .ds-ic { color: var(--ds-info); }
.ds-alert--success { background: var(--ds-success-tint); border-color: color-mix(in srgb, var(--ds-success) 30%, transparent); }
.ds-alert--success .ds-ic { color: var(--ds-success); }
.ds-alert--warning { background: var(--ds-warning-tint); border-color: color-mix(in srgb, var(--ds-warning) 35%, transparent); }
.ds-alert--warning .ds-ic { color: var(--ds-warning); }
.ds-alert--danger { background: var(--ds-danger-tint); border-color: color-mix(in srgb, var(--ds-danger) 35%, transparent); }
.ds-alert--danger .ds-ic { color: var(--ds-danger); }

/* ============================================================
   TOAST
   ============================================================ */
.ds-toast-region { position: fixed; bottom: 24px; right: 24px; display: grid; gap: 12px; z-index: 9999; max-width: 360px; }
.ds-toast {
  display: flex; gap: 12px; align-items: flex-start; background: var(--ds-surface); border: 1px solid var(--ds-border);
  border-radius: 12px; padding: 14px 16px; box-shadow: var(--ds-shadow-lg); animation: ds-toast-in .28s cubic-bezier(.2,.8,.2,1);
}
.ds-toast.is-leaving { animation: ds-toast-out .22s ease forwards; }
@keyframes ds-toast-in { from { opacity: 0; transform: translateY(12px) scale(.98); } }
@keyframes ds-toast-out { to { opacity: 0; transform: translateX(20px); } }
.ds-toast .ds-ic { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }
.ds-toast__title { font-weight: 600; font-size: 14.5px; color: var(--ds-text); }
.ds-toast__text { font-size: 13.5px; color: var(--ds-text-muted); margin-top: 2px; }
.ds-toast--success .ds-ic { color: var(--ds-success); }
.ds-toast--danger .ds-ic { color: var(--ds-danger); }
.ds-toast--info .ds-ic { color: var(--ds-info); }
.ds-toast__close { margin-left: auto; background: transparent; border: 0; color: var(--ds-text-muted); cursor: pointer; padding: 2px; border-radius: 6px; }
.ds-toast__close:hover { background: var(--ds-surface-2); color: var(--ds-text); }

/* ============================================================
   TOOLTIP (CSS)
   ============================================================ */
.ds-tip { position: relative; display: inline-flex; }
.ds-tip__bubble {
  position: absolute; bottom: calc(100% + 9px); left: 50%; transform: translateX(-50%) translateY(4px);
  background: var(--ds-text); color: var(--ds-bg); font-size: 12.5px; font-weight: 500; white-space: nowrap;
  padding: 7px 11px; border-radius: 8px; opacity: 0; pointer-events: none; transition: opacity .15s, transform .15s; z-index: 50;
}
.ds-tip__bubble::after { content:""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: var(--ds-text); }
.ds-tip:hover .ds-tip__bubble, .ds-tip:focus-within .ds-tip__bubble { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ============================================================
   TABS
   ============================================================ */
.ds-tabs__list { display: flex; gap: 4px; border-bottom: 1px solid var(--ds-border); }
.ds-tabs__tab {
  font-family: var(--sb-body); font-size: 15px; font-weight: 500; color: var(--ds-text-muted);
  background: transparent; border: 0; padding: 11px 15px; cursor: pointer; position: relative; transition: color .14s;
}
.ds-tabs__tab:hover { color: var(--ds-text); }
.ds-tabs__tab[aria-selected="true"] { color: var(--ds-primary-text); }
.ds-tabs__tab[aria-selected="true"]::after { content:""; position: absolute; left: 8px; right: 8px; bottom: -1px; height: 2px; background: var(--ds-primary); border-radius: 2px; }
.ds-tabs__panel { padding-top: 18px; }
.ds-tabs__panel[hidden] { display: none; }

/* ============================================================
   BREADCRUMBS / PAGINATION
   ============================================================ */
.ds-breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ds-text-muted); flex-wrap: wrap; }
.ds-breadcrumb a { color: var(--ds-text-muted); text-decoration: none; }
.ds-breadcrumb a:hover { color: var(--ds-primary-text); }
.ds-breadcrumb .sep { color: var(--ds-border-strong); }
.ds-breadcrumb [aria-current] { color: var(--ds-text); font-weight: 600; }

.ds-pagination { display: inline-flex; gap: 4px; }
.ds-pagination button { min-width: 38px; height: 38px; border-radius: 9px; border: 1px solid var(--ds-border-2); background: var(--ds-surface); color: var(--ds-text); font-family: var(--sb-body); font-size: 14px; cursor: pointer; transition: background .14s, border-color .14s; }
.ds-pagination button:hover { background: var(--ds-surface-2); }
.ds-pagination button[aria-current="page"] { background: var(--ds-primary); border-color: var(--ds-primary); color: var(--ds-text-on-primary); }
.ds-pagination button:disabled { opacity: .4; cursor: not-allowed; }

/* ============================================================
   NAVBAR (marketing)
   ============================================================ */
.ds-navbar { display: flex; align-items: center; gap: 24px; padding: 14px 22px; background: var(--ds-surface); border: 1px solid var(--ds-border); border-radius: 14px; }
.ds-navbar__brand { display: flex; align-items: center; gap: 11px; font-family: var(--sb-display); font-weight: 600; font-size: 18px; color: var(--ds-text); text-decoration: none; }
.ds-navbar__links { display: flex; gap: 4px; margin-left: 8px; }
.ds-navbar__links a { font-size: 14.5px; color: var(--ds-text-muted); text-decoration: none; padding: 8px 12px; border-radius: 8px; transition: background .14s, color .14s; }
.ds-navbar__links a:hover { color: var(--ds-text); background: var(--ds-surface-2); }
.ds-navbar__links a[aria-current] { color: var(--ds-text); font-weight: 600; }
.ds-navbar__spacer { margin-left: auto; }

/* ============================================================
   TABLE
   ============================================================ */
.ds-table-wrap { border: 1px solid var(--ds-border); border-radius: 14px; overflow: hidden; }
.ds-table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.ds-table th { text-align: left; font-family: var(--sb-mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ds-text-muted); font-weight: 500; padding: 13px 18px; background: var(--ds-surface-2); border-bottom: 1px solid var(--ds-border); }
.ds-table td { padding: 14px 18px; border-bottom: 1px solid var(--ds-border); color: var(--ds-text-2); }
.ds-table tbody tr:last-child td { border-bottom: 0; }
.ds-table tbody tr { background: var(--ds-surface); transition: background .12s; }
.ds-table tbody tr:hover { background: var(--ds-surface-2); }
.ds-table td .name { color: var(--ds-text); font-weight: 600; }

/* ============================================================
   STATS / LIST GROUP
   ============================================================ */
.ds-stat { background: var(--ds-surface); border: 1px solid var(--ds-border); border-radius: 14px; padding: 20px 22px; display: grid; gap: 6px; }
.ds-stat__label { font-family: var(--sb-mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ds-text-muted); }
.ds-stat__value { font-family: var(--sb-display); font-weight: 600; font-size: 34px; color: var(--ds-text); line-height: 1; letter-spacing: -0.02em; }
.ds-stat__delta { font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }
.ds-stat__delta.up { color: var(--ds-success); }
.ds-stat__delta.down { color: var(--ds-danger); }

.ds-list { border: 1px solid var(--ds-border); border-radius: 14px; overflow: hidden; background: var(--ds-surface); }
.ds-list__item { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-bottom: 1px solid var(--ds-border); }
.ds-list__item:last-child { border-bottom: 0; }
.ds-list__item .t { font-weight: 600; color: var(--ds-text); font-size: 15px; }
.ds-list__item .s { font-size: 13.5px; color: var(--ds-text-muted); }
.ds-list__item .ds-list__end { margin-left: auto; }

/* ============================================================
   CODE BLOCK (content, not the demo viewer)
   ============================================================ */
.ds-codeblock { background: var(--ds-code-bg); color: var(--ds-code-text); border-radius: 12px; padding: 18px 20px; font-family: var(--sb-mono); font-size: 13.5px; line-height: 1.7; overflow-x: auto; }
.ds-codeblock .k { color: #E9A56B; } .ds-codeblock .s { color: #8FC9AE; } .ds-codeblock .c { color: #8A7E6B; } .ds-codeblock .p { color: #B8AC97; }

/* ============================================================
   PROGRESS / SPINNER / ACCORDION
   ============================================================ */
.ds-progress { height: 8px; border-radius: 999px; background: var(--ds-surface-3); overflow: hidden; }
.ds-progress__bar { height: 100%; background: var(--ds-primary); border-radius: 999px; transition: width .4s ease; }
.ds-spinner { width: 22px; height: 22px; border-radius: 50%; border: 2.5px solid var(--ds-border-strong); border-top-color: var(--ds-primary); animation: ds-spin .7s linear infinite; }

.ds-accordion { border: 1px solid var(--ds-border); border-radius: 12px; overflow: hidden; background: var(--ds-surface); }
.ds-accordion__item { border-bottom: 1px solid var(--ds-border); }
.ds-accordion__item:last-child { border-bottom: 0; }
.ds-accordion__head { width: 100%; text-align: left; background: transparent; border: 0; padding: 16px 18px; font-family: var(--sb-body); font-size: 15.5px; font-weight: 600; color: var(--ds-text); cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ds-accordion__head:hover { background: var(--ds-surface-2); }
.ds-accordion__head .chev { width: 18px; height: 18px; color: var(--ds-text-muted); transition: transform .2s; }
.ds-accordion__head[aria-expanded="true"] .chev { transform: rotate(180deg); }
.ds-accordion__panel { padding: 0 18px 18px; color: var(--ds-text-2); font-size: 14.5px; line-height: 1.6; }
.ds-accordion__panel[hidden] { display: none; }

/* ============================================================
   OVERLAYS: modal / drawer / popover
   ============================================================ */
.ds-backdrop { position: fixed; inset: 0; background: var(--ds-overlay); opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 1000; }
.ds-backdrop.is-open { opacity: 1; pointer-events: auto; }

.ds-modal { position: fixed; inset: 0; z-index: 1001; display: grid; place-items: center; padding: 24px; pointer-events: none; }
.ds-modal__panel {
  background: var(--ds-surface); border: 1px solid var(--ds-border); border-radius: 18px; width: min(480px, 100%);
  box-shadow: var(--ds-shadow-lg); opacity: 0; transform: translateY(12px) scale(.98); transition: opacity .2s, transform .2s; pointer-events: auto;
}
.ds-modal.is-open .ds-modal__panel { opacity: 1; transform: none; }
.ds-modal__head { padding: 22px 24px 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.ds-modal__title { font-family: var(--sb-display); font-weight: 600; font-size: 20px; color: var(--ds-text); margin: 0; }
.ds-modal__body { padding: 12px 24px; color: var(--ds-text-2); font-size: 15px; line-height: 1.55; }
.ds-modal__foot { padding: 16px 24px 22px; display: flex; gap: 10px; justify-content: flex-end; }

.ds-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(400px, 100%); background: var(--ds-surface); border-left: 1px solid var(--ds-border); box-shadow: var(--ds-shadow-lg); z-index: 1001; transform: translateX(100%); transition: transform .26s cubic-bezier(.2,.8,.2,1); display: flex; flex-direction: column; }
.ds-drawer.is-open { transform: none; }
.ds-drawer__head { padding: 20px 22px; border-bottom: 1px solid var(--ds-border); display: flex; align-items: center; justify-content: space-between; }
.ds-drawer__body { padding: 22px; overflow-y: auto; color: var(--ds-text-2); font-size: 15px; line-height: 1.6; }

.ds-iconbtn { background: transparent; border: 0; color: var(--ds-text-muted); cursor: pointer; padding: 6px; border-radius: 8px; display: inline-grid; place-items: center; }
.ds-iconbtn:hover { background: var(--ds-surface-2); color: var(--ds-text); }
.ds-iconbtn .ds-ic { width: 19px; height: 19px; }

.ds-ic { display: inline-block; vertical-align: middle; }

/* ============================================================
   POPOVER
   ============================================================ */
.ds-pop-wrap { position: relative; display: inline-flex; }
.ds-pop {
  position: absolute; top: calc(100% + 10px); left: 0; z-index: 60;
  background: var(--ds-surface); border: 1px solid var(--ds-border); border-radius: 14px;
  box-shadow: var(--ds-shadow-lg); padding: 18px; width: 280px;
  opacity: 0; transform: translateY(6px); pointer-events: none; transition: opacity .16s, transform .16s;
}
.ds-pop.is-open { opacity: 1; transform: none; pointer-events: auto; }
.ds-pop__title { font-family: var(--sb-display); font-weight: 600; font-size: 15px; color: var(--ds-text); margin: 0 0 6px; }
.ds-pop__text { font-size: 14px; color: var(--ds-text-2); line-height: 1.5; margin: 0; }
.ds-pop--right { left: auto; right: 0; }

/* ============================================================
   TERMINAL
   ============================================================ */
.ds-terminal { background: var(--ds-code-bg); border: 1px solid var(--ds-border); border-radius: 14px; overflow: hidden; font-family: var(--sb-mono); }
.ds-terminal__bar { display: flex; align-items: center; gap: 7px; padding: 11px 14px; border-bottom: 1px solid rgba(255,255,255,.08); }
.ds-terminal__bar .tdot { width: 11px; height: 11px; border-radius: 50%; background: rgba(255,255,255,.18); }
.ds-terminal__bar .ttl { margin-left: 8px; font-size: 12px; color: #8A7E6B; letter-spacing: .04em; }
.ds-terminal__body { padding: 16px 18px; font-size: 13.5px; line-height: 1.8; color: #D7CDBC; }
.ds-terminal__body .gt { color: var(--ds-primary); margin-right: .5em; }
.ds-terminal__body .c { color: #8A7E6B; }
.ds-terminal__body .ok { color: var(--ds-primary); }

/* ============================================================
   KBD
   ============================================================ */
.ds-kbd { display: inline-flex; align-items: center; gap: 3px; font-family: var(--sb-mono); font-size: 12px; color: var(--ds-text-2); background: var(--ds-surface); border: 1px solid var(--ds-border-2); border-bottom-width: 2px; border-radius: 6px; padding: 3px 7px; min-width: 22px; justify-content: center; }

/* ============================================================
   STEPPER
   ============================================================ */
.ds-stepper { display: flex; align-items: flex-start; gap: 0; }
.ds-step { display: flex; flex-direction: column; align-items: center; gap: 9px; flex: 1; text-align: center; position: relative; }
.ds-step::before { content:""; position: absolute; top: 16px; left: -50%; width: 100%; height: 2px; background: var(--ds-border-2); z-index: 0; }
.ds-step:first-child::before { display: none; }
.ds-step__dot { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--ds-surface-2); color: var(--ds-text-muted); border: 1.5px solid var(--ds-border-2); font-family: var(--sb-display); font-weight: 600; font-size: 14px; position: relative; z-index: 1; transition: background .2s, border-color .2s, color .2s; }
.ds-step__dot .ds-ic { width: 16px; height: 16px; }
.ds-step__label { font-size: 13.5px; color: var(--ds-text-muted); font-weight: 500; max-width: 14ch; }
.ds-step.is-done .ds-step__dot { background: var(--ds-primary); border-color: var(--ds-primary); color: var(--ds-text-on-primary); }
.ds-step.is-done::before { background: var(--ds-primary); }
.ds-step.is-active .ds-step__dot { border-color: var(--ds-primary); color: var(--ds-primary-text); background: var(--ds-primary-tint); }
.ds-step.is-active .ds-step__label, .ds-step.is-done .ds-step__label { color: var(--ds-text); }

/* ============================================================
   TIMELINE
   ============================================================ */
.ds-timeline { display: grid; gap: 0; padding-left: 6px; }
.ds-tl-item { display: grid; grid-template-columns: 28px 1fr; gap: 14px; padding-bottom: 22px; position: relative; }
.ds-tl-item::before { content:""; position: absolute; left: 13px; top: 22px; bottom: -4px; width: 2px; background: var(--ds-border); }
.ds-tl-item:last-child::before { display: none; }
.ds-tl-item:last-child { padding-bottom: 0; }
.ds-tl-dot { width: 28px; height: 28px; border-radius: 50%; background: var(--ds-surface); border: 2px solid var(--ds-border-strong); display: grid; place-items: center; z-index: 1; }
.ds-tl-dot .ds-ic { width: 14px; height: 14px; color: var(--ds-text-muted); }
.ds-tl-item.is-active .ds-tl-dot { background: var(--ds-primary-tint); border-color: var(--ds-primary); }
.ds-tl-item.is-active .ds-tl-dot .ds-ic { color: var(--ds-primary-text); }
.ds-tl-body { padding-top: 2px; }
.ds-tl-body .t { font-weight: 600; color: var(--ds-text); font-size: 15px; }
.ds-tl-body .meta { font-family: var(--sb-mono); font-size: 12px; color: var(--ds-text-muted); margin: 2px 0 5px; }
.ds-tl-body .d { color: var(--ds-text-2); font-size: 14.5px; line-height: 1.5; }

/* ============================================================
   EMPTY STATE
   ============================================================ */
.ds-empty { text-align: center; padding: 44px 28px; display: grid; gap: 8px; justify-items: center; border: 1px dashed var(--ds-border-2); border-radius: 16px; background: var(--ds-surface); }
.ds-empty__glyph { width: 60px; height: 60px; border-radius: 16px; background: var(--ds-surface-2); display: grid; place-items: center; margin-bottom: 6px; }
.ds-empty__glyph .ds-ic { width: 28px; height: 28px; color: var(--ds-text-muted); }
.ds-empty__title { font-family: var(--sb-display); font-weight: 600; font-size: 19px; color: var(--ds-text); }
.ds-empty__text { color: var(--ds-text-muted); font-size: 14.5px; max-width: 40ch; line-height: 1.5; }

/* ============================================================
   AVATAR GROUP + status
   ============================================================ */
.ds-avatar-wrap { position: relative; display: inline-grid; }
.ds-avatar-status { position: absolute; right: -1px; bottom: -1px; width: 12px; height: 12px; border-radius: 50%; border: 2.5px solid var(--ds-surface); background: var(--ds-primary); }
.ds-avatar-status.busy { background: var(--ds-danger); }
.ds-avatar-status.away { background: var(--ds-accent); }
.ds-avatar-group { display: inline-flex; }
.ds-avatar-group > * { margin-left: -10px; box-shadow: 0 0 0 2.5px var(--ds-surface); border-radius: 50%; }
.ds-avatar-group > *:first-child { margin-left: 0; }
.ds-avatar-more { width: 40px; height: 40px; border-radius: 50%; background: var(--ds-surface-2); color: var(--ds-text-muted); display: grid; place-items: center; font-family: var(--sb-mono); font-size: 12.5px; }

/* ============================================================
   BANNER
   ============================================================ */
.ds-banner { display: flex; align-items: center; gap: 13px; padding: 13px 18px; border-radius: 12px; background: var(--ds-text); color: var(--ds-bg); }
.ds-banner .ds-ic { width: 18px; height: 18px; color: var(--ds-primary); flex-shrink: 0; }
.ds-banner__text { font-size: 14.5px; }
.ds-banner__text b { font-weight: 600; }
.ds-banner .ds-banner__action { margin-left: auto; }
.ds-banner__btn { background: var(--ds-bg); color: var(--ds-text); border: 0; border-radius: 8px; padding: 7px 13px; font-family: var(--sb-body); font-weight: 600; font-size: 13.5px; cursor: pointer; white-space: nowrap; }
.ds-banner--primary { background: var(--ds-primary); color: var(--ds-text-on-primary); }
.ds-banner--primary .ds-ic { color: var(--ds-text-on-primary); }
.ds-banner--primary .ds-banner__btn { background: rgba(33,27,20,.14); color: var(--ds-text-on-primary); }

/* ============================================================
   CHIPS / TAG INPUT
   ============================================================ */
.ds-chips-field { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; padding: 9px 11px; border: 1px solid var(--ds-border-2); border-radius: 10px; background: var(--ds-surface); }
.ds-chips-field:focus-within { border-color: var(--ds-primary); box-shadow: 0 0 0 3px var(--ds-ring); }
.ds-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--ds-primary-tint); color: var(--ds-primary-text); font-size: 13.5px; font-weight: 500; padding: 5px 6px 5px 11px; border-radius: 999px; }
.ds-chip button { background: transparent; border: 0; color: currentColor; cursor: pointer; display: grid; place-items: center; padding: 2px; border-radius: 50%; opacity: .7; }
.ds-chip button:hover { opacity: 1; background: rgba(0,0,0,.08); }
.ds-chip button .ds-ic { width: 13px; height: 13px; }
.ds-chips-field input { border: 0; outline: none; background: transparent; font-family: var(--sb-body); font-size: 14.5px; color: var(--ds-text); flex: 1; min-width: 80px; padding: 4px; }


/* ======================== ds-motion.css ======================== */
/* ============================================================
   SERIOUS BITS — Design System · Motion layer
   Reveal-on-scroll, micro-interactions, the signature cursor,
   skeletons, and the playful "bits burst".
   All gated on .ds-js (so no-JS / print show content) and on
   prefers-reduced-motion.
   ============================================================ */

/* ---------- reveal on scroll ---------- */
.ds-js [data-reveal] { opacity: 0; transition: opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1); will-change: opacity, transform; }
.ds-js [data-reveal="up"]    { transform: translateY(20px); }
.ds-js [data-reveal="down"]  { transform: translateY(-20px); }
.ds-js [data-reveal="left"]  { transform: translateX(24px); }
.ds-js [data-reveal="right"] { transform: translateX(-24px); }
.ds-js [data-reveal="scale"] { transform: scale(.94); }
.ds-js [data-reveal].is-revealed { opacity: 1; transform: none; }

/* stagger: children animate in sequence */
.ds-js [data-reveal-children] > * { opacity: 0; transform: translateY(16px); transition: opacity .55s cubic-bezier(.2,.7,.2,1), transform .55s cubic-bezier(.2,.7,.2,1); }
.ds-js [data-reveal-children].is-revealed > * { opacity: 1; transform: none; }
.ds-js [data-reveal-children].is-revealed > *:nth-child(1){transition-delay:.00s}
.ds-js [data-reveal-children].is-revealed > *:nth-child(2){transition-delay:.07s}
.ds-js [data-reveal-children].is-revealed > *:nth-child(3){transition-delay:.14s}
.ds-js [data-reveal-children].is-revealed > *:nth-child(4){transition-delay:.21s}
.ds-js [data-reveal-children].is-revealed > *:nth-child(5){transition-delay:.28s}
.ds-js [data-reveal-children].is-revealed > *:nth-child(6){transition-delay:.35s}

/* ---------- the signature cursor ---------- */
.ds-cursor {
  display: inline-block; width: .5em; height: 1em; border-radius: .12em;
  background: var(--ds-primary); transform: rotate(-8deg); vertical-align: text-bottom;
  margin-left: .12em; animation: ds-blink 1.1s steps(1, end) infinite;
}
.ds-cursor--sm { width: .42em; height: .9em; }
@keyframes ds-blink { 0%,50%{opacity:1} 50.01%,100%{opacity:0} }

/* prompt glyph + cursor as a unit */
.ds-prompt { display: inline-flex; align-items: baseline; gap: .2em; font-family: var(--sb-mono); }
.ds-prompt .gt { color: var(--ds-primary); }

/* ---------- loading dots (working state) ---------- */
.ds-dots { display: inline-flex; gap: 5px; align-items: center; }
.ds-dots i { width: 7px; height: 7px; border-radius: 2px; background: var(--ds-primary); display: block; transform: rotate(8deg); animation: ds-pulse 1.25s ease-in-out infinite; }
.ds-dots i:nth-child(2){ animation-delay:.16s } .ds-dots i:nth-child(3){ animation-delay:.32s }
@keyframes ds-pulse { 0%,100%{opacity:.25; transform:translateY(0) rotate(8deg)} 50%{opacity:1; transform:translateY(-4px) rotate(8deg)} }

/* live pulse dot */
.ds-livedot { position: relative; width: 9px; height: 9px; border-radius: 50%; background: var(--ds-primary); display: inline-block; }
.ds-livedot::after { content:""; position: absolute; inset: 0; border-radius: 50%; background: var(--ds-primary); animation: ds-ping 1.6s cubic-bezier(0,0,.2,1) infinite; }
@keyframes ds-ping { 0%{ transform: scale(1); opacity:.6 } 80%,100%{ transform: scale(2.6); opacity:0 } }

/* ---------- skeleton / shimmer ---------- */
.ds-skeleton { position: relative; overflow: hidden; background: var(--ds-surface-2); border-radius: 8px; }
.ds-skeleton::after { content:""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--ds-surface-3) 70%, transparent), transparent); animation: ds-shimmer 1.5s infinite; }
@keyframes ds-shimmer { 100% { transform: translateX(100%); } }
.ds-skel-line { height: 12px; border-radius: 6px; }
.ds-skel-line.sk-60 { width: 60%; } .ds-skel-line.sk-80 { width: 80%; } .ds-skel-line.sk-40 { width: 40%; }
.ds-skel-circle { width: 44px; height: 44px; border-radius: 50%; }

/* ---------- hover micro-interactions ---------- */
.ds-lift { transition: transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s; }
.ds-lift:hover { transform: translateY(-4px); box-shadow: var(--ds-shadow-md); }

/* a "bit" that pops on hover — used on playful buttons */
.ds-btn .bit { display:inline-block; width:7px; height:7px; border-radius:2px; background:currentColor; transform: rotate(8deg) scale(1); transition: transform .2s cubic-bezier(.2,1.6,.4,1); }
.ds-btn:hover .bit { transform: rotate(8deg) scale(1.5) translateY(-1px); }

/* animated underline link */
.ds-ulink { position: relative; text-decoration: none; color: var(--ds-primary-text); }
.ds-ulink::after { content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; background: var(--ds-primary); transform: scaleX(0); transform-origin: left; transition: transform .25s cubic-bezier(.2,.8,.2,1); }
.ds-ulink:hover::after { transform: scaleX(1); }

/* ---------- bits burst (confetti of little squares) ---------- */
.ds-burst-piece { position: fixed; width: 9px; height: 9px; border-radius: 2px; pointer-events: none; z-index: 9998; will-change: transform, opacity; }

/* ---------- count-up tabular figures ---------- */
.ds-countup { font-variant-numeric: tabular-nums; }

/* ---------- command palette (⌘K) ---------- */
.ds-cmdk { position: fixed; inset: 0; z-index: 1200; display: grid; place-items: start center; padding-top: 14vh; pointer-events: none; }
.ds-cmdk__scrim { position: fixed; inset: 0; background: var(--ds-overlay); opacity: 0; transition: opacity .18s; }
.ds-cmdk.is-open { pointer-events: auto; }
.ds-cmdk.is-open .ds-cmdk__scrim { opacity: 1; }
.ds-cmdk__panel { position: relative; width: min(560px, 92vw); background: var(--ds-surface); border: 1px solid var(--ds-border); border-radius: 16px; box-shadow: var(--ds-shadow-lg); overflow: hidden; opacity: 0; transform: translateY(-10px) scale(.98); transition: opacity .18s, transform .18s; }
.ds-cmdk.is-open .ds-cmdk__panel { opacity: 1; transform: none; }
.ds-cmdk__input-row { display: flex; align-items: center; gap: 10px; padding: 15px 17px; border-bottom: 1px solid var(--ds-border); }
.ds-cmdk__input-row .ds-ic { width: 18px; height: 18px; color: var(--ds-text-muted); }
.ds-cmdk__input { flex: 1; border: 0; background: transparent; font-family: var(--sb-body); font-size: 16px; color: var(--ds-text); outline: none; }
.ds-cmdk__list { max-height: 320px; overflow-y: auto; padding: 8px; }
.ds-cmdk__group { font-family: var(--sb-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ds-text-muted); padding: 10px 10px 6px; }
.ds-cmdk__item { display: flex; align-items: center; gap: 11px; padding: 10px 11px; border-radius: 9px; cursor: pointer; color: var(--ds-text-2); font-size: 14.5px; }
.ds-cmdk__item .ds-ic { width: 17px; height: 17px; color: var(--ds-text-muted); }
.ds-cmdk__item[aria-selected="true"] { background: var(--ds-primary-tint); color: var(--ds-primary-text); }
.ds-cmdk__item[aria-selected="true"] .ds-ic { color: var(--ds-primary-text); }
.ds-cmdk__item .end { margin-left: auto; }
.ds-cmdk__empty { padding: 26px; text-align: center; color: var(--ds-text-muted); font-size: 14px; }
.ds-cmdk__foot { display: flex; gap: 14px; align-items: center; padding: 10px 15px; border-top: 1px solid var(--ds-border); background: var(--ds-surface-2); font-family: var(--sb-mono); font-size: 11px; color: var(--ds-text-muted); }

/* ---------- reduced motion: turn it all off ---------- */
@media (prefers-reduced-motion: reduce) {
  .ds-js [data-reveal], .ds-js [data-reveal-children] > * { opacity: 1 !important; transform: none !important; transition: none !important; }
  .ds-cursor, .ds-dots i, .ds-livedot::after, .ds-skeleton::after { animation: none !important; }
  .ds-livedot::after { display: none; }
  .ds-lift:hover { transform: none; }
}


/* ======================== ds-quotes.css ======================== */
/* ============================================================
   SERIOUS BITS — Quotestorm styles
   Quote primitive + terminal stream + drifting wall + deck +
   mosaic. Uses semantic tokens (themes light & dark).
   ============================================================ */

/* ---------------- quote card primitive ---------------- */
.ds-quote {
  position: relative; margin: 0; background: var(--ds-surface);
  border: 1px solid var(--ds-border); border-radius: 16px; padding: 26px 24px 20px;
  display: flex; flex-direction: column; gap: 14px; break-inside: avoid;
}
.ds-quote__mark { position: absolute; top: 6px; left: 18px; font-family: var(--sb-display); font-weight: 700; font-size: 56px; line-height: 1; color: var(--ds-primary); opacity: .28; }
.ds-quote__text { margin: 10px 0 0; font-family: var(--sb-display); font-weight: 500; font-size: 19px; line-height: 1.4; letter-spacing: -0.01em; color: var(--ds-text); }
.ds-quote__by { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: auto; }
.ds-quote__by .who { font-family: var(--sb-mono); font-size: 12.5px; color: var(--ds-text-muted); letter-spacing: .02em; }
.ds-quote__by .who.own { color: var(--ds-primary-text); }
.ds-quote__tag { font-family: var(--sb-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ds-primary-text); background: var(--ds-primary-tint); padding: 3px 9px; border-radius: 999px; margin-left: auto; }

/* ---------------- A · terminal stream ---------------- */
.ds-qstream { background: var(--ds-code-bg); border: 1px solid var(--ds-border); border-radius: 16px; overflow: hidden; }
.ds-qstream__bar { display: flex; align-items: center; gap: 7px; padding: 12px 15px; border-bottom: 1px solid rgba(255,255,255,.08); }
.ds-qstream__bar .tdot { width: 11px; height: 11px; border-radius: 50%; background: rgba(255,255,255,.16); }
.ds-qstream__bar .ttl { margin-left: 8px; font-family: var(--sb-mono); font-size: 12px; color: #8A7E6B; letter-spacing: .04em; }
.ds-qstream__bar .hint { margin-left: auto; font-family: var(--sb-mono); font-size: 11px; color: #6E6353; }
.ds-qstream__body { padding: 30px 26px 26px; min-height: 168px; display: flex; flex-direction: column; justify-content: center; gap: 16px; }
.ds-qstream__line { font-family: var(--sb-display); font-weight: 500; font-size: clamp(20px, 2.6vw, 27px); line-height: 1.4; color: #F1E9DB; letter-spacing: -0.01em; }
.ds-qstream__line .gt { color: var(--ds-primary); margin-right: .5em; font-family: var(--sb-mono); font-weight: 400; }
.ds-qstream__line .ds-cursor { background: var(--ds-primary); }
.ds-qstream__by { font-family: var(--sb-mono); font-size: 13px; color: #9DBFA9; letter-spacing: .03em; transition: opacity .4s ease; min-height: 18px; padding-left: 1.6em; }
.ds-qstream__skip { background: transparent; border: 0; color: #8A7E6B; cursor: pointer; font-family: var(--sb-mono); font-size: 11px; padding: 0; }
.ds-qstream__skip:hover { color: var(--ds-primary); }

/* ---------------- B · drifting bit-wall ---------------- */
.ds-wall { display: grid; gap: 14px; overflow: hidden; padding: 4px 0; position: relative; }
.ds-wall::before, .ds-wall::after { content:""; position: absolute; top: 0; bottom: 0; width: 80px; z-index: 2; pointer-events: none; }
.ds-wall::before { left: 0; background: linear-gradient(90deg, var(--ds-bg), transparent); }
.ds-wall::after { right: 0; background: linear-gradient(270deg, var(--ds-bg), transparent); }
.ds-wall__row { overflow: hidden; }
.ds-wall__track { display: inline-flex; gap: 12px; white-space: nowrap; animation: ds-wall-scroll 40s linear infinite; will-change: transform; }
.ds-wall__row:hover .ds-wall__track { animation-play-state: paused; }
@keyframes ds-wall-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.ds-qbit {
  display: inline-flex; flex-direction: column; gap: 6px; text-align: left;
  background: var(--ds-surface); border: 1px solid var(--ds-border); border-radius: 12px;
  padding: 14px 18px; cursor: pointer; min-width: 250px; max-width: 320px; white-space: normal;
  transition: border-color .16s, transform .16s, box-shadow .16s;
}
.ds-qbit:hover { border-color: var(--ds-primary); transform: translateY(-2px); box-shadow: var(--ds-shadow-md); }
.ds-qbit__t { font-family: var(--sb-display); font-weight: 500; font-size: 15px; line-height: 1.35; color: var(--ds-text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-height: 2.7em; }
.ds-qbit__a { font-family: var(--sb-mono); font-size: 11px; color: var(--ds-text-muted); }
.ds-qbit__a.own { color: var(--ds-primary-text); }

/* focus lightbox */
.ds-qfocus { position: fixed; inset: 0; z-index: 1300; display: grid; place-items: center; padding: 24px; pointer-events: none; }
.ds-qfocus__scrim { position: fixed; inset: 0; background: var(--ds-overlay); opacity: 0; transition: opacity .2s; }
.ds-qfocus.is-open { pointer-events: auto; }
.ds-qfocus.is-open .ds-qfocus__scrim { opacity: 1; }
.ds-qfocus__panel { position: relative; width: min(560px, 92vw); opacity: 0; transform: scale(.96) translateY(8px); transition: opacity .2s, transform .2s; }
.ds-qfocus.is-open .ds-qfocus__panel { opacity: 1; transform: none; }
.ds-qfocus__panel .ds-quote { box-shadow: var(--ds-shadow-lg); }
.ds-qfocus__panel .ds-quote__text { font-size: 25px; }

/* ---------------- C · shuffle deck ---------------- */
.ds-deck { display: grid; gap: 18px; justify-items: center; }
.ds-deck__slot { width: min(560px, 100%); position: relative; }
.ds-deck__slot .ds-quote { animation: ds-deck-in .4s cubic-bezier(.2,.8,.2,1); }
.ds-deck__slot .ds-quote__text { font-size: 24px; }
@keyframes ds-deck-in { from { opacity: 0; transform: translateY(12px) scale(.98); } }
.ds-deck__controls { display: flex; align-items: center; gap: 14px; }
.ds-deck__hint { font-family: var(--sb-mono); font-size: 12px; color: var(--ds-text-muted); }

/* ---------------- D · mosaic ---------------- */
.ds-qtags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.ds-qtag { font-family: var(--sb-mono); font-size: 12.5px; letter-spacing: .02em; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--ds-border-2); background: var(--ds-surface); color: var(--ds-text-muted); cursor: pointer; transition: all .14s; }
.ds-qtag:hover { border-color: var(--ds-border-strong); color: var(--ds-text); }
.ds-qtag.is-active { background: var(--ds-primary); border-color: var(--ds-primary); color: var(--ds-text-on-primary); }
.ds-mosaic { columns: 3 240px; column-gap: 16px; }
.ds-mosaic .ds-quote { margin-bottom: 16px; }
@media (max-width: 640px){ .ds-mosaic { columns: 1; } }

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ds-wall__track { animation: none !important; flex-wrap: wrap; white-space: normal; }
  .ds-deck__slot .ds-quote, .ds-qfocus__panel { animation: none !important; }
}