/* ==================================================================
   04 · Extensions — "There’s an extension for that."
   Section shell, horizontal reel, category tabs, base card chrome for
   every .ext-card, and the art of the three priority cards
   (Linear, Google Translate, Spotify).
   Everything is scoped under #extensions / .ext-*.
================================================================== */

/* animatable fade widths for the reel edge mask */
@property --ext-fl { syntax: "<length>"; inherits: false; initial-value: 64px; }
@property --ext-fr { syntax: "<length>"; inherits: false; initial-value: 224px; }

#extensions {
  --ext-gap: 56px;
  --ext-card-w: 360px;
  /* left edge of the 1204px container, used to align the reel */
  --ext-pad: max(24px, calc((100% - 1204px) / 2));
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  width: 100%;
  padding: var(--s-13) 0;
  overflow: hidden;
}

/* ------------------------------------------------------------ top row */
#extensions .ext-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
}
#extensions .ext-title { max-width: 432px; }

#extensions .ext-tabs-scroll {
  display: flex;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
#extensions .ext-tabs-scroll::-webkit-scrollbar { display: none; }

#extensions .ext-tabs {
  position: relative;
  display: flex;
  flex-grow: 1;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  padding: var(--s-1) var(--s-2-5);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-bottom: 0;
  border-radius: 31px;
  background: linear-gradient(137deg, #111214 5%, #0c0d0f 76%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
#extensions .ext-tab {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  height: 46px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.2px;
  white-space: nowrap;
  color: var(--grey-300);
  transition: color 0.3s;
}
#extensions .ext-tab:hover,
#extensions .ext-tab.is-active { color: var(--white); }
#extensions .ext-tab:focus-visible { outline: none; text-shadow: 0 0 12px rgba(255, 255, 255, 0.7); color: var(--white); }

#extensions .ext-tabs-pill {
  position: absolute;
  left: 0;
  top: var(--s-1);
  width: var(--pill-w, 107px);
  height: 46px;
  border-radius: 36px;
  transform: translate3d(var(--pill-x, 8px), 0, 0);
  background: radial-gradient(52% 92% at 51% 8%, #5b5b5b 0%, #1a1a1a 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 0 0 1px rgba(255, 255, 255, 0.045);
  pointer-events: none;
  transition: transform 0.3s ease, width 0.3s ease;
}

/* ------------------------------------------------------------ reel */
#extensions .ext-reel-wrap {
  position: relative;
  width: 100%;
  max-width: 2000px;
  margin: 0 auto;
}
#extensions .ext-reel {
  --ext-fl: 64px;
  --ext-fr: 224px;
  position: relative;
  display: flex;
  align-items: stretch;
  gap: var(--ext-gap);
  margin: calc(-1 * var(--s-5)) 0;
  /* the reel ends 88px short of the right edge (56px gap + 32px end padding),
     as on the reference: the last card never sits flush with the container */
  padding: 72px 88px 72px var(--ext-pad);
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--ext-pad);
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
  outline: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--ext-fl), #000 calc(100% - var(--ext-fr)), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 var(--ext-fl), #000 calc(100% - var(--ext-fr)), transparent 100%);
  transition: --ext-fl 0.45s ease, --ext-fr 0.45s ease;
}
#extensions .ext-reel::-webkit-scrollbar { display: none; }
#extensions .ext-reel.at-start { --ext-fl: 0px; }
/* (the right fade stays on at the end of the reel, as on the reference) */
#extensions .ext-reel.is-gliding,
#extensions .ext-reel.is-dragging { scroll-snap-type: none; }
#extensions .ext-reel.is-dragging { cursor: grabbing; user-select: none; -webkit-user-select: none; }
#extensions .ext-reel:focus-visible { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.18); }

