:root { --fg: #111; --muted: #666; --bg: #fafafa; --line: #e5e5e5; --do: #f38020; --pool: #2563eb; }
* { box-sizing: border-box; }
body { margin: 0; font: 14px/1.5 ui-sans-serif, system-ui, -apple-system, sans-serif; color: var(--fg); background: var(--bg); }
a { color: inherit; }
#bar { display: flex; gap: 16px; align-items: center; padding: 10px 16px; border-bottom: 1px solid var(--line); background: #fff; flex-wrap: wrap; }
#bar > a:first-child { font-weight: 700; text-decoration: none; }
#bar > a:last-child { margin-left: auto; }
.pill { padding: 2px 10px; border-radius: 999px; color: #fff; font-weight: 600; font-size: 12px; }
.pill.do { background: var(--do); } .pill.pool { background: var(--pool); }
#board { position: relative; height: calc(100vh - 50px); overflow: hidden; cursor: crosshair; background-image: radial-gradient(#ddd 1px, transparent 1px); background-size: 24px 24px; }
.cursor { position: absolute; left: 0; top: 0; transition: transform 60ms linear; pointer-events: none; }
.stamp { position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; opacity: .75; pointer-events: none; }
#count { position: absolute; right: 16px; bottom: 12px; color: var(--muted); }
#editor { height: calc(100vh - 50px); background: #fff; }
#editor .cm-editor { height: 100%; } #editor .cm-scroller { font: 14px/1.6 ui-monospace, monospace; }
main { max-width: 1100px; margin: 0 auto; padding: 24px 16px; }
h1 { margin: 0 0 4px; } .sub { color: var(--muted); margin: 0 0 24px; }
.demos { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-bottom: 32px; }
.demos a { display: block; padding: 14px 16px; background: #fff; border: 1px solid var(--line); border-radius: 10px; text-decoration: none; }
.demos a b { display: block; } .demos a span { color: var(--muted); font-size: 13px; }
table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
th { font-size: 12px; color: var(--muted); font-weight: 600; }
tr.stopped td { color: #aaa; } tr.draining td { color: #b45309; }
.meter { display: inline-block; width: 80px; height: 8px; background: #eee; border-radius: 4px; vertical-align: middle; overflow: hidden; }
.meter div { height: 100%; background: var(--pool); }
#events { list-style: none; padding: 0; font-size: 13px; } #events li { padding: 3px 0; border-bottom: 1px dashed var(--line); }
#events time { color: var(--muted); margin-right: 6px; } #events span { color: var(--muted); }
main.apps { max-width: 1200px; }
.controls { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.controls label { display: flex; gap: 6px; align-items: center; }
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 900px) { .cols { grid-template-columns: 1fr; } }
.presets { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.presets button, .req button { font: inherit; padding: 4px 10px; border: 1px solid var(--line); border-radius: 6px; background: #fff; cursor: pointer; }
.presets button:hover, .req button:hover { border-color: var(--pool); }
.req { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.req input, .req select, .controls select, .controls input { font: inherit; padding: 4px 6px; border: 1px solid var(--line); border-radius: 6px; }
.out { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 10px; min-height: 80px; max-height: 260px; overflow: auto; font: 12px/1.5 ui-monospace, monospace; white-space: pre-wrap; }
.out.small { min-height: 60px; }
#src { width: 100%; height: 440px; font: 12px/1.5 ui-monospace, monospace; border: 1px solid var(--line); border-radius: 8px; padding: 10px; tab-size: 2; }
.muted { color: var(--muted); } .small { font-size: 12px; }

/* ===================================================================== v2 design system */
:root {
  --ink: #0b0b0b; --ink-2: #52514e; --ink-3: #7a7974;
  --surface: #fcfcfb; --card: #ffffff; --line-2: #ecebe7;
  --blue: #2a78d6; --orange: #eb6834; --aqua: #1baf7a; --violet: #4a3aa7;
  --blue-soft: #e8f1fc; --orange-soft: #fdeee7; --aqua-soft: #e3f6ee; --violet-soft: #ecebf8;
  --radius: 12px; --shadow: 0 1px 2px rgb(0 0 0 / .04), 0 4px 16px rgb(0 0 0 / .04);
}
body.v2 { background: var(--surface); color: var(--ink); font-size: 15px; }
header.site { position: sticky; top: 0; z-index: 10; display: flex; gap: 4px; align-items: center; padding: 10px 20px;
  background: rgb(252 252 251 / .9); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line-2); flex-wrap: wrap; }
header.site .brand { font-weight: 800; letter-spacing: -.02em; margin-right: 14px; text-decoration: none; }
header.site .brand span { color: var(--blue); }
header.site nav a { text-decoration: none; color: var(--ink-2); padding: 6px 10px; border-radius: 8px; font-size: 14px; }
header.site nav a:hover { background: #f0efeb; color: var(--ink); }
header.site nav a.on { color: var(--ink); background: #efeee9; font-weight: 600; }
body.v2 main { max-width: 1160px; padding: 32px 20px 64px; }
.hero h1 { font-size: 34px; letter-spacing: -.03em; line-height: 1.15; margin: 0 0 10px; }
.hero p { font-size: 17px; color: var(--ink-2); max-width: 760px; margin: 0 0 24px; }
.eyebrow { text-transform: uppercase; letter-spacing: .08em; font-size: 12px; font-weight: 700; color: var(--ink-3); margin: 0 0 6px; }
h2.section { font-size: 22px; letter-spacing: -.02em; margin: 44px 0 6px; }
p.lede { color: var(--ink-2); margin: 0 0 18px; max-width: 780px; }
.card { background: var(--card); border: 1px solid var(--line-2); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px 20px; }
.grid { display: grid; gap: 14px; }
.grid.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 860px) { .grid.c2, .grid.c3, .grid.c4 { grid-template-columns: 1fr; } }
.tile .num { font-size: 30px; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.tile .lbl { color: var(--ink-2); font-size: 13px; margin-top: 4px; }
.tag { display: inline-block; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 999px; }
.tag.do { background: var(--orange-soft); color: #a8441b; } .tag.pool { background: var(--blue-soft); color: #1d5aa6; }
.tag.sbx { background: var(--aqua-soft); color: #0f7652; } .tag.warn { background: #fdf3dc; color: #8a5a00; }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
table.cmp { border: none; box-shadow: var(--shadow); border-radius: var(--radius); }
table.cmp th, table.cmp td { padding: 10px 12px; vertical-align: top; }
table.cmp th { background: #f6f5f2; color: var(--ink-2); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
table.cmp td:first-child { font-weight: 600; }
.yes { color: #0f7652; font-weight: 600; } .no { color: #b3261e; font-weight: 600; } .part { color: #8a5a00; font-weight: 600; }
.note { font-size: 13px; color: var(--ink-3); }
.btn { font: inherit; font-weight: 600; padding: 8px 14px; border-radius: 9px; border: 1px solid var(--line-2); background: var(--card); cursor: pointer; }
.btn:hover { border-color: #cfcdc6; } .btn.primary { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn:disabled { opacity: .45; cursor: default; }
code, .mono { font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; }

/* ---- dynamic apps playground */
.apptabs { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.apptab { flex: 1 1 200px; text-align: left; background: var(--card); border: 1px solid var(--line-2); border-radius: var(--radius); padding: 12px 14px; cursor: pointer; font: inherit; }
.apptab b { display: block; font-size: 15px; } .apptab span { color: var(--ink-2); font-size: 13px; }
.apptab.on { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.backends { margin-bottom: 18px; }
.backend { text-align: left; font: inherit; cursor: pointer; background: var(--card); border: 1px solid var(--line-2); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow); border-top: 4px solid var(--c); }
.backend h4 { margin: 0 0 2px; font-size: 16px; } .backend .where { color: var(--ink-2); font-size: 13px; margin: 0 0 10px; }
.backend dl { display: grid; grid-template-columns: 88px 1fr; gap: 4px 8px; margin: 0; font-size: 13px; }
.backend dt { color: var(--ink-3); } .backend dd { margin: 0; }
.backend.on { background: var(--soft); box-shadow: 0 0 0 2px var(--c); }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 6px 0 10px; }
.panel-head h3 { margin: 0; font-size: 15px; }
.work .req input, .work .req select { font: inherit; padding: 7px 9px; border: 1px solid var(--line-2); border-radius: 8px; background: #fff; }
.work .req .grow { flex: 1; min-width: 120px; }
.presets button { font: inherit; font-size: 13px; padding: 6px 11px; border: 1px solid var(--line-2); border-radius: 999px; background: #f7f6f3; cursor: pointer; }
.presets button:hover { background: #efeee9; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; min-height: 24px; margin-bottom: 6px; }
.chips .tag { background: #f1f0ec; color: var(--ink-2); }
.chips .ok { background: var(--aqua-soft); color: #0f7652; } .chips .err { background: #fde8e6; color: #b3261e; }
.work .out { border-color: var(--line-2); max-height: 230px; margin-bottom: 18px; }
.log { background: #fbfaf8; border: 1px solid var(--line-2); border-radius: 8px; padding: 8px 10px; height: 170px; overflow: auto; font: 12px/1.6 ui-monospace, monospace; }
.log div { white-space: pre-wrap; } .log .in { color: #1d5aa6; } .log .outm { color: #a8441b; } .log .sys { color: var(--ink-3); }
.work #src { height: 420px; border-color: var(--line-2); background: #fbfaf8; }

/* ---- how it works */
main.how { max-width: 1240px; }
.walk { padding: 0; overflow: hidden; }
.walk-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line-2); flex-wrap: wrap; }
.stepper { display: flex; gap: 6px; flex-wrap: wrap; }
.stepper button { font: inherit; font-size: 12px; border: 1px solid var(--line-2); background: #fff; border-radius: 999px; padding: 5px 10px; cursor: pointer; color: var(--ink-2); }
.stepper button.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.stepper button.seen { color: var(--ink); }
.walk-nav { display: flex; gap: 8px; }
.walk-body { display: grid; grid-template-columns: 340px 1fr; min-height: 560px; }
@media (max-width: 980px) { .walk-body { grid-template-columns: 1fr; } }
.walk-text { padding: 22px 22px; border-right: 1px solid var(--line-2); }
.walk-text h2 { margin: 0 0 12px; font-size: 22px; letter-spacing: -.02em; line-height: 1.2; }
.walk-text p, .walk-text li { color: var(--ink-2); font-size: 14.5px; }
.walk-text ul { padding-left: 18px; } .walk-text li { margin-bottom: 6px; }
.walk-text b { color: var(--ink); }
.caption { margin-top: 18px; padding: 10px 12px; border-radius: 10px; background: #f6f5f2; font-size: 13.5px; color: var(--ink); min-height: 44px; }
.caption:empty { display: none; }
.walk-fig { padding: 14px; background: linear-gradient(#fdfdfc, #f8f7f4); display: flex; align-items: center; }
.walk-fig svg { width: 100%; height: auto; }
/* diagram vocabulary */
#fig text { font: 600 15px ui-sans-serif, system-ui, sans-serif; fill: var(--ink); }
#fig text.sub { font-weight: 400; font-size: 12.5px; fill: var(--ink-2); }
#fig text.tiny { font-weight: 500; font-size: 11px; fill: var(--ink-3); }
#fig text.ttl { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; fill: var(--ink-3); font-weight: 700; }
#fig .box rect { fill: #fff; stroke: #d9d7d0; stroke-width: 1.5; }
#fig .box.do rect { fill: var(--orange-soft); stroke: var(--orange); }
#fig .box.pool rect { fill: var(--blue-soft); stroke: var(--blue); }
#fig .box.sbx rect { fill: var(--aqua-soft); stroke: var(--aqua); }
#fig .box.store rect { fill: var(--violet-soft); stroke: var(--violet); }
#fig .box.ghost rect { fill: none; stroke-dasharray: 5 5; }
#fig .box.vm > rect { fill: #fbfaf7; stroke: #b9b6ac; stroke-dasharray: 2 0; }
#fig .edge { fill: none; stroke: #b9b6ac; stroke-width: 2; }
#fig .edge.do { stroke: var(--orange); } #fig .edge.pool { stroke: var(--blue); } #fig .edge.store { stroke: var(--violet); }
#fig .edge.dash { stroke-dasharray: 6 6; }
#fig .pkt { fill: var(--blue); } #fig .pkt.do { fill: var(--orange); } #fig .pkt.store { fill: var(--violet); } #fig .pkt.sbx { fill: var(--aqua); }
#fig .obj { fill: var(--blue); opacity: .85; } #fig .obj.dirty { fill: var(--orange); }
#fig .meter-bg { fill: #ecebe7; } #fig .meter { fill: var(--orange); } #fig .meter.pool { fill: var(--blue); }
#fig [data-seq] { opacity: .18; transition: opacity .35s; }
#fig [data-seq].lit { opacity: 1; }
#fig .now { filter: drop-shadow(0 0 6px rgb(42 120 214 / .55)); }
#fig .badge { fill: var(--ink); } #fig .badge-t { fill: #fff; font-size: 12px; font-weight: 700; }
@keyframes blink { 50% { opacity: .25; } } #fig .blink { animation: blink 1.6s infinite; }
@keyframes fillup { from { width: 0 } to { width: var(--w) } }
#fig .grow { animation: fillup 3s linear infinite; }
@keyframes pulse { 0%,100% { opacity: .35 } 50% { opacity: 1 } } #fig .pulse { animation: pulse 2.4s infinite; }

main.how .hero h1 { font-size: 28px; } main.how .hero p { font-size: 15.5px; margin-bottom: 16px; }
main.how { padding-top: 22px; }

/* ---- benchmarks */
main.bench .embed { width: 100%; height: 640px; border: 0; display: block; }
table.cmp.plain { box-shadow: none; border: 1px solid var(--line-2); }
table.cmp.plain td:first-child { font-weight: 500; }
.limits h3 { margin: 0 0 8px; font-size: 16px; } .limits ul { margin: 0; padding-left: 18px; color: var(--ink-2); font-size: 14px; }
.limits li { margin-bottom: 8px; } .limits b { color: var(--ink); }
.chart { position: relative; } .chart svg { width: 100%; height: auto; display: block; }
.chart text { font: 12px ui-sans-serif, system-ui, sans-serif; fill: var(--ink-2); }
.chart .lbl { fill: var(--ink); font-weight: 600; font-size: 13px; }
.chart .grid line { stroke: #ecebe7; stroke-width: 1; }
.chart .bar { fill: var(--blue); } .chart .bar.hot { fill: #1d5aa6; }
.chart .tip { position: absolute; pointer-events: none; background: #fff; border: 1px solid #d9d7d0; border-radius: 8px; padding: 6px 9px; font-size: 12.5px; box-shadow: 0 2px 8px rgb(0 0 0 / .08); display: none; max-width: 280px; }
.entry { margin-bottom: 8px; }
a.card.link { text-decoration: none; display: block; transition: transform .12s, box-shadow .12s; }
a.card.link:hover { transform: translateY(-2px); box-shadow: 0 6px 22px rgb(0 0 0 / .08); }
a.card.link h3 { margin: 0 0 6px; font-size: 18px; } a.card.link p:not(.eyebrow) { margin: 0; color: var(--ink-2); font-size: 14px; }
body.v2 .demos a { border-color: var(--line-2); border-radius: var(--radius); box-shadow: var(--shadow); }
tr.sleeping td { color: #8a5a00; }

/* ---- AI rooms (bindings example) */
main.rooms { max-width: 1200px; }
.seg { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.seg a { flex: 1 1 240px; text-decoration: none; background: var(--card); border: 1px solid var(--line-2); border-radius: var(--radius); padding: 10px 14px; box-shadow: var(--shadow); }
.seg a b { display: block; } .seg a span { color: var(--ink-2); font-size: 13px; }
.seg a.on.do { box-shadow: 0 0 0 2px var(--orange); background: var(--orange-soft); }
.seg a.on.pool { box-shadow: 0 0 0 2px var(--blue); background: var(--blue-soft); }
.room-grid { display: grid; grid-template-columns: minmax(0, 330px) minmax(0, 1fr); gap: 14px; align-items: start; }
.room-grid > *, .room-grid aside > * { min-width: 0; }
@media (max-width: 900px) { .room-grid { grid-template-columns: 1fr; } }
.room-grid aside { display: grid; gap: 14px; }
.roomlist { list-style: none; margin: 0 0 10px; padding: 0; max-height: 300px; overflow: auto; }
.roomlist a { display: grid; grid-template-columns: 1fr auto; gap: 0 8px; padding: 7px 10px; border-radius: 8px; text-decoration: none; }
.roomlist a:hover { background: #f4f3ef; } .roomlist li.on a { background: #efeee9; }
.roomlist .count { font-size: 12px; color: #0f7652; font-weight: 600; }
.roomlist .last { grid-column: 1 / -1; font-size: 12.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card.code pre { background: #fbfaf8; border: 1px solid var(--line-2); border-radius: 8px; padding: 10px; font-size: 12px; overflow: auto; margin: 0 0 8px; }
.chat .chatlog { height: 520px; overflow: auto; border: 1px solid var(--line-2); border-radius: 10px; background: #fbfaf8; padding: 10px 12px; }
.chatlog .m { margin: 0 0 10px; max-width: 86%; }
.chatlog .m .who { font-size: 12.5px; font-weight: 700; color: var(--ink-2); } .chatlog .m time { font-weight: 400; color: var(--ink-3); margin-left: 4px; }
.chatlog .m .body { background: #fff; border: 1px solid var(--line-2); border-radius: 10px; padding: 7px 10px; display: inline-block; white-space: pre-wrap; word-break: break-word; }
.chatlog .m.me { margin-left: auto; text-align: right; } .chatlog .m.me .body { background: var(--blue-soft); border-color: #cfe0f6; text-align: left; }
.chatlog .m.ai .body { background: var(--violet-soft); border-color: #d8d5f1; }
.chatlog .m.system { max-width: none; text-align: center; } .chatlog .m.system .body { background: none; border: none; color: var(--ink-3); font-size: 13px; }
.chatlog .m img { max-width: 260px; max-height: 200px; border-radius: 6px; display: block; }
.trace { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 3px; } .chatlog .m.me .trace { justify-content: flex-end; }
.trace .call { font-size: 11.5px; color: var(--ink-2); background: #f1f0ec; border-radius: 999px; padding: 1px 8px; }
.trace .call code { font-size: 11px; color: var(--ink); }
.typing { min-height: 22px; padding: 2px 4px; }
.composer { margin-top: 4px; } .composer input { font: inherit; padding: 8px 10px; border: 1px solid var(--line-2); border-radius: 9px; }
.composer .grow { flex: 1; min-width: 160px; } .attach { padding: 8px 10px; }