/* Studio: high-contrast editorial alternative. Editorial keeps the light theme. */
.theme-toggle{border:1px solid #d5d5d5;background:transparent;color:inherit;font:500 12px 'DM Sans',sans-serif;border-radius:25px;padding:10px 15px;white-space:nowrap}.header-link{display:none}html[data-theme=studio]{color-scheme:dark;--paper:#0c0c0e;--ink:#f7f7f7;--muted:#a3a3aa;--line:#303035}html[data-theme=studio] body{background:#0c0c0e;color:#f7f7f7}html[data-theme=studio] header{height:94px;border-color:#303035}html[data-theme=studio] .brand,html[data-theme=studio] .brand-dot{color:#fff}html[data-theme=studio] .brand-logo{outline:1px solid #414148;border-radius:11px}html[data-theme=studio] .navlink{color:#9d9da6}html[data-theme=studio] .navlink.active{color:#fff}html[data-theme=studio] .tiny{background:#e6e6eb;color:#171719;border-color:#e6e6eb}html[data-theme=studio] .theme-toggle{border-color:#44444b;background:#1b1b1f}html[data-theme=studio] .intro{padding:56px 0 40px;position:relative}html[data-theme=studio] .intro>.eyebrow{font-size:10px;color:#d0d0d5;letter-spacing:2px}html[data-theme=studio] .intro .asterisk{color:#fff;font-size:25px}html[data-theme=studio] .intro h1{font-size:clamp(60px,8.3vw,112px);font-weight:750;line-height:.98;letter-spacing:-.065em;margin:25px 0 29px;max-width:1000px}html[data-theme=studio] .intro h1>span{color:#8c8c98}html[data-theme=studio] .intro p{color:#a0a0ac;font-size:15px;line-height:1.6}html[data-theme=studio] .explore{color:white}html[data-theme=studio] .explore span{background:#eee;color:#111;border-color:#eee}html[data-theme=studio] .featured{display:grid;grid-template-columns:1.02fr 1fr;background:#161619;border:1px solid #34343b;border-radius:4px;min-height:470px}html[data-theme=studio] .feature-copy{order:2;padding:40px 42px;display:flex;flex-direction:column;align-items:start;position:relative}html[data-theme=studio] .feature-copy>.eyebrow{width:100%;font-size:10px;color:#c1c1cc}html[data-theme=studio] .green-dot{background:#fff}html[data-theme=studio] .sample{color:#868691}html[data-theme=studio] .pill{background:transparent;border-color:#45454e;border-radius:30px;color:#d4d4dc;font-size:11px;margin-top:37px}html[data-theme=studio] .feature-copy h2{font-size:clamp(29px,3.2vw,43px);font-weight:650;letter-spacing:-.045em;margin:21px 0 12px}html[data-theme=studio] .feature-copy p{color:#a2a2ad;font-size:15px;line-height:1.7;margin:0}html[data-theme=studio] .read-button{background:#f5f5f7;color:#111;border-radius:3px;padding:13px 18px;font-weight:600;display:inline-flex}html[data-theme=studio] .read-button:hover{background:#d5d5e0}html[data-theme=studio] .byline{color:#ddd;margin-top:24px}html[data-theme=studio] .avatar{background:#33333b;color:white}html[data-theme=studio] .muted{color:#90909c}html[data-theme=studio] .feature-art{order:1;min-height:470px;border-right:1px solid #34343b}html[data-theme=studio] .feature-image{object-fit:cover}html[data-theme=studio] .art-badge{top:24px;left:24px;font-size:9px}html[data-theme=studio] .image-caption{background:linear-gradient(transparent,#0009);bottom:0;left:0;right:0;padding:35px 24px 20px;font-size:9px}html[data-theme=studio] .latest{padding-top:58px}html[data-theme=studio] .section-heading h2{font-size:40px;color:white;letter-spacing:-1.8px}html[data-theme=studio] .section-heading h2>span{color:#92929e}html[data-theme=studio] .section-heading .eyebrow{color:#9999a5;font-size:9px}html[data-theme=studio] .post-count{color:#858592}html[data-theme=studio] .filter-row{border-color:#303035;margin-top:25px;margin-bottom:30px}html[data-theme=studio] .filter{color:#a3a3b0;border-radius:30px;padding:9px 17px}html[data-theme=studio] .filter.selected{background:#ededf0;color:#111;border-color:#ededf0}html[data-theme=studio] .filter span{background:#d4d4da;color:#222}html[data-theme=studio] .sample-note{color:#8b8b98}html[data-theme=studio] .post-grid{gap:42px 26px}html[data-theme=studio] .post-art{height:270px;border:1px solid #303038;border-radius:4px}html[data-theme=studio] .post-card h3{color:#f3f3f7;font-size:24px;line-height:1.35;letter-spacing:-.65px;margin:12px 0}html[data-theme=studio] .post-card .category{font-size:10px;letter-spacing:1.4px;color:#aaaab9;margin-top:20px}html[data-theme=studio] .post-card .meta{color:#82828e;font-size:11px}html[data-theme=studio] .project-hint{background:#111;color:#fff}html[data-theme=studio] .about{background:#19191e;border:1px solid #303038;border-radius:4px;padding:38px;gap:30px}html[data-theme=studio] .about-icon{color:white;font-size:70px}html[data-theme=studio] .about h2{font-size:31px;color:#eee}html[data-theme=studio] .about p,html[data-theme=studio] .about-sign{color:#93939f}html[data-theme=studio] footer{padding:36px 0}html[data-theme=studio] footer>span{color:#8e8e9b}html[data-theme=studio] dialog{background:#17171c;color:#f4f4f5;border-color:#41414a}html[data-theme=studio] dialog p{color:#aaaab7}html[data-theme=studio] .draft-notice{background:#282830}html[data-theme=studio] .close{color:white}html[data-theme=studio] .live-demo{background:#23232b;border-color:#414149}html[data-theme=studio] .demo-controls select{background:#17171b;color:white;border-color:#484851}html[data-theme=studio] .demo-bars i{background:#c5c5d2}html[data-theme=studio] .prose{color:#c0c0ce}html[data-theme=studio] .prose h2{color:#f4f4f8}html[data-theme=studio] .prose pre{border:1px solid #373740;background:#16161a!important}html[data-theme=studio] .prose :not(pre)>code{background:#292931;color:#ededf3}html[data-theme=studio] .prose th{background:#222229;color:#eee}html[data-theme=studio] .prose td,html[data-theme=studio] .prose th{border-color:#3c3c46}html[data-theme=studio] .series-nav,html[data-theme=studio] .series-nav>a{border-color:#35353e}html[data-theme=studio] .article-description{color:#a2a2af}html[data-theme=studio] .article-cover{border-radius:4px}html[data-theme=studio] .mini-dash,html[data-theme=studio] .swatch{color:#161616}
@media(max-width:950px){html[data-theme=studio] .intro h1{font-size:83px}html[data-theme=studio] .feature-copy{padding:30px}html[data-theme=studio] .feature-copy h2{font-size:32px}html[data-theme=studio] .post-art{height:240px}html[data-theme=studio] .post-card h3{font-size:22px}header nav{gap:18px}.theme-toggle{padding:9px 12px;font-size:11px}}
@media(max-width:680px){header{flex-wrap:wrap;height:auto!important;min-height:98px;padding:18px 0;row-gap:12px;column-gap:12px}header .brand{font-size:25px}header nav{order:3;width:100%;justify-content:space-between}.theme-toggle{margin-left:auto}html[data-theme=studio] .intro{padding:38px 0 30px}html[data-theme=studio] .intro h1{font-size:clamp(56px,12vw,78px);line-height:1.02;margin-top:24px}html[data-theme=studio] .intro p{font-size:13px}html[data-theme=studio] .intro>.eyebrow{font-size:8px;letter-spacing:1.6px}html[data-theme=studio] .featured{grid-template-columns:1fr}html[data-theme=studio] .feature-art{min-height:300px;border-right:0;border-bottom:1px solid #333}html[data-theme=studio] .feature-copy{padding:28px}html[data-theme=studio] .pill{margin-top:24px}html[data-theme=studio] .feature-copy h2{font-size:36px}html[data-theme=studio] .post-art{height:200px}html[data-theme=studio] .post-card h3{font-size:19px}html[data-theme=studio] .section-heading h2{font-size:32px}html[data-theme=studio] .filter{font-size:11px;padding:8px 11px}html[data-theme=studio] .about{padding:26px 20px;gap:17px}html[data-theme=studio] .about-icon{font-size:45px}html[data-theme=studio] .about h2{font-size:26px}}
@media(max-width:420px){html[data-theme=studio] .post-art{height:260px}}