/* home-control.css — блок «Единая система реализации» (event-control, извлечён из event-page.css, только .event-control*) */
.event-control{
  --curve: cubic-bezier(.19, 1, .22, 1);
  --body-font: Inter, "Helvetica Neue", Arial, sans-serif;
  --display-font: var(--font-display, Inter, "Helvetica Neue", Arial, sans-serif);
  --besson-event-title-line:.94; --besson-event-title-track:.012em;
  --event-system-kicker-size:clamp(11px,.72vw,13px); --event-system-kicker-track:.28em; --event-system-kicker-line:1.18;
  --event-system-title-size:clamp(36px,3.85vw,58px); --event-system-title-track:.012em; --event-system-title-line:.98;
  --event-system-lead-size:clamp(16px,1.08vw,19px); --event-system-lead-track:.006em; --event-system-lead-line:1.44;
  --event-system-lead-width:min(720px,calc(100vw - 48px)); --event-control-desktop-scale:1;
}

.event-control__lead{display:block !important;
  width:auto !important;
  max-width:min(1120px, calc(100vw - 64px)) !important;
  margin:clamp(18px,2.2vw,30px) auto 0 !important;
  color:currentColor !important;
  opacity:.56 !important;
  font-family:var(--body-font, Inter, "Helvetica Neue", Arial, sans-serif) !important;
  font-size:clamp(24px,3.05vw,44px) !important;
  font-weight:360 !important;
  line-height:1.34 !important;
  letter-spacing:.005em !important;
  text-align:center !important;
  text-transform:none !important;
  text-wrap:balance !important;}

#eventSystemHome:is(#eventSystemHome) .event-control__lead{text-align: left !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  text-wrap: pretty !important;}

#eventSystemHome:is(#eventSystemHome) :is(.event-control__copy, .event-control__title, .event-control__kicker){text-align: left !important;}

.event-control__lead{opacity:.64 !important;}

@media (max-width:760px){
  .event-control__lead{max-width:calc(100vw - 34px) !important;
    margin-top:16px !important;
    font-size:clamp(18px,5.7vw,28px) !important;
    line-height:1.38 !important;
    letter-spacing:0 !important;}
}

.event-control{position: relative;
  isolation: isolate;}

.event-control, .faq-home
) > :not(.event-section-mark){position: relative;
  z-index: 1;}

@keyframes ctaMobilePulse{
  0%,100% { transform: translateY(0) scale(1); box-shadow: 0 12px 34px rgba(0,0,0,.38), 0 0 0 0 rgba(255,255,255,.26); }
  42% { transform: translateY(-3px) scale(1.075); box-shadow: 0 20px 50px rgba(0,0,0,.50), 0 0 0 13px rgba(255,255,255,0); }
}

.event-section-mark{position: absolute;
  right: clamp(-220px, -13vw, -72px);
  bottom: clamp(-170px, -9vw, -58px);
  width: clamp(560px, 54vw, 1120px);
  aspect-ratio: 1 / 1;
  pointer-events: none;
  z-index: 0;
  opacity: .03;
  background: currentColor;
  -webkit-mask: url("../img/besson-monogram-transparent.png?v=20260618a") center / contain no-repeat;
  mask: url("../img/besson-monogram-transparent.png?v=20260618a") center / contain no-repeat;
  transform: translate3d(0, 0, 0);
  filter: blur(.2px);}

.event-section-mark--light{color: var(--paper-000);
  opacity: .06;}

.event-section-mark--ink{color: var(--ink-200);
  opacity: .04;}

.event-section-mark--hero{display: none !important;
  content: none !important;}

.event-section-mark--orbit{right: auto;
  left: clamp(-110px, -8vw, -26px);
  bottom: clamp(-120px, -6vw, -30px);
  width: clamp(420px, 38vw, 760px);
  opacity: .05;}

.event-section-mark--flow{right: clamp(-120px, -9vw, -44px);
  bottom: auto;
  top: clamp(44px, 5vw, 96px);
  width: clamp(360px, 34vw, 720px);
  opacity: .028;}

.event-section-mark--news{right: auto;
  left: clamp(-240px, -13vw, -72px);
  bottom: clamp(-180px, -10vw, -64px);
  width: clamp(620px, 54vw, 1120px);
  opacity: .044;}

