:root { --ink:#11110f; --muted:#686762; --paper:#f5f5f1; --line:#deddd6; --blue:#1769ff; --white:#fff; --font:"SF Pro Display","SF Pro Text",Inter,-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--ink); background:var(--white); font-family:var(--font); -webkit-font-smoothing:antialiased; } a { color:inherit; text-underline-offset:3px; } :focus-visible { outline:3px solid rgba(23,105,255,.32); outline-offset:4px; }
.skip { position:fixed; top:12px; left:12px; z-index:10; padding:10px 13px; background:var(--ink); color:#fff; border-radius:8px; transform:translateY(-180%); } .skip:focus { transform:translateY(0); }
header { position:sticky; z-index:4; top:0; display:flex; align-items:center; justify-content:space-between; height:74px; padding:0 max(32px,calc((100vw - 1120px)/2)); border-bottom:1px solid var(--line); background:rgba(255,255,255,.92); backdrop-filter:blur(12px); } .brand { display:inline-flex; align-items:center; gap:8px; font-size:20px; font-weight:760; letter-spacing:-.03em; text-decoration:none; white-space:nowrap; } .brand svg { width:31px; height:31px; } .brand small { color:var(--muted); font-size:8px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; vertical-align:middle; } .header-actions { display:flex; align-items:center; gap:18px; } nav { display:flex; gap:22px; } nav a { color:#4f4e49; font-size:14px; font-weight:650; text-decoration:none; } nav a:hover { color:var(--blue); } .language-toggle { min-width:42px; height:32px; padding:0 9px; border:1px solid var(--line); border-radius:7px; background:transparent; color:#4f4e49; font:700 12px/1 var(--font); cursor:pointer; } .language-toggle:hover { border-color:var(--blue); color:var(--blue); }
main { width:min(920px,calc(100% - 48px)); margin:0 auto; } section { padding:78px 0; border-top:1px solid var(--line); } .intro { padding:100px 0 94px; border:0; } .tag,.section-title p { margin:0 0 15px; color:var(--blue); font-size:12px; font-weight:780; letter-spacing:.09em; } h1,h2,h3,p { margin-top:0; } h1 { max-width:780px; margin-bottom:22px; font-size:clamp(44px,7vw,76px); font-weight:760; letter-spacing:-.055em; line-height:.97; } .intro>p:not(.tag) { max-width:660px; margin-bottom:30px; color:var(--muted); font-size:18px; line-height:1.65; } .actions { display:flex; flex-wrap:wrap; gap:10px; } .primary,.secondary { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:0 16px; border-radius:8px; font-size:14px; font-weight:720; text-decoration:none; } .primary { background:var(--blue); color:#fff; } .primary:hover { background:#075beb; } .secondary { border:1px solid #c9c7bf; } .secondary:hover { border-color:#77756e; background:var(--paper); } .inline { margin-top:8px; }
.section-title { display:flex; align-items:baseline; gap:15px; margin-bottom:27px; } .section-title p { min-width:22px; margin:0; } h2 { font-size:clamp(30px,4vw,47px); font-weight:740; letter-spacing:-.045em; line-height:1.04; } .steps { display:grid; gap:0; padding:0; margin:0; list-style:none; border-top:1px solid var(--line); } .steps li { display:grid; grid-template-columns:190px minmax(0,1fr); gap:22px; padding:22px 0; border-bottom:1px solid var(--line); } .steps strong { font-size:16px; } .steps span,.body-copy { max-width:640px; color:var(--muted); font-size:15px; line-height:1.68; } code { padding:2px 5px; border-radius:4px; background:var(--paper); color:#45443f; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.9em; overflow-wrap:anywhere; } .notice { margin:22px 0 0; padding:14px 16px; border:1px solid #c9d7fb; border-radius:8px; background:#f4f7ff; color:#31507e; font-size:14px; line-height:1.55; }
.cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; } article { padding:21px; border:1px solid var(--line); border-radius:11px; background:var(--paper); } article h3 { margin-bottom:10px; font-size:17px; letter-spacing:-.025em; } article p { margin:0; color:var(--muted); font-size:14px; line-height:1.6; } .body-copy { margin:0 0 18px; } .workflow-intro { margin-bottom:28px; } .workflow-video { overflow:hidden; border:1px solid var(--line); border-radius:12px; background:#151515; } .workflow-video video { display:block; width:100%; aspect-ratio:16/9; background:#151515; object-fit:contain; } .intro-workflow-video { margin-top:38px; } .workflow-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; } .workflow-step { min-width:0; margin:0; } .workflow-step img,.picker-overview img { display:block; width:100%; height:auto; border:1px solid var(--line); border-radius:10px; background:var(--paper); } .workflow-step figcaption { padding:14px 2px 0; } .workflow-step h3 { margin:0 0 7px; font-size:17px; letter-spacing:-.025em; } .workflow-step p { margin:0; color:var(--muted); font-size:14px; line-height:1.6; } .picker-overview { margin:30px 0 6px; } .install-actions { display:flex; align-items:flex-start; gap:18px; margin-top:22px; } .install-actions .inline { flex:0 0 auto; margin:0; } .install-actions .notice { flex:1; margin:0; } footer { display:flex; gap:18px; width:min(920px,calc(100% - 48px)); padding:28px 0; margin:0 auto; border-top:1px solid var(--line); color:var(--muted); font-size:13px; } footer a { text-decoration:none; } footer a:first-of-type { margin-left:auto; }
@media (max-width:640px) { header { height:64px; padding:0 18px; } .header-actions { gap:10px; } .header-actions nav { display:none; } .brand { font-size:18px; } .brand small { display:none; } .language-toggle { min-width:38px; } main { width:calc(100% - 36px); } .intro { padding:70px 0; } section { padding:60px 0; } .steps li { grid-template-columns:1fr; gap:7px; } .cards,.workflow-steps { grid-template-columns:1fr; } .section-title { gap:10px; } .install-actions { flex-direction:column; gap:12px; } footer { width:calc(100% - 36px); flex-wrap:wrap; } footer a:first-of-type { margin-left:0; } }