.article-page{max-width:1480px;margin:0 auto;padding:26px 28px 78px;color:#e9e9eb}.article-breadcrumb{display:flex;align-items:center;gap:8px;color:#757780;font-size:.76rem;margin-bottom:18px;white-space:nowrap;overflow:hidden}.article-breadcrumb a{color:#aeb0b6;text-decoration:none}.article-breadcrumb span{overflow:hidden;text-overflow:ellipsis}.article-breadcrumb i{font-size:.65rem}.article-hero{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(320px,.75fr);min-height:430px;border:1px solid rgba(255,255,255,.1);border-radius:23px;overflow:hidden;background:radial-gradient(circle at 10% 10%,rgba(220,49,56,.21),transparent 35%),#141517}.article-hero:not(:has(.article-hero-media)){display:block;min-height:0}.article-hero-copy{display:flex;flex-direction:column;justify-content:center;padding:clamp(30px,5vw,70px)}.article-label{align-self:flex-start;border:1px solid #68272c;background:#301719;border-radius:999px;color:#ff7378;padding:7px 11px;font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em}.article-hero h1{font-size:clamp(2rem,4.25vw,4rem);line-height:1.08;letter-spacing:-.045em;font-weight:900;margin:18px 0 14px;color:#fff}.article-hero-copy>p{max-width:790px;color:#b7b8be;font-size:1.05rem;line-height:1.7;margin:0}.article-meta{display:flex;align-items:center;gap:12px;margin-top:30px}.article-meta>i{width:1px;height:28px;background:#37393f}.article-meta>span:not(.article-author-avatar){display:flex;flex-direction:column}.article-meta small{font-size:.65rem;color:#747781}.article-meta strong{font-size:.78rem;color:#d7d8dc}.article-author-avatar{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:#df353c;color:#fff;font-weight:850}.article-hero-media{min-height:430px;position:relative}.article-hero-media:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#151618,transparent 28%);z-index:1}.article-hero-media img{width:100%;height:100%;object-fit:cover}.article-layout{display:grid;grid-template-columns:220px minmax(0,780px) 240px;justify-content:center;gap:30px;align-items:start;margin-top:34px}.article-toc,.article-side{position:sticky;top:24px}.article-toc>div,.article-help-card,.article-share{border:1px solid rgba(255,255,255,.1);border-radius:14px;background:#141517;padding:16px}.article-toc span,.article-share>span{display:block;color:#f3f3f4;font-size:.75rem;font-weight:800;margin-bottom:10px;text-transform:uppercase;letter-spacing:.05em}.article-toc nav{display:flex;flex-direction:column;gap:3px}.article-toc a{color:#92949c;text-decoration:none;font-size:.74rem;line-height:1.4;padding:7px 8px;border-left:2px solid #34363b}.article-toc a:hover{color:#ff6a70;border-color:#e43b42}.article-toc a.is-sub{padding-left:17px;font-size:.7rem}.article-body{min-width:0;color:#d7d7da;font-size:1.03rem;line-height:1.86}.article-body>p:first-child{font-size:1.12rem}.article-body h1,.article-body h2,.article-body h3,.article-body h4{scroll-margin-top:22px;color:#fff;line-height:1.28;font-weight:850;letter-spacing:-.025em}.article-body h2{font-size:1.75rem;margin:2em 0 .75em;padding-bottom:10px;border-bottom:1px solid #2f3136}.article-body h3{font-size:1.35rem;margin:1.6em 0 .6em}.article-body p{margin:0 0 1.25em}.article-body a{color:#ff6f74}.article-body ul,.article-body ol{padding-left:1.35em;margin:0 0 1.4em}.article-body li{margin:.45em 0;padding-left:.25em}.article-body strong{color:#fff}.article-body blockquote{margin:1.6em 0;border:1px solid #593035;border-left:4px solid #e33b42;border-radius:0 12px 12px 0;background:#211719;padding:17px 20px;color:#e8cacc}.article-body img{display:block;max-width:100%;height:auto;border:1px solid #34363b;border-radius:14px;margin:1.7em auto}.article-body figure{margin:1.8em 0;text-align:center}.article-body figcaption{color:#81838c;font-size:.78rem;margin-top:-.9em}.article-body hr{border:0;border-top:1px solid #34363b;margin:2.2em 0}.article-body pre{background:#0b0c0e;border:1px solid #303238;border-radius:12px;padding:17px;overflow:auto}.article-body table{display:block;width:100%;overflow-x:auto;border-collapse:collapse;margin:1.7em 0}.article-body th,.article-body td{border:1px solid #3a3c42;padding:10px 12px;min-width:130px}.article-body th{background:#261719;color:#ff8589}.article-body .article-callout{background:#12241c;border:1px solid #22573f;border-radius:12px;padding:17px 19px;color:#b9dfcc}.article-body .article-warning{background:#2b2112;border:1px solid #6f521f;border-radius:12px;padding:17px 19px;color:#f2d18d}.article-body .article-steps{counter-reset:step;list-style:none;padding:0}.article-body .article-steps li{counter-increment:step;position:relative;margin:13px 0;padding:14px 15px 14px 52px;border:1px solid #34363b;border-radius:11px;background:#141517}.article-body .article-steps li:before{content:counter(step);position:absolute;left:14px;top:13px;width:25px;height:25px;border-radius:8px;display:grid;place-items:center;background:#df353c;color:#fff;font-weight:800}.article-help-card>span{display:grid;place-items:center;width:42px;height:42px;border-radius:11px;background:#311719;color:#ff6c71;font-size:1.2rem}.article-help-card h2{font-size:1rem;margin:13px 0 7px}.article-help-card p{font-size:.76rem;line-height:1.55;color:#858791}.article-help-card a{display:flex;align-items:center;justify-content:space-between;color:#ff6d72;font-size:.75rem;font-weight:800;text-decoration:none}.article-share{margin-top:12px}.article-share button{width:100%;border:1px solid #383a40;border-radius:9px;background:#1c1d21;color:#c8c9ce;padding:9px;font-size:.73rem}.article-related{margin-top:65px;padding-top:35px;border-top:1px solid #2b2d32}.article-related-heading span{color:#ff6268;text-transform:uppercase;letter-spacing:.1em;font-weight:800;font-size:.7rem}.article-related-heading h2{font-size:1.8rem;margin:4px 0 0}.article-related-heading a{color:#b5b6bc;text-decoration:none;font-size:.78rem}.article-related-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.article-related-grid>a{display:flex;flex-direction:column;border:1px solid rgba(255,255,255,.1);border-radius:14px;background:#141517;padding:18px;color:inherit;text-decoration:none;transition:.2s}.article-related-grid>a:hover{transform:translateY(-3px);border-color:#743037}.article-related-grid span{font-size:.68rem;color:#777a83}.article-related-grid h3{font-size:1rem;line-height:1.4;margin:9px 0}.article-related-grid p{font-size:.76rem;color:#888b93;line-height:1.5;flex:1}.article-related-grid strong{font-size:.72rem;color:#ff686e}
@media(max-width:1180px){.article-layout{grid-template-columns:190px minmax(0,1fr)}.article-side{display:none}.article-related-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:850px){.article-hero{grid-template-columns:1fr}.article-hero-media{min-height:250px;order:-1}.article-hero-media:before{background:linear-gradient(0deg,#151618,transparent 35%)}.article-layout{display:block}.article-toc{position:static;margin-bottom:24px}.article-meta{flex-wrap:wrap}.article-layout{margin-top:25px}}
@media(max-width:600px){.article-page{padding:17px 14px 55px}.article-hero{border-radius:17px}.article-hero-copy{padding:24px 17px}.article-hero h1{font-size:2rem}.article-meta>i{display:none}.article-meta{gap:10px 15px}.article-body{font-size:.96rem}.article-body h2{font-size:1.5rem}.article-related-grid{grid-template-columns:1fr}.article-related-heading{align-items:flex-start;flex-direction:column}}

/* Compact article header and keep numbered steps visually centered. */
.article-hero{min-height:360px;border-radius:20px}
.article-hero-copy{padding:clamp(26px,4vw,52px)}
.article-label{padding:6px 10px;font-size:.66rem}
.article-hero h1{max-width:980px;font-size:clamp(1.85rem,3.4vw,3.2rem);line-height:1.12;margin:14px 0 11px}
.article-hero-copy>p{font-size:.96rem;line-height:1.62}
.article-meta{margin-top:22px}
.article-author-avatar{width:33px;height:33px;font-size:.8rem}
.article-hero-media{min-height:360px}
.article-layout{margin-top:30px}
.article-body{font-size:1rem;line-height:1.78}
.article-body>p:first-child{font-size:1.06rem}
.article-body h2{font-size:1.5rem;line-height:1.25;margin:1.65em 0 .65em;padding-bottom:8px}
.article-body h3{font-size:1.22rem;margin:1.4em 0 .55em}
.article-body p{margin-bottom:1.05em}
.article-body .article-steps li{display:flex;align-items:center;min-height:54px;margin:9px 0;padding:11px 14px 11px 49px;border-radius:10px;line-height:1.55}
.article-body .article-steps li:before{left:13px;top:50%;width:24px;height:24px;transform:translateY(-50%);border-radius:7px;font-size:.78rem;line-height:1;font-weight:850;font-variant-numeric:tabular-nums}

@media(max-width:850px){.article-hero{min-height:0}.article-hero-media{min-height:230px}.article-layout{margin-top:22px}}
@media(max-width:600px){.article-hero-copy{padding:21px 16px}.article-hero h1{font-size:1.72rem;line-height:1.16}.article-hero-copy>p{font-size:.9rem}.article-meta{margin-top:18px}.article-body h2{font-size:1.3rem;margin-top:1.45em}.article-body h3{font-size:1.12rem}.article-body .article-steps li{min-height:48px;margin:8px 0;padding:10px 11px 10px 43px;line-height:1.48}.article-body .article-steps li:before{left:11px;width:22px;height:22px;font-size:.73rem}}

/* Category navigation in the article sidebar. */
.article-category-card{padding:15px;border:1px solid rgba(255,255,255,.1);border-radius:14px;background:#141517}
.article-category-card header{display:flex;align-items:center;gap:10px;padding-bottom:12px;border-bottom:1px solid #2d2f34}
.article-category-card header>span{display:grid;place-items:center;width:36px;height:36px;flex:0 0 auto;border:1px solid #682a30;border-radius:10px;background:#301719;color:#ff6e74}
.article-category-card header>div{display:flex;min-width:0;flex-direction:column}
.article-category-card header small{color:#777a83;font-size:.58rem;font-weight:750;text-transform:uppercase;letter-spacing:.06em}
.article-category-card header strong{margin-top:2px;color:#f1f1f3;font-size:.79rem}
.article-category-links{display:flex;flex-direction:column;gap:5px;padding:10px 0}
.article-category-links a{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:36px;padding:7px 9px;border:1px solid transparent;border-radius:9px;color:#9a9ca4;font-size:.71rem;font-weight:700;text-decoration:none;transition:.18s}
.article-category-links a:hover{border-color:#3a3c42;background:#1c1d21;color:#fff}
.article-category-links a.is-active{border-color:#6b2b31;background:#30191c;color:#ff7479}
.article-category-links a>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.article-category-links small{display:grid;place-items:center;min-width:23px;height:21px;padding:0 6px;border-radius:999px;background:#27292e;color:#c9cad0;font-size:.59rem;font-variant-numeric:tabular-nums}
.article-category-links a.is-active small{background:#552329;color:#ff8b90}
.article-category-all{display:flex;align-items:center;justify-content:space-between;padding-top:11px;border-top:1px solid #2d2f34;color:#ff6d72;font-size:.69rem;font-weight:800;text-decoration:none}
.article-category-card+.article-help-card{margin-top:12px}

/* More compact article introduction card. */
.article-hero {
    min-height: 300px;
    border-radius: 18px;
}

.article-body .article-inline-toc {
    margin: 0 0 1.35em;
    padding: 15px 17px;
    border: 1px solid #34363b;
    border-radius: 12px;
    background: #141517;
}
.article-body .article-inline-toc > strong { display:block; margin-bottom:8px; color:#ff7378; }
.article-body .article-inline-toc ol { margin:0; padding-left:1.25em; }
.article-body .article-inline-toc li { margin:.25em 0; }

.article-hero-copy {
    padding: clamp(23px, 3.2vw, 40px);
}

.article-hero h1 {
    max-width: 1080px;
    margin: 12px 0 9px;
    font-size: clamp(1.7rem, 2.7vw, 2.6rem);
    line-height: 1.13;
    letter-spacing: -.035em;
}

.article-hero-copy > p {
    max-width: 920px;
    font-size: .88rem;
    line-height: 1.55;
}

.article-label {
    padding: 5px 9px;
    font-size: .62rem;
}

.article-meta {
    gap: 10px;
    margin-top: 17px;
}

.article-meta > i {
    height: 24px;
}

.article-meta small {
    font-size: .6rem;
}

.article-meta strong {
    font-size: .72rem;
}

.article-author-avatar {
    width: 31px;
    height: 31px;
    font-size: .74rem;
}

.article-hero-media {
    min-height: 300px;
}

@media (max-width: 600px) {
    .article-hero-copy {
        padding: 18px 15px;
    }

    .article-hero h1 {
        margin-top: 10px;
        font-size: 1.48rem;
        line-height: 1.17;
    }

    .article-hero-copy > p {
        font-size: .84rem;
    }

    .article-meta {
        margin-top: 15px;
    }
}