:root { color-scheme: dark; --bg:#0b0c0e; --panel:#111317; --line:#25282e; --text:#f2f5f4; --muted:#8b9198; --green:#b8f36b; --cyan:#68d7d5; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:var(--text); font-family:"Segoe UI Variable","Segoe UI",sans-serif; }
a { color:inherit; text-decoration:none; }
header { height:74px; max-width:1280px; margin:auto; padding:0 30px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
.logo { font-size:18px; font-weight:800; letter-spacing:-.03em; }
.logo span, footer>span { color:var(--green); font-family:Consolas,monospace; }
nav { display:flex; gap:28px; color:var(--muted); font-size:12px; }
nav a:hover { color:var(--text); }
.github { padding:9px 13px; border:1px solid var(--line); border-radius:8px; color:#c8ccca; font-size:11px; }
main { max-width:1280px; margin:auto; padding:0 30px; }
.hero { min-height:610px; padding:105px 0 80px; position:relative; border-bottom:1px solid var(--line); overflow:hidden; }
.hero:after { content:'{ }'; position:absolute; right:4%; top:100px; color:#111b16; font:800 290px/1 Consolas,monospace; letter-spacing:-.18em; transform:rotate(-5deg); z-index:-1; }
.version,.label { color:var(--green); text-transform:uppercase; font-size:10px; font-weight:700; letter-spacing:.18em; }
.version { display:inline-block; padding:7px 10px; border:1px solid rgba(184,243,107,.25); border-radius:99px; background:rgba(184,243,107,.05); }
.hero h1 { margin:24px 0 20px; font-size:clamp(66px,9vw,125px); line-height:.82; letter-spacing:-.075em; }
.hero h1 em { font-style:normal; color:transparent; -webkit-text-stroke:1px #697067; }
.hero>p { max-width:580px; color:var(--muted); font-size:16px; line-height:1.7; }
.hero-actions { display:flex; align-items:center; gap:24px; margin-top:32px; font-size:12px; }
.primary,.playground form button { padding:12px 18px; border-radius:7px; background:var(--green); color:#10130d; font-weight:800; }
.signal { position:absolute; right:0; bottom:40px; display:flex; align-items:center; gap:9px; font-size:10px; color:var(--muted); }
.signal i { width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 12px var(--green); }
.signal b { margin-left:10px; color:#c2c7c4; }
.grid { display:grid; grid-template-columns:220px 1fr; gap:70px; padding:75px 0 100px; }
.toc { align-self:start; position:sticky; top:35px; display:grid; gap:13px; }
.toc a { color:var(--muted); font-size:11px; }
.toc a:hover { color:var(--green); }
.note { display:grid; gap:5px; margin-top:20px; padding:15px; border-left:2px solid var(--green); background:#10140f; }
.note b { font-size:11px; }.note span { color:var(--muted); font-size:9px; line-height:1.5; }
.docs { max-width:850px; }
.docs section { padding-bottom:75px; margin-bottom:75px; border-bottom:1px solid var(--line); }
.docs h2 { margin:11px 0 14px; font-size:38px; letter-spacing:-.045em; }
.docs p { max-width:680px; color:var(--muted); line-height:1.7; font-size:13px; }
.docs p code { color:var(--cyan); font-family:Consolas,monospace; }
.code { margin-top:24px; border:1px solid var(--line); border-radius:11px; overflow:hidden; background:#0e1013; }
.code>div { display:flex; justify-content:space-between; align-items:center; padding:9px 13px; border-bottom:1px solid var(--line); color:#6f757b; font-size:9px; }
.code button { border:0; background:transparent; color:#777e84; font-size:9px; cursor:pointer; }
pre { margin:0; padding:22px; overflow:auto; color:#d9dcda; font:12px/1.75 Consolas,"Cascadia Code",monospace; }
pre i { color:var(--green); font-style:normal; }
.feature-row { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:25px; }
.feature-row article { padding:18px; border:1px solid var(--line); border-radius:9px; }
.feature-row b,.feature-row span { display:block; }.feature-row b { font-size:12px; }.feature-row span { margin-top:6px; color:var(--muted); font-size:9px; line-height:1.55; }
.playground form { display:flex; gap:8px; margin-top:24px; }
.playground input { flex:1; min-width:0; padding:13px 15px; border:1px solid var(--line); border-radius:7px; background:#0e1013; color:var(--text); outline:0; }
.playground input:focus { border-color:var(--green); }
.playground form button { border:0; cursor:pointer; }.playground form button span { margin-left:10px; opacity:.55; font-size:9px; }
.results { min-height:155px; display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:15px; }
.results>p { grid-column:1/-1; display:grid; place-items:center; min-height:130px; border:1px dashed var(--line); border-radius:9px; }
.result { display:flex; gap:10px; padding:9px; border:1px solid var(--line); border-radius:9px; background:#0f1114; }
.result img { width:50px; height:69px; object-fit:cover; border-radius:5px; }.result b { display:block; font-size:10px; line-height:1.35; }.result small { display:block; margin-top:5px; color:var(--muted); font-size:8px; }
footer { max-width:1280px; margin:auto; padding:30px; border-top:1px solid var(--line); display:flex; justify-content:space-between; color:var(--muted); font-size:10px; }
footer a { color:var(--green); }
@media(max-width:720px){ header nav{display:none} header,main{padding-left:18px;padding-right:18px}.hero{min-height:540px;padding-top:75px}.hero h1{font-size:64px}.signal{display:none}.grid{grid-template-columns:1fr;padding-top:45px}.toc{display:none}.docs h2{font-size:31px}.feature-row,.results{grid-template-columns:1fr}.playground form{flex-direction:column}footer{margin-top:0;flex-direction:column;gap:10px;padding:24px 18px} }