/* Relay: a clean, modern product look. Light by default, optional dark theme. Self-hosted Geist (OFL, see fonts/OFL.txt). */
@font-face{font-family:"Geist";src:url(fonts/geist.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Geist Mono";src:url(fonts/geist-mono.woff2) format("woff2");font-weight:100 900;font-display:swap}
:root{
  color-scheme:light;
  --bg:#fbfbfc;--bg2:#f4f4f7;--card:#fff;--sunk:#f8f8fa;
  --line:#e7e7ec;--line2:#d9d9e1;
  --tx:#0e0f13;--tx2:#30333c;--mu:#575b68;--mu2:#6a6e7b;
  --ac:#4f46e5;--ac-tx:#4338ca;--acbg:#eef0ff;--acline:#d9dcfd;--pri:#4f46e5;--pri-h:#4338ca;
  --ok:#047857;--okbg:#ecfdf5;--okline:#c9f2de;
  --warn:#a15c07;--warnbg:#fffaeb;--warnline:#fbe5ae;
  --bad:#b91c1c;--badbg:#fef2f2;--badline:#fbd5d5;
  --sh1:0 1px 2px rgba(16,18,27,.05),0 1px 1px rgba(16,18,27,.03);
  --sh2:0 1px 2px rgba(16,18,27,.04),0 8px 24px -10px rgba(16,18,27,.12);
  --sh3:0 2px 4px rgba(16,18,27,.04),0 24px 60px -24px rgba(40,36,120,.28);
  --glow1:rgba(99,102,241,.20);--glow2:rgba(139,92,246,.13);
  --r:14px;--r2:10px;
  --sans:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
}
[data-theme=dark]{
  color-scheme:dark;
  --bg:#0b0b0e;--bg2:#121217;--card:#141419;--sunk:#101014;
  --line:rgba(255,255,255,.08);--line2:rgba(255,255,255,.14);
  --tx:#eeeef2;--tx2:#cfd0d8;--mu:#a2a4b2;--mu2:#8e909f;
  --ac:#8b93ff;--ac-tx:#aab1ff;--acbg:rgba(129,140,248,.12);--acline:rgba(129,140,248,.3);--pri:#4f46e5;--pri-h:#5b53f0;
  --ok:#5fd4a5;--okbg:rgba(16,185,129,.12);--okline:rgba(16,185,129,.28);
  --warn:#f2c35b;--warnbg:rgba(245,158,11,.11);--warnline:rgba(245,158,11,.28);
  --bad:#fb9a9a;--badbg:rgba(239,68,68,.12);--badline:rgba(239,68,68,.3);
  --sh1:0 1px 2px rgba(0,0,0,.4);--sh2:0 1px 2px rgba(0,0,0,.4),0 10px 30px -12px rgba(0,0,0,.6);--sh3:0 30px 70px -30px rgba(0,0,0,.8);
  --glow1:rgba(99,102,241,.22);--glow2:rgba(139,92,246,.12);
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;overflow-x:clip;background:var(--bg);color:var(--tx);font:400 15.5px/1.6 var(--sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-feature-settings:"ss01","cv11"}
a{color:var(--ac-tx);text-decoration:none}a:hover{text-decoration:underline;text-underline-offset:3px}
/* links inside running text stay identifiable without color (WCAG 1.4.1) */
.prose p a,.prose li a,.lede a,.fine a,.privacy a,.faq a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:color-mix(in srgb,currentColor 40%,transparent)}
h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-.02em;color:var(--tx)}
p{margin:0}
code{font-family:var(--mono);font-size:.86em;background:var(--bg2);border:1px solid var(--line);border-radius:6px;padding:1px 5px}
kbd{font-family:var(--mono);font-size:11px;font-weight:500;min-width:20px;height:20px;padding:0 5px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line2);border-bottom-width:2px;border-radius:5px;background:var(--card);color:var(--mu);line-height:1}
:focus-visible{outline:2px solid var(--ac);outline-offset:2px;border-radius:6px}
::selection{background:var(--acline)}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:99;background:var(--pri);color:#fff;padding:8px 14px;border-radius:8px}.skip:focus{top:12px}
.wrap{max-width:1140px;margin:0 auto;padding:0 28px}
.grow{flex:1}
.fine{font-size:12.5px;color:var(--mu2);line-height:1.55}
.ic{width:18px;height:18px;flex:none;display:inline-block;vertical-align:middle}
.ic.ext{width:12px;height:12px}

