@font-face{font-family:Inter;src:url(assets/fonts/inter-latin-wght-normal.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
:root{color-scheme:dark;--bg:#111313;--surface:#191c1b;--tint:#161917;--line:#343a37;--text:#f3f5ef;--muted:#a7afa9;--accent:#ff9a52;--accent-dim:#c98a5a;--green:#b3d7ab}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:2rem}
body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}a:hover{color:var(--accent)}
button,a{touch-action:manipulation}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:6px}
button{font:inherit;cursor:pointer}
code,pre,.eyebrow,.number,.flow-label,.small-label,.panel-heading,.hub-caption,.titlebar code{font-family:"SFMono-Regular",Consolas,"Liberation Mono",monospace}
.wrap{max-width:1200px;width:calc(100% - 96px);margin:auto}

/* Nav */
.nav{height:100px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}
.brand{font-size:30px;font-weight:750;letter-spacing:-1.2px}
.brand span,.hub-brand span{color:var(--accent)}
nav{display:flex;gap:28px;font-size:14px;color:#c9cec9}
.github{color:var(--text)}

/* Hero */
.hero{text-align:center;padding-top:72px}
.eyebrow{font-size:12px;letter-spacing:1.3px;color:var(--muted);display:flex;align-items:center;justify-content:center;gap:10px}
.dot{height:7px;width:7px;background:var(--accent);border-radius:50%;box-shadow:0 0 0 0 rgba(255,154,82,.55);animation:ping 2.6s ease-out infinite}
h1{font-size:clamp(54px,7.5vw,98px);letter-spacing:-.045em;line-height:1.04;font-weight:650;margin:28px 0}
h1 span{color:var(--accent)}
.intro{max-width:650px;margin:24px auto;color:#b8c0b9;font-size:20px;line-height:1.6}
.actions{display:flex;justify-content:center;align-items:center;gap:30px;margin:30px 0 54px}
.button{display:inline-flex;gap:44px;padding:12px 22px;background:var(--accent);color:#19130e;font-weight:650;border-radius:5px;transition:background .15s,transform .15s}
.button:hover{background:#ffb47e;color:#19130e;transform:translateY(-1px)}
.text-link{font-size:15px;font-weight:600}

/* Gateway diagram */
.gateway{max-width:800px;margin:auto;padding:28px 40px 24px;border:1px solid var(--line);border-radius:12px;background:radial-gradient(ellipse at center,#26302877,transparent 65%),var(--surface);position:relative}
.flow-label{font-size:12px;letter-spacing:2px;color:var(--muted);margin-bottom:18px}
.clients,.servers{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.clients span,.servers span{font-size:14px;border:1px solid #444d46;background:#202521;border-radius:5px;padding:9px 3px}
.connector{height:30px;width:75%;margin:0 auto;border-left:1px solid #5d6e5c;border-right:1px solid #5d6e5c;border-bottom:1px solid #5d6e5c;position:relative;animation:flow 4s ease-in-out infinite}
.connector:after{content:"";position:absolute;width:1px;height:16px;background:#5d6e5c;bottom:-16px;left:50%;animation:stem 4s ease-in-out infinite}
.connector:before{content:"";position:absolute;left:50%;bottom:-19px;width:7px;height:7px;margin-left:-3px;border-radius:50%;background:var(--accent);opacity:0;animation:packet 4s ease-in-out infinite}
.hub{margin:15px auto 0;border:1px solid #a27651;border-radius:8px;max-width:430px;background:#28271f;padding:12px;animation:glow 4s ease-in-out infinite}
.hub-brand{font-size:33px;line-height:1.3;font-weight:700;letter-spacing:-1.2px}
.hub-caption{font-size:12px;letter-spacing:2px;color:#d4b493;margin:3px 0 12px}
.hub-features{display:flex;justify-content:center;gap:16px;font-size:12px;color:#e6c6a7}
.lower{transform:rotate(180deg);margin:15px auto 0;animation-delay:1.2s}
.lower:after{animation-delay:1.2s}
.lower:before{animation-name:packet-rev;animation-delay:1.2s}
.bottom{margin:17px 0 0}
.hero-foot{display:flex;justify-content:center;gap:34px;color:var(--muted);font-size:13px;padding:23px 0 65px}
.hero-foot span:before{content:"✓";color:var(--accent);margin-right:8px}

@keyframes ping{0%{box-shadow:0 0 0 0 rgba(255,154,82,.55)}70%{box-shadow:0 0 0 7px rgba(255,154,82,0)}100%{box-shadow:0 0 0 0 rgba(255,154,82,0)}}
@keyframes flow{0%,100%{border-color:#5d6e5c}30%{border-color:var(--accent-dim)}}
@keyframes stem{0%,100%{background:#5d6e5c}35%{background:var(--accent-dim)}}
@keyframes packet{0%,15%{opacity:0;transform:translateY(-22px)}25%{opacity:1}45%,100%{opacity:0;transform:translateY(4px)}}
@keyframes packet-rev{0%,15%{opacity:0;transform:translateY(4px)}25%{opacity:1}45%,100%{opacity:0;transform:translateY(-22px)}}
@keyframes glow{0%,100%{box-shadow:0 0 0 0 rgba(255,154,82,0)}45%{box-shadow:0 0 28px -4px rgba(255,154,82,.35)}}

/* Sections */
.section{padding-top:76px;padding-bottom:80px;border-top:1px solid var(--line)}
.section-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:40px;gap:20px}
.number{font-size:12px;letter-spacing:1.5px;color:var(--accent);display:inline-flex;align-items:center;gap:12px}
.numbered .number:before{content:"";width:28px;height:1px;background:var(--accent)}
.kicker{color:var(--muted);font-size:14px;font-style:italic}
.split{display:grid;grid-template-columns:1fr 1.12fr;gap:65px;align-items:center}
h2{font-size:clamp(30px,3.4vw,43px);line-height:1.15;letter-spacing:-.035em;font-weight:600;margin:0 0 24px}
h2 span{color:var(--accent)}
p{color:var(--muted);margin:0 0 20px}
.split p{max-width:490px}

/* Panels */
.code-panel,.permission-panel{min-width:0;background:var(--surface);border:1px solid var(--line);border-radius:9px;overflow:hidden}
.panel-heading{font-size:12px;letter-spacing:.8px;color:var(--muted);padding:17px 22px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between}
.mini-mark{color:var(--accent)}
pre{margin:0;overflow-x:auto;font-size:13px;line-height:1.9;text-align:left}
.code-panel pre{padding:25px 22px}
.comment{color:#8b998e}
.panel-note{font-size:12px;padding:14px 22px;border-top:1px solid var(--line);color:var(--muted)}

/* Compression */
.compression{background:var(--tint)}
.schema-panel{display:grid;grid-template-columns:1fr 1fr;gap:18px;min-width:0}
.schema-before,.schema-after{padding:22px 18px;border:1px solid var(--line);border-radius:8px;display:flex;flex-direction:column}
.schema-after{border-color:#7d674b;background:#26271e}
.small-label{font-size:11px;letter-spacing:.4px;display:block;min-height:40px;color:var(--muted)}
.schema-lines{display:grid;gap:9px;margin:7px 0 20px}
.schema-lines i{height:7px;background:#444d45;border-radius:2px}
.schema-lines i:nth-child(3n){width:60%}
.schema-lines i:nth-child(3n + 1){width:85%}
.schema-after code{display:block;font-size:14px;color:#f1c58d;padding:8px 0;border-bottom:1px solid #494636}
.stat{margin-top:auto;padding-top:20px;display:flex;align-items:baseline;gap:8px}
.stat b{font-size:34px;font-weight:650;letter-spacing:-.03em;line-height:1}
.schema-after .stat b{color:var(--accent)}
.stat span{font-size:12px;color:var(--muted);letter-spacing:.2px}
.schema-panel p{font-size:13px;margin:10px 0 0;min-height:40px}
.levels{display:grid;grid-template-columns:repeat(4,1fr);margin:40px 0 22px;border:1px solid var(--line);border-radius:7px;overflow:hidden}
.levels>div{padding:18px 22px;border-right:1px solid var(--line)}
.levels>div:last-child{border-right:0}
.levels b{display:block;font-family:monospace;font-size:16px}
.levels span{font-size:14px;color:var(--muted)}
.recommended{background:#2c2c21;box-shadow:inset 0 2px 0 var(--accent)}
.levels em{font:normal 10px monospace;color:var(--accent);margin-left:5px}
.command{display:flex;justify-content:space-between;align-items:center;gap:18px;background:#101210;border:1px solid var(--line);padding:14px 20px;border-radius:6px;min-width:0}
.command>code{overflow-x:auto;font-size:14px;white-space:nowrap}
.command button{font-size:12px;color:var(--muted);background:#222722;border:1px solid #485046;border-radius:4px;padding:6px 12px;min-width:68px;transition:color .15s,border-color .15s}
.command button:hover{color:var(--text);border-color:var(--accent)}
.command button.copied{color:var(--green);border-color:var(--green)}
.fine{font-size:12px;margin:14px 0 0}
.fine a{text-decoration:underline;text-underline-offset:3px}

/* Permissions */
.permission-panel table{width:100%;border-collapse:collapse;font-size:14px;text-align:left}
.permission-panel th,.permission-panel td{padding:19px 18px;border-bottom:1px solid var(--line);font-weight:400}
.permission-panel thead{color:var(--muted);font-size:12px}
.permission-panel tbody th{font-family:monospace}
.permission-panel tbody tr:hover{background:#1e2220}
.allow{color:var(--green)}
.deny{color:#ddaa94}
.orange{color:var(--accent);margin-right:6px}
.permission-note{font-size:13px;margin-top:30px;border-left:2px solid #726046;padding-left:16px}

/* Screenshots */
.interface>p{max-width:550px}
.screens{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:start;margin-top:36px}
figure{margin:0;min-width:0}
.window{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--surface);box-shadow:0 20px 50px -30px rgba(0,0,0,.8)}
.titlebar{display:flex;align-items:center;gap:14px;padding:10px 14px;border-bottom:1px solid var(--line);background:#1d201f}
.dots{display:flex;gap:6px}
.dots i{display:block;width:10px;height:10px;border-radius:50%;background:#3b423e}
.titlebar code{font-size:12px;color:var(--muted)}
.window a{display:block}
.window img{display:block;width:100%;height:auto;aspect-ratio:8/5;object-fit:contain;object-position:top center}
.web img{background:#191a22}
.tui img{background:#1b1d1f}
.window figcaption{display:flex;justify-content:space-between;gap:12px;padding:12px 14px;font-size:13px;color:var(--muted);border-top:1px solid var(--line)}
.window figcaption span:first-child{color:var(--text);font-weight:600}

/* Install */
.install{background:var(--tint)}
.install-inner{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
.install .eyebrow{justify-content:start;color:#c2cbae;font-size:11px;margin-bottom:24px}
.install p{max-width:340px}
.install .panel-heading{padding-left:0;border:0}
.install-command{padding:20px}
.install-command pre{font-size:16px}
.install-links{display:flex;gap:25px;font-size:13px;margin-top:20px}

/* Footer + utilities */
footer{display:flex;align-items:center;justify-content:space-between;gap:25px;min-height:120px;font-size:13px;color:var(--muted)}
footer p{margin:0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;top:-100px;left:20px;padding:12px;background:var(--accent);color:#111;z-index:5}
.skip:focus{top:10px}

@media(max-width:900px){.wrap{width:calc(100% - 48px)}.split{gap:30px;grid-template-columns:1fr}.split p{max-width:650px}.schema-panel{max-width:600px}.install-inner{gap:35px;grid-template-columns:1fr}.screens{grid-template-columns:1fr 1fr}.kicker{font-size:12px}.hero{padding-top:50px}}
@media(max-width:600px){.wrap{width:calc(100% - 36px)}.nav{height:auto;min-height:80px;gap:20px}nav{gap:16px;font-size:12px}nav a:first-child{display:none}h1{font-size:57px}.intro{font-size:17px}.hero{padding-top:45px}.gateway{padding:24px 14px}.clients,.servers{gap:6px}.clients span,.servers span{font-size:11px;padding:8px 2px}.hub{max-width:270px}.hub-features{gap:12px;font-size:11px}.hero-foot{gap:13px;font-size:10px;padding-bottom:45px}.hero-foot span:before{margin-right:4px}.actions{gap:22px;margin-bottom:35px}.section{padding-top:48px;padding-bottom:48px}.section-top{margin-bottom:28px}.kicker{display:none}.levels{grid-template-columns:1fr 1fr}.levels>div{padding:15px}.levels>div:nth-child(2){border-right:0}.levels>div:nth-child(-n+2){border-bottom:1px solid var(--line)}.schema-panel{gap:10px}.schema-before,.schema-after{padding:18px 12px}.schema-after code{font-size:12px}.small-label{font-size:10px}.stat b{font-size:26px}.permission-panel th,.permission-panel td{padding:15px 10px;font-size:12px}.screens{grid-template-columns:1fr}.command{padding:13px;gap:10px}.command>code{font-size:12px}.install-command pre{font-size:14px}footer{flex-wrap:wrap;justify-content:flex-start;gap:16px;padding-top:28px;padding-bottom:28px}footer p{flex:1;min-width:200px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.dot,.connector,.connector:after,.connector:before,.hub{animation:none}.connector:before{display:none}.button{transition:none}}