@font-face{font-family:"Archivo";src:url(fonts/archivo-wght.woff2) format("woff2");font-weight:100 900;font-display:swap}
:root{--bg:#fafafa;--bg2:#f2f2f2;--card:#ffffff;--ln:#e6e6e6;--ln2:#d2d2d2;--tx:#1a1a1a;--mu:#676767;--dim:#6f6f6f;--ac:#1a1a1a;--ac2:#000000;--onac:#ffffff;--acs:rgba(0,0,0,.05);--ok:#1a7f37;
--sans:-apple-system,ui-sans-serif,system-ui,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;--disp:"Archivo",var(--sans);--mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace}
[data-theme=dark]{--bg:#0d0d0d;--bg2:#171717;--card:#141414;--ln:#262626;--ln2:#3a3a3a;--tx:#ececec;--mu:#a3a3a3;--dim:#8f8f8f;--ac:#ffffff;--ac2:#e5e5e5;--onac:#0d0d0d;--acs:rgba(255,255,255,.07);--ok:#4ade80}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--tx);font:16px/1.55 var(--sans);-webkit-font-smoothing:antialiased}
a{color:inherit}.w{max-width:1240px;margin:auto;padding:0 32px;border-left:1px solid var(--ln);border-right:1px solid var(--ln)}
.eb,code,table,.tick,nav a,.btn,.idx{font-family:var(--mono)}
.eb{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--mu);display:flex;gap:12px;align-items:center}.eb b{color:var(--ac);font-weight:600}
header{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--ln)}
header .w{display:flex;align-items:center;gap:28px;height:60px}
.logo{font:800 22px/1 var(--sans);letter-spacing:-.5px;text-decoration:none}.logo .u{position:relative;display:inline-block;color:var(--ac)}.logo .u:before{content:"*";position:absolute;top:-10px;left:50%;transform:translateX(-50%);font-size:15px}
nav{display:flex;gap:24px;flex:1}nav a{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--mu);text-decoration:none}nav a:hover{color:var(--tx)}
.hdr-r{display:flex;gap:8px}
.btn{display:inline-flex;align-items:center;gap:8px;font-size:13px;letter-spacing:.04em;text-transform:uppercase;padding:13px 20px;border:1px solid var(--ln2);background:transparent;color:var(--tx);text-decoration:none;cursor:pointer;border-radius:2px}
.btn:hover{border-color:var(--tx)}.btn.p{background:var(--ac);border-color:var(--ac);color:var(--onac)}.btn.p:hover{background:var(--ac2);border-color:var(--ac2)}.btn:disabled{color:var(--dim);border-style:dashed;cursor:not-allowed}
.btn.s{padding:7px 11px;font-size:11px}#menu{display:none}
.hero{border-bottom:1px solid var(--ln)}.hero .w{padding-top:80px}
h1{font-size:clamp(44px,7.4vw,104px);line-height:.95;letter-spacing:-.045em;font-weight:700;margin:22px 0 28px;max-width:12ch}h1 span{color:var(--ac)}
.lead{font-size:19px;color:var(--mu);max-width:58ch;margin:0 0 34px}.ctas{display:flex;gap:12px;flex-wrap:wrap}
.fig{margin:64px 0 0;display:grid;grid-template-columns:1fr 340px;border:1px solid var(--ln);border-bottom:0;background:var(--card)}
.dev{padding:18px;border-right:1px solid var(--ln)}.bar{display:flex;gap:6px;align-items:center;padding:0 0 12px;font:11px var(--mono);color:var(--dim)}.bar i{width:9px;height:9px;border:1px solid var(--ln2);border-radius:50%}.bar span{margin-left:auto}
.dev img{display:block;width:100%;height:auto;border:1px solid var(--ln2)}
.cap{display:flex;justify-content:space-between;gap:10px;font:11px var(--mono);color:var(--dim);padding:10px 0 0;text-transform:uppercase;letter-spacing:.08em}
.feed{display:flex;flex-direction:column}.feed h4{margin:0;padding:14px 16px;border-bottom:1px solid var(--ln);font:500 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mu);display:flex;justify-content:space-between}
.live{color:var(--ok)}.live:before{content:"";display:inline-block;width:6px;height:6px;background:var(--ok);border-radius:50%;margin-right:6px;animation:bl 1.6s infinite}@keyframes bl{50%{opacity:.25}}
.tick{list-style:none;margin:0;padding:0;font-size:12px;overflow:hidden;height:430px}.tick li{padding:9px 16px;border-bottom:1px solid var(--ln);display:grid;grid-template-columns:62px 1fr;gap:2px 10px;animation:in .5s ease-out}
.tick time{color:var(--dim)}.tick b{color:var(--ac);font-weight:500;background:var(--acs);padding:0 5px;justify-self:start}.tick small{grid-column:2;color:var(--mu);font-size:11px}@keyframes in{from{opacity:0;transform:translateY(-8px);background:var(--acs)}}
section{border-bottom:1px solid var(--ln)}section .w{padding-top:96px;padding-bottom:96px}
.sh{display:grid;grid-template-columns:280px 1fr;gap:40px;margin-bottom:56px}.sh h2{font-size:clamp(32px,4.4vw,56px);line-height:1;letter-spacing:-.035em;margin:0 0 18px;font-weight:700}.sh p{color:var(--mu);font-size:18px;max-width:60ch;margin:0}
table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:16px 18px;border-top:1px solid var(--ln);vertical-align:top}tr:last-child td{border-bottom:1px solid var(--ln)}
th{font-weight:500;color:var(--dim);text-transform:uppercase;letter-spacing:.1em;font-size:11px}td{font-family:var(--sans);font-size:15px}td:first-child{font-family:var(--mono);color:var(--mu);text-transform:uppercase;letter-spacing:.08em;font-size:11px;width:200px;padding-top:19px}
.vs td:nth-child(2){color:var(--dim);text-decoration:line-through}.vs td:nth-child(3):before{content:"→ ";color:var(--ac);font-family:var(--mono)}
.stack{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.svg text{font-family:var(--mono)}.svg .pl{fill:var(--card);stroke:var(--ln2);transition:fill .3s,stroke .3s}.svg g.on .pl{fill:color-mix(in srgb,var(--ac) 10%,var(--card));stroke:var(--ac)}.svg .n{fill:var(--ac);font-size:13px}.svg .t{fill:var(--tx);font-size:13px;letter-spacing:.06em}
ol.ly{list-style:none;margin:0;padding:0}ol.ly li{border-top:1px solid var(--ln);padding:18px 0;display:grid;grid-template-columns:54px 1fr;cursor:default}ol.ly li:last-child{border-bottom:1px solid var(--ln)}ol.ly li.on h3{color:var(--ac)}
.idx{color:var(--ac);font-size:13px}ol.ly .idx{padding-top:3px}ol.ly h3{margin:0 0 4px;font-size:18px;letter-spacing:-.01em;transition:color .3s}ol.ly p{margin:0;color:var(--mu);font-size:15px}
.mods{display:grid;grid-template-columns:1fr 1fr;column-gap:56px}.mods div{display:grid;grid-template-columns:54px 190px 1fr;align-items:baseline;border-top:1px solid var(--ln);padding:20px 0}.mods div:nth-last-child(-n+2){border-bottom:1px solid var(--ln)}
.mods h3{margin:0;font-size:20px;letter-spacing:-.02em}.mods p{margin:0;color:var(--mu);font-size:14px}
.oss{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--ln);border-bottom:1px solid var(--ln)}.oss div{padding:28px 28px 32px 0}.oss div+div{border-left:1px solid var(--ln);padding-left:28px}.oss h3{margin:10px 0 8px;font-size:22px;letter-spacing:-.02em}.oss p{margin:0;color:var(--mu)}
details{border-top:1px solid var(--ln)}details:last-of-type{border-bottom:1px solid var(--ln)}summary{cursor:pointer;list-style:none;padding:22px 0;font-size:19px;font-weight:600;letter-spacing:-.01em;display:flex;justify-content:space-between;gap:16px}summary::-webkit-details-marker{display:none}
summary:after{content:"+";font-family:var(--mono);color:var(--ac)}details[open] summary:after{content:"−"}details p{margin:-6px 0 24px;color:var(--mu);max-width:70ch}
.end .w{padding-top:110px;padding-bottom:110px}.end h2{font-size:clamp(40px,6vw,84px);line-height:.95;letter-spacing:-.045em;margin:20px 0 32px;max-width:14ch}
footer .w{padding-top:40px;padding-bottom:40px;display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;font:12px/1.8 var(--mono);color:var(--dim)}footer a{color:var(--mu)}
code{font-size:.88em;background:var(--bg2);border:1px solid var(--ln);padding:1px 6px}
.rv{opacity:0;transform:translateY(14px);transition:opacity .7s,transform .7s}.rv.vis{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}.rv{opacity:1;transform:none}}
@media(max-width:980px){.fig{grid-template-columns:1fr}.dev{border-right:0;border-bottom:1px solid var(--ln)}.tick{height:300px}.sh,.stack{grid-template-columns:1fr;gap:20px}.mods{grid-template-columns:1fr}.mods div:nth-last-child(2){border-bottom:0}.oss{grid-template-columns:1fr}.oss div+div{border-left:0;border-top:1px solid var(--ln);padding-left:0}.svg{max-width:460px}}
@media(max-width:820px){#menu{display:inline-flex}nav{display:none;position:absolute;top:60px;left:0;right:0;flex-direction:column;gap:0;background:var(--bg);border-bottom:1px solid var(--ln)}nav.open{display:flex}nav a{padding:16px 24px;border-top:1px solid var(--ln)}header .w{justify-content:space-between}}
@media(max-width:600px){.w{padding:0 18px;border:0}.hero .w{padding-top:48px}section .w{padding-top:64px;padding-bottom:64px}.lead{font-size:17px}.mods div{grid-template-columns:44px 1fr}.mods p{grid-column:2;margin-top:4px}td:first-child{width:96px}th,td{padding:12px 8px}.vs th:first-child,.vs td:first-child{display:none}td{font-size:14px}.dev{padding:10px}.cap{flex-direction:column;gap:2px}.ctas .btn{width:100%;justify-content:center}}
.svg .sd{fill:var(--ln);stroke:var(--ln2)}.svg .sd2{fill:var(--bg2);stroke:var(--ln2)}.svg g{transition:transform .3s}.svg g.on{transform:translateY(-6px)}
.svg .pl{stroke:color-mix(in srgb,var(--ac) 45%,var(--ln2))}.svg .sd{fill:color-mix(in srgb,var(--ac) 14%,var(--ln))}.svg .sd2{fill:color-mix(in srgb,var(--ac) 8%,var(--bg2))}.svg g[data-l="5"] .pl{fill:color-mix(in srgb,var(--ac) 10%,var(--card));stroke:var(--ac)}.svg g[data-l="5"] .sd{fill:var(--ac)}.svg g[data-l="5"] .sd2{fill:var(--ac2)}
.vs td:nth-child(3){font-weight:500}

/* v5: Open WebUI-inspired */
.w{border-left:0;border-right:0}
h1,.sh h2,.end h2,.mods h3,.oss h3,ol.ly h3,summary,.logo{font-family:var(--disp)}
h1{font-weight:300;letter-spacing:-.035em;line-height:1.02}h1 span{color:var(--mu)}
.sh h2,.end h2{font-weight:300;letter-spacing:-.03em}.mods h3,.oss h3,ol.ly h3{font-weight:400}summary{font-weight:400}
.eb,nav a,.btn{font-family:var(--sans)}.eb{font-size:11px;letter-spacing:.22em;color:var(--mu)}.eb b{color:var(--tx);font-weight:500}
nav a{text-transform:none;letter-spacing:0;font-size:14px;color:var(--tx)}nav a:hover{color:var(--mu)}
.btn{text-transform:none;letter-spacing:0;font-size:15px;border-radius:0;padding:14px 28px;border-color:var(--ln2)}.btn.s{font-size:13px;padding:5px 11px;background:var(--acs);border-color:transparent;color:var(--mu)}
.btn.p{gap:28px}.btn:disabled{border-style:solid;background:transparent;color:var(--dim)}
.idx,.tick b,.svg .n{color:var(--mu)}.svg .n{fill:var(--mu)}.tick b{color:var(--tx);background:var(--acs)}
.vs td:nth-child(3):before{color:var(--tx)}summary:after{color:var(--mu);font-weight:300}
.fig{background:var(--card);border-bottom:1px solid var(--ln)}.hero{border-bottom:0}.hero .w{padding-bottom:80px}
section{border-bottom:0}section .w{border-top:1px solid var(--ln)}
.svg .pl{fill:var(--card);stroke:var(--ln2)}.svg .sd{fill:var(--bg2)}.svg .sd2{fill:var(--ln)}.svg g[data-l="5"] .pl{fill:var(--tx);stroke:var(--tx)}.svg g[data-l="5"] .t,.svg g[data-l="5"] .n{fill:var(--bg)}.svg g[data-l="5"] .sd{fill:var(--mu)}.svg g[data-l="5"] .sd2{fill:var(--dim)}
.svg g.on .pl{fill:var(--bg2);stroke:var(--tx)}.svg g[data-l="5"].on .pl{fill:var(--tx)}ol.ly li.on h3{color:var(--tx);text-decoration:underline;text-underline-offset:4px}
.live,.live:before{color:var(--ok)}

.hw{display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:start;margin-bottom:56px}
.hwfig{margin:0;border:1px solid var(--ln);background:var(--card);padding:24px}.hwfig svg{width:100%;height:auto;display:block}.hwfig figcaption{font:11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--dim);margin-top:14px}
.hwfig .o{fill:var(--card);stroke:var(--tx);stroke-width:1.2}.hwfig rect.o:first-child{fill:var(--tx)}.hwfig .lb{fill:var(--bg);font:500 13px var(--sans);letter-spacing:.14em}.hwfig line.o{stroke:var(--mu)}
.hwfig .led{fill:var(--ok)}.hwfig .sm{fill:var(--tx);font:13px var(--sans)}.hwfig .w2{fill:none;stroke:var(--ln2);stroke-width:1.5;stroke-dasharray:4 4}.hwfig .tg{fill:var(--dim);font:11px var(--mono)}
ol.hwl{list-style:none;margin:0;padding:0}ol.hwl li{border-top:1px solid var(--ln);padding:16px 0;display:grid;grid-template-columns:40px 1fr}ol.hwl li:last-child{border-bottom:1px solid var(--ln)}ol.hwl h3{margin:0 0 4px;font:400 18px var(--disp)}ol.hwl p{margin:0;color:var(--mu);font-size:15px}
.tiers td:first-child{width:220px}
@media(max-width:980px){.hw{grid-template-columns:1fr;gap:28px}}
@media(max-width:600px){.hwfig{padding:12px}.tiers td:first-child{width:110px}}

.hwfig .st{fill:none;stroke:var(--ln2);stroke-dasharray:6 4}.hwfig rect.bx{fill:var(--tx)}.hwfig .out{fill:none;stroke:var(--tx);stroke-width:1.5}.hwfig .ah{fill:var(--tx)}.hwfig .in{fill:none;stroke:var(--dim);stroke-width:1.5;stroke-dasharray:4 4}.hwfig .x{stroke:#c0392b;stroke-width:2.5}