/* Vootlabs live demo: the Vootlabs website's palette and type, Shoelace components, ECharts charts.
   The theme is set on <html data-theme> by /theme.js (the visitor's choice, else the system's). */
@font-face{font-family:'Switzer';font-weight:400;font-display:swap;src:url('/fonts/switzer-400.woff2') format('woff2')}
@font-face{font-family:'Switzer';font-weight:500;font-display:swap;src:url('/fonts/switzer-500.woff2') format('woff2')}
@font-face{font-family:'Switzer';font-weight:600;font-display:swap;src:url('/fonts/switzer-600.woff2') format('woff2')}
@font-face{font-family:'Plex Mono';font-weight:400;font-display:swap;src:url('/fonts/plex-mono-400.woff2') format('woff2')}
@font-face{font-family:'Plex Mono';font-weight:500;font-display:swap;src:url('/fonts/plex-mono-500.woff2') format('woff2')}

:root{
  --bg:#F6F5F1; --surface:#FFFFFF; --stone:#ECEAE4; --ink:#141412; --ink-2:#55534B; --ink-3:#6B695F; --line:#E2E0D8;
  --dark:#121210; --dark-2:#1C1B18; --on-dark:#F3F2EE; --on-dark-2:#A9A79F; --line-dark:rgba(243,242,238,.12);
  /* The hero and closing banner follow the theme */
  --hero-bg:#EEF3EC; --hero-ink:var(--ink); --hero-ink-2:var(--ink-2); --hero-line:rgba(20,20,18,.1); --hero-card:rgba(255,255,255,.78);
  --hero-shadow:0 30px 60px -34px rgb(20 20 18 / .28); --hero-glow:.4;
  --shine:linear-gradient(100deg,#0F7A43 0%,#2FB36B 30%,#0F7A43 55%,#1E9A55 80%,#0F7A43 100%);
  --accent:#0F7A43; --dot:#2FB36B; --accent-soft:rgba(15,122,67,.09); --glow:rgba(47,179,107,.35);
  --ok:#1E8A4C; --ok-bg:#E6F3EA; --warn:#A86B12; --warn-bg:#FBF0DC; --bad:#C2412D; --bad-bg:#FBE7E2;
  /* Charts: the validated reference palette (categorical, sequential blue, ordinal blue, blue/red diverging) */
  --series-1:#2a78d6; --series-2:#eb6834; --series-3:#1baf7a; --series-4:#eda100; --series-5:#e87ba4;
  --seq-1:#cde2fb; --seq-2:#86b6ef; --seq-3:#3987e5; --seq-4:#1c5cab; --seq-5:#0d366b;
  --ord-1:#86b6ef; --ord-2:#3987e5; --ord-3:#1c5cab; --ord-4:#0d366b; --div-pos:#2a78d6; --div-neg:#e34948;
  --radius:16px; --radius-sm:10px; --maxw:1200px; --shadow:0 1px 2px rgb(20 20 18 / .05),0 8px 24px -12px rgb(20 20 18 / .18);
  --sans:'Switzer',system-ui,-apple-system,'Segoe UI',sans-serif; --mono:'Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  color-scheme:light;
  /* Shoelace in the Vootlabs look */
  --sl-font-sans:var(--sans); --sl-font-mono:var(--mono); --sl-border-radius-medium:10px;
  --sl-color-primary-50:var(--sl-color-emerald-50); --sl-color-primary-100:var(--sl-color-emerald-100); --sl-color-primary-200:var(--sl-color-emerald-200);
  --sl-color-primary-300:var(--sl-color-emerald-300); --sl-color-primary-400:var(--sl-color-emerald-400); --sl-color-primary-500:var(--sl-color-emerald-500);
  --sl-color-primary-600:#0F7A43; --sl-color-primary-700:#0c6437; --sl-color-primary-800:var(--sl-color-emerald-800);
  --sl-color-primary-900:var(--sl-color-emerald-900); --sl-color-primary-950:var(--sl-color-emerald-950);
  --sl-panel-background-color:var(--surface); --sl-panel-border-color:var(--line); --sl-input-background-color:var(--surface); --sl-input-border-color:var(--line);
  --sl-tooltip-font-size:13px; --sl-tooltip-max-width:300px;
}
:root[data-theme="dark"]{
  --bg:#121210; --surface:#1C1B18; --stone:#25241F; --ink:#F3F2EE; --ink-2:#A9A79F; --ink-3:#8D8B83; --line:#2E2D28;
  --hero-bg:var(--dark); --hero-ink:var(--on-dark); --hero-ink-2:var(--on-dark-2); --hero-line:var(--line-dark); --hero-card:color-mix(in srgb,var(--dark-2) 82%,transparent);
  --hero-shadow:0 30px 60px -30px rgb(0 0 0 / .7); --hero-glow:.55;
  --shine:linear-gradient(100deg,#2FB36B 0%,#9be7bd 30%,#2FB36B 55%,#7fd3a5 80%,#2FB36B 100%);
  --dark:#0B0B0A; --dark-2:#171714; --accent:#3FBF73; --accent-soft:rgba(47,179,107,.14); --glow:rgba(47,179,107,.28);
  --ok:#3FBF73; --ok-bg:#16301F; --warn:#E0A54A; --warn-bg:#33270F; --bad:#F0806C; --bad-bg:#3A1C16;
  --series-1:#3987e5; --series-2:#d95926; --series-3:#199e70; --series-4:#c98500; --series-5:#d55181;
  --seq-1:#104281; --seq-2:#184f95; --seq-3:#2a78d6; --seq-4:#5598e7; --seq-5:#9ec5f4;
  --ord-1:#184f95; --ord-2:#2a78d6; --ord-3:#5598e7; --ord-4:#9ec5f4; --div-pos:#3987e5; --div-neg:#e66767;
  --shadow:0 1px 2px rgb(0 0 0 / .3),0 10px 30px -14px rgb(0 0 0 / .6);
  color-scheme:dark;
  --sl-color-primary-600:var(--sl-color-emerald-600); --sl-color-primary-700:var(--sl-color-emerald-700);
  --sl-panel-background-color:var(--surface); --sl-panel-border-color:var(--line); --sl-input-background-color:var(--stone); --sl-input-border-color:var(--line);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:72px}
html,body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.55 var(--sans);-webkit-font-smoothing:antialiased;transition:background-color .3s,color .3s}
a{color:inherit}
button,select{font:inherit;color:inherit}
code,.mono{font-family:var(--mono);font-size:.86em}
.muted{color:var(--ink-2)}
.small{font-size:13px}
.nowrap{white-space:nowrap}
.num{font-variant-numeric:tabular-nums}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 16px;position:relative}
@media (min-width:700px){.wrap{padding:0 28px}}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font:500 12px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.eyebrow::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--dot);box-shadow:0 0 0 4px var(--accent-soft)}
.eyebrow.small{font-size:11px}
.eyebrow.small::before{width:6px;height:6px;box-shadow:none}
sl-icon{vertical-align:-.125em}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 18px;border-radius:999px;border:1px solid transparent;background:var(--accent);color:#fff;font-weight:500;font-size:15px;text-decoration:none;cursor:pointer;white-space:nowrap;transition:transform .15s,box-shadow .2s,background .15s}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px -10px var(--glow)}
.btn.small{padding:7px 14px;font-size:14px}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn.ghost:hover{border-color:var(--ink-3);box-shadow:none}
.btn.dark{background:var(--ink);color:var(--bg)}
.btn.ok{background:var(--ok);color:#fff}
.btn.claude{background:#C96442;color:#fff}
.btn.claude:hover{box-shadow:0 10px 24px -10px rgb(201 100 66 / .6)}
.btn.chatgpt{background:var(--ink);color:var(--bg)}
.ask-btns{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
/* The real logos, each in a round badge in its brand colour */
.btn.marked{padding-left:7px;gap:9px}
.btn.marked.small{padding-left:5px;gap:7px}
.btn .badge{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;flex:none;transition:transform .25s cubic-bezier(.2,.7,.2,1)}
.btn.small .badge{width:24px;height:24px}
.btn .mark{width:17px;height:17px}
.btn.small .mark{width:15px;height:15px}
.btn.claude .badge{background:#fff;color:#D97757}
.btn.chatgpt .badge{background:var(--bg);color:var(--ink)}
.btn.marked:hover .badge{transform:rotate(-12deg) scale(1.08)}
.copy-prompt{font-size:18px;color:inherit}
.chip-btn{border:1px solid var(--hero-line);background:transparent;color:var(--hero-ink);border-radius:999px;padding:5px 12px;font-size:13px;cursor:pointer;text-align:left;transition:border-color .15s,background .15s}
.chip-btn:hover{border-color:var(--dot);background:rgba(47,179,107,.08)}
.link-btn{border:0;background:none;padding:0;color:var(--accent);font-size:12px;cursor:pointer;font-weight:500}

/* ---------- Header ---------- */
.top{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--line)}
.top-in{display:flex;align-items:center;gap:20px;height:62px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-size:17px}
.brand .tag{font:500 11px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--accent);background:var(--accent-soft);padding:3px 8px;border-radius:999px;white-space:nowrap}
.top nav{display:flex;gap:2px;margin-left:auto;overflow-x:auto;scrollbar-width:none}
.top nav a{padding:6px 10px;font-size:14px;color:var(--ink-2);text-decoration:none;border-radius:8px;white-space:nowrap;transition:background .15s,color .15s}
.top nav a:hover{color:var(--ink);background:var(--stone)}
.top-right{display:flex;align-items:center;gap:8px}
.theme-btn{font-size:19px;color:var(--ink-2)}
.theme-btn::part(base):hover{color:var(--ink)}
.live-dot{width:8px;height:8px;border-radius:50%;background:var(--dot);display:inline-block;flex:none;animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 var(--glow)}70%{box-shadow:0 0 0 8px transparent}100%{box-shadow:0 0 0 0 transparent}}
@media (max-width:1080px){.top nav{display:none}.top-right{margin-left:auto}}
@media (max-width:460px){.brand .tag{display:none}}
.starting{min-height:70vh;display:grid;place-content:center;justify-items:center;gap:6px;text-align:center}
.starting h1{font-size:24px;margin:12px 0 0}
footer{border-top:1px solid var(--line);padding:22px 0 36px;color:var(--ink-3);font-size:13px}
.foot-in{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:center}
.foot-in span:first-child{display:inline-flex;gap:8px;align-items:center;color:var(--ink);font-weight:500}

/* ---------- Sections and reveal ---------- */
.sec{padding:80px 0}
.sec + .sec{border-top:1px solid var(--line)}
.sec-head{max-width:760px;margin-bottom:34px}
.sec h2{font-size:clamp(26px,3.4vw,40px);line-height:1.1;letter-spacing:-.025em;font-weight:600;margin:12px 0 0}
.lede{font-size:18px;color:var(--ink-2);margin:14px 0 0;max-width:720px}
.aside{margin:26px 0 0;color:var(--ink-2);font-size:15px;max-width:760px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:20px;min-width:0;box-shadow:var(--shadow)}
.sec .wrap > *{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.sec .wrap > :nth-child(2){transition-delay:.12s}
.sec .wrap > :nth-child(3){transition-delay:.22s}
.sec.in .wrap > *{opacity:1;transform:none}
@media (max-width:700px){.sec{padding:56px 0}.lede{font-size:16px}.card{padding:16px}}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;background:var(--hero-bg);color:var(--hero-ink);border-bottom:1px solid var(--line);padding:84px 0 92px}
.hero .eyebrow{color:var(--hero-ink-2)}
.hero-glow{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.hero-glow i{position:absolute;border-radius:50%;filter:blur(70px);opacity:var(--hero-glow);animation:drift 18s ease-in-out infinite alternate}
.hero-glow i:nth-child(1){width:520px;height:520px;background:radial-gradient(circle,rgba(47,179,107,.55),transparent 65%);top:-180px;right:-80px}
.hero-glow i:nth-child(2){width:420px;height:420px;background:radial-gradient(circle,rgba(42,120,214,.35),transparent 65%);bottom:-200px;left:-120px;animation-duration:22s}
.hero-glow i:nth-child(3){width:300px;height:300px;background:radial-gradient(circle,rgba(201,100,66,.25),transparent 65%);top:30%;left:42%;animation-duration:26s}
@keyframes drift{from{transform:translate(0,0) scale(1)}to{transform:translate(60px,40px) scale(1.15)}}
.hero-in{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:52px;align-items:center}
.hero h1{font-size:clamp(38px,5.6vw,68px);line-height:1.02;letter-spacing:-.035em;font-weight:600;margin:16px 0 0}
.shine{background:var(--shine);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 6s linear infinite}
@keyframes shine{to{background-position:-220% 0}}
.hero .lede{color:var(--hero-ink-2);font-size:19px}
.hero-stats{display:flex;gap:28px;margin-top:28px;flex-wrap:wrap}
.hero-stats div{display:grid}
.hero-stats b{font-size:28px;font-weight:600;letter-spacing:-.02em;line-height:1.1}
.hero-stats span{font-size:13px;color:var(--hero-ink-2)}
.hero-ask{position:relative;background:var(--hero-card);backdrop-filter:blur(8px);border:1px solid var(--hero-line);border-radius:22px;padding:26px;display:grid;gap:14px;box-shadow:var(--hero-shadow)}
.hero-ask::before{content:'';position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:linear-gradient(140deg,rgba(47,179,107,.7),transparent 40%,transparent 60%,rgba(42,120,214,.5));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.hero-ask .small{color:var(--hero-ink-2);margin:0}
.hero-q{font-size:24px;line-height:1.25;font-weight:500;letter-spacing:-.01em;animation:rise .4s ease}
.hero-ask .copy-prompt{color:var(--hero-ink-2)}
.hero-more{display:flex;flex-wrap:wrap;gap:6px;align-items:center;border-top:1px solid var(--hero-line);padding-top:14px}
@media (max-width:900px){.hero{padding:52px 0 60px}.hero-in{grid-template-columns:minmax(0,1fr);gap:32px}.hero .lede{font-size:17px}.hero-q{font-size:21px}.hero-stats{gap:20px}}
.local-note{font-size:13px}
.local-note::part(base){background:var(--warn-bg);border-color:color-mix(in srgb,var(--warn) 35%,transparent);color:var(--warn)}

/* ---------- Ticker ---------- */
.ticker{overflow:hidden;background:var(--surface);border-bottom:1px solid var(--line);-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.ticker-track{display:flex;width:max-content;animation:scroll 60s linear infinite}
.ticker:hover .ticker-track{animation-play-state:paused}
.tick{display:inline-flex;gap:8px;align-items:center;padding:14px 26px;font-size:14px;color:var(--ink-2);white-space:nowrap}
.tick b{font:500 11px var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--accent)}
.tick::after{content:'';width:4px;height:4px;border-radius:50%;background:var(--line);margin-left:26px}
@keyframes scroll{to{transform:translateX(-50%)}}

/* ---------- The flow picture ---------- */
.flow{display:grid;grid-template-columns:minmax(0,3fr) 52px minmax(230px,1.15fr) 52px minmax(160px,.8fr);align-items:center}
.flow-col{min-width:0}
.flow-head{display:flex;justify-content:space-between;gap:8px;font:500 11px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin-bottom:10px}
.sys-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.sys{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:11px 12px;transition:border-color .25s,box-shadow .25s,transform .25s;cursor:help;height:100%}
.sys:hover,.sys:focus-visible{transform:translateY(-3px);box-shadow:var(--shadow);border-color:color-mix(in srgb,var(--accent) 40%,var(--line));outline:none}
.sys-name{font-weight:600;font-size:14px;line-height:1.25;display:flex;align-items:center;gap:7px}
.sys-dot{width:6px;height:6px;border-radius:50%;background:var(--dot);flex:none;animation:blink 3s ease-in-out infinite;animation-delay:calc(var(--i) * .33s)}
@keyframes blink{0%,100%{opacity:.35}50%{opacity:1}}
.sys-prod{font-size:12px;color:var(--ink-3);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sys-fact{font-size:14px;font-weight:500;margin-top:8px;line-height:1.3;font-variant-numeric:tabular-nums}
.sys-detail{font-size:12px;color:var(--ink-2);margin-top:2px;line-height:1.35}
.sys.lit{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft),0 10px 30px -12px var(--glow);transform:translateY(-3px)}
.sys.lit .sys-dot{animation:none;opacity:1;box-shadow:0 0 0 4px var(--accent-soft)}
.wire{height:2px;position:relative;background:var(--line);overflow:visible}
.wire i{position:absolute;inset:0;background:repeating-linear-gradient(90deg,var(--ink-3) 0 6px,transparent 6px 14px);opacity:.45;animation:flow 1.4s linear infinite}
.wire b{position:absolute;top:-3px;left:0;width:8px;height:8px;border-radius:50%;background:var(--dot);box-shadow:0 0 10px var(--glow);animation:packet 2.4s linear infinite;opacity:0}
.wire b:nth-of-type(2){animation-delay:.8s}
.wire b:nth-of-type(3){animation-delay:1.6s}
.flow.busy .wire i{background:repeating-linear-gradient(90deg,var(--accent) 0 8px,transparent 8px 14px);opacity:1;animation-duration:.5s}
.flow.busy .wire b{animation-duration:.9s}
@keyframes flow{from{background-position:0 0}to{background-position:28px 0}}
@keyframes packet{0%{left:0;opacity:0}15%{opacity:1}85%{opacity:1}100%{left:calc(100% - 8px);opacity:0}}
.gw{background:var(--dark);color:var(--on-dark);border-radius:var(--radius);padding:20px;display:grid;gap:14px;box-shadow:0 18px 40px -18px rgb(0 0 0 / .55);position:relative;overflow:hidden}
.gw::after{content:'';position:absolute;inset:0;background:radial-gradient(circle at 100% 0,rgba(47,179,107,.22),transparent 55%);pointer-events:none}
.gw-title{display:flex;gap:10px;align-items:center}
.gw-title b{display:block;font-size:16px}
.gw-title span{display:block;font-size:12px;color:var(--on-dark-2)}
.gw-list{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.gw-list li{display:grid;font-size:14px;line-height:1.3;padding-left:12px;border-left:2px solid var(--dot)}
.gw-list span{font-size:12.5px;color:var(--on-dark-2)}
.gw-today{display:flex;align-items:center;gap:8px;font:12px var(--mono);color:var(--on-dark-2);border-top:1px solid var(--line-dark);padding-top:10px}
.pulse{width:7px;height:7px;border-radius:50%;background:var(--dot);animation:pulse 2s infinite;flex:none}
.flow.busy .gw{box-shadow:0 0 0 3px color-mix(in srgb,var(--dot) 40%,transparent),0 18px 40px -18px var(--glow)}
.ai-list{display:grid;gap:8px}
.ai-app{display:flex;gap:9px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:10px 12px;font-weight:500;font-size:14px;transition:transform .2s,border-color .2s}
.ai-app sl-icon{color:var(--accent);font-size:16px;width:18px;flex:none}
.ai-mark{width:18px;height:18px;display:grid;place-items:center;flex:none}
.ai-mark .mark{width:18px;height:18px}
.ai-mark.claude{color:#D97757}
.ai-mark.chatgpt{color:var(--ink)}
.ai-app:hover{transform:translateX(3px);border-color:color-mix(in srgb,var(--accent) 40%,var(--line))}
.ai-note{font-size:12px;color:var(--ink-3);margin:8px 0 0}
@media (max-width:1050px){
  .flow{grid-template-columns:minmax(0,1fr)}
  .wire{width:2px;height:36px;margin:6px auto}
  .wire i{background:repeating-linear-gradient(180deg,var(--ink-3) 0 6px,transparent 6px 14px);animation-name:flow-v}
  .flow.busy .wire i{background:repeating-linear-gradient(180deg,var(--accent) 0 8px,transparent 8px 14px)}
  .wire b{left:-3px;animation-name:packet-v}
  .gw-col{max-width:520px;width:100%;margin:0 auto}
  .ai-list{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
}
@keyframes flow-v{from{background-position:0 0}to{background-position:0 28px}}
@keyframes packet-v{0%{top:0;opacity:0}15%{opacity:1}85%{opacity:1}100%{top:calc(100% - 8px);opacity:0}}
@media (max-width:640px){.sys-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- Try it ---------- */
.try{display:grid;grid-template-columns:minmax(240px,.8fr) minmax(0,2fr);gap:16px;align-items:start}
@media (max-width:900px){.try{grid-template-columns:minmax(0,1fr)}}
.q-list{display:grid;gap:8px}
.q{display:grid;gap:2px;text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 14px;cursor:pointer;transition:border-color .15s,transform .15s,box-shadow .2s}
.q:hover{border-color:var(--ink-3);transform:translateX(3px)}
.q.on{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.q-text{font-weight:500;font-size:15px;line-height:1.3}
.q-role{font-size:12px;color:var(--ink-3)}
.run{min-height:320px}
.run-empty{display:grid;place-content:center;min-height:280px;text-align:center;max-width:460px;margin:0 auto}
.run-empty p{color:var(--ink-2);margin:6px 0 0}
.run-top{display:flex;justify-content:space-between;gap:12px 20px;flex-wrap:wrap;padding-bottom:14px;border-bottom:1px solid var(--line)}
.run-q{font-size:19px;font-weight:600;margin-top:4px;letter-spacing:-.01em}
.strip{display:flex;flex-wrap:wrap;gap:4px;align-content:flex-start;max-width:380px}
.sys-chip{font:500 10.5px/1 var(--mono);letter-spacing:.03em;text-transform:uppercase;padding:4px 7px;border-radius:6px;background:var(--accent-soft);color:var(--accent);white-space:nowrap;transition:background .3s,color .3s,opacity .3s}
.sys-chip.off{background:var(--stone);color:var(--ink-3);opacity:.7}
.trace{list-style:none;margin:0;padding:6px 0 0;display:grid}
.step{display:grid;grid-template-columns:28px 1fr;gap:10px;padding:12px 0;border-bottom:1px dashed var(--line);animation:rise .35s ease}
.step-n{width:24px;height:24px;border-radius:50%;background:var(--ink);color:var(--bg);font:500 12px/24px var(--mono);text-align:center;display:grid;place-items:center}
.step.bad .step-n{background:var(--bad);color:#fff}
.step-spin{font-size:22px;--indicator-color:var(--accent);--track-color:var(--line)}
.step.wait .step-body{color:var(--ink-3);font-size:14px;padding-top:2px}
.step-body{min-width:0}
.step-top{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.step-top b{font-weight:600;font-size:15px;margin-right:2px}
.step-says{font-size:14px;color:var(--ink-2);margin-top:2px}
.step.bad .step-says{color:var(--bad)}
.step-call{display:block;margin-top:6px;font-size:12px;color:var(--ink-3);overflow-wrap:anywhere}
@keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.answer{margin-top:16px;background:var(--accent-soft);border-radius:12px;padding:16px 18px;animation:rise .4s ease}
.answer-head{font-size:16px;font-weight:500;margin:0;line-height:1.45}
.answer ul,.roles-answer ul{margin:10px 0 0;padding-left:20px;display:grid;gap:6px;font-size:15px}
.answer-foot{font:12px var(--mono);color:var(--ink-3);margin-top:12px}
.answer-ask{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;margin-top:14px;padding-top:14px;border-top:1px solid color-mix(in srgb,var(--accent) 20%,transparent);font-size:14px;font-weight:500}

/* ---------- Sample answers ---------- */
.samples{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.sample{position:relative;display:grid;gap:8px;align-content:start;text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:18px;cursor:pointer;box-shadow:var(--shadow);transition:transform .25s cubic-bezier(.2,.7,.2,1),border-color .2s,box-shadow .25s;overflow:hidden}
.sample::after{content:'';position:absolute;inset:0;background:radial-gradient(circle at 100% 0,var(--accent-soft),transparent 60%);opacity:0;transition:opacity .25s;pointer-events:none}
.sample:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--accent) 45%,var(--line));box-shadow:0 18px 40px -20px var(--glow)}
.sample:hover::after{opacity:1}
.sample-icon{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent);font-size:20px}
.sample-title{font-weight:600;font-size:16px;letter-spacing:-.01em}
.sample-ask{font-size:14px;color:var(--ink-2);line-height:1.4}
.sample-tags{display:flex;gap:5px;flex-wrap:wrap}
.sample-open{display:inline-flex;gap:6px;align-items:center;font-size:13px;font-weight:500;color:var(--accent);margin-top:4px}
.sample:hover .sample-open sl-icon{transform:translateX(3px)}
.sample-open sl-icon{transition:transform .2s}
.sample-drawer{--size:min(700px,100vw);--body-spacing:0}
.sample-drawer::part(panel){background:var(--bg)}
.sample-drawer::part(header){border-bottom:1px solid var(--line);background:var(--surface)}
.sample-drawer::part(title){font-weight:600;font-size:17px}
.sample-drawer::part(footer){border-top:1px solid var(--line);background:var(--surface);text-align:left;padding:14px 20px}
.drawer-foot{display:grid;gap:10px}
.drawer-foot p{margin:0;font-size:13px;color:var(--ink-3)}
.chat{padding:20px;display:grid;gap:18px}
.msg{display:grid;grid-template-columns:32px minmax(0,1fr);gap:10px;align-items:start;animation:rise .35s ease}
.avatar{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-size:30px;color:var(--ink-3)}
.msg.user .bubble{justify-self:start;background:var(--surface);border:1px solid var(--line);border-radius:4px 16px 16px 16px;padding:10px 14px;font-size:15px;max-width:520px}
.reply{min-width:0;display:grid;gap:12px}
.reply-who{font-weight:600;font-size:14px}
.reply-who span{font-weight:400;color:var(--ink-3);margin-left:4px}
.reply-wait{display:flex;align-items:center;gap:10px;color:var(--ink-3);font-size:14px;padding:8px 0}
.reply-wait sl-spinner{font-size:18px;--indicator-color:var(--accent)}
.used::part(base){background:var(--surface);border-color:var(--line)}
.used::part(header){padding:10px 14px;font-size:13px;color:var(--ink-2)}
.used::part(content){padding:0 14px 12px}
.used-list{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:13px}
.used-list li{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.reply-body{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;font-size:15px}
.chat,.reply{grid-template-columns:minmax(0,1fr)}
.reply-body > *{min-width:0}
.reply-body > *{animation:rise .45s ease both}
.reply-body > :nth-child(2){animation-delay:.08s}.reply-body > :nth-child(3){animation-delay:.16s}.reply-body > :nth-child(4){animation-delay:.24s}.reply-body > :nth-child(5){animation-delay:.32s}.reply-body > :nth-child(n+6){animation-delay:.4s}
.reply-body p{margin:0}
.reply-body ul{margin:0;padding-left:20px;display:grid;gap:6px}
.r-h{margin:0;font-size:19px;letter-spacing:-.01em}
.r-h2{margin:4px 0 -4px;font-size:13px;font:500 12px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.r-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:8px}
.r-kpi{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:11px 13px;display:grid;gap:1px}
.r-kpi span{font-size:12px;color:var(--ink-3)}
.r-kpi b{font-size:20px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.r-kpi em{font:500 12px var(--mono);font-style:normal}
.r-kpi small{font-size:12px;color:var(--ink-3)}
.up{color:var(--ok)}.down{color:var(--bad)}
.fig{margin:0;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px 14px 8px}
.fig figcaption{display:flex;justify-content:space-between;gap:10px;align-items:baseline;font-size:13px;font-weight:600;margin-bottom:6px}
.chart{width:100%}
.r-table{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:6px 8px}
.r-cap{font-size:13px;font-weight:600;padding:8px 8px 2px}
table.mini{font-size:13.5px}
table.mini td.up,table.mini td.down{font-weight:500}
.r-callout{font-size:14px}
.r-callout::part(base){border-radius:12px}
.r-draft{background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.r-draft-top{display:flex;gap:8px;align-items:center;padding:10px 14px;border-bottom:1px solid var(--line);font-size:14px}
.r-draft-top sl-copy-button{margin-left:auto}
.r-draft-meta{display:flex;gap:10px;padding:6px 14px;font-size:13px;border-bottom:1px solid var(--line)}
.r-draft-meta span{color:var(--ink-3);width:56px;flex:none}
.r-draft pre{margin:0;padding:12px 14px;font:14px/1.55 var(--sans);white-space:pre-wrap}
.r-action{border:1px dashed color-mix(in srgb,var(--warn) 55%,transparent);background:var(--warn-bg);border-radius:14px;padding:12px 14px;font-size:13px;color:var(--ink-2)}
.r-action-top{display:flex;gap:8px;align-items:center;color:var(--ink);font-size:14px;margin-bottom:4px}
.r-action-top sl-badge{margin-left:auto}
.r-action-what{font-weight:600;color:var(--ink);font-size:15px;margin-bottom:2px}
.r-action p{margin:8px 0 0}

/* ---------- Roles ---------- */
.roles{display:grid;gap:16px}
.roles-q{display:grid;gap:4px}
.roles-q b{font-size:20px;font-weight:600}
.roles-pick::part(form-control-label){font-size:13px;color:var(--ink-3);margin-bottom:6px}
.roles-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:16px}
@media (max-width:900px){.roles-grid{grid-template-columns:minmax(0,1fr)}}
.roles-who{margin:8px 0 12px;font-weight:500}
.can{display:flex;flex-wrap:wrap;gap:6px}
.can-item{display:inline-flex;gap:5px;align-items:center;font-size:13px;padding:4px 10px;border-radius:999px;white-space:nowrap;transition:background .3s,color .3s}
.can-item.yes{background:var(--ok-bg);color:var(--ok)}
.can-item.no{background:var(--stone);color:var(--ink-3);text-decoration:line-through}
.roles-answer{transition:background .3s,border-color .3s}
.roles-answer .answer-head{margin-top:8px}
.roles-answer.refused{border-color:color-mix(in srgb,var(--bad) 40%,transparent);background:var(--bad-bg)}
.roles-answer.refused .eyebrow{color:var(--bad)}
.roles-answer.refused .eyebrow::before{background:var(--bad)}
ul.cols{columns:2;column-gap:24px;display:block}
ul.cols li{break-inside:avoid;margin-bottom:6px}
@media (max-width:560px){ul.cols{columns:1}}
@media (max-width:640px){.roles-pick sl-radio-button::part(button){padding:0 10px;font-size:13px}}

/* ---------- Approvals ---------- */
.flow3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media (max-width:900px){.flow3{grid-template-columns:minmax(0,1fr)}}
.stage{position:relative;display:grid;gap:10px;align-content:start}
.stage p{margin:0;font-size:15px}
.stage > .btn{justify-self:start}
.stage-n{position:absolute;top:14px;right:18px;font:600 30px var(--mono);color:var(--line)}
.stage-sys{font:12px var(--mono);color:var(--ink-3);margin-top:auto}
.req{display:grid;gap:4px;background:var(--stone);border-radius:12px;padding:12px 14px;font-size:14px}
.req code{color:var(--ink-3);font-size:12px}
.req-status{justify-self:start;margin-top:6px;font:500 12px var(--mono);padding:3px 9px;border-radius:999px;background:var(--warn-bg);color:var(--warn);transition:background .3s,color .3s}
.req-status.approved{background:var(--ok-bg);color:var(--ok)}
.req-status.rejected{background:var(--bad-bg);color:var(--bad)}
.sim-note{font-size:13px;color:var(--ink-3);margin:14px 0 0}

/* ---------- Audit ---------- */
.audit{display:grid;gap:16px}
.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
@media (max-width:700px){.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
.tile{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;display:grid;box-shadow:var(--shadow)}
.tile sl-icon{color:var(--accent);font-size:18px;margin-bottom:6px}
.tile b{font-size:30px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.1}
.tile span{font-size:13px;color:var(--ink-2)}
.tw{overflow-x:auto;padding:6px 10px}
.audit-head{display:flex;align-items:center;gap:8px;font:12px var(--mono);color:var(--ink-3);padding:8px 8px 4px}
table{border-collapse:collapse;width:100%;font-size:14px}
th{font:500 11px var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3);text-align:left;padding:8px;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:8px;border-bottom:1px solid var(--line);vertical-align:top}
th.r,td.r{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
tr:last-child td{border-bottom:0}
tr.new td{animation:flash 2.4s ease}
@keyframes flash{0%{background:var(--accent-soft)}100%{background:transparent}}
.chips{display:flex;flex-wrap:wrap;gap:4px}

/* ---------- Connect ---------- */
.connect{display:grid;gap:16px}
.connect-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:16px}
@media (max-width:900px){.connect-grid{grid-template-columns:minmax(0,1fr)}}
.connect .card{display:grid;gap:12px;align-content:start}
.connect .card p{margin:0}
.apps::part(base){border-radius:10px}
.apps sl-tab-panel::part(base){padding:14px 0 4px}
.linkbox{display:flex;gap:6px;align-items:center;background:var(--stone);border-radius:var(--radius-sm);padding:6px 6px 6px 12px;margin-top:6px}
.linkbox code{flex:1;min-width:0;overflow-wrap:anywhere;font-size:13px}
.steps{margin:0;padding-left:20px;display:grid;gap:8px;font-size:15px}
.no-setup{display:flex!important;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 24px}
.no-setup > div{flex:1 1 320px}
.no-setup p{margin:4px 0 0!important;overflow-wrap:anywhere}

/* ---------- Closing ---------- */
.closing{position:relative;overflow:hidden;background:var(--hero-bg);color:var(--hero-ink);border-top:1px solid var(--line);padding:84px 0;text-align:center}
.closing h2{font-size:clamp(28px,4vw,46px);letter-spacing:-.025em;margin:0;font-weight:600}
.closing .lede{color:var(--hero-ink-2);margin:14px auto 26px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .ticker-track{animation:none}
  .sec .wrap > *{opacity:1;transform:none}
}