@import url('https://fonts.googleapis.com/css2?family=Golos+Text:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&display=swap');
:root { --paper:#f2f0e9; --ink:#171a19; --muted:#606963; --line:#d4d7d0; --blue:#3455e8; --font:'Golos Text',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; --mono:'IBM Plex Mono',ui-monospace,monospace; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font:400 16px/1.65 var(--font); }
a { color:inherit; text-decoration:none; }
a:focus-visible { outline:3px solid var(--blue); outline-offset:3px; }
h1,h2,p { margin:0; }
code,pre { font-family:var(--mono); }
.skip-link { position:absolute; z-index:10; top:-100px; left:15px; padding:10px 16px; background:#fff; }
.skip-link:focus { top:12px; }
.header { border-bottom:1px solid var(--line); background:#f8f8f4; }
.header-inner { display:flex; align-items:center; gap:32px; min-height:76px; padding:0 40px; }
.brand { font-size:31px; font-weight:800; letter-spacing:-.09em; line-height:1; }
.brand span { color:var(--blue); }
.header-label,.side-heading,.side-bottom>span,.eyebrow,.section-index,.code-heading,.docs-end>span { font:500 11px/1.4 var(--mono); letter-spacing:.1em; }
.header-label { margin-left:24px; color:#66716a; }
.header-action { display:inline-flex; align-items:center; gap:28px; margin-left:auto; padding:12px 15px; background:var(--ink); color:#fff; font-size:13px; font-weight:600; }
.header-action:hover { background:var(--blue); }
.header-action span { font-size:20px; line-height:1; }
.docs-layout { display:grid; grid-template-columns:250px minmax(0,1fr); max-width:1600px; min-height:calc(100vh - 77px); margin:auto; }
.docs-sidebar { position:sticky; top:0; display:flex; flex-direction:column; align-self:start; height:100vh; padding:42px 23px 28px 40px; border-right:1px solid var(--line); }
.side-heading { margin-bottom:24px; color:#737d74; }
.docs-sidebar nav { display:grid; }
.docs-sidebar nav a { padding:12px 0; color:#4b554e; font-size:14px; font-weight:600; }
.docs-sidebar nav a:hover { color:var(--blue); }
.side-bottom { display:grid; gap:8px; margin-top:auto; padding-top:18px; border-top:1px solid var(--line); }
.side-bottom>span { color:#737d74; }
.side-bottom a { color:var(--blue); font-size:13px; font-weight:600; }
.docs-main { width:min(100%,1000px); min-width:0; padding:65px clamp(30px,6vw,95px) 100px; }
.docs-hero { padding-bottom:72px; border-bottom:1px solid var(--ink); }
.eyebrow,.section-index { color:var(--blue); }
.docs-hero h1 { margin:24px 0; font-size:clamp(58px,6vw,93px); line-height:1.04; letter-spacing:-.075em; }
.docs-hero p { max-width:540px; color:#505b53; font-size:20px; }
.doc-section { padding:64px 0 70px; border-bottom:1px solid var(--line); scroll-margin-top:28px; }
.doc-section h2 { margin:20px 0 18px; font-size:clamp(37px,4vw,56px); line-height:1.1; letter-spacing:-.06em; }
.doc-section>p { max-width:740px; margin:0 0 20px; color:#48524a; font-size:15px; line-height:1.8; }
.doc-section code:not(pre code) { padding:2px 5px; background:#e2e6df; color:#28382d; font-size:.87em; overflow-wrap:anywhere; }
.steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; margin:36px 0; border:1px solid var(--line); background:var(--line); }
.steps>div { display:flex; min-height:150px; flex-direction:column; padding:20px; background:#fff; }
.steps span { color:var(--blue); font:600 11px var(--mono); }
.steps strong { margin-top:28px; font-size:15px; }
.steps a { margin-top:auto; color:var(--blue); font-size:12px; font-weight:600; }
.code-heading { display:flex; justify-content:space-between; padding:14px 20px; background:#29332d; color:#e4eee6; }
pre { overflow-x:auto; margin:0; padding:25px 23px; background:#1d2421; color:#d9ecdc; font-size:12px; line-height:1.85; }
.doc-section>.hint { margin-top:17px; color:#687168; font-size:13px; }
.note { display:grid; gap:5px; margin-top:28px; padding:22px; border-left:3px solid var(--blue); background:#e7ebff; }
.note strong { font-size:14px; }
.note span { color:#4d5868; font-size:13px; }
.field-table { margin:31px 0; border-top:1px solid var(--ink); }
.field-table>div { display:grid; grid-template-columns:170px 130px 1fr; gap:15px; align-items:start; padding:17px 0; border-bottom:1px solid var(--line); }
.field-table strong { font:600 13px var(--mono); }
.field-table span { color:var(--blue); font-size:12px; }
.field-table p { margin:0; color:#576159; font-size:13px; }
.error-list { margin-top:30px; border-top:1px solid var(--ink); }
.error-list>div { display:grid; grid-template-columns:115px 1fr; gap:15px; padding:15px 0; border-bottom:1px solid var(--line); }
.error-list strong { color:var(--blue); font:600 13px var(--mono); }
.error-list span { color:#505b53; font-size:13px; }
.docs-end { display:flex; align-items:end; justify-content:space-between; gap:20px; padding:60px 0 0; }
.docs-end>span { color:var(--blue); }
.docs-end a { display:flex; gap:25px; padding:16px 19px; background:var(--blue); color:#fff; font-size:13px; font-weight:600; }
.docs-end a:hover { background:#2846c9; }
@media(max-width:900px) { .docs-layout { grid-template-columns:200px minmax(0,1fr); } .docs-sidebar { padding-left:25px; } .docs-main { padding-inline:35px; } .field-table>div { grid-template-columns:140px 1fr; } .field-table p { grid-column:1/-1; } }
@media(max-width:700px) { .header-inner { min-height:68px; padding:0 18px; } .header-label { display:none; } .docs-layout { display:block; } .docs-sidebar { position:static; height:auto; padding:14px 18px; border-right:0; border-bottom:1px solid var(--line); } .side-heading,.side-bottom { display:none; } .docs-sidebar nav { display:flex; gap:22px; overflow-x:auto; scrollbar-width:none; } .docs-sidebar nav a { flex:none; padding:8px 0; font-size:12px; } .docs-main { padding:45px 18px 75px; } .docs-hero { padding-bottom:52px; } .docs-hero h1 { font-size:clamp(50px,12vw,72px); } .docs-hero p { font-size:17px; } .doc-section { padding:49px 0 56px; } .steps { grid-template-columns:1fr; } .steps>div { min-height:112px; } .steps strong { margin-top:10px; } .docs-end { align-items:start; flex-direction:column; } }
@media(max-width:400px) { .brand { font-size:27px; } .header-action { gap:9px; padding:10px; font-size:11px; } .field-table>div { grid-template-columns:1fr; gap:5px; } .field-table p { grid-column:auto; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto !important; } }