/* design-tokens:start. One design system for the dashboard, the control plane and the website: this block is
   identical in the-machine dashboard.html and themachine-cloud static/app.css (a test keeps them equal); the
   reasoning is in docs/design.md. Warm paper and ink, mint used sparingly, hairlines instead of shadows, a serif
   only at the top of the hierarchy, a small type scale on a 4px grid, short eased motion. */
:root{
  --serif:"Source Serif 4","Iowan Old Style","New York",ui-serif,Georgia,serif;
  --sans:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:ui-monospace,"JetBrains Mono","SF Mono",Menlo,Consolas,monospace;
  --fs-xs:12px;--fs-sm:13.5px;--fs-md:15px;--fs-lg:17px;--fs-xl:20px;--fs-2xl:26px;--fs-3xl:clamp(36px,5.2vw,54px);
  --fw-display:380;--fw-heading:460;--fw-medium:500;--fw-strong:600;
  --lh-tight:1.2;--lh-body:1.55;
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:24px;--sp-6:32px;--sp-7:48px;--sp-8:72px;
  --r-xs:6px;--r-sm:8px;--r-md:10px;--r-lg:14px;--r-xl:20px;--r-pill:999px;
  --measure:720px;
  --ease:cubic-bezier(.165,.85,.45,1);--dur:.15s;
  --c-bg:#1b1c1f;--c-surface:#232428;--c-raised:#2c2d32;--c-sunken:#151619;
  --c-line:#ffffff17;--c-line-strong:#ffffff2b;
  --c-text:#f3f0e8;--c-text-2:#c4c1b8;--c-text-3:#94918a;
  --c-accent:#bccba8;--c-accent-hover:#cad8b6;--c-accent-ink:#1a1d17;
  --c-accent-tint:color-mix(in srgb,#8fc46a 17%,var(--c-surface));
  --c-amber:#ffd76b;--c-orange:#eca45b;--c-lavender:#c7b5e2;
  --c-hover:#ffffff0d;
  --shadow-sm:none;--shadow-pop:0 12px 32px -8px #000a,0 0 0 1px var(--c-line);
  --ring:0 0 0 2px var(--c-bg),0 0 0 4px color-mix(in srgb,var(--c-accent) 70%,transparent)}
:root[data-theme="light"]{
  --c-bg:#f8f7f3;--c-surface:#ffffff;--c-raised:#ffffff;--c-sunken:#efede6;
  --c-line:#1d1d1b1a;--c-line-strong:#1d1d1b2e;
  --c-text:#1d1d1b;--c-text-2:#5a5954;--c-text-3:#75736d;
  --c-accent:#4e6b34;--c-accent-hover:#405a2a;--c-accent-ink:#ffffff;
  --c-accent-tint:color-mix(in srgb,#4e6b34 15%,var(--c-surface));
  --c-amber:#8a5c00;--c-orange:#b0561a;--c-lavender:#5e4f86;
  --c-hover:#1d1d1b0a;
  --shadow-sm:0 1px 2px #1d1d1b0a;--shadow-pop:0 12px 32px -10px #1d1d1b2e,0 0 0 1px var(--c-line)}
@media (prefers-color-scheme:light){:root:not([data-theme]){
  --c-bg:#f8f7f3;--c-surface:#ffffff;--c-raised:#ffffff;--c-sunken:#efede6;
  --c-line:#1d1d1b1a;--c-line-strong:#1d1d1b2e;
  --c-text:#1d1d1b;--c-text-2:#5a5954;--c-text-3:#75736d;
  --c-accent:#4e6b34;--c-accent-hover:#405a2a;--c-accent-ink:#ffffff;
  --c-accent-tint:color-mix(in srgb,#4e6b34 15%,var(--c-surface));
  --c-amber:#8a5c00;--c-orange:#b0561a;--c-lavender:#5e4f86;
  --c-hover:#1d1d1b0a;
  --shadow-sm:0 1px 2px #1d1d1b0a;--shadow-pop:0 12px 32px -10px #1d1d1b2e,0 0 0 1px var(--c-line)}}
/* design-tokens:end */
@font-face{font-family:"Source Serif 4";font-style:normal;font-weight:200 900;font-display:swap;src:url(/static/serif.woff2) format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url(/static/sans.woff2) format("woff2")}
:root{color-scheme:dark;--on-mint:#1a1d17;--mint-hover:#cad8b6;--surface-end:#17191d;--drop:#0007;--drop-strong:#000c;--backdrop:#15171bb3;--select-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23BCCBA8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");--bg:#131518;--surface:#1c1f24;--surface-2:#23272e;--line:#c7b5e22e;--mint:#BCCBA8;--cream:#F5E5BF;--amber:#FFD76B;--orange:#ECA45B;--lavender:#C7B5E2;--text:#f4f2ec;--muted:#c9ccc3;--faint:#9da197;}
/* Light: chosen (data-theme, from the theme cookie shared with the dashboard) or, before any choice, the device's own setting. */
:root[data-theme=light]{color-scheme:light;--bg:#f6f4ef;--surface:#ffffff;--surface-2:#f0eee8;--surface-end:#f6f4ef;--line:#58516e29;--mint:#4e6b34;--mint-hover:#3f582a;--on-mint:#ffffff;--cream:#3d3752;--amber:#8a5c00;--orange:#b0561a;--lavender:#5e4f86;--text:#1d1f24;--muted:#454850;--faint:#6b6e76;--drop:#3d375226;--drop-strong:#3d375240;--backdrop:#3d375240;--select-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%234e6b34' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
@media (prefers-color-scheme:light){:root:not([data-theme]){color-scheme:light;--bg:#f6f4ef;--surface:#ffffff;--surface-2:#f0eee8;--surface-end:#f6f4ef;--line:#58516e29;--mint:#4e6b34;--mint-hover:#3f582a;--on-mint:#ffffff;--cream:#3d3752;--amber:#8a5c00;--orange:#b0561a;--lavender:#5e4f86;--text:#1d1f24;--muted:#454850;--faint:#6b6e76;--drop:#3d375226;--drop-strong:#3d375240;--backdrop:#3d375240;--select-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%234e6b34' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}}
*{box-sizing:border-box}
/* Always keep room for the scrollbar, so the page does not shift sideways when a tab or page is shorter than the window. */
html{scrollbar-gutter:stable}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.6 var(--sans);-webkit-font-smoothing:antialiased}
a{color:var(--mint)}
a:hover{color:var(--cream)}
.wrap{max-width:860px;margin:0 auto;padding:0 22px}
header{border-bottom:1px solid var(--line)}
nav{display:flex;align-items:center;gap:22px;height:62px}
nav .logo{margin-right:auto;display:flex}
nav .logo{color:var(--cream)}nav .logo svg{display:block;height:22px;width:auto}
nav a.link,nav button.link{color:var(--muted);text-decoration:none;font:15px var(--sans);background:none;border:0;cursor:pointer;padding:0;white-space:nowrap}
nav a.link:hover,nav button.link:hover{color:var(--text)}
nav span.link.disabled{color:var(--faint);font:15px var(--sans);white-space:nowrap;cursor:not-allowed}
nav form{display:flex;margin:0}
.actions{display:flex;gap:10px;flex-wrap:wrap;align-items:end}
.actions form.inline{margin-top:6px}
main{padding:40px 0 80px}
h1{font-size:clamp(32px,5vw,46px);line-height:1.08;letter-spacing:-.02em;color:var(--cream);margin:8px 0 16px}
h2{font-size:21px;color:var(--cream);margin:0 0 6px}
h1,h2,h3{overflow-wrap:break-word}
h1.email{font-size:clamp(24px,7vw,46px);overflow-wrap:anywhere}
.eyebrow{font:600 12.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--amber)}
.lede{font-size:18px;color:var(--muted);max-width:36em}
.fine{font-size:13.5px;color:var(--faint)}
.btn{display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border-radius:12px;font:600 15.5px var(--sans);text-decoration:none;border:1px solid transparent;cursor:pointer;background:none;color:var(--text)}
.btn.primary{background:var(--mint);color:var(--on-mint)}
.btn.primary:hover{background:var(--mint-hover);color:var(--on-mint)}
.btn.ghost{border-color:var(--line)}
.btn.danger{border-color:color-mix(in srgb,var(--orange) 40%,transparent);color:var(--orange)}
.btn[disabled]{opacity:.5;cursor:default}
.step{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:20px 22px;margin:0 0 14px}
.step.done{opacity:.85}
.step.locked{opacity:.5}
.step .head{display:flex;align-items:baseline;gap:12px;margin-bottom:6px}
.step .n{font:600 13px var(--mono);color:var(--faint)}
.step .state{margin-left:auto;font:600 12.5px var(--mono);letter-spacing:.06em;text-transform:uppercase}
.state.ok{color:var(--mint)}.state.wait{color:var(--amber)}.state.bad{color:var(--orange)}.state.off{color:var(--faint)}
.step p{margin:4px 0 10px;color:var(--muted)}
form.inline{display:flex;gap:10px;flex-wrap:wrap;align-items:end;margin:10px 0 0}
form[hidden]{display:none}
label{display:block;font-size:13.5px;color:var(--faint);margin:0 0 4px}
input[type=text],input[type=password],input[type=email],select,textarea{font:15px var(--sans);background:var(--bg);color:var(--text);border:1px solid var(--line);border-radius:10px;padding:10px 12px;min-width:240px}
textarea{width:100%;min-height:110px}
.field{display:flex;flex-direction:column}
input:focus-visible,select:focus-visible,textarea:focus-visible,.btn:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.code{font:600 30px var(--mono);letter-spacing:.12em;color:var(--amber);margin:6px 0}
.codebox{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:6px 0 12px}
pre,.mono{font:13px/1.5 var(--mono);color:var(--muted);white-space:pre-wrap;overflow-wrap:anywhere}
pre{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:12px;max-height:340px;overflow:auto}
table{border-collapse:collapse;width:100%;font-size:14.5px}
td,th{text-align:left;padding:8px 6px;border-bottom:1px solid var(--line);vertical-align:top}
th{color:var(--faint);font-weight:600}
.error{background:color-mix(in srgb,var(--orange) 10%,transparent);border:1px solid color-mix(in srgb,var(--orange) 33%,transparent);color:var(--cream);border-radius:12px;padding:12px 14px;margin:0 0 16px}
.note{background:color-mix(in srgb,var(--mint) 8%,transparent);border:1px solid color-mix(in srgb,var(--mint) 25%,transparent);border-radius:12px;padding:12px 14px;margin:0 0 16px}
.codes{display:grid;grid-template-columns:repeat(2,max-content);gap:6px 28px;font:600 17px var(--mono);color:var(--amber);margin:12px 0}
.qr{background:#fff;border-radius:12px;padding:10px;display:inline-block}
.qr svg{display:block;width:200px;height:200px}
.hero{display:grid;grid-template-columns:1.2fr .8fr;gap:28px;align-items:center}
.hero img{width:100%;max-width:280px;justify-self:center}
ul.ticks{list-style:none;padding:0;color:var(--muted)}
ul.ticks li::before{content:"✓ ";color:var(--mint)}
footer{border-top:1px solid var(--line);padding:22px 0;color:var(--faint);font-size:13.5px}
footer a{color:var(--faint)}
/* Each link whole on its own, wrapping as a unit; no gap before the first */
footer .wrap{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px}
footer .wrap>a,footer .wrap>span{white-space:nowrap}
.legal pre{white-space:pre-wrap;font-size:13px;background:var(--panel,rgba(127,127,127,.08));padding:16px;border-radius:10px;overflow-x:auto}
.legal h1{font-size:34px}.legal h2{margin-top:26px}.legal p,.legal li{color:var(--muted)}
.legal code{overflow-wrap:anywhere}
details{margin:10px 0}
details summary{cursor:pointer;color:var(--mint);font-weight:600;list-style:none;display:inline-flex;align-items:center;gap:10px}
details summary::-webkit-details-marker{display:none}
details summary::before{content:"";width:6px;height:6px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);transition:transform .15s}
details[open]>summary::before{transform:rotate(45deg)}
details[open]>summary{margin-bottom:10px}
details.alt{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.panel{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:16px;max-width:440px}
.panel .fine{margin:12px 0 0}
form.stack{display:grid;gap:14px;margin:0}
form.stack input,form.stack select{width:100%;min-width:0}
form.stack .btn{justify-self:start}
dl.facts{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:6px 18px;margin:8px 0 12px;font-size:14.5px}
dl.facts dt{color:var(--faint)}dl.facts dd{margin:0;color:var(--muted);overflow-wrap:break-word}
@media (max-width:700px){main{padding-top:28px}.step{padding:18px}
.hero{grid-template-columns:1fr}.hero img{max-width:180px}input[type=text],input[type=password],input[type=email],select{min-width:0;width:100%}}
ul.accounts{list-style:none;padding:0;margin:14px 0}
ul.accounts li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
ul.accounts li>div{min-width:0;overflow-wrap:anywhere}
ul.accounts b{display:block;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
ul.accounts form{flex:none}
ul.accounts .error-text{display:block;color:var(--orange);font-size:.9rem;margin-top:2px}ul.accounts .error-text a{color:inherit}
.btn.small{padding:6px 12px;font-size:13.5px}
ul.progress{list-style:none;padding:12px 14px;margin:10px 0;background:var(--bg);border:1px solid var(--line);border-radius:10px;font-size:14px;color:var(--muted)}
ul.progress li{padding:2px 0}
label.check{display:flex;gap:8px;align-items:center}
.codebox .code.small{font-size:13px;letter-spacing:0;overflow-wrap:anywhere;min-width:0}
label.check input{width:auto;flex:none;margin:0}
label.check{font-size:14.5px;color:var(--muted)}
ul.accounts li:last-child{border-bottom:0}
.sources{border-top:1px solid var(--line);margin-top:6px}
.eyebrow.group{margin:18px 0 4px;font-size:11.5px}
ul.accounts+.eyebrow.group{margin-top:30px}
.source summary .another{font:500 11px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-left:8px}
details.source{border-bottom:1px solid var(--line);padding:12px 0}
details.source>summary{cursor:pointer;list-style:none;display:grid;grid-template-columns:auto 1fr;column-gap:12px;row-gap:2px;align-items:center}
details.source>summary::before{grid-row:1;justify-self:center}
details.source>summary b{font-weight:600;line-height:1.3}
details.source>summary .fine{grid-column:2;margin:0;font-weight:400;color:var(--muted);line-height:1.4}
details.source[open]>summary{margin-bottom:0}
details.source>.panel{margin:12px 0 4px 20px;max-width:520px}
details.source>.panel>p:first-child{margin:0 0 14px}
ul.requests textarea,ul.requests form{max-width:520px}ul.requests textarea{width:100%}p.question{font-size:1.05rem;margin:14px 0 4px}
select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:40px;min-height:42px;background-image:var(--select-arrow);background-repeat:no-repeat;background-position:right 14px center;background-size:12px 8px}
nav .links{display:flex;align-items:center;gap:22px}
nav a.link[aria-current=page]{color:var(--text)}
.menu-toggle{display:none}
.menu-foot{display:contents}
/* Light or dark: the same switch as in the dashboard. */
.theme-toggle{position:relative;flex:none;width:60px;height:32px;padding:0;border:1px solid var(--line);border-radius:999px;background:var(--surface-2);color:var(--faint);overflow:hidden;cursor:pointer}
.theme-toggle:hover{border-color:var(--mint)}
.theme-toggle:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
.theme-toggle svg{display:block}
.theme-toggle .track-icon{position:absolute;top:50%;width:14px;height:14px;margin-top:-7px;opacity:.5}
.theme-toggle .track-icon.moon{left:9px}.theme-toggle .track-icon.sun{right:9px}
.theme-toggle .knob{position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,#ece4f6,#c7b5e2);color:#3d3752;box-shadow:0 2px 6px #00000059,inset 0 1px 0 #ffffff80;transition:transform .3s cubic-bezier(.3,.7,.4,1),background .3s}
.theme-toggle .knob svg{grid-area:1/1;width:15px;height:15px;transition:opacity .25s,transform .3s}
.theme-toggle .k-sun{opacity:0;transform:rotate(-90deg) scale(.5)}
.theme-toggle[aria-checked=true] .knob{transform:translateX(28px);background:linear-gradient(145deg,#ffe08a,#f2a33a);color:#7a3f06}
.theme-toggle[aria-checked=true] .k-sun{opacity:1;transform:none}
.theme-toggle[aria-checked=true] .k-moon{opacity:0;transform:rotate(90deg) scale(.5)}
@media (prefers-reduced-motion:reduce){.theme-toggle .knob,.theme-toggle .knob svg{transition:none}}
@media (max-width:700px){
/* Phone menu: a sheet over the page under the header bar, so the page itself never moves. */
header{position:relative;z-index:31;background:var(--bg)}
.menu-toggle{display:flex;align-items:center;justify-content:center;width:44px;height:44px;margin-right:-10px;background:none;border:0;border-radius:10px;cursor:pointer;color:var(--text)}
.menu-toggle span,.menu-toggle span::before,.menu-toggle span::after{display:block;width:20px;height:2px;border-radius:2px;background:currentColor;transition:transform .2s,background .2s}
.menu-toggle span{position:relative}.menu-toggle span::before,.menu-toggle span::after{content:"";position:absolute;left:0}
.menu-toggle span::before{top:-6px}.menu-toggle span::after{top:6px}
nav.open .menu-toggle span{background:transparent}nav.open .menu-toggle span::before{transform:translateY(6px) rotate(45deg)}nav.open .menu-toggle span::after{transform:translateY(-6px) rotate(-45deg)}
nav .links:not(.always){position:fixed;z-index:30;inset:var(--menu-top,63px) 0 0;display:flex;flex-direction:column;align-items:stretch;gap:0;padding:16px 24px calc(20px + env(safe-area-inset-bottom));
  background:var(--bg);overflow-y:auto;overscroll-behavior:contain;visibility:hidden;opacity:0;transform:translateY(-8px);transition:opacity .18s ease,transform .18s ease,visibility 0s linear .18s}
nav.open .links:not(.always){visibility:visible;opacity:1;transform:none;transition:opacity .18s ease,transform .18s ease,visibility 0s}
nav .links:not(.always) a.link{display:block;padding:12px 0;font-size:22px;font-weight:600;color:var(--text);border-bottom:1px solid var(--line)}
nav .links:not(.always) a.link[aria-current=page]{color:var(--mint)}
nav .links:not(.always) form{display:block;margin-top:28px}
nav .links:not(.always) button.link{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 26px;font-size:16px;font-weight:600;color:var(--text);border:1px solid var(--line);border-radius:999px;background:none}
body.menu-open{overflow:hidden}
nav .links:not(.always) .theme-toggle{align-self:flex-start;margin-top:24px}
/* Sign in and the main button stay in view at the bottom of the sheet, also on short phones */
nav .links:not(.always) .menu-foot{position:sticky;bottom:0;margin-top:auto;display:flex;gap:12px;padding-top:16px;background:var(--bg);box-shadow:0 -16px 16px var(--bg)}
nav .links:not(.always) .menu-foot{align-items:center}
nav .links:not(.always) .menu-foot a,nav .links:not(.always) .menu-foot a.btn.small{flex:1 1 0;display:flex;align-items:center;justify-content:center;box-sizing:border-box;height:52px;min-height:0;margin:0;padding:0 12px;font-size:17px;font-weight:600;white-space:nowrap;border-radius:12px}
nav .links:not(.always) .menu-foot a.link{border:1px solid var(--line)}
}
@media (max-width:700px) and (prefers-reduced-motion:reduce){
nav .links:not(.always),nav.open .links:not(.always),.menu-toggle span,.menu-toggle span::before,.menu-toggle span::after{transition:none;transform:none}
}
.panel a{overflow-wrap:anywhere}

/* side-by-side actions that wrap on a phone */
p.buttons{display:flex;flex-wrap:wrap;gap:10px}
.panel form.inline+form.stack{margin-top:14px}
/* The signed-out front page: wider than the app pages, with sections like the project site. */
body.wide .wrap{max-width:1120px}
body.wide main{padding:0 0 40px}
.landing section{padding:72px 0;border-top:1px solid var(--line)}
.landing section.lp-hero{border-top:0;padding:64px 0 56px;display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
.landing section>*,.landing .lp-hero>*{min-width:0}
.landing h1{font-size:clamp(38px,5.6vw,60px);line-height:1.05;letter-spacing:-.025em;margin:16px 0 20px}
.landing h1 em{font-style:normal;color:var(--mint)}
.landing h2{font-size:clamp(28px,3.6vw,40px);line-height:1.12;letter-spacing:-.02em;margin:12px 0 14px}
.landing .lede{font-size:19px;margin:0 0 28px}
.landing .sub{color:var(--muted);max-width:42em;margin:0 0 36px;font-size:17.5px}
.landing .ctas{display:flex;gap:12px;flex-wrap:wrap}
.landing .tags{display:flex;gap:16px;flex-wrap:wrap;margin:24px 0 6px;color:var(--faint);font:14px var(--mono)}
.landing .tags span::before{content:"✓ ";color:var(--mint)}
.lp-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.lp-step{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:22px}
.lp-step img{width:80px;height:80px;display:block;margin:-6px 0 8px -6px}
.lp-step .n{font:600 12px var(--mono);color:var(--amber);letter-spacing:.1em}
.lp-step h3{margin:4px 0 8px;font-size:19px}
.lp-step p{margin:0;color:var(--muted);font-size:15.5px}
.landing .sec-line{margin:10px 0 0;color:var(--muted);font-size:14.5px}
.landing .sec-line a{white-space:nowrap}
.sec-line .lock{position:relative;display:inline-block;width:11px;height:8px;border-radius:2px;background:var(--mint);margin:0 9px 0 1px}
.sec-line .lock::before{content:"";position:absolute;left:2px;top:-6px;width:5px;height:6px;border:1.6px solid var(--mint);border-bottom:0;border-radius:4px 4px 0 0}
.sec-layout{display:grid;grid-template-columns:minmax(0,.84fr) minmax(0,1.16fr);gap:36px;align-items:start}
.flow{margin:0;padding:24px;border:1px solid var(--line);border-radius:22px;
  background:radial-gradient(90% 45% at 50% 66%,color-mix(in srgb,var(--mint) 13%,transparent),transparent 70%),linear-gradient(180deg,var(--surface),var(--surface-end))}
.fnode{display:flex;gap:14px;align-items:center;padding:14px 16px;border-radius:14px;background:var(--surface-2);border:1px solid var(--line)}
.fnode b{display:block;font-size:15.5px;line-height:1.3}
.fnode .d{display:block;color:var(--muted);font-size:13.5px;line-height:1.4;margin-top:2px}
.fnode .ic,.scard .ic{flex:none;display:grid;place-items:center;border-radius:11px}
.fnode .ic{width:40px;height:40px;background:color-mix(in srgb,var(--lavender) 12%,transparent);color:var(--lavender)}
.fnode .ic svg{width:21px;height:21px}
.fnode.gate .ic{background:color-mix(in srgb,var(--amber) 12%,transparent);color:var(--amber)}
.fnode.mine{padding:18px 16px;border-color:color-mix(in srgb,var(--mint) 55%,transparent);background:linear-gradient(180deg,color-mix(in srgb,var(--mint) 15%,transparent),color-mix(in srgb,var(--mint) 5%,transparent));
  box-shadow:0 0 0 1px color-mix(in srgb,var(--mint) 20%,transparent),0 12px 40px -10px color-mix(in srgb,var(--mint) 40%,transparent)}
.fnode.mine .ic{background:var(--mint);color:var(--on-mint)}
.fnode .tag{margin-left:auto;align-self:flex-start;font:600 10.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mint);
  border:1px solid color-mix(in srgb,var(--mint) 40%,transparent);border-radius:999px;padding:3px 9px;white-space:nowrap}
.flink{position:relative;min-height:42px;margin-left:35px;padding:8px 0 8px 22px;display:flex;align-items:center;font:12px/1.4 var(--mono);color:var(--faint)}
.flink::before{content:"";position:absolute;left:0;top:4px;bottom:9px;border-left:2px dashed color-mix(in srgb,var(--lavender) 40%,transparent)}
.flink::after{content:"";position:absolute;left:-4px;bottom:3px;border:5px solid transparent;border-top:6px solid color-mix(in srgb,var(--lavender) 60%,transparent);border-bottom:0}
.flow figcaption{margin-top:20px;padding-top:16px;border-top:1px solid var(--line);color:var(--muted);font-size:14px;line-height:1.5}
.sec-cards{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:1fr;gap:14px}
.scard{padding:20px 20px 22px;border-radius:16px;background:linear-gradient(180deg,var(--surface),var(--surface-end));border:1px solid var(--line);transition:border-color .2s}
.scard:hover{border-color:color-mix(in srgb,var(--mint) 40%,transparent)}
.scard .ic{width:38px;height:38px;margin-bottom:14px;background:color-mix(in srgb,var(--mint) 12%,transparent);color:var(--mint)}
.scard .ic svg{width:20px;height:20px}
.scard b{display:block;font-size:16px;line-height:1.3;margin-bottom:6px}
.scard p{margin:0;color:var(--muted);font-size:14.5px;line-height:1.5}
.sec-more{color:var(--muted);font-size:15px;margin:22px 0 0}
.catches{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.catch{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:18px 20px}
.catches+.fine{margin-top:16px}
.catch b{display:block;margin-bottom:4px}
.catch span{color:var(--muted);font-size:15.5px}
.screens{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.screen{margin:0;background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden;display:flex;flex-direction:column}
.screen .bar{display:flex;align-items:center;gap:6px;padding:10px 14px;border-bottom:1px solid var(--line);background:var(--surface-2);font:600 12.5px var(--mono);color:var(--faint)}
.screen .bar i{width:9px;height:9px;border-radius:50%;background:color-mix(in srgb,var(--text) 12%,transparent)}
.screen .bar span{margin-left:8px;letter-spacing:.04em}
.screen .body{padding:14px;display:grid;gap:10px;flex:1;align-content:start}
.screen figcaption{padding:12px 14px 16px;font-size:14px;color:var(--faint);border-top:1px solid var(--line)}
.sug,.who,.org{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:10px 12px;display:grid;gap:2px;font-size:14px}
.sug span,.who span,.org .meta{color:var(--muted)}
.sug em{font:normal 600 11.5px var(--mono);letter-spacing:.04em;color:var(--amber);text-transform:uppercase}
.who{grid-template-columns:1fr auto;align-items:center}
.who span:not(.pill){grid-column:1}
.who .pill{grid-column:2;grid-row:1/3}
.who-top{display:flex;justify-content:space-between;align-items:center;font-size:13.5px;color:var(--faint)}
.pill{font-size:12.5px;font-weight:600;border:1px solid var(--line);border-radius:999px;padding:3px 10px;color:var(--text);white-space:nowrap}
.pill.ok{background:var(--mint);color:var(--on-mint);border-color:transparent}
.org b{font-size:16px;color:var(--cream)}
.org strong{color:var(--lavender)}
.org .people{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.org .people span{border:1px solid var(--line);border-radius:999px;padding:2px 10px;font-size:13px}
.landing .srcs{display:flex;flex-wrap:wrap;gap:10px}
.landing .srcs span{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:9px 16px;font-size:15.5px}
.landing .srcs span.more{border-style:dashed;color:var(--mint)}
.lp-split{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:48px;align-items:start}
.lp-split img.side{width:150px;display:block}
.faq{display:grid;gap:10px;max-width:780px}
.faq details{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px 18px}
.faq summary{color:var(--text)}
.faq summary::before{color:var(--mint)}
.faq details[open]>summary{margin-bottom:0}
.faq p{margin:10px 0 2px;color:var(--muted)}
.landing .final{text-align:center}
.landing .final img{width:112px;height:auto}
.landing .final .sub{margin-left:auto;margin-right:auto}
.landing .final .ctas{justify-content:center}
/* The hero card you can try, and the points you can tick: the same as on the project site (site/index.html). */
.stage{position:relative;min-height:440px;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start}
.stage .robot{position:absolute;right:-10px;top:-30px;width:290px;filter:drop-shadow(0 30px 40px var(--drop))}
.card{background:var(--surface-2);border:1px solid var(--line);border-radius:18px;padding:18px 18px 14px;box-shadow:0 20px 50px var(--drop);max-width:380px}
.stage .card{position:relative;width:100%;outline:none;scroll-margin-top:84px}
/* An invitation to try the card: a hint above it and a soft pulse on Do it, until the first tap. */
.stage .try{position:relative;margin:0 0 10px 4px;font:600 13px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--amber);transition:opacity .4s ease}
.stage .try::after{content:" ↓";display:inline-block;margin-left:4px;animation:try-bob 1.6s ease-in-out infinite}
.stage .try.gone{opacity:0;visibility:hidden}
@keyframes try-bob{0%,100%{transform:none}50%{transform:translateY(3px)}}
.card.nudge .buttons .b.go{animation:nudge 2.2s ease-in-out infinite}
@keyframes nudge{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--mint) 0%,transparent)}50%{box-shadow:0 0 0 6px color-mix(in srgb,var(--mint) 30%,transparent)}}
.stage .card.spot{animation:spot 1.2s ease-out 2}
@keyframes spot{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--mint) 55%,transparent),0 20px 50px var(--drop)}100%{box-shadow:0 0 0 16px color-mix(in srgb,var(--mint) 0%,transparent),0 20px 50px var(--drop)}}
/* Once the demo starts, the card keeps its top edge and grows downwards; both hero columns keep their place. */
.landing section.lp-hero.live{align-items:start}  /* outranks the centring above, so the columns keep their place */
.stage.live{justify-content:flex-start}
.stage.live .try.gone{display:none}  /* the card keeps its exact place once the hint has gone */
.card .from{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--faint);margin-bottom:10px}
.card .from img{width:28px;height:28px;border-radius:50%;background:var(--surface-2)}
.card .from .demo{margin-left:auto;font:11.5px var(--mono);letter-spacing:.02em;color:var(--faint);opacity:.8;white-space:nowrap}
.card b.t{display:block;color:var(--text);font-size:17px;margin-bottom:6px}
.card p{margin:0 0 6px;font-size:15.5px;color:var(--muted);line-height:1.5}
.card p strong{color:var(--amber)}
.card .src{font-size:13px;color:var(--faint);margin-bottom:12px}
.card .buttons{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.card .b{font:inherit;font-size:14px;line-height:1.6;background:color-mix(in srgb,var(--text) 6%,transparent);border:0;border-radius:9px;padding:8px 6px;text-align:center;color:var(--text);cursor:pointer;transition:background .15s ease;min-width:0}
.card .b:hover{background:color-mix(in srgb,var(--text) 11%,transparent)}
.card .b.go{background:var(--mint);color:var(--on-mint);font-weight:600}
.card .b.go:hover{background:var(--mint-hover)}
.card .buttons .b.go{grid-column:1/-1}
.card button:focus-visible,.card input:focus-visible,#send-dialog button:focus-visible,#send-dialog input:focus-visible,#send-dialog textarea:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.card .rows{display:grid;gap:6px}
.card .row{display:flex;gap:6px}
.card .row .b{flex:1 1 0}
.card .badges{margin:-2px 0 8px}
.chip{--c:var(--muted);display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;letter-spacing:.02em;line-height:1.5;color:var(--c);padding:2px 10px 2px 8px;border-radius:999px;background:color-mix(in srgb,var(--c) 12%,transparent);border:1px solid color-mix(in srgb,var(--c) 28%,transparent)}
.chip::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--c)}
.chip.mint{--c:var(--mint)}.chip.lavender{--c:var(--lavender)}.chip.amber{--c:var(--amber)}
.card p.note{font-size:14.5px;margin:8px 0 6px}
.card p.note.ok{color:var(--mint);font-weight:600}
.card p.asked{font-size:14.5px;color:var(--text);margin:0 0 8px;overflow-wrap:anywhere}
.card p.asked strong{color:var(--lavender)}
.card .prep-steps{list-style:none;margin:4px 0 10px;padding:0;display:grid;gap:3px;line-height:1.35;font-size:13.5px;color:var(--muted)}
.card .prep-steps li::before{content:"› ";color:var(--lavender)}
.card .prep-steps li:last-child{color:var(--text)}
.card .progress{height:3px;border-radius:3px;background:color-mix(in srgb,var(--text) 7%,transparent);overflow:hidden;margin:2px 0 8px}
.card .progress i{display:block;height:100%;width:40%;background:linear-gradient(90deg,transparent,var(--lavender),transparent);animation:demo-slide 1.3s ease-in-out infinite}
@keyframes demo-slide{from{transform:translateX(-100%)}to{transform:translateX(250%)}}
.card .draft{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin:10px 0;font-size:14px;line-height:1.5;color:var(--text)}
.card .draft .dm{font-size:12.5px;color:var(--faint);margin-bottom:6px;overflow-wrap:anywhere}
.card .draft .db{white-space:pre-wrap;overflow-wrap:anywhere}
.card .draft.sent{opacity:.75}
.card .panel{border-top:1px solid var(--line);padding-top:12px;margin-top:4px}
.card .panel .ph,.card .panel label.ph{display:block;font-size:14.5px;font-weight:600;color:var(--text);margin:0 0 8px}
.card .panel input{width:100%;background:var(--bg);border:1px solid var(--line);border-radius:10px;color:var(--text);font:inherit;font-size:15px;padding:8px 11px;color-scheme:dark}
.card .chips{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 10px}
.card .chips button{font:inherit;font-size:13.5px;line-height:1.4;background:transparent;border:1px dashed color-mix(in srgb,var(--mint) 45%,transparent);border-radius:999px;color:var(--mint);padding:4px 11px;cursor:pointer}
.card .chips button:hover{background:color-mix(in srgb,var(--mint) 8%,transparent)}
.card .pair{display:grid;grid-template-columns:1.4fr 1fr;gap:8px;margin-bottom:8px}
.card .pair label{font-size:13px;color:var(--faint)}
.card .err{font-size:13.5px;color:var(--orange);margin:0 0 8px}
.card .err:empty{display:none}
.card .foot{display:flex;justify-content:flex-end;margin-top:8px}
.card .linkbtn{background:none;border:0;padding:2px 0;color:var(--faint);font:13px var(--sans);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.card .linkbtn:hover{color:var(--text)}
.card .fade{animation:demo-fade .25s ease}
@keyframes demo-fade{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
#send-dialog{width:min(460px,calc(100vw - 24px));max-height:calc(100dvh - 24px);overflow:auto;border:1px solid var(--line);border-radius:16px;background:var(--surface-2);color:var(--text);padding:18px;box-shadow:0 24px 60px -12px var(--drop-strong)}
#send-dialog::backdrop{background:var(--backdrop);backdrop-filter:blur(3px)}
#send-dialog [hidden]{display:none}
#send-dialog .dh{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
#send-dialog h2{font-size:19px;line-height:1.3;letter-spacing:0;margin:0;color:var(--text)}
#send-dialog .x{background:color-mix(in srgb,var(--text) 6%,transparent);border:0;border-radius:8px;color:var(--text);width:32px;height:32px;font-size:20px;line-height:1;cursor:pointer}
#send-dialog .mail{font-size:14px;color:var(--muted);margin:0 0 10px;line-height:1.5;overflow-wrap:anywhere}
#send-dialog .mail b{color:var(--faint);font-weight:500;display:inline-block;min-width:64px}
#send-dialog .body{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:12px;margin:0 0 10px;font:14.5px/1.55 var(--sans);white-space:pre-wrap;overflow-wrap:anywhere;color:var(--text)}
#send-dialog label{display:block;font-size:13px;color:var(--faint);margin-bottom:10px}
#send-dialog input,#send-dialog textarea{display:block;width:100%;margin-top:6px;background:var(--bg);border:1px solid var(--line);border-radius:10px;color:var(--text);font:14.5px/1.55 var(--sans);padding:9px 11px}
#send-dialog textarea{min-height:220px;max-height:55dvh;resize:vertical}
#send-dialog .fine{font-size:13px;color:var(--faint);margin:0 0 6px}
#send-dialog .fine.demo{font-family:var(--mono);font-size:12px}
#send-dialog .err{font-size:13.5px;color:var(--orange);margin:0 0 6px}
#send-dialog .err:empty{display:none}
#send-dialog .act{display:flex;gap:6px;margin-top:12px}
#send-dialog .b{flex:1 1 0;font:inherit;font-size:14px;line-height:1.6;background:color-mix(in srgb,var(--text) 6%,transparent);border:0;border-radius:9px;padding:9px 6px;color:var(--text);cursor:pointer}
#send-dialog .b:hover{background:color-mix(in srgb,var(--text) 11%,transparent)}
#send-dialog .b.go{background:var(--mint);color:var(--on-mint);font-weight:600}
@media (prefers-reduced-motion:reduce){
  .card .fade,.card .progress i,.stage .try::after,.stage .card.spot{animation:none}
  .card.nudge .buttons .b.go{animation:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--mint) 35%,transparent)}
  .card .progress i{width:100%;opacity:.5}
  .btn,.card .b{transition:none}
  html{scroll-behavior:auto}
  ul.points li[role=checkbox]::before,ul.points li[role=checkbox]::after,.points-done{transition:none}
}
/* The app's own panel, note and input styles stay out of the demo card. */
.card .panel{background:none;border:0;border-top:1px solid var(--line);border-radius:0;padding:12px 0 0;max-width:none}
.card .note,.card p.note{background:none;border:0;border-radius:0;padding:0}
.card input[type=text]{min-width:0}
.card label{margin:0}
ul.points{list-style:none;padding:0;margin:0;display:grid;gap:16px}
ul.points li{padding-left:34px;position:relative;color:var(--muted)}
ul.points li b{color:var(--text)}
ul.points li::before{content:"";position:absolute;left:0;top:7px;width:16px;height:16px;border-radius:4px;background:var(--mint);box-shadow:0 0 0 4px color-mix(in srgb,var(--mint) 15%,transparent)}
/* Each point is a box you can tick (set up by the script at the end of the page). */
ul.points li[role=checkbox]{cursor:pointer;-webkit-tap-highlight-color:transparent;border-radius:6px}
ul.points li[role=checkbox]::before{background:transparent;border:2px solid var(--mint);transition:background .15s ease,box-shadow .15s ease}
ul.points li[role=checkbox]:hover::before{background:color-mix(in srgb,var(--mint) 15%,transparent)}
ul.points li[role=checkbox][aria-checked=true]::before{background:var(--mint);box-shadow:0 0 0 4px color-mix(in srgb,var(--mint) 25%,transparent)}
ul.points li[role=checkbox]::after{content:"";position:absolute;left:5.5px;top:9.5px;width:5px;height:9px;border:solid var(--on-mint);border-width:0 2.5px 2.5px 0;transform:rotate(45deg) scale(.4);opacity:0;transition:transform .15s ease,opacity .15s ease}
ul.points li[role=checkbox][aria-checked=true]::after{transform:rotate(45deg) scale(1);opacity:1}
ul.points li[role=checkbox]:focus-visible{outline:2px solid var(--amber);outline-offset:4px}
.points-wrap{position:relative}
.points-done{position:absolute;left:34px;top:100%;margin:14px 0 0;font:600 14px var(--mono);letter-spacing:.04em;color:var(--mint);opacity:0;transition:opacity .3s ease}
.points-done.show{opacity:1}
@media (max-width:900px){
.landing section.lp-hero{grid-template-columns:1fr;padding-top:36px;gap:24px}
.stage{min-height:380px;max-width:420px}
.lp-hero.live>*{margin-top:0!important}
.lp-steps,.screens{grid-template-columns:1fr}
.sec-layout{grid-template-columns:1fr;gap:20px}
.catches{grid-template-columns:1fr 1fr}
.lp-split{grid-template-columns:1fr;gap:24px}
.lp-split img.side{display:none}}
@media (max-width:560px){
.landing section{padding:52px 0}
.catches{grid-template-columns:1fr}
.sec-cards{grid-template-columns:1fr;grid-auto-rows:auto}
.scard{display:grid;grid-template-columns:38px 1fr;column-gap:14px}
.scard .ic{margin:0;grid-row:span 2}
.flow{padding:16px}
.fnode .tag{display:none}
.landing .lede{font-size:17.5px}
.landing .tags{gap:10px;font-size:13px}
.stage{min-height:500px}
.stage .robot{width:200px;right:0;top:0}}
/* Setup step 5: one chooser; a radio per way out (visually hidden), cards as its labels, only the picked one's panel shows */
.step p.route-now{margin:0 0 16px;color:var(--cream)}
.route-pick{position:relative;max-width:620px}
.route-pick .rv{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.rv-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:0 0 16px}
.rv-card{position:relative;display:flex;flex-direction:column;gap:3px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;
  background:var(--surface-2);cursor:pointer;color:var(--text);transition:border-color .15s,background .15s}
.rv-card:hover{border-color:color-mix(in srgb,var(--mint) 50%,transparent)}
.rv-card b{font:600 16px var(--sans);color:var(--cream)}
.rv-card small{font-size:13px;color:var(--faint);line-height:1.35}
.rv-card em{position:absolute;top:10px;right:12px;font:500 11px var(--mono,monospace);letter-spacing:.08em;text-transform:uppercase;
  font-style:normal;color:var(--mint)}
#rv-direct:checked~.rv-cards .rv-l-direct,#rv-tailscale:checked~.rv-cards .rv-l-tailscale,#rv-proxy:checked~.rv-cards .rv-l-proxy{
  border-color:var(--mint);background:color-mix(in srgb,var(--mint) 12%,var(--surface-2));box-shadow:0 0 0 1px var(--mint)}
#rv-direct:focus-visible~.rv-cards .rv-l-direct,#rv-tailscale:focus-visible~.rv-cards .rv-l-tailscale,#rv-proxy:focus-visible~.rv-cards .rv-l-proxy{
  outline:2px solid var(--amber);outline-offset:2px}
.rv-panel{display:none;border-top:1px solid var(--line);padding-top:16px}
#rv-direct:checked~.rv-p-direct,#rv-tailscale:checked~.rv-p-tailscale,#rv-proxy:checked~.rv-p-proxy{display:block}
.rv-panel p.fine{margin:0 0 12px}
.step .rv-panel p.fine,.step .rv-panel ul.picks{color:var(--faint)}
.rv-panel form.stack{margin-top:4px}
.rv-panel ul.picks{margin:0 0 12px;padding-left:18px}
.rv-panel ul.picks li{margin:4px 0}
.rv-panel p.small{font-size:12.5px;margin-top:-6px}
.step .note p{margin:0 0 8px}.step .note p:last-child{margin:0}
@media (max-width:560px){.rv-cards{grid-template-columns:1fr;gap:8px}.rv-card{padding:11px 14px}}
.route-error{display:flex;align-items:center;justify-content:space-between;gap:12px}.route-error form{margin:0;flex:none}
.usage{max-width:440px;margin:4px 0 10px;font-size:14px;color:var(--muted)}
.usage span{display:block;margin-bottom:4px}
.usage progress{appearance:none;-webkit-appearance:none;display:block;width:100%;height:6px;border:0;border-radius:6px;background:color-mix(in srgb,var(--text) 8%,transparent);overflow:hidden}
.usage progress::-webkit-progress-bar{background:color-mix(in srgb,var(--text) 8%,transparent);border-radius:6px}
.usage progress::-webkit-progress-value{background:var(--mint);border-radius:6px}
.usage progress::-moz-progress-bar{background:var(--mint);border-radius:6px}
/* Form rhythm: a label sits 6px above its field, fields are 14px apart, and a form or row of buttons keeps 14px from what follows */
label{margin-bottom:6px}
form:not(.inline):not(.stack)>.field{margin:0 0 14px}
main :not(.actions,.act-row,td.act,.pk-actions)>:is(form,.actions,.buttons)+:is(p,ul,ol,div:not(.field),details:not(.alt),form){margin-top:14px}
input:not([type]),input[type=number],input[type=date],input[type=url]{font:15px var(--sans);background:var(--bg);color:var(--text);border:1px solid var(--line);border-radius:10px;padding:10px 12px}
main :is(table,form,.actions,.buttons,p,ul,dl,pre)+h2{margin-top:30px}
main table+:is(form,p,.actions){margin-top:14px}
@media (max-width:700px){main table{display:block;overflow-x:auto}}
form:not(.inline):not(.stack)>br{display:none}
form:not(.inline):not(.stack)>label:has(>input[type=checkbox]){display:flex;gap:8px;align-items:flex-start;font-size:14.5px;color:var(--muted)}
form:not(.inline):not(.stack)>:is(p,label)+.btn{margin-top:6px}
/* The address field: the name, then the fixed rest of the address */
.address{display:flex;align-items:center;background:var(--bg);border:1px solid var(--line);border-radius:10px;max-width:440px}.address:focus-within{outline:2px solid var(--amber);outline-offset:2px}.address input[type=text]{flex:1 1 auto;min-width:0;width:0;border:0;background:none}.address input:focus-visible{outline:0}.address .suffix{flex:0 0 auto;color:var(--faint);font-size:14px;padding:10px 12px;white-space:nowrap;background:var(--surface-2);border-left:1px solid var(--line);border-radius:0 9px 9px 0;align-self:stretch;display:flex;align-items:center}
.address+[data-name-note].bad{color:var(--orange)}
.step .frozen-note{color:var(--orange);font-size:.9rem;margin:0 0 10px}
fieldset.frozen{border:0;padding:0;margin:0;min-width:0;opacity:.6}fieldset.frozen a,fieldset.frozen button{pointer-events:none}
ol.fallbacks{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:8px;counter-reset:fallback}
ol.fallbacks li{display:flex;gap:6px;align-items:center;counter-increment:fallback}
ol.fallbacks li::before{content:counter(fallback) ".";color:var(--faint);font-size:14px;min-width:1.2em}
ol.fallbacks select{flex:1;min-width:0}
ol.fallbacks .moves{display:flex;gap:2px;flex:none}
button.icon{width:32px;height:32px;padding:0;border:1px solid var(--line);border-radius:8px;background:transparent;color:var(--muted);font-size:15px;line-height:1;cursor:pointer}
button.icon:hover:not(:disabled){color:var(--text)}
button.icon:disabled{opacity:.35;cursor:default}
form.stack [data-add-fallback]{justify-self:start}
[data-add-fallback][hidden],[data-none][hidden]{display:none}
/* Why people cancel: a reason, its follow-up once picked, then "Anything we should know?" */
fieldset.reasons{border:0;padding:0;margin:6px 0 14px;min-width:0}
fieldset.reasons legend{padding:0;margin:0 0 8px;font-size:14.5px;color:var(--muted)}
.reason{display:grid;grid-template-columns:auto 1fr;gap:4px 10px;align-items:center;padding:7px 0}
.reason>input[type=radio]{margin:0;width:18px;height:18px;accent-color:var(--amber)}
.reason>label{margin:0;font-size:15px;color:var(--text)}
.reason>.more{grid-column:2;display:none;margin:4px 0 2px}
.reason>input:checked~.more{display:block}
.reason>.more input{width:100%;min-width:0}
.reason>span.more.fine{color:var(--muted);line-height:1.45}
form.wipe{display:block;margin:10px 0 0}form.wipe .field{margin:0 0 12px;max-width:420px}
td.num,th.num{text-align:right;white-space:nowrap}
.note.banner{background:color-mix(in srgb,var(--amber) 12%,transparent);border-color:color-mix(in srgb,var(--amber) 40%,transparent)}
table.costs td:first-child{width:100%}
.note.no-model p{margin:0 0 10px}.note.no-model p:last-child{margin:0}
.note.company p{margin:0 0 10px}.note.company p:last-child{margin:0}
/* A table row's actions: one compact "Manage" menu (details/summary), Remove last */
details.row-menu{position:relative;display:inline-block;margin:0}
details.row-menu>summary{padding:6px 12px;border:1px solid var(--line);border-radius:10px;color:var(--text);font-weight:600;font-size:14px;gap:6px;min-height:36px}
details.row-menu>summary::before{display:none}
details.row-menu>summary:focus-visible{outline:2px solid var(--mint);outline-offset:2px}
details.row-menu[open]>summary{margin-bottom:0;background:var(--surface-2)}
details.row-menu .menu-panel{position:absolute;right:0;top:calc(100% + 6px);z-index:30;min-width:220px;display:flex;flex-direction:column;gap:2px;padding:6px;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:0 10px 30px var(--drop)}
details.row-menu .menu-panel form{margin:0!important}
details.row-menu .menu-panel button{display:flex;flex-direction:column;align-items:flex-start;width:100%;min-height:40px;padding:9px 12px;border:0;border-radius:8px;background:none;color:var(--text);font:500 15px var(--sans);text-align:left;cursor:pointer}
details.row-menu .menu-panel button .fine{margin:2px 0 0;font-size:12.5px;color:var(--muted)}
details.row-menu .menu-panel button:hover,details.row-menu .menu-panel button:focus-visible{background:var(--surface-2);outline:none}
details.row-menu .menu-panel form:last-child:not(:first-child){border-top:1px solid var(--line);padding-top:4px;margin-top:2px!important}
details.row-menu .menu-panel button.danger{color:var(--orange)}
/* Several Fleets on the Account page: a switcher to each Fleet's card, each card set apart */
.fleet-switch{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 16px}
.fleet-switch .btn{min-height:36px;padding:6px 12px}
.fleet-card{scroll-margin-top:16px}
.fleet-card+.fleet-card{border-top:1px solid var(--line);margin-top:24px;padding-top:8px}
details.fleet-new{margin:24px 0 8px}
details.fleet-new>summary{font-weight:600}
/* Admin: summary tiles, a jump list, one card per part, and the server table (cards of their own on phones) */
.admin{padding-top:40px}
.admin h1{margin-bottom:20px}
.admin-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0 0 16px}
.admin-stat{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px 16px;display:grid;gap:2px;color:inherit;text-decoration:none}
.admin-stat:hover,.admin-stat:focus-visible{border-color:var(--mint)}
.admin-stat b{font:600 26px/1.1 var(--mono);color:var(--cream)}
.admin-stat span{font-size:13px;color:var(--faint)}
.admin-stat.warn b{color:var(--orange)}
.admin-jump{position:sticky;top:0;z-index:20;display:flex;flex-wrap:wrap;gap:6px;margin:0 0 20px;padding:10px 0;background:var(--bg)}
.admin-card{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:22px 24px;margin:0 0 20px;scroll-margin-top:72px}
.admin-card>h2{margin:0 0 14px}
.admin-card table{margin:8px 0 4px}
.admin-card form{margin:8px 0}
.admin-chips{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}
.admin-chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:999px;padding:5px 12px;font-size:13.5px;color:var(--muted);text-decoration:none}
.admin-chip b{font:600 12px var(--mono);color:var(--faint)}
.admin-chip.on{background:var(--mint);border-color:var(--mint);color:var(--on-mint)}
.admin-chip.on b{color:var(--on-mint)}
.admin-filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 4px}
.admin-filters input[type=text]{flex:1 1 220px;min-width:0}
.admin-filters select{flex:0 1 170px;width:auto}
.admin-scroll{overflow-x:auto;margin:0 -4px}
.admin-table th{font-size:12.5px;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}
.admin-table td{padding:12px 8px}
.admin-table td .fine{margin:2px 0 0}
.admin-table td .fine.warn{color:var(--orange)}
.admin-table td form{margin:6px 0 0}
.admin-table tr.st-off td{opacity:.6}
.admin .when-cell,.admin time.when{white-space:nowrap}
.admin .when-cell{min-width:7.5em}
.admin-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:7px;background:var(--faint);vertical-align:1px}
.admin-dot.ok{background:var(--mint)}
.admin-dot.warn{background:var(--amber)}
.admin-dot.bad{background:var(--orange)}
.admin-dot.busy{background:var(--lavender)}
/* Learnings inbox (cloud/learnings.py): one card per group of similar learnings */
.learning-group>h3{margin:0 0 10px;font-size:15px}
.learnings{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.learning{border:1px solid var(--line);border-radius:12px;padding:12px 14px;min-width:0}
.learning.st-dismissed{opacity:.6}
.learning-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.learning-text{margin:8px 0 4px;font-size:15.5px;line-height:1.5;overflow-wrap:anywhere}
.learning .fine{margin:4px 0 0;overflow-wrap:anywhere}
.learning-log summary{cursor:pointer;font-size:13px;color:var(--muted);margin-top:6px}
.learning-log pre{white-space:pre-wrap;overflow-wrap:anywhere;font-size:12px;margin:6px 0 0}
.learning-acts{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 0}
.learning-acts .btn{padding:4px 10px;font-size:13px;min-height:0}
@media (max-width:720px){
  .admin{padding-top:24px}
  .admin-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .admin-jump{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-right:-16px;padding-right:16px}
  .admin-jump .admin-chip{flex:none}
  .admin-card{padding:16px;border-radius:14px}
  .admin-scroll{overflow:visible;margin:0}
  .admin-table thead{display:none}
  .admin-table,.admin-table tbody,.admin-table tr,.admin-table td{display:block;width:100%}
  .admin-table tr{border:1px solid var(--line);border-radius:12px;padding:6px 12px;margin:0 0 10px}
  .admin-table td{border:0;padding:6px 0 6px 116px;position:relative;min-height:30px;overflow-wrap:anywhere}
  .admin-table td::before{content:attr(data-label);position:absolute;left:0;top:8px;width:108px;font-size:12px;color:var(--faint);text-transform:uppercase;letter-spacing:.04em}
  .admin-table td[data-label=""]{padding-left:0}
  .admin-table td:empty{display:none}
}
/* A Fleet on the Account page: a head, then Members, Invites, costs and Settings, each its own block */
.fleet-head h3{margin:0;font-size:20px;color:var(--cream)}
.fleet-head .fine{margin:2px 0 0}
.fleet-card .fleet-intro{font-size:14.5px;margin:12px 0 0;max-width:46em}
.fleet-block{margin:26px 0 0;padding-top:18px;border-top:1px solid var(--line)}
.fleet-block>h4{margin:0 0 8px;font-size:16px;color:var(--text)}
.fleet-block>p.fine{margin:0 0 12px}
.fleet-block table{margin-top:4px}
td.act,th.act{text-align:right;white-space:nowrap;vertical-align:middle}
.fleet-card td,.fleet-devices td{vertical-align:middle}
.act-row{display:inline-flex;flex-wrap:nowrap;justify-content:flex-end;gap:6px;align-items:center}
.act-row form.inline,td.act form.inline{margin:0;display:inline-flex}
.btn.small{min-height:34px;padding:5px 12px;font-size:14px}
.pill.status-open{color:var(--mint);border-color:color-mix(in srgb,var(--mint) 45%,transparent)}
.pill.status-joined{color:var(--lavender)}
.pill.status-withdrawn,.pill.status-expired{color:var(--faint)}
/* Invites: "Invite people" (the block's one primary, a disclosure so it works without JS), then the list, older ones folded */
details.invite-new{margin:4px 0 14px}
details.invite-new>summary.btn{display:inline-flex;margin:0}
details.invite-new>summary.btn.primary{color:var(--on-mint)}
details.invite-new>summary::before{display:none}
details.invite-new[open]>summary.btn.primary{background:var(--c-raised,transparent);border-color:var(--c-line-strong,var(--line));color:var(--text)}
details.invite-new>.invite-form{margin-top:12px}
ul.invite-list{list-style:none;padding:0;margin:0}
ul.invite-list li{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;column-gap:12px;row-gap:6px;padding:9px 0;border-bottom:1px solid var(--line)}
ul.invite-list li:last-child{border-bottom:0}
ul.invite-list .inv-who{min-width:0;overflow-wrap:anywhere;font-size:14.5px;color:var(--text)}
ul.invite-list .inv-who .fine{margin:1px 0 0}
ul.invite-list .day{white-space:nowrap}
ul.invite-list .pill{justify-self:end;grid-column:3;grid-row:1}
ul.invite-list .act-row{grid-column:2;grid-row:1}
details.invite-older{margin:6px 0 0}
details.invite-older>summary{font-size:14px;color:var(--muted)}
details.invite-older[open]>summary{margin-bottom:2px}
.invite-form{display:grid;gap:14px;background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:16px;margin:12px 0 0}
.invite-form .two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.invite-form input[type=text],.invite-form input[type=email]{min-width:0;width:100%}
.invite-form .field label.check{align-items:flex-start;margin:6px 0}
.invite-form label.check input[type=radio]{margin-top:4px}
.invite-form p{margin:0}
.invite-form textarea{min-width:0;min-height:84px;resize:vertical;font:14.5px/1.5 var(--sans)}
.invite-form .field>p.fine{margin-top:6px}
.invitees-note{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:8px!important;font-size:13.5px}
.invitees-note .pill{color:var(--text)}
.invitees-note .bad{color:var(--orange)}
.note.batch-made p{margin:0 0 8px}
ul.batch{list-style:none;padding:0;margin:0 0 10px}
ul.batch li{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:6px 0;border-bottom:1px solid var(--line)}
ul.batch li:last-child{border-bottom:0}
ul.batch li>span:first-child{flex:1 1 220px;min-width:0;overflow-wrap:anywhere}
ul.batch.skipped li{padding:3px 0;border:0}
.settings .set-row{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:12px 0;border-bottom:1px solid var(--line)}
.settings .set-row:first-child{padding-top:0}
.settings .set-row:last-child{border-bottom:0;padding-bottom:0}
.set-row .what{flex:1 1 auto;min-width:0}
.set-row .what b{color:var(--text);font-size:15px}
.set-row .what p.fine{margin:3px 0 0}
.set-row .what b.onoff{font-size:inherit;color:var(--text)}
.set-row .control{flex:none}
.set-row .control form.inline{margin:0;flex-wrap:nowrap;align-items:center}
.set-row .control select{min-width:0;max-width:260px}
ul.lately{list-style:none;padding:0;margin:0}
ul.lately li{padding:5px 0}
ul.lately .mono{margin-right:8px}
.fleet-block .ok{color:var(--mint);font-weight:600}
.fleet-block .pending{color:var(--amber);font-weight:600}
.fleet-log ul.lately{max-height:420px;overflow-y:auto}
.fleet-log ul.lately li{overflow-wrap:anywhere}
.fleet-devices{margin:30px 0 0;padding-top:20px;border-top:1px solid var(--line)}
.fleet-devices h3{margin:0 0 6px}
.nowrap{white-space:nowrap}
main form+section.step{margin-top:24px}
@media (max-width:640px){
.invite-form .two{grid-template-columns:1fr}
.settings .set-row{flex-direction:column;align-items:flex-start;gap:10px}
.set-row .control form.inline{flex-wrap:wrap}
.act-row{justify-content:flex-start;flex-wrap:wrap}
table.invites td.act,table.members td.act{white-space:normal}
ul.invite-list li{grid-template-columns:minmax(0,1fr) auto}
ul.invite-list .pill{grid-column:2}
ul.invite-list .act-row{grid-column:1/-1;grid-row:2}
/* Members on a phone: no sideways scrolling; the role and Manage sit to the right of who it is */
.fleet-card table.members{display:table;overflow:visible}
table.members tr:first-child{display:none}
table.members tr{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:10px;border-bottom:1px solid var(--line);padding:8px 0}
table.members td{border:0;padding:0 2px;overflow-wrap:anywhere}
table.members td:first-child{grid-row:1/3}
table.members td:nth-child(2){text-align:right;color:var(--muted);font-size:13.5px}
table.members td.act{text-align:right}
}
.admin-menu{margin-top:2px}
.admin-menu>summary{min-height:30px;padding:2px 12px;font-size:16px;line-height:1.4}
/* "Beta" next to the logo, on the app and the public site */
.beta{display:inline-block;padding:1px 8px;border-radius:999px;font:600 11px/1.6 var(--mono);letter-spacing:.06em;text-transform:uppercase;background:color-mix(in srgb,var(--orange) 18%,transparent);color:var(--orange);vertical-align:middle;white-space:nowrap}
nav .logo+.beta{margin:0 auto 0 -12px}
nav .logo:has(+.beta){margin-right:0}

/* Design system layer (docs/design.md in the app; the shared tokens at the top, the dashboard has the same): paper
   and ink, mint only for the one thing to do, hairlines instead of shadows, the serif for headings at a regular
   weight. Last, so it settles the rules above. */
:root,:root[data-theme],:root:not([data-theme]){
  --bg:var(--c-bg);--surface:var(--c-surface);--surface-2:var(--c-raised);--surface-end:var(--c-bg);--line:var(--c-line);
  --text:var(--c-text);--muted:var(--c-text-2);--faint:var(--c-text-3);--cream:var(--c-text);
  --mint:var(--c-accent);--mint-hover:var(--c-accent-hover);--on-mint:var(--c-accent-ink);
  --amber:var(--c-amber);--orange:var(--c-orange);--lavender:var(--c-lavender);--panel:var(--c-sunken)}
body{font:var(--fs-md)/var(--lh-body) var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-feature-settings:"cv11","ss01"}
.wrap{max-width:calc(var(--measure) + 44px)}
::selection{background:color-mix(in srgb,var(--mint) 30%,transparent)}
a{color:var(--text);text-decoration-color:var(--c-line-strong);text-underline-offset:3px}
a:hover{color:var(--text);text-decoration-color:currentColor}
h1,h2{font-family:var(--serif);font-weight:var(--fw-heading);letter-spacing:0;color:var(--text)}
h3{font-family:var(--sans);font-weight:var(--fw-strong);letter-spacing:0;color:var(--text)}
h1{font-size:clamp(30px,4.4vw,40px);line-height:1.15;margin:var(--sp-2) 0 var(--sp-5)}
h2{font-size:var(--fs-xl);line-height:var(--lh-tight)}
.eyebrow{font:var(--fw-medium) var(--fs-sm)/1.2 var(--sans);letter-spacing:0;text-transform:none;color:var(--faint)}
.lede{color:var(--muted);font-size:var(--fs-lg)}
.fine{font-size:var(--fs-sm);color:var(--faint)}

/* Header: the wordmark, quiet links, one primary. */
header{border-bottom:1px solid var(--line)}
nav{height:60px;gap:20px}
nav a.link,nav button.link,nav span.link.disabled{font:var(--fw-medium) var(--fs-sm) var(--sans);color:var(--muted)}
nav a.link:hover,nav button.link:hover,nav a.link[aria-current=page]{color:var(--text)}
.beta,nav .logo+.beta{font:var(--fw-strong) 10.5px/1.6 var(--sans);letter-spacing:.04em;padding:1px 7px;border-radius:var(--r-pill);background:var(--c-sunken);color:var(--muted)}

/* Buttons: 8px radius, medium weight; mint fill for the one thing to do, a lifted hairline for the rest. */
.btn{border-radius:var(--r-sm);font:var(--fw-medium) var(--fs-md)/1.2 var(--sans);padding:10px 16px;min-height:40px;border:1px solid var(--c-line-strong);background:var(--c-raised);color:var(--text);transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),color var(--dur) var(--ease)}
.btn:hover{background:color-mix(in srgb,var(--c-raised),var(--text) 5%);color:var(--text)}
.btn.primary{background:var(--mint);border-color:var(--mint);color:var(--on-mint)}
.btn.primary:hover{background:var(--mint-hover);border-color:var(--mint-hover);color:var(--on-mint)}
.btn.ghost{background:var(--c-raised);border-color:var(--c-line-strong)}
.btn.ghost:hover{background:color-mix(in srgb,var(--c-raised),var(--text) 5%)}
.btn.danger{background:transparent;border-color:color-mix(in srgb,var(--orange) 40%,transparent);color:var(--orange)}
.btn.danger:hover{background:color-mix(in srgb,var(--orange) 8%,transparent)}
.btn.small{min-height:34px;padding:6px 12px;font-size:var(--fs-sm);border-radius:var(--r-sm)}
input:focus-visible,select:focus-visible,textarea:focus-visible,.btn:focus-visible,a:focus-visible,button:focus-visible,summary:focus-visible{outline:0;box-shadow:var(--ring)}

