:root { color-scheme: dark; --ink:#f5f1e8; --muted:#9ca3af; --line:#30343d; --blue:#79a8ff; --orange:#ff8a4c; --black:#090b10; font-family: Inter, ui-sans-serif, system-ui, sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--black); }
a { color:inherit; text-decoration:none; }
.hero { min-height:94vh; position:relative; overflow:hidden; padding:0 6vw; background:radial-gradient(circle at 76% 45%, #192e52 0, #0f1727 25%, #090b10 58%); }
nav { height:82px; display:flex; align-items:center; gap:2rem; border-bottom:1px solid var(--line); font-size:.76rem; letter-spacing:.13em; text-transform:uppercase; position:fixed; top:0; left:6vw; right:6vw; z-index:20; background:rgba(9,11,16,.78); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); }
nav .brand { margin-right:auto; font-weight:800; }
.hero-copy { position:relative; z-index:2; padding:14vh 0 10vh; max-width:850px; }
.eyebrow,.section-number,.card-head { color:var(--blue); font-size:.72rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; }
h1 { font-size:clamp(3.8rem,9vw,8.7rem); letter-spacing:-.07em; line-height:.82; margin:.32em 0; font-weight:700; }
h1 span { color:transparent; -webkit-text-stroke:1px var(--ink); }
.lead { max-width:550px; color:#c4c8d0; font-size:1.15rem; line-height:1.7; }
.button,button { display:inline-block; margin-top:1.5rem; padding:1rem 1.25rem; background:var(--orange); color:#100b08; border:0; font-weight:800; cursor:pointer; }
.orbit { position:absolute; width:42vw; aspect-ratio:1; border:1px solid #4b5f80; border-radius:50%; right:-3vw; top:18%; transform:rotate(-22deg); }
.orbit:before,.orbit:after { content:""; position:absolute; inset:15%; border:1px solid #34435b; border-radius:50%; }
.orbit:after { inset:34%; }
.orbit i { width:24px; height:24px; border-radius:50%; background:var(--orange); position:absolute; left:8%; top:18%; box-shadow:0 0 36px var(--orange); }
.orbit b { width:90px; height:90px; border-radius:50%; background:#ffe2a8; position:absolute; left:calc(50% - 45px); top:calc(50% - 45px); box-shadow:0 0 80px #ffb44c88; }
main { padding:8rem 6vw; }
section { scroll-margin-top:110px; }
.intro { display:grid; grid-template-columns:1fr 1.4fr 1fr; gap:4vw; align-items:start; margin-bottom:4rem; }
h2 { font-size:clamp(2.5rem,5vw,5rem); letter-spacing:-.055em; line-height:.98; margin:0; }
.intro>p:last-child { color:var(--muted); line-height:1.7; }
.lab-grid { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); border-left:1px solid var(--line); }
.card { min-height:540px; padding:2rem; border-right:1px solid var(--line); border-bottom:1px solid var(--line); display:flex; flex-direction:column; }
.card-head { display:flex; justify-content:space-between; }
.card h3 { font-size:2rem; margin:3rem 0 1rem; }
.card h3 small { display:block; margin-top:.45rem; color:var(--blue); font-size:.68rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; }
.card>p:not(.formula) { color:var(--muted); line-height:1.6; min-height:78px; }
label { display:block; margin-top:1rem; color:#c7cbd2; font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; }
label span { float:right; color:var(--muted); }
input { width:100%; margin-top:.5rem; padding:.9rem .8rem; color:var(--ink); background:#11151d; border:1px solid var(--line); font:inherit; font-size:1rem; }
.split { display:grid; grid-template-columns:1fr 1fr; gap:.8rem; }
.card button { width:100%; }
output { display:block; font-family:ui-monospace, monospace; color:#bcd0ff; padding:1.2rem 0; font-size:1.25rem; min-height:66px; }
output.error { color:#ff8a7d; font-size:.9rem; }
.formula { margin-top:auto; border-top:1px solid var(--line); padding-top:1.2rem; color:#8a91a0; font-family:Georgia,serif; }
.method { display:grid; grid-template-columns:1fr 1.4fr; gap:8vw; padding-top:10rem; }
.method ol { margin:0; padding:0; list-style:none; counter-reset:item; }
.method li { display:grid; grid-template-columns:140px 1fr; gap:2rem; padding:1.5rem 0; border-top:1px solid var(--line); }
.method li span { color:var(--muted); }
footer { display:flex; justify-content:space-between; padding:2rem 6vw; border-top:1px solid var(--line); color:var(--muted); font-size:.8rem; }
@media (max-width:850px) { nav{height:68px;gap:1rem;overflow-x:auto;font-size:.62rem;white-space:nowrap}.hero{min-height:780px}.orbit{width:82vw;right:-35vw;top:42%}.intro,.method{grid-template-columns:1fr}.lab-grid{grid-template-columns:1fr}.card{min-height:auto}.formula{margin-top:2rem}.method{padding-top:6rem}section{scroll-margin-top:90px} }