/* ============================================================================
   Pulse design system — verbatim slice of pulse-signals/src/v011/ui.html
   (the <style> block, tokens through chrome; page-specific classes excluded).
   Frozen copy taken 2026-09-10. Fix in pulse-signals first, then re-copy with
   tools/sync-engine.sh so the two funnels cannot drift apart silently.

   Needs the two Satoshi files served from /static/fonts/ and the .bg + .grain
   layers in the markup — a flat dark background makes the glass render as
   nothing, which is the one mistake this file cannot survive.
/* Satoshi (Fontshare / Indian Type Foundry) — one variable file covers 300 to 900, so the whole
   interface loads from 42 KB and no weight is ever synthesised by the browser. */
@font-face{font-family:'Satoshi';src:url('/static/fonts/Satoshi-Variable.woff2') format('woff2-variations');
  font-weight:300 900;font-style:normal;font-display:swap}
@font-face{font-family:'Satoshi';src:url('/static/fonts/Satoshi-VariableItalic.woff2') format('woff2-variations');
  font-weight:300 900;font-style:italic;font-display:swap}
/* Pulse design system.
   Token values measured from the ElevenLabs product surface: 46px controls, 12px radius, 1px alpha
   borders, 14/20 w500 labels, 0.075s transitions, neutral #1E1E1E ground, secondary text at 68.6%
   white, tight tracking on display type and loose tracking on small type. No gradients, no glows,
   no nested cards, no decorative pills. */