/* every slide (cards + final "more" card) — low specificity so slide owners can override */
:where(#extensions .ext-reel) > * { flex: none; scroll-snap-align: start; }

/* entrance: cards slide up in sequence the first time the reel shows up */
#extensions .ext-reel.is-pre > * { opacity: 0; }
#extensions .ext-reel.is-entering > * {
  transform-origin: 100% 0;
  animation: ext-card-in 0.7s cubic-bezier(0.215, 0.61, 0.355, 1) var(--ext-delay, 0ms) both;
}
/* category switch: the current cards leave before the new ones slide in */
#extensions .ext-reel.is-exiting > * {
  opacity: 0;
  transform: translate(-20px, -20px) scale(0.98);
  transition: opacity 0.3s ease-in, transform 0.3s ease-in;
}
@keyframes ext-card-in {
  from { opacity: 0; transform: translate(10px, 50px) scale(0.98); }
  to { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------ card chrome (all cards) */
#extensions .ext-card {
  position: relative;
  flex: none;
  width: var(--ext-card-w);
  display: flex;
  flex-direction: column;
  border-radius: var(--r-2xl);
  overflow: hidden;
  isolation: isolate;
  color: var(--white);
  background: var(--ext-bg, linear-gradient(137deg, #111214 5%, #0c0d0f 76%)), var(--grey-900);
  /* outer glow; a card may replace it entirely with --ext-shadow
     (several reference cards use a dark drop shadow + faint tint instead) */
  box-shadow: var(--ext-shadow,
    0 0 20px 3px var(--ext-glow-in, var(--ext-glow, transparent)),
    0 0 40px 20px var(--ext-glow, transparent));
  scroll-snap-align: start;
  -webkit-tap-highlight-color: transparent;
}
/* hairline border + top highlight, drawn above the art */
#extensions .ext-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  pointer-events: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
/* soft vignette on hover */
#extensions .ext-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.25) 80%);
  mix-blend-mode: soft-light;
  opacity: 0;
  transition: opacity 0.3s;
}
#extensions .ext-card:hover::after,
#extensions .ext-card:focus-within::after { opacity: 1; }

#extensions .ext-card-head {
  display: flex;
  align-items: center;
  gap: var(--s-1-5);
  margin: var(--s-3) var(--s-3) 0;
}
#extensions .ext-card-icon {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: #252628;
  box-shadow: 0 1.2px 2.4px rgba(0, 0, 0, 0.28);
}
/* thin ring inside the tile, tinted after the app icon;
   --ext-ring may be a plain colour or a gradient (defaults to --ext-accent) */
#extensions .ext-card-icon::before {
  content: "";
  position: absolute;
  inset: 3px;
  padding: 1.1px;
  border-radius: 9.5px;
  background: var(--ext-ring, var(--ext-accent, #7c7c80));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}
#extensions .ext-card-icon svg { position: relative; width: 30px; height: 30px; overflow: visible; }
#extensions .ext-card-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  font-size: 18px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 0;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--white);
}
#extensions .ext-card-go {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--r-md);
  color: var(--grey-50);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.1) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 0 0 1px rgba(255, 255, 255, 0.25),
    inset 0 -1px 0 rgba(0, 0, 0, 0.2);
  transition: box-shadow 0.3s, background 0.3s, color 0.3s;
}
#extensions .ext-card-go svg { width: 16px; height: 16px; transition: transform 0.3s var(--ease-out); }
#extensions .ext-card:hover .ext-card-go,
#extensions .ext-card:focus-within .ext-card-go {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 0 0 1px rgba(255, 255, 255, 0.5),
    inset 0 -1px 0 rgba(0, 0, 0, 0.2);
}

#extensions .ext-card-desc {
  flex: 1 0 auto;
  margin: var(--s-3) var(--s-3) 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0;
  color: var(--white);
}
#extensions .ext-card-divider {
  flex: none;
  height: 1px;
  margin: var(--s-3) var(--s-3) 0;
  background: rgba(255, 255, 255, 0.05);
}
/* art area: full card width, square (360×360 on desktop) */
#extensions .ext-card-art {
  position: relative;
  flex: none;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

/* fixed 360×360 stage for the three priority arts, scaled on small cards */
#extensions :is(.ext-art-linear, .ext-art-translate, .ext-art-spotify) > .ext-art-stage {
  position: absolute;
  left: 0;
  top: 0;
  width: 360px;
  height: 360px;
  transform-origin: 0 0;
  transform: scale(var(--ext-art-scale, 1));
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}
#extensions .ext-art-stage svg { max-width: none; }

/* ------------------------------------------------------------ bottom row */
#extensions .ext-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
}
#extensions .ext-browse {
  gap: 3px;
  white-space: nowrap;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.3px;
  color: var(--grey-200);
  transition: color 0.3s;
}
#extensions .ext-browse:hover { color: var(--white); }
#extensions .ext-browse .arrow { width: 16px; height: 16px; transition: transform 0.3s var(--ease-out); }
#extensions .ext-browse:hover .arrow { transform: translateX(2px); }
#extensions .ext-browse:focus-visible { outline: none; border-radius: 4px; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5); }

