[hidden]{display:none !important}
body{margin:0}
.t-light{--bg:#ffffff;--surface:#ffffff;--subtle:#f7f7f7;--hover:#f0f0f0;--text:#171717;--text2:#525252;--muted:#6b6b6b;--border:#e8e8e8;--border2:#d4d4d4;--btn:#171717;--btnfg:#ffffff}
.t-dark{--bg:#090909;--surface:#111111;--subtle:#0f0f0f;--hover:#1c1c1c;--text:#ededed;--text2:#a3a3a3;--muted:#8f8f8f;--border:#262626;--border2:#3a3a3a;--btn:#ededed;--btnfg:#0a0a0a}
.root{background:var(--bg);color:var(--text);font-family:"Geist",system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px;box-sizing:border-box}
.mono{font-family:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace}
a{color:var(--text)}a:hover{color:var(--text2)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 18px;border-radius:8px;font-size:15px;font-weight:500;text-decoration:none;border:1px solid var(--border);background:var(--surface);color:var(--text);transition:background .15s,border-color .15s,opacity .15s,transform .15s;box-sizing:border-box;font-family:inherit;cursor:pointer}
.btn:hover{background:var(--hover);border-color:var(--border2);color:var(--text)}
.btn-p{background:var(--btn);color:var(--btnfg);border-color:var(--btn)}
.btn-p:hover{background:var(--btn);border-color:var(--btn);color:var(--btnfg);opacity:.86}
.nl{color:var(--text2);text-decoration:none;font-size:14px}.nl:hover{color:var(--text)}
.eyebrow{font-family:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;color:var(--muted)}
.h2{margin:0;font-size:clamp(30px,3.8vw,48px);line-height:1.06;letter-spacing:-0.035em;font-weight:600}
.lede{margin:0;font-size:17px;line-height:1.65;color:var(--text2)}
.fade-edges{-webkit-mask-image:linear-gradient(to right,transparent 0,#000 7%,#000 93%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 9%,#000 91%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(to right,transparent 0,#000 7%,#000 93%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 9%,#000 91%,transparent 100%);mask-composite:intersect}
.cols3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.cols2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:stretch}
.feat{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--border);border:1px solid var(--border);border-radius:14px;overflow:hidden}
.two{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:start}
.card{border:1px solid var(--border);border-radius:14px;background:var(--surface)}
.code{border:1px solid #262626;border-radius:12px;overflow:hidden;background:#0d0d0d;min-width:0}
.code pre{margin:0;padding:20px;font-family:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;line-height:1.75;color:#a3a3a3;overflow-x:auto}
.codebar{display:flex;align-items:center;justify-content:space-between;height:42px;padding:0 16px;border-bottom:1px solid #262626;background:#141414;font-family:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;color:#8f8f8f}
.k{color:#8f8f8f}.i{color:#ededed}.f{color:#6cb2ff}.c{color:#6b6b6b}.s{color:#a3a3a3}
.tabs{display:flex;flex-wrap:wrap;gap:6px;padding:4px;border:1px solid var(--border);border-radius:12px;background:var(--subtle);width:max-content;max-width:100%;box-sizing:border-box}
.tab{height:36px;padding:0 14px;border-radius:8px;border:1px solid transparent;background:transparent;color:var(--text2);font-family:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;cursor:pointer;transition:background .15s,color .15s}
.tab:hover{color:var(--text)}
.tab-on{background:var(--surface);color:var(--text);border-color:var(--border);box-shadow:0 1px 2px rgba(0,0,0,.05)}
.mock{background:#ffffff;color:#171717;border:1px solid #e5e5e5;border-radius:14px;padding:24px;display:flex;flex-direction:column;gap:14px;font-size:14px;box-sizing:border-box}
.mlabel{display:flex;justify-content:space-between;align-items:baseline;font-size:13px;font-weight:500;color:#171717}
.mlabel span{font-weight:400;color:#737373;font-size:12px}
.minput{height:40px;border:1px solid #e5e5e5;border-radius:8px;display:flex;align-items:center;padding:0 12px;font-size:14px;color:#171717;background:#fff;box-sizing:border-box}
.minput.on{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}
.caret{display:inline-block;width:1.5px;height:18px;background:#171717;margin-left:1px;animation:blink 1s steps(1) infinite}
.mbtn{height:32px;padding:0 12px;border:1px solid #d4d4d4;border-radius:8px;background:#fff;font-size:13px;color:#171717;display:inline-flex;align-items:center;gap:6px;font-family:inherit}
.seg{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;padding:4px;background:#f5f5f5;border-radius:10px}
.seg div{height:32px;display:flex;align-items:center;justify-content:center;font-size:13px;color:#737373;border-radius:7px}
.seg .on{background:#fff;color:#171717;font-weight:500;box-shadow:0 0 0 1px #e5e5e5}
.row{display:flex;align-items:center;gap:12px;padding:10px;border:1px solid #e5e5e5;border-radius:10px;background:#fff}
.thumb{width:56px;height:40px;border-radius:6px;background:#efefef;flex-shrink:0;overflow:hidden}
.mk{background:#fff;color:#171717;border:1px solid #e5e5e5;border-radius:10px;box-sizing:border-box}
.bar{height:8px;border-radius:4px;background:#ececec}
.pop{animation:pop .5s cubic-bezier(.2,.8,.2,1) both}
.focal{animation:focal 4s ease-in-out infinite}
.slidein{animation:slidein 3.6s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes pop{from{opacity:0;transform:translateY(10px) scale(.99)}to{opacity:1;transform:none}}
@keyframes blink{50%{opacity:0}}
@keyframes focal{0%,100%{transform:translate(0,0)}35%{transform:translate(38px,-14px)}70%{transform:translate(-26px,10px)}}
@keyframes slidein{0%,12%{opacity:0;transform:translateY(-8px)}24%,88%{opacity:1;transform:none}100%{opacity:0}}
@keyframes rise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: no-preference){@supports (animation-timeline: view()){.reveal{animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 40%}}}
@media (prefers-reduced-motion: reduce){.caret,.focal,.slidein,.pop{animation:none}}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (max-width:860px){.cols3,.cols2,.feat,.split{grid-template-columns:minmax(0,1fr)}.two{grid-template-columns:minmax(0,1fr);gap:32px}.hide-sm{display:none}}