@import url('https://fonts.googleapis.com/css2?family=Geist+Mono:wght@400;500&family=Geist:wght@400;500;600;700&display=swap');

:root { color-scheme: dark; --bg:#101111; --panel:#161818; --line:#303333; --ink:#f2f4eb; --muted:#a3aaa2; --lime:#ccfb63; --mono:"Geist Mono",monospace; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:var(--ink); font-family:Geist,Inter,system-ui,sans-serif; }
a { color:inherit; text-decoration:none; }
button { font:inherit; cursor:pointer; }
:focus-visible { outline:2px solid var(--lime); outline-offset:5px; }
.frame { width:min(100% - 104px, 1320px); margin:auto; }
.masthead { display:flex; align-items:center; justify-content:space-between; min-height:82px; border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; font-size:27px; font-weight:700; letter-spacing:-.07em; }
.brand-dot,.mark,h2 span { color:var(--lime); }
.mark { margin-right:12px; font-size:30px; }
nav { display:flex; gap:34px; font-size:14px; color:var(--muted); }
nav a:hover,footer a:hover { color:var(--lime); }
nav span { color:var(--lime); margin-left:4px; }
.hero { position:relative; display:grid; grid-template-columns:1.1fr 1fr; align-items:center; min-height:590px; padding:74px 0 82px; gap:22px; }
.hero-copy { z-index:1; }
.eyebrow,.visual-label { font:500 11px var(--mono); text-transform:uppercase; letter-spacing:.13em; }
.eyebrow { display:flex; align-items:center; gap:11px; color:var(--lime); margin:0 0 26px; }
.eyebrow span { width:18px; height:1px; background:currentColor; }
h1,h2 { letter-spacing:-.077em; margin:0; }
h1 { font-size:clamp(52px,6.5vw,105px); line-height:.98; font-weight:600; }
.title-line { display:block; color:#b9c1b5; }
.intro { max-width:32ch; font-size:clamp(16px,1.6vw,20px); color:var(--muted); line-height:1.6; margin:28px 0; }
.action { display:inline-flex; gap:22px; align-items:center; padding:13px 16px; background:var(--lime); color:#17200d; border-radius:4px; font-weight:650; font-size:14px; transition:background .2s; }
.action:hover { background:#e4ffa6; }
.visual { position:relative; height:clamp(360px,39vw,500px); overflow:hidden; border:1px solid var(--line); border-radius:7px; background:#121514; }
canvas { display:block; width:100%; height:100%; }
.visual-label { position:absolute; left:17px; right:17px; bottom:14px; display:flex; align-items:center; justify-content:space-between; color:var(--muted); }
.visual-label button { background:#171b19; border:1px solid var(--line); color:var(--lime); border-radius:3px; min-width:38px; min-height:36px; }
.visual-label button:hover { border-color:var(--lime); }
.stack,.status { padding:45px 0 56px; border-top:1px solid var(--line); scroll-margin-top:18px; }
h2 { font-size:clamp(42px,5vw,69px); line-height:1.03; margin-bottom:25px; font-weight:600; }
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; align-items:start; }
details { background:var(--panel); border:1px solid var(--line); border-radius:6px; overflow:hidden; }
details[open] { border-color:#708644; }
summary { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:14px; padding:20px; cursor:pointer; font-weight:600; font-size:22px; list-style:none; }
summary::-webkit-details-marker { display:none; }
summary:hover { color:var(--lime); }
summary:focus-visible { outline-offset:-3px; }
.tech-icon { display:grid; place-items:center; width:40px; height:40px; background:#26311b; color:var(--lime); border-radius:4px; font-size:24px; }
.toggle { color:var(--lime); font:400 22px var(--mono); }
.toggle::before { content:"+"; }
details[open] .toggle::before { content:"−"; }
details p { margin:0; padding:0 20px 22px; color:var(--muted); line-height:1.6; }
.status-row { display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:20px; background:var(--panel); border:1px solid var(--line); border-radius:6px; padding:18px 20px; }
.status-name { display:flex; align-items:center; gap:11px; font-weight:600; }
.signal { width:8px; height:8px; border-radius:50%; background:var(--muted); }
.signal.up { background:var(--lime); box-shadow:0 0 11px #ccfb6370; }
.signal.down { background:#ffa889; }
#health,#measurement { font:400 12px var(--mono); color:var(--muted); }
#health { color:var(--ink); }
footer { display:flex; justify-content:space-between; padding:25px 0 35px; border-top:1px solid var(--line); color:var(--muted); font-size:14px; }
@media (max-width:980px) { .frame { width:calc(100% - 56px); } .hero { padding:55px 0; min-height:auto; } }
@media (max-width:720px) { .frame { width:calc(100% - 36px); } .masthead { min-height:68px; } nav { gap:16px; } .hero { grid-template-columns:1fr; gap:33px; } .visual { height:360px; } h1 { font-size:clamp(47px,11.6vw,75px); } .cards { grid-template-columns:1fr; } }
@media (max-width:425px) { .visual { height:300px; } .status-row { grid-template-columns:1fr auto; gap:10px; padding:14px; } #measurement { grid-column:1 / -1; padding-left:19px; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } * { transition:none!important; } }