:root{
  --paper:#F7F8F6;
  --paper-raised:#FFFFFF;
  --ink:#171A1A;
  --ink-soft:#4B5452;
  --muted:#7A8482;
  --line:#DDE3E0;
  --signal:#0E7A72;
  --signal-ink:#0A5C56;
  --signal-soft:#E1F0EC;
  --naive:#B23B3B;
  --naive-ink:#8E2E2E;
  --naive-soft:#F7E3E1;
  --amber:#A6631E;
  --amber-soft:#F3E7D8;
  --code-bg:#EFF3F1;
  --shadow: 0 1px 2px rgba(20,30,28,0.06), 0 6px 20px rgba(20,30,28,0.05);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#101413;
    --paper-raised:#171C1B;
    --ink:#E7EBE9;
    --ink-soft:#B9C3C0;
    --muted:#7E8B88;
    --line:#26302C;
    --signal:#5FE0D2;
    --signal-ink:#8CEBE0;
    --signal-soft:#16302C;
    --naive:#E2726B;
    --naive-ink:#F0958F;
    --naive-soft:#301A18;
    --amber:#D99A52;
    --amber-soft:#2E2416;
    --code-bg:#131817;
    --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 8px 24px rgba(0,0,0,0.35);
  }
}
:root[data-theme="dark"]{
  --paper:#101413;
  --paper-raised:#171C1B;
  --ink:#E7EBE9;
  --ink-soft:#B9C3C0;
  --muted:#7E8B88;
  --line:#26302C;
  --signal:#5FE0D2;
  --signal-ink:#8CEBE0;
  --signal-soft:#16302C;
  --naive:#E2726B;
  --naive-ink:#F0958F;
  --naive-soft:#301A18;
  --amber:#D99A52;
  --amber-soft:#2E2416;
  --code-bg:#131817;
  --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 8px 24px rgba(0,0,0,0.35);
}

*{box-sizing:border-box;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Source Sans 3", ui-sans-serif, system-ui, sans-serif;
  font-size:15.5px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{
  font-family:"Archivo", ui-sans-serif, system-ui, sans-serif;
  font-weight:700;
  text-wrap:balance;
  margin:0;
  letter-spacing:-0.01em;
}
code,.mono{font-family:"JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;}

.page{max-width:1180px; margin:0 auto; padding:40px 22px 80px;}

header.masthead{
  display:flex; flex-direction:column; gap:10px;
  padding-bottom:24px; margin-bottom:24px; border-bottom:1px solid var(--line);
}
.eyebrow{
  font-family:"JetBrains Mono", monospace; font-size:12px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--signal-ink); display:flex; align-items:center; gap:8px;
}
.eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--signal);box-shadow:0 0 0 3px var(--signal-soft);}
.eyebrow .provider-badge{
  margin-left:6px; font-size:11px; padding:2px 8px; border-radius:99px;
  background:var(--code-bg); color:var(--muted); text-transform:none; letter-spacing:0;
}
h1{font-size:clamp(26px,3.6vw,36px); line-height:1.1;}
.tagline{font-size:16px; color:var(--ink-soft); max-width:720px;}

