@font-face{font-family:Inter;font-style:normal;font-weight:500;font-display:swap;src:url('/guides/inter-latin-500-normal.woff2') format('woff2');}
@font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap;src:url('/guides/inter-latin-400-normal.woff2') format('woff2');}
@font-face{font-family:Inter;font-style:normal;font-weight:300;font-display:swap;src:url('/guides/inter-latin-300-normal.woff2') format('woff2');}
/* ============================================================
   DEFINITELY HUMAN — ElevenLabs style reference
   Warm cream editorial. Whisper-weight headlines.
   Every value below comes from the supplied spec. Do not invent
   fonts, colours, spacing or radii. See DESIGN.md.
   ============================================================ */






:root {
  /* --- Colors --- */
  --color-eggshell:     #fdfcfc;
  --color-warm-taupe:   #f5f3f1;
  --color-stone:        #ebe8e4;
  --color-ink:          #000000;
  --color-graphite:     #44403b;
  --color-smoke:        #777169;
  --color-ash:          #a59f97;
  --color-violet-spark: #0447ff;
  --color-ember-orange: #ff4704;
  --color-button-border:#e5e5e5;

  /* --- Type families. Waldenburg is proprietary. The spec names
         Inter 300 as its own substitute. Geist Mono substitute:
         JetBrains Mono. Nothing here is invented. --- */
  --font-waldenburg: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-inter:      'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-geist-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* --- Type scale --- */
  --text-caption: 10px;    --leading-caption: 1.6;
  --text-body-sm: 14px;    --leading-body-sm: 1.5;     --tracking-body-sm: 0.14px;
  --text-body: 16px;       --leading-body: 1.5;        --tracking-body: 0.16px;
  --text-subheading: 18px; --leading-subheading: 1.6;
  --text-body-lg: 20px;    --leading-body-lg: 1.35;
  --text-heading-sm: 32px; --leading-heading-sm: 1.13; --tracking-heading-sm: -0.64px;
  --text-heading: 36px;    --leading-heading: 1.17;    --tracking-heading: -0.72px;
  --text-display: 48px;    --leading-display: 1.08;    --tracking-display: -0.96px;

  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;

  /* --- Spacing, 4px base --- */
  --spacing-4: 4px;   --spacing-8: 8px;   --spacing-12: 12px; --spacing-16: 16px;
  --spacing-20: 20px; --spacing-24: 24px; --spacing-28: 28px; --spacing-32: 32px;
  --spacing-36: 36px; --spacing-40: 40px; --spacing-48: 48px; --spacing-56: 56px;
  --spacing-64: 64px; --spacing-72: 72px; --spacing-96: 96px; --spacing-160: 160px;

  /* --- Layout --- */
  --page-max-width: 1280px;
  --page-gutter: var(--spacing-64);
  --section-gap: 96px;
  --card-padding: var(--spacing-32);

  /* --- Radius --- */
  --radius-md: 4px;   --radius-lg: 10px;  --radius-2xl: 16px;
  --radius-cards: 20px; --radius-large-cards: 24px; --radius-full: 9999px;
  --radius-inputs: 4px; --radius-buttons: 9999px; --radius-tags: 9999px;

  /* --- Shadows --- */
  --shadow-subtle: rgba(0,0,0,0.4) 0px 0px 1px 0px, rgba(0,0,0,0.04) 0px 1px 1px 0px, rgba(0,0,0,0.04) 0px 2px 4px 0px;
  --shadow-subtle-2: rgba(0,0,0,0.075) 0px 0px 0px 0.5px inset;
  --shadow-subtle-7: rgb(235,232,228) 0px 0px 0px 0.5px inset;

  /* --- Surfaces: eggshell -> taupe -> stone. Never pure white. --- */
  --surface-1: var(--color-eggshell);
  --surface-2: var(--color-warm-taupe);
  --surface-3: var(--color-stone);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--surface-1);
  color: var(--color-ink);
  font-family: var(--font-inter);
  font-size: var(--text-body);
  font-weight: var(--font-weight-regular);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { max-width: 100%; height: auto; }