.event-task > .event-section-mark{right: auto;
  left: clamp(-280px, -16vw, -92px);
  bottom: auto;
  top: clamp(34px, 6vw, 108px);
  width: clamp(680px, 58vw, 1240px);
  opacity: .023;}

.event-section-mark--formats{right: clamp(-300px, -16vw, -96px);
  bottom: auto;
  top: clamp(58px, 7vw, 124px);
  width: clamp(720px, 60vw, 1320px);
  opacity: .022;}

.event-section-mark--cta{right: clamp(-260px, -14vw, -82px);
  bottom: auto;
  top: 50%;
  width: clamp(560px, 46vw, 980px);
  opacity: .024;
  transform: translate3d(0, -50%, 0);}

.event-section-mark--catalog{right: auto;
  left: clamp(-330px, -18vw, -104px);
  bottom: auto;
  top: clamp(54px, 7vw, 120px);
  width: clamp(760px, 62vw, 1360px);
  opacity: .02;}

.event-section-mark--globe{right: auto;
  left: 50%;
  bottom: auto;
  top: clamp(58px, 7vw, 118px);
  width: clamp(780px, 64vw, 1360px);
  opacity: .018;
  transform: translate3d(-50%, 0, 0);}

.event-section-mark--clients{right: clamp(-280px, -14vw, -86px);
  bottom: auto;
  top: clamp(44px, 7vw, 116px);
  width: clamp(700px, 58vw, 1240px);
  opacity: .052;}

@keyframes cursorRingBreath{
  0%,100% { box-shadow: 0 0 0 0 rgba(255,255,255,.12); }
  50% { box-shadow: 0 0 0 5px rgba(255,255,255,.04); }
}

.event-control__kicker{font-size: 11px;
  line-height: 1.1;
  font-weight: 560;
  letter-spacing: .28em;
  text-transform: uppercase;}

@media (max-width: 768px){
  .event-section-mark{right: -118px;
    bottom: -92px;
    width: min(92vw, 460px);
    opacity: .018;}
  .event-section-mark--light{opacity: .032;}
  .event-section-mark--hero{display: none !important;
    content: none !important;}
  .event-section-mark--orbit, .event-task > .event-section-mark, .event-section-mark--flow, .event-section-mark--news, .event-section-mark--formats, .event-section-mark--cta, .event-section-mark--catalog, .event-section-mark--globe, .event-section-mark--clients{left: 50%;
    right: auto;
    top: 50%;
    bottom: auto;
    width: min(108vw, 520px);
    opacity: .016;
    transform: translate3d(-50%, -50%, 0);}
  .event-section-mark--light.event-section-mark--clients{opacity: .032;}
}

@keyframes eventMonogramFloat{
  0%, 100% { transform: translate3d(0, 0, 0) scale(.985); }
  50% { transform: translate3d(0, -8px, 0) scale(1.015); }
}

.event-control__inner{width: min(1320px, 100%);
  margin: 0 auto;
  display: grid;
  align-items: center;}

.event-control__copy, .event-control__visual{opacity: 0;
  transform: translateY(24px);
  transition: opacity .68s ease, transform .68s var(--curve);}

.event-control__copy.is-visible, .event-control__visual.is-visible{opacity: 1;
  transform: translateY(0);}

.event-control__kicker{display: block;
  margin: 0 0 20px;
  text-align: left;}

.event-control__kicker{color: rgba(255, 255, 255, .78);}

.event-control__kicker::before{display: none;}

.event-control__title{margin: 0;
  font-weight: 540;
  letter-spacing: -.05em;
  text-wrap: balance;}

.event-control__title{max-width: 560px;
  color: var(--paper-000);
  font-size: clamp(42px, 4.9vw, 68px);
  line-height: .96;}

.event-control__lead{margin: 28px 0 0;
  letter-spacing: -.02em;}

.event-control__lead{max-width: 560px;
  color: rgba(255, 255, 255, .68);
  font-size: clamp(16px, 1.2vw, 19px);
  line-height: 1.6;}

.event-control__actions{margin-top: 34px;}