/* Fields: white (dark: sunken) with a hairline; the border turns mint on focus. */
input[type=text],input[type=password],input[type=email],input[type=number],input[type=search],select,textarea{font:var(--fs-md) var(--sans);background-color:var(--c-surface);border:1px solid var(--c-line-strong);border-radius:var(--r-sm);color:var(--text)}
:root[data-theme=dark] :is(input[type=text],input[type=password],input[type=email],input[type=number],input[type=search],select,textarea){background-color:var(--c-sunken)}
input:hover,select:hover,textarea:hover{border-color:color-mix(in srgb,var(--text) 28%,transparent)}
input:focus,select:focus,textarea:focus{border-color:color-mix(in srgb,var(--mint) 70%,transparent)}
label{font-size:var(--fs-sm);color:var(--muted)}

/* Cards and steps: surface, hairline, a large radius, no drop shadow in the dark. */
.step,.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-sm)}
.step{padding:var(--sp-5);margin-bottom:var(--sp-3)}
.step h2{font-size:var(--fs-xl)}
.step .head{gap:var(--sp-3)}
.step .n{font:var(--fw-medium) var(--fs-sm) var(--sans);color:var(--faint)}
/* A step's state is a chip (docs/design.md): round, sunken, 12px sans 500 in secondary text, a 6px dot in the tone. */
.step .state{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;flex:none;font:var(--fw-medium) 12px/1.5 var(--sans);letter-spacing:0;text-transform:none;padding:1px 10px 1px 8px;border-radius:var(--r-pill);background:var(--c-sunken);color:var(--c-text-2)}
.step .state::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.step .state.ok::before{background:var(--mint)}.step .state.wait::before{background:var(--amber)}.step .state.bad::before{background:var(--orange)}.step .state.off::before{background:var(--c-text-3)}
.step[data-pending] .state::before{animation:pending-dot 1.4s ease-in-out infinite}
@keyframes pending-dot{0%,100%{opacity:1;transform:none}50%{opacity:.35;transform:scale(.7)}}
/* Something going on right now: a short line with a small spinner. */
.live{display:flex;align-items:center;gap:10px}.live[hidden]{display:none}
.spin{width:14px;height:14px;flex:none;border-radius:50%;border:2px solid color-mix(in srgb,currentColor 22%,transparent);border-top-color:var(--mint);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.step[data-pending] .state::before,.spin{animation:none}}
/* The model picker: the model and its thinking level side by side, on a phone one under the other. */
.pick{display:flex;gap:12px;flex-wrap:wrap}.pick .field{flex:1 1 180px;min-width:0;margin:0}
.step p{color:var(--muted)}
details summary{color:var(--text);font-weight:var(--fw-medium)}
details summary:hover{color:var(--text)}
details summary::before{border-width:1.5px;color:var(--faint)}
.error,.note,pre,.panel,ul.progress,.qr{border-radius:var(--r-md)}
.note{background:var(--c-accent-tint);border-color:transparent;color:var(--text)}
.error{background:color-mix(in srgb,var(--orange) 9%,var(--surface));border-color:color-mix(in srgb,var(--orange) 28%,transparent);color:var(--text)}
pre{background:var(--c-sunken);border-color:var(--line)}
.code,.codes{color:var(--text)}
table{font-size:var(--fs-sm)}
th{font-weight:var(--fw-medium);color:var(--faint)}
ul.ticks li::before{color:var(--mint)}
footer{font-size:var(--fs-sm);color:var(--faint)}
footer a{color:var(--faint)}
.theme-toggle{background:var(--c-sunken);border-color:var(--line)}
.theme-toggle:hover{border-color:var(--c-line-strong)}