/* --- Display type. HARD RULE: weight 300 only. Never bold. --- */
h1, .display {
  font-family: var(--font-waldenburg);
  font-weight: var(--font-weight-light);
  font-size: var(--text-display);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  margin: 0;
  text-wrap: balance;
}
h2 {
  font-family: var(--font-waldenburg);
  font-weight: var(--font-weight-light);
  font-size: var(--text-heading);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  margin: 0 0 var(--spacing-20);
  text-wrap: balance;
}
h3 {
  font-family: var(--font-waldenburg);
  font-weight: var(--font-weight-light);
  font-size: var(--text-heading-sm);
  line-height: var(--leading-heading-sm);
  letter-spacing: var(--tracking-heading-sm);
  margin: 0 0 var(--spacing-12);
}

p { margin: 0 0 var(--spacing-16); }
.body-lg { font-size: var(--text-body-lg); line-height: var(--leading-body-lg); letter-spacing: normal; }
.body-sm { font-size: var(--text-body-sm); line-height: var(--leading-body-sm); letter-spacing: var(--tracking-body-sm); }
.caption { font-size: var(--text-caption); line-height: var(--leading-caption); }
.smoke { color: var(--color-smoke); }
.ash   { color: var(--color-ash); }
.graphite { color: var(--color-graphite); }
.mono { font-family: var(--font-geist-mono); font-size: 13px; line-height: 1.69; }

a { color: var(--color-ink); text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--color-ink); outline-offset: 2px; }

/* --- Layout --- */
.wrap {
  max-width: var(--page-max-width);
  margin-inline: auto;
  padding-inline: var(--page-gutter);
}
section { padding-block: var(--section-gap); }
.band { background: var(--surface-2); }

/* --- Hairline divider. Preferred over whitespace for explicit separation. --- */
.rule { border: 0; border-top: 1px solid var(--color-stone); margin: 0; }

/* ============================================================
   COMPONENTS
   ============================================================ */

/* Filled Pill Button — primary action */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-inter);
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-medium);
  line-height: 1;
  padding: 12px var(--spacing-16);
  border-radius: var(--radius-buttons);
  background: var(--color-ink);
  color: var(--color-eggshell);
  border: 1px solid var(--color-button-border);
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--shadow-subtle);
}
.btn:hover { opacity: .88; }
.btn:disabled { opacity: .5; cursor: wait; }

/* Outline Pill Button — secondary action */
.btn-outline {
  background: var(--color-eggshell);
  color: var(--color-ink);
  padding: 12px 14px;
  box-shadow: none;
}
.btn-outline:hover { background: var(--surface-2); opacity: 1; }

/* Ghost Link Button — tertiary nav */
.btn-ghost {
  background: transparent;
  color: var(--color-ink);
  border: 1px solid transparent;
  padding: 8px 14px;
  box-shadow: none;
}
.btn-ghost:hover { border-color: var(--color-button-border); }

/* Feature Card (Taupe) — dominant card pattern. Flat, no border, no shadow. */
.card {
  background: var(--surface-2);
  border-radius: var(--radius-cards);
  padding: var(--card-padding);
}
.card-lg { border-radius: var(--radius-large-cards); padding: var(--spacing-40) var(--card-padding); }

/* White Card with whisper shadow — used sparingly */
.card-white {
  background: var(--color-eggshell);
  border-radius: var(--radius-cards);
  padding: var(--spacing-16);
  box-shadow: var(--shadow-subtle);
}

/* Stone plate — icon plates and small isolated surfaces */
.plate { background: var(--surface-3); border-radius: var(--radius-lg); }

/* Tag / tab pill */
.tag {
  display: inline-flex; align-items: center; gap: var(--spacing-8);
  border-radius: var(--radius-tags);
  background: var(--color-eggshell);
  border: 1px solid var(--color-button-border);
  padding: 6px 12px;
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
}
.dot { width: 8px; height: 8px; border-radius: var(--radius-full); display: inline-block; flex: none; }

