/* Website-only full-bleed hero and compact persistent navigation. */
html:has(body[data-surface=website]){background:#15151b;scroll-padding-top:84px}
body[data-surface=website]{--website-header-height:64px}
body[data-surface=website] header{position:sticky;top:0;z-index:20;height:var(--website-header-height);min-height:0;padding:9px 4%;gap:16px;flex-wrap:nowrap;background:#10151dbd;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-bottom:1px solid #ffffff25}
body[data-surface=website] header .brand{gap:10px}
body[data-surface=website] header .portrait-logo{width:34px;height:34px;border-width:1px}
body[data-surface=website] header .image-wordmark{width:166px;height:auto;max-height:34px;object-fit:contain;background:transparent;padding:0}
body[data-surface=website] header nav{gap:22px}
body[data-surface=website] header #account{padding:9px 13px;background:#17212b99;font-size:11px;box-shadow:none;border-radius:8px}
body[data-surface=website] .lab-status{display:none}
body[data-surface=website] main{display:flow-root}
body[data-surface=website] .hero:has(.original-art){display:block;max-width:none;width:100%;margin:calc(-1 * var(--website-header-height)) 0 0;padding:calc(var(--website-header-height) + 72px) 5% 72px;min-height:760px;border-radius:0;overflow:hidden}
body[data-surface=website] .hero-art.original-art{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;z-index:-1;border:0;border-radius:0}
body[data-surface=website] .hero:has(.original-art) .hero-copy{position:relative;z-index:2;max-width:560px}
body[data-surface=website] .hero-art.original-art:after{display:block;content:'';position:absolute;inset:0;background:linear-gradient(90deg,#101016ed 0%,#101016d9 25%,#1010168c 46%,#10101610 75%),linear-gradient(0deg,#15151b 0%,transparent 20%)}
body[data-surface=website] .hero-original{object-position:65% top}
@media(max-width:720px){
 html:has(body[data-surface=website]){scroll-padding-top:116px}
 body[data-surface=website]{--website-header-height:96px}
 body[data-surface=website] header{padding:8px 5%;gap:7px 12px;flex-wrap:wrap}
 body[data-surface=website] header .brand{gap:7px}
 body[data-surface=website] header .portrait-logo{width:28px;height:28px}
 body[data-surface=website] header .image-wordmark{width:126px;max-height:28px}
 body[data-surface=website] header #account{font-size:10px;padding:8px;margin-left:auto}
 body[data-surface=website] header nav{order:3;width:100%;padding:5px 0 0;border:0;gap:12px;justify-content:space-between;font-size:11px}
 body[data-surface=website] .hero:has(.original-art){display:block;margin:calc(-1 * var(--website-header-height)) 0 0;padding:calc(var(--website-header-height) + 165px) 5% 42px;min-height:760px}
 body[data-surface=website] .hero-art.original-art{position:absolute;inset:0;height:100%;aspect-ratio:auto;z-index:-1;border-radius:0}
 body[data-surface=website] .hero-original{object-position:60% top}
 body[data-surface=website] .hero-art.original-art:after{background:linear-gradient(180deg,#10101630 0%,#10101645 23%,#101016cf 44%,#15151bf2 76%,#15151b 100%)}
 body[data-surface=website] .hero:has(.original-art) h1{font-size:clamp(46px,12vw,76px)}
}