:root{--ink:#211f36;--purple:#6942e9;--orange:#ff6533;--yellow:#ffd960;--cream:#fff8ec;--muted:#615e70;--white:#fff}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--ink);font-family:Inter,Arial,sans-serif}
a{color:inherit;text-decoration:none}
.top{min-height:76px;background:#17152a;color:#fff;padding:12px 5vw;display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{display:flex;align-items:center;gap:10px;background:#fff;border-radius:15px;padding:8px 12px}
.brand img{width:145px;height:auto}
.vip{background:var(--yellow);color:var(--ink);border-radius:999px;padding:5px 7px;font-size:9px;font-weight:950}
.back{font-size:11px;font-weight:900}
.hero{padding:76px max(5vw,22px) 54px;background:var(--purple);color:#fff}
.hero small{color:var(--yellow);font-weight:950;letter-spacing:.08em;text-transform:uppercase}
.hero h1{max-width:1080px;margin:25px 0;font-size:clamp(43px,6.6vw,82px);line-height:.94;letter-spacing:-.05em}
.hero p{max-width:820px;margin:0;color:#e7e2fb;font-size:15px;line-height:1.75}
.cover{max-width:1180px;margin:34px auto 0;padding:0 22px}
.cover img{display:block;width:100%;height:auto;border:2px solid var(--ink);border-radius:28px;box-shadow:0 8px 0 var(--ink);background:#fff}
.article-wrap{max-width:1180px;margin:auto;padding:60px 22px 90px;display:grid;grid-template-columns:255px minmax(0,760px);gap:68px;justify-content:center}
.toc{position:sticky;top:20px;align-self:start;padding:20px;border:2px solid var(--ink);border-radius:18px;background:#fff;box-shadow:0 5px 0 var(--ink)}
.toc>small{color:var(--orange);font-weight:950}
.toc a{display:grid;grid-template-columns:28px 1fr;gap:8px;padding:10px 0;border-top:1px solid #e5ddd2;font-size:10px;line-height:1.35;font-weight:800}
.toc a:first-of-type{margin-top:12px}.toc b{color:var(--purple)}
.copy section{padding-bottom:42px;margin-bottom:42px;border-bottom:1px solid #d8d0c5}
.copy .num{font-size:11px;font-weight:950;color:var(--orange)}
.copy h2{font-size:clamp(29px,3.3vw,45px);line-height:1.04;letter-spacing:-.035em;margin:9px 0 24px}
.copy h3{font-size:20px;margin:26px 0 9px}
.copy p{font-size:16px;line-height:1.88;color:#454355;margin:0 0 20px}
.copy ul{list-style:none;padding:0;margin:22px 0;display:grid;gap:10px}
.copy li{position:relative;padding:13px 15px 13px 41px;border:1px solid #e0d8cc;border-radius:13px;background:#fff;color:#4a485b;line-height:1.58}
.copy li:before{content:'✓';position:absolute;left:15px;top:12px;color:var(--purple);font-weight:950}
.note{padding:22px;border:2px solid var(--ink);border-radius:18px;background:var(--yellow);box-shadow:0 5px 0 var(--ink);margin:25px 0;line-height:1.65}
.related{max-width:1080px;margin:0 auto 80px;padding:0 22px}
.related h2{font-size:34px;letter-spacing:-.03em}
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}
.related a{min-height:150px;padding:20px;border:2px solid var(--ink);border-radius:18px;background:#fff;box-shadow:0 5px 0 var(--ink);font-size:16px;font-weight:900;line-height:1.25}
.related small{display:block;margin-bottom:18px;color:var(--orange);font-size:9px;text-transform:uppercase}
.footer{padding:30px 5vw;background:#17152a;color:#aaa7ba;display:flex;justify-content:space-between;gap:24px;font-size:10px}.footer a{color:#fff;font-weight:900}
@media(max-width:800px){.top{min-height:66px;padding:9px 14px}.brand img{width:110px}.back{font-size:9px}.hero{padding:55px 16px 42px}.hero h1{font-size:clamp(38px,11vw,58px)}.hero p{font-size:13px}.cover{margin-top:20px;padding:0 14px}.cover img{border-radius:19px;box-shadow:0 5px 0 var(--ink)}.article-wrap{display:block;padding:38px 16px 65px}.toc{display:none}.copy section{padding-bottom:32px;margin-bottom:34px}.copy h2{font-size:32px}.copy p{font-size:15px;line-height:1.8}.related{margin-bottom:60px;padding:0 14px}.related-grid{grid-template-columns:1fr}.footer{flex-direction:column}}