/* Search-friendly editorial pages. Text remains visible without JavaScript. */
:root{--night:#071622;--panel:#102635;--panel2:#0d2030;--mint:#9bf4cc;--accent:#a5cfff;--white:#eefaf8;--muted:#afc6cf;--line:#294552;--paper:#f4f8f7;--ink:#16323c}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--night);color:var(--white);font:400 16px/1.75 "Inter","Segoe UI",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}a:focus-visible,button:focus-visible{outline:3px solid #78ecc3;outline-offset:4px}
.container{width:min(1160px,calc(100% - 48px));margin-inline:auto}
.skip{position:absolute;top:-80px;left:20px;background:var(--mint);color:#06232a;padding:12px;z-index:50}.skip:focus{top:8px}
.site-top{position:relative;z-index:2;border-bottom:1px solid var(--line);background:#081923e9}
.site-top .container{min-height:86px;display:flex;justify-content:space-between;align-items:center;gap:25px}
.identity{display:flex;align-items:center;gap:13px;font-size:21px;font-weight:900;letter-spacing:-.075em}
.identity-mark{height:44px;width:44px;display:grid;place-items:center;border-radius:11px;background:#9cf1cb;color:#11313b;font-weight:950;font-size:26px}
.identity small{display:block;font:800 9px/1.8 ui-monospace,Consolas,monospace;letter-spacing:.12em;color:#76baa9}
.site-links{display:flex;gap:19px;flex-wrap:wrap;align-items:center;font-size:12px;font-weight:750;color:#c4dbdf}.site-links a:hover{text-decoration:underline;color:#aaf8d8}
.site-links .cta{background:#9ceec8;color:#0c3235;border-radius:9px;padding:11px 16px}
.breadcrumbs{display:flex;flex-wrap:wrap;gap:8px;padding:24px 0;color:#96b8c4;font-size:12px}.breadcrumbs a:hover{color:#94f8d3}.breadcrumbs span{color:#62908c}
.intro{position:relative;overflow:hidden;padding:49px 0 67px}
.intro::before{content:"";position:absolute;width:580px;height:580px;right:-130px;top:-180px;border-radius:50%;pointer-events:none;background:radial-gradient(circle,#43b3b52d,transparent 66%)}
.eyebrow{font:800 10px/1.5 ui-monospace,Consolas,monospace;color:#89eac4;letter-spacing:.15em}
.intro-layout{display:grid;grid-template-columns:minmax(0,1.24fr) minmax(255px,.76fr);align-items:center;gap:62px}
.intro h1{font-size:clamp(2.7rem,6vw,5.8rem);max-width:820px;letter-spacing:-.075em;line-height:1.03;margin:23px 0;overflow-wrap:break-word}
.intro h1 em{font-style:normal;color:var(--mint)}
.lead{max-width:700px;font-size:clamp(17px,2vw,21px);line-height:1.77;color:#c0d9df}
.intro-actions{display:flex;gap:13px;flex-wrap:wrap;margin:30px 0 0}
.button{display:inline-flex;min-height:48px;padding:12px 19px;border-radius:10px;align-items:center;justify-content:center;font-size:13px;font-weight:800;transition:transform .2s}.button:hover{transform:translateY(-2px)}
.button-primary{background:#9ff0cd;color:#0e3339}.button-secondary{border:1px solid #558080;background:#183444;color:#e5f6ee}
.identity-visual{position:relative;padding:10px;border:1px solid #477367;border-radius:18px;background:linear-gradient(155deg,#f9fbf8,#d1ebe1);transform:rotate(1.4deg);box-shadow:0 28px 90px #0006}
.identity-visual img{display:block;width:100%;aspect-ratio:1;object-fit:contain;background:#fff;border-radius:12px}
.identity-visual figcaption{padding:14px 9px;color:#15373d;font-weight:850;line-height:1.4}
.identity-visual small{display:block;font:750 10px ui-monospace,Consolas,monospace;color:#377767;letter-spacing:.1em}
.code-visual{display:grid;place-items:center;min-height:260px;border:1px solid #3a6a68;border-radius:20px;background:linear-gradient(160deg,#143c43,#091c2d);box-shadow:0 28px 100px #0005;overflow:hidden;position:relative}
.code-visual::before{content:"";position:absolute;inset:0;background-image:linear-gradient(#a4c4d612 1px,transparent 1px),linear-gradient(90deg,#a4c4d612 1px,transparent 1px);background-size:30px 30px;mask-image:linear-gradient(90deg,transparent,black 25%,black 75%,transparent)}
.code-visual strong{position:relative;font:900 clamp(3rem,7vw,6rem) ui-monospace,Consolas,monospace;letter-spacing:-.09em;color:#a0f7d3;text-shadow:0 0 30px #53d9bc66}
.code-visual span{position:absolute;bottom:20px;font:800 10px ui-monospace,Consolas,monospace;color:#8dcac6;letter-spacing:.18em}
.article-layout{background:var(--paper);color:var(--ink);padding:66px 0 85px}
.article-layout .container{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:68px;align-items:start}
.article-section{scroll-margin-top:28px;margin-bottom:54px;max-width:760px}
.article-section h2{font-size:clamp(1.8rem,3vw,2.8rem);letter-spacing:-.05em;line-height:1.17;margin:0 0 18px}
.article-section p{font-size:15.5px;color:#4a666d;margin:0 0 16px;line-height:1.9}
.article-section ul,.article-section ol{list-style:none;margin:17px 0 0;padding:0;display:grid;gap:10px}
.article-section ul li,.article-section ol li{position:relative;border:1px solid #dbe7e4;border-radius:12px;background:#fff;padding:14px 19px;font-size:14px;color:#32515a}
.article-section ul li::before{content:"";display:inline-block;width:7px;height:7px;margin-right:10px;vertical-align:middle;background:#0d9d81;transform:rotate(45deg)}
.article-section ol{counter-reset:stage}
.article-section ol li{counter-increment:stage;padding-left:60px}
.article-section ol li::before{content:counter(stage,decimal-leading-zero);position:absolute;left:17px;top:14px;font:800 15px ui-monospace,Consolas,monospace;color:#058e76}
.article-section a{color:#087e76;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.side-panel{position:sticky;top:25px;background:#0f2a39;color:#e5f7f3;border-radius:17px;border:1px solid #2d5962;padding:25px 22px}
.side-panel .small{display:block;font:800 9px ui-monospace,Consolas,monospace;color:#85e5c4;letter-spacing:.13em}
.side-panel h2{font-size:23px;line-height:1.1;letter-spacing:-.04em;margin:14px 0}
.side-panel p{font-size:13px;color:#b2cdd2;line-height:1.75}
.side-panel a{display:block;border-top:1px solid #2e5260;padding:12px 0;font-size:13px;color:#def8ee}
.side-panel a:hover{color:#9ef5cd}
.note{border-left:3px solid #27aa8d;padding:12px 17px;background:#e4f5ee;color:#27675b;font-size:13px;line-height:1.7;border-radius:0 10px 10px 0}
.related{padding:64px 0 78px;border-top:1px solid #203e4b}
.related h2{font-size:clamp(1.8rem,3.5vw,2.7rem);letter-spacing:-.055em;margin:0 0 27px}
.card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}
.related-card{display:block;min-height:160px;padding:27px 24px;background:linear-gradient(145deg,#0e2a38,#0a1b29);border:1px solid #2b5360;border-radius:16px;transition:transform .2s,border-color .2s}
.related-card:hover{transform:translateY(-3px);border-color:#74c6aa}
.related-card small{display:block;color:#7cdabb;font:750 10px ui-monospace,Consolas,monospace;letter-spacing:.12em}
.related-card strong{display:block;font-size:21px;line-height:1.3;margin:16px 0 8px}
.related-card span{display:block;color:#9fbfc8;font-size:12px}
.site-footer{border-top:1px solid #28444e;padding:28px 0 42px}
.site-footer .container{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap}
.site-footer p{color:#a3bdc5;font-size:12px;margin:0}
.site-footer a{color:#9bedd0;text-decoration:underline;text-underline-offset:3px}
@media(max-width:920px){.intro-layout{gap:26px}.intro h1{font-size:clamp(2.8rem,6.5vw,4.5rem)}.article-layout .container{grid-template-columns:1fr}.side-panel{position:static;max-width:720px}.card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:670px){.container{width:min(100% - 34px,1160px)}.site-top .container{padding-block:14px;align-items:flex-start;flex-direction:column;gap:14px}.site-links{gap:9px 15px}.site-links .cta{padding:8px 12px}.intro{padding:19px 0 50px}.intro-layout{grid-template-columns:1fr;gap:36px}.intro h1{font-size:clamp(2.5rem,10.5vw,4.1rem)}.identity-visual{width:min(100%,400px);margin:0 auto;transform:none}.code-visual{min-height:210px}.article-layout{padding:45px 0 55px}.article-section{margin-bottom:46px}.article-section h2{font-size:1.9rem}.card-grid{grid-template-columns:1fr}.related{padding:50px 0}.site-footer .container{align-items:flex-start;flex-direction:column}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.button,.related-card{transition:none}}