:root { --navy:#0e2a66; --navy-deep:#071a43; --blue:#2352a5; --green:#9ce220; --turq:#1bb8b1; --ink:#17305d; --mut:#617293; --line:#dce4f0; --bg:#f6f8fc; --card:#fff; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:var(--ink); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; line-height:1.55; }
a { color:inherit; text-decoration:none; }
.skip-link { position:absolute; left:1rem; top:-4rem; z-index:10; background:#fff; padding:.7rem 1rem; border-radius:.5rem; }.skip-link:focus{top:1rem}
.topbar { height:68px; border-bottom:1px solid var(--line); background:#fff; display:flex; align-items:center; justify-content:space-between; padding:0 max(24px,calc((100vw - 1320px)/2)); }
.brand { display:flex; gap:15px; align-items:center; font-weight:700; color:var(--navy); }.brand img{ width:118px; height:auto; }.brand span{ border-left:1px solid var(--line); padding-left:15px; font-size:14px; }
.return-link { color:var(--blue); font-size:14px; font-weight:700; }.return-link span{ margin-left:5px; }
.shell { max-width:1320px; margin:0 auto; padding:40px 24px 80px; display:grid; grid-template-columns:250px minmax(0,820px); gap:72px; }
.sidebar { position:sticky; top:24px; align-self:start; }.eyebrow { margin:0 0 7px; color:var(--blue); text-transform:uppercase; letter-spacing:.09em; font-size:11px; font-weight:800; }.sidebar h2{ margin:0; color:var(--navy); font-size:22px; letter-spacing:0; }.side-intro{ color:var(--mut); font-size:13px; margin:8px 0 22px; }.sidebar nav{ display:grid; gap:3px; border-left:1px solid var(--line); }.sidebar nav a{ color:var(--mut); font-size:13px; padding:7px 12px; border-left:2px solid transparent; margin-left:-1px; }.sidebar nav a:hover,.sidebar nav .active{ color:var(--navy); font-weight:700; border-left-color:var(--green); background:#eef5ff; }
.side-help{ margin-top:30px; padding:15px; background:var(--navy); color:#fff; border-radius:8px; }.side-help p{ margin:7px 0 3px; font-size:12px; line-height:1.45; }.side-help a{ color:var(--green); font-weight:700; font-size:12px; }.help-icon{ display:grid; place-items:center; width:22px; height:22px; border-radius:50%; background:rgba(255,255,255,.13); color:var(--green); font-weight:800; }
.content { min-width:0; }.breadcrumb{ color:var(--mut); font-size:12px; margin-bottom:26px; }.breadcrumb span{ margin:0 6px; color:#a4b1c8; }.hero{ padding-bottom:44px; border-bottom:1px solid var(--line); }.hero h1{ color:var(--navy); max-width:720px; margin:0; font-size:clamp(33px,4vw,48px); line-height:1.08; letter-spacing:0; }.lead{ max-width:665px; color:var(--mut); font-size:17px; margin:20px 0 16px; }.meta{ color:#8290aa; font-size:12px; display:flex; align-items:center; gap:8px; }.dot{ width:4px; height:4px; border-radius:99px; background:#a5b2c9; }
.quick-start{ margin:34px 0; border:1px solid var(--line); border-radius:8px; padding:24px; background:linear-gradient(120deg,#fff 55%,#f1f9e3); }.quick-start h2{ font-size:20px; color:var(--navy); margin:0; }.quick-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:20px; }.quick-grid a{ display:grid; gap:4px; padding:14px 10px; border-radius:7px; border:1px solid transparent; }.quick-grid a:hover{ border-color:#cad9ed; background:#fff; }.quick-grid strong{ font-size:12px; }.quick-grid small{ color:var(--mut); font-size:11px; }.tile-icon{ width:30px; height:30px; display:grid; place-items:center; border-radius:7px; font-size:16px; font-weight:800; }.ai{ background:#e9e1ff; color:#5c3fb6; }.channel{ background:#d7f6f4; color:#087a76; }.operation{ background:#e1ecff; color:#2352a5; }.pix{ background:#ebf9d1; color:#487909; }
.intro-copy{ color:var(--mut); font-size:15px; border-left:3px solid var(--green); padding:2px 0 2px 17px; }.intro-copy p{ margin:0; }.intro-copy strong{ color:var(--navy); }
.doc-section{ position:relative; padding:62px 0 6px; }.section-number{ position:absolute; top:59px; right:0; font-size:12px; color:#94a2bc; font-weight:800; letter-spacing:.08em; }.section-heading{ max-width:640px; }.section-heading h2{ margin:0; color:var(--navy); font-size:29px; letter-spacing:0; }.section-heading > p:last-child{ margin:8px 0 22px; color:var(--mut); font-size:15px; }
.callout,.notice{ display:flex; gap:12px; align-items:flex-start; background:#eef5ff; border:1px solid #d8e6f9; padding:14px 16px; border-radius:7px; color:#486084; font-size:13px; }.callout span,.notice span{ flex:0 0 auto; display:grid; place-items:center; width:20px; height:20px; border-radius:50%; background:var(--blue); color:#fff; font-size:12px; font-weight:800; }.callout p,.notice p{ margin:0; }.warning{ margin-top:22px; background:#fff8e7; border-color:#f3dfaa; color:#80632c; }.warning span{ background:#d79000; }
.table-wrap{ overflow-x:auto; border:1px solid var(--line); border-radius:7px; background:#fff; }table{ border-collapse:collapse; width:100%; min-width:610px; font-size:13px; }th{ background:#f7f9fd; color:#4e6186; font-size:11px; text-transform:uppercase; letter-spacing:.08em; text-align:left; }th,td{ padding:14px 16px; border-bottom:1px solid var(--line); vertical-align:top; }tbody tr:last-child td{ border-bottom:0; }td:first-child{ width:32%; color:var(--navy); font-weight:700; }td:last-child{ color:var(--mut); }code{ color:#394d72; background:#f1f4fa; padding:1px 4px; border-radius:3px; font-size:12px; }
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }.steps>div,.split-cards>div{ border:1px solid var(--line); border-radius:7px; background:#fff; padding:19px; }.steps b{ display:grid; place-items:center; width:25px; height:25px; border-radius:50%; background:var(--navy); color:var(--green); font-size:12px; }.steps h3,.split-cards h3{ color:var(--navy); font-size:15px; margin:15px 0 5px; }.steps p,.split-cards p{ color:var(--mut); font-size:12.5px; margin:0; }.split-cards{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }.split-cards h3{ margin-top:0; }.advanced-list{ display:grid; gap:10px; }.advanced-list>div{ display:flex; gap:14px; align-items:flex-start; padding:16px 0; border-top:1px solid var(--line); }.advanced-list span{ color:var(--green); background:var(--navy); display:grid; place-items:center; min-width:25px; height:25px; border-radius:6px; font-weight:800; }.advanced-list p{ color:var(--mut); margin:0; font-size:13px; }.advanced-list strong{ color:var(--navy); }.final-section{ padding-bottom:40px; }
footer{ border-top:1px solid var(--line); background:#fff; color:var(--mut); padding:24px max(24px,calc((100vw - 1320px)/2)); display:flex; justify-content:space-between; font-size:12px; }footer a{ color:var(--blue); font-weight:700; }
@media (max-width:840px){.topbar{padding:0 20px}.brand img{width:102px}.brand span{display:none}.shell{display:block;padding:28px 20px 54px}.sidebar{position:relative;top:auto;margin-bottom:30px}.side-intro,.side-help{display:none}.sidebar nav{display:flex;overflow-x:auto;border-left:0;border-bottom:1px solid var(--line);padding-bottom:7px}.sidebar nav a{white-space:nowrap;margin:0;border-left:0;border-bottom:2px solid transparent;padding:6px 10px}.sidebar nav .active{border-bottom-color:var(--green)}.quick-grid{grid-template-columns:1fr 1fr}.steps{grid-template-columns:1fr}.section-number{right:2px}.return-link{font-size:12px}.lead{font-size:16px}.split-cards{grid-template-columns:1fr}footer{padding:20px;}.meta{flex-wrap:wrap}}
@media (max-width:440px){.topbar{height:60px}.return-link{font-size:0}.return-link span{font-size:20px}.hero h1{font-size:33px}.quick-start{padding:18px}.quick-grid a{padding:10px 4px}.section-heading h2{font-size:26px}}