.event-control{padding: clamp(72px, 6vw, 98px) clamp(16px, 2.4vw, 28px) clamp(88px, 7.2vw, 116px);
  background: var(--ink-100);
  color: var(--paper-000);
  border-top: 1px solid rgba(255, 255, 255, .06);
  border-bottom: 1px solid rgba(255, 255, 255, .06);
  scroll-margin-top: 112px;
  overflow: hidden;}

.event-control__inner{grid-template-columns: minmax(0, .88fr) minmax(460px, 1.02fr);
  gap: clamp(38px, 4.2vw, 68px);
  min-height: min(76vh, 760px);}

.event-control__actions .event-hero__btn{min-height: 60px;
  min-width: clamp(220px, 18vw, 264px);
  padding: 0 30px;
  font-size: 15px;}

.event-control__actions .event-hero__btn{--cta-radius: 19px;}

.event-control__visual{position: relative;
  display: grid;
  justify-items: center;
  align-self: stretch;
  gap: 0;
  min-width: 0;}

.event-control__copy{align-self: start;
  padding-top: clamp(8px, 1vw, 20px);}

.event-control__scene{--event-control-desktop-scale: 1;
  position: relative;
  width: min(100%, 620px);
  aspect-ratio: 1;
  min-height: 560px;
  display: block;
  isolation: isolate;
  overflow: visible;}

.event-control__scene::before{content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(42% * var(--event-control-desktop-scale));
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .1), rgba(255, 255, 255, 0) 72%);
  filter: blur(12px);
  pointer-events: none;}

.event-control__ring{position: absolute;
  left: 50%;
  top: 50%;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;}

.event-control__ring--outer{width: calc(78% * var(--event-control-desktop-scale));
  aspect-ratio: 1;}

.event-control__ring--inner{width: calc(56% * var(--event-control-desktop-scale));
  aspect-ratio: 1;
  opacity: .48;}

.event-control__sphere{position: absolute;
  left: 50%;
  top: 50%;
  width: calc(clamp(170px, 16vw, 228px) * var(--event-control-desktop-scale));
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .26);
  background:
    radial-gradient(circle at 36% 28%, rgba(255, 255, 255, .14), rgba(255, 255, 255, .03) 40%, rgba(255, 255, 255, 0) 70%),
    linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .01));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .06),
    0 0 56px rgba(255, 255, 255, .08);
  display: grid;
  place-items: center;
  overflow: hidden;
  z-index: 3;
  transition: opacity .28s ease, transform .28s ease, box-shadow .28s ease;}

.event-control__sphere::before{content: "";
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .08);
  animation: eventControlSpherePulse 7s ease-in-out infinite;}

.event-control__sphereMark{width: 58%;
  display: block;
  filter: brightness(0) invert(1);
  opacity: .92;
  animation: eventControlMarkFloat 6.6s ease-in-out infinite;}

.event-control__orbit{position: absolute;
  inset: 0;
  z-index: 8;}

.event-control__node{--node-x: 0px;
  --node-y: 0px;
  --node-scale: 1;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(calc(-50% + var(--node-x)), calc(-50% + var(--node-y))) scale(var(--node-scale));
  transform-origin: center;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 999px;
  background: rgba(12, 12, 12, .86);
  color: rgba(255, 255, 255, .84);
  font-size: 13px;
  line-height: 1;
  font-weight: 520;
  letter-spacing: -.01em;
  white-space: nowrap;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .18);
  transition: border-color .24s ease, background .24s ease, color .24s ease, box-shadow .24s ease, transform .24s ease, opacity .24s ease;
  will-change: transform, opacity;
  cursor: pointer;}

.event-control__nodeDot{width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .88);
  box-shadow: 0 0 12px rgba(255, 255, 255, .16);
  flex: 0 0 auto;
  transition: background .24s ease, box-shadow .24s ease;}

.event-control__node.is-active, .event-control__node:hover, .event-control__node:focus-visible{background: var(--paper-000);
  color: var(--ink-200);
  border-color: var(--paper-000);
  box-shadow: 0 18px 34px rgba(0, 0, 0, .24), 0 0 0 1px rgba(255, 255, 255, .12);
  outline: none;}

.event-control__node.is-active .event-control__nodeDot, .event-control__node:hover .event-control__nodeDot, .event-control__node:focus-visible .event-control__nodeDot{background: var(--ink-200);
  box-shadow: none;}

