:root { color-scheme: light dark; --bg:#f5f5f2; --ink:#171817; --muted:#686c68; --line:#d7d9d2; --panel:#fff; --accent:#bd3029; --max:1080px; }
@media (prefers-color-scheme: dark) { :root { --bg:#111312; --ink:#f2f3ef; --muted:#a4aaa3; --line:#303530; --panel:#191c1a; --accent:#ff6558; } }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:var(--bg); color:var(--ink); font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; line-height:1.5; } a { color:inherit; } .site-header, main, footer { max-width:var(--max); margin:auto; padding-left:clamp(20px,5vw,56px); padding-right:clamp(20px,5vw,56px); } .site-header { height:76px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); } .brand { display:flex; align-items:center; gap:10px; text-decoration:none; font-weight:700; letter-spacing:-.02em; } .brand img { border-radius:8px; } nav { display:flex; gap:12px; font-size:14px; color:var(--muted); } nav a { align-items:center; display:inline-flex; min-height:44px; padding:0 6px; text-decoration:none; } nav a:hover, nav a:focus-visible { color:var(--ink); } .hero { padding:clamp(78px,13vw,150px) 0 clamp(76px,11vw,124px); max-width:760px; } .eyebrow { color:var(--accent); font-size:12px; font-weight:750; letter-spacing:.12em; text-transform:uppercase; margin:0 0 18px; } h1,h2,h3,p { margin-top:0; } h1 { font-size:clamp(44px,7vw,78px); line-height:.98; letter-spacing:-.065em; margin-bottom:26px; } h2 { font-size:clamp(27px,4vw,42px); line-height:1.05; letter-spacing:-.045em; margin-bottom:16px; } h3 { font-size:18px; margin-bottom:8px; letter-spacing:-.02em; } .lede { color:var(--muted); max-width:610px; font-size:clamp(17px,2.4vw,21px); line-height:1.45; margin-bottom:30px; } .actions,.release-links { display:flex; flex-wrap:wrap; gap:10px; } .button { min-height:46px; display:inline-flex; align-items:center; justify-content:center; border-radius:9px; padding:0 18px; font-size:14px; font-weight:700; text-decoration:none; border:1px solid var(--line); } .button.primary { background:var(--ink); color:var(--bg); border-color:var(--ink); } .button.secondary { background:transparent; } .button:focus-visible, a:focus-visible { outline:3px solid var(--accent); outline-offset:3px; } .limitation { color:var(--muted); font-size:13px; margin:26px 0 0; } section { border-top:1px solid var(--line); padding:clamp(60px,8vw,96px) 0; } .modes { display:grid; grid-template-columns:minmax(190px,.65fr) 1.35fr; gap:clamp(30px,7vw,100px); } .mode-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; } .mode-grid article { background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:22px 18px 24px; min-height:205px; } .mode-grid p, .install p { color:var(--muted); font-size:14px; } .mode-number { color:var(--accent); font:700 12px ui-monospace,SFMono-Regular,Menlo,monospace; } .install { display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(30px,8vw,110px); } .release-links { margin:24px 0 12px; } .release-note { font-size:12px !important; } .steps { list-style:none; counter-reset:steps; padding:0; margin:0; display:grid; gap:12px; } .steps li { counter-increment:steps; display:grid; grid-template-columns:28px minmax(0,1fr); gap:12px; align-items:start; border-bottom:1px solid var(--line); padding:0 0 14px; font-size:15px; } .steps li::before { content:counter(steps,decimal-leading-zero); color:var(--accent); font:700 12px ui-monospace,SFMono-Regular,Menlo,monospace; padding-top:3px; } .step-content { min-width:0; } code { font:13px ui-monospace,SFMono-Regular,Menlo,monospace; color:var(--muted); overflow-wrap:anywhere; } .steps code { display:block; margin-bottom:5px; } .docs { display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(30px,8vw,110px); } .doc-links { display:grid; grid-template-columns:repeat(2,1fr); gap:0 20px; } .doc-links a { padding:13px 0; border-bottom:1px solid var(--line); text-decoration:none; font-weight:650; } .doc-links span { color:var(--accent); float:right; } footer { border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:20px; padding-top:24px; padding-bottom:32px; color:var(--muted); font-size:12px; } @media (max-width:700px) { nav { gap:1px; } .modes,.install,.docs { grid-template-columns:1fr; gap:28px; } .mode-grid { grid-template-columns:1fr; } .mode-grid article { min-height:0; } .doc-links { grid-template-columns:1fr; } } @media (max-width:375px) { .site-header { height:64px; } nav a:first-child { display:none; } h1 { font-size:43px; } .hero { padding-top:65px; } .release-links .button { width:100%; } footer { flex-direction:column; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } }
.policy { max-width:760px; margin:0 auto; padding-top:clamp(64px,10vw,120px); padding-bottom:clamp(64px,10vw,120px); }
.policy h1 { max-width:14ch; margin:12px 0 28px; font-size:clamp(2.3rem,7vw,4.8rem); line-height:.98; letter-spacing:-.055em; }
.policy h2 { margin:40px 0 12px; font-size:1.25rem; }
.policy p { max-width:66ch; color:var(--muted); }
.policy a { color:var(--ink); font-weight:700; }