:root{--ink:#17323a;--muted:#5e757b;--paper:#f5fbfc;--white:#fff;--line:#bfd4d8;--signal:#007f82;--signal-soft:#d6f0ef;--font-body:"Avenir Next", Avenir, "Segoe UI", sans-serif;--font-mono:"Cascadia Mono", "IBM Plex Mono", "SFMono-Regular", Consolas, monospace}*{box-sizing:border-box}html{background:var(--paper);color:var(--ink)}body{font-family:var(--font-body);margin:0}body:before{z-index:-1;background-image:linear-gradient(to right, color-mix(in srgb, var(--line) 28%, transparent) 1px, transparent 1px), linear-gradient(to bottom, color-mix(in srgb, var(--line) 28%, transparent) 1px, transparent 1px);content:"";background-size:32px 32px;position:fixed;inset:0;-webkit-mask-image:linear-gradient(#000,#0000 74%);mask-image:linear-gradient(#000,#0000 74%)}main{width:min(1180px,100% - 40px);margin:0 auto;padding:72px 0 64px}.hero{grid-template-columns:minmax(0,.85fr) minmax(440px,1.15fr);align-items:center;gap:64px;min-height:540px;display:grid}.eyebrow,.section-label,.card-bar,dt,code{font-family:var(--font-mono), monospace}.eyebrow,.section-label{color:var(--signal);letter-spacing:.12em;text-transform:uppercase;margin:0 0 18px;font-size:.75rem;font-weight:600}h1,h2,p{margin-top:0}h1{letter-spacing:-.075em;max-width:650px;margin-bottom:24px;font-size:clamp(3.9rem,7vw,7.2rem);font-weight:500;line-height:.87}.lede{max-width:580px;color:var(--muted);margin-bottom:32px;font-size:clamp(1.05rem,1.6vw,1.28rem);line-height:1.65}.sample-link{border-bottom:1px solid var(--signal);color:var(--signal);font-family:var(--font-mono), monospace;align-items:center;gap:18px;font-size:.86rem;font-weight:600;text-decoration:none;display:inline-flex}.sample-link span{transition:transform .16s}.sample-link:hover span{transform:translate(3px,-3px)}.sample-link:focus-visible{outline:3px solid var(--signal-soft);outline-offset:6px}.diagram-card{border:1px solid var(--line);background:var(--white);box-shadow:18px 18px 0 var(--signal-soft);border-radius:3px 28px 3px 3px;overflow:hidden;transform:rotate(1.2deg)}.card-bar{border-bottom:1px solid var(--line);color:var(--muted);letter-spacing:.05em;text-transform:uppercase;justify-content:space-between;padding:12px 16px;font-size:.72rem;display:flex}.status:before{background:var(--signal);content:"";border-radius:50%;width:7px;height:7px;margin-right:7px;display:inline-block}.diagram-card img{object-fit:contain;width:100%;height:auto;min-height:260px;padding:22px;display:block}.reference,.formula{border-top:1px solid var(--line);grid-template-columns:minmax(260px,.75fr) minmax(0,1.25fr);gap:48px;padding:56px 0;display:grid}h2{letter-spacing:-.055em;margin-bottom:14px;font-size:clamp(2rem,3.4vw,3.7rem);font-weight:500;line-height:1}.reference-copy,.formula>p{max-width:460px;color:var(--muted);line-height:1.6}.option-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 32px;margin:0;display:grid}.option-grid div{border-bottom:1px solid var(--line);padding:18px 0}dt{color:var(--signal);margin-bottom:8px;font-size:.82rem;font-weight:600}dd{color:var(--muted);margin:0;font-size:.92rem}.formula{grid-template-columns:minmax(260px,.75fr) minmax(0,1.25fr);align-items:end}.formula pre{border:1px solid var(--ink);background:var(--ink);color:#e4f5f4;border-radius:3px;margin:0;padding:24px;font-size:.82rem;line-height:1.7;overflow-x:auto}.formula>p{grid-column:2;margin:-24px 0 0;transform:translateY(48px)}@media (max-width:860px){main{padding-top:44px}.hero,.reference,.formula{grid-template-columns:1fr}.hero{gap:48px;min-height:auto;padding-bottom:80px}.diagram-card{transform:none}.formula>p{grid-column:1;margin:0;transform:none}}@media (max-width:560px){main{width:min(100% - 28px,1180px)}h1{font-size:clamp(3.35rem,17vw,5rem)}.option-grid{grid-template-columns:1fr}.diagram-card img{min-height:190px;padding:12px}}@media (prefers-reduced-motion:reduce){.sample-link span{transition:none}}