html[data-theme=light][data-background=daylight] body:has(.hero){background:radial-gradient(ellipse 780px 480px at 74% 12%,#e9eff5 0%,#f5f8fa 42%,#fff 78%)}
html[data-theme=light][data-background=pearl] body:has(.hero){background:radial-gradient(ellipse 570px 480px at 91% 13%,rgba(224,227,246,.65),transparent 72%),radial-gradient(ellipse 630px 440px at 66% 39%,rgba(218,239,240,.5),transparent 76%),#fff}
html[data-theme=light][data-background=window] body:has(.hero)::after{content:"";position:fixed;inset:-100px -90px -100px 48%;pointer-events:none;z-index:0;background:repeating-linear-gradient(115deg,transparent 0 105px,rgba(121,132,144,.075) 122px 175px,transparent 190px 300px);filter:blur(12px);mask-image:radial-gradient(ellipse at 75% 25%,#000,transparent 72%)}
html[data-theme=light][data-background=sculpted] body:has(.hero)::after{content:"";position:fixed;width:85vw;height:85vw;right:-45vw;top:-25vw;border-radius:50%;pointer-events:none;z-index:0;box-shadow:-12px 20px 38px rgba(50,65,80,.055),-1px 2px 2px rgba(50,65,80,.045),-45px 50px 0 -20px #fff,-62px 70px 30px -20px rgba(50,65,80,.045);background:linear-gradient(135deg,#fff,#fafbfc)}
html[data-theme=light][data-background=orbit] body:has(.hero)::after{content:"";position:fixed;width:82vw;height:82vw;right:-38vw;top:-25vw;border:1px solid rgba(115,130,150,.14);border-radius:50%;pointer-events:none;z-index:0;box-shadow:0 0 0 75px rgba(255,255,255,.8),0 0 0 76px rgba(115,130,150,.09),0 0 0 150px #fff,0 0 0 151px rgba(115,130,150,.065);mask-image:linear-gradient(to left,#000,transparent 85%)}
html[data-theme=light][data-background=spotlight] body:has(.hero)::after{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;background:url('directional-spotlight.svg') no-repeat -140px -130px / 1000px 750px;opacity:.6}
@media(max-width:700px){html[data-background] body::after{opacity:.45}}
@media print{html[data-background] body{background:#fff!important}body::after{display:none!important}}

/* Beam geometry is anchored to the heading, including when its font scales. */
html[data-theme=dark] body:has(.hero) h1{position:relative;isolation:isolate;width:fit-content;max-width:100%}
html[data-theme=dark] body:has(.hero) h1::before{content:"";position:absolute;left:-7vw;bottom:-12px;width:calc(100% + 14vw);height:calc(12vh + 100% + 12px);z-index:-1;pointer-events:none;background:url('name-spotlight.svg?v=reference-path') no-repeat left bottom / 100% 100%;mask-image:linear-gradient(to bottom,#000 65%,transparent 100%)}
@media(max-width:700px){html[data-theme=dark] body:has(.hero) h1::before{left:-24px;bottom:-8px;width:calc(100% + 24px);height:calc(100% + 40px)}}
@media print{h1::before{display:none!important}}