#extensions .ext-pager { display: flex; gap: var(--s-1-5); }
#extensions .ext-pager-btn {
  display: grid;
  place-items: center;
  padding: var(--s-2-5);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-bottom: 0;
  border-radius: 86px;
  color: var(--white);
  background: linear-gradient(137deg, #111214 5%, #0c0d0f 76%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transition: color 0.3s, box-shadow 0.3s, transform 0.15s ease;
}
#extensions .ext-pager-btn svg { width: 16px; height: 16px; }
#extensions .ext-pager-btn:hover:not(:disabled) {
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.1),
    0 2px 40px 10px rgba(154, 170, 255, 0.05),
    0 0 16px -7px rgba(154, 170, 255, 0.05);
}
#extensions .ext-pager-btn:active:not(:disabled) { transform: scale(0.94); }
#extensions .ext-pager-btn:disabled { color: var(--grey-300); cursor: default; }
#extensions .ext-pager-btn:focus-visible { outline: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 0 0 2px rgba(255, 255, 255, 0.45); }

/* ==================================================================
   LINEAR — starfield, glowing planet outline, status icons
================================================================== */
#extensions .ext-art-linear .ext-lin-haze {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120px 100px at 200px 296px, rgba(255, 190, 110, 0.07), transparent 80%),
    radial-gradient(60px 52px at 221px 305px, rgba(255, 190, 70, 0.05), transparent 80%),
    radial-gradient(110px 96px at 280px 338px, rgba(215, 70, 255, 0.07), transparent 80%),
    radial-gradient(120px 110px at 340px 334px, rgba(110, 40, 220, 0.05), transparent 80%),
    radial-gradient(150px 70px at 255px 266px, rgba(220, 110, 210, 0.05), transparent 80%),
    radial-gradient(110px 80px at 180px 352px, rgba(255, 205, 160, 0.045), transparent 80%),
    radial-gradient(210px 150px at 100px 360px, rgba(140, 150, 255, 0.055), transparent 80%);
}
#extensions .ext-lin-sky,
#extensions .ext-lin-sky > svg,
#extensions .ext-lin-planet,
#extensions .ext-lin-shine-layer {
  position: absolute;
  left: 0;
  top: 0;
  width: 360px;
  height: 360px;
  overflow: visible;
}
#extensions .ext-lin-soft { display: none; }
#extensions .ext-lin-mid { opacity: 0.16; stroke-width: 3.4px; }
#extensions .ext-lin-planet { filter: drop-shadow(0 0 3px rgba(176, 182, 255, 0.55)) drop-shadow(0 0 10px rgba(150, 156, 255, 0.28)); }
#extensions .ext-lin-core { opacity: 0.86; stroke-width: 1.6px; }
#extensions .ext-lin-shine-layer { opacity: 0; }
#extensions .ext-lin-shine path { stroke-dasharray: 7 200; stroke-dashoffset: 7; }
#extensions .ext-lin-shine-glow { opacity: 0.22; }
#extensions .ext-lin-shine-core { opacity: 0.7; }

#extensions .ext-lin-status { position: absolute; left: 0; top: 281px; width: 360px; height: 48px; }
#extensions .ext-lin-st {
  --halo: rgba(255, 255, 255, 0.34);
  position: absolute;
  top: 0;
  display: block;
  width: 48px;
  height: 48px;
}
#extensions .ext-lin-st-backlog { left: 29.5px; }
#extensions .ext-lin-st-todo { left: 113px; }
#extensions .ext-lin-st-progress { left: 196.5px; }
#extensions .ext-lin-st-done { left: 277px; }
#extensions .ext-lin-st svg { position: relative; width: 48px; height: 48px; overflow: visible; }
#extensions .ext-lin-st::before {
  content: "";
  position: absolute;
  inset: -18px;
  border-radius: 50%;
  background: radial-gradient(closest-side, transparent 50%, var(--halo) 60%, transparent 100%);
  opacity: 0;
}
#extensions .ext-lin-st-backlog,
#extensions .ext-lin-st-todo {
  filter: drop-shadow(0 0 1.2px rgba(255, 255, 255, 0.95)) drop-shadow(0 0 5px rgba(255, 255, 255, 0.7));
}
#extensions .ext-lin-st-progress {
  --halo: rgba(255, 200, 70, 0.45);
  filter: drop-shadow(0 0 1.4px rgba(255, 214, 70, 1)) drop-shadow(0 0 4.5px rgba(255, 200, 60, 0.42));
}
#extensions .ext-lin-st-done {
  --halo: rgba(128, 150, 255, 0.5);
  filter: drop-shadow(0 0 1.5px rgba(150, 170, 255, 0.7)) drop-shadow(0 0 5px rgba(120, 100, 255, 0.42));
}