/* The front page and the website's own pages: the same family, larger. The display line is one ink color at a
   light weight, as in the rest of the system; no accent, no italics. */
.landing h1{font-size:var(--fs-3xl);line-height:1.08;font-weight:var(--fw-display);letter-spacing:-.005em;margin:var(--sp-3) 0 var(--sp-5)}
.landing h1 em{font-style:normal;color:inherit}
.landing h2{font-size:clamp(28px,3.4vw,38px);line-height:1.15;font-weight:var(--fw-display)}
.landing .lede{font-size:var(--fs-lg);color:var(--muted)}
.landing .sub{font-size:var(--fs-lg);color:var(--muted)}
.landing section{border-top-color:var(--line)}
.landing .tags{font:var(--fs-sm) var(--sans);color:var(--faint)}
.landing .tags span::before{color:var(--mint)}
.landing .srcs span{background:var(--surface);border-color:var(--line);border-radius:var(--r-pill);font-size:var(--fs-sm)}
.landing .srcs span.more{color:var(--muted)}
.lp-step,.flow,.fnode{border-radius:var(--r-lg);box-shadow:var(--shadow-sm)}
@media (max-width:700px){.landing h1{font-size:clamp(34px,10vw,44px)}}
.try{font:var(--fw-medium) var(--fs-sm)/1.3 var(--sans);letter-spacing:0;text-transform:none;color:var(--muted)}
.card .from .demo{font:var(--fs-xs) var(--sans);letter-spacing:0}

