/* carbon website, variation I (paper). One ground, three inks.
   Tokens first; every colour on the page comes from this block. */
:root{
  --bg:#ebe0cb;            /* beige ground: the hero's colour, used for the whole page */
  --paper:#f7f0e0;         /* lighter beige: raised surfaces and the hero glow */
  --ink:#0d1424;           /* the hero's black: text, dots, product windows */
  --ink-2:#161e33;         /* one step up inside a product window */
  --wine:#7a2236;          /* burgundy: serif headlines, buttons, the one accent */
  --wine-deep:#651b2c;     /* darker burgundy: the home page's close and every page's footer */
  --rose:#e0929f;          /* burgundy at the lightness that reads on ink */
  --sub:#5f5c50;           /* secondary text on beige (5.3:1) */
  --rule:rgba(13,20,36,.16);
  --on:#ebe0cb;            /* text on ink */
  --on-2:rgba(235,224,203,.66);
  --on-3:rgba(235,224,203,.42);
  --on-rule:rgba(235,224,203,.13);
  --mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
  --serif:'Instrument Serif','Times New Roman',serif;
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-in-out:cubic-bezier(.77,0,.175,1);
  --gut:clamp(18px,4.4vw,56px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:clip;scroll-padding-top:84px;scrollbar-color:rgba(13,20,36,.35) var(--bg)}
body{background:var(--bg);color:var(--ink);font:400 16px/1.55 Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased;caret-color:var(--wine)}
a{color:inherit;text-underline-offset:3px;text-decoration-thickness:1px}
::selection{background:var(--wine);color:var(--bg)}
:focus-visible{outline:2px solid var(--wine);outline-offset:3px;border-radius:4px}
.sim :focus-visible{outline-color:var(--rose)}
i.s{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.01em}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- floating nav (the hero's nav, unchanged) ---------- */
.bar{position:fixed;z-index:50;top:18px;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(16px,3vw,36px);pointer-events:none;color:var(--ink)}
.bar>*{pointer-events:auto}
.brand{font:400 28px/1 'Urbanist',sans-serif;letter-spacing:-.035em;text-decoration:none;padding:6px 0;color:var(--ink);display:inline-flex;align-items:center;gap:9px}
.links{display:flex;gap:4px;padding:5px;border-radius:999px;font-size:13.5px;background:rgba(255,255,255,.5);border:1px solid rgba(255,255,255,.9);-webkit-backdrop-filter:blur(22px) saturate(180%);backdrop-filter:blur(22px) saturate(180%);box-shadow:inset 0 1px 0 #f7f0e0,0 10px 30px -14px rgba(0,0,0,.3)}
.links a{padding:8px 15px;border-radius:999px;text-decoration:none;opacity:.72;transition:opacity .2s,background .2s}
.links a[aria-current]{opacity:1;background:rgba(13,20,36,.08)}
.pill{background:var(--wine);color:var(--bg);padding:10px 20px;border-radius:999px;font-size:13.5px;font-weight:500;text-decoration:none;transition:transform .16s var(--ease-out)}
.pill:active{transform:scale(.97)}
@media(hover:hover) and (pointer:fine){.links a:hover{opacity:1;background:rgba(127,127,127,.16)}.pill:hover{transform:translateY(-1px)}}
@media(max-width:820px){.links{display:none}}
/* phone: the section links live behind a menu button (assets/nav.js adds it) */
.menu{display:none}
@media(max-width:820px){
  .bar .pill{margin-left:8px}
  .menu{display:inline-grid;place-items:center;margin-left:auto;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.5);box-shadow:inset 0 0 0 1px rgba(13,20,36,.22);-webkit-backdrop-filter:blur(22px) saturate(180%);backdrop-filter:blur(22px) saturate(180%)}
  .menu i{grid-area:1/1;width:16px;height:1.6px;border-radius:2px;background:var(--ink);transform:translateY(-3.5px);transition:transform .2s var(--ease-out)}
  .menu i+i{transform:translateY(3.5px)}
  .menu[aria-expanded=true] i{transform:rotate(45deg)}
  .menu[aria-expanded=true] i+i{transform:rotate(-45deg)}
  .bar.open .links{display:flex;flex-direction:column;gap:2px;position:absolute;top:52px;right:clamp(16px,3vw,36px);min-width:210px;padding:8px;border-radius:22px;font-size:16px;background:rgba(247,240,224,.86);animation:menu-in .18s var(--ease-out)}
  .bar.open .links a{padding:13px 16px;opacity:1}
}
@keyframes menu-in{from{opacity:0;transform:translateY(-6px)}}
@media(prefers-reduced-motion:reduce){.bar.open .links{animation:none}.menu i{transition:none}}
/* a word that differs between a wide page and a phone */
.on-phone{display:none}
@media(max-width:719px){.on-wide{display:none}.on-phone{display:inline}}
/* once the page has scrolled, the bar gets a strip of the page's own colour so the wordmark never sits on text */
.bar::before{content:"";position:absolute;z-index:-1;left:0;right:0;top:-18px;height:104px;background:linear-gradient(180deg,var(--bg) 72%,rgba(235,224,203,0));opacity:0;transition:opacity .25s;pointer-events:none}
body.scrolled .bar::before{opacity:1}
@media(prefers-reduced-transparency:reduce){.links{background:var(--paper);-webkit-backdrop-filter:none;backdrop-filter:none}}

/* ---------- page rhythm ---------- */
section{position:relative}
.w{width:100%;max-width:1220px;margin:0 auto;padding:0 var(--gut);position:relative}
.band{padding:clamp(88px,11vw,168px) 0}
.band+.band{padding-top:0}
h2{font-weight:500;letter-spacing:-.04em;line-height:1.02;font-size:clamp(36px,4.8vw,72px);text-wrap:balance}
h2 i.s{display:block;color:var(--wine);font-size:1.07em;letter-spacing:-.02em}
h3{font-weight:500;letter-spacing:-.025em;line-height:1.15;font-size:clamp(20px,1.8vw,25px)}
.lead{margin-top:24px;max-width:58ch;color:var(--sub);font-size:clamp(16px,1.25vw,18px);line-height:1.55;text-wrap:pretty}
.lead b,.lead strong{font-weight:500;color:var(--ink)}
.head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(20px,5vw,84px);align-items:end}
.head .lead{margin-top:0}
@media(max-width:900px){.head{grid-template-columns:1fr}.head .lead{margin-top:4px}}
code,kbd{font-family:var(--mono);font-size:.86em}
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--wine);color:var(--bg);font-size:14px;font-weight:500;padding:12px 22px;border-radius:999px;text-decoration:none;transition:transform .16s var(--ease-out)}
.btn.ghost{background:none;color:var(--ink);box-shadow:inset 0 0 0 1px rgba(13,20,36,.32)}
.btn:active{transform:scale(.97)}