/* motion (only while the card is on screen) */
#extensions .ext-art-linear.is-live .ext-lin-stars-0 { animation: ext-lin-twinkle 3.2s ease-in-out infinite; }
#extensions .ext-art-linear.is-live .ext-lin-stars-1 { animation: ext-lin-twinkle 4.4s ease-in-out -1.3s infinite; }
#extensions .ext-art-linear.is-live .ext-lin-stars-2 { animation: ext-lin-twinkle 5.6s ease-in-out -2.9s infinite; }
#extensions .ext-art-linear.is-live .ext-lin-sky { animation: ext-lin-drift 24s ease-in-out infinite alternate; }
#extensions .ext-art-linear.is-live .ext-lin-shine-layer { animation: ext-lin-shine-fade 6.5s ease-in-out 0.4s infinite; }
#extensions .ext-art-linear.is-live .ext-lin-shine path { animation: ext-lin-shine-move 6.5s cubic-bezier(0.45, 0.05, 0.4, 1) 0.4s infinite; }

#extensions .ext-art-linear.is-live .ext-lin-st,
#extensions .ext-art-linear.is-live .ext-lin-st::before { animation: ext-lin-pop 6s cubic-bezier(0.3, 0.7, 0.3, 1) infinite; }
#extensions .ext-art-linear.is-live .ext-lin-st::before { animation-name: ext-lin-halo; animation-timing-function: ease-out; }
#extensions .ext-art-linear.is-live .ext-lin-st-todo,
#extensions .ext-art-linear.is-live .ext-lin-st-todo::before { animation-delay: 0.75s; }
#extensions .ext-art-linear.is-live .ext-lin-st-progress,
#extensions .ext-art-linear.is-live .ext-lin-st-progress::before { animation-delay: 1.5s; }
#extensions .ext-art-linear.is-live .ext-lin-st-done,
#extensions .ext-art-linear.is-live .ext-lin-st-done::before { animation-delay: 2.25s; }
#extensions .ext-art-linear.is-live .ext-lin-st-backlog svg { animation: ext-lin-spin 18s linear infinite; }
/* the check and the half fill stay drawn (as on the reference card); they only
   brighten a touch when their icon pops */
#extensions .ext-lin-half,
#extensions .ext-lin-check { transform-box: view-box; transform-origin: 24px 24px; }
#extensions .ext-art-linear.is-live .ext-lin-half { animation: ext-lin-glint 6s ease-out 1.5s infinite; }
#extensions .ext-art-linear.is-live .ext-lin-check { animation: ext-lin-tick 6s cubic-bezier(0.3, 0.7, 0.3, 1) 2.25s infinite; }