.event-control__node.is-dimmed{opacity: .14 !important;
  filter: blur(.35px);}

.event-control__scene.has-open-detail .event-control__ring, .event-control__scene.has-open-detail .event-control__sphere, .event-control__scene.has-open-detail::before{opacity: .14;}

.event-control__scene.has-open-detail .event-control__sphere{transform: translate(-50%, -50%) scale(.94);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .04),
    0 0 26px rgba(255, 255, 255, .04);}

.event-control__scene.has-open-detail .event-control__sphere::before, .event-control__scene.has-open-detail .event-control__sphereMark{animation-play-state: paused;}

.event-control__scene.has-open-detail .event-control__node.is-active{opacity: 0 !important;
  pointer-events: none;}

.event-control__detail{--detail-origin-x: 50%;
  --detail-origin-y: 50%;
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 24;
  width: min(380px, calc(100% - 44px));
  min-height: 168px;
  padding: 22px 22px 20px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 18px;
  background: rgba(255, 255, 255, .96);
  color: var(--ink-200);
  box-shadow: 0 28px 64px rgba(0, 0, 0, .34);
  backdrop-filter: blur(18px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(.72);
  transform-origin: var(--detail-origin-x) var(--detail-origin-y);
  transition: opacity .24s ease, visibility .24s ease, transform .28s cubic-bezier(.19, 1, .22, 1);}

.event-control__detail.is-open{opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);}

.event-control__detailClose{position: absolute;
  top: 12px;
  right: 12px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(8, 8, 8, .14);
  border-radius: 999px;
  background: rgba(8, 8, 8, .04);
  color: var(--ink-200);
  transition: background .2s ease, border-color .2s ease, transform .2s ease;}

.event-control__detailClose:hover, .event-control__detailClose:focus-visible{background: rgba(8, 8, 8, .08);
  border-color: rgba(8, 8, 8, .22);
  transform: translateY(-1px);
  outline: none;}

.event-control__detailCloseLine{position: absolute;
  width: 14px;
  height: 1.5px;
  border-radius: 999px;
  background: currentColor;}

.event-control__detailCloseLine:first-child{transform: rotate(45deg);}

.event-control__detailCloseLine:last-child{transform: rotate(-45deg);}

.event-control__detailTitle{margin: 0;
  padding-right: 44px;
  color: var(--ink-200);
  font-size: clamp(21px, 1.7vw, 27px);
  line-height: 1.06;
  font-weight: 520;
  letter-spacing: -.03em;}

.event-control__detailText{margin: 12px 0 0;
  color: rgba(8, 8, 8, .66);
  font-size: 14px;
  line-height: 1.55;
  letter-spacing: -.01em;}

@keyframes eventControlSpherePulse{
  0%, 100% { transform: scale(.98); opacity: .52; }
  50% { transform: scale(1.04); opacity: .9; }
}

@keyframes eventControlMarkFloat{
  0%, 100% { transform: translate3d(0, 0, 0) scale(.985); }
  50% { transform: translate3d(0, -6px, 0) scale(1.02); }
}

@media (max-width: 1120px){
  .event-control__inner{grid-template-columns: minmax(0, 1fr);
    gap: 34px;
    min-height: auto;}
  .event-control__copy{max-width: 760px;}
  .event-control__title, .event-control__lead{max-width: 100%;}
  .event-control__scene{width: min(100%, 560px);
    min-height: 520px;}
}

@media (min-width: 1121px){
  .event-control__scene{--event-control-desktop-scale: 1.1;}
}

