:root{color-scheme:dark;--ink:#edf5f3;--muted:#a4babf;--base:#081115;--panel:#111e24;--line:#2a4148;--teal:#72d5cb;--violet:#b4a0ef;font-family:"Avenir Next",Avenir,"Segoe UI",sans-serif;color:var(--ink);background:var(--base)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0}a{color:inherit;text-underline-offset:.25em}a:hover{color:var(--teal)}a:focus-visible{outline:3px solid var(--violet);outline-offset:6px}.wrap{width:min(1240px,calc(100% - 80px));margin-inline:auto}.skip{position:absolute;top:-100px;left:20px;padding:12px;background:var(--teal);color:var(--base)}.skip:focus{top:10px;z-index:3}
.masthead{display:flex;justify-content:space-between;align-items:center;min-height:112px;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:14px;font-family:"DIN Condensed","Arial Narrow",sans-serif;font-size:34px;font-weight:700;text-decoration:none}.brand-mark{display:flex;align-items:end;gap:4px;height:29px}.brand-mark i{display:block;width:6px;background:var(--teal);height:14px}.brand-mark i:nth-child(2){height:29px}.brand-mark i:nth-child(3){height:21px}nav{display:flex;align-items:center;gap:30px;font-size:15px}nav a{text-decoration:none}.nav-demo{border:1px solid var(--line);padding:12px 18px}
.hero{display:grid;grid-template-columns:1.1fr 1fr;gap:64px;align-items:center;padding-block:84px 64px}h1,h2{font-family:"DIN Condensed","Avenir Next Condensed","Arial Narrow",sans-serif;font-weight:600;margin:0;line-height:.98;letter-spacing:-.035em}h1{font-size:clamp(68px,8.5vw,128px)}.hero-copy>p:first-child{font-size:24px;line-height:1.5;margin:0 0 22px}.intro{color:var(--muted);font-size:18px;line-height:1.65;max-width:39ch}.actions{display:flex;gap:26px;align-items:center;flex-wrap:wrap;margin-top:30px}.button{display:inline-block;background:var(--teal);color:var(--base);font-weight:650;text-decoration:none;padding:16px 24px;border:1px solid var(--teal)}.button:hover{background:var(--ink);color:var(--base)}.text-link{font-size:16px}.aside{font-size:13px;color:var(--muted);margin-top:18px;line-height:1.6}
.preview{margin-block:0 96px}.preview>a{display:block;border:1px solid var(--line);padding:8px;background:var(--panel)}.preview img{display:block;width:100%;height:auto}.preview figcaption{display:flex;justify-content:space-between;gap:20px;margin-top:14px;color:var(--muted);font-size:13px;line-height:1.6}.preview figcaption a{color:var(--teal)}h2{font-size:clamp(42px,4.3vw,62px);line-height:1.08;letter-spacing:-.025em}.connections{display:grid;grid-template-columns:1fr 1.1fr;gap:80px;padding-bottom:76px}.section-intro p,.start p{font-size:17px;line-height:1.7;color:var(--muted);max-width:43ch}.connection-list{margin:0}.connection-list>div{border-top:1px solid var(--line);padding:24px 0}.connection-list>div:first-child{padding-top:0;border:0}dt{font-size:21px;margin-bottom:9px;color:var(--teal)}dd{margin:0;line-height:1.7;color:var(--muted);font-size:16px}.start{border-top:1px solid var(--line);padding-block:72px 88px;display:grid;grid-template-columns:1fr 1.1fr;gap:80px}.start .button{margin-top:18px}.notes p{margin:0 0 26px;max-width:none}.notes strong{color:var(--ink);font-weight:600}.notes a{color:var(--violet)}footer{display:flex;justify-content:space-between;gap:24px;border-top:1px solid var(--line);padding-block:28px 38px;color:var(--muted);font-size:13px;line-height:1.7}footer div{display:flex;gap:24px}
@media(max-width:800px){.wrap{width:calc(100% - 40px)}.masthead{min-height:88px}.brand{font-size:28px}nav{gap:18px}nav>a:first-child{display:none}.hero{grid-template-columns:1fr;gap:30px;padding-block:48px}.hero-copy>p:first-child{font-size:22px}.intro{max-width:48ch}h1{font-size:84px}.preview{margin-bottom:60px}.preview figcaption{display:block}.preview figcaption a{display:block;margin-top:6px}.connections,.start{grid-template-columns:1fr;gap:28px;padding-bottom:48px}.start{padding-top:48px}.connection-list>div:first-child{border-top:1px solid var(--line);padding-top:24px}footer{flex-direction:column;gap:12px}.section-intro p{max-width:none}}
@media(max-width:430px){nav{gap:14px;font-size:13px}.nav-demo{padding:9px 11px}.brand{gap:9px;font-size:25px}.brand-mark{gap:3px}h1{font-size:74px}.actions{gap:20px}.preview>a{padding:3px}.hero-copy>p:first-child{font-size:20px}footer div{gap:20px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}