/* controls */
.controls{
  display:flex; flex-wrap:wrap; align-items:center; gap:18px;
  background:var(--paper-raised); border:1px solid var(--line); border-radius:10px;
  padding:14px 18px; margin-bottom:22px; box-shadow:var(--shadow);
}
.control-group{display:flex; align-items:center; gap:8px;}
.control-label{font-size:12.5px; color:var(--muted); font-family:"JetBrains Mono",monospace; letter-spacing:.03em;}
.segmented{display:inline-flex; border:1px solid var(--line); border-radius:8px; overflow:hidden;}
.segmented button{
  border:none; background:var(--paper-raised); color:var(--ink-soft); padding:6px 12px;
  font-family:"JetBrains Mono",monospace; font-size:13px; cursor:pointer;
}
.segmented button + button{border-left:1px solid var(--line);}
.segmented button.active{background:var(--signal); color:#fff;}
.toggle{display:inline-flex; align-items:center; gap:8px; cursor:pointer; font-size:13.5px; color:var(--ink-soft);}
.toggle input{width:16px; height:16px; accent-color:var(--signal);}
.spacer{flex:1;}
button.btn{
  font-family:"Archivo",sans-serif; font-weight:600; font-size:13.5px;
  border-radius:8px; padding:9px 16px; cursor:pointer; border:1px solid transparent;
}
button.btn:disabled{opacity:.4; cursor:not-allowed;}
button.btn-primary{background:var(--signal); color:#fff;}
button.btn-primary:hover:not(:disabled){background:var(--signal-ink);}
button.btn-ghost{background:transparent; border-color:var(--line); color:var(--ink-soft);}
button.btn-ghost:hover:not(:disabled){border-color:var(--muted); color:var(--ink);}
button.btn-amber{background:var(--amber-soft); color:var(--amber); border-color:transparent;}

/* stage */
.stage{display:grid; grid-template-columns:1fr 1fr; gap:20px;}
@media (max-width:820px){.stage{grid-template-columns:1fr;}}

.system{
  background:var(--paper-raised); border:1px solid var(--line); border-radius:12px;
  padding:18px; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:14px;
}
.system--naive{border-top:3px solid var(--naive);}
.system--coalesced{border-top:3px solid var(--signal);}
.system-head{display:flex; align-items:baseline; justify-content:space-between; gap:10px;}
.system-head h2{font-size:16px;}
.system--naive h2{color:var(--naive-ink);}
.system--coalesced h2{color:var(--signal-ink);}
.system-sub{font-size:12.5px; color:var(--muted);}

.stat-row{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.stat-tile{
  background:var(--paper); border:1px solid var(--line); border-radius:8px;
  padding:10px 12px;
}
.stat-tile .num{
  font-family:"JetBrains Mono",monospace; font-size:26px; font-weight:600;
  font-variant-numeric:tabular-nums; line-height:1;
}
.system--naive .stat-tile .num{color:var(--naive-ink);}
.system--coalesced .stat-tile .num{color:var(--signal-ink);}
.stat-tile .label{font-size:11.5px; color:var(--muted); margin-top:4px;}

.widgets{display:flex; flex-direction:column; gap:8px; min-height:70px;}
.widget-card{
  border:1px solid var(--line); border-radius:8px; padding:10px 12px; background:var(--paper);
  display:flex; flex-direction:column; gap:6px;
}
.widget-card.late{border-style:dashed; border-color:var(--amber);}
.widget-top{display:flex; align-items:center; justify-content:space-between; gap:8px;}
.widget-name{font-family:"JetBrains Mono",monospace; font-size:12.5px; color:var(--ink-soft);}
.pill{
  font-family:"JetBrains Mono",monospace; font-size:10.5px; letter-spacing:.04em; text-transform:uppercase;
  padding:2px 7px; border-radius:99px; background:var(--code-bg); color:var(--muted);
}
.pill.loading{color:var(--amber); background:var(--amber-soft);}
.pill.streaming{color:var(--signal-ink); background:var(--signal-soft);}
.pill.done{color:var(--muted); background:var(--code-bg);}
.widget-text{font-size:13.5px; min-height:1.4em; color:var(--ink);}
.widget-text .cursor{display:inline-block; width:6px; height:1em; background:var(--muted); vertical-align:text-bottom; animation:blink 1s step-start infinite;}
@keyframes blink{50%{opacity:0;}}
.widget-latency{font-family:"JetBrains Mono",monospace; font-size:11px; color:var(--muted);}
.widget-note{font-size:11.5px; color:var(--amber);}

.log{
  background:var(--code-bg); border:1px solid var(--line); border-radius:8px;
  padding:10px 12px; font-family:"JetBrains Mono",monospace; font-size:11.5px;
  max-height:150px; overflow-y:auto; display:flex; flex-direction:column; gap:3px;
}
.log-line{color:var(--ink-soft); white-space:pre-wrap;}
.log-line .t{color:var(--muted); margin-right:6px;}
.log-line.call{font-weight:600;}
.system--naive .log-line.call{color:var(--naive-ink);}
.system--coalesced .log-line.call{color:var(--signal-ink);}
.log-empty{color:var(--muted); font-style:italic;}

footer.note{
  margin-top:26px; font-size:13px; color:var(--muted); border-top:1px solid var(--line);
  padding-top:16px;
}
footer.note code{background:var(--code-bg); padding:1px 5px; border-radius:4px; border:1px solid var(--line);}