@media (max-width: 768px){
  .event-control__kicker{margin-bottom: 12px;
    font-size: 10px;
    font-weight: 560;
    letter-spacing: .24em;}
  .event-control__title{max-width: 100%;
    font-size: clamp(34px, 12vw, 52px);}
  .event-control__lead{max-width: 100%;
    margin-top: 20px;
    font-size: 15px;
    line-height: 1.56;}
  .event-control__actions{margin-top: 26px;}
  .event-control__actions .event-hero__btn{width: 100%;
    justify-content: center;
    min-width: 0;
    min-height: 56px;
    padding-inline: 24px;
    font-size: 15px;}
  .event-control{padding: 46px 16px 58px;}
  .event-control__inner{gap: 22px;}
  .event-control__copy{padding-top: 0;}
  .event-control__title{font-size: clamp(28px, 8.1vw, 36px);
    line-height: 1.02;}
  .event-control__lead{margin-top: 14px;
    font-size: 13px;
    line-height: 1.48;}
  .event-control__actions{margin-top: 18px;}
  .event-control__actions .event-hero__btn{min-height: 46px;}
  .event-control__scene{width: 100%;
    min-height: 360px;}
  .event-control__ring--outer{width: 82%;}
  .event-control__ring--inner{width: 58%;}
  .event-control__sphere{width: 132px;}
  .event-control__sphereMark{width: 54%;}
  .event-control__node{min-height: 40px;
    padding: 0 12px;
    font-size: 12px;
    gap: 8px;}
  .event-control__nodeDot{width: 6px;
    height: 6px;}
  .event-control__detail{width: min(calc(100% - 24px), 320px);
    min-height: 150px;
    padding: 18px 18px 18px;}
  .event-control__detailClose{top: 10px;
    right: 10px;
    width: 30px;
    height: 30px;}
  .event-control__detailTitle{font-size: 20px;}
  .event-control__detailText{font-size: 13px;}
}

@keyframes msfPulseRing{
  0% {
    transform: translate(-50%, -50%) scale(.94);
    opacity: 0;
  }
  16% {
    opacity: .42;
  }
  55% {
    opacity: .18;
  }
  100% {
    transform: translate(-50%, -50%) scale(1.9);
    opacity: 0;
  }
}

.event-section-mark--why{right: auto;
  left: clamp(-260px, -14vw, -82px);
  bottom: auto;
  top: clamp(22px, 5vw, 72px);
  width: clamp(640px, 56vw, 1180px);
  opacity: .022;}

@media (max-width: 768px){
  .event-section-mark--why{left: auto;
    right: -84px;
    top: auto;
    bottom: -72px;}
}

.event-control__title, .event-control__detailTitle{font-family: Inter, "Helvetica Neue", Arial, sans-serif !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
  text-transform: uppercase !important;
  font-feature-settings: "kern" 1, "liga" 1 !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;}

.event-control__title{text-shadow: 0 .018em .04em rgba(5, 5, 5, .08);}

.event-control__kicker{font-size: var(--event-system-kicker-size) !important;
  line-height: var(--event-system-kicker-line) !important;
  font-weight: 420 !important;
  letter-spacing: var(--event-system-kicker-track) !important;
  text-transform: uppercase !important;}

.event-control__title{font-size: var(--event-system-title-size) !important;
  line-height: var(--event-system-title-line) !important;
  font-weight: 900 !important;
  letter-spacing: var(--event-system-title-track) !important;
  text-transform: uppercase !important;
  text-wrap: balance !important;}

.event-control__lead{display: block !important;
  width: auto !important;
  max-width: min(100%, var(--event-system-lead-width)) !important;
  margin: clamp(14px, 1.35vw, 20px) auto 0 !important;
  color: currentColor !important;
  opacity: .58 !important;
  font-size: var(--event-system-lead-size) !important;
  font-weight: 360 !important;
  line-height: var(--event-system-lead-line) !important;
  letter-spacing: var(--event-system-lead-track) !important;
  text-align: center !important;
  text-transform: none !important;
  text-wrap: balance !important;}

.event-control__lead{opacity: .66 !important;}

.event-control__title{overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
  -webkit-hyphens: none !important;}

@media (min-width: 901px){
  .event-control__copy{text-align: left !important;}
  .event-control__lead{width: 100% !important;
    max-width: 44ch !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: left !important;}
  .event-control__title{max-width: min(100%, 13ch) !important;
    text-align: left !important;}
}

.event-control__title{max-width: 100%;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
  -webkit-hyphens: none !important;}

@media (min-width: 901px){
  .event-control__copy{justify-self: start !important;
    text-align: left !important;}
  .event-control__lead{margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: left !important;}
}

@media (max-width: 900px){
  .event-control__copy{text-align: center !important;}
}

