@import url('/design-system.css?v=20260826-semantic-bridge-v1');

@font-face{font-family:Onest;src:url('/assets/fonts/onest-cyrillic.woff2') format('woff2');font-display:swap;font-weight:100 900;unicode-range:U+0400-052F,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:Onest;src:url('/assets/fonts/onest-latin.woff2') format('woff2');font-display:swap;font-weight:100 900;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Mono';src:url('/assets/fonts/ibm-plex-mono-latin-400.woff2') format('woff2');font-display:swap;font-weight:400}

:root{--seo-bg:var(--ds-bg);--seo-surface:var(--ds-surface);--seo-line:var(--ds-border);--seo-ink:var(--ds-text);--seo-muted:var(--ds-text-muted);--seo-accent:var(--ds-accent);--seo-shadow:var(--ds-shadow)}
*{box-sizing:border-box}
html{min-width:320px;background:var(--seo-bg)}
body{min-width:320px;min-height:100dvh;margin:0;overflow-x:hidden;background:var(--seo-bg);background-image:linear-gradient(var(--seo-line) 1px,transparent 1px),linear-gradient(90deg,var(--seo-line) 1px,transparent 1px);background-size:64px 64px;color:var(--seo-ink);font-family:Onest,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--seo-ink);text-decoration-thickness:1px;text-underline-offset:3px}
button,input,textarea,select{font:inherit}
.skip{position:fixed;z-index:10;top:-80px;left:16px;padding:11px 15px;border-radius:9px;background:var(--seo-ink);color:var(--seo-bg)}
.skip:focus{top:16px}
header{display:flex;width:min(calc(100% - 36px),1500px);min-height:68px;margin:18px auto 0;padding:8px 10px 8px 16px;align-items:center;justify-content:space-between;gap:18px;border:1px solid var(--seo-line);border-radius:18px;background:color-mix(in srgb,var(--seo-surface) 88%,transparent);box-shadow:var(--seo-shadow);backdrop-filter:blur(18px)}
.brand{display:inline-flex;align-items:center;gap:10px;color:var(--seo-ink);font-size:13px;font-weight:780;text-decoration:none}
.brand img{width:36px;height:36px;border:1px solid var(--seo-line);border-radius:10px;background:#111}
.brand small{color:var(--seo-accent);font-size:inherit}
header nav{display:flex;align-items:center;gap:6px}
header nav a{padding:10px 12px;color:var(--seo-muted);font-size:11px;font-weight:650;text-decoration:none}
header nav a:hover{color:var(--seo-ink)}
header nav .login,.actions a:first-child,.cta a{border:1px solid var(--seo-ink);border-radius:10px;background:var(--seo-ink);color:var(--seo-bg);box-shadow:0 10px 24px color-mix(in srgb,var(--seo-ink) 14%,transparent)}
main{width:min(calc(100% - 48px),1120px);margin:0 auto;padding:34px 0 80px}
.crumbs{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 42px;color:var(--seo-muted);font-size:11px}
.crumbs b{color:var(--seo-ink)}
.hero{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(260px,.75fr);gap:54px;align-items:center;padding:26px 0 76px;border-bottom:1px solid var(--seo-line)}
.eyebrow,.answer>p,.setup .eyebrow,.why>p,.faq>p,.related>p,.cta>p{margin:0 0 14px;color:var(--seo-accent);font:10px 'IBM Plex Mono',monospace;letter-spacing:.08em;text-transform:uppercase}
h1,h2,h3,p{overflow-wrap:anywhere}
h1{max-width:760px;margin:0;font-size:clamp(42px,5.7vw,82px);font-weight:650;line-height:.94;letter-spacing:-.055em}
h2{margin:0;font-size:clamp(30px,4vw,54px);font-weight:640;line-height:.98;letter-spacing:-.045em}
h3{margin:0;font-size:18px;line-height:1.15}
.lead{max-width:700px;margin:25px 0 0;color:var(--seo-muted);font-size:16px;line-height:1.6}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.actions a{display:inline-flex;min-height:44px;padding:0 15px;align-items:center;border-radius:10px;font-size:12px;font-weight:680;text-decoration:none}
.actions a:last-child{border-bottom:1px solid var(--seo-line);border-radius:0;color:var(--seo-muted)}
.hero aside{padding:22px;border:1px solid var(--seo-line);border-radius:14px;background:color-mix(in srgb,var(--seo-surface) 90%,transparent);box-shadow:var(--seo-shadow)}
.hero aside small{display:block;margin-bottom:12px;color:var(--seo-muted);font:9px 'IBM Plex Mono',monospace}
.hero aside strong{display:block;font-size:17px;line-height:1.2}
.hero aside ul{display:grid;gap:9px;margin:18px 0 0;padding:16px 0 0;border-top:1px solid var(--seo-line);color:var(--seo-muted);font-size:12px}
.answer,.setup,.why,.faq,.related{padding:82px 0;border-bottom:1px solid var(--seo-line)}
.answer>div,.setup,.why>div,.faq>div{display:grid;gap:24px}
.answer>div{grid-template-columns:1fr 1fr;margin-top:28px;color:var(--seo-muted);font-size:14px;line-height:1.7}
.setup{grid-template-columns:.85fr 1.15fr;align-items:start}
.setup code{display:block;margin-top:25px;padding:14px;overflow:auto;border:1px solid var(--seo-line);border-radius:var(--ds-radius-control);background:var(--ds-surface-raised);color:var(--seo-ink);font:12px/1.5 'IBM Plex Mono',monospace;white-space:pre-wrap}
.setup ol{display:grid;gap:0;margin:0;padding:0;list-style:none}
.setup li{display:grid;grid-template-columns:44px 1fr;gap:16px;padding:16px 0;border-bottom:1px solid var(--seo-line);color:var(--seo-muted);font-size:14px;line-height:1.5}
.setup li span{color:var(--seo-accent);font:11px 'IBM Plex Mono',monospace}
.setup li p{margin:0}
.why>div,.faq>div{grid-template-columns:repeat(3,1fr);margin-top:30px}
.why article,.faq article{min-width:0;padding:22px;border:1px solid var(--seo-line);background:color-mix(in srgb,var(--seo-surface) 72%,transparent)}
.why article span{display:block;margin-bottom:28px;color:var(--seo-accent);font:10px 'IBM Plex Mono',monospace}
.why article p,.faq article p{margin:12px 0 0;color:var(--seo-muted);font-size:13px;line-height:1.6}
.faq>div{grid-template-columns:1fr 1fr}
.related>div,.guide-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:30px}
.related a,.guide-grid a{display:grid;min-width:0;gap:10px;padding:20px;border:1px solid var(--seo-line);border-radius:12px;background:color-mix(in srgb,var(--seo-surface) 80%,transparent);text-decoration:none}
.related a:hover,.guide-grid a:hover{border-color:var(--seo-accent);transform:translateY(-1px)}
.setup code:focus-visible,.related a:focus-visible,.guide-grid a:focus-visible{outline:2px solid var(--ds-focus-ring);outline-offset:3px}
.related a small,.guide-grid a small{color:var(--seo-accent);font:10px 'IBM Plex Mono',monospace}
.related a b,.guide-grid a h2{font-size:16px;letter-spacing:-.02em}
.related a span,.guide-grid a span{color:var(--seo-accent);font-size:11px}
.index-hero{padding:50px 0 70px}
.index-hero h1{max-width:700px}
.index-hero>p:last-child{max-width:600px;margin-top:24px;color:var(--seo-muted);font-size:16px;line-height:1.6}
.guide-grid a p{margin:0;color:var(--seo-muted);font-size:13px;line-height:1.55}
.cta{margin-top:82px;padding:42px;border-radius:16px;background:var(--seo-ink);color:var(--seo-bg)}
.cta>p{color:var(--seo-bg)}
.cta h2{max-width:650px}
.cta a{display:inline-flex;margin-top:26px;padding:12px 15px;color:var(--seo-ink);background:var(--seo-bg);text-decoration:none}
footer{display:flex;width:min(calc(100% - 48px),1120px);margin:0 auto;padding:24px 0 36px;justify-content:space-between;gap:20px;color:var(--seo-muted);font-size:10px}
footer nav{display:flex;flex-wrap:wrap;gap:14px}
footer a{color:inherit}
@media(max-width:760px){
  body{background-size:44px 44px}
  header{width:calc(100% - 16px);min-height:58px;margin-top:8px;padding:6px 8px;border-radius:15px}
  header nav a:not(.login){display:none}
  header nav .login{padding:9px 10px;font-size:10px}
  main{width:calc(100% - 28px);padding-top:22px}
  .crumbs{margin-bottom:28px;font-size:10px}
  .hero,.setup{grid-template-columns:1fr;gap:28px;padding-bottom:52px}
  h1{font-size:clamp(40px,13vw,60px)}
  h2{font-size:36px}
  .lead{font-size:14px}
  .answer,.setup,.why,.faq,.related{padding:54px 0}
  .answer>div,.why>div,.faq>div,.related>div,.guide-grid{grid-template-columns:1fr}
  .setup code{font-size:11px}
  .cta{margin-top:54px;padding:26px}
  footer{width:calc(100% - 28px);display:grid;gap:14px}
}