:root{
  /* ground — a shade warmer than neutral grey, so the glass above it has something to pick up */
  --bg:#141416; --surface:#1c1c1f; --raised:#232327; --sunken:#0f0f11;
  /* glass: the saturate() is the part that reads as glass rather than frosted plastic — it pulls
     colour out of whatever sits behind, which is why the background below has to have any */
  --glass:rgba(255,255,255,.045); --glass-strong:rgba(255,255,255,.07);
  --glass-line:rgba(255,255,255,.10); --glass-line-top:rgba(255,255,255,.16);
  --blur:blur(24px) saturate(180%); --blur-lg:blur(40px) saturate(190%);
  --hi:inset 0 1px 0 rgba(255,255,255,.07);
  --line:rgba(255,255,255,.11); --line-2:rgba(255,255,255,.06); --line-3:rgba(255,255,255,.18);
  --txt:#fff; --t2:rgba(255,255,255,.686); --t3:rgba(255,255,255,.44); --t4:rgba(255,255,255,.28);
  --accent:#c8f284; --accent-ink:#1c2417; --accent-line:rgba(200,242,132,.34); --accent-wash:rgba(200,242,132,.08);
  --up:#5ddc8c; --down:#ff6b6b; --warn:#f0b95c;
  /* control geometry */
  --h-lg:46px; --h-md:36px; --h-sm:28px;
  --r-xs:4px; --r-sm:8px; --r:12px; --r-lg:16px; --r-full:9999px;
  --fast:.075s;
  --rail:272px;
  --font:'Satoshi',Inter,system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{background:var(--bg);color:var(--txt);height:100%}
/* Three fixed layers behind everything: two wide colour fields, a chart grid, and grain. Flat dark
   grey is what makes an interface feel cheap — and blurring nothing produces nothing, so the glass
   above needs this to exist. */
.bg{position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(64rem 40rem at 50% 22%, rgba(120,235,160,.115), transparent 62%),
    radial-gradient(70rem 46rem at 50% 46%, rgba(60,180,150,.085), transparent 64%),
    radial-gradient(52rem 40rem at 2% 30%, rgba(110,150,255,.085), transparent 60%),
    radial-gradient(58rem 44rem at 100% 58%, rgba(255,150,105,.07), transparent 62%),
    linear-gradient(180deg, #17191c 0%, #14181a 38%, #121618 62%, #101214 100%)}
.bg:after{content:'';position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.032) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(255,255,255,.032) 1px, transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(120rem 70rem at 50% 0%, #000 30%, transparent 78%);
  mask-image:radial-gradient(120rem 70rem at 50% 0%, #000 30%, transparent 78%)}
/* grain: the single thing that stops a dark screen reading as flat plastic */
.grain{position:fixed;inset:-50%;z-index:-1;pointer-events:none;opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
@media(prefers-reduced-motion:no-preference){.grain{animation:grainshift 8s steps(6) infinite}}
@keyframes grainshift{
  0%{transform:translate(0,0)} 16%{transform:translate(-3%,-2%)} 33%{transform:translate(2%,-3%)}
  50%{transform:translate(-2%,3%)} 66%{transform:translate(3%,2%)} 83%{transform:translate(-3%,1%)}
  100%{transform:translate(0,0)}}
body{font:400 14px/20px var(--font);-webkit-font-smoothing:antialiased;letter-spacing:.01em}
button{font-family:inherit;color:inherit;background:none;border:0;cursor:pointer;font-size:inherit;letter-spacing:inherit}
input,textarea,select{font-family:inherit;color:inherit;letter-spacing:inherit}
a{color:inherit;text-decoration:none}
table{border-collapse:collapse}
.m{font-variant-numeric:tabular-nums;letter-spacing:0}
.up{color:var(--up)} .dn{color:var(--down)}
:focus-visible{outline:1px solid var(--accent);outline-offset:2px;border-radius:var(--r-xs)}
[hidden]{display:none!important}
::selection{background:rgba(200,242,132,.22)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.13);border-radius:var(--r-full);border:3px solid var(--bg)}

/* ---------- type scale ---------- */
h1{font-size:40px;line-height:44px;font-weight:300;letter-spacing:-.02em}
h2{font-size:24px;line-height:32px;font-weight:600;letter-spacing:-.02em}
h3{font-size:20px;line-height:28px;font-weight:600;letter-spacing:-.02em}
.lede{font-size:16px;line-height:24px;color:var(--t2);letter-spacing:.01em}
.sec{font-size:12px;line-height:16px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--t3)}
.small{font-size:13px;line-height:18px;color:var(--t2)}
.micro{font-size:12px;line-height:16px;color:var(--t3)}
.num{font-variant-numeric:tabular-nums;letter-spacing:-.01em;font-weight:600}

/* ---------- controls ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:var(--h-md);padding:0 14px;
  border-radius:var(--r);border:1px solid var(--glass-line);font-size:14px;line-height:20px;font-weight:500;
  background:var(--glass);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);box-shadow:var(--hi);
  transition:background var(--fast),border-color var(--fast),color var(--fast)}
.btn:hover{background:var(--glass-strong);border-color:var(--glass-line-top)}
/* .btn is used on anchors too, where the browser would otherwise underline and recolour it */
a.btn{text-decoration:none;color:var(--txt)}
a.btn.pri{color:var(--accent-ink)}
.btn.pri{background:var(--accent);color:var(--accent-ink);border-color:transparent}
.btn.pri:hover{background:#d3f79a}
.btn.big{height:var(--h-lg);padding:0 20px}
.btn.sm{height:var(--h-sm);padding:0 10px;font-size:13px;border-radius:var(--r-sm)}
.btn.quiet{border-color:transparent;color:var(--t2)}
.btn.quiet:hover{color:var(--txt);background:rgba(255,255,255,.05)}
.btn[disabled]{opacity:.4;pointer-events:none}
.btn svg{width:15px;height:15px}
.field{width:100%;height:var(--h-lg);background:var(--glass);backdrop-filter:var(--blur);
  -webkit-backdrop-filter:var(--blur);border:1px solid var(--glass-line);border-radius:var(--r);
  padding:4px 16px;font-size:14px;line-height:20px;outline:0;transition:border-color var(--fast)}
.field:focus{border-color:var(--line-3)}
.field::placeholder{color:var(--t3)}

/* ---------- chrome ---------- */
.top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 20px;height:52px;
  border-bottom:1px solid var(--line-2);position:sticky;top:0;z-index:30;
  background:rgba(20,20,22,.62);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur)}
.logo{display:flex;align-items:center;gap:9px;font-size:14px;font-weight:600;letter-spacing:-.01em}
.logo i{width:20px;height:20px;border-radius:var(--r-xs);background:var(--accent);display:inline-flex;align-items:center;justify-content:center}
.logo i svg{width:12px;height:12px}
.topright{display:flex;align-items:center;gap:4px}
.topright button,.topright a{height:32px;padding:4px 12px;border-radius:var(--r-sm);font-size:14px;line-height:20px;
  color:var(--t2);display:inline-flex;align-items:center;transition:background var(--fast),color var(--fast)}
.topright button:hover,.topright a:hover{color:var(--txt);background:rgba(255,255,255,.05)}
.logo{text-decoration:none;color:var(--txt)}