:root { color-scheme: dark; --bg:#090909; --line:#252329; --muted:#8e8a93; --ink:#f3f0f4; --violet:#b29cff; --green:#a7e9bd; }
* { box-sizing: border-box; }
html, body { margin:0; min-height:100%; background:var(--bg); color:var(--ink); }
body { height: 100svh; overflow: hidden; font-family:Manrope,system-ui,sans-serif; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
button { color:inherit; font:inherit; }
.topbar { height:72px; border-bottom:1px solid var(--line); display:grid; grid-template-columns:1fr auto auto; align-items:stretch; padding-left:clamp(20px,3.4vw,56px); position:relative; z-index:5; }
.brand { display:flex; align-items:center; gap:11px; font:500 14px/1 DM Mono,monospace; letter-spacing:.12em; }
.brand-mark { width:19px; height:19px; display:grid; grid-template-columns:1fr 1fr; gap:2px; transform:rotate(45deg); }
.brand-mark i { background:var(--ink); display:block; }.brand-mark i:last-child { opacity:.35; }
.topbar nav { display:flex; }
.topbar nav a,.nav-cta { min-width:108px; padding:0 24px; display:grid; place-items:center; border-left:1px solid var(--line); font:500 11px/1 DM Mono,monospace; letter-spacing:.08em; color:var(--muted); transition:.2s ease; }
.topbar nav a:hover { color:var(--ink); background:#111; }
.nav-cta { min-width:154px; background:var(--ink); color:#0a0a0a; gap:10px; grid-auto-flow:column; }.nav-cta:hover { background:var(--violet); }
main { height:calc(100svh - 110px); display:grid; grid-template-columns:44% 56%; }
.hero,.workbench { min-height:0; position:relative; }
.hero { padding:clamp(34px,5vh,68px) clamp(28px,4vw,64px) 24px; display:flex; flex-direction:column; border-right:1px solid var(--line); overflow:hidden; }
.hero::before { content:""; position:absolute; inset:0; background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px); background-size:44px 44px; opacity:.18; mask-image:linear-gradient(to bottom right,transparent 15%,#000 100%); pointer-events:none; }
.hero-noise { position:absolute; width:360px; height:360px; right:-90px; top:10%; border-radius:50%; background:radial-gradient(circle,rgba(178,156,255,.15),transparent 68%); filter:blur(18px); }
.eyebrow { position:relative; font:500 10px/1 DM Mono,monospace; letter-spacing:.1em; color:var(--muted); margin-bottom:auto; }.eyebrow span { color:var(--violet); margin-right:12px; }
h1 { position:relative; font-size:clamp(50px,5.6vw,88px); line-height:.92; letter-spacing:-.065em; margin:0 0 28px; font-weight:500; }h1 em { color:var(--muted); font-style:normal; }
.lede { position:relative; max-width:600px; color:#aaa6ae; font-size:clamp(14px,1.08vw,17px); line-height:1.65; margin:0 0 28px; }
.actions { position:relative; display:flex; gap:10px; align-items:stretch; }
.primary { min-width:158px; padding:15px 18px; display:flex; justify-content:space-between; align-items:center; background:var(--ink); color:#080808; font-size:13px; font-weight:600; transition:.2s ease; }.primary:hover { background:var(--violet); }
.install { cursor:pointer; min-width:295px; background:rgba(12,12,13,.82); border:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; padding:0 14px; }.install code { color:#c8c4cb; font:11px/1 DM Mono,monospace; }.install code b { color:var(--violet); font-weight:500; }.copy-label { color:#68646c; font:9px/1 DM Mono,monospace; letter-spacing:.08em; }
.proof { position:relative; display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); margin-top:auto; }.proof>div { padding:18px 10px 0 0; display:grid; grid-template-columns:auto 1fr; column-gap:8px; }.proof>div+div { border-left:1px solid var(--line); padding-left:14px; }.proof span { color:#565159; font:9px/1 DM Mono,monospace; }.proof strong { font:500 9px/1 DM Mono,monospace; letter-spacing:.06em; }.proof small { grid-column:2; color:#747078; font-size:9px; line-height:1.35; margin-top:5px; }
.workbench { background:#080809; display:grid; grid-template-rows:48px 43px 1fr 42px; overflow:hidden; }.workbench::after { content:"NOIR"; position:absolute; right:-22px; bottom:-54px; color:#0d0d0f; font-size:210px; line-height:1; font-weight:600; letter-spacing:-.09em; pointer-events:none; }
.workbench-head { border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; padding:0 22px; color:#7c7880; font:10px/1 DM Mono,monospace; }.workbench-head div { display:flex; gap:6px; }.workbench-head i { width:6px; height:6px; border-radius:50%; background:#323036; }
.code-tabs { display:flex; border-bottom:1px solid var(--line); padding:0 20px; gap:30px; }.code-tabs button { position:relative; border:0; background:none; padding:0; font:500 9px/1 DM Mono,monospace; letter-spacing:.1em; color:#5f5b63; cursor:pointer; }.code-tabs button.active { color:var(--ink); }.code-tabs button.active::after { content:""; position:absolute; bottom:-1px; left:0; width:100%; height:1px; background:var(--violet); box-shadow:0 0 12px var(--violet); }
pre { position:relative; z-index:1; margin:0; padding:clamp(26px,5vh,64px) clamp(24px,4vw,64px); overflow:auto; scrollbar-width:none; }pre code { font:clamp(11px,1vw,14px)/1.9 DM Mono,monospace; color:#c7c3ca; }.violet { color:var(--violet); }.green { color:var(--green); }
.runtime-strip { position:relative; z-index:1; border-top:1px solid var(--line); display:flex; align-items:center; gap:26px; padding:0 20px; color:#5d5961; font:9px/1 DM Mono,monospace; letter-spacing:.08em; }.runtime-strip span:first-child { color:var(--green); margin-right:auto; }.runtime-strip i { width:5px; height:5px; display:inline-block; background:var(--green); border-radius:50%; margin-right:7px; box-shadow:0 0 8px var(--green); }
footer { height:38px; border-top:1px solid var(--line); padding:0 clamp(20px,3.4vw,56px); display:flex; align-items:center; justify-content:space-between; color:#57535b; font:9px/1 DM Mono,monospace; letter-spacing:.08em; }footer div { display:flex; gap:28px; }footer a:hover { color:var(--ink); }
@media (max-height:710px) and (min-width:801px) { .topbar{height:60px}main{height:calc(100svh - 94px)}footer{height:34px}.hero{padding-top:28px}h1{font-size:clamp(45px,5vw,70px);margin-bottom:18px}.lede{margin-bottom:18px} }
@media (max-width:800px) { body{height:auto;min-height:100svh;overflow:auto}.topbar{height:62px;padding-left:18px;grid-template-columns:1fr auto}.topbar nav{display:none}.nav-cta{min-width:134px;padding:0 16px}main{height:auto;display:block}.hero{min-height:calc(100svh - 62px);padding:34px 20px 20px;border-right:0}.eyebrow{margin-bottom:18vh}h1{font-size:clamp(54px,17vw,80px)}.actions{flex-direction:column}.primary,.install{min-height:48px;width:100%;min-width:0}.proof{margin-top:48px}.proof small{white-space:normal}.workbench{min-height:620px;border-top:1px solid var(--line)}footer{display:none} }
@media (max-width:480px) { .proof{grid-template-columns:1fr}.proof>div,.proof>div+div{border-left:0;border-top:1px solid var(--line);padding:12px 0}.proof>div:first-child{border-top:0} }
@media (prefers-reduced-motion:reduce) { * { scroll-behavior:auto!important; transition:none!important; } }