@keyframes ext-lin-twinkle { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
@keyframes ext-lin-drift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-7px, 4px, 0); } }
@keyframes ext-lin-shine-fade { 0% { opacity: 0; } 10% { opacity: 1; } 52% { opacity: 1; } 62%, 100% { opacity: 0; } }
@keyframes ext-lin-shine-move { 0% { stroke-dashoffset: 7; } 62%, 100% { stroke-dashoffset: -100; } }
@keyframes ext-lin-pop { 0%, 17%, 100% { transform: none; } 5% { transform: scale(1.07); } }
@keyframes ext-lin-halo { 0%, 22%, 100% { opacity: 0; } 5% { opacity: 0.38; } }
@keyframes ext-lin-spin { to { transform: rotate(360deg); } }
@keyframes ext-lin-glint { 0%, 20%, 100% { fill: #ffeab6; } 5% { fill: #fff6dc; } }
@keyframes ext-lin-tick { 0%, 16%, 100% { transform: none; } 6% { transform: scale(1.12) rotate(-4deg); } }

/* ==================================================================
   GOOGLE TRANSLATE — endless column of "cheese omelette" translations
================================================================== */
#extensions .ext-tr-window {
  position: absolute;
  inset: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, transparent 17px, #000 33px, #000 322px, transparent 346px);
  mask-image: linear-gradient(to bottom, transparent 0, transparent 17px, #000 33px, #000 322px, transparent 346px);
}
#extensions .ext-tr-track {
  position: absolute;
  left: 30px;
  top: 26px;
  will-change: transform;
}
#extensions .ext-tr-line {
  display: flex;
  align-items: center;
  gap: 12.5px;
  height: 44px;
  font-size: 24px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.2px;
  white-space: nowrap;
}
#extensions .ext-tr-line span { color: rgba(255, 255, 255, 0.22); }
#extensions .ext-tr-line .is-b { color: rgba(255, 255, 255, 0.645); }
#extensions .ext-tr-line .is-b2 { color: rgba(255, 255, 255, 0.62); }
#extensions .ext-tr-line .is-m { color: rgba(255, 255, 255, 0.42); }
#extensions .ext-tr-line .is-d { color: rgba(255, 255, 255, 0.22); }
/* script-specific sizes so each word keeps the width it has in the reference */
#extensions .ext-tr-line [lang="ar"],
#extensions .ext-tr-line [lang="he"] { font-family: system-ui, -apple-system, "Segoe UI", var(--font); }
#extensions .ext-tr-line [lang="ar"] { position: relative; top: 2px; font-size: 30px; font-weight: 400; color: rgba(255, 255, 255, 0.18); }
#extensions .ext-tr-line [lang="he"] { font-size: 26px; }
#extensions .ext-tr-line [lang="vi"] { margin-left: -5px; }
/* stepped scroll driven by the JS (one row per step, eased) */
#extensions .ext-tr-track { transition: transform 0.9s cubic-bezier(0.65, 0, 0.25, 1); }

/* ==================================================================
   SPOTIFY — floating original cover art + transport controls
================================================================== */
#extensions .ext-sp-haze {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(236, 240, 238, 0) 0%, rgba(236, 240, 238, 0.05) 20%, rgba(236, 240, 238, 0.115) 48%, rgba(236, 240, 238, 0.145) 100%);
}
#extensions .ext-sp-glow {
  position: absolute;
  left: 30px;
  top: -40px;
  width: 300px;
  height: 260px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(38, 190, 96, 0.3), rgba(38, 190, 96, 0));
  opacity: 0.85;
}
#extensions .ext-sp-cover {
  position: absolute;
  left: 74px;
  top: 38px;
  width: 212px;
  height: 206px;
  border-radius: 2px;
  box-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.16), 0 2px 6px rgba(0, 0, 0, 0.25);
  will-change: transform;
}
/* broad soft shadow the cover casts on the card */
#extensions .ext-sp-cover::before {
  content: "";
  position: absolute;
  left: -18px;
  right: -18px;
  top: 16px;
  bottom: -24px;
  z-index: -1;
  border-radius: 40px;
  background: rgba(0, 0, 0, 0.42);
  filter: blur(24px);
}
#extensions .ext-sp-sleeve {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  opacity: 0;
  transform: translate3d(16px, 0, 0) scale(0.97);
  transition: opacity 0.55s ease, transform 0.75s var(--ease-out);
}
#extensions .ext-sp-sleeve.is-current { opacity: 1; transform: none; }
#extensions .ext-sp-sleeve.is-leaving { opacity: 0; transform: translate3d(-16px, 0, 0) scale(0.97); }
#extensions .ext-sp-sleeve svg { display: block; width: 100%; height: 100%; }

#extensions .ext-sp-eq {
  position: absolute;
  left: 8px;
  bottom: 8px;
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 16px;
  padding: 3px 5px;
  border-radius: 4px;
  background: rgba(10, 12, 11, 0.62);
  opacity: 0;
  transform: translateY(3px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
#extensions .ext-sp-eq i {
  display: block;
  width: 2.5px;
  height: 10px;
  border-radius: 1px;
  background: #1ed760;
  transform-origin: 50% 100%;
  transform: scaleY(0.35);
}
#extensions .ext-art-spotify.is-playing .ext-sp-eq { opacity: 1; transform: none; }
#extensions .ext-art-spotify.is-playing .ext-sp-eq i { animation: ext-sp-eq 0.9s ease-in-out infinite alternate; }
#extensions .ext-art-spotify.is-playing .ext-sp-eq i:nth-child(2) { animation-duration: 0.62s; animation-delay: -0.3s; }
#extensions .ext-art-spotify.is-playing .ext-sp-eq i:nth-child(3) { animation-duration: 0.78s; animation-delay: -0.5s; }
#extensions .ext-art-spotify.is-playing .ext-sp-eq i:nth-child(4) { animation-duration: 0.54s; animation-delay: -0.15s; }