/* header */
.top{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:saturate(1.6) blur(12px);-webkit-backdrop-filter:saturate(1.6) blur(12px);border-bottom:1px solid var(--line)}
.topin{display:flex;align-items:center;gap:20px;height:62px}
.logo{display:inline-flex;align-items:center;gap:10px;color:var(--tx);font-weight:650;font-size:16.5px;letter-spacing:-.02em}.logo:hover{text-decoration:none}
.mark{width:28px;height:28px;display:block;flex:none;filter:drop-shadow(0 2px 6px rgba(79,70,229,.28))}.mark svg{width:100%;height:100%;display:block}
.top nav{margin-left:auto;display:flex;gap:2px}
.top nav a{color:var(--mu);font-size:14px;font-weight:500;padding:7px 12px;border-radius:8px;white-space:nowrap}
.top nav a:hover{color:var(--tx);background:var(--bg2);text-decoration:none}
.top nav a.on{color:var(--tx);background:var(--bg2)}
.tt{width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);background:var(--card);color:var(--mu);border-radius:9px;cursor:pointer;box-shadow:var(--sh1)}
.tt:hover{color:var(--tx);border-color:var(--line2)}
.tt .sun{display:none}[data-theme=dark] .tt .sun{display:inline-block}[data-theme=dark] .tt .moon{display:none}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 16px;border-radius:var(--r2);border:1px solid var(--line2);background:var(--card);color:var(--tx);font:550 14px/1 var(--sans);letter-spacing:-.005em;cursor:pointer;box-shadow:var(--sh1);transition:background .15s,border-color .15s,box-shadow .15s,transform .15s;white-space:nowrap}
.btn:hover{background:var(--bg2);text-decoration:none}
.btn.pri{background:var(--pri);border-color:transparent;color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 1px 2px rgba(30,27,75,.25),0 6px 18px -8px rgba(79,70,229,.7)}
.btn.pri:hover{background:var(--pri-h)}
.btn.ghost{background:transparent;border-color:transparent;box-shadow:none;color:var(--mu)}.btn.ghost:hover{background:var(--bg2);color:var(--tx)}
.btn.sm{height:32px;padding:0 12px;font-size:13px;border-radius:8px}
.btn.lg{height:46px;padding:0 20px;font-size:15px;border-radius:12px}
.btn .arr{width:16px;height:16px;transition:transform .15s}.btn:hover .arr,.tool:hover .arr,.more:hover .arr{transform:translateX(2px)}
.btn:disabled{opacity:.6;cursor:progress}
.linkish{background:none;border:0;padding:0;font:inherit;color:var(--ac-tx);cursor:pointer;text-decoration:underline;text-underline-offset:3px}