#problem{padding-top:clamp(16px,2.4vw,40px)}
/* laptop demo controls, shared by the home page */
.dm-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 24px;margin:clamp(30px,4vw,52px) 0 clamp(20px,2.4vw,30px)}
[data-demo] .dm-tabs{background:rgba(13,20,36,.07);border:0;box-shadow:none;max-width:100%;overflow-x:auto}
[data-demo] .dm-tabs button{font-size:14px;padding:10px 18px;color:var(--sub)}
[data-demo] .dm-tabs button[aria-selected=true]{background:var(--ink);color:var(--on)}
[data-demo] .dm-foot{padding:16px 0 0;margin-top:clamp(28px,3.4vw,44px);border-top:1px solid var(--rule)}
[data-demo] .dm-foot .n{font-family:var(--mono);letter-spacing:0;font-size:11.5px;color:var(--sub)}
[data-demo] .dm-ctl button{background:none;border:0;box-shadow:inset 0 0 0 1px rgba(13,20,36,.3);min-height:36px}
[data-demo] .dm-ctl .pri,[data-demo] .dm-ctl .pri:hover{background:var(--wine);color:var(--bg);box-shadow:none}
[data-demo] .note{max-width:1180px;margin:14px auto 0}
[data-demo] .cur.show{margin:0;padding:0}
.more{display:inline-flex;align-items:center;gap:10px;font-size:16px;font-weight:500;color:var(--bg);background:var(--wine);text-decoration:none;padding:14px 26px;border-radius:999px;transition:transform .16s var(--ease-out),background .2s}
.more svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s var(--ease-out)}
.more:active{transform:scale(.97)}
@media(hover:hover) and (pointer:fine){.more:hover{background:var(--wine-deep)}.more:hover svg{transform:translateX(3px)}}

