:root{--dark:#211757;--ink:#211b45;--sub:#625f78;--sun:#ffe14d;--pink:#ff4f96;--blue:#4169ff;--mint:#55d6a7;--paper:#f8f6ff;--line:#dddaf0;font-family:Tahoma,Arial,sans-serif}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(circle at 10% 20%,#ff4f9612,transparent 22%),radial-gradient(circle at 90% 65%,#55d6a71a,transparent 25%),var(--paper);color:var(--ink);font-size:16px}
.wrap{width:min(820px,calc(100% - 32px));margin:auto}
header{position:relative;overflow:hidden;background:radial-gradient(circle at 12% 20%,#ff4f9666,transparent 25%),radial-gradient(circle at 88% 60%,#4169ff88,transparent 28%),linear-gradient(135deg,#211757,#3b2aa4 60%,#137ab3);color:white}
.nav{width:min(1100px,calc(100% - 32px));height:72px;margin:auto;display:flex;align-items:center;justify-content:space-between}
.logo{font-weight:900;color:white;text-decoration:none}
.back{color:var(--sun);text-decoration:none;font-weight:700}
.hero{padding:62px 0 70px}
.tag{color:var(--sun);font-weight:900}
.hero h1{font-size:clamp(2.2rem,6vw,4.3rem);line-height:1.45;letter-spacing:-.05em;margin:14px 0}
.lead{font-size:1.1rem;line-height:2;color:#d7ddeb;max-width:700px}
.meta{color:#aeb8cb;font-size:.86rem}
.article{background:white;margin-top:32px;margin-bottom:50px;padding:clamp(24px,6vw,56px);border:3px solid var(--ink);border-radius:22px;box-shadow:10px 12px 0 var(--sun)}
.article h2{font-size:1.6rem;line-height:1.7;margin:2.2em 0 .6em}
.article h2:first-child{margin-top:0}
.article h3{font-size:1.15rem;margin:1.8em 0 .5em}
.article p,.article li{line-height:2.15}
.article ul,.article ol{padding-right:1.3rem}
.box{background:linear-gradient(135deg,#fff8c9,#ffe89a);border:2px solid var(--ink);border-right:7px solid var(--pink);padding:20px 22px;border-radius:13px;margin:28px 0;box-shadow:5px 6px 0 #ff4f9633}
.box strong{display:block;margin-bottom:7px}
.steps{counter-reset:step;display:grid;gap:10px;margin:24px 0}
.step{position:relative;padding:17px 58px 17px 18px;background:linear-gradient(90deg,#f1edff,#fff);border:1px solid #d8d0ff;border-radius:13px}
.step:before{counter-increment:step;content:counter(step);position:absolute;right:15px;top:15px;width:30px;height:30px;display:grid;place-items:center;border-radius:9px;background:var(--dark);color:var(--sun);font-weight:900}
.related{display:grid;gap:10px;margin-top:35px}
.related a{display:block;padding:16px 18px;border:1px solid var(--line);border-radius:12px;color:var(--ink);text-decoration:none;font-weight:700}
.related a{background:#fff;border-width:2px;box-shadow:4px 5px 0 #55d6a7}.related a:nth-child(2){box-shadow-color:#ff8b61}.related a:nth-child(3){box-shadow-color:#ffe14d}.related a:hover{border-color:var(--pink);transform:translateY(-2px)}
footer{text-align:center;color:var(--sub);padding:25px}
@media(max-width:600px){.hero{padding:42px 0 50px}
.article{border-radius:16px}
.nav{height:64px}
.back{font-size:.85rem}
}

:root{--dark:#101526;--ink:#182038;--sun:#ffe14d}
header{background:linear-gradient(115deg,#101526,#26344f)}
.logo{display:flex;gap:9px;align-items:center}
a:focus-visible,button:focus-visible{outline:3px solid #c77b00;outline-offset:4px}
.skip-link{position:absolute;top:0;right:10px;transform:translateY(-150%);z-index:10;background:#ffe14d;color:#101526;padding:12px}
.skip-link:focus{transform:none}
.breadcrumbs,.editor-note{font-size:.9rem;line-height:2;color:#545e70;margin-block:20px}
.article a{color:#253f8f;text-underline-offset:4px}.article blockquote{margin:22px 0;padding:18px;border-right:5px solid #d39a00;background:#fff8d9;line-height:2}
.topic-paths{padding:20px 28px;background:#ffe14d;border-right:8px solid #101526;line-height:2.2}
.topic-paths a{color:#101526}
.article{overflow-wrap:anywhere}
@media(max-width:600px){.article{padding:20px;box-shadow:4px 6px 0 var(--sun)}.nav{gap:12px;min-height:64px;height:auto;padding-block:12px;flex-wrap:wrap}.meta{font-size:.9rem}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.directory-nav{display:flex;flex-wrap:wrap;gap:10px;margin:26px 0}.directory-nav a{display:inline-block;padding:10px 14px;border:2px solid var(--ink);border-radius:999px;background:#fff8c9;color:var(--ink);font-weight:800;text-decoration:none}.profile-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:18px 0 34px}.profile-card{display:flex;flex-direction:column;gap:7px;padding:18px;border:2px solid var(--line);border-radius:14px;background:#fff;color:var(--ink)!important;text-decoration:none;box-shadow:4px 5px 0 #55d6a7;transition:transform .2s,border-color .2s}.profile-card:nth-child(2n){box-shadow-color:#ffe14d}.profile-card:hover{transform:translateY(-2px);border-color:var(--pink)}.profile-card strong{line-height:1.8}.profile-card span{color:var(--sub);line-height:1.9;font-size:.93rem}@media(max-width:650px){.profile-grid{grid-template-columns:1fr}.directory-nav a{width:100%;text-align:center}}
.table-wrap{overflow-x:auto;margin:14px 0 34px;border:2px solid var(--ink);border-radius:14px;background:#fff}.table-wrap:focus{outline:3px solid #c77b00;outline-offset:3px}.rank-table{width:100%;min-width:520px;border-collapse:collapse}.rank-table th,.rank-table td{padding:12px 15px;border-bottom:1px solid var(--line);text-align:right;line-height:1.8}.rank-table th{background:#101526;color:#fff}.rank-table td:first-child{width:72px;font-weight:900;color:#253f8f}.rank-table tbody tr:nth-child(even){background:#f8f6ff}.rank-table tbody tr:last-child td{border-bottom:0}