/* One open celestial atmosphere: no tiled geometry or framed hero panel. */
:root{--promo-height:40px}
.magic-promo{position:fixed;top:0;left:0;right:0;height:var(--promo-height);z-index:9;display:flex;align-items:center;justify-content:center;gap:18px;padding:0 28px;overflow:hidden;isolation:isolate;background:linear-gradient(100deg,#11152ceb,#292045ed 48%,#112638ed);border-bottom:1px solid #d4b5ff55;box-shadow:0 3px 25px #9068d324;color:#f5e9cf}
.magic-promo::before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(105deg,transparent 32%,#d9c2ff17 47%,#acdfff28 50%,#d9c2ff17 53%,transparent 68%);transform:translateX(-110%);animation:celestial-shop-shimmer 18s ease-in-out infinite;pointer-events:none}
.promo-sigil{font-size:24px;line-height:1;color:#ffe0ac;text-shadow:0 0 14px #e4bdff99;flex-shrink:0}
.promo-message{display:flex;align-items:center;gap:18px;min-width:0}
.promo-message strong{font:8px/1.4 Jet,monospace;letter-spacing:.2em;font-weight:400;color:#efe3ff;white-space:nowrap}
.promo-message>span{font-size:10px;line-height:1.4;color:#c9c7d9}
.magic-promo>a{display:inline-flex;align-items:center;gap:16px;margin-left:20px;flex-shrink:0;font-size:9px;line-height:1.4;color:#ffe0ad;border-bottom:1px solid #e2c7a76b;padding:4px 0;transition:color .2s,text-shadow .2s}
.magic-promo>a:hover{color:#fff5e1;text-shadow:0 0 10px #e5bcff77}
.magic-promo>a:focus-visible{outline:2px solid #d0c1ff;outline-offset:4px}
.station{height:calc(100dvh - 34px - var(--promo-height));margin-top:var(--promo-height)}
.site-atmosphere{
  background:
    radial-gradient(ellipse at 78% 13%,#51429555 0,transparent 42%),
    radial-gradient(ellipse at 12% 72%,#17577d55 0,transparent 46%),
    radial-gradient(ellipse at 48% 106%,#733d713b 0,transparent 49%),
    radial-gradient(ellipse at 95% 76%,#a3653428 0,transparent 33%),
    #050815;
}
.site-atmosphere::before{
  content:'';position:absolute;inset:-18%;pointer-events:none;
  background:radial-gradient(ellipse at 70% 37%,#9168d41c 0,transparent 28%),radial-gradient(ellipse at 36% 56%,#44c8ee14 0,transparent 29%);
  transform:rotate(-22deg);
}
.site-atmosphere::after{
  width:850px;height:850px;z-index:2;
  background:radial-gradient(circle,#b9a5fa12 0,#7ecff70b 24%,transparent 66%);
}
.site-atmosphere .field-grid,.site-atmosphere .field-dust,.site-atmosphere .field-orbit{display:none!important}
#celestial-field,#alchemy-field{position:absolute;inset:0;pointer-events:none!important}
#celestial-field{z-index:0;opacity:1}
#alchemy-field{z-index:1;opacity:.32;filter:saturate(.65)}

/* The existing rails and scroll well keep their geometry, while the sky continues behind them. */
.station-frame{background:linear-gradient(90deg,#06091958,#080b1a18 54%,#080a1750);box-shadow:none}
.frame-corner{display:none}
.right-rail{border-left:0}
.left-rail,.right-rail{background:linear-gradient(90deg,#06081566,transparent 78%);text-shadow:0 1px 12px #02030b}
.right-rail{background:linear-gradient(270deg,#06081566,transparent 88%)}
.rail .button,.button{text-shadow:none}
.bottom-line{background:#050817e8;border-color:#a6a4dc14}
.brand-square{background:radial-gradient(circle at 50% 43%,#7965bb23,transparent 68%),#0b1021a8;border-color:#b4a9df4a;box-shadow:0 0 35px -17px #9a7de78c}
.brand-square .logo-frame{background:transparent;box-shadow:none}

/* Local shadows protect the words without hiding the stars across the entire center. */
.hero{border-bottom:0;background:none}
.hero-copy{background:radial-gradient(ellipse at 35% 42%,#050815b5 0,#05081583 47%,transparent 78%);position:relative;z-index:1}
.hero h1{text-shadow:0 3px 28px #020410b3}
.hero h1 em{color:#b4e1f3;text-shadow:0 0 28px #90b9e64a}
.hero-copy p,.context-text,.context-note{color:#bbb7c9}
.hero .eyebrow{color:#b5d8f6}
.hero-art{background:radial-gradient(ellipse at 50% 49%,#8b5bb925 0,#4487aa14 34%,transparent 70%);color:var(--paper);overflow:hidden;isolation:isolate}
.hero-art::before{
  content:'';position:absolute;inset:auto;width:88%;aspect-ratio:1;left:50%;top:50%;border-radius:50%;
  border:1px solid #d6c2ff55;box-shadow:0 0 24px #9c70e42e,inset 0 0 27px #6185cf20,0 0 0 17px #a5c8ed09,0 0 0 42px #af9cce07;
  background:radial-gradient(circle at 50% 1%,#e6ddff 0 2px,#c1a1ff55 3px,transparent 9px),radial-gradient(circle at 98% 51%,#c1e7ff 0 1px,transparent 7px),radial-gradient(circle at 49% 98%,#ffe0a4 0 2px,transparent 8px);
  transform:translate(-50%,-50%);animation:celestial-orbit 95s linear infinite;pointer-events:none;z-index:0;
}
.hero-art::after{
  content:'';position:absolute;inset:auto;width:106%;height:61%;left:50%;top:50%;border-radius:50%;
  border:1px solid transparent;border-top-color:#a9d8ff69;border-bottom-color:#f4c98e57;box-shadow:none;
  transform:translate(-50%,-50%) rotate(-28deg);animation:celestial-orbit-tilted 115s linear infinite reverse;pointer-events:none;z-index:0;
}
.hero-art img{position:relative;z-index:1;filter:drop-shadow(0 14px 26px #050414b3) drop-shadow(0 0 24px #8d7bd42c)}
.hero-art:hover img{filter:drop-shadow(0 10px 25px #050414a3) drop-shadow(0 0 30px #bd86f344)}
.hero-art .art-edition,.hero-art .art-caption{z-index:2;color:#bcb7d1;text-shadow:0 1px 8px #03030e}
.hero-art .art-spark{z-index:2;color:#d1eaff;text-shadow:0 0 15px #9bd2ff;font-size:30px}
.intro-line{border-color:#ffffff0a;background:linear-gradient(90deg,#080a1859,transparent)}
.departments{border:0;gap:7px 18px}
.department{border:0;border-bottom:1px solid #c4b6ff1b;background:transparent}
.department:hover{background:radial-gradient(ellipse at 8% 100%,#8c69c622,transparent 75%)}
.world-portals,.world-portal:first-child{border-color:transparent}
.world-portal{background:#070b1440}
.editorial-section,.page-heading,.collection-directory-heading,.download-hero,.product-summary,.product-information,.product-story{background-color:#0709165c}
.collection-group-heading,.product-benefits,.feature-line{background:#07091645}
.feature-line>div{border-right-color:transparent}
.collection-masthead-copy{border-color:transparent;background:linear-gradient(90deg,#070916df,#0709169e);backdrop-filter:none}
.context-art{padding:0;border:0;box-shadow:0 0 26px -15px #b68cdf6b}
.context-art:after{display:none}
.context-kicker,.context-divider,.rail-heading,.rail-seal,.context-facts li{border-color:#bfb2e51c}
.context-divider{background:linear-gradient(90deg,#baa7e52b,transparent)}
.site-footer{background:linear-gradient(0deg,#080b1ac4,transparent);border-color:#a49cd41a}

@keyframes celestial-orbit{to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes celestial-orbit-tilted{to{transform:translate(-50%,-50%) rotate(332deg)}}
@keyframes celestial-shop-shimmer{0%,20%{transform:translateX(-110%)}65%,100%{transform:translateX(110%)}}
.ritual-paused .hero-art::before,.ritual-paused .hero-art::after,.ritual-paused .magic-promo::before{animation-play-state:paused}
@media(max-width:1023px){
  .mobile-tools{top:var(--promo-height);background:#070a1aef;border-color:#a49cd423}
  .station{height:calc(100dvh - 76px - var(--promo-height));margin-top:calc(42px + var(--promo-height))}
  .rail.open{background:radial-gradient(ellipse at 60% 20%,#29214855,transparent 65%),#080b1af5;text-shadow:none;backdrop-filter:blur(16px)}
  .station-frame{background:linear-gradient(90deg,#06091968,#080b1a22 54%,#080a1760)}
}
@media(max-width:600px){
  :root{--promo-height:48px}
  .magic-promo{padding:0 14px;justify-content:space-between;gap:10px}
  .promo-sigil{font-size:21px}
  .promo-message{flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:2px}
  .promo-message strong{font-size:6px;letter-spacing:.16em}
  .promo-message>span{font-size:8px;line-height:1.35;max-width:205px}
  .magic-promo>a{font-size:8px;gap:7px;margin-left:0}
}
@container(max-width:460px){
  .hero-copy{background:radial-gradient(ellipse at 32% 40%,#050815c7 0,#05081575 48%,transparent 82%)}
  .hero-art::before{width:76%;max-width:270px}
  .hero-art::after{width:94%;height:70%}
  .departments{gap:5px 12px}
}
@media(prefers-reduced-motion:reduce){.hero-art::before,.hero-art::after,.magic-promo::before{animation:none}}
@media(forced-colors:active){
  .site-atmosphere{display:none}
  .station-frame,.hero-copy,.hero-art,.rail.open{background:Canvas}
  .hero-art::before,.hero-art::after{display:none}
  .department{border-bottom:1px solid CanvasText}
}