/* ---------- the hand-off trip: Detour. One update by hand winds through seven stops; through carbon it is one straight line ---------- */
.v{margin:clamp(40px,5vw,72px) 0 0}
.v figcaption{margin-top:18px;font-size:14.5px;color:var(--sub);max-width:60ch}
/* rows + art (Detour, Copies) */
.v-detour{display:grid;grid-template-columns:250px minmax(0,1fr);gap:0 clamp(20px,3vw,48px);align-items:stretch}
.v-detour figcaption{grid-column:1/-1}
.rows{display:grid;grid-template-rows:1fr 1fr;padding:2.5% 0}
.rt{align-self:center}
.rt b{display:block;font-weight:500;font-size:15px}
.rt strong{display:block;font:italic 400 clamp(34px,3.6vw,48px)/1 var(--serif);margin-top:6px;color:var(--ink)}
.rt small{display:block;margin-top:4px;font-size:13.5px;color:var(--sub)}
.rt.c strong{color:var(--wine)}
.v-detour .rt strong{font-size:clamp(26px,2.5vw,34px);font-variant-numeric:tabular-nums}
.art{position:relative}
.art svg{display:block;width:100%;height:auto;overflow:visible}
.np{fill:var(--ink)}
.na{fill:var(--bg);stroke:var(--ink);stroke-width:2}
.nc{fill:var(--wine)}
.ld{fill:none;stroke:var(--ink);stroke-width:1.6;stroke-dasharray:2 7;stroke-linecap:round;opacity:.7}
.ls{fill:none;stroke:var(--wine);stroke-width:2.4;marker-end:url(#ah)}
.sheet path{fill:var(--paper);stroke:var(--ink);stroke-width:1.4;stroke-linejoin:round}
.sheet .fold{fill:none}
.fact{fill:var(--wine)}
.lb{position:absolute;transform:translate(-50%,-50%);font-size:13px;line-height:1.2;white-space:nowrap;color:var(--sub)}
.lb.b{color:var(--wine)}
.lb:first-of-type,.lb:last-of-type{color:var(--ink)}
@media(max-width:820px){.v-detour{grid-template-columns:1fr}.rows{grid-template-rows:none;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:18px}.lb.mid{display:none}.lb{font-size:12px}}
/* phone: seven names do not fit across the screen, so the two routes run down it instead. Same stops, same motion:
   the sheet winds down the left through every person, the fact drops straight down the right. */
.art-v{display:none}
.art-v svg{display:block;width:100%;height:auto;overflow:visible}
.art-v text{font:400 13px Inter,system-ui,sans-serif;fill:var(--sub)}
.art-v text.k{fill:var(--ink)}
.art-v text.c{fill:var(--wine)}
.art-v .lsv{marker-end:url(#ahv)}
@media(max-width:620px){.v-detour .art{display:none}.v-detour .art-v{display:block}.v-detour .rows,.art-v{max-width:400px}.v-detour .rows{margin-bottom:22px}.v-detour .rt strong{font-size:22px}}
@media(max-width:360px){.v-detour .rt strong{font-size:19px}}
@media(prefers-reduced-motion:reduce){.mv{display:none}}


/* ---------- interactive product window ---------- */
.show{margin-top:clamp(36px,4.6vw,64px)}
.tabs{display:flex;gap:4px;padding:5px;border-radius:999px;background:rgba(13,20,36,.07);width:max-content;max-width:100%;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs button{position:relative;padding:10px 18px;border-radius:999px;font-size:14px;font-weight:500;color:var(--sub);white-space:nowrap;transition:color .18s,background .18s var(--ease-out),transform .16s var(--ease-out)}
.tabs button[aria-selected=true]{background:var(--ink);color:var(--on)}
.tabs button:active{transform:scale(.97)}
@media(hover:hover) and (pointer:fine){.tabs button:not([aria-selected=true]):hover{color:var(--ink)}}
.about{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 40px;align-items:end;margin:26px 0 22px;min-height:84px}
.about h3{font-size:clamp(22px,2.2vw,30px);letter-spacing:-.03em}
.about p{grid-column:1;max-width:66ch;color:var(--sub);font-size:15.5px}
.about .real{grid-column:2;grid-row:1/3;align-self:end;max-width:270px;font-size:13px;line-height:1.45;color:var(--sub);padding-left:16px;border-left:1px solid var(--rule)}
.about .real b{display:block;font-weight:500;color:var(--ink)}
@media(max-width:900px){.about{grid-template-columns:1fr}.about .real{grid-column:1;grid-row:auto;border-left:0;padding:10px 0 0;border-top:1px solid var(--rule);max-width:none}}

.sim{color:var(--on);background:var(--ink);border-radius:18px;overflow:hidden;box-shadow:0 1px 0 rgba(255,255,255,.5),0 40px 80px -48px rgba(13,20,36,.7),0 12px 28px -18px rgba(13,20,36,.5);font-size:13.5px;line-height:1.45}
.sim-bar{display:flex;align-items:center;gap:14px;padding:11px 16px;border-bottom:1px solid var(--on-rule);color:var(--on-2);font-size:12.5px}
.sim-bar .dots{display:flex;gap:6px}
.sim-bar .dots i{width:9px;height:9px;border-radius:50%;background:rgba(235,224,203,.2)}
.sim-bar .ttl{font-family:var(--mono);font-size:11.5px;letter-spacing:.02em}
.sim-bar .flag{margin-left:auto;font-size:11.5px;padding:3px 9px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--on-rule);color:var(--on-2)}
.sim-panes{display:none;gap:2px;padding:6px;border-bottom:1px solid var(--on-rule)}
.sim-panes button{flex:1;padding:8px 6px;border-radius:8px;font-size:12.5px;font-weight:500;color:var(--on-2)}
.sim-panes button[aria-pressed=true]{background:rgba(235,224,203,.12);color:var(--on)}
.sim-body{display:grid;grid-template-columns:212px minmax(0,1fr) 300px;height:540px}
.sim.tall .sim-body{height:600px}
.pane{position:relative;min-width:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgba(235,224,203,.22) transparent}
.pane+.pane{border-left:1px solid var(--on-rule)}
.pane h4{position:sticky;top:0;z-index:2;background:var(--ink);font:500 12px/1 Inter,sans-serif;color:var(--on-3);padding:14px 16px 10px;display:flex;justify-content:space-between;gap:8px}
.pane h4 span{font-weight:400}

/* the laptop the window sits in */
.lap{position:relative;margin:0 auto}
.lap-lid{position:relative;background:#0a0a0a;border:1px solid #3d3d3d;border-radius:22px 22px 8px 8px;padding:16px 16px 18px;box-shadow:inset 0 0 0 2px #191919,inset 0 1px 0 2px #2c2c2c,0 60px 110px -60px rgba(13,20,36,.8)}
.lap-lid::before{content:"";position:absolute;left:50%;top:6px;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:#2e2e2e}
.lap-lid .sim{border-radius:6px;box-shadow:none}
.lap-base{position:relative;height:15px;margin:0 -4%;border-radius:3px 3px 16px 16px;background:linear-gradient(#dcd6c8,#aaa598 30%,#6c685e 85%,#3a3832);box-shadow:0 30px 40px -22px rgba(13,20,36,.55)}
.lap-base::before{content:"";position:absolute;left:50%;top:0;width:15%;height:6px;transform:translateX(-50%);border-radius:0 0 9px 9px;background:linear-gradient(#8a867c,#b5b0a4)}
.show{padding-bottom:6px}
@media(min-width:821px){.show .lap{margin:0 3.4%}}
@media(max-width:820px){.lap-lid{padding:7px 7px 9px;border-radius:14px 14px 5px 5px;margin:0 calc(var(--gut) * -.45)}.lap-lid::before{display:none}.lap-lid .sim{margin:0;border-radius:8px}.lap-base{margin:0 calc(var(--gut) * -.7);height:10px}}

/* chat thread */
.sim .av.hash{background:none;box-shadow:inset 0 0 0 1px var(--on-rule);color:var(--on-2)}
.sim .av.hash::after{display:none}
.thread{padding:14px 18px 18px;display:grid;gap:14px}
.sim .msg{display:grid;grid-template-columns:30px 1fr;gap:12px}
.sim .msg{padding:0;border-bottom:0;animation:none}
.sim .msg.fresh{animation:fresh .32s var(--ease-out) both}
.sim .msg .av::after{display:none}
.sim .msg small{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;font-size:11.5px;color:var(--on-3);margin-bottom:2px}
.sim .msg small b{font-weight:500;font-size:13.5px;color:var(--on)}
.sim .msg small i{font-style:normal;color:var(--rose)}
.sim .msg p{font-size:14px;line-height:1.45}
.sim .msg.sys .av{background:var(--on);color:var(--ink);font:400 17px/1 Urbanist,sans-serif}
.sim .msg.person .av{background:var(--rose);color:var(--ink)}
.sim .msg.person p{display:inline-block;padding:8px 12px;border-radius:12px;background:var(--on);color:var(--ink)}
.sim .msg .chip{display:inline-block;margin-top:8px;font:400 11.5px var(--mono);padding:5px 9px;border-radius:7px;background:rgba(235,224,203,.09);color:var(--on-2)}
.sim code{font-size:.9em;background:rgba(235,224,203,.1);padding:1px 5px;border-radius:4px}
.sim .msg.person code,.ask code{background:rgba(13,20,36,.08)}

/* agents */
.sim .ag{display:grid;grid-template-columns:30px 1fr;gap:10px;align-items:center;width:100%;text-align:left;padding:9px 12px;margin:0 6px;width:calc(100% - 12px);border-radius:10px;transition:background .15s}
.sim .ag[aria-pressed=true]{background:rgba(235,224,203,.1)}
@media(hover:hover) and (pointer:fine){.sim .ag:hover{background:rgba(235,224,203,.07)}}
.sim .ag:active{background:rgba(235,224,203,.14)}
.sim .av{position:relative;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:rgba(235,224,203,.12);font-weight:500;font-size:12.5px}
.sim .av::after{content:"";position:absolute;right:-1px;bottom:-1px;width:9px;height:9px;border-radius:50%;background:var(--ink);box-shadow:inset 0 0 0 1.5px var(--on-3)}
.sim .ag[data-st=active] .av::after,.sim .who[data-st=active] .av::after{background:var(--on);box-shadow:0 0 0 2px var(--ink)}
.sim .ag[data-st=call] .av::after,.sim .who[data-st=call] .av::after,.sim .ag[data-st=blocked] .av::after,.sim .who[data-st=blocked] .av::after{background:var(--rose);box-shadow:0 0 0 2px var(--ink)}
.sim .ag>span:last-child{min-width:0}
.sim .ag b{display:block;font-weight:500;font-size:13.5px}
.sim .ag small{display:block;font-size:12px;color:var(--on-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sim .ag[data-st=call] small{color:var(--rose)}
.stat{margin:14px 12px 0;padding:12px 6px 4px;border-top:1px solid var(--on-rule);display:grid;grid-template-columns:1fr auto;gap:6px 10px;font-size:12.5px;color:var(--on-2)}
.stat b{font-weight:500;color:var(--on);font-variant-numeric:tabular-nums}

/* session */
.sim .who{display:grid;grid-template-columns:30px 1fr auto;gap:12px;align-items:center;padding:16px 18px 14px;border-bottom:1px solid var(--on-rule);position:sticky;top:0;background:var(--ink);z-index:2}
.sim .who b{font-weight:500;font-size:15px}
.sim .who small{display:block;font:400 11.5px var(--mono);color:var(--on-2)}
.st{font-size:12px;padding:3px 10px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--on-rule);color:var(--on-2);white-space:nowrap}
.st.active{background:var(--on);color:var(--ink);box-shadow:none}
.st.call,.st.blocked{background:var(--rose);color:var(--ink);box-shadow:none}
.blk{padding:16px 18px;border-bottom:1px solid var(--on-rule)}
.blk:last-child{border-bottom:0}
.blk>label{display:block;font-size:12px;color:var(--on-3);margin-bottom:8px}
.intent{font-size:17px;line-height:1.3;letter-spacing:-.015em;font-weight:500}
.intent.draft{font-family:var(--mono);font-size:13.5px;font-weight:400;letter-spacing:0}
.intent.draft::before{content:"> ";color:var(--on-3)}
.sum{margin-top:6px;color:var(--on-2)}
.files{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.files button{font:400 11.5px var(--mono);padding:5px 9px;border-radius:7px;background:rgba(235,224,203,.07);color:var(--on-2);box-shadow:inset 0 0 0 1px transparent;transition:background .15s,color .15s}
.files button[aria-expanded=true]{background:rgba(235,224,203,.14);color:var(--on);box-shadow:inset 0 0 0 1px var(--on-rule)}
@media(hover:hover) and (pointer:fine){.files button:hover{color:var(--on)}}
.empty{color:var(--on-3)}
.fact{display:grid;grid-template-columns:1fr;gap:3px;padding:10px 12px;border-radius:10px;background:rgba(235,224,203,.05);margin-top:8px}
.fact:first-of-type{margin-top:0}
.fact small{font-size:11.5px;color:var(--on-3)}
.fact.hot{background:rgba(224,146,159,.13)}
.fact.hot small{color:var(--rose)}
.cmp{width:100%;border-collapse:collapse;font-size:13px}
.cmp td{padding:7px 0;border-bottom:1px solid var(--on-rule);vertical-align:middle}
.cmp tr:last-child td{border-bottom:0}
.cmp td:nth-child(2){width:38%;padding:7px 12px}
.cmp td:last-child{text-align:right;white-space:nowrap;color:var(--on-2)}
.cmp .meter{display:block;height:4px;border-radius:2px;background:rgba(235,224,203,.12);overflow:hidden}
.cmp .meter i{display:block;height:100%;background:var(--on);transform-origin:left;animation:grow .5s var(--ease-out) both}
.cmp tr.same .meter i{background:var(--rose)}
.cmp tr.same td:last-child{color:var(--rose)}
.cmp .num{font:400 11.5px var(--mono);margin-right:8px}
@keyframes grow{from{transform:scaleX(0)}}
.ask{margin:14px 18px 18px;padding:16px;border-radius:14px;background:var(--on);color:var(--ink)}
.ask label{display:block;font-size:12px;color:var(--wine);font-weight:500;margin-bottom:6px}
.ask p{font-size:14px}
.ask .why{margin-top:8px;color:var(--sub);font-size:13px}
.ask .acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.ask .acts button{padding:9px 15px;border-radius:999px;font-size:13px;font-weight:500;box-shadow:inset 0 0 0 1px rgba(13,20,36,.3);transition:transform .14s var(--ease-out),background .15s}
.ask .acts button.pri{background:var(--wine);color:var(--bg);box-shadow:none}
.ask .acts button.lnk{box-shadow:none;text-decoration:underline;text-underline-offset:3px;padding-left:4px;padding-right:4px}
.ask .acts button:active{transform:scale(.97)}
.ask .diff{background:rgba(13,20,36,.06);color:var(--ink);margin-top:10px}
.ask .diff .del{background:rgba(122,34,54,.12);color:var(--wine)}
.ask .diff .add{background:rgba(13,20,36,.1)}
.ask .diff div{white-space:pre-wrap;min-width:0}
.ask.done{background:rgba(235,224,203,.08);color:var(--on)}
.ask.done label{color:var(--rose)}
.diff{font:400 12px/1.65 var(--mono);border-radius:10px;background:rgba(0,0,0,.28);overflow-x:auto;padding:8px 0;margin-top:10px}
.diff div{padding:0 12px;white-space:pre;min-width:max-content}
.diff .hd{color:var(--on-3);padding-bottom:4px}
.diff .add{background:rgba(235,224,203,.1)}
.diff .del{background:rgba(224,146,159,.13);color:var(--rose)}
.diff div::before{content:attr(data-s);display:inline-block;width:1.4em;opacity:.6}
.kb{display:grid;gap:8px}
.ke{padding:10px 12px;border-radius:10px;background:rgba(235,224,203,.05)}
.ke small{display:flex;flex-wrap:wrap;gap:4px 10px;font-size:11.5px;color:var(--on-3);margin-bottom:3px}
.ke small b{font-weight:500;color:var(--on-2)}
.ke.superseded p,.ke.rejected p{color:var(--on-3);text-decoration:line-through;text-decoration-color:rgba(235,224,203,.3)}
.ke.proposed{background:none;box-shadow:inset 0 0 0 1px var(--on-rule)}
.ke.proposed small b{color:var(--rose)}

/* feed */
.ev{display:grid;grid-template-columns:38px 1fr;gap:8px;padding:10px 16px;border-top:1px solid var(--on-rule);width:100%;text-align:left;font-size:13px}
.ev:first-of-type{border-top:0}
.ev time{font:400 11px/1.7 var(--mono);color:var(--on-3)}
.ev b{font-weight:500}
.ev em{font-style:normal;color:var(--on-3);font-size:12px;display:block}
.ev em.k-interface,.ev em.k-question,.ev em.k-overlap,.ev em.k-proposal,.ev em.k-paused{color:var(--rose)}
.ev .to{display:block;margin-top:3px;font-size:12px;color:var(--on-2)}
.ev.dim{opacity:.34}
@media(hover:hover) and (pointer:fine){button.ev:hover{background:rgba(235,224,203,.05)}}
.fresh{animation:fresh .32s var(--ease-out) both}
@keyframes fresh{from{opacity:0;transform:translateY(6px)}}

/* tool-call log */
.sim-log{border-top:1px solid var(--on-rule);font:400 12px/1.7 var(--mono);padding:12px 16px 14px;height:132px;overflow-y:auto;color:var(--on-2);scrollbar-width:thin;scrollbar-color:rgba(235,224,203,.22) transparent}
.sim-log div{white-space:pre-wrap;overflow-wrap:anywhere}
.sim-log .c{color:var(--on)}
.sim-log .c::before{content:"› ";color:var(--on-3)}
.sim-log .r{padding-left:1.2em}
.sim-log:empty::before{content:"Tool calls appear here as each agent talks to carbon.";font-family:Inter,sans-serif;color:var(--on-3)}

/* transport */
.sim-ctl{display:grid;grid-template-columns:auto 1fr auto;gap:8px 18px;align-items:center;padding:12px 16px;border-top:1px solid var(--on-rule);background:rgba(0,0,0,.2)}
.sim-ctl .keys{display:flex;gap:6px}
.sim-ctl button.k{height:34px;min-width:34px;padding:0 12px;border-radius:999px;font-size:13px;font-weight:500;box-shadow:inset 0 0 0 1px var(--on-rule);display:inline-flex;align-items:center;justify-content:center;gap:7px;transition:transform .14s var(--ease-out),background .15s}
.sim-ctl button.k.pri{background:var(--on);color:var(--ink);box-shadow:none;min-width:86px}
.sim-ctl button.k:active{transform:scale(.96)}
.sim-ctl button.k:disabled{opacity:.35;cursor:default}
.sim-ctl svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sim-ctl .pri svg{fill:currentColor;stroke:none}
.sim-cap{font-size:14px;line-height:1.45;color:var(--on);min-height:2.9em;display:flex;align-items:center}
.sim-cap span{color:var(--on-3);font:400 11.5px var(--mono);margin-right:12px;white-space:nowrap}
.track{grid-column:1/-1;display:flex;gap:4px}
.track button{flex:1;height:14px;position:relative}
.track button::before{content:"";position:absolute;left:0;right:0;top:6px;height:2px;border-radius:2px;background:rgba(235,224,203,.16);transition:background .2s}
.track button.past::before{background:var(--on-2)}
.track button.now::before{background:var(--rose)}
.note{margin-top:14px;max-width:86ch;font-size:13px;line-height:1.5;color:var(--sub)}

@media(max-width:1080px){.sim-body{grid-template-columns:190px minmax(0,1fr) 250px}}
@media(max-width:820px){
  .sim{border-radius:14px;margin:0 calc(var(--gut) * -.45)}
  .sim-panes{display:flex}
  .sim-body,.sim.tall .sim-body{grid-template-columns:1fr;height:460px}
  .sim-body .pane{display:none;border-left:0}
  .sim[data-pane=agents] .p-agents,.sim[data-pane=session] .p-session,.sim[data-pane=feed] .p-feed{display:block}
  .sim-panes button{min-height:44px}
  .track button{height:28px}
  .track button::before{top:13px}
  .sim-ctl{grid-template-columns:1fr}
  .sim-ctl .keys{order:3;justify-content:space-between}
  .sim-ctl .keys .k{height:44px;min-width:44px}
  .sim-ctl .keys .pri{flex:1}
  .sim .ag{padding:12px}
  .files button{padding:9px 11px}
  .ask .acts button{padding:12px 16px}
  .sim-bar .ttl{display:none}
}

/* ---------- how it works: the routing field, and the rule it is showing ---------- */
.field{position:relative;height:min(74vh,700px);min-height:440px;margin-top:clamp(8px,2vw,28px)}
.field canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.traces{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 clamp(20px,3.4vw,52px);margin-top:-8px;position:relative}
.traces button{display:block;text-align:left;padding:18px 0 4px;border-top:1.5px solid var(--rule);transition:border-color .25s}
.traces button b{display:block;font-weight:500;font-size:clamp(18px,1.6vw,21px);letter-spacing:-.02em;transition:color .2s}
.traces button span{display:block;margin-top:6px;color:var(--sub);font-size:14.5px;line-height:1.45}
.traces button code{display:block;margin-top:10px;font-size:11.5px;line-height:1.6;color:var(--ink);opacity:.4;transition:opacity .25s}
.traces button[aria-pressed=true]{border-color:var(--wine)}
.traces button[aria-pressed=true] b{color:var(--wine)}
.traces button[aria-pressed=true] code{opacity:.9}
@media(max-width:820px){.traces{grid-template-columns:1fr}.traces button{padding-bottom:16px}.field{height:68vh}}

/* ---------- built / next ---------- */
.ledger{margin-top:clamp(40px,5vw,72px);display:grid;grid-template-columns:1.15fr 1fr 1fr 1fr;gap:0 clamp(20px,3.4vw,52px)}
.ledger h3{padding-bottom:14px;border-bottom:1.5px solid var(--ink);display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.ledger h3 span{font:400 13px Inter,sans-serif;letter-spacing:0;color:var(--sub)}
.ledger .col:first-child h3{color:var(--wine);border-color:var(--wine)}
.ledger ul{list-style:none}
.ledger li{padding:13px 0;border-bottom:1px solid var(--rule);font-size:15px;line-height:1.4}
.ledger li small{display:block;color:var(--sub);font-size:13.5px}
.keeps{margin-top:clamp(48px,6vw,88px);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,3vw,44px)}
.keeps p{font-size:14.5px;color:var(--sub)}
.keeps p b{display:block;font:italic 400 clamp(24px,2.2vw,30px)/1.08 var(--serif);color:var(--ink);margin-bottom:10px;letter-spacing:-.01em}
@media(max-width:1000px){.ledger{grid-template-columns:1fr 1fr;gap:36px clamp(20px,3.4vw,52px)}}
@media(max-width:900px){.keeps{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.ledger{grid-template-columns:1fr}}
@media(max-width:520px){.keeps{grid-template-columns:1fr}}


/* ---------- built / next: a track you read from the dots, not the words ---------- */
.track4{position:relative;margin-top:clamp(44px,5.4vw,80px);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 clamp(16px,2.6vw,40px)}
.track4::before,.track4::after{content:"";position:absolute;top:8px;height:2px;left:8px}
.track4::before{right:0;background:repeating-linear-gradient(90deg,rgba(13,20,36,.32) 0 3px,transparent 3px 9px)}
.track4::after{width:calc(25% + 8px);background:var(--wine)}
.t4{position:relative}
.t4 .dot{position:relative;z-index:1;display:block;width:18px;height:18px;border-radius:50%;background:var(--bg);box-shadow:inset 0 0 0 2px rgba(13,20,36,.4)}
.t4.done .dot{background:var(--wine);box-shadow:none}
.t4.test .dot{background:linear-gradient(90deg,var(--wine) 50%,var(--bg) 50%);box-shadow:inset 0 0 0 2px var(--wine)}
.t4.next .dot{box-shadow:inset 0 0 0 2px var(--ink)}
.t4 b{display:block;margin-top:22px;font:italic 400 clamp(56px,6vw,88px)/.85 var(--serif);color:var(--ink)}
.t4.done b{color:var(--wine)}
.t4.later b,.t4.later h3,.t4.later li{opacity:.6}
.t4 h3{margin-top:10px;font-size:clamp(18px,1.6vw,22px)}
.t4 ul{list-style:none;margin-top:14px;display:flex;flex-wrap:wrap;gap:6px}
.t4 li{font-size:13.5px;line-height:1;padding:7px 10px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--rule);color:var(--sub);white-space:nowrap}
.t4.done li{box-shadow:none;background:rgba(122,34,54,.09);color:var(--wine)}
@media(max-width:900px){
  .track4{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px 20px}
  .track4::before,.track4::after{display:none}
}
/* phone: the track runs down the page. Each stage hangs off its dot, and the line between two dots
   is solid where the work is built and dotted where it is not. */
@media(max-width:620px){
  .track4{grid-template-columns:minmax(0,1fr);gap:0}
  .t4{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:12px;align-items:baseline;padding:0 0 38px 36px}
  .t4:last-child{padding-bottom:0}
  .t4 .dot{position:absolute;left:0;top:13px}
  .t4::before{content:"";position:absolute;left:8px;top:35px;bottom:-9px;width:2px;background:repeating-linear-gradient(180deg,rgba(13,20,36,.32) 0 3px,transparent 3px 9px)}
  .t4.done::before{background:var(--wine)}
  .t4:last-child::before{display:none}
  .t4 b{margin-top:0;font-size:54px}
  .t4 h3{margin-top:0;font-size:19px}
  .t4 ul{grid-column:1/-1;margin-top:12px}
}

/* ---------- get started ---------- */
.start{margin-top:clamp(40px,5vw,72px);list-style:none;counter-reset:s;border-top:1px solid var(--rule)}
.start li{counter-increment:s;display:grid;grid-template-columns:64px minmax(0,.7fr) minmax(0,1fr);gap:12px clamp(16px,3vw,48px);padding:clamp(22px,2.6vw,34px) 0;border-bottom:1px solid var(--rule);align-items:start}
.start li::before{content:counter(s);font:italic 400 44px/1 var(--serif);color:var(--wine)}
.start li>*{min-width:0}
.start p{color:var(--sub);font-size:15.5px}
.cmd{display:flex;align-items:center;gap:10px;background:var(--ink);color:var(--on);border-radius:12px;padding:12px 12px 12px 16px;margin-top:12px;font:400 12.5px/1.5 var(--mono)}
.cmd code{flex:1;overflow-x:auto;white-space:nowrap;font-size:inherit;scrollbar-width:none}
.cmd button{flex:none;font:500 12.5px Inter,sans-serif;padding:8px 13px;border-radius:999px;background:rgba(235,224,203,.12);color:var(--on);min-width:68px;transition:transform .14s var(--ease-out),background .15s}
.cmd button:active{transform:scale(.96)}
.cmd button.ok{background:var(--on);color:var(--ink)}
@media(max-width:820px){.start li{grid-template-columns:44px 1fr}.start li>div:last-child{grid-column:2}.start li::before{font-size:34px}}

/* ---------- close ---------- */
.end{position:relative;padding:clamp(48px,6vw,96px) 0 clamp(56px,7vw,96px)}
.end .copy{position:static;transform:none;margin:0 auto;text-align:center;width:min(92vw,900px)}
.end h2{font-size:clamp(44px,5.6vw,96px);line-height:1}
.end .copy p{margin:22px auto 0;max-width:400px;color:var(--sub);font-size:15px;line-height:1.45}
.end .acts{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin-top:clamp(26px,3vw,40px)}
.end .copy p.wl{margin-top:18px;font-size:14px;font-weight:500;color:var(--on)}
/* the close sits on burgundy: cream text and dots, rose for the serif line, the buttons turned round */
.end{background:var(--wine-deep);color:var(--on)}
.end h2 i.s{color:var(--rose)}
.end .copy p{color:rgba(235,224,203,.8)}
.end .copy a:not(.btn){color:var(--on)}
.end .btn{background:var(--on);color:var(--wine)}
.end .btn.ghost{background:none;color:var(--on);box-shadow:inset 0 0 0 1px rgba(235,224,203,.5)}
.end :focus-visible{outline-color:var(--on)}
.end ::selection{background:var(--on);color:var(--wine)}
.frame{position:relative;margin-top:clamp(28px,3.4vw,48px);height:clamp(96px,11vw,150px)}
.frame canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
/* every page ends in the deep burgundy; on the home page it runs on from the close */
footer{border-top:1px solid var(--on-rule);padding:26px 0 30px;font-size:13px;background:var(--wine-deep);color:rgba(235,224,203,.8)}
footer a{color:var(--on)}
footer :focus-visible{outline-color:var(--on)}
footer .w{display:flex;justify-content:space-between;gap:12px 24px;flex-wrap:wrap}
footer nav{display:flex;gap:22px;flex-wrap:wrap}
/* on a touch screen the footer links get a taller area to tap */
@media(pointer:coarse){footer nav a{padding:10px 0;margin:-10px 0}}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .fresh,.cmp .meter i{animation:none}
  .pill,.btn,.tabs button{transition:none}
}