:root{--accent:#e0a9a2;--accent-ink:#3a2320;--accent-text:#9a4a40;--bg:#faf7f5;--surface:#fff;--surface-2:#f3eeeb;--line:#e6dedb;--ink:#2a2422;--ink-soft:#6b5f5b;--code-comment:#8a7d78;--code-string:#9a4a40;--radius:14px;--font:"Google Sans", system-ui, sans-serif;--mono:"Google Sans Code", ui-monospace, Consolas, monospace;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial;--accent-ink:#2b1815;--accent-text:#e9bab4;--bg:#171413;--surface:#211d1c;--surface-2:#1d1918;--line:#37302e;--ink:#f1eae7;--ink-soft:#b0a39c;--code-comment:#9b8e88;--code-string:#e9bab4}}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:80px}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}body{background:var(--bg);color:var(--ink);font:17px/1.6 var(--font);-webkit-font-smoothing:antialiased;margin:0}a{color:var(--accent-text);text-underline-offset:3px}:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}h1,h2,h3{letter-spacing:-.02em;text-wrap:balance;margin:0;line-height:1.15}h1{font-size:clamp(2.4rem,6vw,4.2rem);font-weight:700}h2{font-size:clamp(1.7rem,3.6vw,2.5rem);font-weight:700}h3{letter-spacing:-.01em;font-size:1.25rem;font-weight:700}p{margin:0}.skip{background:var(--surface);border-radius:8px;padding:8px 12px;position:absolute;top:8px;left:-999px}.skip:focus{z-index:100;left:8px}.nav{z-index:10;border-bottom:1px solid var(--line);background:color-mix(in srgb, var(--bg) 86%, transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);align-items:center;gap:24px;padding:12px clamp(16px,4vw,40px);display:flex;position:sticky;top:0}.nav nav{flex:1;justify-content:center;gap:clamp(12px,3vw,32px);display:flex}.nav nav a{color:var(--ink-soft);font-size:15px;text-decoration:none}.nav nav a:hover{color:var(--ink)}.brand{color:var(--ink);letter-spacing:-.01em;align-items:center;gap:9px;font-size:20px;font-weight:700;text-decoration:none;display:inline-flex}.brand-mark{background:conic-gradient(from 40deg,#e0a9a2,#e3c58d,#a9b4dc,#e0a9a2);border-radius:50%;width:22px;height:22px;-webkit-mask:radial-gradient(circle,#0000 28%,#000 30%);mask:radial-gradient(circle,#0000 28%,#000 30%)}.button{border:1px solid var(--accent);background:var(--accent);height:50px;color:var(--accent-ink);white-space:nowrap;border-radius:25px;justify-content:center;align-items:center;padding:0 26px;font-weight:700;text-decoration:none;transition:filter .15s,transform .15s;display:inline-flex}.button:hover{filter:brightness(1.05);transform:translateY(-1px)}.button.ghost{border-color:var(--line);color:var(--ink);background:0 0}.button.ghost:hover{border-color:var(--accent)}.button.small{height:38px;padding:0 18px;font-size:15px}.actions{flex-wrap:wrap;gap:12px;display:flex}.eyebrow{color:var(--accent-text);letter-spacing:.01em;font-size:14px;font-weight:500}.fine{color:var(--ink-soft);font-size:14px}.center{text-align:center}.shot{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);margin:0;overflow:hidden;box-shadow:0 2px 4px #3c1e140d,0 24px 60px #3c1e141f}.shot img{width:100%;height:auto;display:block}.hero{text-align:center;flex-direction:column;align-items:center;gap:22px;max-width:1180px;margin:0 auto;padding:clamp(48px,9vw,104px) clamp(16px,4vw,40px) clamp(40px,6vw,80px);display:flex}.hero h1{max-width:14em}.lede{max-width:38em;color:var(--ink-soft);font-size:clamp(1.05rem,1.6vw,1.25rem)}.hero .actions{justify-content:center;margin-top:6px}.hero-shot{width:100%;margin-top:clamp(20px,4vw,44px)}.band{padding:clamp(56px,8vw,112px) clamp(16px,4vw,40px)}.band>*{max-width:1180px;margin-left:auto;margin-right:auto}.band.soft{border-block:1px solid var(--line);background:var(--surface-2)}.section-head{flex-direction:column;gap:12px;margin-bottom:clamp(32px,5vw,64px);display:flex}.section-head>p:last-child:not(.eyebrow){max-width:38em;color:var(--ink-soft)}.mode{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:center;gap:clamp(24px,5vw,72px);display:grid}.mode+.mode{margin-top:clamp(56px,8vw,112px)}.mode.flip .mode-text{order:2}.mode-text{flex-direction:column;gap:14px;display:flex}.mode-text>p:not(.tag){color:var(--ink-soft)}.tag{background:color-mix(in srgb, var(--accent) 28%, transparent);color:var(--accent-text);border-radius:999px;align-self:flex-start;padding:3px 12px;font-size:14px;font-weight:700}.mode-text h3{font-size:clamp(1.4rem,2.4vw,1.8rem)}.mode-text ul{flex-direction:column;gap:8px;margin:6px 0 0;padding:0;font-size:16px;list-style:none;display:flex}.mode-text li{padding-left:22px;position:relative}.mode-text li:before{content:"";background:var(--accent);border-radius:50%;width:8px;height:8px;position:absolute;top:.62em;left:2px}.flow{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;padding:0;list-style:none;display:grid}.flow li,.facts>div{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);flex-direction:column;gap:8px;padding:24px;display:flex}.flow p,.facts p{color:var(--ink-soft);font-size:16px}.step{background:var(--accent);width:32px;height:32px;color:var(--accent-ink);border-radius:50%;place-items:center;margin-bottom:6px;font-weight:700;display:grid}.code-sample{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);margin-top:24px;margin-bottom:0;overflow:hidden}.code-sample figcaption{border-bottom:1px solid var(--line);color:var(--ink-soft);padding:12px 24px;font-size:14px}.code-sample pre{font:14px/1.7 var(--mono);margin:0;padding:20px 24px;overflow-x:auto}.code-sample .c{color:var(--code-comment)}.code-sample .s{color:var(--code-string)}.credit{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:start;gap:clamp(24px,5vw,72px);display:grid}.credit>div{flex-direction:column;gap:16px;display:flex}.credit>div>p:not(.eyebrow){color:var(--ink-soft)}.credit .actions{margin-top:8px}.links{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);flex-direction:column;margin:0;padding:0;list-style:none;display:flex}.links li{flex-direction:column;gap:2px;padding:16px 20px;display:flex}.links li+li{border-top:1px solid var(--line)}.links a{font-weight:700}.links span{color:var(--ink-soft);font-size:15px}.credit+.fine{margin-top:clamp(32px,5vw,56px)}.facts{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;display:grid}.facts h3{font-size:1.1rem}.facts+.fine{margin-top:28px}.cta{text-align:center;flex-direction:column;align-items:center;gap:14px;display:flex}.cta p{color:var(--ink-soft)}.cta .button{margin-top:10px}.footer{border-top:1px solid var(--line);color:var(--ink-soft);grid-template-columns:2fr 3fr 2fr;gap:32px;padding:40px clamp(16px,4vw,40px) 56px;font-size:15px;display:grid}.footer>div{flex-direction:column;gap:8px;display:flex}.footer h2{color:var(--ink);letter-spacing:0;font-size:15px}@media (width<=860px){.nav nav{display:none}.nav{justify-content:space-between}.mode,.credit,.flow,.footer{grid-template-columns:minmax(0,1fr)}.mode.flip .mode-text{order:0}.facts{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (width<=520px){.facts{grid-template-columns:minmax(0,1fr)}.hero .button,.hero .actions{width:100%}}
