/* Director 22 additions. Palette: OLED black, court blue #043cff, rotor yellow #ffcf00/#ffda39,
   ball green #9aff00, UI accent #c7fc68. Motion: slow glides, cubic-bezier(.22,.61,.36,1). */
:root{--d22-black:#000;--d22-court:#043cff;--d22-yellow:#ffcf00;--d22-yellow-hi:#ffda39;--d22-ball:#9aff00;--d22-accent:#c7fc68;--d22-ink:#f0f6f2;--d22-muted:#b6c9c1;--d22-ease:cubic-bezier(.22,.61,.36,1)}

/* ---- Sound veil ---- */
#d22Veil{position:fixed;inset:0;z-index:2147483000;display:grid;place-items:center;background:#000;color:var(--d22-ink);
  font-family:"Barlow Condensed","Arial Narrow",system-ui,sans-serif;-webkit-mask:radial-gradient(circle at var(--x,50%) var(--y,50%),transparent 0,transparent var(--r,0px),#000 calc(var(--r,0px) + 2px));
  mask:radial-gradient(circle at var(--x,50%) var(--y,50%),transparent 0,transparent var(--r,0px),#000 calc(var(--r,0px) + 2px))}
@property --r{syntax:'<length>';inherits:false;initial-value:0px}
#d22Veil.leaving{animation:d22Open 1.8s var(--d22-ease) forwards;pointer-events:none}
@keyframes d22Open{to{--r:160vmax;opacity:.0}}
#d22Veil::before{content:"";position:absolute;inset:0;background:radial-gradient(60vmax 38vmax at 50% 118%,rgba(4,60,255,.28),transparent 70%);pointer-events:none}
#d22Veil .v-stage{position:relative;display:flex;flex-direction:column;align-items:center;gap:14px;padding:24px 16px;text-align:center;max-width:100%}
#d22Veil .v-disc{width:min(34vw,168px);aspect-ratio:1;border-radius:50%;position:relative;margin-bottom:10px;
  background:radial-gradient(circle at 50% 50%,#0b0b0b 0 52%,transparent 53%),conic-gradient(from var(--a,0deg),#8a6c00,var(--d22-yellow) 18%,#fff3b0 24%,var(--d22-yellow) 30%,#7a6000 55%,var(--d22-yellow-hi) 80%,#8a6c00);
  box-shadow:0 0 0 1px rgba(255,207,0,.25),0 0 60px rgba(255,207,0,.18),inset 0 0 18px rgba(0,0,0,.6);animation:d22Spin 9s linear infinite,d22Breathe 4.8s var(--d22-ease) infinite}
@property --a{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes d22Spin{to{--a:360deg}}
@keyframes d22Breathe{50%{box-shadow:0 0 0 1px rgba(255,207,0,.35),0 0 90px rgba(255,207,0,.28),inset 0 0 18px rgba(0,0,0,.6)}}
#d22Veil .v-disc i{position:absolute;inset:34%;border-radius:50%;background:radial-gradient(circle at 40% 35%,#d9ff7a,var(--d22-ball) 45%,#3d7a00);box-shadow:0 0 26px rgba(154,255,0,.45);opacity:0;transform:scale(.6);transition:opacity 1.2s var(--d22-ease),transform 1.2s var(--d22-ease)}
#d22Veil.ready .v-disc i{opacity:1;transform:scale(1)}
#d22Veil .v-disc b{position:absolute;inset:-14px;border-radius:50%;border:1px solid rgba(240,246,242,.10)}
#d22Veil .v-word{font-weight:800;font-size:clamp(44px,9vw,78px);letter-spacing:.16em;line-height:1;padding-left:.16em}
#d22Veil .v-word span{color:var(--d22-yellow)}
#d22Veil .v-sub{font:600 12px/1 Inter,system-ui,sans-serif;letter-spacing:.32em;color:var(--d22-muted)}
#d22Veil button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
#d22Veil .v-enter{margin-top:22px;display:grid;grid-template-columns:auto auto;align-items:center;column-gap:14px;padding:16px 28px 16px 22px;border-radius:999px;
  border:1px solid rgba(255,207,0,.45);background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.015));backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 10px 40px rgba(0,0,0,.6);opacity:.35;transform:translateY(6px);transition:opacity 1.2s var(--d22-ease),transform 1.2s var(--d22-ease),border-color .6s var(--d22-ease),box-shadow .6s var(--d22-ease)}
#d22Veil.ready .v-enter{opacity:1;transform:none}
#d22Veil .v-enter:hover,#d22Veil .v-enter:focus-visible{border-color:var(--d22-yellow);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 0 40px rgba(255,207,0,.22);outline:none}
#d22Veil .v-enter strong{font-weight:700;font-size:22px;letter-spacing:.18em;text-align:left}
#d22Veil .v-enter small{grid-column:2;font:600 10px/1 Inter,system-ui,sans-serif;letter-spacing:.28em;color:var(--d22-yellow-hi);text-align:left;margin-top:4px}
#d22Veil .v-wave{grid-row:1/3;display:flex;gap:3px;align-items:center;height:26px}
#d22Veil .v-wave i{width:3px;height:30%;border-radius:2px;background:var(--d22-yellow);animation:d22Wave 1.6s var(--d22-ease) infinite}
#d22Veil .v-wave i:nth-child(2){animation-delay:.15s}#d22Veil .v-wave i:nth-child(3){animation-delay:.3s}#d22Veil .v-wave i:nth-child(4){animation-delay:.45s}#d22Veil .v-wave i:nth-child(5){animation-delay:.6s}
@keyframes d22Wave{50%{height:100%}}
#d22Veil .v-quiet{font:500 12px/1 Inter,system-ui,sans-serif;letter-spacing:.12em;color:var(--d22-muted);padding:10px;opacity:0;transition:opacity 1.2s var(--d22-ease) .3s}
#d22Veil.ready .v-quiet{opacity:.8}
#d22Veil .v-quiet:hover{color:var(--d22-ink)}
#d22Veil .v-load{width:min(240px,60vw);height:1px;background:rgba(240,246,242,.12);margin-top:14px;overflow:hidden}
#d22Veil .v-load i{display:block;height:100%;background:var(--d22-accent);transform-origin:left;transform:scaleX(0);transition:transform .5s var(--d22-ease)}
#d22Veil.ready .v-load{opacity:0;transition:opacity 1s var(--d22-ease) .6s}
#d22Veil .v-status{font:500 10px/1 Inter,system-ui,sans-serif;letter-spacing:.3em;text-transform:uppercase;color:var(--d22-muted);margin:0}
@media (prefers-reduced-motion:reduce){#d22Veil .v-disc,#d22Veil .v-wave i{animation:none}#d22Veil.leaving{animation-duration:.4s}}

/* ---- Game layer (arena) ---- */
#d22Fx{position:fixed;inset:0;pointer-events:none;z-index:40;overflow:hidden}
#d22Fx .flash{position:absolute;inset:0;opacity:0;background:radial-gradient(18vmin 18vmin at var(--fx,50%) var(--fy,50%),var(--c,rgba(255,218,57,.55)),transparent 70%);mix-blend-mode:screen}
#d22Fx .flash.rival{--c:rgba(230,238,245,.35)}
#d22Fx .flash.on{animation:d22Flash .32s cubic-bezier(.22,.61,.36,1)}
@keyframes d22Flash{0%{opacity:var(--fa,.5)}100%{opacity:0}}
#d22Fx .sweep{position:absolute;top:0;bottom:0;left:-40%;width:40%;opacity:0;background:linear-gradient(100deg,transparent,rgba(199,252,104,.07) 45%,rgba(240,246,242,.10) 50%,rgba(199,252,104,.07) 55%,transparent);mix-blend-mode:screen}
#d22Fx .sweep.rival{background:linear-gradient(100deg,transparent,rgba(230,238,245,.05) 45%,rgba(240,246,242,.07) 50%,rgba(230,238,245,.05) 55%,transparent)}
#d22Fx .sweep.on{animation:d22Sweep 1.8s cubic-bezier(.22,.61,.36,1)}
@keyframes d22Sweep{0%{opacity:1;transform:translateX(0)}100%{opacity:0;transform:translateX(360%)}}

.d22-level{display:flex;align-items:center;gap:4px;margin-top:18px;font-family:"Barlow Condensed","Arial Narrow",system-ui,sans-serif}
.d22-level small{font:600 10px/1 Inter,system-ui,sans-serif;letter-spacing:.26em;color:var(--d22-muted);margin-right:10px}
.d22-level button{font:700 14px/1 "Barlow Condensed","Arial Narrow",system-ui,sans-serif;letter-spacing:.16em;color:var(--d22-muted);background:rgba(255,255,255,.03);border:1px solid rgba(240,246,242,.14);padding:9px 14px;border-radius:999px;cursor:pointer;transition:color .6s var(--d22-ease),border-color .6s var(--d22-ease),background .6s var(--d22-ease)}
.d22-level button:hover{color:var(--d22-ink);border-color:rgba(240,246,242,.32)}
.d22-level button[aria-pressed="true"]{color:#0b0b0b;background:var(--d22-yellow);border-color:var(--d22-yellow)}

#d22Result{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:16px;background:radial-gradient(80vmax 60vmax at 50% 50%,rgba(0,0,0,.35),rgba(0,0,0,.82));opacity:0;transition:opacity .9s var(--d22-ease)}
#d22Result.on{opacity:1}
#d22Result .card{width:min(440px,100%);padding:28px 28px 24px;border-radius:22px;color:var(--d22-ink);font-family:Inter,system-ui,sans-serif;
  background:linear-gradient(160deg,rgba(255,255,255,.09),rgba(255,255,255,.02) 40%,rgba(4,60,255,.06));border:1px solid rgba(240,246,242,.16);
  backdrop-filter:blur(22px) saturate(1.2);-webkit-backdrop-filter:blur(22px) saturate(1.2);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 30px 80px rgba(0,0,0,.7);
  transform:translateY(14px) scale(.985);transition:transform 1.2s var(--d22-ease)}
#d22Result.on .card{transform:none}
#d22Result .eyebrow{font:600 10px/1 Inter,system-ui,sans-serif;letter-spacing:.3em;color:var(--d22-accent)}
#d22Result h2{font:800 clamp(46px,11vw,68px)/.9 "Barlow Condensed","Arial Narrow",system-ui,sans-serif;letter-spacing:.04em;margin:14px 0 20px}
#d22Result h2 span{color:var(--d22-yellow)}
#d22Result .score{display:grid;grid-template-columns:1fr auto 1fr;align-items:end;gap:14px;padding:16px 0;border-top:1px solid rgba(240,246,242,.12);border-bottom:1px solid rgba(240,246,242,.12)}
#d22Result .score div:last-child{text-align:right}
#d22Result .score small{display:block;font:600 10px/1 Inter,system-ui,sans-serif;letter-spacing:.24em;color:var(--d22-muted);margin-bottom:6px}
#d22Result .score b{font:700 54px/1 "Barlow Condensed","Arial Narrow",system-ui,sans-serif;font-variant-numeric:tabular-nums}
#d22Result .score div:first-child b{color:var(--d22-yellow)}
#d22Result .score i{width:1px;height:40px;background:rgba(240,246,242,.18)}
#d22Result dl{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:16px 0 4px}
#d22Result dt{font:500 10px/1.3 Inter,system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--d22-muted)}
#d22Result dd{margin:6px 0 0;font:700 24px/1 "Barlow Condensed","Arial Narrow",system-ui,sans-serif;font-variant-numeric:tabular-nums}
#d22Result .actions{display:flex;align-items:center;gap:18px;margin-top:20px}
#d22Result .again{font:700 18px/1 "Barlow Condensed","Arial Narrow",system-ui,sans-serif;letter-spacing:.16em;color:#0b0b0b;background:var(--d22-yellow);border:0;border-radius:999px;padding:14px 22px;cursor:pointer;transition:box-shadow .6s var(--d22-ease)}
#d22Result .again:hover,#d22Result .again:focus-visible{box-shadow:0 0 34px rgba(255,207,0,.35);outline:none}
#d22Result .actions a{font:600 12px/1 Inter,system-ui,sans-serif;letter-spacing:.2em;color:var(--d22-muted);text-decoration:none}
#d22Result .actions a:hover{color:var(--d22-ink)}
#d22Result .d22-level{margin-top:18px}

#d22Touch{display:none}
.d22-touch #touch{display:none!important}
.d22-touch body.playing #d22Touch,.d22-touch #d22Touch.force{display:block}
#d22Touch .pad{position:fixed;left:max(22px,env(safe-area-inset-left));bottom:calc(28px + env(safe-area-inset-bottom));width:132px;height:132px;border-radius:50%;touch-action:none;z-index:45;
  border:1px solid rgba(240,246,242,.16);background:radial-gradient(circle,rgba(255,255,255,.05),rgba(255,255,255,.015) 70%);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
#d22Touch .knob{position:absolute;left:50%;top:50%;width:52px;height:52px;margin:-26px;border-radius:50%;border:2px solid var(--d22-yellow);background:radial-gradient(circle,#111 55%,rgba(255,207,0,.15));box-shadow:0 0 18px rgba(255,207,0,.25);transition:transform .12s ease-out}
#d22Touch button{position:fixed;z-index:45;touch-action:none;border-radius:50%;font:700 14px/1 "Barlow Condensed","Arial Narrow",system-ui,sans-serif;letter-spacing:.16em;color:var(--d22-ink);cursor:pointer;
  border:1px solid rgba(240,246,242,.2);background:rgba(255,255,255,.05);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
#d22Touch .swing{right:max(22px,env(safe-area-inset-right));bottom:calc(36px + env(safe-area-inset-bottom));width:104px;height:104px;border-color:rgba(255,207,0,.6);color:var(--d22-yellow)}
#d22Touch .slice{right:calc(max(22px,env(safe-area-inset-right)) + 116px);bottom:calc(26px + env(safe-area-inset-bottom));width:64px;height:64px;font-size:12px}
#d22Touch button.hit{animation:d22Press .35s var(--d22-ease)}
@keyframes d22Press{0%{box-shadow:0 0 0 0 rgba(255,207,0,.45);transform:scale(.94)}100%{box-shadow:0 0 0 18px rgba(255,207,0,0);transform:none}}
.d22-touch body.playing #flightHud,.d22-touch body.playing #viewControls,.d22-touch body.playing #sceneTravelLaunch,.d22-touch body.playing #readyHint span{display:none!important}

/* ---- Director 24: tilt-and-glint glass ---- */
.d24-glint{position:relative;transition:transform 1.2s var(--d22-ease)}
.d24-glint::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .9s var(--d22-ease);
  background:radial-gradient(160px 120px at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.10),rgba(255,218,57,.04) 40%,transparent 70%);mix-blend-mode:screen}