.event-control__title{font-family: var(--display-font, Inter, "Helvetica Neue", Arial, sans-serif) !important;
  letter-spacing: var(--besson-event-title-track) !important;
  line-height: var(--besson-event-title-line) !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
  -webkit-hyphens: none !important;}

.event-control__title{letter-spacing: var(--besson-event-title-track) !important;
  line-height: var(--besson-event-title-line) !important;}

/* --- Воздух между блоком цифр и блоком системы --- */
#eventSystemHome{ margin-top: clamp(46px, 6.8vw, 116px) !important; }

/* --- Reveal блока «Единая система» при скролле (выезд снизу вверх) --- */
#eventSystemHome .event-control__copy,
#eventSystemHome .event-control__visual{
  opacity: 0;
  transform: translateY(64px);
  transition: opacity .82s ease, transform .95s cubic-bezier(.19, 1, .22, 1);
  will-change: opacity, transform;
}
#eventSystemHome .event-control__visual{ transition-delay: .09s; }
#eventSystemHome .event-control__copy.is-visible,
#eventSystemHome .event-control__visual.is-visible{
  opacity: 1;
  transform: translateY(0);
}
/* Fail-safe: reveal не сработал — блок не прячем */
#eventSystemHome.is-revealed .event-control__copy,
#eventSystemHome.is-revealed .event-control__visual{ opacity: 1 !important; transform: none !important; }

/* --- Следующий блок услуг «вытаскивается» вверх из-под тёмного блока системы (как interlude после hero) --- */
#services.home-pullout{
  transform: translateY(84px);
  transition: transform 1.05s cubic-bezier(.19, 1, .22, 1);
  will-change: transform;
}
#services.home-pullout.is-pulled{ transform: translateY(0); }

@media (prefers-reduced-motion: reduce){
  #eventSystemHome .event-control__copy,
  #eventSystemHome .event-control__visual,
  #services.home-pullout{ opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* 2026-07-25: Sound orb — премиальный тумблер звука (только главная) */
.sound-orb{position:fixed;z-index:60;right:clamp(16px,2vw,26px);
  bottom:calc(clamp(16px,2vw,26px) + env(safe-area-inset-bottom,0px));
  width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  background:rgba(12,12,12,.55);border:1px solid rgba(255,255,255,.14);
  -webkit-backdrop-filter:blur(14px) saturate(1.1);backdrop-filter:blur(14px) saturate(1.1);
  box-shadow:0 10px 30px rgba(0,0,0,.45), inset 0 0 0 .5px rgba(255,255,255,.05);
  cursor:pointer;padding:0;overflow:visible;
  transition:transform .25s cubic-bezier(.2,.7,.2,1),border-color .25s,box-shadow .25s,background .25s}
.sound-orb:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.32);box-shadow:0 14px 40px rgba(0,0,0,.55)}
.sound-orb:active{transform:translateY(0) scale(.96)}
.sound-orb:focus-visible{outline:2px solid rgba(255,255,255,.6);outline-offset:3px}
.sound-orb__bars{position:relative;display:inline-flex;align-items:flex-end;gap:3px;height:16px}
.sound-orb__bars>i{width:2.5px;height:6px;border-radius:2px;background:#fff;opacity:.92;transform-origin:bottom;animation:sndEq 1.1s ease-in-out infinite}
.sound-orb__bars>i:nth-child(1){animation-delay:0s}
.sound-orb__bars>i:nth-child(2){animation-delay:.18s}
.sound-orb__bars>i:nth-child(3){animation-delay:.36s}
.sound-orb__bars>i:nth-child(4){animation-delay:.12s}
@keyframes sndEq{0%,100%{height:5px}50%{height:15px}}
.sound-orb.is-off .sound-orb__bars>i{animation:none;height:4px;opacity:.4}
.sound-orb__slash{position:absolute;width:28px;height:1.5px;background:rgba(255,255,255,.78);border-radius:2px;
  transform:rotate(-45deg);opacity:0;transition:opacity .2s;box-shadow:0 0 0 2px rgba(12,12,12,.55)}
.sound-orb.is-off .sound-orb__slash{opacity:1}
@media (prefers-reduced-motion:reduce){.sound-orb__bars>i{animation:none}}
@media (max-width:480px){.sound-orb{width:42px;height:42px}}