/* Tabs (the Account page): a sunken track; the current tab is a soft mint tint. On a phone the row scrolls, with a
   fade on the side that has more (.more-left/.more-right come from app.js), as in the dashboard. */
.acct-tabs{display:flex;gap:2px;background:var(--c-sunken);border-radius:var(--r-md);padding:3px;margin:0 0 var(--sp-5);overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none}
.acct-tabs::-webkit-scrollbar{display:none}
.acct-tabs a{flex:none;display:inline-flex;align-items:center;min-height:36px;padding:8px 12px;border-radius:var(--r-sm);font:var(--fw-medium) var(--fs-sm)/1.2 var(--sans);color:var(--c-text-2);text-decoration:none;white-space:nowrap;transition:background var(--dur) var(--ease),color var(--dur) var(--ease)}
.acct-tabs a:hover{background:var(--c-hover);color:var(--c-text)}
.acct-tabs a[aria-selected=true],.acct-tabs a[aria-selected=true]:hover{background:var(--c-accent-tint);color:var(--c-text)}
.acct-tabs a:focus-visible{outline:none;box-shadow:var(--ring)}
.acct-tabs.more-right{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent)}
.acct-tabs.more-left{-webkit-mask-image:linear-gradient(90deg,transparent,#000 36px);mask-image:linear-gradient(90deg,transparent,#000 36px)}
.acct-tabs.more-left.more-right{-webkit-mask-image:linear-gradient(90deg,transparent,#000 36px,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(90deg,transparent,#000 36px,#000 calc(100% - 36px),transparent)}
@media (min-width:701px){.acct-tabs{display:inline-flex;max-width:100%}}
@media (prefers-reduced-motion:reduce){.acct-tabs a{transition:none}}
/* What waits for you elsewhere on the Account page: one row each, its link at the end. */
ul.todo{list-style:none;margin:4px 0 12px;padding:0;border-top:1px solid var(--c-line)}
ul.todo li{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 12px;padding:10px 0 10px 14px;border-bottom:1px solid var(--c-line);font-size:var(--fs-sm);color:var(--c-text);position:relative}
ul.todo li::before{content:"";position:absolute;left:0;top:17px;width:6px;height:6px;border-radius:50%;background:var(--c-amber)}
ul.todo a{font-weight:var(--fw-medium);white-space:nowrap}
/* Setup step 2: the plans to sign in with, side by side; the Claude sign-in's code field */
.signins{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-top:12px}
.signin{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:14px 16px;display:flex;flex-direction:column;justify-content:space-between;min-width:0}
.step .signin p.fine{margin:0}
.signin form.inline{margin-top:10px}
input#claude-code{width:100%;min-width:0;font-family:var(--mono)}

/* Setup, More sources: a tile per source, two across (one on a phone); an open tile takes the whole row and shows its
   form, sign-in code or progress inside. Connected accounts are rows with their mark, and Remove as a quiet action. */
.btn.quiet{background:transparent;border-color:transparent;color:var(--c-text-2)}
.btn.quiet:hover{background:var(--c-hover);color:var(--text)}
.mark{flex:none;display:inline-grid;place-items:center;width:36px;height:36px;border-radius:var(--r-md);background:var(--c-sunken);color:var(--text)}
ul.accounts li>div{flex:1}
ul.accounts .row-note{display:block;margin-top:2px}
fieldset.scope{border:0;padding:0;margin:0 0 10px;min-width:0}fieldset.scope legend{padding:0;margin:0 0 6px;font-size:14.5px;color:var(--muted)}fieldset.scope label{margin-right:14px}
ul.accounts .scope-edit{margin-top:4px;font-size:14px}ul.accounts .scope-edit summary{cursor:pointer;color:var(--muted)}ul.accounts .scope-edit form{margin-top:8px}
.sources.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-3);border-top:0;margin-top:var(--sp-2)}
@media (max-width:600px){.sources.grid{grid-template-columns:minmax(0,1fr)}}
details.source.tile{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r-lg);padding:0;margin:0;background:var(--surface);min-width:0;transition:border-color var(--dur) var(--ease)}
details.source.tile:hover{border-color:var(--c-line-strong)}
details.source.tile[open]{grid-column:1/-1;border-color:var(--c-line-strong)}
details.source.tile>summary{flex:1;display:grid;grid-template-columns:36px minmax(0,1fr) auto;grid-template-areas:"mark name name" "state state go";align-items:center;column-gap:var(--sp-3);row-gap:var(--sp-3);padding:var(--sp-4);border-radius:var(--r-lg)}
details.source.tile>summary::before{display:none}
details.source.tile>summary:hover{background:var(--c-hover)}
details.source.tile>summary .mark{grid-area:mark;align-self:start}
details.source.tile>summary .name{grid-area:name;min-width:0;display:flex;flex-direction:column;gap:2px}
details.source.tile>summary .name b{font-weight:600;line-height:1.3}
details.source.tile>summary .what{margin:0;font-weight:400;line-height:1.4;color:var(--c-text-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
details.source.tile>summary .state{grid-area:state;justify-self:start;margin:0;max-width:100%;min-width:0;white-space:normal}
/* A long status wraps inside its pill (narrow phones, a long workspace name), never cut off */
details.source.tile>summary .state>span{white-space:normal;min-width:0}
/* Narrow: Connect or Add next to the name, the status on its own line below */
@media (max-width:420px){details.source.tile>summary{grid-template-areas:"mark name go" "state state state"}details.source.tile>summary .go{align-self:start}}
/* Narrowest: the name keeps the row, the status and then Connect or Add each on a line of their own */
@media (max-width:340px){details.source.tile>summary{grid-template-areas:"mark name name" "state state state" "go go go"}details.source.tile>summary .go{justify-self:start}}
details.source.tile>summary .go{grid-area:go;font:var(--fw-medium) var(--fs-sm)/1.2 var(--sans);padding:7px 12px;border-radius:var(--r-sm);border:1px solid var(--c-line-strong);background:var(--c-raised);color:var(--text);white-space:nowrap}
details.source.tile .close-it,details.source.tile[open] .open-it{display:none}
details.source.tile[open] .close-it{display:inline}
details.source.tile[open] .what{-webkit-line-clamp:unset}
details.source.tile>.panel{margin:0 var(--sp-4) var(--sp-4);padding:var(--sp-4) 0 0;max-width:none;background:none;border:0;border-top:1px solid var(--line);border-radius:0;box-shadow:none}
details.source.tile>.panel>*{max-width:520px}
details.source.tile .codebox .code{font-size:clamp(26px,8vw,34px)}
details.source.tile[open]>summary{margin-bottom:0}
ul.accounts li>.mark{align-self:flex-start}
ul.accounts li:has(.scope-edit){align-items:flex-start}  /* Remove/Disconnect stays on the account line, also with the form open */
/* A second way to connect under the first (Sign in with Intercom, then pasting a token): quiet until opened */
.panel details.alt-way{margin-top:var(--sp-4)}.panel details.alt-way>summary{cursor:pointer;color:var(--muted);font-size:14px}.panel details.alt-way[open]>summary{margin-bottom:var(--sp-3)}.panel details.alt-way>.fine{margin:0 0 var(--sp-3)}.panel details.alt-way>.btn{margin-top:var(--sp-3)}
/* Narrow: Remove sits on the title line and the details below use the row's full width, not a column beside it */
@media (max-width:480px){ul.accounts li{display:grid;grid-template-columns:36px minmax(0,1fr) auto;column-gap:12px;row-gap:2px;align-items:center}ul.accounts li>div{display:contents}ul.accounts li>div>*{grid-column:2/-1}ul.accounts li>div>b{grid-column:2;grid-row:1}ul.accounts li>form{grid-column:3;grid-row:1}ul.accounts li>.mark{grid-column:1;grid-row:1/span 2;align-self:start}ul.accounts li:not(:has(>.mark)){grid-template-columns:minmax(0,1fr) auto}ul.accounts li:not(:has(>.mark))>div>*{grid-column:1/-1}ul.accounts li:not(:has(>.mark))>div>b{grid-column:1}ul.accounts li:not(:has(>.mark))>form{grid-column:2}}
details.alt.wide>.panel{max-width:none}
.sources.grid+.fine{margin-top:var(--sp-4)}
.invite-suggest{margin:10px 0 0}.invite-suggest .fine{margin:0 0 6px}
.invite-suggest .chips{display:flex;flex-wrap:wrap;gap:6px}
.invite-suggest .chips button{font:inherit;font-size:13.5px;line-height:1.4;background:transparent;border:1px dashed color-mix(in srgb,var(--mint) 45%,transparent);border-radius:999px;color:var(--mint);padding:4px 11px;cursor:pointer}
.invite-suggest .chips button:hover{background:color-mix(in srgb,var(--mint) 8%,transparent)}
ul.passkeys{list-style:none;padding:0;margin:var(--sp-3) 0 var(--sp-4);border-bottom:1px solid var(--line)}
ul.passkeys li{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);padding:var(--sp-3) 0;border-top:1px solid var(--line)}
ul.passkeys .pk-info{display:flex;flex-direction:column;gap:2px;min-width:0}
ul.passkeys .pk-info b{overflow-wrap:anywhere}
ul.passkeys .pk-meta{font-size:var(--fs-sm);color:var(--muted)}ul.passkeys .pk-used{white-space:nowrap}
@media (max-width:480px){ul.passkeys .pk-sep{display:none}ul.passkeys .pk-used{display:block}ul.passkeys .pk-used::first-letter{text-transform:uppercase}}
ul.passkeys .pk-actions{display:flex;align-items:center;gap:var(--sp-2);flex:none}ul.passkeys form{margin:0}
ul.passkeys .pk-here{font-size:var(--fs-sm);color:var(--muted);font-weight:400}
.step .pk-add{margin-top:var(--sp-3)}.step p.pk-note{margin:var(--sp-3) 0 0}
.passkey-nudge p{margin:0 0 var(--sp-2)}.passkey-nudge p.buttons{margin:0}
.passkey-msg{margin-top:var(--sp-2)}
/* Before a Google screen that says Salesflare: who that is, right under the button */
p.via{display:flex;gap:10px;align-items:center;max-width:34em;margin:8px 0 14px;padding:10px 14px;background:var(--surface-2);border:1px solid var(--line);border-radius:12px;font-size:14.5px;line-height:1.45;color:var(--text)}
p.via img{flex:none;width:20px;height:20px}
p.via b{font-weight:600}
form.stack p.via{margin:-12px 0 0}
form.stack input:is([type=radio],[type=checkbox]){width:auto}
fieldset.scope label{display:inline-flex;gap:6px;align-items:center;margin-right:18px}
/* The end of setup once the Machine is ready (web.py finish): the accent surface of the notes, a check, and on a phone a
   full-width button. Waiting, it stays a plain card. */
.step.finish.ready{background:var(--c-accent-tint);border-color:transparent}
.step.finish.ready h2{display:flex;align-items:center;gap:10px}
.step.finish .tick{flex:none;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:var(--mint);color:var(--on-mint)}
.step.finish .tick svg{width:16px;height:16px}
@media (max-width:700px){.step.finish.ready .btn.primary{display:flex;justify-content:center;width:100%;box-sizing:border-box}}