/* Wide Blue Sound desktop header: the logo is the music player, the menus show the homepage product cards.
   Everything is scoped under .wbsh so it cannot collide with page styles. */
.wbsh{--text:#f5f5f7;--dim:rgba(245,245,247,.62);--dawn:oklch(0.86 0.09 70);position:relative;z-index:60;color:var(--text);font-family:"Inter Tight",system-ui,sans-serif;-webkit-font-smoothing:antialiased;
  background:linear-gradient(180deg,#000 0%,rgba(4,6,14,.92) 100%)}
.wbsh *,.wbsh *::before,.wbsh *::after{box-sizing:border-box}
.wbsh button{font:inherit;color:inherit;letter-spacing:normal;text-transform:none;line-height:normal;margin:0;box-shadow:none;border-radius:0}
.wbsh button:focus-visible,.wbsh a:focus-visible{outline:2px solid var(--dawn);outline-offset:2px}
.wbsh ul{margin:0;padding:0}
.wbsh::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;pointer-events:none;background:linear-gradient(90deg,transparent 5%,oklch(0.86 0.09 70 / .35) 50%,transparent 95%)}
.wbsh-bar{height:66px;max-width:1280px;margin:0 auto;padding:0 32px;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);column-gap:28px;align-items:center}
@media (max-width:1200px){.wbsh-nav__btn{padding-left:14px!important;padding-right:14px!important}}

