:root{color-scheme:dark;--ink:#f5f8fb;--sub:#afc1cd;--dim:#8295a5;--line:#263c4d;--line2:#1c3040;--bg:#07111b;--navy:#0c1b28;--pane:#112432;--pane2:#142b3b;--mint:#83e2d2;--sky:#9ccaff;--gold:#ffd17c;--danger:#ff9c91;--r:22px;--max:1380px;--shadow:0 20px 70px rgba(0,0,0,.23)}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;background:radial-gradient(1100px 650px at 110% -5%,rgba(65,135,164,.13),transparent),var(--bg);color:var(--ink);font-family:ui-sans-serif,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-size:16px;line-height:1.7;-webkit-font-smoothing:antialiased}a{color:var(--mint);text-decoration-thickness:1px;text-underline-offset:3px}a:hover{color:#c8f9ef}button{font:inherit}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #cbeffa;outline-offset:4px;border-radius:6px}img{max-width:100%}::selection{background:#346d70;color:white}
.container{width:min(calc(100% - 64px),var(--max));margin-inline:auto}.site-header{position:relative;z-index:5;border-bottom:1px solid rgba(156,202,255,.1);background:rgba(7,17,27,.9)}.topbar{min-height:86px;display:flex;gap:24px;align-items:center;justify-content:space-between}.brand{display:flex;gap:13px;align-items:center;text-decoration:none;color:var(--ink)}.brand-mark{width:43px;height:43px;border:1px solid rgba(156,202,255,.35);border-radius:13px;position:relative;overflow:hidden;background:linear-gradient(160deg,#183142 0%,#183142 52%,#557181 53%,#557181 64%,#253843 65%)}.brand-mark:before{content:'';position:absolute;left:-6px;right:-6px;top:6px;height:6px;background:#8edfd6;transform:rotate(-22deg)}.brand strong{display:block;font-weight:780;letter-spacing:-.035em;font-size:22px;line-height:1.1}.brand small{display:block;letter-spacing:.21em;color:var(--dim);font-size:9px;font-weight:700;margin-top:4px}.header-right{display:flex;align-items:center;gap:22px}.header-link{color:var(--sub);text-decoration:none;font-size:13px}.lang-switch{display:inline-flex;align-items:center;padding:4px;gap:3px;background:#102331;border:1px solid var(--line);border-radius:99px}.lang-switch a{padding:5px 11px;font-size:12px;font-weight:750;text-decoration:none;color:var(--dim);border-radius:99px}.lang-switch a[aria-current=page]{color:#071821;background:var(--mint)}
.hero{padding:76px 0 70px;border-bottom:1px solid rgba(156,202,255,.1);overflow:hidden}.hero-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr);gap:50px;align-items:center}.eyebrow{color:var(--mint);text-transform:uppercase;font-size:12px;letter-spacing:.22em;font-weight:820;margin:0 0 21px}.hero h1{font-size:clamp(42px,5.2vw,76px);letter-spacing:-.065em;line-height:1.075;max-width:810px;font-weight:780;margin:0 0 22px}.hero h1 span{color:var(--mint)}.hero .intro{max-width:630px;color:#c8d6df;font-size:18px;line-height:1.65;margin-bottom:30px}.hero-btns{display:flex;flex-wrap:wrap;gap:10px}.btn{border:1px solid var(--line);border-radius:12px;padding:12px 18px;text-decoration:none;display:inline-flex;gap:9px;align-items:center;font-weight:700;font-size:14px;color:var(--ink)}.btn-primary{background:var(--mint);color:#05212a;border-color:var(--mint)}.btn-primary:hover{background:#b4f1e6;color:#05212a}.btn-secondary:hover{background:var(--pane2)}.hero-meta{font-size:12px;color:var(--dim);margin-top:24px}.hero-art{min-height:370px;position:relative;display:flex;align-items:center;justify-content:center}.glow{position:absolute;width:85%;height:70%;border-radius:50%;background:#3d95a4;filter:blur(85px);opacity:.17}.art-card{position:relative;width:240px;height:390px;border-radius:32px;border:6px solid #293e4b;overflow:hidden;box-shadow:0 38px 80px rgba(0,0,0,.46);background:#07111b;transform:rotate(5deg)}.art-card img{height:100%;width:100%;object-fit:cover;object-position:top}.art-pill{position:absolute;padding:10px 16px;border:1px solid #385b67;border-radius:12px;color:var(--ink);background:rgba(12,35,46,.93);box-shadow:var(--shadow);font-size:12px;font-weight:750}.art-pill.one{left:3%;top:22%;transform:rotate(-5deg)}.art-pill.two{right:-1%;bottom:18%;transform:rotate(3deg)}.art-pill strong{color:var(--mint)}
.main-layout{display:grid;grid-template-columns:225px minmax(0,1fr);gap:68px;align-items:start;padding-top:56px;padding-bottom:110px}.toc{position:sticky;top:18px;max-height:calc(100vh - 38px);overflow:auto;scrollbar-width:thin;padding-right:10px}.toc-title{font-size:11px;text-transform:uppercase;letter-spacing:.17em;color:var(--dim);margin:5px 0 12px;font-weight:850}.toc a{display:block;font-size:13px;font-weight:630;color:#a9bac6;text-decoration:none;padding:8px 12px;border-left:2px solid transparent;line-height:1.35;border-radius:0 8px 8px 0}.toc a:hover,.toc a.active{color:var(--mint);border-left-color:var(--mint);background:#102631}.toc hr{border:0;border-top:1px solid var(--line2);margin:18px 0}.toc-foot{font-size:12px;color:var(--dim);margin:15px 10px}.article{max-width:100%;min-width:0}.guide-section{padding:0 0 72px;margin-bottom:72px;border-bottom:1px solid var(--line2);scroll-margin-top:38px}.guide-section:last-child{margin-bottom:0;border:0;padding-bottom:0}.section-kicker{font-size:11px;text-transform:uppercase;letter-spacing:.18em;color:var(--mint);font-weight:850}.guide-section h2{font-size:clamp(29px,3.5vw,42px);line-height:1.17;letter-spacing:-.045em;margin:11px 0 17px}.section-lead{font-size:17px;color:#c2d1dc;line-height:1.7;max-width:790px;margin:0 0 31px}.visual-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,.79fr);align-items:start;gap:34px}.visual-grid.image-first{grid-template-columns:minmax(260px,.79fr) minmax(0,1fr)}.visual-grid .visual-grid__content{min-width:0}.screenshot{margin:0;width:min(100%,380px);justify-self:center}.screenshot a{display:block;line-height:0;text-decoration:none;border:1px solid #355062;background:#06121a;padding:7px;border-radius:26px;box-shadow:0 25px 60px rgba(0,0,0,.25);transition:transform .2s,border-color .2s}.screenshot a:hover{transform:translateY(-4px);border-color:var(--mint)}.screenshot img{display:block;width:100%;height:auto;border-radius:19px}.screenshot figcaption{font-size:12px;color:var(--dim);text-align:center;line-height:1.55;margin-top:12px}.screenshot figcaption span{color:var(--mint)}.visual-grid.image-first .screenshot{grid-column:1;grid-row:1}.visual-grid.image-first .visual-grid__content{grid-column:2;grid-row:1}.step{padding:16px 0;border-bottom:1px solid rgba(111,142,161,.2)}.step:first-child{padding-top:1px}.step:last-child{border:0}.step-title{display:flex;align-items:center;gap:10px;font-size:16px;font-weight:750;letter-spacing:-.01em;line-height:1.5}.step-num{width:25px;height:25px;display:inline-flex;align-items:center;justify-content:center;border:1px solid #466c7a;border-radius:8px;font-size:11px;color:var(--mint);flex:none}.step p{font-size:14px;line-height:1.67;color:var(--sub);margin:7px 0 0 35px}.step strong,.info-block strong{color:var(--ink)}.notes-list{padding-left:23px;color:var(--sub);font-size:14px;line-height:1.75}.notes-list li{padding:2px 0}.notes-list b{color:var(--ink)}.info-block{margin-top:26px;padding:20px 22px;background:linear-gradient(135deg,#12303b,#112331);border:1px solid #315363;border-radius:15px;color:#c4d2dc;font-size:14px;line-height:1.65}.info-block.warning{background:linear-gradient(135deg,#302a23,#1b2631);border-color:#594e3e}.info-block .info-label{display:block;color:var(--mint);font-size:11px;text-transform:uppercase;letter-spacing:.15em;font-weight:830;margin-bottom:5px}.info-block.warning .info-label{color:var(--gold)}.info-block p{margin:6px 0 0}.plain-card{margin-top:20px;background:var(--navy);border:1px solid var(--line);padding:23px;border-radius:17px}.plain-card h3{margin:0 0 10px;font-size:17px;letter-spacing:-.02em}.plain-card p{color:var(--sub);font-size:14px;line-height:1.7;margin:0}.formula{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;color:var(--mint);overflow-wrap:anywhere;font-size:13px}.data-table{width:100%;border-collapse:collapse;font-size:14px;line-height:1.4;margin:13px 0}.data-table th,.data-table td{text-align:left;border-bottom:1px solid #263f4e;padding:11px 9px}.data-table th{font-size:12px;color:var(--dim);font-weight:700}.data-table td:last-child{color:var(--mint);font-weight:750;white-space:nowrap}.pair-shots{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:730px;margin:28px auto}.pair-shots .screenshot{width:100%}.pair-shots .screenshot img{width:100%}.pill-row{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0}.pill{padding:7px 11px;background:#123040;border:1px solid #2a5060;color:#bee7e7;border-radius:30px;font-size:12px;font-weight:650}.detail{background:#0b1d2a;border:1px solid var(--line);padding:18px 21px;border-radius:16px;margin-top:21px}.detail summary{color:var(--mint);font-weight:730;cursor:pointer}.detail p,.detail li{font-size:14px;color:var(--sub)}.detail p:last-child{margin-bottom:0}.split-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.stat-card{background:linear-gradient(145deg,#152b39,#102230);border:1px solid var(--line);padding:20px;border-radius:16px}.stat-card small{color:var(--sub);display:block;font-size:13px}.stat-card strong{display:block;color:var(--mint);font-size:28px;letter-spacing:-.045em;margin-top:4px}.resource-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:26px}.resource{border:1px solid var(--line);border-radius:14px;padding:17px 18px;text-decoration:none;background:#112330}.resource strong{display:block;font-size:14px;color:var(--ink)}.resource span{display:block;color:var(--dim);font-size:12px;margin-top:4px}.resource:hover{background:#173645;border-color:#4a8085}
.footer{border-top:1px solid var(--line2);background:#071019}.footer-inner{padding:35px 0 42px;display:flex;align-items:center;justify-content:space-between;gap:22px}.footer p{font-size:12px;color:var(--dim);margin:0}.footer a{font-size:13px;text-decoration:none}.back-top{position:fixed;bottom:20px;right:20px;z-index:10;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;background:#1a3d4b;border:1px solid #416a74;color:var(--ink);border-radius:11px;width:43px;height:43px;box-shadow:var(--shadow)}.back-top:not(.show){opacity:0;pointer-events:none}.back-top.show{opacity:1;transition:opacity .2s}.lightbox{background:#081622;border:1px solid #416171;padding:12px 12px 18px;color:var(--ink);border-radius:21px;width:min(720px,92vw);max-height:94vh;box-shadow:var(--shadow)}.lightbox::backdrop{background:rgba(0,5,10,.87);backdrop-filter:blur(7px)}.lightbox img{display:block;max-height:calc(94vh - 82px);max-width:100%;width:auto;margin:auto;border-radius:11px}.lightbox .lightbox-controls{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:4px 6px 12px}.lightbox .lightbox-controls strong{font-size:12px;color:var(--sub)}.lightbox button{background:#1c3542;border:1px solid #365566;border-radius:10px;color:var(--ink);cursor:pointer;padding:6px 13px}.mobile-toc{display:none}
@media(max-width:1100px){.main-layout{gap:30px;grid-template-columns:205px minmax(0,1fr)}.visual-grid,.visual-grid.image-first{gap:20px;grid-template-columns:minmax(0,1fr) minmax(210px,.75fr)}}
@media(max-width:820px){.container{width:min(calc(100% - 36px),var(--max))}.topbar{min-height:72px}.header-link{display:none}.hero{padding:48px 0 38px}.hero-grid{grid-template-columns:1fr}.hero h1{font-size:clamp(40px,7.5vw,64px)}.hero-art{display:none}.main-layout{display:block;padding-top:26px}.toc{display:none}.mobile-toc{display:block;margin:0 0 52px;background:#112432;border:1px solid var(--line);border-radius:15px;padding:14px 18px}.mobile-toc summary{font-weight:760;color:var(--mint);cursor:pointer}.mobile-toc a{display:block;padding:9px 0;text-decoration:none;border-bottom:1px solid #243b4b;color:var(--sub);font-size:14px}.mobile-toc a:last-child{border:0}.guide-section{padding-bottom:52px;margin-bottom:55px}.section-lead{font-size:16px}.visual-grid,.visual-grid.image-first{grid-template-columns:1fr}.visual-grid.image-first .screenshot,.visual-grid.image-first .visual-grid__content{grid-column:auto;grid-row:auto}.visual-grid.image-first .visual-grid__content{grid-row:1}.screenshot{width:min(100%,380px);margin:22px auto 0}.visual-grid .screenshot{justify-self:center}.resource-list{grid-template-columns:1fr}}
@media(max-width:480px){.brand strong{font-size:20px}.brand-mark{width:39px;height:39px}.hero h1{font-size:39px}.hero .intro{font-size:16px}.hero .eyebrow{font-size:10px}.main-layout{padding-bottom:65px}.guide-section h2{font-size:30px}.pair-shots{gap:10px}.pair-shots .screenshot a{padding:4px;border-radius:15px}.pair-shots .screenshot img{border-radius:10px}.pair-shots .screenshot figcaption{font-size:11px}.split-cards{grid-template-columns:1fr}.footer-inner{flex-direction:column;align-items:flex-start}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important}}

/* Integration CorrEx: official CoatKit icon in the guide header. */
.brand-mark{display:block;object-fit:cover;background:#07111b}
.brand-mark:before{display:none}