#extensions .ext-sp-controls {
  position: absolute;
  left: 0;
  right: 0;
  top: 276px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
}
#extensions .ext-sp-btn {
  display: grid;
  place-items: center;
  pointer-events: auto;
  cursor: pointer;
  transition: transform 0.25s var(--ease-out), filter 0.25s;
}
#extensions .ext-sp-btn:hover { transform: scale(1.08); filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.35)); }
#extensions .ext-sp-btn.is-press { transform: scale(0.86); transition-duration: 0.12s; }
#extensions .ext-sp-prev svg,
#extensions .ext-sp-next svg { width: 28px; height: 22px; }
#extensions .ext-sp-play svg { width: 42px; height: 42px; }
#extensions .ext-sp-g-play,
#extensions .ext-sp-g-pause {
  transform-box: view-box;
  transform-origin: 21px 21px;
  transition: opacity 0.22s ease, transform 0.3s var(--ease-out);
}
#extensions .ext-sp-g-pause { opacity: 0; transform: scale(0.6); }
#extensions .ext-art-spotify.is-playing .ext-sp-g-play { opacity: 0; transform: scale(0.6); }
#extensions .ext-art-spotify.is-playing .ext-sp-g-pause { opacity: 1; transform: none; }

#extensions .ext-art-spotify.is-live .ext-sp-cover { animation: ext-sp-float 7s ease-in-out infinite; }
#extensions .ext-art-spotify.is-playing .ext-sp-glow { animation: ext-sp-beat 0.52s ease-in-out infinite alternate; }

@keyframes ext-sp-float {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  30% { transform: translate3d(0, -4px, 0) rotate(-0.6deg); }
  70% { transform: translate3d(0, 2px, 0) rotate(0.45deg); }
}
@keyframes ext-sp-beat { from { opacity: 0.8; transform: scale(1); } to { opacity: 1; transform: scale(1.06); } }
@keyframes ext-sp-eq { from { transform: scaleY(0.3); } to { transform: scaleY(1); } }

/* ------------------------------------------------------------ responsive */
@media (max-width: 1024px) {
  #extensions .ext-top { flex-direction: column; align-items: flex-start; gap: var(--s-5); }
  #extensions .ext-tabs-scroll { width: 100%; }
  #extensions .ext-tabs { flex-grow: 0; }
}
@media (max-width: 719px) {
  #extensions { padding: var(--s-12) 0; }
  #extensions .ext-reel { --ext-fr: 48px; --ext-fl: 24px; --ext-gap: 24px; padding-right: var(--ext-pad); }
  #extensions .ext-reel.at-start { --ext-fl: 0px; }
  #extensions .ext-reel.at-end { --ext-fr: 0px; }
}
@media (max-width: 640px) {
  #extensions { --ext-card-w: 300px; }
  #extensions :is(.ext-art-linear, .ext-art-translate, .ext-art-spotify) > .ext-art-stage { --ext-art-scale: 0.8333; }
  #extensions .ext-card-head { gap: var(--s-1-5); margin: var(--s-2) var(--s-2) 0; }
  #extensions .ext-card-desc { margin: var(--s-2) var(--s-2) 0; font-size: 14px; }
  #extensions .ext-card-divider { margin: var(--s-2) var(--s-2) 0; }
  #extensions .ext-pager-btn { padding: var(--s-2); }
  #extensions .ext-bottom { gap: var(--s-1-5); }
}
@media (max-width: 400px) {
  #extensions .ext-browse { font-size: 15px; letter-spacing: 0.1px; }
}

@media (prefers-reduced-motion: reduce) {
  #extensions .ext-reel.is-pre > * { opacity: 1; }
  #extensions .ext-reel.is-entering > * { animation: none; }
  #extensions :is(.ext-art-linear, .ext-art-translate, .ext-art-spotify) *,
  #extensions :is(.ext-art-linear, .ext-art-translate, .ext-art-spotify) *::before {
    animation: none !important;
    transition: none !important;
  }
  #extensions .ext-card,
  #extensions .ext-tabs-pill,
  #extensions .ext-reel { transition: none; }
}