:root{
  color-scheme:dark;
  --bg:#030e1d;
  --bg-deep:#020a15;
  --surface:#07192e;
  --surface-strong:#0a2039;
  --line:#24415f;
  --line-soft:rgba(91,126,163,.28);
  --text:#f7f9fd;
  --muted:#a7b5c8;
  --muted-2:#778aa2;
  --teal:#3ee8d0;
  --blue:#3e9df6;
  --violet:#a47af9;
  --shadow:0 24px 70px rgba(0,0,0,.28);
  --font-ui:"Segoe UI",Inter,Arial,system-ui,sans-serif;
}

*{box-sizing:border-box}
html{min-width:320px;background:var(--bg-deep);scroll-behavior:smooth}
body{min-height:100vh;margin:0;overflow-x:hidden;color:var(--text);font-family:var(--font-ui);background:radial-gradient(circle at 8% 8%,rgba(28,134,150,.13),transparent 27%),radial-gradient(circle at 90% 18%,rgba(38,91,158,.1),transparent 24%),linear-gradient(145deg,var(--bg-deep),var(--bg) 46%,#041329)}
a{color:inherit;text-decoration:none}
a,button{outline-offset:4px}
a:focus-visible{outline:3px solid rgba(62,232,208,.72)}
.guide-shell{width:min(1180px,calc(100% - 48px));margin:0 auto}

.guide-header{min-height:92px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.guide-brand{display:inline-flex;align-items:center;gap:12px}
.guide-brand-mark{width:48px;height:48px;border:1px solid rgba(113,245,226,.48);border-radius:15px;display:grid;place-items:center;color:#fff;background:linear-gradient(145deg,#147d91,#326ceb 58%,#33c985);box-shadow:0 0 26px rgba(43,213,195,.24),inset 0 1px 0 rgba(255,255,255,.28);font-weight:900;font-size:25px}
.guide-brand>span:last-child{display:block}
.guide-brand strong{display:block;font-size:21px;font-weight:900;line-height:1.1;letter-spacing:.03em}
.guide-brand small{display:block;margin-top:5px;color:#bccadb;font-size:12px;line-height:1}
.guide-back{min-height:42px;display:inline-flex;align-items:center;gap:8px;padding:8px 10px;color:#dce5f0;font-size:15px;font-weight:700;transition:color .18s ease,transform .18s ease}
.guide-back:hover{color:#fff;transform:translateX(-2px)}
.guide-back svg{width:21px;height:21px;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

.breadcrumbs{min-height:48px;display:flex;align-items:center;gap:9px;color:#6f849b;font-size:13px}
.breadcrumbs a{color:#9db1c6;transition:color .18s ease}
.breadcrumbs a:hover{color:var(--teal)}
.article-hero{padding:52px 0 48px;border-bottom:1px solid var(--line-soft)}
.article-meta{display:flex;align-items:center;gap:10px 20px;flex-wrap:wrap;color:#87a0b8;font-size:13px;font-weight:700}
.article-meta span{display:inline-flex;align-items:center;gap:8px}
.article-meta span+span::before{content:"";width:4px;height:4px;border-radius:50%;background:#49647f}
.article-meta span:first-child{color:var(--teal)}
.article-hero h1{max-width:920px;margin:18px 0 0;font-size:clamp(44px,6vw,72px);font-weight:900;line-height:1.06;letter-spacing:-.025em}
.article-hero>p{max-width:780px;margin:20px 0 0;color:#b4c1d0;font-size:20px;line-height:1.65}

.article-layout{display:grid;grid-template-columns:220px minmax(0,780px);justify-content:space-between;gap:70px;padding:48px 0 68px}
.article-toc{align-self:start;position:sticky;top:28px;padding:18px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.article-toc>p{margin:0 0 13px;color:#dae3ed;font-size:13px;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
.article-toc nav{display:grid}
.article-toc a{padding:8px 0;color:#8297ad;font-size:13px;line-height:1.35;transition:color .18s ease,transform .18s ease}
.article-toc a:hover{color:var(--teal);transform:translateX(3px)}

.article-content{min-width:0}
.article-intro{padding:0 0 18px}
.article-content p,.article-content li{color:#c5d0dc;font-size:17px;line-height:1.86}
.article-content p{margin:0}
.article-content p+p{margin-top:18px}
.article-intro p:first-child{color:#edf3f8;font-size:20px;line-height:1.72}
.article-section{padding:46px 0 8px;border-top:1px solid var(--line-soft);scroll-margin-top:24px}
.article-section h2,.final-checklist h2,.official-sources h2{margin:0 0 20px;color:#fff;font-size:32px;font-weight:880;line-height:1.2;letter-spacing:-.015em}
.article-section h3{margin:0;color:#f1f6fb;font-size:20px;line-height:1.45}
.article-section>ul{margin:22px 0 0;padding-left:25px}
.article-section>ul li+li{margin-top:9px}
.article-section li::marker{color:var(--teal)}
.method-steps{margin:25px 0 0;padding:0;list-style:none;counter-reset:method-step;display:grid;gap:11px}
.method-steps li{counter-increment:method-step;position:relative;min-height:58px;padding:15px 17px 15px 64px;border:1px solid var(--line-soft);border-radius:12px;background:rgba(9,31,55,.66)}
.method-steps li::before{content:counter(method-step);position:absolute;left:16px;top:14px;width:30px;height:30px;border:1px solid rgba(62,232,208,.42);border-radius:9px;display:grid;place-items:center;color:var(--teal);background:rgba(11,73,78,.34);font-size:13px;font-weight:900}
.practice-example{margin-top:28px;padding:25px 27px;border:1px solid rgba(62,232,208,.28);border-radius:16px;background:linear-gradient(145deg,rgba(9,45,60,.76),rgba(7,26,48,.92));box-shadow:var(--shadow)}
.example-label{margin:0 0 10px!important;color:var(--teal)!important;font-size:12px!important;font-weight:800;text-transform:uppercase;letter-spacing:.12em}
.practice-example blockquote{margin:18px 0 0;padding:0 0 0 20px;border-left:3px solid var(--teal);color:#f3f7fb;font-size:17px;line-height:1.84}
.example-why{margin-top:18px!important;color:#a9bacb!important;font-size:15px!important;line-height:1.7!important}
.example-why strong{color:#dce7f2}

.final-checklist{margin-top:46px;padding:30px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(145deg,rgba(10,34,60,.9),rgba(5,21,40,.92));scroll-margin-top:24px}
.final-checklist ul{margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 24px;list-style:none}
.final-checklist li{display:flex;align-items:flex-start;gap:10px;font-size:15px;line-height:1.55}
.final-checklist li span{width:23px;height:23px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;color:#041b1e;background:var(--teal);font-size:12px;font-weight:900}
.official-sources{margin-top:46px;padding-top:35px;border-top:1px solid var(--line-soft);scroll-margin-top:24px}
.official-sources p{color:#8fa3b8;font-size:14px;line-height:1.7}
.official-sources ul{margin:18px 0 0;padding:0;display:grid;gap:9px;list-style:none}
.official-sources li{font-size:14px;line-height:1.5}
.official-sources a{color:#8cc9e8;transition:color .18s ease}
.official-sources a:hover{color:var(--teal)}

.guide-pagination{margin-top:46px;padding-top:30px;border-top:1px solid var(--line-soft);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}
.guide-pagination a{min-height:110px;padding:20px;border:1px solid var(--line);border-radius:14px;display:flex;flex-direction:column;justify-content:center;background:rgba(7,25,46,.72);transition:border-color .18s ease,background .18s ease,transform .18s ease}
.guide-pagination a:hover{border-color:#357b88;background:#0b2a48;transform:translateY(-2px)}
.guide-pagination span{color:#758ba2;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.07em}
.guide-pagination strong{margin-top:8px;color:#e9f0f7;font-size:16px;line-height:1.4}
.next-guide{text-align:right}
.guide-footer{min-height:82px;margin-bottom:24px;padding:18px 0;border-top:1px solid var(--line-soft);display:flex;align-items:center;justify-content:space-between;gap:20px;color:#71849a;font-size:13px}
.guide-footer a{color:#92a9c0;transition:color .18s ease}
.guide-footer a:hover{color:var(--teal)}

@media(max-width:940px){
  .article-layout{grid-template-columns:1fr;gap:28px}
  .article-toc{position:static;padding:18px;border:1px solid var(--line);border-radius:14px;background:rgba(8,27,48,.68)}
  .article-toc nav{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 18px}
  .article-content{max-width:780px}
}

@media(max-width:620px){
  .guide-shell{width:calc(100% - 20px)}
  .guide-header{min-height:78px;gap:10px}
  .guide-brand{gap:8px}
  .guide-brand-mark{width:42px;height:42px;border-radius:12px;font-size:22px}
  .guide-brand strong{font-size:17px}
  .guide-brand small{font-size:10px}
  .guide-back{max-width:142px;padding-inline:2px;font-size:12px;line-height:1.25}
  .guide-back svg{width:18px;height:18px;flex:0 0 auto}
  .breadcrumbs{overflow-x:auto;white-space:nowrap}
  .article-hero{padding:34px 0 36px}
  .article-meta{gap:8px 13px;font-size:11px}
  .article-hero h1{margin-top:15px;font-size:42px;line-height:1.08}
  .article-hero>p{margin-top:15px;font-size:17px;line-height:1.58}
  .article-layout{padding:28px 0 48px}
  .article-toc nav{grid-template-columns:1fr}
  .article-content p,.article-content li{font-size:16px;line-height:1.78}
  .article-intro p:first-child{font-size:18px}
  .article-section{padding-top:36px}
  .article-section h2,.final-checklist h2,.official-sources h2{font-size:27px}
  .method-steps li{padding-left:58px}
  .practice-example{padding:21px 18px}
  .final-checklist{padding:24px 18px}
  .final-checklist ul{grid-template-columns:1fr}
  .guide-pagination{grid-template-columns:1fr}
  .next-guide{text-align:left}
  .guide-footer{align-items:flex-start;flex-direction:column;padding-inline:4px}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}
}