:root{color-scheme:dark;--bg:#0c1212;--panel:#121b1b;--panel-2:#172121;--text:#f2f1e9;--muted:#a8b5af;--line:#2c3b37;--accent:#d5ed7d;--accent-dim:#a6be57;--radius:10px;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-synthesis:none}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:102px}
body{margin:0;background:var(--bg);color:var(--text);line-height:1.65;min-height:100dvh;display:flex;flex-direction:column}
body>main{flex:1}
button,input,textarea{font:inherit}
button,a{-webkit-tap-highlight-color:transparent}
button{cursor:pointer}
button:disabled{cursor:default}
a{color:inherit;text-underline-offset:4px}
a:hover{color:var(--accent)}
button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid var(--accent);outline-offset:5px}
img{display:block;max-width:100%;height:auto}
.icon{width:32px;height:32px;object-fit:contain;image-rendering:pixelated;flex-shrink:0}
[hidden]{display:none!important}
.container{width:min(1160px,calc(100% - 64px));margin-inline:auto}
.skip-link{position:fixed;left:16px;top:-100px;z-index:100;padding:10px 18px;background:var(--accent);color:var(--bg)}
.skip-link:focus{top:12px}
.site-header{position:sticky;top:0;z-index:20;background:#0c1212f2;backdrop-filter:blur(14px);border-bottom:1px solid #ffffff0d}
.header-inner{min-height:82px;display:flex;align-items:center;justify-content:space-between;gap:25px}
.brand{display:inline-flex;align-items:center;gap:11px;text-decoration:none;font-size:24px;font-weight:780;letter-spacing:-1px}
.brand img{width:36px;height:36px;image-rendering:pixelated}
.nav{display:flex;align-items:center;gap:28px}
.nav a{text-decoration:none;font-size:13px;color:#c5ceca}
.nav a:hover,.nav a[aria-current=page]{color:var(--accent)}
.nav .nav-cta{background:transparent;border:1px solid #64713e;border-radius:5px;padding:6px 12px;color:var(--accent);font-size:11px;letter-spacing:.04em}
.nav .nav-cta:disabled{border-color:var(--line);color:var(--muted)}
.menu-toggle{display:none;background:none;border:1px solid var(--line);border-radius:4px;color:var(--text);padding:8px 13px}
.hero{position:relative;isolation:isolate;overflow:hidden;background:#08121b}
.hero-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 65%;z-index:-2}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#08121b99 0%,#08121b80 48%,#08121b22 80%,var(--bg) 100%);z-index:-1}
.hero-content{text-align:center;padding:46px 0 44px}
.eyebrow{display:block;color:var(--accent);font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:11px;font-weight:500;letter-spacing:.15em;text-transform:uppercase;margin:0 0 16px}
.hero .eyebrow{color:#b5c3bf;font-size:10px;margin-bottom:18px}
h1,h2,h3,h4,p{margin-top:0}
h1,h2,h3,h4{line-height:1.13}
h1{font-size:clamp(38px,5vw,66px);letter-spacing:-.055em;font-weight:780;margin-bottom:23px}
h1 span{display:block}
.accent{color:var(--accent)}
.hero-copy{max-width:570px;margin:0 auto 23px;font-size:16px;color:#dce0da;line-height:1.65}
.buttons{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.hero .buttons{justify-content:center}
.button{display:inline-flex;align-items:center;justify-content:center;gap:15px;padding:12px 21px;min-height:47px;background:var(--accent);color:#172010;border:1px solid var(--accent);border-radius:5px;text-decoration:none;font-size:13px;font-weight:650;transition:background .15s,transform .15s}
.button:hover{background:#e5faa0;color:#172010;transform:translateY(-1px)}
.button .icon{width:16px;height:16px}
.button:not(.secondary) .icon{filter:brightness(.15)}
.button.secondary{background:#0d1615a8;color:var(--text);border-color:#697670}
.button.secondary:hover{border-color:var(--accent);color:var(--accent);background:var(--panel)}
.button.small{padding:8px 13px;min-height:37px;font-size:12px}
.button:disabled{opacity:.55;transform:none;background:var(--panel);border-color:var(--line);color:var(--muted)}
.text-link{display:inline-flex;align-items:center;gap:8px;color:var(--accent);font-size:12px;font-weight:550;text-decoration:none}
.text-link:hover{text-decoration:underline}
.text-link .icon{width:16px;height:16px}
.section{padding-block:78px;scroll-margin-top:0}
.section+.section{border-top:1px solid var(--line)}
.section-heading{display:flex;justify-content:space-between;align-items:end;gap:40px;margin-bottom:32px}
.section-heading h2,h2{font-size:clamp(27px,3.3vw,40px);letter-spacing:-.04em;font-weight:730;margin-bottom:12px}
.section-heading p{color:var(--muted);font-size:14px;max-width:470px;margin-bottom:0}
.section-heading .eyebrow{margin-bottom:10px}
.cards{display:grid;gap:17px}
.cards.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.cards.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.section-note{margin:16px 0 0;font-size:11px;color:#8d9c92}
.feature-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:26px;scroll-margin-top:0}
.feature-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}
.feature-top .icon{width:32px;height:32px;color:var(--accent)}
.feature-number{font-size:10px;color:#71867a;font-family:ui-monospace,Consolas,monospace}
.feature-card h3{font-size:19px;letter-spacing:-.025em;margin-bottom:12px}
.feature-card>p{font-size:14px;line-height:1.75;color:var(--muted);margin-bottom:16px}
.feature-card details{font-size:12px;border-top:1px solid var(--line);padding-top:13px}
.feature-card summary{color:var(--accent);cursor:pointer}
.feature-card ul{padding-left:18px;color:var(--muted);line-height:1.8;margin-bottom:0}
.badge{display:inline-block;padding:3px 8px;border:1px solid #4b5945;border-radius:4px;font-size:10px;line-height:1.4;color:#c5d3b2;white-space:nowrap}
.steps{list-style:none;padding:0;counter-reset:steps}
.steps li{counter-increment:steps;display:grid;grid-template-columns:37px 1fr;gap:16px;align-items:start;margin:24px 0}
.steps li::before{content:counter(steps);display:grid;place-items:center;width:33px;height:33px;border:1px solid #627065;border-radius:50%;font-size:12px;color:var(--accent)}
.steps h3{font-size:16px;line-height:1.5;margin:3px 0 4px}
.steps p{font-size:14px;color:var(--muted);margin:0}
.compatibility-note{font-size:12px;color:#bdcabd;margin-top:22px}
.recipe-grid{display:grid;grid-template-columns:1fr 1fr;column-gap:38px}
.recipe{border-top:1px solid var(--line);padding:18px 0}
.recipe p{font-size:13px;color:var(--muted);margin:13px 0 8px}
.recipe .recipe-meta{font-size:10px;font-family:ui-monospace,Consolas,monospace;color:#c8d6b7;letter-spacing:.03em}
.site-footer{border-top:1px solid var(--line);padding:35px 0 24px}
.footer-top{display:flex;justify-content:space-between;align-items:start;gap:35px;margin-bottom:34px}
.footer-brand .brand{font-size:19px}
.footer-brand .brand img{width:32px;height:32px}
.footer-brand p{font-size:11px;color:var(--muted);margin:12px 0 0}
.footer-links{display:flex;gap:25px;flex-wrap:wrap;font-size:12px}
.footer-links a{text-decoration:none;color:#b9c5bc}
.footer-links a:hover,.footer-links a[aria-current=page]{color:var(--accent)}
.footer-bottom{display:flex;justify-content:space-between;gap:25px;font-size:10px;color:#7d9186;border-top:1px solid #27362d;padding-top:18px}
.page-intro{padding:65px 0 42px;border-bottom:1px solid var(--line)}
.page-intro h1{font-size:clamp(38px,4.5vw,58px);max-width:850px;margin-bottom:20px}
.page-intro p{max-width:700px;font-size:16px;color:var(--muted);margin-bottom:0}
.page-content{padding-block:48px 80px}
.article-grid{display:grid;grid-template-columns:200px minmax(0,760px);gap:64px}
.article-grid>div{min-width:0}
.toc{align-self:start;position:sticky;top:114px;display:flex;flex-direction:column;gap:12px}
.toc a{font-size:12px;text-decoration:none;color:var(--muted)}
.toc a:hover{color:var(--accent)}
.toc span{font-size:10px;color:var(--accent);letter-spacing:.1em;text-transform:uppercase;margin-bottom:8px}
.article-section{scroll-margin-top:0;margin-bottom:44px}
.article-section:last-child{margin-bottom:0}
.article-section h2{font-size:27px}
.article-section h3{font-size:17px;margin-top:25px;margin-bottom:12px}
.article-section p,.article-section li{font-size:15px;line-height:1.8;color:#bdc9c1}
.article-section ul,.article-section ol{padding-left:22px}
.article-section li{margin-bottom:8px}
.article-section strong{color:var(--text);font-weight:620}
.article-section code,.package-name{font-family:ui-monospace,Consolas,monospace;font-size:12px;overflow-wrap:anywhere;color:var(--accent)}
.notice{padding:20px 23px;background:#1b241a;border:1px solid #414e33;border-radius:6px;font-size:13px;line-height:1.8;color:#c7d2be}
.notice p{margin:0;font-size:14px}
.notice p+p{margin-top:10px}
.notice strong{color:var(--accent)}
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:6px}
table{border-collapse:collapse;width:100%;font-size:12px;text-align:left}
th{font-weight:600;color:#e0e9d8;background:#17211a}
th,td{padding:15px 18px;border-bottom:1px solid var(--line);vertical-align:top}
td{color:var(--muted)}
tr:last-child td{border-bottom:0}
.faq{border-top:1px solid var(--line);padding:17px 0}
.faq summary{min-height:44px;padding-block:9px;cursor:pointer;font-size:15px;font-weight:600;color:var(--text)}
.faq p{margin:13px 0 0;font-size:15px}
details[open]>summary{color:var(--accent)}
.package-card{min-width:0;padding:27px;border:1px solid var(--line);border-radius:8px;background:var(--panel)}
.package-card h2{font-size:23px;overflow-wrap:anywhere;margin:16px 0}
.package-card p,.package-card li{font-size:15px;line-height:1.75;color:var(--muted)}
.package-card ul{padding-left:18px}
.package-card .badge{color:var(--accent)}
.package-flow{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin:24px 0;font-family:ui-monospace,Consolas,monospace;font-size:12px}
.package-flow span{border:1px solid var(--line);background:var(--panel);padding:14px 18px;border-radius:4px}
.package-flow b{color:var(--accent);font-weight:400}
.legal-page .page-intro .container,.legal-content{max-width:760px;margin-inline:auto}
.legal-content .notice{margin-bottom:35px}
.legal-content .article-section{padding-bottom:28px;border-bottom:1px solid var(--line)}
.not-found{min-height:55vh;display:flex;flex-direction:column;justify-content:center;align-items:start}
.muted{color:var(--muted)}
.spaced-top{margin-top:28px}

@media(min-width:1700px){.hero-content{padding-top:64px}}

@media(max-width:1000px){.nav{gap:18px}
.feature-card{padding:22px}
.article-grid{gap:35px;grid-template-columns:175px 1fr}
.feature-card h3{font-size:17px}
}

@media(max-width:760px){html{scroll-padding-top:90px}.container{width:calc(100% - 36px)}
.hero-art{object-position:25% center}
.hero-content{padding-top:32px}
.hero h1{font-size:clamp(34px,7vw,51px);letter-spacing:-.048em;line-height:1.08}
.hero-copy{font-size:14px;max-width:460px}
.hero::after{background:linear-gradient(180deg,#08121ba6 0%,#08121b99 64%,#08121b22 88%,var(--bg) 100%)}
.hero .eyebrow{font-size:10px;line-height:1.7}
.section{padding-block:50px}
.steps li{grid-template-columns:28px minmax(0,1fr);gap:12px}
.steps li::before{width:28px;height:28px;margin-top:2px}
.section-heading{flex-direction:column;align-items:start;gap:12px;margin-bottom:25px}
.section-heading p{font-size:13px}
.cards.three{grid-template-columns:1fr}
.cards.two{grid-template-columns:1fr}
.feature-card h3{font-size:20px}
.feature-top{margin-bottom:18px}
.recipe-grid{grid-template-columns:1fr}
.recipe{padding-block:16px}
.footer-top{flex-direction:column;gap:28px;margin-bottom:25px}
.footer-links{gap:15px 22px}
.footer-bottom{flex-direction:column;gap:7px}
.page-intro{padding:42px 0 30px}
.page-intro h1{font-size:40px}
.page-intro p{font-size:15px}
.page-content{padding-block:32px 55px}
.article-grid{grid-template-columns:minmax(0,1fr);gap:32px}
.toc{position:static;flex-direction:row;flex-wrap:wrap;gap:6px 18px;padding-bottom:24px;border-bottom:1px solid var(--line)}
.toc span{width:100%;margin-bottom:0}
.toc a{font-size:13px}
.article-section h2{font-size:25px}
.article-section p,.article-section li{font-size:15px}
.table-wrap table{font-size:13px}
th,td{padding:13px 12px}
.package-card{padding:23px}
.package-flow{gap:9px}
.package-flow span{padding:11px}
.package-flow{flex-direction:column;align-items:stretch;gap:8px;text-align:center}
.package-flow b{align-self:center;line-height:1;transform:rotate(90deg)}
.section-note{font-size:10px}
.button{font-size:12px;padding:11px 17px}
.legal-content .notice{padding:18px;font-size:12px}
}

@media(max-width:420px){
.hero h1{font-size:34px}
.hero-content{padding-top:30px}
.hero-art{object-position:left bottom}
.page-intro h1{font-size:35px}
}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}
*,*::before,*::after{transition:none!important}
.button:hover{transform:none}
}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Real PixelLab outputs: keep their pixels visible at display scale. */
.hero-art{image-rendering:pixelated}










/* Touch controls and narrow-screen reading. */
.menu-toggle{min-width:44px;min-height:44px}

.nav a,.nav button,.footer-links a,.toc a,.text-link{min-height:44px;display:inline-flex;align-items:center}


.table-wrap:focus-visible{outline:3px solid var(--accent);outline-offset:5px}

.article-section p,.article-section li{overflow-wrap:anywhere}

@media(max-width:760px){

  .page-intro h1{overflow-wrap:anywhere}

}

/* Requirements stay legible over the illustration at every width. */
.feature-card .action-job{font-size:16px;line-height:1.5;color:var(--text);font-weight:600;margin-bottom:12px}
.feature-card .flow{font-size:12px;font-family:ui-monospace,Consolas,monospace;color:#d5e4bd;line-height:1.75}
.feature-card details p{color:var(--muted);margin:12px 0 0;line-height:1.8}
.feature-card summary{min-height:44px;padding-block:10px}
.action-cards .feature-card{display:flex;flex-direction:column;min-width:0}
.action-cards details{margin-top:auto}
.action-cards .flow{margin-top:auto;padding-top:10px}
.first-run{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:center}
.settings-guide{margin:0;padding:25px;border:1px solid #59644c;border-radius:var(--radius);background:var(--panel)}
.settings-guide figcaption{padding-bottom:20px;border-bottom:1px solid var(--line)}
.settings-guide figcaption strong{display:block;font-size:20px}
.settings-guide figcaption span{display:block;font-size:12px;color:var(--muted);margin-top:4px}
.settings-guide dl{margin:0}
.settings-guide dl>div{padding:18px 0;border-bottom:1px solid var(--line)}
.settings-guide dt{font-size:14px;font-weight:650;color:var(--accent);margin-bottom:6px}
.settings-guide dd{margin:0;font-size:13px;line-height:1.9;color:var(--text)}
.settings-guide>p{font-size:13px;color:var(--muted);margin:18px 0 0}
.settings-guide>p strong{color:var(--text)}
.more-recipes{margin-top:24px}
.more-recipes>summary{color:var(--accent);font-size:14px;cursor:pointer;padding:12px 0;min-height:44px}
.more-recipes .recipe-grid{margin-top:16px}
.recipe h3{font-size:16px;margin:5px 0 10px}
.recipe .recipe-meta{font-size:12px;letter-spacing:0}
.output-summary{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:64px;align-items:end}
.output-summary p{font-size:14px;color:var(--muted);margin-bottom:0}
.developer-link{margin:32px 0 0;padding-top:24px;border-top:1px solid var(--line);font-size:13px;color:var(--muted)}
.developer-link a{color:var(--accent)}

/* Labels and prompts are live page text, independent of the GIFs. */
.demo-grid{display:grid;gap:24px}
.demo-card{min-width:0;display:grid;grid-template-columns:minmax(230px,.85fr) minmax(0,1.65fr);border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);padding:26px;gap:0 32px}
.demo-copy{grid-column:1;grid-row:1}
.demo-copy .eyebrow{font-size:10px;margin-bottom:12px}
.demo-copy h3{font-size:23px;letter-spacing:-.025em;margin-bottom:15px}
.demo-copy p{font-size:14px;line-height:1.75;color:var(--muted);margin-bottom:12px}
.demo-pair{grid-column:2;grid-row:1 / span 2;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:center;min-width:0}
.demo-pair-landscape{grid-template-columns:minmax(0,1fr) minmax(0,1.6fr)}
.demo-pair figure{margin:0;min-width:0}
.demo-pair figcaption,.media-label{display:block;font-size:13px;line-height:1.5;color:var(--text);margin-bottom:12px}
.demo-pair figcaption span{display:block;color:var(--accent);font-size:11px;text-transform:uppercase;letter-spacing:.06em;margin-bottom:5px}
.pixel-stage{display:flex;align-items:center;justify-content:center;min-height:220px;background:#0d1515;border:1px solid var(--line);border-radius:5px;padding:15px}
.pixel-stage img{width:190px;height:auto;image-rendering:pixelated}
.demo-image{display:block;width:100%;height:auto;image-rendering:pixelated}
.landscape-image{border-radius:5px}
.prompt-example{font-size:14px;line-height:1.85}
.prompt-example .media-label{color:var(--accent)}
.prompt-example blockquote{margin:0;color:#c7d0c7}
.demo-footer{grid-column:1;grid-row:2;align-self:end}
.demo-controls{display:flex;align-items:center;flex-wrap:wrap;gap:12px 20px;margin-top:18px}
.demo-controls .button{min-width:105px}
.demo-error{margin:14px 0 0;font-size:13px;color:var(--accent)}

/* First-use instructions use the plugin's actual field names. */
.walkthrough{margin-top:24px}
.walkthrough .steps{padding:0}
.walkthrough .steps>li{margin:32px 0}
.walkthrough .steps p+p{margin-top:12px}
.walkthrough .steps h3{margin-top:0}
.walkthrough .settings-guide{margin-top:18px}
.sample-prompt{padding:18px;border-left:3px solid var(--accent);background:var(--panel);margin:15px 0;font-size:15px;color:var(--text);user-select:all}
.walkthrough .expected-result{padding:18px;border:1px solid var(--line);border-radius:6px;background:var(--panel);margin-top:18px}
.walkthrough .expected-result p{margin:0}
@media(max-width:1000px){
  .demo-card{grid-template-columns:minmax(220px,1fr) minmax(0,1.5fr);gap:0 24px}
  .demo-pair-landscape{grid-template-columns:1fr}
  .demo-pair-landscape .pixel-stage{min-height:130px}
  .demo-pair-landscape .pixel-stage img{width:95px}
  .first-run,.output-summary{gap:32px}
}
@media(max-width:760px){
  .demo-card{display:block;padding:22px}
  .demo-pair{margin-top:22px}
  .demo-pair-landscape{grid-template-columns:1fr 1.6fr}
  .demo-footer{margin-top:20px}
  .demo-controls .button{width:100%;min-height:48px}
  .demo-copy h3{font-size:21px}
  .first-run,.output-summary{grid-template-columns:1fr;gap:25px}
  .hero-content{padding-bottom:24px}

}
@media(max-width:600px){
  .demo-pair,.demo-pair-landscape{grid-template-columns:1fr;gap:24px}
  .pixel-stage{min-height:180px}
  .pixel-stage img{width:142px}
  .demo-pair-landscape .pixel-stage{min-height:180px}
  .demo-pair-landscape .pixel-stage img{width:142px}
  .demo-pair figcaption{font-size:14px}
  .settings-guide{padding:20px}
}

.package-code{max-width:100%;margin:16px 0;padding:15px;border:1px solid var(--line);border-radius:5px;background:#0c1212;white-space:pre-wrap;overflow-wrap:anywhere;font-size:12px;line-height:1.7}
.package-card .package-name{color:var(--accent);font-size:12px}
.package-card .package-meta{font-size:11px;letter-spacing:.02em}
.package-card .buttons{gap:12px}

/* Updates: a compact homepage preview and readable, dated release notes. */

.latest-update{display:grid;grid-template-columns:170px minmax(0,1fr) auto;align-items:center;gap:32px;padding-block:28px;border-bottom:1px solid var(--line)}
.latest-update:focus,.update-post:focus{outline:none}
.latest-update-label h2{font-size:17px;letter-spacing:-.02em;margin:0 0 7px}
.latest-update-label time{font-size:13px;color:var(--muted)}
.latest-update-story{min-width:0}
.latest-update-story .badge{font-size:11px;margin-bottom:10px}
.latest-update-story h3{font-size:23px;letter-spacing:-.025em;margin:0 0 9px;line-height:1.25}
.latest-update-story p{font-size:14px;line-height:1.7;color:var(--muted);margin:0;max-width:580px}
.update-read-link{justify-self:end;font-size:14px;white-space:nowrap}
.update-history{max-width:880px}
.update-post{scroll-margin-top:0}
.update-post+.update-post{margin-top:48px;padding-top:48px;border-top:1px solid var(--line)}
.update-meta{display:flex;align-items:center;flex-wrap:wrap;gap:10px 18px;margin-bottom:22px;font-size:13px;color:var(--muted)}
.update-meta .badge{font-size:11px}
.update-version{font-family:ui-monospace,Consolas,monospace;font-size:12px}
.update-post-heading h2{font-size:clamp(28px,3.5vw,40px);line-height:1.2;margin:0 0 18px}
.update-lead{font-size:18px;line-height:1.7;color:#dce0da;margin-bottom:28px}
.update-body{font-size:16px;line-height:1.85;color:var(--muted)}
.update-body h3{color:var(--text);font-size:21px;line-height:1.4;margin:32px 0 14px}
.update-body ul{padding-left:22px;margin:0 0 22px}
.update-body li{padding-left:4px;margin-bottom:14px}
.update-body strong{color:var(--text);font-weight:620}
.update-body a:not(.button){color:var(--accent)}
.update-actions{display:flex;align-items:center;flex-wrap:wrap;gap:12px 24px;margin:24px 0 32px}
.update-actions .text-link{font-size:14px}
@media(max-width:1100px){
html{scroll-padding-top:90px}
.header-inner{min-height:69px;flex-wrap:wrap;gap:0}
.brand{font-size:21px}
.brand img{width:32px;height:32px}
.menu-toggle:not([hidden]){display:block}
.nav{width:100%;flex-wrap:wrap;gap:0;padding-block:8px 18px}
.nav a,.nav button{padding:10px 13px;font-size:14px;border-radius:5px}
.nav a[aria-current=page]{background:var(--panel-2)}
.nav .nav-cta{grid-column:1 / -1;margin:5px 0 0;justify-content:center}
.nav.collapsible{display:none}
.nav.collapsible.is-open{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}
.nav.is-open{max-height:calc(100dvh - 69px);overflow-y:auto}
}
@media(max-width:760px){
.latest-update{grid-template-columns:minmax(0,1fr);gap:16px;padding-block:24px}
.latest-update-label{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:8px 16px}
.latest-update-label h2{font-size:16px;margin:0}
.latest-update-label time{font-size:12px}
.latest-update-story h3{font-size:23px}
.update-read-link{justify-self:start}
.update-meta{gap:10px 14px;margin-bottom:20px}
.update-lead{font-size:17px}
.update-actions{align-items:stretch;gap:8px}
.update-actions .button{width:100%}
.update-actions .text-link{justify-content:center;width:100%}
}

/* The full wordmark occupies the original brand space, without a new header panel. */
html{scroll-padding-top:102px}
.header-inner{min-height:82px}
.product-brand{gap:14px;flex-shrink:0;min-height:44px}
.brand-product-name{font-size:26px;line-height:1.2}
.brand-attribution{display:inline-flex;align-items:center;gap:8px;letter-spacing:0}
.brand-by{font-size:12px;font-weight:450;color:var(--muted)}
.brand-wordmark{display:block;width:150px;flex:none}
.brand-wordmark>img{display:block;width:100%;height:auto;image-rendering:auto}
.publisher-logo{display:block;width:185px;margin-top:16px}
.publisher-logo .brand-wordmark{width:100%}
@media(max-width:1100px){
html{scroll-padding-top:90px}
.header-inner{min-height:69px;gap:0 12px}
.product-brand{gap:12px}
.brand-product-name{font-size:24px}
.brand-wordmark{width:145px}
.nav.is-open{max-height:calc(100dvh - 110px)}
}
@media(max-width:760px){
.product-brand{gap:8px}
.brand-attribution{gap:6px}
.brand-by{font-size:11px}
.brand-product-name{font-size:22px}
.product-brand .brand-wordmark{width:clamp(120px,calc(100vw - 200px),150px)}
.menu-toggle:not([hidden]){display:grid;place-items:center;position:relative;width:44px;height:44px;min-width:44px;padding:0;font-size:0;line-height:0}
.menu-toggle::before{content:"";display:block;width:18px;height:14px;border-block:2px solid currentColor;background:linear-gradient(currentColor,currentColor) center / 100% 2px no-repeat}
.menu-toggle[aria-expanded=true]::before{height:2px;border:0;background:currentColor;transform:rotate(45deg)}
.menu-toggle[aria-expanded=true]::after{content:"";position:absolute;width:18px;height:2px;background:currentColor;transform:rotate(-45deg)}
}

/* Keep the arch and its inpainted character visible beneath the copy on smaller screens. */
@media(max-width:1100px){
  .hero{min-height:540px}
  .hero-art{object-position:left bottom}
}
@media(max-width:420px){
  .hero .buttons{flex-wrap:nowrap;gap:10px}
  .hero .button{padding-inline:12px;gap:10px;min-width:0}
}

/* Keep the mobile brand and menu in one row; only an opened menu gets row two. */
@media(max-width:1100px){
  .header-inner{display:grid;grid-template-columns:minmax(0,1fr) 44px;column-gap:12px;row-gap:0}
  .product-brand{grid-column:1;grid-row:1;min-width:0;justify-self:start;flex-shrink:1}
  .menu-toggle{grid-column:2;grid-row:1;justify-self:end}
  .nav{grid-column:1 / -1;grid-row:2;min-width:0}
  .nav.is-open{max-height:calc(100dvh - 70px)}
}
@media(max-width:760px){
  .product-brand{gap:7px}
  .brand-attribution{gap:5px;min-width:0}
  .product-brand .brand-wordmark{width:clamp(90px,calc(100vw - 224px),145px);flex-shrink:1}
}
@media(max-width:360px){.brand-product-name{font-size:20px}}