.d24-glint.d24-lit::after{opacity:1}
@media (prefers-reduced-motion:reduce){.d24-glint{transition:none}}
html.d24-entering #world-ui,html.d24-entering #sceneTravelLaunch,html.d24-entering #reel06fix-badge,html.d24-entering #menuMusic,html.d24-entering #viewModeDock,html.d24-entering .director-home-logo{visibility:hidden!important}

/* ---- Director 26 ---- */
.d26-roll{display:inline-block;animation:d26Roll .7s var(--d22-ease)}
@keyframes d26Roll{0%{transform:translateY(-.5em);opacity:0;filter:blur(3px)}55%{opacity:1;filter:blur(0)}100%{transform:none}}
.d26-sheen-host{position:relative}
.d26-sheen{position:absolute;inset:0;pointer-events:none;opacity:0;color:#fffbe6!important;-webkit-text-fill-color:#fffbe6;text-shadow:0 0 18px rgba(255,218,57,.35);
  -webkit-mask-image:linear-gradient(105deg,transparent 0 42%,#000 50%,transparent 58% 100%);mask-image:linear-gradient(105deg,transparent 0 42%,#000 50%,transparent 58% 100%);
  -webkit-mask-size:300% 100%;mask-size:300% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:100% 0;mask-position:100% 0}
.d26-sheen *{color:inherit!important;-webkit-text-fill-color:inherit}
.d26-sheen.run{animation:d26Sweep 1.8s var(--d22-ease)}
@keyframes d26Sweep{0%{opacity:.85;-webkit-mask-position:100% 0;mask-position:100% 0}100%{opacity:.85;-webkit-mask-position:0 0;mask-position:0 0}}
.d26-sheen.hover{animation:none;opacity:.5;-webkit-mask-image:radial-gradient(80px 60px at var(--mx,50%) 50%,#000,transparent 75%);mask-image:radial-gradient(80px 60px at var(--mx,50%) 50%,#000,transparent 75%);-webkit-mask-size:100% 100%;mask-size:100% 100%;transition:opacity .6s var(--d22-ease)}
#d26Dissolve{position:fixed;inset:0;z-index:2147483100;pointer-events:none;background:#000;opacity:0;
  -webkit-mask:radial-gradient(circle at var(--x,50%) var(--y,50%),#000 0,#000 30%,transparent 75%);mask:radial-gradient(circle at var(--x,50%) var(--y,50%),#000 0,#000 30%,transparent 75%);
  -webkit-mask-size:400% 400%;mask-size:400% 400%;-webkit-mask-position:center;mask-position:center;transition:opacity .9s var(--d22-ease)}
#d26Dissolve.out{opacity:1;-webkit-mask:none;mask:none;transition:opacity .65s var(--d22-ease)}
#d26Dissolve.in{opacity:1;transition:none;-webkit-mask:none;mask:none}
html.d26-live #clarityCompanion{opacity:.0;pointer-events:none;transition:opacity 1.2s var(--d22-ease)}
#clarityCompanion{transition:opacity 1.2s var(--d22-ease)}
@media (prefers-reduced-motion:reduce){.d26-roll,.d26-sheen.run{animation:none}}
/* Director 26: line-drawn court loader under the rotor */
#d22Veil .v-court{position:absolute;left:50%;top:50%;width:min(92vw,620px);transform:translate(-50%,-62%) perspective(900px) rotateX(18deg);opacity:.9;pointer-events:none}
#d22Veil .v-court path{stroke:#e8eef4;stroke-width:1.4;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .6s var(--d22-ease);filter:drop-shadow(0 0 4px rgba(232,238,244,.35))}
#d22Veil .v-court path.net{stroke:#0060ff;stroke-width:2;filter:drop-shadow(0 0 6px rgba(4,60,255,.8))}
#d22Veil.ready .v-court{animation:d26Settle 2.4s var(--d22-ease) forwards}
@keyframes d26Settle{to{opacity:.55}}
#d22Veil .v-disc{animation:d22Breathe 4.8s var(--d22-ease) infinite!important;z-index:1}
#d22Veil .v-word,#d22Veil .v-sub,#d22Veil .v-enter,#d22Veil .v-quiet,#d22Veil .v-load,#d22Veil .v-status{position:relative;z-index:1}
/* Director 27: particle-field loader replaces the rotor ring + wordmark */
#d22Veil .v-field{position:fixed;inset:0;z-index:0}
#d22Veil .v-spacer{height:min(42vh,380px)}
#d22Veil::before{display:none}
#d22Veil .v-sub,#d22Veil .v-enter,#d22Veil .v-quiet,#d22Veil .v-load,#d22Veil .v-status{position:relative;z-index:1}
#d22Veil{place-items:end center}
#d22Veil .v-stage{padding-bottom:max(6vh,32px)}
#d22Veil .v-spacer{display:none}

/* Director 27: the power line. A thin ball-green LED line with a slow charge pulse and a soft glow.
   Replaces the violet energy tube (and its lavender highlights) everywhere on the arena HUD. */
#flightHud .boost{--energy-top:#e9ffc2;--energy-core:#9aff00;--energy-base:#5fbf00;filter:none!important}
#flightHud .energyCaption>small,#flightHud .energyCaption span small{color:var(--d22-muted)!important}
#flightHud .boost .track{height:4px!important;min-height:0!important;padding:0!important;border:0!important;border-radius:2px!important;
  background:rgba(154,255,0,.10)!important;box-shadow:inset 0 0 0 1px rgba(154,255,0,.14)!important;overflow:visible!important;position:relative}
#flightHud .boost .track #bar{position:relative;height:100%!important;border-radius:2px!important;box-shadow:0 0 10px rgba(154,255,0,.55),0 0 24px rgba(154,255,0,.22)!important;
  background:linear-gradient(90deg,#5fbf00,#9aff00 70%,#e9ffc2)!important;
  -webkit-mask:repeating-linear-gradient(90deg,#000 0 7px,transparent 7px 9px);mask:repeating-linear-gradient(90deg,#000 0 7px,transparent 7px 9px);transition:width .25s linear}
#flightHud .boost .track #bar::after{content:"";position:absolute;inset:-2px 0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.95),transparent);width:18%;
  animation:d27Charge 2.6s cubic-bezier(.22,.61,.36,1) infinite;mix-blend-mode:screen}
@keyframes d27Charge{0%{transform:translateX(-120%)}100%{transform:translateX(560%)}}
#flightHud .boost[data-state="boosting"] .track #bar{box-shadow:0 0 14px rgba(154,255,0,.85),0 0 34px rgba(154,255,0,.35)!important}
#flightHud .boost[data-state="boosting"] .track #bar::after{animation-duration:.9s}
#flightHud .boost[data-level="low"]{--energy-top:#c7fc68;--energy-core:#7acc00;--energy-base:#3d7a00}
#flightHud .boost[data-level="low"] .track #bar{opacity:.7;animation:d27Low 1.4s ease-in-out infinite}
#flightHud .boost[data-level="low"] #boostState{color:var(--d22-accent)!important}
@keyframes d27Low{50%{opacity:.35}}
#flightHud .boost[data-state="boosting"] .track{border-color:transparent!important}
@media (prefers-reduced-motion:reduce){#flightHud .boost .track #bar::after{animation:none;display:none}}

/* Director 28: minimal "tap for sound" pill over the trophy opening */
#d28SoundPill{position:fixed;left:50%;bottom:calc(96px + env(safe-area-inset-bottom));z-index:2147483000;transform:translate(-50%,12px);opacity:0;
  display:flex;align-items:center;gap:12px;padding:12px 20px 12px 16px;border-radius:999px;cursor:pointer;color:var(--d22-ink);
  font:700 15px/1 "Barlow Condensed","Arial Narrow",system-ui,sans-serif;letter-spacing:.2em;
  border:1px solid rgba(255,207,0,.45);background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.02));
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 10px 40px rgba(0,0,0,.6);
  transition:opacity 1.2s var(--d22-ease),transform 1.2s var(--d22-ease),border-color .6s var(--d22-ease)}
#d28SoundPill.in{opacity:1;transform:translate(-50%,0);transition-delay:.8s}
#d28SoundPill.out{opacity:0;transform:translate(-50%,8px);transition-delay:0s;pointer-events:none}
#d28SoundPill:hover,#d28SoundPill:focus-visible{border-color:var(--d22-yellow);outline:none}
#d28SoundPill .w{display:flex;gap:3px;align-items:center;height:16px}
#d28SoundPill .w i{width:2px;height:35%;border-radius:2px;background:var(--d22-yellow);animation:d22Wave 1.6s var(--d22-ease) infinite}
#d28SoundPill .w i:nth-child(2){animation-delay:.15s}#d28SoundPill .w i:nth-child(3){animation-delay:.3s}#d28SoundPill .w i:nth-child(4){animation-delay:.45s}
@media (prefers-reduced-motion:reduce){#d28SoundPill .w i{animation:none}}