/* Nav */
.wbsh-nav{display:flex;gap:4px;list-style:none}
.wbsh-nav > li{position:relative;list-style:none;margin:0}
.wbsh-nav__btn{position:relative;font:600 12.5px/1 "Inter Tight",sans-serif!important;letter-spacing:.2em!important;text-transform:uppercase!important;color:rgba(245,245,247,.94)!important;background:none!important;border:0!important;padding:25px 20px!important;cursor:pointer;transition:color .25s,text-shadow .25s}
.wbsh-nav__btn::after{content:"";position:absolute;left:50%;bottom:12px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:var(--dawn);box-shadow:0 0 10px 2px oklch(0.86 0.09 70 / .7);opacity:0;transform:scale(.4);transition:opacity .25s,transform .25s}
.wbsh-nav__btn:hover,.wbsh-nav > li.is-open .wbsh-nav__btn{color:#fff!important}
.wbsh-nav > li.is-open .wbsh-nav__btn{text-shadow:0 0 18px oklch(0.86 0.09 70 / .45)}
.wbsh-nav > li.is-open .wbsh-nav__btn::after{opacity:1;transform:none}
.wbsh-cart{justify-self:end;width:1px;height:1px}
/* The store's own cart button sits in the right of the bar, so its count and drawer keep working. */
.wbsh-section > .elementor-container > .elementor-column > .elementor-widget-wrap{position:relative}
.wbsh-section .elementor-element-wbshk01{position:absolute!important;top:50%;right:max(32px,calc((100% - 1280px) / 2 + 32px));transform:translateY(-50%);width:auto!important;margin:0!important;z-index:61}
.wbsh-section .elementor-element-wbshk01 .cartpops-cart__container-icon i{color:var(--dim,rgba(245,245,247,.62));transition:color .2s}
.wbsh-section .elementor-element-wbshk01:hover .cartpops-cart__container-icon i{color:#fff}
.wbsh-section .elementor-widget-wrap > .elementor-element-wbshw01{width:100%;margin:0!important}

/* Menu panel: a window onto a world. The horizon takes the colour of the product you point at. */
.wbsh-menu{--wbsh-hue:250;position:absolute;top:calc(100% + 12px);left:50%;transform:translate(-50%,-8px);opacity:0;visibility:hidden;
  display:grid;grid-template-columns:240px 340px;align-items:start;padding:12px;overflow:hidden;
  border-radius:20px;border:1px solid rgba(255,255,255,.09);box-shadow:0 40px 100px rgba(0,0,0,.7),0 0 0 1px rgba(0,0,0,.4);
  background:
    radial-gradient(1px 1px at 14% 16%,rgba(255,255,255,.7),transparent),
    radial-gradient(1px 1px at 31% 34%,rgba(255,255,255,.45),transparent),
    radial-gradient(1.5px 1.5px at 9% 52%,rgba(255,255,255,.55),transparent),
    radial-gradient(1px 1px at 24% 61%,rgba(255,255,255,.35),transparent),
    radial-gradient(1px 1px at 36% 8%,rgba(255,255,255,.4),transparent),
    radial-gradient(90% 70% at 20% 0%,oklch(0.22 0.06 var(--wbsh-hue) / .55),transparent 70%),
    #05070f;
  transition:opacity .3s ease,transform .3s ease,visibility 0s .3s}
.wbsh-nav > li.is-open .wbsh-menu{opacity:1;visibility:visible;transform:translate(-50%,0);transition:opacity .3s ease,transform .3s ease}
/* The menu clips its own overflow, so the bridge across the gap under the bar hangs from the nav item instead. */
.wbsh-nav > li.is-open::before{content:"";position:absolute;top:100%;left:50%;width:640px;height:14px;transform:translateX(-50%)}
.wbsh-horizon{position:absolute;left:-30%;right:-30%;bottom:-78%;height:100%;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,oklch(0.16 0.04 var(--wbsh-hue)) 92%,oklch(0.45 0.12 var(--wbsh-hue) / .9) 98.5%,oklch(0.85 0.08 var(--wbsh-hue)) 99.6%,transparent 100%);
  box-shadow:0 -10px 60px oklch(0.6 0.14 var(--wbsh-hue) / .35),0 -2px 120px oklch(0.5 0.14 var(--wbsh-hue) / .25);transition:background .6s,box-shadow .6s}
.wbsh-menu > *:not(.wbsh-horizon){position:relative}
.wbsh-menu__list{list-style:none;padding:8px 4px!important;display:flex;flex-direction:column;gap:2px}
.wbsh-menu__list li{list-style:none;margin:0}
.wbsh-menu__list a{display:flex;align-items:center;gap:14px;padding:12px 14px;border-radius:12px;text-decoration:none!important;color:var(--dim)!important;font:600 19px/1.15 "Inter Tight",sans-serif!important;letter-spacing:-.01em;transition:color .2s,background .2s}
.wbsh-menu__list a:hover,.wbsh-menu__list a.is-on{color:#fff!important}
.wbsh-menu__list a.is-on{background:rgba(255,255,255,.05)}
.wbsh-menu--plain{grid-template-columns:200px}
.wbsh-menu--plain .wbsh-menu__list a{font-size:17px!important}
/* More menu: a cerulean planet with a smooth glow (a box-shadow glow left a hard edge halfway up). */
.wbsh-menu--plain{--wbsh-hue:228}
.wbsh-menu--plain::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(130% 75% at 50% 100%,oklch(0.62 0.16 var(--wbsh-hue) / .5),oklch(0.45 0.13 var(--wbsh-hue) / .18) 55%,transparent 85%)}
.wbsh-menu--plain .wbsh-horizon{background:radial-gradient(closest-side,oklch(0.2 0.07 var(--wbsh-hue)) 92%,oklch(0.66 0.16 var(--wbsh-hue)) 98.5%,oklch(0.95 0.07 var(--wbsh-hue)) 99.6%,transparent 100%);box-shadow:none}
.wbsh-nav > li.is-open .wbsh-menu__list li{animation:wbsh-rise .5s both}
.wbsh-nav > li.is-open .wbsh-menu__list li:nth-child(2){animation-delay:.05s}
.wbsh-nav > li.is-open .wbsh-menu__list li:nth-child(3){animation-delay:.1s}
@keyframes wbsh-rise{from{opacity:0;transform:translateY(6px)}}

/* The homepage card, reused as the preview. The id outranks the homepage's own page-specific card rules. Every card is the same size, whatever its copy, so the panel never changes shape. */
#wbsh .wbsh-menu .wbs-homepage{width:340px;padding:0;background:none;overflow:visible;font-size:14px;max-width:none}
#wbsh .wbsh-menu .wbs-homepage::before{display:none}
#wbsh .wbsh-menu .wbs-homepage-card{width:340px;height:530px;min-height:0;max-height:none;grid-template-rows:auto 190px auto 1fr;padding:0 0 22px;gap:0;border-radius:14px;box-shadow:0 20px 50px rgba(0,0,0,.5)}
#wbsh .wbsh-menu .wbs-homepage-card__name{font-size:30px;margin:0}
#wbsh .wbsh-menu .wbs-homepage-card__title{padding:40px 20px 0;margin:0;min-height:100px}
#wbsh .wbsh-menu .wbs-homepage-card__image{padding:8px 20px;margin:0}
#wbsh .wbsh-menu .wbs-homepage-card__desc{padding:6px 24px 0;margin:0;font-size:15px}
/* Site-wide paragraph styles would otherwise resize the card copy on other pages */
#wbsh .wbsh-menu .wbs-homepage-card p{margin:0}
#wbsh .wbsh-menu .wbs-homepage-card__desc p{font-size:15px;line-height:1.5}
#wbsh .wbsh-menu .wbs-homepage-card__foot{padding:12px 20px 0;margin:0;gap:12px}
#wbsh .wbsh-menu .wbs-homepage-card__category{display:none}
#wbsh .wbsh-menu .wbs-homepage-card__price{font-size:24px;margin-bottom:10px;min-height:1.2em}

/* Player in the logo spot: the mark is the play button and the meter */
.wbsh-player{position:relative;display:flex;align-items:center;gap:12px;justify-self:start;min-width:0;max-width:100%}
.wbsh-pp{flex:none;width:60px;height:44px;margin:0 -2px!important;border:0!important;background:none!important;cursor:pointer;display:grid;place-items:center;padding:0!important}
.wbsh-pp{position:relative}.wbsh-pp::after{content:"";position:absolute;inset:-10px -8px}
/* The mark is exactly 57 by 19 pixels with its flat top and edges on whole pixels, so it stays sharp on 1x screens */
.wbsh-pp svg{display:block;width:60px;height:40px;overflow:visible;filter:drop-shadow(0 0 0 transparent);transition:filter .4s}
.wbsh-base{fill:url(#wbsh-mkg);transition:fill-opacity .4s}
.wbsh-player.is-live.has-meter .wbsh-base{fill-opacity:.28}
.wbsh-bars{opacity:0;transition:opacity .3s}
.wbsh-player.is-live.has-meter .wbsh-bars{opacity:1}
.wbsh-pp:hover .wbsh-bars{opacity:0}
.wbsh-pp:hover .wbsh-base{fill-opacity:1}
.wbsh-bars path{fill:#fff}
.wbsh-player.is-live .wbsh-pp svg{filter:drop-shadow(0 0 6px oklch(0.86 0.09 70 / .35))}
.wbsh-eyes{display:none}
.wbsh-who{display:flex;flex-direction:column;justify-content:center;gap:0;height:44px;min-width:0}
.wbsh-home{display:block;line-height:0}
/* The bold header wordmark, sized so its capitals are exactly 12 pixels tall and land on whole pixels */
.wbsh-home svg{display:block;height:12px;width:auto;overflow:visible}
.wbsh-home path{fill:#F5F5F7;stroke:#F5F5F7}
.wbsh-now{display:flex!important;align-items:center;height:14px;max-width:100%;max-height:0;opacity:0;overflow:hidden;border:0!important;background:none!important;color:rgba(245,245,247,.8)!important;cursor:pointer;text-align:left;padding:0!important;white-space:nowrap;
  font:500 12.5px/1 "Inter Tight",sans-serif!important;transition:max-height .45s cubic-bezier(.2,.8,.2,1),opacity .35s,margin .45s}
.wbsh-now em{font-style:normal;color:var(--dawn);margin-right:7px}
.wbsh-now span{overflow:hidden;text-overflow:ellipsis}
.wbsh-now .wbsh-lm{flex:none;width:13px;height:13px;margin-left:8px;color:rgba(245,245,247,.45);transition:color .2s}
.wbsh-now:hover,.wbsh-now:hover .wbsh-lm,.wbsh-player.is-open .wbsh-now .wbsh-lm{color:#fff!important}
/* 12 + 6 + 14 = 32 pixels, centred in 44, keeps the wordmark on whole pixels while the song line shows */
.wbsh-player.has-song .wbsh-now{max-height:14px;opacity:1;margin-top:6px}

/* Playlist panel: one product at a time, no scrolling */
.wbsh-list{--wbsh-hue:250;position:absolute;top:calc(100% + 14px);left:-12px;width:380px;opacity:0;visibility:hidden;transform:translateY(-8px);
  border-radius:20px;border:1px solid rgba(255,255,255,.09);overflow:hidden;box-shadow:0 40px 100px rgba(0,0,0,.7);
  background:radial-gradient(1px 1px at 82% 14%,rgba(255,255,255,.6),transparent),radial-gradient(1px 1px at 64% 38%,rgba(255,255,255,.4),transparent),radial-gradient(1px 1px at 22% 8%,rgba(255,255,255,.4),transparent),radial-gradient(100% 50% at 70% 0%,oklch(0.24 0.07 var(--wbsh-hue) / .6),transparent 75%),#05070f;
  transition:opacity .3s,transform .3s,visibility 0s .3s,--wbsh-hue .5s ease}
.wbsh-player.is-open .wbsh-list{opacity:1;visibility:visible;transform:none;transition:opacity .3s,transform .3s,--wbsh-hue .5s ease}
.wbsh-lh{padding:22px 24px 16px}
.wbsh-go{display:inline-flex;align-items:center;gap:8px;text-decoration:none!important;color:#fff!important}
.wbsh-go svg{width:14px;height:14px;color:rgba(245,245,247,.4);transition:transform .2s ease,color .2s ease}
.wbsh-go:hover svg{color:#fff;transform:translateX(3px)}
.wbsh-tag{margin:8px 0 0!important;padding:0!important;font:400 13.5px/1.35 "Inter Tight",sans-serif!important;color:rgba(245,245,247,.6)!important}
.wbsh-tag.is-out{opacity:0;transition:opacity .3s ease}
.wbsh-lh h3{margin:0!important;padding:0;font:italic 500 30px/1 "Newsreader",serif!important;letter-spacing:-.01em!important;color:#fff!important;text-transform:none}
.wbsh-seek{margin-top:18px;height:3px;border-radius:2px;background:rgba(255,255,255,.12);cursor:pointer;position:relative}
.wbsh-seek i{position:absolute;inset:0 auto 0 0;width:0;border-radius:2px;background:linear-gradient(90deg,oklch(0.86 0.09 70 / .6),var(--dawn));box-shadow:0 0 8px oklch(0.86 0.09 70 / .5)}
.wbsh-times{display:flex;justify-content:space-between;margin-top:8px;font:500 11px "Inter Tight",sans-serif;color:rgba(245,245,247,.45);font-variant-numeric:tabular-nums}
.wbsh-ctl{display:flex;justify-content:center;align-items:center;gap:22px;margin-top:4px}
.wbsh-ctl button{border:0!important;background:none!important;color:rgba(245,245,247,.75)!important;cursor:pointer;display:grid;place-items:center;width:36px;height:36px;padding:0!important;border-radius:50%!important}
.wbsh-ctl button:hover{color:#fff!important}
.wbsh-ctl .wbsh-big{width:46px;height:46px;background:#fff!important;color:#05070f!important}
.wbsh-ctl .wbsh-big:hover{color:#05070f!important;transform:scale(1.04)}
.wbsh-ctl svg{width:16px;height:16px}
.wbsh-ctl .wbsh-big svg{width:18px;height:18px}
.wbsh-ctl .wbsh-pz{display:none}.is-live .wbsh-ctl .wbsh-pz{display:block}.is-live .wbsh-ctl .wbsh-py{display:none}
.wbsh-ab{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .38s cubic-bezier(.3,.8,.2,1),opacity .3s ease}
.has-ab .wbsh-ab{grid-template-rows:1fr;opacity:1}
.wbsh-ab > div{min-height:0;overflow:hidden;display:flex;justify-content:center}
.wbsh-ab span{display:inline-flex;margin-top:14px;padding:3px;border:1px solid rgba(255,255,255,.12);border-radius:999px}
.wbsh-ab button{border:0!important;background:none!important;color:rgba(245,245,247,.6)!important;font:500 12.5px/1 "Inter Tight",sans-serif!important;padding:7px 16px!important;border-radius:999px!important;cursor:pointer}
.wbsh-ab button:not(.is-on):not(:disabled):hover{color:#fff!important}
.wbsh-ab button.is-on{background:#fff!important;color:#05070f!important}
.wbsh-ab button:disabled{opacity:.35;cursor:default}
.wbsh-tracks::-webkit-scrollbar{display:none}
.wbsh-tracks{box-sizing:border-box;overflow:hidden auto;max-height:max(240px,calc(100vh - 420px));overscroll-behavior:contain;scrollbar-width:none;transition:height .38s cubic-bezier(.3,.8,.2,1),opacity .2s ease;padding:6px 10px 8px;border-top:1px solid rgba(255,255,255,.06)}
.wbsh-trk{display:flex!important;align-items:center;gap:12px;width:100%;padding:8px 14px!important;border:0!important;border-radius:9px!important;background:none!important;color:var(--dim)!important;font:500 14px/1.25 "Inter Tight",sans-serif!important;text-align:left;cursor:pointer}
.wbsh-trk:hover{color:#fff!important;background:rgba(255,255,255,.04)!important}
.wbsh-trk.is-on{color:#fff!important}
.wbsh-trk{align-items:flex-start!important}
.wbsh-tt{display:flex;flex-direction:column;min-width:0}
.wbsh-meta{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .35s cubic-bezier(.3,.8,.2,1),opacity .3s ease}
.wbsh-trk.is-on .wbsh-meta{grid-template-rows:1fr;opacity:1}
.wbsh-meta > span{min-height:0;overflow:hidden;display:flex;flex-direction:column}
.wbsh-by{margin-top:4px;font:500 12.5px/1.3 "Inter Tight",sans-serif;color:rgba(245,245,247,.62)}
.wbsh-note{margin-top:5px;padding-bottom:2px;font:500 12.5px/1.45 "Inter Tight",sans-serif;color:rgba(245,245,247,.45)}
.wbsh-trk .wbsh-n{margin-top:2px;flex:none;width:16px;font-size:11px;color:rgba(245,245,247,.35);font-variant-numeric:tabular-nums}
.wbsh-trk.is-on .wbsh-n{color:var(--dawn)}
.wbsh-lists{display:flex;gap:6px;flex-wrap:wrap;padding:14px 18px 18px;border-top:1px solid rgba(255,255,255,.06)}
.wbsh-chip{position:relative;border:1px solid rgba(255,255,255,.1)!important;background:none!important;color:var(--dim)!important;font:500 12.5px "Inter Tight",sans-serif!important;padding:8px 12px!important;border-radius:999px!important;cursor:pointer}
.wbsh-chip:not(.is-on):hover{color:#fff!important;border-color:rgba(255,255,255,.25)!important}
.wbsh-chip.is-on{color:#05070f!important}

.wbsh-lists{position:relative}
.wbsh-pill{position:absolute;left:0;top:0;width:0;border-radius:999px;background:#fff;pointer-events:none;opacity:0}
.wbsh-pill.is-set{opacity:1;transition:transform .4s cubic-bezier(.3,.8,.2,1),width .4s cubic-bezier(.3,.8,.2,1)}
.wbsh-chip{z-index:1;transition:color .3s ease,border-color .3s ease}
.wbsh-chip.is-on{background:none!important;border-color:transparent!important}
.wbsh-go,.wbsh-tag{transition:opacity .2s ease}
.is-swapping .wbsh-go,.is-swapping .wbsh-tag,.is-swapping .wbsh-tracks{opacity:0;transition-duration:.15s}
@property --wbsh-hue{syntax:'<number>';inherits:true;initial-value:250}
@media (prefers-reduced-motion:reduce){.wbsh-pill.is-set,.wbsh-ab,.wbsh-tracks,.wbsh-meta{transition:none}}

/* Halloween logo theme. The sale look switches it on by setting --wbs-logo-theme: halloween. */
.wbsh[data-theme="halloween"] .wbsh-base{fill:url(#wbsh-hw)}
.wbsh[data-theme="halloween"] .wbsh-bars{display:none}
.wbsh[data-theme="halloween"] .wbsh-eyes{display:block;transition:opacity .25s}
.wbsh[data-theme="halloween"] .wbsh-player:not(.at-rest) .wbsh-eyes{opacity:0}
/* Logo themes draw one layer at rest. Stacking a second shape with the same outline doubles its soft edges and makes them look jagged.
   Coming back to rest, the plain shape fades out while the eyes fade in, so the logo never blinks out. */
.wbsh[data-theme="halloween"] .wbsh-player.at-rest .wbsh-base{opacity:0;transition:opacity .25s}
.wbsh[data-theme="halloween"] .wbsh-player.is-live .wbsh-base{fill-opacity:1}
.wbsh[data-theme="halloween"] .wbsh-player.is-live .wbsh-pp svg{filter:drop-shadow(0 0 calc(4px + var(--glow,0) * 8px) oklch(0.75 0.17 55 / .65))}
.wbsh[data-theme="halloween"] .wbsh-home path{fill:url(#wbsh-pk);stroke:url(#wbsh-pk)}
/* Halloween eyes: wbs-header.js draws each lid as a clip outline, the Eye Lab model with Nathan's tuned settings. */
.wbsh-pupil{transform-box:fill-box;transform-origin:center;transition:transform .12s linear}
@media (prefers-reduced-motion:reduce){.wbsh-pupil{transition:none}}

/* Mini player: appears once the header scrolls away while a song is up */
.wbsh-mini{position:fixed;top:16px;left:16px;z-index:9999;display:flex;align-items:center;gap:10px;max-width:340px;padding:4px 16px 4px 4px;border-radius:999px;
  background:rgba(5,7,15,.82);border:1px solid rgba(255,255,255,.1);box-shadow:0 10px 30px rgba(0,0,0,.45);-webkit-backdrop-filter:saturate(160%) blur(16px);backdrop-filter:saturate(160%) blur(16px);
  opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .3s ease,transform .3s ease,visibility 0s .3s}
.wbsh-mini.is-on{opacity:1;visibility:visible;transform:none;transition:opacity .3s ease,transform .3s ease}
.wbsh-mini button{border:0!important;background:none!important;padding:0!important;margin:0!important;cursor:pointer;font:inherit}
.wbsh-mini .wbsh-mini__pp{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%!important;background:#fff!important;color:#05070f!important}
.wbsh-mini__pp svg{width:12px;height:12px}
.wbsh-mini .wbsh-pz{display:none}.wbsh-mini.is-live .wbsh-pz{display:block}.wbsh-mini.is-live .wbsh-py{display:none}
.wbsh-mini .wbsh-mini__now{display:flex;align-items:baseline;gap:8px;min-width:0;white-space:nowrap;font:500 12.5px/1 "Inter Tight",sans-serif!important;color:rgba(245,245,247,.8)!important;text-align:left}
.wbsh-mini__now em{font-style:normal;color:var(--dawn,oklch(0.86 0.09 70))}
.wbsh-mini__now span{overflow:hidden;text-overflow:ellipsis}
.wbsh-mini__now:hover span{color:#fff}
@media (max-width:1024px){.wbsh-mini{display:none}}
@media (prefers-reduced-motion:reduce){.wbsh-mini,.wbsh-mini.is-on{transition:none}}

/* An open playlist or menu rises above sticky page bars, such as a product page's section nav (z-index 1000). */
.elementor .elementor-element.wbsh-section:has(.is-open){z-index:1050}


/* ---------- Feed: the active row sends a beam of light into a lit port on the product card, with a pulse travelling along it ---------- */
.wbsh-menu:has(.wbs-homepage) .wbsh-menu__list a{position:relative}
#wbsh .wbsh-menu .wbs-homepage{position:relative}
.wbsh-menu:has(.wbs-homepage){column-gap:30px}
.wbsh-menu:has(.wbs-homepage) .wbsh-menu__list a.is-on{background:linear-gradient(90deg,rgba(255,255,255,.04),oklch(0.4 0.1 var(--wbsh-hue) / .3))}
.wbsh-menu:has(.wbs-homepage) .wbsh-menu__list a.is-on::after{content:"";position:absolute;left:100%;top:calc(50% - 1px);width:38px;height:2px;pointer-events:none;transform-origin:left;
  background:linear-gradient(90deg,oklch(0.6 0.13 var(--wbsh-hue) / .35),oklch(0.92 0.07 var(--wbsh-hue)));box-shadow:0 0 6px oklch(0.75 0.15 var(--wbsh-hue)),0 0 16px oklch(0.65 0.15 var(--wbsh-hue) / .6);animation:wbsh-beam .3s cubic-bezier(.3,.8,.2,1) both}
.wbsh-menu:has(.wbs-homepage) .wbsh-menu__list a.is-on::before{content:"";position:absolute;left:100%;top:calc(50% - 3px);width:6px;height:6px;border-radius:50%;pointer-events:none;
  background:#fff;box-shadow:0 0 10px 3px oklch(0.8 0.13 var(--wbsh-hue));animation:wbsh-pulse 2.2s .3s cubic-bezier(.5,0,.5,1) infinite both}
#wbsh .wbsh-menu .wbs-homepage::after{content:"";position:absolute;z-index:3;left:-2px;top:calc(var(--pill-y) - 20px);width:3px;height:40px;border-radius:2px;pointer-events:none;
  background:oklch(0.95 0.06 var(--wbsh-hue));box-shadow:0 0 8px 2px oklch(0.8 0.14 var(--wbsh-hue)),0 0 26px 6px oklch(0.65 0.16 var(--wbsh-hue) / .7),12px 0 60px 10px oklch(0.6 0.15 var(--wbsh-hue) / .3);
  transition:top .35s cubic-bezier(.3,.8,.2,1),background .4s,box-shadow .4s}
@keyframes wbsh-beam{from{transform:scaleX(0)}}
@keyframes wbsh-pulse{0%{transform:translateX(0);opacity:0}15%{opacity:1}85%{opacity:1}100%{transform:translateX(34px);opacity:0}}