:root{--article-yellow:#facb26;--article-black:#050505;--article-white:#f7f5ef}.article-page{background:var(--article-black);color:var(--article-white)}.reading-progress{position:fixed;z-index:100;top:0;left:0;width:100%;height:3px;background:rgba(255,255,255,.08);pointer-events:none}.reading-progress i{display:block;width:0;height:100%;background:var(--article-yellow);box-shadow:0 0 12px rgba(250,203,38,.75)}
.article-page-header{position:relative;z-index:10;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;min-height:48px;padding:3.5vw 5.7vw;background:#050505}.article-page-header .brand img{width:clamp(145px,10.5vw,190px);height:auto}
.article-hero{padding:5rem 8vw 7rem;background:radial-gradient(circle at 85% 20%,rgba(250,203,38,.14),transparent 30%),#050505}.article-back{display:inline-block;margin-bottom:5rem;color:rgba(255,255,255,.6);font-size:.68rem;text-decoration:none}.article-back:hover{color:var(--article-yellow)}.article-meta-row,.article-byline{display:flex;justify-content:space-between;gap:2rem;color:rgba(255,255,255,.48);font-size:.62rem;text-transform:uppercase;letter-spacing:.09em}.article-meta-row span:first-child{color:var(--article-yellow)}.article-hero h1{max-width:1450px;margin:2rem 0 2.5rem;font-size:clamp(4.2rem,8.7vw,10.5rem);line-height:.83;letter-spacing:-.072em;font-weight:400;white-space:normal}.article-hero h1 em{color:var(--article-yellow);font-style:normal}.article-lead{max-width:830px;margin:0 0 5rem;color:rgba(255,255,255,.7);font-size:clamp(1.15rem,1.8vw,1.8rem);line-height:1.5}.article-byline{padding-top:1.4rem;border-top:1px solid rgba(255,255,255,.16)}.article-byline strong{color:#fff;font-weight:500}
.article-cover{height:min(67vw,880px);margin:0;overflow:hidden;background:#111}.article-cover img{display:block;width:100%;height:100%;object-fit:cover}
.article-cover-abstract{display:grid;place-items:center;background:radial-gradient(circle at 73% 28%,rgba(250,203,38,.42),transparent 26%),linear-gradient(135deg,#241904,#050505)}.article-cover-abstract span{color:var(--article-yellow);font-size:clamp(4rem,10vw,12rem);line-height:.76;letter-spacing:-.075em}.article-cover-tall img{object-position:center 18%}.article-web-demo{display:grid;gap:1.2rem;margin:0 0 7rem;padding:clamp(2rem,5vw,5rem);border:1px solid rgba(250,203,38,.35);border-radius:24px;background:radial-gradient(circle at 80% 20%,rgba(250,203,38,.18),transparent 35%),#111}.article-web-demo small{color:var(--article-yellow);font-size:.58rem;letter-spacing:.1em}.article-web-demo strong{font-size:clamp(2rem,4vw,4.5rem);line-height:.95;letter-spacing:-.05em;font-weight:400}.article-web-demo span{color:rgba(255,255,255,.5);font-size:.72rem}
.article-layout{display:grid;grid-template-columns:220px minmax(0,800px);justify-content:center;gap:clamp(4rem,8vw,9rem);padding:9rem 6vw;background:#080807}.article-toc{position:sticky;top:2rem;align-self:start;display:grid;gap:.8rem;padding:1.4rem;border:1px solid rgba(255,255,255,.17);border-radius:18px;background:linear-gradient(145deg,rgba(255,255,255,.06),rgba(250,203,38,.025));backdrop-filter:blur(14px)}.article-toc span{margin-bottom:.5rem;padding-bottom:1rem;border-bottom:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.4);font-size:.56rem;text-transform:uppercase;letter-spacing:.1em}.article-toc a{color:rgba(255,255,255,.65);font-size:.66rem;line-height:1.4;text-decoration:none}.article-toc a:hover{color:var(--article-yellow)}
.article-content section{scroll-margin-top:3rem;margin-bottom:7rem}.article-content p{margin:0 0 1.6rem;color:rgba(255,255,255,.68);font-size:1rem;line-height:1.9}.article-content .article-intro{color:#fff;font-size:clamp(1.35rem,2.2vw,2rem);line-height:1.5;letter-spacing:-.025em}.article-content blockquote{margin:4rem 0;padding:2rem 0 2rem 2rem;border-left:3px solid var(--article-yellow);color:#fff;font-size:clamp(1.65rem,3vw,3rem);line-height:1.15;letter-spacing:-.045em}.section-number{display:block;margin-bottom:1.5rem;color:var(--article-yellow);font-size:.62rem;letter-spacing:.12em}.article-content h2{margin:0 0 2.5rem;font-size:clamp(2.7rem,5vw,5.5rem);line-height:.92;letter-spacing:-.06em;font-weight:400}.article-content ul{display:grid;gap:.8rem;margin:2.5rem 0;padding:0;list-style:none}.article-content li{padding:1.15rem 1.2rem;border:1px solid rgba(255,255,255,.13);border-radius:14px;background:rgba(255,255,255,.025);color:rgba(255,255,255,.68);font-size:.86rem;line-height:1.6}.article-content li strong{color:#fff}.article-note{display:grid;grid-template-columns:150px 1fr;gap:2rem;margin-top:3rem;padding:1.5rem;border:1px solid rgba(250,203,38,.38);border-radius:18px;background:rgba(250,203,38,.055)}.article-note strong{color:var(--article-yellow);font-size:.7rem}.article-note span{color:rgba(255,255,255,.75);font-size:.82rem;line-height:1.6}
.article-media{margin:0 0 7rem}.article-media img{display:block;width:100%;border-radius:24px}.article-media figcaption{margin-top:.8rem;color:rgba(255,255,255,.38);font-size:.6rem;line-height:1.5}.article-media-pair{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.article-media-pair img{height:100%;object-fit:cover}.article-checklist{margin-top:3rem;padding:2rem;border-radius:22px;background:var(--article-yellow);color:#080806}.article-checklist h3{margin:0 0 1.5rem;font-size:1.35rem;font-weight:500}.article-checklist>div{display:grid;grid-template-columns:45px 1fr;gap:1rem;padding:1rem 0;border-top:1px solid rgba(5,5,5,.22)}.article-checklist span{font-size:.62rem}.article-checklist p{margin:0;color:#080806;font-size:.8rem;line-height:1.5}.article-conclusion{padding-top:4rem;border-top:1px solid rgba(255,255,255,.15)}
.article-cta{padding:8rem 8vw;background:var(--article-yellow);color:#080806}.article-cta>span{font-size:.7rem}.article-cta h2{max-width:1250px;margin:2rem 0 3rem;font-size:clamp(3.5rem,7vw,8rem);line-height:.86;letter-spacing:-.065em;font-weight:400}.article-cta h2 em{font-style:normal;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.12em}.article-cta>div{display:flex;gap:.7rem}.article-cta a{padding:.95rem 1.4rem;border:1px solid #080806;border-radius:99px;color:#080806;text-decoration:none;font-size:.72rem}.article-cta a:first-child{background:#080806;color:#fff}.article-cta a:hover{box-shadow:0 0 20px rgba(5,5,5,.25)}.next-article{display:flex;justify-content:space-between;align-items:center;gap:3rem;padding:5rem 8vw;background:#080807;color:#fff;text-decoration:none}.next-article small{color:rgba(255,255,255,.45);font-size:.62rem;text-transform:uppercase;letter-spacing:.1em}.next-article strong{max-width:750px;font-size:clamp(1.8rem,4vw,4rem);line-height:1;letter-spacing:-.05em;font-weight:400;text-align:right}.next-article strong span{color:var(--article-yellow)}.article-page-footer{background:#020202}
@media(max-width:1100px){.article-page-header{grid-template-columns:1fr auto;padding:24px}.article-page-header .nav{display:none}.article-layout{grid-template-columns:minmax(0,800px)}.article-toc{position:relative;top:auto;display:none}}
@media(max-width:720px){.article-page-header{min-height:88px;padding:20px}.article-page-header .brand img{width:140px}.article-hero{padding:4rem 20px 5rem}.article-back{margin-bottom:3.5rem}.article-meta-row,.article-byline{align-items:flex-start;flex-direction:column;gap:.6rem}.article-hero h1{font-size:clamp(3.25rem,15vw,5.7rem)}.article-lead{margin-bottom:3rem;font-size:1.05rem}.article-cover{height:82vw}.article-layout{padding:5rem 20px}.article-content section{margin-bottom:5rem}.article-content p{font-size:.94rem;line-height:1.78}.article-content h2{font-size:clamp(2.45rem,12vw,4rem)}.article-content blockquote{margin:3rem 0;padding-left:1.25rem}.article-note{grid-template-columns:1fr;gap:.8rem}.article-media{margin-bottom:5rem}.article-media img{border-radius:18px}.article-media-pair{grid-template-columns:1fr}.article-cta{padding:6rem 20px}.article-cta>div{align-items:stretch;flex-direction:column}.article-cta a{text-align:center}.next-article{align-items:flex-start;flex-direction:column;padding:4rem 20px}.next-article strong{text-align:left}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}