detonator-promo { display: block; }
detonator-promo[hidden] { display: none; }
body:has(detonator-promo:not([hidden])) { padding-bottom: 224px; }
html:has(detonator-promo:not([hidden])) { scroll-padding-bottom: 240px; }
.chrome-promo { position: fixed; z-index: 45; inset: auto 0 0; height: 220px; pointer-events: none; font: 14px/1.35 system-ui, sans-serif; color: #faf5ff; }
.chrome-promo__melt { position: absolute; inset: 120px 0 -120px; overflow: hidden; animation: chrome-melt 2.6s cubic-bezier(.24,.68,.28,1) both; }
.chrome-promo__melt svg { width: 100%; height: 100%; display: block; }
.chrome-promo__drop { position: absolute; top: 90px; width: 15px; height: 24px; border-radius: 55% 55% 52% 52%; background: linear-gradient(100deg,#faf4ff,#aab3c8 15%,#080510 36%,#fff 49%,#b96ad1 58%,#fff 69%,#0c0715 84%,#e9efff); box-shadow: inset 2px 0 1px #fff,0 0 10px #ab64c775; animation: chrome-drop 1.9s ease-in .55s both; }
.chrome-promo__drop:nth-of-type(1) { left: 14%; }
.chrome-promo__drop:nth-of-type(2) { left: 37%; top: 120px; animation-delay: .8s; }
.chrome-promo__drop:nth-of-type(3) { left: 62%; width: 10px; animation-delay: .35s; }
.chrome-promo__drop:nth-of-type(4) { left: 88%; top: 70px; animation-delay: .65s; }
.chrome-promo__dock { position: absolute; right: max(24px,env(safe-area-inset-right)); bottom: max(12px,env(safe-area-inset-bottom)); width: 192px; pointer-events: auto; text-align: center; }
.chrome-promo__portal { display: flex; flex-direction: column; align-items: center; text-decoration: none; color: #faf5ff; border-radius: 18px; animation: chrome-arrive 2.6s ease-out both; }
.chrome-promo__mark { display: block; width: 156px; height: 146px; animation: chrome-hover 5.8s ease-in-out 2.6s infinite; filter: drop-shadow(0 4px 3px #08040e) drop-shadow(0 0 16px #e250ff44); transition: filter .2s; }
.chrome-promo__mark img { width: 100%; height: 100%; object-fit: contain; display: block; }
.chrome-promo__portal:hover .chrome-promo__mark { filter: drop-shadow(0 5px 3px #08040e) drop-shadow(0 0 18px #e250ff88); }
.chrome-promo__label { display: flex; flex-direction: column; gap: 2px; padding: 9px 18px; border: 1px solid #c5aecf; border-radius: 12px; background: #140e1fee; box-shadow: 0 4px 18px #0006; }
.chrome-promo__label strong { font-size: 14px; letter-spacing: .11em; }
.chrome-promo__label > span { font-size: 12px; color: #e9d5f7; }
.chrome-promo__controls { display: flex; justify-content: center; gap: 4px; padding-top: 5px; }
.chrome-promo__controls button { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 44px; min-width: 60px; padding: 7px 12px; border: 1px solid #bbadc5; border-radius: 9px; color: #faf5ff; background: #140e1f; font: 12px/1.2 system-ui, sans-serif; cursor: pointer; }
.chrome-promo__controls button[hidden] { display: none; }
.chrome-promo :is(a,button):focus-visible { outline: 3px solid #ffb1ef; outline-offset: 3px; box-shadow: 0 0 0 6px #140e1f; }
.chrome-promo[data-paused="true"] .chrome-promo__mark { animation-play-state: paused; }
.chrome-promo[data-paused="true"] .chrome-promo__portal { animation: none; }
.chrome-promo[data-paused="true"] .chrome-promo__melt { display: none; }
body:has(.now-playing) detonator-promo, body:has([role="dialog"]) detonator-promo, [inert] detonator-promo, detonator-promo[data-audio-busy="true"] { visibility: hidden; }
body:has(.now-playing) .chrome-promo *, body:has([role="dialog"]) .chrome-promo *, [inert] .chrome-promo *, detonator-promo[data-audio-busy="true"] .chrome-promo * { animation-play-state: paused; }
body:has(.now-playing) { padding-bottom: var(--player-height,0px); }
html:has(.now-playing) { scroll-padding-bottom: calc(var(--player-height,0px) + 16px); }
.exhibition-header .umbrella-home { color: #efd8ff; border-bottom: 1px solid #75677e; }
@media(max-width:940px) { .exhibition-desktop-nav { display: none; } .exhibition-menu-toggle { display: block; } }
@keyframes chrome-melt { 0% { transform: translateY(170px) scaleY(.03); opacity: 0; } 20% { transform: translateY(0) scaleY(1); opacity: 1; } 62% { transform: translateY(36px) scaleY(1.1); opacity: 1; } 100% { transform: translateY(250px) scaleY(1.3); opacity: 0; } }
@keyframes chrome-drop { 0% { transform: translateY(-100px) scale(.3); opacity: 0; } 20% { opacity: 1; } 75% { transform: translateY(80px) scale(1); opacity: 1; } 100% { transform: translateY(170px) scale(.7); opacity: 0; } }
@keyframes chrome-arrive { 0%,35% { opacity: 0; transform: translateY(70px) scale(.7); } 100% { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes chrome-hover { 0%,100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-9px) rotate(1deg); } }
@media (max-width:700px) { .chrome-promo { height: 190px; } .chrome-promo__melt { inset: 100px 0 -100px; } .chrome-promo__dock { right: max(12px,env(safe-area-inset-right)); width: 154px; bottom: max(8px,env(safe-area-inset-bottom)); } .chrome-promo__mark { width: 120px; height: 112px; } .chrome-promo__label { padding: 7px 13px; } .chrome-promo__label strong { font-size: 12px; } .chrome-promo__label > span { font-size: 11px; } body:has(detonator-promo:not([hidden])) { padding-bottom: 192px; } html:has(detonator-promo:not([hidden])) { scroll-padding-bottom: 208px; } }
@media (prefers-reduced-motion:reduce) { .chrome-promo__melt { display: none; } .chrome-promo__portal, .chrome-promo__mark { animation: none; transition: none; } }
.chrome-promo[data-reduced-motion="true"] .chrome-promo__melt { display: none; }
.chrome-promo[data-reduced-motion="true"] .chrome-promo__portal, .chrome-promo[data-reduced-motion="true"] .chrome-promo__mark { animation: none; transition: none; }