/* hero */
.hero{position:relative;padding:64px 0 32px}
.hero h1{font-size:clamp(2.1rem,4.2vw,3.1rem);line-height:1.08;letter-spacing:-.035em;font-weight:650;max-width:18em}
.hero .lede{font-size:18px;color:var(--mu);margin-top:16px;max-width:38em;line-height:1.6}
.grad{background:linear-gradient(95deg,#4f46e5 0%,#7c3aed 55%,#2563eb 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
[data-theme=dark] .grad{background-image:linear-gradient(95deg,#a5b4fc 0%,#c4b5fd 55%,#93c5fd 100%)}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:550;color:var(--ac-tx);margin-bottom:12px}
.eyebrow a{color:inherit}.eyebrow.warn{color:var(--warn)}
.dotlive{width:7px;height:7px;border-radius:50%;background:#10b981;box-shadow:0 0 0 3px rgba(16,185,129,.18);flex:none}
.cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.privacy{display:inline-flex;align-items:center;gap:8px;margin-top:20px;font-size:13.5px;font-weight:500;color:var(--ok);background:var(--okbg);border:1px solid var(--okline);border-radius:999px;padding:5px 12px 5px 10px}.privacy .ic{width:15px;height:15px}
.hero.home{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:48px;align-items:center;padding:88px 0 40px}
.hero.home::before{content:"";position:absolute;z-index:-1;pointer-events:none;inset:-120px -10vw auto -10vw;height:640px;background:radial-gradient(520px 320px at 72% 34%,var(--glow1),transparent 70%),radial-gradient(360px 220px at 78% 14%,var(--glow2),transparent 72%)}
.hero.home h1{font-size:clamp(2.6rem,5.2vw,4.1rem);line-height:1.02;letter-spacing:-.045em}
.badge-line{display:inline-flex;align-items:center;gap:9px;font-size:13px;font-weight:500;color:var(--mu);background:var(--card);border:1px solid var(--line);border-radius:999px;padding:5px 12px 5px 10px;box-shadow:var(--sh1);margin-bottom:22px}
.stats{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:40px;margin:40px 0 0;padding-top:22px;border-top:1px solid var(--line)}
.stats dt{font-size:13px;color:var(--mu2)}.stats dd{margin:2px 0 0;font-size:26px;font-weight:600;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.hvis{margin:0}
.hvis figcaption{font-size:12.5px;color:var(--mu2);margin-top:12px;padding-left:4px}

/* editor / code window (the subtle nod) */
.editor{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--sh2)}
.editor.hed{box-shadow:var(--sh3)}
.ebar{display:flex;align-items:center;gap:12px;height:42px;padding:0 14px;background:var(--sunk);border-bottom:1px solid var(--line)}
.dots{display:inline-flex;gap:6px}.dots i{width:10px;height:10px;border-radius:50%;background:var(--line2)}
.fn{display:inline-flex;align-items:center;gap:7px;font:500 12.5px var(--mono);color:var(--mu)}.fn .ic{width:15px;height:15px;color:var(--mu2)}
.code{margin:0;padding:18px 20px;font:400 12.8px/1.75 var(--mono);color:var(--tx2);white-space:pre;overflow-x:auto}
.m-h1{color:var(--tx);font-weight:600}.m-h2{color:var(--ac-tx);font-weight:600}.m-b{color:var(--mu2)}.m-f,.m-x{color:var(--mu2)}.m-n{color:var(--mu2);font-style:italic}
.m-c{background:var(--acbg);color:var(--tx);border-radius:4px;padding:0 3px}
.cur{display:inline-block;width:7px;height:15px;margin-left:2px;vertical-align:-3px;background:var(--ac);opacity:.55;border-radius:1px;animation:blink 1.15s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.hchecks{list-style:none;margin:0;padding:14px 18px 16px;display:flex;flex-wrap:wrap;gap:6px;border-top:1px solid var(--line)}
.hchecks li,.health li{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:500;color:var(--tx2);background:var(--card);border:1px solid var(--line);border-radius:999px;padding:3px 10px 3px 8px}
.hchecks li .ic{width:14px;height:14px;color:var(--ok)}
.hchecks li.warn,.health li.warn{color:var(--warn);background:var(--warnbg);border-color:var(--warnline)}
.hchecks li b{font-weight:700;width:14px;text-align:center}

/* product cards */
.tools2{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:56px}
.tool{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:28px;color:var(--tx);box-shadow:var(--sh1);transition:border-color .15s,box-shadow .2s,transform .2s}
.tool:hover{text-decoration:none;border-color:var(--line2);box-shadow:var(--sh2);transform:translateY(-2px)}
.ticon{width:40px;height:40px;border-radius:11px;display:inline-flex;align-items:center;justify-content:center;background:var(--acbg);color:var(--ac-tx);border:1px solid var(--acline)}.ticon .ic{width:20px;height:20px}
.ticon.sm{width:34px;height:34px;border-radius:9px}.ticon.sm .ic{width:18px;height:18px}
.tool h2{font-size:20px;margin-top:18px}
.tool p{color:var(--mu);font-size:15px;margin-top:8px}
.mini-list{list-style:none;margin:20px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.mini-list li{background:var(--sunk);border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.mini-list span{display:block;font-size:12px;color:var(--mu2)}.mini-list b{font-size:19px;font-weight:600;letter-spacing:-.02em}
.mini-feed{list-style:none;margin:18px 0 0;padding:0}
.mini-feed li{display:flex;align-items:center;gap:10px;padding:9px 0;border-top:1px solid var(--line);font-size:13.5px;color:var(--tx2)}
.mini-feed li:first-child{border-top:0}.mini-feed .mt{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.go{margin-top:auto;padding-top:22px;display:inline-flex;align-items:center;gap:6px;color:var(--ac-tx);font-size:14px;font-weight:550}

/* sections */
.sec{margin-top:96px}
.sechead{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:24px}
.sec h2,.sechead h2{font-size:clamp(1.45rem,2.4vw,1.8rem);letter-spacing:-.03em;line-height:1.2}
.sechead .eyebrow{margin-bottom:6px}
.more{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:550;white-space:nowrap}.more:hover{text-decoration:none}.more .arr{width:15px;height:15px;transition:transform .15s}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:24px;box-shadow:var(--sh1)}
.card h3{font-size:16px;margin:16px 0 6px}.card p{color:var(--mu);font-size:14.5px}
.card.sm{padding:18px}.card.sm h3{font-size:15px;margin-top:8px}.card.sm p{font-size:13.5px}
.cn{font:500 12px var(--mono);color:var(--ac-tx)}
.card .eyebrow{margin-bottom:0}

/* tool avatars (initials, tinted by tool colour) */
.av{width:36px;height:36px;flex:none;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;font:650 12.5px/1 var(--sans);letter-spacing:-.01em;color:var(--tx);background:color-mix(in srgb,var(--c) 20%,var(--card));border:1px solid color-mix(in srgb,var(--c) 42%,var(--card));box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
.av.xs{width:22px;height:22px;border-radius:6px;font-size:9.5px}
.av.lg{width:52px;height:52px;border-radius:14px;font-size:17px}

/* pill tags */
.pill{display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:999px;font:550 12px/1 var(--sans);border:1px solid;white-space:nowrap}
.p-feature{color:var(--ac-tx);background:var(--acbg);border-color:var(--acline)}
.p-breaking{color:var(--bad);background:var(--badbg);border-color:var(--badline)}
.p-pricing{color:var(--warn);background:var(--warnbg);border-color:var(--warnline)}
.p-fix{color:var(--ok);background:var(--okbg);border-color:var(--okline)}
.p-stale{color:var(--mu);background:var(--bg2);border-color:var(--line2)}
.legend{display:flex;flex-wrap:wrap;gap:6px;margin-top:20px}

/* changelog timeline, grouped by day */
.tl{position:relative}
.day{display:grid;grid-template-columns:150px minmax(0,1fr);gap:32px;padding:12px 0}
.dh{position:sticky;top:84px;align-self:start;font-size:15px;font-weight:600;letter-spacing:-.01em}
.dh small{display:block;font-size:12.5px;font-weight:400;color:var(--mu2);margin-top:2px;letter-spacing:0}
.wkh{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--mu2);margin:36px 0 8px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.tl>.wkh:first-child{margin-top:8px}
.ents{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.ent{display:grid;grid-template-columns:36px 1fr;gap:14px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;box-shadow:var(--sh1);transition:border-color .15s,box-shadow .2s}
.ent:hover{border-color:var(--line2);box-shadow:var(--sh2)}
.ent.k-breaking{border-color:color-mix(in srgb,var(--badline) 70%,var(--line))}
.ent.k-pricing{border-color:color-mix(in srgb,var(--warnline) 80%,var(--line))}
.eb{min-width:0}
.em{display:flex;align-items:center;flex-wrap:wrap;gap:8px;min-height:22px}
.tn{font-size:13.5px;font-weight:550;color:var(--tx2)}
.ent h4{font-size:16px;line-height:1.38;margin:6px 0 0;letter-spacing:-.015em}
.ent h4 a{color:var(--tx)}.ent h4 a:hover{color:var(--ac-tx)}
.ent p{font-size:14.5px;color:var(--mu);margin-top:5px;line-height:1.58;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.src{display:inline-flex;align-items:center;gap:4px;margin-top:10px;font:450 12px var(--mono);color:var(--mu2)}.src:hover{color:var(--ac-tx)}
.empty{list-style:none;color:var(--mu);border:1px dashed var(--line2);border-radius:var(--r);padding:28px;text-align:center;background:var(--card)}

/* panels & steps */
.panel{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:28px;box-shadow:var(--sh1)}
.rp{display:grid;gap:20px}
.stephead{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-bottom:20px}
.stephead h2{font-size:18px;letter-spacing:-.02em}
.num{width:26px;height:26px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:650;background:var(--acbg);color:var(--ac-tx);border:1px solid var(--acline)}
.meter{font:450 12px var(--mono);color:var(--mu2)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
.fld{display:block}
.fld>span:first-child{display:block;font-size:13.5px;font-weight:550;color:var(--tx2);margin-bottom:7px}
.fld em{font-style:normal;font-weight:400;color:var(--mu2)}
.fld.inline{display:inline-flex;align-items:center;gap:10px}.fld.inline>span:first-child{margin:0}
input[type=text],input[type=email],input[type=search],select,textarea{width:100%;font:inherit;font-size:15px;color:var(--tx);background:var(--card);border:1px solid var(--line2);border-radius:var(--r2);padding:9px 12px;transition:border-color .15s,box-shadow .15s;box-shadow:var(--sh1)}
input[type=text],input[type=email],input[type=search],select{height:42px}
select{appearance:none;-webkit-appearance:none;padding-right:36px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236a6e7b' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 13px center}
input::placeholder,textarea::placeholder{color:var(--mu2);opacity:1}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--ac);box-shadow:0 0 0 3px color-mix(in srgb,var(--ac) 22%,transparent)}
textarea{resize:vertical;line-height:1.6}
.tawrap{position:relative;display:block}
#transcript{font:400 13px/1.65 var(--mono);min-height:270px;padding:14px 16px 34px;background:var(--sunk)}
.kh{display:inline-flex;align-items:center;gap:4px;font-size:12.5px;color:var(--mu2)}
.kh.corner{position:absolute;right:12px;bottom:12px;pointer-events:none}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:16px}
.demos{margin-left:auto;display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}#demoBtns{display:inline-flex;gap:6px}
.demo-note{margin-top:14px;font-size:13.5px;color:var(--tx2);background:var(--acbg);border:1px solid var(--acline);border-radius:var(--r2);padding:10px 14px}.demo-note b{color:var(--ac-tx);font-weight:600}
.health{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.health li.ok .hi{color:var(--ok);font-weight:700}.health li.warn .hi{font-weight:700}
.sections{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.sect{border:1px solid var(--line);border-radius:12px;padding:14px 16px 16px;background:var(--sunk)}
.sect.wide{grid-column:1/-1}
.sect.none{border-style:dashed}
.sh{display:flex;align-items:center;justify-content:space-between;gap:10px}
.sh label{font-size:14.5px;font-weight:600}
.badge{font-size:11.5px;font-weight:550;color:var(--ac-tx);background:var(--acbg);border:1px solid var(--acline);border-radius:999px;padding:2px 8px;white-space:nowrap}
.sect.none .badge{color:var(--mu);background:var(--bg2);border-color:var(--line2)}
.hint{font-size:12.5px;color:var(--mu2);margin:2px 0 9px}
.sect textarea{font:400 14px/1.6 var(--sans);background:var(--card)}
.sect[data-key=errors] textarea,.sect[data-key=files] textarea,.sect[data-key=commands] textarea{font:400 13px/1.65 var(--mono)}
.why{font-size:12.5px;color:var(--mu);margin-top:8px}
.tabs{display:inline-flex;flex-wrap:wrap;gap:2px;padding:3px;background:var(--bg2);border:1px solid var(--line);border-radius:11px}
.tab{font:550 13.5px var(--sans);color:var(--mu);background:transparent;border:0;border-radius:8px;padding:7px 13px;cursor:pointer}
.tab:hover{color:var(--tx)}
.tab.on{background:var(--card);color:var(--tx);box-shadow:var(--sh1),0 0 0 1px var(--line)}
.tabopts{margin-top:14px}.tabopts select{width:auto;min-width:240px}
.tabnote{margin:12px 0 0}
.fileview{margin-top:14px}
.fbar{height:48px;padding:0 10px 0 14px}.fbar .fn{color:var(--tx2)}
.fmeta{font:450 12px var(--mono);color:var(--mu2)}
.fbody{max-height:580px;overflow:auto;background:var(--card)}
.blk{position:relative;padding:12px 0;border-top:1px solid var(--line)}.blk:first-child{border-top:0}
.blk pre{margin:0;font:400 13px/1.72 var(--mono);color:var(--tx2)}
.ln{display:flex}.no{flex:none;width:3.4em;padding-right:1.3em;text-align:right;color:var(--mu2);opacity:.65;user-select:none;-webkit-user-select:none}
.lc{flex:1;min-width:0;white-space:pre-wrap;overflow-wrap:anywhere;padding-right:96px}
.bcopy{position:absolute;top:10px;right:12px;height:26px;padding:0 10px;font:550 12px var(--sans);color:var(--mu);background:var(--card);border:1px solid var(--line2);border-radius:7px;cursor:pointer;box-shadow:var(--sh1);opacity:0;transition:opacity .15s}
.blk:hover .bcopy,.bcopy:focus-visible,.bcopy.done{opacity:1}
.bcopy:hover{color:var(--tx)}.bcopy.done{color:var(--ok);border-color:var(--okline)}
@media (hover:none){.bcopy{opacity:1}}
.output{display:block;border:0;border-radius:0;box-shadow:none;min-height:440px;font:400 13px/1.65 var(--mono);background:var(--card)}
.chk{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;color:var(--mu)}.chk input{width:16px;height:16px;accent-color:var(--pri)}
.toast{font-size:13.5px;font-weight:500;color:var(--ok);opacity:0;transition:opacity .2s}.toast.show{opacity:1}.toast.bad{color:var(--bad)}
.projlist{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.projlist li:not(.empty){display:flex;align-items:center;justify-content:space-between;gap:16px;border:1px solid var(--line);border-radius:12px;padding:14px 16px;background:var(--sunk)}
.projlist li.cur{border-color:var(--ac)}
.projlist b{display:block;font-weight:600}.projlist .fine{display:block}.projlist .nx{display:block;font-size:13.5px;color:var(--tx2);margin-top:4px}
.pa{display:flex;gap:6px;flex:none}

/* digest */
.picker .grp{display:flex;gap:16px;align-items:flex-start;padding:7px 0}
.glabel{width:120px;flex:none;font-size:13px;font-weight:500;color:var(--mu2);padding-top:7px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 12px 0 6px;border-radius:999px;border:1px solid var(--line2);background:var(--card);color:var(--tx2);font:500 13.5px var(--sans);cursor:pointer;box-shadow:var(--sh1);transition:border-color .15s,background .15s}
.chip small{font-size:12px;color:var(--mu2);font-variant-numeric:tabular-nums}
.chip:hover{border-color:var(--acline)}
.chip.on{border-color:var(--ac);background:var(--acbg);color:var(--ac-tx);box-shadow:inset 0 0 0 1px var(--ac)}
.chip.on small{color:var(--ac-tx)}
.filters{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:18px;padding-top:18px;border-top:1px solid var(--line)}
.seg{display:inline-flex;gap:2px;padding:3px;background:var(--bg2);border:1px solid var(--line);border-radius:11px}
.seg button{font:550 13px var(--sans);color:var(--mu);background:transparent;border:0;border-radius:8px;padding:6px 11px;cursor:pointer;white-space:nowrap}
.seg button:hover{color:var(--tx)}
.seg button.on{background:var(--card);color:var(--tx);box-shadow:var(--sh1),0 0 0 1px var(--line)}
.search{position:relative;min-width:220px;display:flex;align-items:center}
.search>.ic{position:absolute;left:12px;color:var(--mu2);width:17px;height:17px;pointer-events:none}
.search input{padding-left:38px;padding-right:38px;height:40px}
.search .kin{position:absolute;right:10px;pointer-events:none}
.sumbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:24px 0 6px;font-size:14px;color:var(--mu)}
.sumbar b{color:var(--tx);font-weight:600}
.hintpick{font-size:13px;font-weight:500;color:var(--ac-tx);background:var(--acbg);border:1px solid var(--acline);border-radius:999px;padding:3px 11px}
#feedwrap{margin-bottom:18px}
.srcs summary{display:flex;align-items:center;flex-wrap:wrap;gap:12px;cursor:pointer;list-style:none}
.srcs summary::-webkit-details-marker{display:none}
.srcs summary h2{font-size:18px}
.srcs summary::after{content:"";width:9px;height:9px;border-right:2px solid var(--mu2);border-bottom:2px solid var(--mu2);transform:rotate(45deg);margin-left:auto;transition:transform .2s}
.srcs[open] summary::after{transform:rotate(-135deg)}
.tblwrap{overflow-x:auto;margin:18px 0 12px}
table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:left;font-size:12.5px;font-weight:550;color:var(--mu2);padding:8px 10px;border-bottom:1px solid var(--line)}
td{padding:10px;border-bottom:1px solid var(--line);color:var(--tx2);white-space:nowrap}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--c);margin-right:9px;vertical-align:1px}
.st{font-size:12px;font-weight:550;padding:2px 8px;border-radius:999px;border:1px solid}
.st.ok{color:var(--ok);background:var(--okbg);border-color:var(--okline)}.st.warn{color:var(--warn);background:var(--warnbg);border-color:var(--warnline)}.st.bad{color:var(--bad);background:var(--badbg);border-color:var(--badline)}

/* newsletter */
.news{display:grid;grid-template-columns:1.15fr 1fr;gap:36px;align-items:center;margin-top:96px;position:relative;overflow:hidden;background:radial-gradient(600px 260px at 0% 0%,var(--acbg),transparent 70%),var(--card)}
.news h2{font-size:clamp(1.35rem,2.2vw,1.65rem);letter-spacing:-.03em;line-height:1.2}
.news p{color:var(--mu);margin-top:8px}
.news .eyebrow{margin-bottom:8px}
.nlrow{display:flex;gap:8px}.nlrow input{flex:1;min-width:0}.nlrow .btn{height:42px}
.nlmsg{margin-top:10px}.nlmsg.ok{color:var(--ok)}.nlmsg.err{color:var(--bad)}

/* changelog index + tool pages */
.tgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.tcard{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px;color:var(--tx);box-shadow:var(--sh1);transition:border-color .15s,box-shadow .2s,transform .2s}
.tcard:hover{text-decoration:none;border-color:var(--line2);box-shadow:var(--sh2);transform:translateY(-2px)}
.tch{display:flex;align-items:center;gap:10px}.tch b{font-size:15px;font-weight:600}.tch small{margin-left:auto;font-size:12px;color:var(--mu2);white-space:nowrap}
.tcard p{font-size:14px;color:var(--tx2);margin:12px 0 8px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tcard .fine{margin-top:auto}
.th{display:flex;align-items:center;gap:16px}
.tool-hero+.tl{margin-top:8px}

/* prose */
.prose{max-width:780px}
.prose h2{font-size:20px;margin:30px 0 10px}.prose h2:first-child{margin-top:0}
.prose p,.prose li{color:var(--tx2);font-size:15.5px;line-height:1.7}
.prose p+p{margin-top:12px}.prose ul{padding-left:20px}

/* footer */
.foot{margin-top:120px;border-top:1px solid var(--line);background:var(--sunk);padding:52px 0 40px}
.fgrid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px;margin-bottom:28px}
.fgrid h2{font-size:13px;font-weight:600;margin-bottom:10px;letter-spacing:0}
.fgrid a:not(.logo){display:block;font-size:14px;color:var(--mu);padding:3px 0}.fgrid a:not(.logo):hover{color:var(--tx)}
.fgrid p{font-size:14px;color:var(--mu);margin-top:12px;max-width:30em}
.logo.sm{font-size:15px}.logo.sm .mark{width:24px;height:24px}

/* responsive */
@media (max-width:980px){
  .hero.home{grid-template-columns:minmax(0,1fr);gap:40px;padding-top:64px}
}
@media (max-width:900px){
  .tools2,.grid3,.news{grid-template-columns:1fr}.grid4{grid-template-columns:1fr 1fr}
  .sections{grid-template-columns:1fr}.sect.wide{grid-column:auto}
  .fgrid{grid-template-columns:1fr 1fr}.fgrid>div:first-child{grid-column:1/-1}
  .top nav a:nth-child(n+4){display:none}
}
@media (max-width:720px){
  .day{grid-template-columns:minmax(0,1fr);gap:10px;padding:12px 0}
  .dh{position:static;display:flex;align-items:baseline;gap:8px}.dh small{margin:0}
  .demos{margin-left:0;width:100%}
}
@media (max-width:640px){
  body{font-size:15px}
  .wrap{padding:0 18px}
  .topin{gap:10px;height:58px}
  .logo .nm{display:none}.logo.sm .nm{display:inline}
  .top nav a{padding:7px 9px;font-size:13.5px}
  .top nav a:nth-child(n+3){display:none}
  .hero{padding:44px 0 24px}.hero.home{padding:44px 0 24px;gap:32px}
  .hero .lede{font-size:16.5px}
  .stats{gap:22px;grid-template-columns:repeat(3,auto)}.stats dd{font-size:22px}.stats dt{font-size:12px}
  .code{font-size:11.8px;padding:14px}
  .panel{padding:20px;border-radius:16px}.tool{padding:22px}
  .row2{grid-template-columns:1fr}
  .grid4{grid-template-columns:1fr}
  .mini-list{grid-template-columns:1fr 1fr}
  .kh{display:none}
  .ent{grid-template-columns:30px 1fr;gap:12px;padding:15px}.ent .av{width:30px;height:30px;font-size:11px;border-radius:8px}
  .picker .grp{flex-direction:column;gap:6px}.glabel{width:auto;padding:0}
  .filters .seg{max-width:100%;overflow-x:auto}
  .search{flex-basis:100%}
  .picker .stephead .grow{flex-basis:100%;height:0}.picker .stephead h2{flex-basis:100%}
  .hintpick{border-radius:10px}
  .sechead{flex-direction:column;align-items:flex-start}
  .lc{padding-right:70px}.no{width:2.6em;padding-right:.9em}
  .fbody{max-height:480px}
  .nlrow{flex-direction:column}
  .projlist li:not(.empty){flex-direction:column;align-items:flex-start}
  .sec,.news{margin-top:72px}
  .th{gap:12px}.av.lg{width:42px;height:42px;font-size:14px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .tool:hover,.tcard:hover{transform:none}
}
/* sponsor slot (only rendered when configured) + small spacing helpers */
.spon{margin:24px 0;display:grid;gap:6px}.spon h3{margin:4px 0 0}.spon .fine{margin-top:4px}
.gap{margin-top:24px}.faq h3{margin:0 0 4px}.faq p+h3{margin-top:20px}.affnote{align-self:center}
@media (forced-colors:active){
  .pill,.chip,.av,.badge{border:1px solid CanvasText}.grad{color:CanvasText;background:none}.cur{background:CanvasText}
}