/* --- Responsive: scale steps down, gutters tighten. --- */
@media (max-width: 900px) {
  :root {
    --page-gutter: var(--spacing-32);
    --section-gap: 72px;
    --text-display: 36px;
    --tracking-display: -0.72px;
    --text-heading: 32px;
    --tracking-heading: -0.64px;
    --text-heading-sm: 24px;
    --tracking-heading-sm: -0.48px;
  }
}
@media (max-width: 560px) {
  :root {
    --page-gutter: var(--spacing-24);
    --section-gap: 56px;
    --text-display: 32px;
    --tracking-display: -0.64px;
    --card-padding: var(--spacing-24);
  }
}

/* Guide layout uses the site's shared tokens and type rules. */
body{overflow-x:visible}.wrap{max-width:880px;margin-inline:auto;padding-inline:24px}
section{padding:64px 0}.topnav{border-bottom:1px solid var(--color-stone)}
.topnav-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:72px}
.topnav-logo,.footer-brand{display:flex;align-items:center;gap:8px;text-decoration:none;font-weight:500}
.topnav-logo img,.footer-brand img{width:22px;height:15px;flex:none}
.topnav-links{display:flex;gap:24px}.topnav-links a{font-size:14px;text-decoration:none}
h1{font-size:clamp(36px,6vw,48px);max-width:23ch}h2{font-size:32px}h3,.g-title{font-size:24px;font-weight:300;letter-spacing:-.02em}
p{max-width:65ch}.statement{font-size:20px}.sub,.g-desc,.fdesc,.footnote,.count,.breadcrumb{color:var(--color-graphite)}
.eyebrow,.ex-label,.code-label,.g-tag{font-size:14px;color:var(--color-graphite);margin-bottom:16px}.marker{display:none}
.card-section{background:var(--color-warm-taupe)}.tag-row,.btn-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.tag,.g-tag,.example-tag{display:inline-block;border:1px solid var(--color-stone);border-radius:9999px;padding:8px 16px;font-size:14px}
.btn,.copy-btn,.expand-btn{background:var(--color-ink);color:var(--color-eggshell);border:1px solid var(--color-ink);border-radius:9999px;padding:12px 20px;font:500 14px Inter,sans-serif;cursor:pointer;text-decoration:none}
.text-link{border:0;background:none;font:inherit;text-decoration:underline;cursor:pointer;color:var(--color-ink)}
.frow{display:grid;grid-template-columns:32px 1fr;gap:16px;padding:24px 0;border-top:1px solid var(--color-stone)}.fterm{font-weight:500;margin-bottom:8px}
.code-wrap,.ex-card{border:1px solid var(--color-stone);border-radius:20px;overflow:hidden;margin-top:24px}
.code-head{display:flex;align-items:center;justify-content:space-between;padding:16px;background:var(--color-warm-taupe)}.code-label{margin:0}
pre{margin:0;padding:24px;background:var(--color-ink);color:var(--color-eggshell);overflow:auto;font:14px/1.65 monospace;max-height:600px}.collapsed pre{max-height:230px}.expand-btn{display:block;margin:16px}
.ex-card{padding:24px}.ex-row{margin-bottom:24px}.ex-val{margin-top:8px}.ex-val.quote{font-style:italic}
.out-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.out-card{padding:24px;border:1px solid var(--color-stone);border-radius:20px}
.quote-block q{font-size:28px;font-weight:300}.quote-attr{display:block;margin-top:16px}
.g-card{display:grid;grid-template-columns:1fr auto;gap:24px;text-decoration:none;color:inherit;padding:32px;border:1px solid var(--color-stone);border-radius:24px;background:var(--color-warm-taupe)}
.g-arrow{font-size:24px}.empty-row{padding:24px 0}footer{padding:48px 24px;font-size:14px}a:focus-visible,button:focus-visible{outline:2px solid var(--color-ink);outline-offset:4px}
@media(max-width:600px){section{padding:40px 0}.topnav-inner{flex-wrap:wrap;padding-block:16px}.topnav-links{gap:20px}.out-grid{grid-template-columns:1fr}.g-card{padding:24px}.code-head{gap:12px}.code-label{overflow-wrap:anywhere}}