@import url(https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Jost:wght@400;500;600&display=swap);
#Slowed * {
  box-sizing: inherit;
}

#Slowed *::before {
  box-sizing: inherit;
}

#Slowed *::after {
  box-sizing: inherit;
}

#Slowed button, #Slowed input, #Slowed optgroup, #Slowed select, #Slowed textarea {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

#Slowed {
  --black: #1b1f23;
  --white: #ffffff;

  /*
    Gray exists only on the Color skin. Components must use --color-gray-* /
    component tokens — never --gray-* outside this block.
  */
  --gray-50: #fafbfc;
  --gray-100: #f6f8fa;
  --gray-200: #e1e4e8;
  --gray-300: #d1d5da;
  --gray-400: #959da5;
  --gray-500: #6a737d;
  --gray-600: #586069;
  --gray-700: #444d56;
  --gray-800: #2f363d;
  --gray-900: #24292e;

  --color-black: var(--black);
  --color-white: var(--white);
  /* Page backdrop (not elevated surfaces like --color-white). */
  --color-page: var(--white);

  /* Skin-agnostic neutral ramp (Color maps these to gray). */
  --color-gray-50: var(--gray-50);
  --color-gray-100: var(--gray-100);
  --color-gray-200: var(--gray-200);
  --color-gray-300: var(--gray-300);
  --color-gray-400: var(--gray-400);
  --color-gray-500: var(--gray-500);
  --color-gray-600: var(--gray-600);
  --color-gray-700: var(--gray-700);
  --color-gray-800: var(--gray-800);
  --color-gray-900: var(--gray-900);

  /* Locked/disabled chip fill (muted in Color; transparent/elevated elsewhere). */
  --color-locked-surface: var(--color-gray-50);

  /*
    Pink exists only on the Color skin. Components must use --accent-* /
    component tokens — never --pink-* outside this block.
  */
  --pink-50: #fcf5fc;
  --pink-100: #f8ecf9;
  --pink-200: #f1d8f3;
  --pink-300: #ebc5ed;
  --pink-400: #e4b1e7;
  --pink-500: #dd9ee1;
  --pink-600: #b17eb4;
  --pink-700: #855f87;
  --pink-800: #583f5a;
  --pink-900: #2c202d;

  /* Skin-agnostic accent ramp (Color maps these to pink). */
  --accent-soft: var(--pink-100);
  --accent-soft-hover: var(--pink-200);
  --accent-soft-active: var(--pink-300);
  --accent-mid: var(--pink-400);
  --accent: var(--pink-500);
  --accent-hover: var(--pink-600);
  --accent-active: var(--pink-700);
  --accent-ink: var(--pink-800);
  --accent-on: var(--white);
  --accent-glow: rgba(221, 158, 225, 0.45);

  /* Component tokens. */
  --effect-accent: var(--accent);
  --mode-tile-bg: var(--color-white);
  --mode-tile-active-bg: var(--color-white);
  --mode-tile-ink: var(--color-black);
  --mode-tile-active-ink: var(--color-black);
  --mode-tile-selected-bg: var(--accent-soft);
  --mode-tile-selected-bg-hover: var(--accent-soft-hover);
  --mode-tile-selected-ink: #202124;
  --chip-bevel-edge: rgba(255, 255, 255, 0.3);
  --on-accent-ink: #202124;
  --selected-edge: var(--accent);
  --mood-chip-bg: var(--color-white);
  --mood-chip-hover-bg: var(--color-gray-50);
  --mood-chip-ink: var(--color-gray-800);
  --mood-chip-selected-bg: var(--accent-soft);
  --mood-chip-selected-bg-hover: var(--accent-soft-hover);
  --mood-chip-selected-ink: var(--on-accent-ink);
  --mood-generate: var(--accent-hover);
  --mood-generate-hover: var(--accent-active);
  --ambiance-field: #25243a;
  --ambiance-edge: #6b688a;
  --ambiance-edge-focus: #9a96b8;
  --ambiance-fill: rgba(221, 158, 225, 0.18);
  --ambiance-ink: var(--white);
  /* Rainy Day (Color): deep indigo storm + soft pink wash. */
  --rainy-field: #25243a;
  --rainy-edge: #6b688a;
  --rainy-edge-focus: #9a96b8;
  --rainy-fill: rgba(221, 158, 225, 0.18);
  --rainy-ink: var(--white);
  --rain-streak: rgba(255, 255, 255, 0.88);
  /* Coffee Bar (Color): same indigo field, soft pink fill. */
  --coffee-field: #25243a;
  --coffee-edge: #6b688a;
  --coffee-edge-focus: #9a96b8;
  --coffee-fill: rgba(221, 158, 225, 0.18);
  --coffee-ink: var(--white);
  --coffee-steam: rgba(255, 255, 255, 0.9);
  --seashore-foam: rgba(255, 255, 255, 0.82);
  /* Berghain (Color): dark concrete floor, red strobe wash. */
  --berghain-field: #1a1014;
  --berghain-edge: #8a4058;
  --berghain-edge-focus: #e07090;
  --berghain-fill: rgba(221, 80, 110, 0.22);
  --berghain-ink: var(--white);
  --berghain-strobe: rgba(255, 255, 255, 0.42);
  --berghain-dust: rgba(255, 210, 220, 0.55);
  /* Hotel Lounge: lamplit lobby, warm and low. */
  --lounge-field: #241a10;
  --lounge-edge: #7a5a2a;
  --lounge-edge-focus: #e0b070;
  --lounge-fill: color-mix(in srgb, #e0b070 16%, transparent);
  --lounge-ink: #f4dcb4;
  --lounge-lamp: rgba(255, 208, 140, 0.55);
  --lounge-mote: rgba(255, 224, 178, 0.6);
  /* Cocktail Bar: neon behind the glass. */
  --cocktail-field: #180d1e;
  --cocktail-edge: #6a2a72;
  --cocktail-edge-focus: #ff7ad0;
  --cocktail-fill: color-mix(in srgb, #ff7ad0 16%, transparent);
  --cocktail-ink: #ffc4e8;
  --cocktail-neon: rgba(255, 122, 208, 0.35);
  --cocktail-neon-alt: rgba(110, 229, 255, 0.28);
  --cocktail-sheen: rgba(255, 255, 255, 0.16);
  --cocktail-fizz: rgba(255, 235, 250, 0.75);
  --mood-panel-bg-active: var(--color-gray-100);
}

#Slowed.mono-mode {
  /* Chrome macOS grey UI — no Color-skin gray/pink palettes. */
  --gray-50: initial;
  --gray-100: initial;
  --gray-200: initial;
  --gray-300: initial;
  --gray-400: initial;
  --gray-500: initial;
  --gray-600: initial;
  --gray-700: initial;
  --gray-800: initial;
  --gray-900: initial;
  --pink-50: initial;
  --pink-100: initial;
  --pink-200: initial;
  --pink-300: initial;
  --pink-400: initial;
  --pink-500: initial;
  --pink-600: initial;
  --pink-700: initial;
  --pink-800: initial;
  --pink-900: initial;

  --chrome-frame: #202124;
  --chrome-surface: #292a2d;
  --chrome-elevated: #35363a;
  --chrome-border: #3c4043;
  --chrome-muted: #5f6368;
  --chrome-secondary: #9aa0a6;
  --chrome-primary: #e8eaed;

  background-color: var(--chrome-frame);

  --color-black: var(--chrome-primary);
  --color-white: var(--chrome-surface);
  --color-page: var(--chrome-frame);
  --color-locked-surface: transparent;

  --color-gray-50: var(--chrome-elevated);
  --color-gray-100: var(--chrome-border);
  --color-gray-200: var(--chrome-border);
  --color-gray-300: var(--chrome-muted);
  --color-gray-400: #80868b;
  --color-gray-500: var(--chrome-secondary);
  --color-gray-600: #bdc1c6;
  --color-gray-700: #dadce0;
  --color-gray-800: #e8eaed;
  --color-gray-900: #f1f3f4;

  --accent-soft: #e8eaed;
  --accent-soft-hover: #dadce0;
  --accent-soft-active: #9aa0a6;
  --accent-mid: #80868b;
  --accent: #5f6368;
  --accent-hover: #80868b;
  --accent-active: #9aa0a6;
  --accent-ink: #3c4043;
  --accent-on: #f1f3f4;
  --accent-glow: rgba(232, 234, 237, 0.35);

  --effect-accent: var(--accent);
  --mode-tile-bg: transparent;
  --mode-tile-active-bg: transparent;
  --mode-tile-ink: var(--chrome-primary);
  --mode-tile-active-ink: var(--chrome-primary);
  --mode-tile-selected-bg: var(--accent-soft);
  --mode-tile-selected-bg-hover: var(--accent-soft-hover);
  --mode-tile-selected-ink: var(--chrome-frame);
  --chip-bevel-edge: rgba(0, 0, 0, 0.45);
  --on-accent-ink: var(--chrome-frame);
  --selected-edge: var(--chrome-frame);
  --mood-chip-bg: transparent;
  --mood-chip-hover-bg: transparent;
  --mood-chip-ink: var(--chrome-primary);
  --mood-chip-selected-bg: var(--accent-soft);
  --mood-chip-selected-bg-hover: var(--accent-soft-hover);
  --mood-chip-selected-ink: var(--chrome-frame);
  --mood-generate: var(--accent-soft-active);
  --mood-generate-hover: var(--accent-soft-hover);
  --ambiance-field: transparent;
  --ambiance-edge: var(--accent);
  --ambiance-edge-focus: var(--accent-hover);
  --ambiance-fill: var(--accent);
  --ambiance-ink: var(--chrome-primary);
  /* Rainy Day (Mono): same chrome grey as audio/video effect tiles. */
  --rainy-field: transparent;
  --rainy-edge: var(--accent);
  --rainy-edge-focus: var(--accent-hover);
  --rainy-fill: var(--accent);
  --rainy-ink: var(--chrome-primary);
  --rain-streak: rgba(232, 234, 237, 0.78);
  /* Coffee Bar (Mono): same chrome grey as audio/video effect tiles. */
  --coffee-field: transparent;
  --coffee-edge: var(--accent);
  --coffee-edge-focus: var(--accent-hover);
  --coffee-fill: var(--accent);
  --coffee-ink: var(--chrome-primary);
  --coffee-steam: rgba(232, 234, 237, 0.8);
  --seashore-foam: rgba(232, 234, 237, 0.78);
  /* Berghain (Mono): same chrome grey as audio/video effect tiles. */
  --berghain-field: transparent;
  --berghain-edge: var(--accent);
  --berghain-edge-focus: var(--accent-hover);
  --berghain-fill: var(--accent);
  --berghain-ink: var(--chrome-primary);
  --berghain-strobe: rgba(232, 234, 237, 0.35);
  --berghain-dust: rgba(232, 234, 237, 0.55);
  /* Hotel Lounge: lamplit lobby, warm and low. */
  --lounge-field: #241a10;
  --lounge-edge: #7a5a2a;
  --lounge-edge-focus: #e0b070;
  --lounge-fill: color-mix(in srgb, #e0b070 16%, transparent);
  --lounge-ink: #f4dcb4;
  --lounge-lamp: rgba(255, 208, 140, 0.55);
  --lounge-mote: rgba(255, 224, 178, 0.6);
  /* Cocktail Bar: neon behind the glass. */
  --cocktail-field: #180d1e;
  --cocktail-edge: #6a2a72;
  --cocktail-edge-focus: #ff7ad0;
  --cocktail-fill: color-mix(in srgb, #ff7ad0 16%, transparent);
  --cocktail-ink: #ffc4e8;
  --cocktail-neon: rgba(255, 122, 208, 0.35);
  --cocktail-neon-alt: rgba(110, 229, 255, 0.28);
  --cocktail-sheen: rgba(255, 255, 255, 0.16);
  --cocktail-fizz: rgba(255, 235, 250, 0.75);
  --mood-panel-bg-active: var(--chrome-surface);
}

#Slowed.winamp-mode {
  /*
    Classic Winamp 2 base skin colours, sampled from the base skin as
    shipped in Webamp (github.com/captbaritone/webamp, MIT): the chrome is
    indigo (#39395a) rather than grey, edged #181829 with a #717186
    highlight and #afafbc detailing, over black wells and a #03f605 LCD.
    Selection stays pledit.txt's #0000c6. Neutrals via --color-gray-*.
    No Color-skin --gray-* / --pink-*.
  */
  --gray-50: initial;
  --gray-100: initial;
  --gray-200: initial;
  --gray-300: initial;
  --gray-400: initial;
  --gray-500: initial;
  --gray-600: initial;
  --gray-700: initial;
  --gray-800: initial;
  --gray-900: initial;
  --pink-50: initial;
  --pink-100: initial;
  --pink-200: initial;
  --pink-300: initial;
  --pink-400: initial;
  --pink-500: initial;
  --pink-600: initial;
  --pink-700: initial;
  --pink-800: initial;
  --pink-900: initial;

  --winamp-frame: #181829;
  --winamp-surface: #39395a;
  --winamp-elevated: #4a4a70;
  --winamp-border: #717186;
  --winamp-muted: #8a8aa0;
  --winamp-secondary: #afafbc;
  --winamp-select: #0000c6;
  --winamp-select-hover: #1a1ad8;
  --winamp-lcd: #03f605;
  --winamp-lcd-bright: #8dff8d;
  --winamp-lcd-dim: #00a800;
  --winamp-on-lcd: #000000;
  --winamp-lcd-well: #000000;
  --winamp-lcd-well-hover: #0d0d1a;

  background-color: var(--winamp-frame);

  --color-black: var(--winamp-lcd);
  --color-white: var(--winamp-surface);
  --color-page: var(--winamp-frame);
  --color-locked-surface: var(--winamp-elevated);

  --color-gray-50: var(--winamp-elevated);
  --color-gray-100: #2f2f4a;
  --color-gray-200: var(--winamp-border);
  --color-gray-300: var(--winamp-muted);
  --color-gray-400: #9a9ab0;
  --color-gray-500: var(--winamp-secondary);
  --color-gray-600: #c6c6d4;
  --color-gray-700: #dcdce4;
  --color-gray-800: #ececf2;
  --color-gray-900: #f6f6fa;

  --accent-soft: var(--winamp-lcd);
  --accent-soft-hover: var(--winamp-lcd-bright);
  --accent-soft-active: var(--winamp-lcd-bright);
  --accent-mid: #33f033;
  --accent: var(--winamp-lcd);
  --accent-hover: var(--winamp-lcd-dim);
  --accent-active: #007000;
  --accent-ink: #003800;
  --accent-on: var(--winamp-on-lcd);
  --accent-glow: rgba(3, 246, 5, 0.35);

  /*
    Selected chips: playlist-style blue bar + green ink.
    Adjustable wipe fills use dim green over the LCD well.
  */
  --effect-accent: color-mix(in srgb, var(--winamp-lcd) 38%, var(--winamp-lcd-well));
  --mode-tile-bg: var(--winamp-surface);
  --mode-tile-active-bg: var(--winamp-lcd-well);
  --mode-tile-ink: var(--winamp-lcd);
  --mode-tile-active-ink: var(--winamp-lcd);
  --mode-tile-selected-bg: var(--winamp-select);
  --mode-tile-selected-bg-hover: var(--winamp-select-hover);
  --mode-tile-selected-ink: var(--winamp-lcd);
  --chip-bevel-edge: rgba(113, 113, 134, 0.4);
  --on-accent-ink: var(--winamp-lcd);
  --selected-edge: color-mix(in srgb, var(--winamp-lcd) 55%, var(--winamp-select));
  --mood-chip-bg: var(--winamp-surface);
  --mood-chip-hover-bg: var(--winamp-elevated);
  --mood-chip-ink: var(--winamp-lcd);
  --mood-chip-selected-bg: var(--winamp-select);
  --mood-chip-selected-bg-hover: var(--winamp-select-hover);
  --mood-chip-selected-ink: var(--winamp-lcd);
  --mood-generate: var(--winamp-lcd);
  --mood-generate-hover: var(--winamp-lcd-bright);
  --ambiance-field: #14142a;
  --ambiance-edge: var(--winamp-lcd-dim);
  --ambiance-edge-focus: var(--winamp-lcd);
  --ambiance-fill: color-mix(in srgb, var(--winamp-lcd) 22%, transparent);
  --ambiance-ink: var(--winamp-lcd);
  /* Rainy Day (Winamp): blue LCD storm, distinct from green chrome. */
  --rainy-field: #060e1c;
  --rainy-edge: #1f6a9e;
  --rainy-edge-focus: #4aa3e0;
  --rainy-fill: color-mix(in srgb, #4aa3e0 22%, transparent);
  --rainy-ink: #7ec8ff;
  --rain-streak: rgba(120, 200, 255, 0.78);
  /* Coffee Bar (Winamp): indigo dusk with soft snowfall. */
  --coffee-field: #0a0e22;
  --coffee-edge: #3a5a9e;
  --coffee-edge-focus: #6a9ae0;
  --coffee-fill: color-mix(in srgb, #6a9ae0 18%, transparent);
  --coffee-ink: #9ec0ff;
  --coffee-steam: rgba(180, 210, 255, 0.8);
  --seashore-foam: rgba(180, 210, 255, 0.78);
  /* Berghain (Winamp): warehouse red against the LCD well. */
  --berghain-field: #14060a;
  --berghain-edge: #8a2038;
  --berghain-edge-focus: #ff4d6d;
  --berghain-fill: color-mix(in srgb, #ff4d6d 20%, transparent);
  --berghain-ink: #ff8aa0;
  --berghain-strobe: rgba(255, 180, 190, 0.4);
  --berghain-dust: rgba(255, 160, 180, 0.5);
  /* Hotel Lounge: lamplit lobby, warm and low. */
  --lounge-field: #241a10;
  --lounge-edge: #7a5a2a;
  --lounge-edge-focus: #e0b070;
  --lounge-fill: color-mix(in srgb, #e0b070 16%, transparent);
  --lounge-ink: #f4dcb4;
  --lounge-lamp: rgba(255, 208, 140, 0.55);
  --lounge-mote: rgba(255, 224, 178, 0.6);
  /* Cocktail Bar: neon behind the glass. */
  --cocktail-field: #180d1e;
  --cocktail-edge: #6a2a72;
  --cocktail-edge-focus: #ff7ad0;
  --cocktail-fill: color-mix(in srgb, #ff7ad0 16%, transparent);
  --cocktail-ink: #ffc4e8;
  --cocktail-neon: rgba(255, 122, 208, 0.35);
  --cocktail-neon-alt: rgba(110, 229, 255, 0.28);
  --cocktail-sheen: rgba(255, 255, 255, 0.16);
  --cocktail-fizz: rgba(255, 235, 250, 0.75);
  --mood-panel-bg-active: var(--winamp-surface);
}

#Slowed.y2k-mode {
  /*
    Y2K futuring / cybercore: void-black chrome, hot magenta select,
    electric cyan readout. Neutrals via --color-gray-*. No Color-skin
    --gray-* / --pink-*.
  */
  --gray-50: initial;
  --gray-100: initial;
  --gray-200: initial;
  --gray-300: initial;
  --gray-400: initial;
  --gray-500: initial;
  --gray-600: initial;
  --gray-700: initial;
  --gray-800: initial;
  --gray-900: initial;
  --pink-50: initial;
  --pink-100: initial;
  --pink-200: initial;
  --pink-300: initial;
  --pink-400: initial;
  --pink-500: initial;
  --pink-600: initial;
  --pink-700: initial;
  --pink-800: initial;
  --pink-900: initial;

  --y2k-frame: #05010f;
  --y2k-surface: #160a28;
  --y2k-elevated: #2a1450;
  --y2k-border: #5a2a88;
  --y2k-muted: #8a5ab8;
  --y2k-secondary: #c8a0f0;
  --y2k-select: #ff1a9b;
  --y2k-select-hover: #ff4db3;
  --y2k-neon: #00e8ff;
  --y2k-neon-bright: #7dffff;
  --y2k-neon-dim: #00a0b8;
  --y2k-on-neon: #05010f;
  --y2k-well: #020008;
  --y2k-well-hover: #0a0418;

  background-color: var(--y2k-frame);

  --color-black: var(--y2k-neon);
  --color-white: var(--y2k-surface);
  --color-page: var(--y2k-frame);
  --color-locked-surface: var(--y2k-elevated);

  --color-gray-50: var(--y2k-elevated);
  --color-gray-100: #1e0e38;
  --color-gray-200: var(--y2k-border);
  --color-gray-300: var(--y2k-muted);
  --color-gray-400: #a078c8;
  --color-gray-500: var(--y2k-secondary);
  --color-gray-600: #d8c0f8;
  --color-gray-700: #e8d8ff;
  --color-gray-800: #f4ecff;
  --color-gray-900: #faf6ff;

  --accent-soft: var(--y2k-neon);
  --accent-soft-hover: var(--y2k-neon-bright);
  --accent-soft-active: var(--y2k-neon-bright);
  --accent-mid: #33f0ff;
  --accent: var(--y2k-neon);
  --accent-hover: var(--y2k-neon-dim);
  --accent-active: #007888;
  --accent-ink: #003840;
  --accent-on: var(--y2k-on-neon);
  --accent-glow: rgba(0, 232, 255, 0.4);

  /*
    Selected chips: hot magenta bar + cyan ink.
    Adjustable wipe fills use dim cyan over the void well.
  */
  --effect-accent: color-mix(in srgb, var(--y2k-neon) 38%, var(--y2k-well));
  --mode-tile-bg: var(--y2k-surface);
  --mode-tile-active-bg: var(--y2k-well);
  --mode-tile-ink: var(--y2k-neon);
  --mode-tile-active-ink: var(--y2k-neon);
  --mode-tile-selected-bg: var(--y2k-select);
  --mode-tile-selected-bg-hover: var(--y2k-select-hover);
  --mode-tile-selected-ink: var(--y2k-neon-bright);
  --chip-bevel-edge: rgba(255, 26, 155, 0.35);
  --on-accent-ink: var(--y2k-neon);
  --selected-edge: color-mix(in srgb, var(--y2k-neon) 45%, var(--y2k-select));
  --mood-chip-bg: var(--y2k-surface);
  --mood-chip-hover-bg: var(--y2k-elevated);
  --mood-chip-ink: var(--y2k-neon);
  --mood-chip-selected-bg: var(--y2k-select);
  --mood-chip-selected-bg-hover: var(--y2k-select-hover);
  --mood-chip-selected-ink: var(--y2k-neon-bright);
  --mood-generate: var(--y2k-neon);
  --mood-generate-hover: var(--y2k-neon-bright);
  --ambiance-field: #0c0418;
  --ambiance-edge: var(--y2k-neon-dim);
  --ambiance-edge-focus: var(--y2k-neon);
  --ambiance-fill: color-mix(in srgb, var(--y2k-neon) 22%, transparent);
  --ambiance-ink: var(--y2k-neon);
  /* Rainy Day (Y2K): indigo storm with cool cyan readout. */
  --rainy-field: #040a14;
  --rainy-edge: #176a88;
  --rainy-edge-focus: #3de0ff;
  --rainy-fill: color-mix(in srgb, #3de0ff 20%, transparent);
  --rainy-ink: #8af3ff;
  --rain-streak: rgba(100, 235, 255, 0.72);
  /* Coffee Bar (Y2K): violet dusk with soft snowfall. */
  --coffee-field: #0a0618;
  --coffee-edge: #5a4aa0;
  --coffee-edge-focus: #9a7aff;
  --coffee-fill: color-mix(in srgb, #9a7aff 16%, transparent);
  --coffee-ink: #d4c8ff;
  --coffee-steam: rgba(210, 200, 255, 0.78);
  --seashore-foam: rgba(160, 230, 255, 0.78);
  /* Berghain (Y2K): hot magenta floor strobes. */
  --berghain-field: #120414;
  --berghain-edge: #a01868;
  --berghain-edge-focus: #ff1a9b;
  --berghain-fill: color-mix(in srgb, #ff1a9b 20%, transparent);
  --berghain-ink: #ff9ad4;
  --berghain-strobe: rgba(255, 180, 230, 0.42);
  --berghain-dust: rgba(255, 160, 220, 0.5);
  /* Hotel Lounge: lamplit lobby, warm and low. */
  --lounge-field: #241a10;
  --lounge-edge: #7a5a2a;
  --lounge-edge-focus: #e0b070;
  --lounge-fill: color-mix(in srgb, #e0b070 16%, transparent);
  --lounge-ink: #f4dcb4;
  --lounge-lamp: rgba(255, 208, 140, 0.55);
  --lounge-mote: rgba(255, 224, 178, 0.6);
  /* Cocktail Bar: neon behind the glass. */
  --cocktail-field: #180d1e;
  --cocktail-edge: #6a2a72;
  --cocktail-edge-focus: #ff7ad0;
  --cocktail-fill: color-mix(in srgb, #ff7ad0 16%, transparent);
  --cocktail-ink: #ffc4e8;
  --cocktail-neon: rgba(255, 122, 208, 0.35);
  --cocktail-neon-alt: rgba(110, 229, 255, 0.28);
  --cocktail-sheen: rgba(255, 255, 255, 0.16);
  --cocktail-fizz: rgba(255, 235, 250, 0.75);
  --mood-panel-bg-active: var(--y2k-surface);
}

#Slowed.matrix-mode {
  /*
    Matrix: terminal black with phosphor-green readout. Amber is the only
    warm note, reserved for the selected chip so it reads against the green.
    Neutrals via --color-gray-*. No Color-skin --gray-* / --pink-*.
  */
  --gray-50: initial;
  --gray-100: initial;
  --gray-200: initial;
  --gray-300: initial;
  --gray-400: initial;
  --gray-500: initial;
  --gray-600: initial;
  --gray-700: initial;
  --gray-800: initial;
  --gray-900: initial;
  --pink-50: initial;
  --pink-100: initial;
  --pink-200: initial;
  --pink-300: initial;
  --pink-400: initial;
  --pink-500: initial;
  --pink-600: initial;
  --pink-700: initial;
  --pink-800: initial;
  --pink-900: initial;

  --matrix-frame: #000000;
  --matrix-surface: #04140a;
  --matrix-elevated: #0a2414;
  --matrix-border: #12492a;
  --matrix-muted: #1f7a45;
  --matrix-secondary: #4dbd7a;
  --matrix-select: #0d7a34;
  --matrix-select-hover: #14a047;
  --matrix-phosphor: #00ff41;
  --matrix-phosphor-bright: #b4ffc8;
  --matrix-phosphor-dim: #00a82b;
  --matrix-on-phosphor: #000000;
  --matrix-well: #010803;
  --matrix-well-hover: #04140a;

  background-color: var(--matrix-frame);

  --color-black: var(--matrix-phosphor);
  --color-white: var(--matrix-surface);
  --color-page: var(--matrix-frame);
  --color-locked-surface: var(--matrix-elevated);

  --color-gray-50: var(--matrix-elevated);
  --color-gray-100: #072d16;
  --color-gray-200: var(--matrix-border);
  --color-gray-300: var(--matrix-muted);
  --color-gray-400: #2e9459;
  --color-gray-500: var(--matrix-secondary);
  --color-gray-600: #74d69a;
  --color-gray-700: #9ae8b8;
  --color-gray-800: #ccf7db;
  --color-gray-900: #eafff0;

  --accent-soft: var(--matrix-phosphor);
  --accent-soft-hover: var(--matrix-phosphor-bright);
  --accent-soft-active: var(--matrix-phosphor-bright);
  --accent-mid: #33ff6b;
  --accent: var(--matrix-phosphor);
  --accent-hover: var(--matrix-phosphor-dim);
  --accent-active: #007a1f;
  --accent-ink: #003d10;
  --accent-on: var(--matrix-on-phosphor);
  --accent-glow: rgba(0, 255, 65, 0.4);

  /*
    Selected chips: deep-green bar + bright phosphor ink.
    Adjustable wipe fills use dim phosphor over the terminal well.
  */
  --effect-accent: color-mix(
    in srgb,
    var(--matrix-phosphor) 34%,
    var(--matrix-well)
  );
  --mode-tile-bg: var(--matrix-surface);
  --mode-tile-active-bg: var(--matrix-well);
  --mode-tile-ink: var(--matrix-phosphor);
  --mode-tile-active-ink: var(--matrix-phosphor);
  --mode-tile-selected-bg: var(--matrix-select);
  --mode-tile-selected-bg-hover: var(--matrix-select-hover);
  --mode-tile-selected-ink: var(--matrix-phosphor-bright);
  --chip-bevel-edge: rgba(0, 255, 65, 0.3);
  --on-accent-ink: var(--matrix-phosphor);
  --selected-edge: color-mix(
    in srgb,
    var(--matrix-phosphor) 45%,
    var(--matrix-select)
  );
  --mood-chip-bg: var(--matrix-surface);
  --mood-chip-hover-bg: var(--matrix-elevated);
  --mood-chip-ink: var(--matrix-phosphor);
  --mood-chip-selected-bg: var(--matrix-select);
  --mood-chip-selected-bg-hover: var(--matrix-select-hover);
  --mood-chip-selected-ink: var(--matrix-phosphor-bright);
  --mood-generate: var(--matrix-phosphor);
  --mood-generate-hover: var(--matrix-phosphor-bright);
  --ambiance-field: #031007;
  --ambiance-edge: var(--matrix-phosphor-dim);
  --ambiance-edge-focus: var(--matrix-phosphor);
  --ambiance-fill: color-mix(in srgb, var(--matrix-phosphor) 20%, transparent);
  --ambiance-ink: var(--matrix-phosphor);
  /* Rainy Day (Matrix): falling-code rain, cool green. */
  --rainy-field: #020c06;
  --rainy-edge: #10603a;
  --rainy-edge-focus: #3dffa0;
  --rainy-fill: color-mix(in srgb, #3dffa0 20%, transparent);
  --rainy-ink: #8affc0;
  --rain-streak: rgba(80, 255, 150, 0.72);
  /* Coffee Bar (Matrix): warm amber against the terminal. */
  --coffee-field: #100a02;
  --coffee-edge: #7a5a10;
  --coffee-edge-focus: #ffc23d;
  --coffee-fill: color-mix(in srgb, #ffc23d 16%, transparent);
  --coffee-ink: #ffdf9a;
  --coffee-steam: rgba(255, 220, 150, 0.78);
  --seashore-foam: rgba(160, 255, 210, 0.72);
  /* Berghain (Matrix): deep red against the terminal. */
  --berghain-field: #100204;
  --berghain-edge: #7a1020;
  --berghain-edge-focus: #ff3d5a;
  --berghain-fill: color-mix(in srgb, #ff3d5a 18%, transparent);
  --berghain-ink: #ff8a9a;
  --berghain-strobe: rgba(255, 160, 170, 0.38);
  --berghain-dust: rgba(255, 140, 160, 0.48);
  /* Hotel Lounge: lamplit lobby, warm and low. */
  --lounge-field: #241a10;
  --lounge-edge: #7a5a2a;
  --lounge-edge-focus: #e0b070;
  --lounge-fill: color-mix(in srgb, #e0b070 16%, transparent);
  --lounge-ink: #f4dcb4;
  --lounge-lamp: rgba(255, 208, 140, 0.55);
  --lounge-mote: rgba(255, 224, 178, 0.6);
  /* Cocktail Bar: neon behind the glass. */
  --cocktail-field: #180d1e;
  --cocktail-edge: #6a2a72;
  --cocktail-edge-focus: #ff7ad0;
  --cocktail-fill: color-mix(in srgb, #ff7ad0 16%, transparent);
  --cocktail-ink: #ffc4e8;
  --cocktail-neon: rgba(255, 122, 208, 0.35);
  --cocktail-neon-alt: rgba(110, 229, 255, 0.28);
  --cocktail-sheen: rgba(255, 255, 255, 0.16);
  --cocktail-fizz: rgba(255, 235, 250, 0.75);
  --mood-panel-bg-active: var(--matrix-surface);
}

#Slowed.aquarium-mode {
  /*
    Aquarium: deep-tank teal water, glass-cyan readout. Coral is the only
    warm note, reserved for the selected chip so it reads against the aqua.
    Neutrals via --color-gray-*. No Color-skin --gray-* / --pink-*.
  */
  --gray-50: initial;
  --gray-100: initial;
  --gray-200: initial;
  --gray-300: initial;
  --gray-400: initial;
  --gray-500: initial;
  --gray-600: initial;
  --gray-700: initial;
  --gray-800: initial;
  --gray-900: initial;
  --pink-50: initial;
  --pink-100: initial;
  --pink-200: initial;
  --pink-300: initial;
  --pink-400: initial;
  --pink-500: initial;
  --pink-600: initial;
  --pink-700: initial;
  --pink-800: initial;
  --pink-900: initial;

  --aquarium-frame: #02141c;
  --aquarium-surface: #062830;
  --aquarium-elevated: #0a3c48;
  --aquarium-border: #1a6e7a;
  --aquarium-muted: #2a8894;
  --aquarium-secondary: #7ec8d0;
  --aquarium-select: #ff6b3d;
  --aquarium-select-hover: #ff8558;
  --aquarium-aqua: #5ef0e0;
  --aquarium-aqua-bright: #b8fff6;
  --aquarium-aqua-dim: #1ab8a8;
  --aquarium-on-aqua: #02141c;
  --aquarium-well: #011018;
  --aquarium-well-hover: #042028;

  background-color: var(--aquarium-frame);

  --color-black: var(--aquarium-aqua);
  --color-white: var(--aquarium-surface);
  --color-page: var(--aquarium-frame);
  --color-locked-surface: var(--aquarium-elevated);

  --color-gray-50: var(--aquarium-elevated);
  --color-gray-100: #083440;
  --color-gray-200: var(--aquarium-border);
  --color-gray-300: var(--aquarium-muted);
  --color-gray-400: #3aa0ac;
  --color-gray-500: var(--aquarium-secondary);
  --color-gray-600: #9adce4;
  --color-gray-700: #c0eef4;
  --color-gray-800: #dcf6fa;
  --color-gray-900: #f0fcfe;

  --accent-soft: var(--aquarium-aqua);
  --accent-soft-hover: var(--aquarium-aqua-bright);
  --accent-soft-active: var(--aquarium-aqua-bright);
  --accent-mid: #7ff5e8;
  --accent: var(--aquarium-aqua);
  --accent-hover: var(--aquarium-aqua-dim);
  --accent-active: #0e7a70;
  --accent-ink: #064840;
  --accent-on: var(--aquarium-on-aqua);
  --accent-glow: rgba(94, 240, 224, 0.4);

  /*
    Selected chips: coral bar + bright aqua ink.
    Adjustable wipe fills use dim aqua over the tank well.
  */
  --effect-accent: color-mix(
    in srgb,
    var(--aquarium-aqua) 34%,
    var(--aquarium-well)
  );
  --mode-tile-bg: var(--aquarium-surface);
  --mode-tile-active-bg: var(--aquarium-well);
  --mode-tile-ink: var(--aquarium-aqua);
  --mode-tile-active-ink: var(--aquarium-aqua);
  --mode-tile-selected-bg: var(--aquarium-select);
  --mode-tile-selected-bg-hover: var(--aquarium-select-hover);
  --mode-tile-selected-ink: var(--aquarium-aqua-bright);
  --chip-bevel-edge: rgba(94, 240, 224, 0.3);
  --on-accent-ink: var(--aquarium-aqua);
  --selected-edge: color-mix(
    in srgb,
    var(--aquarium-aqua) 45%,
    var(--aquarium-select)
  );
  --mood-chip-bg: var(--aquarium-surface);
  --mood-chip-hover-bg: var(--aquarium-elevated);
  --mood-chip-ink: var(--aquarium-aqua);
  --mood-chip-selected-bg: var(--aquarium-select);
  --mood-chip-selected-bg-hover: var(--aquarium-select-hover);
  --mood-chip-selected-ink: var(--aquarium-aqua-bright);
  --mood-generate: var(--aquarium-aqua);
  --mood-generate-hover: var(--aquarium-aqua-bright);
  --ambiance-field: #031820;
  --ambiance-edge: var(--aquarium-aqua-dim);
  --ambiance-edge-focus: var(--aquarium-aqua);
  --ambiance-fill: color-mix(in srgb, var(--aquarium-aqua) 20%, transparent);
  --ambiance-ink: var(--aquarium-aqua);
  /* Rainy Day (Aquarium): bubble rain through the tank. */
  --rainy-field: #021820;
  --rainy-edge: #146878;
  --rainy-edge-focus: #3de8ff;
  --rainy-fill: color-mix(in srgb, #3de8ff 20%, transparent);
  --rainy-ink: #8af3ff;
  --rain-streak: rgba(140, 240, 255, 0.72);
  /* Coffee Bar (Aquarium): warm sand against the water. */
  --coffee-field: #141006;
  --coffee-edge: #8a6a20;
  --coffee-edge-focus: #ffc85a;
  --coffee-fill: color-mix(in srgb, #ffc85a 16%, transparent);
  --coffee-ink: #ffe4a8;
  --coffee-steam: rgba(255, 230, 170, 0.78);
  --seashore-foam: rgba(180, 255, 245, 0.78);
  /* Berghain (Aquarium): coral strobes in the dark tank. */
  --berghain-field: #14080a;
  --berghain-edge: #a02838;
  --berghain-edge-focus: #ff6b3d;
  --berghain-fill: color-mix(in srgb, #ff6b3d 18%, transparent);
  --berghain-ink: #ffb0a0;
  --berghain-strobe: rgba(255, 180, 160, 0.4);
  --berghain-dust: rgba(255, 170, 150, 0.5);
  /* Hotel Lounge: lamplit lobby, warm and low. */
  --lounge-field: #241a10;
  --lounge-edge: #7a5a2a;
  --lounge-edge-focus: #e0b070;
  --lounge-fill: color-mix(in srgb, #e0b070 16%, transparent);
  --lounge-ink: #f4dcb4;
  --lounge-lamp: rgba(255, 208, 140, 0.55);
  --lounge-mote: rgba(255, 224, 178, 0.6);
  /* Cocktail Bar: neon behind the glass. */
  --cocktail-field: #180d1e;
  --cocktail-edge: #6a2a72;
  --cocktail-edge-focus: #ff7ad0;
  --cocktail-fill: color-mix(in srgb, #ff7ad0 16%, transparent);
  --cocktail-ink: #ffc4e8;
  --cocktail-neon: rgba(255, 122, 208, 0.35);
  --cocktail-neon-alt: rgba(110, 229, 255, 0.28);
  --cocktail-sheen: rgba(255, 255, 255, 0.16);
  --cocktail-fizz: rgba(255, 235, 250, 0.75);
  --mood-panel-bg-active: var(--aquarium-surface);
}

#Slowed.winxp-mode {
  /*
    Windows XP Luna: #ece9d8 3D face, white fields, Luna blue title/selection
    (#0054e3 / #316ac5). Light skin, so it follows the Color mapping.
    Neutrals via --color-gray-*. No Color-skin --gray-* / --pink-*.
  */
  --gray-50: initial;
  --gray-100: initial;
  --gray-200: initial;
  --gray-300: initial;
  --gray-400: initial;
  --gray-500: initial;
  --gray-600: initial;
  --gray-700: initial;
  --gray-800: initial;
  --gray-900: initial;
  --pink-50: initial;
  --pink-100: initial;
  --pink-200: initial;
  --pink-300: initial;
  --pink-400: initial;
  --pink-500: initial;
  --pink-600: initial;
  --pink-700: initial;
  --pink-800: initial;
  --pink-900: initial;

  --winxp-face: #ece9d8;
  --winxp-face-hi: #ffffff;
  --winxp-face-lo: #aca899;
  --winxp-field: #ffffff;
  --winxp-field-edge: #7f9db9;
  --winxp-blue: #0054e3;
  --winxp-blue-hi: #3d95ff;
  --winxp-blue-dim: #003fb0;
  --winxp-select: #316ac5;
  --winxp-select-hover: #4a80d8;
  --winxp-ink: #000000;

  background-color: var(--winxp-face);

  --color-black: var(--winxp-ink);
  --color-white: var(--winxp-field);
  --color-page: var(--winxp-face);
  --color-locked-surface: #d4d0c8;

  --color-gray-50: #f7f6f0;
  --color-gray-100: var(--winxp-face);
  --color-gray-200: #d4d0c8;
  --color-gray-300: #b8b4a8;
  --color-gray-400: var(--winxp-face-lo);
  --color-gray-500: #6b675c;
  --color-gray-600: #4d4a42;
  --color-gray-700: #35322c;
  --color-gray-800: #1f1d19;
  --color-gray-900: var(--winxp-ink);

  --accent-soft: #d6e5fb;
  --accent-soft-hover: #c2d9f8;
  --accent-soft-active: #aecbf3;
  --accent-mid: #6a9fe0;
  --accent: var(--winxp-blue);
  --accent-hover: var(--winxp-blue-dim);
  --accent-active: #002d80;
  --accent-ink: #002357;
  --accent-on: #ffffff;
  --accent-glow: rgba(0, 84, 227, 0.35);

  /* Selected chips: Luna selection bar + white ink. */
  --effect-accent: var(--accent);
  --mode-tile-bg: var(--winxp-field);
  --mode-tile-active-bg: var(--winxp-field);
  --mode-tile-ink: var(--winxp-ink);
  --mode-tile-active-ink: var(--winxp-ink);
  --mode-tile-selected-bg: var(--winxp-select);
  --mode-tile-selected-bg-hover: var(--winxp-select-hover);
  --mode-tile-selected-ink: #ffffff;
  --chip-bevel-edge: rgba(255, 255, 255, 0.85);
  --on-accent-ink: #ffffff;
  --selected-edge: var(--winxp-blue-dim);
  --mood-chip-bg: var(--winxp-field);
  --mood-chip-hover-bg: #f2f6fd;
  --mood-chip-ink: #1f1d19;
  --mood-chip-selected-bg: var(--winxp-select);
  --mood-chip-selected-bg-hover: var(--winxp-select-hover);
  --mood-chip-selected-ink: #ffffff;
  --mood-generate: var(--winxp-blue);
  --mood-generate-hover: var(--winxp-blue-dim);
  --ambiance-field: #10243f;
  --ambiance-edge: var(--winxp-field-edge);
  --ambiance-edge-focus: var(--winxp-blue-hi);
  --ambiance-fill: color-mix(in srgb, var(--winxp-blue-hi) 20%, transparent);
  --ambiance-ink: #dbe9ff;
  /* Rainy Day (XP): Bliss-sky storm. */
  --rainy-field: #0d1d33;
  --rainy-edge: #2a5c96;
  --rainy-edge-focus: #6aa9ee;
  --rainy-fill: color-mix(in srgb, #6aa9ee 20%, transparent);
  --rainy-ink: #cfe4ff;
  --rain-streak: rgba(200, 226, 255, 0.8);
  /* Coffee Bar (XP): warm taskbar amber. */
  --coffee-field: #241a08;
  --coffee-edge: #8a6a20;
  --coffee-edge-focus: #ffc85a;
  --coffee-fill: color-mix(in srgb, #ffc85a 16%, transparent);
  --coffee-ink: #ffe4a8;
  --coffee-steam: rgba(255, 255, 255, 0.9);
  --seashore-foam: rgba(220, 240, 255, 0.85);
  /* Berghain (XP): dark room, red wash. */
  --berghain-field: #1a0a10;
  --berghain-edge: #8a2038;
  --berghain-edge-focus: #ff4d6d;
  --berghain-fill: color-mix(in srgb, #ff4d6d 18%, transparent);
  --berghain-ink: #ffb0c0;
  --berghain-strobe: rgba(255, 200, 210, 0.42);
  --berghain-dust: rgba(255, 180, 200, 0.5);
  /* Hotel Lounge: lamplit lobby, warm and low. */
  --lounge-field: #241a10;
  --lounge-edge: #7a5a2a;
  --lounge-edge-focus: #e0b070;
  --lounge-fill: color-mix(in srgb, #e0b070 16%, transparent);
  --lounge-ink: #f4dcb4;
  --lounge-lamp: rgba(255, 208, 140, 0.55);
  --lounge-mote: rgba(255, 224, 178, 0.6);
  /* Cocktail Bar: neon behind the glass. */
  --cocktail-field: #180d1e;
  --cocktail-edge: #6a2a72;
  --cocktail-edge-focus: #ff7ad0;
  --cocktail-fill: color-mix(in srgb, #ff7ad0 16%, transparent);
  --cocktail-ink: #ffc4e8;
  --cocktail-neon: rgba(255, 122, 208, 0.35);
  --cocktail-neon-alt: rgba(110, 229, 255, 0.28);
  --cocktail-sheen: rgba(255, 255, 255, 0.16);
  --cocktail-fizz: rgba(255, 235, 250, 0.75);
  --mood-panel-bg-active: var(--winxp-face);
}

#Slowed.neoy2k-mode {
  /*
    Neo-Y2K: the revival, not the original — frosted chrome and liquid
    metal, cool silver page, glossy violet accent, bubblegum selection.
    Light skin (the dark cybercore look stays on the Y2K skin).
    Neutrals via --color-gray-*. No Color-skin --gray-* / --pink-*.
  */
  --gray-50: initial;
  --gray-100: initial;
  --gray-200: initial;
  --gray-300: initial;
  --gray-400: initial;
  --gray-500: initial;
  --gray-600: initial;
  --gray-700: initial;
  --gray-800: initial;
  --gray-900: initial;
  --pink-50: initial;
  --pink-100: initial;
  --pink-200: initial;
  --pink-300: initial;
  --pink-400: initial;
  --pink-500: initial;
  --pink-600: initial;
  --pink-700: initial;
  --pink-800: initial;
  --pink-900: initial;

  --neoy2k-chrome: #e8ecf5;
  --neoy2k-surface: #ffffff;
  --neoy2k-frost: #f2f0ff;
  --neoy2k-edge: #dfe3ef;
  --neoy2k-ink: #1b1b2e;
  --neoy2k-violet: #6c4cff;
  --neoy2k-violet-dim: #5638e0;
  --neoy2k-lilac: #b8a6ff;
  --neoy2k-bubble: #ff5cc8;
  --neoy2k-bubble-hover: #ff7bd4;
  --neoy2k-aqua: #6ce5ff;

  background-color: var(--neoy2k-chrome);

  --color-black: var(--neoy2k-ink);
  --color-white: var(--neoy2k-surface);
  --color-page: var(--neoy2k-chrome);
  --color-locked-surface: #e4e7f2;

  --color-gray-50: #f7f8fc;
  --color-gray-100: #eef0f8;
  --color-gray-200: var(--neoy2k-edge);
  --color-gray-300: #c8cede;
  --color-gray-400: #a3abc4;
  --color-gray-500: #6f7691;
  --color-gray-600: #545a75;
  --color-gray-700: #3c4159;
  --color-gray-800: #2a2e40;
  --color-gray-900: var(--neoy2k-ink);

  --accent-soft: #ece6ff;
  --accent-soft-hover: #ddd2ff;
  --accent-soft-active: #cdbeff;
  --accent-mid: #9d84ff;
  --accent: var(--neoy2k-violet);
  --accent-hover: var(--neoy2k-violet-dim);
  --accent-active: #3f27b3;
  --accent-ink: #241570;
  --accent-on: #ffffff;
  --accent-glow: rgba(108, 76, 255, 0.4);

  /* Selected chips: bubblegum bar + white ink over frosted panels. */
  --effect-accent: var(--accent);
  --mode-tile-bg: var(--neoy2k-surface);
  --mode-tile-active-bg: var(--neoy2k-frost);
  --mode-tile-ink: var(--neoy2k-ink);
  --mode-tile-active-ink: var(--neoy2k-ink);
  --mode-tile-selected-bg: var(--neoy2k-bubble);
  --mode-tile-selected-bg-hover: var(--neoy2k-bubble-hover);
  --mode-tile-selected-ink: #ffffff;
  --chip-bevel-edge: rgba(255, 255, 255, 0.9);
  --on-accent-ink: #ffffff;
  --selected-edge: var(--neoy2k-violet);
  --mood-chip-bg: var(--neoy2k-surface);
  --mood-chip-hover-bg: var(--neoy2k-frost);
  --mood-chip-ink: #3c4159;
  --mood-chip-selected-bg: var(--neoy2k-bubble);
  --mood-chip-selected-bg-hover: var(--neoy2k-bubble-hover);
  --mood-chip-selected-ink: #ffffff;
  --mood-generate: var(--neoy2k-violet);
  --mood-generate-hover: var(--neoy2k-violet-dim);
  --ambiance-field: #1b1836;
  --ambiance-edge: #6b5ea8;
  --ambiance-edge-focus: var(--neoy2k-lilac);
  --ambiance-fill: color-mix(in srgb, var(--neoy2k-lilac) 20%, transparent);
  --ambiance-ink: #ece6ff;
  /* Rainy Day (Neo-Y2K): chrome-blue drizzle. */
  --rainy-field: #131a30;
  --rainy-edge: #2f4a86;
  --rainy-edge-focus: var(--neoy2k-aqua);
  --rainy-fill: color-mix(in srgb, var(--neoy2k-aqua) 20%, transparent);
  --rainy-ink: #c2f2ff;
  --rain-streak: rgba(160, 235, 255, 0.78);
  /* Coffee Bar (Neo-Y2K): warm gloss. */
  --coffee-field: #241a12;
  --coffee-edge: #8a6030;
  --coffee-edge-focus: #ffc07a;
  --coffee-fill: color-mix(in srgb, #ffc07a 16%, transparent);
  --coffee-ink: #ffdfbe;
  --coffee-steam: rgba(255, 255, 255, 0.92);
  --seashore-foam: rgba(200, 245, 255, 0.85);
  /* Berghain (Neo-Y2K): bubblegum strobe in the dark. */
  --berghain-field: #1d0a1a;
  --berghain-edge: #8a2068;
  --berghain-edge-focus: var(--neoy2k-bubble);
  --berghain-fill: color-mix(in srgb, var(--neoy2k-bubble) 18%, transparent);
  --berghain-ink: #ffb8e4;
  --berghain-strobe: rgba(255, 200, 235, 0.42);
  --berghain-dust: rgba(255, 180, 225, 0.5);
  /* Hotel Lounge: lamplit lobby, warm and low. */
  --lounge-field: #241a10;
  --lounge-edge: #7a5a2a;
  --lounge-edge-focus: #e0b070;
  --lounge-fill: color-mix(in srgb, #e0b070 16%, transparent);
  --lounge-ink: #f4dcb4;
  --lounge-lamp: rgba(255, 208, 140, 0.55);
  --lounge-mote: rgba(255, 224, 178, 0.6);
  /* Cocktail Bar: neon behind the glass. */
  --cocktail-field: #180d1e;
  --cocktail-edge: #6a2a72;
  --cocktail-edge-focus: #ff7ad0;
  --cocktail-fill: color-mix(in srgb, #ff7ad0 16%, transparent);
  --cocktail-ink: #ffc4e8;
  --cocktail-neon: rgba(255, 122, 208, 0.35);
  --cocktail-neon-alt: rgba(110, 229, 255, 0.28);
  --cocktail-sheen: rgba(255, 255, 255, 0.16);
  --cocktail-fizz: rgba(255, 235, 250, 0.75);
  --mood-panel-bg-active: #eef0f8;
}

#Slowed.dracula-mode {
  /*
    Dracula: the count rather than the code theme — crypt-dark browns
    lit by blood red, with bone white for text. Neutrals via
    --color-gray-*. No Color-skin --gray-* / --pink-*.
  */
  --gray-50: initial;
  --gray-100: initial;
  --gray-200: initial;
  --gray-300: initial;
  --gray-400: initial;
  --gray-500: initial;
  --gray-600: initial;
  --gray-700: initial;
  --gray-800: initial;
  --gray-900: initial;
  --pink-50: initial;
  --pink-100: initial;
  --pink-200: initial;
  --pink-300: initial;
  --pink-400: initial;
  --pink-500: initial;
  --pink-600: initial;
  --pink-700: initial;
  --pink-800: initial;
  --pink-900: initial;

  --dracula-frame: #120709;
  --dracula-surface: #1d0d10;
  --dracula-elevated: #301419;
  --dracula-border: #4c1c23;
  --dracula-comment: #7a333c;
  --dracula-secondary: #bb858c;
  --dracula-fg: #f3e6e7;
  --dracula-blood: #c1121f;
  --dracula-blood-bright: #ff5058;
  --dracula-blood-dim: #8b0d16;
  --dracula-crimson: #e01e2b;
  --dracula-crimson-hover: #ff3a46;
  --dracula-candle: #e8b96a;
  --dracula-well: #0a0405;
  --dracula-well-hover: #170a0c;

  background-color: var(--dracula-frame);

  --color-black: var(--dracula-fg);
  --color-white: var(--dracula-surface);
  --color-page: var(--dracula-frame);
  --color-locked-surface: var(--dracula-elevated);

  --color-gray-50: var(--dracula-elevated);
  --color-gray-100: #261013;
  --color-gray-200: var(--dracula-border);
  --color-gray-300: var(--dracula-comment);
  --color-gray-400: #9c545c;
  --color-gray-500: var(--dracula-secondary);
  --color-gray-600: #d6aeb3;
  --color-gray-700: #e6ccd0;
  --color-gray-800: #efdcde;
  --color-gray-900: var(--dracula-fg);

  --accent-soft: var(--dracula-crimson);
  --accent-soft-hover: var(--dracula-crimson-hover);
  --accent-soft-active: var(--dracula-crimson-hover);
  --accent-mid: #ff6b73;
  --accent: var(--dracula-blood);
  --accent-hover: var(--dracula-blood-dim);
  --accent-active: #6b060e;
  --accent-ink: #3d0409;
  --accent-on: var(--dracula-fg);
  --accent-glow: rgba(193, 18, 31, 0.45);

  /*
    Selected chips: blood bar + bone ink.
    Adjustable wipe fills use dim blood over the crypt well.
  */
  --effect-accent: color-mix(
    in srgb,
    var(--dracula-blood) 40%,
    var(--dracula-well)
  );
  --mode-tile-bg: var(--dracula-surface);
  --mode-tile-active-bg: var(--dracula-well);
  --mode-tile-ink: var(--dracula-fg);
  --mode-tile-active-ink: var(--dracula-fg);
  --mode-tile-selected-bg: var(--dracula-blood);
  --mode-tile-selected-bg-hover: var(--dracula-crimson);
  --mode-tile-selected-ink: var(--dracula-fg);
  --chip-bevel-edge: rgba(243, 230, 231, 0.16);
  --on-accent-ink: var(--dracula-fg);
  --selected-edge: color-mix(
    in srgb,
    var(--dracula-crimson) 55%,
    var(--dracula-blood)
  );
  --mood-chip-bg: var(--dracula-surface);
  --mood-chip-hover-bg: var(--dracula-elevated);
  --mood-chip-ink: var(--dracula-fg);
  --mood-chip-selected-bg: var(--dracula-blood);
  --mood-chip-selected-bg-hover: var(--dracula-crimson);
  --mood-chip-selected-ink: var(--dracula-fg);
  --mood-generate: var(--dracula-blood);
  --mood-generate-hover: var(--dracula-crimson);
  --ambiance-field: #1a0b0d;
  --ambiance-edge: var(--dracula-comment);
  --ambiance-edge-focus: var(--dracula-crimson);
  --ambiance-fill: color-mix(in srgb, var(--dracula-blood) 24%, transparent);
  --ambiance-ink: var(--dracula-fg);
  /* Rainy Day (Dracula): storm over the castle. */
  --rainy-field: #131318;
  --rainy-edge: #3d3d52;
  --rainy-edge-focus: #8f9fc4;
  --rainy-fill: color-mix(in srgb, #8f9fc4 18%, transparent);
  --rainy-ink: #cdd6ea;
  --rain-streak: rgba(205, 214, 234, 0.7);
  /* Coffee Bar (Dracula): candlelight. */
  --coffee-field: #241609;
  --coffee-edge: #8a5c20;
  --coffee-edge-focus: var(--dracula-candle);
  --coffee-fill: color-mix(in srgb, var(--dracula-candle) 18%, transparent);
  --coffee-ink: #f2d6a0;
  --coffee-steam: rgba(242, 214, 160, 0.75);
  --seashore-foam: rgba(214, 174, 179, 0.7);
  /* Berghain (Dracula): blood strobe. */
  --berghain-field: #1c0709;
  --berghain-edge: #8b0d16;
  --berghain-edge-focus: var(--dracula-crimson-hover);
  --berghain-fill: color-mix(in srgb, var(--dracula-crimson) 22%, transparent);
  --berghain-ink: #ffa8ad;
  --berghain-strobe: rgba(255, 180, 200, 0.4);
  --berghain-dust: rgba(255, 160, 190, 0.5);
  /* Hotel Lounge: lamplit lobby, warm and low. */
  --lounge-field: #241a10;
  --lounge-edge: #7a5a2a;
  --lounge-edge-focus: #e0b070;
  --lounge-fill: color-mix(in srgb, #e0b070 16%, transparent);
  --lounge-ink: #f4dcb4;
  --lounge-lamp: rgba(255, 208, 140, 0.55);
  --lounge-mote: rgba(255, 224, 178, 0.6);
  /* Cocktail Bar: neon behind the glass. */
  --cocktail-field: #180d1e;
  --cocktail-edge: #6a2a72;
  --cocktail-edge-focus: #ff7ad0;
  --cocktail-fill: color-mix(in srgb, #ff7ad0 16%, transparent);
  --cocktail-ink: #ffc4e8;
  --cocktail-neon: rgba(255, 122, 208, 0.35);
  --cocktail-neon-alt: rgba(110, 229, 255, 0.28);
  --cocktail-sheen: rgba(255, 255, 255, 0.16);
  --cocktail-fizz: rgba(255, 235, 250, 0.75);
  --mood-panel-bg-active: var(--dracula-surface);
}

#Slowed.alien-mode {
  /*
    Alien: after the "Alien X Ated" Winamp skin — mottled dark-green
    chrome rather than black, lit throughout by a saturated lime readout,
    with near-white green for the brightest edges. Greener and glossier
    than the Matrix terminal, which stays pure phosphor on black.
    Neutrals via --color-gray-*. No Color-skin --gray-* / --pink-*.
  */
  --gray-50: initial;
  --gray-100: initial;
  --gray-200: initial;
  --gray-300: initial;
  --gray-400: initial;
  --gray-500: initial;
  --gray-600: initial;
  --gray-700: initial;
  --gray-800: initial;
  --gray-900: initial;
  --pink-50: initial;
  --pink-100: initial;
  --pink-200: initial;
  --pink-300: initial;
  --pink-400: initial;
  --pink-500: initial;
  --pink-600: initial;
  --pink-700: initial;
  --pink-800: initial;
  --pink-900: initial;

  --alien-hull: #030d03;
  --alien-panel: #0b1f0b;
  --alien-elevated: #143414;
  --alien-border: #2c6e2c;
  --alien-muted: #3f8f3f;
  --alien-secondary: #8fd48f;
  --alien-select: #1f7a1f;
  --alien-select-hover: #2a9c2a;
  --alien-bio: #7cff1a;
  --alien-bio-bright: #ccffb0;
  --alien-bio-dim: #4aa80c;
  --alien-on-bio: #030d03;
  --alien-well: #010601;
  --alien-well-hover: #0a1a0a;

  background-color: var(--alien-hull);

  --color-black: var(--alien-bio);
  --color-white: var(--alien-panel);
  --color-page: var(--alien-hull);
  --color-locked-surface: var(--alien-elevated);

  --color-gray-50: var(--alien-elevated);
  --color-gray-100: #102a10;
  --color-gray-200: var(--alien-border);
  --color-gray-300: var(--alien-muted);
  --color-gray-400: #5cb45c;
  --color-gray-500: var(--alien-secondary);
  --color-gray-600: #b6e8b6;
  --color-gray-700: #d2f4d2;
  --color-gray-800: #e8fae8;
  --color-gray-900: #f4fff4;

  --accent-soft: var(--alien-bio);
  --accent-soft-hover: var(--alien-bio-bright);
  --accent-soft-active: var(--alien-bio-bright);
  --accent-mid: #a6ff5c;
  --accent: var(--alien-bio);
  --accent-hover: var(--alien-bio-dim);
  --accent-active: #2f6b08;
  --accent-ink: #17330a;
  --accent-on: var(--alien-on-bio);
  --accent-glow: rgba(124, 255, 26, 0.45);

  /*
    Selected chips: deep-green bar + near-white bio ink.
    Adjustable wipe fills use dim lime over the hull well.
  */
  --effect-accent: color-mix(
    in srgb,
    var(--alien-bio) 34%,
    var(--alien-well)
  );
  --mode-tile-bg: var(--alien-panel);
  --mode-tile-active-bg: var(--alien-well);
  --mode-tile-ink: var(--alien-bio);
  --mode-tile-active-ink: var(--alien-bio);
  --mode-tile-selected-bg: var(--alien-select);
  --mode-tile-selected-bg-hover: var(--alien-select-hover);
  --mode-tile-selected-ink: var(--alien-bio-bright);
  --chip-bevel-edge: rgba(124, 255, 26, 0.3);
  --on-accent-ink: var(--alien-bio);
  --selected-edge: color-mix(
    in srgb,
    var(--alien-bio) 45%,
    var(--alien-select)
  );
  --mood-chip-bg: var(--alien-panel);
  --mood-chip-hover-bg: var(--alien-elevated);
  --mood-chip-ink: var(--alien-bio);
  --mood-chip-selected-bg: var(--alien-select);
  --mood-chip-selected-bg-hover: var(--alien-select-hover);
  --mood-chip-selected-ink: var(--alien-bio-bright);
  --mood-generate: var(--alien-bio);
  --mood-generate-hover: var(--alien-bio-bright);
  --ambiance-field: #061806;
  --ambiance-edge: var(--alien-bio-dim);
  --ambiance-edge-focus: var(--alien-bio);
  --ambiance-fill: color-mix(in srgb, var(--alien-bio) 20%, transparent);
  --ambiance-ink: var(--alien-bio);
  /* Rainy Day (Alien): cold hull condensation. */
  --rainy-field: #060d12;
  --rainy-edge: #14506a;
  --rainy-edge-focus: #3dc8ff;
  --rainy-fill: color-mix(in srgb, #3dc8ff 20%, transparent);
  --rainy-ink: #9fe4ff;
  --rain-streak: rgba(140, 220, 255, 0.7);
  /* Coffee Bar (Alien): mess-hall amber. */
  --coffee-field: #140f06;
  --coffee-edge: #7a5a18;
  --coffee-edge-focus: #ffb43d;
  --coffee-fill: color-mix(in srgb, #ffb43d 16%, transparent);
  --coffee-ink: #ffd9a0;
  --coffee-steam: rgba(230, 245, 220, 0.78);
  --seashore-foam: rgba(190, 240, 220, 0.72);
  /* Berghain (Alien): self-destruct red. */
  --berghain-field: #140404;
  --berghain-edge: #8a1810;
  --berghain-edge-focus: #ff3b1f;
  --berghain-fill: color-mix(in srgb, #ff3b1f 18%, transparent);
  --berghain-ink: #ffa48a;
  --berghain-strobe: rgba(255, 160, 130, 0.4);
  --berghain-dust: rgba(255, 150, 120, 0.5);
  /* Hotel Lounge: lamplit lobby, warm and low. */
  --lounge-field: #241a10;
  --lounge-edge: #7a5a2a;
  --lounge-edge-focus: #e0b070;
  --lounge-fill: color-mix(in srgb, #e0b070 16%, transparent);
  --lounge-ink: #f4dcb4;
  --lounge-lamp: rgba(255, 208, 140, 0.55);
  --lounge-mote: rgba(255, 224, 178, 0.6);
  /* Cocktail Bar: neon behind the glass. */
  --cocktail-field: #180d1e;
  --cocktail-edge: #6a2a72;
  --cocktail-edge-focus: #ff7ad0;
  --cocktail-fill: color-mix(in srgb, #ff7ad0 16%, transparent);
  --cocktail-ink: #ffc4e8;
  --cocktail-neon: rgba(255, 122, 208, 0.35);
  --cocktail-neon-alt: rgba(110, 229, 255, 0.28);
  --cocktail-sheen: rgba(255, 255, 255, 0.16);
  --cocktail-fizz: rgba(255, 235, 250, 0.75);
  --mood-panel-bg-active: var(--alien-panel);
}

#Slowed.macos-mode {
  /*
    Mac OS 8 Platinum, from classic-ui-kit: window content #dddddd,
    titlebar #cccccc with #ffffff/#777777 stripes, 1px black frames,
    white bevel highlights, periwinkle scroller #9a99ff as the accent, and
    the #63639c default desktop behind the window. Light skin.
    Neutrals via --color-gray-*. No Color-skin --gray-* / --pink-*.
  */
  --gray-50: initial;
  --gray-100: initial;
  --gray-200: initial;
  --gray-300: initial;
  --gray-400: initial;
  --gray-500: initial;
  --gray-600: initial;
  --gray-700: initial;
  --gray-800: initial;
  --gray-900: initial;
  --pink-50: initial;
  --pink-100: initial;
  --pink-200: initial;
  --pink-300: initial;
  --pink-400: initial;
  --pink-500: initial;
  --pink-600: initial;
  --pink-700: initial;
  --pink-800: initial;
  --pink-900: initial;

  --macos-face: #dddddd;
  --macos-face-dim: #cccccc;
  --macos-face-hi: #ffffff;
  --macos-edge: #888888;
  --macos-edge-dark: #555555;
  --macos-frame: #000000;
  --macos-ink: #000000;
  --macos-stripe: #777777;
  --macos-accent: #9a99ff;
  --macos-accent-hi: #ccccff;
  --macos-accent-lo: #6766cc;
  --macos-desktop: #63639c;

  background-color: var(--macos-face);

  --color-black: var(--macos-ink);
  /* Platinum windows are grey, not white: pure #ffffff is the bevel
     highlight only, never a surface. */
  --color-white: var(--macos-face);
  --color-page: var(--macos-face);
  --color-locked-surface: var(--macos-face-dim);

  --color-gray-50: #f0f0f0;
  --color-gray-100: #eeeeee;
  --color-gray-200: var(--macos-face-dim);
  --color-gray-300: #aaaaaa;
  --color-gray-400: #999999;
  --color-gray-500: var(--macos-stripe);
  --color-gray-600: var(--macos-edge-dark);
  --color-gray-700: #333333;
  --color-gray-800: #1a1a1a;
  --color-gray-900: var(--macos-ink);

  --accent-soft: var(--macos-accent-hi);
  --accent-soft-hover: #b8b8ff;
  --accent-soft-active: var(--macos-accent);
  --accent-mid: #8b8ae6;
  --accent: var(--macos-accent-lo);
  --accent-hover: #52519f;
  --accent-active: #3d3c78;
  --accent-ink: #26254d;
  --accent-on: #ffffff;
  --accent-glow: rgba(154, 153, 255, 0.45);

  /* Selected chips: the periwinkle scroller fill + black ink. */
  --effect-accent: var(--macos-accent);
  --mode-tile-bg: var(--macos-face);
  --mode-tile-active-bg: var(--macos-face-dim);
  --mode-tile-ink: var(--macos-ink);
  --mode-tile-active-ink: var(--macos-ink);
  --mode-tile-selected-bg: var(--macos-accent);
  --mode-tile-selected-bg-hover: #b8b8ff;
  --mode-tile-selected-ink: var(--macos-ink);
  --chip-bevel-edge: var(--macos-face-hi);
  --on-accent-ink: var(--macos-ink);
  --selected-edge: var(--macos-accent-lo);
  --mood-chip-bg: var(--macos-face);
  --mood-chip-hover-bg: #eeeeee;
  --mood-chip-ink: var(--macos-ink);
  --mood-chip-selected-bg: var(--macos-accent);
  --mood-chip-selected-bg-hover: #b8b8ff;
  --mood-chip-selected-ink: var(--macos-ink);
  --mood-generate: var(--macos-accent-lo);
  --mood-generate-hover: #52519f;
  --ambiance-field: #2b2b4a;
  --ambiance-edge: var(--macos-accent-lo);
  --ambiance-edge-focus: var(--macos-accent);
  --ambiance-fill: color-mix(in srgb, var(--macos-accent) 22%, transparent);
  --ambiance-ink: var(--macos-accent-hi);
  /* Rainy Day (Platinum): the default desktop, rained on. */
  --rainy-field: #2a2a44;
  --rainy-edge: #4c4c86;
  --rainy-edge-focus: #9a99ff;
  --rainy-fill: color-mix(in srgb, #9a99ff 20%, transparent);
  --rainy-ink: #d6d6ff;
  --rain-streak: rgba(220, 220, 255, 0.82);
  /* Coffee Bar (Platinum): warm manila. */
  --coffee-field: #2a2114;
  --coffee-edge: #7a5f30;
  --coffee-edge-focus: #e0b070;
  --coffee-fill: color-mix(in srgb, #e0b070 18%, transparent);
  --coffee-ink: #f0d8b0;
  --coffee-steam: rgba(255, 255, 255, 0.9);
  --seashore-foam: rgba(230, 230, 255, 0.85);
  /* Berghain (Platinum): dark room, red pixel wash. */
  --berghain-field: #1e0d12;
  --berghain-edge: #8a3048;
  --berghain-edge-focus: #ff5c78;
  --berghain-fill: color-mix(in srgb, #ff5c78 18%, transparent);
  --berghain-ink: #ffb8c4;
  --berghain-strobe: rgba(255, 210, 220, 0.42);
  --berghain-dust: rgba(255, 190, 205, 0.5);
  /* Hotel Lounge: lamplit lobby, warm and low. */
  --lounge-field: #241a10;
  --lounge-edge: #7a5a2a;
  --lounge-edge-focus: #e0b070;
  --lounge-fill: color-mix(in srgb, #e0b070 16%, transparent);
  --lounge-ink: #f4dcb4;
  --lounge-lamp: rgba(255, 208, 140, 0.55);
  --lounge-mote: rgba(255, 224, 178, 0.6);
  /* Cocktail Bar: neon behind the glass. */
  --cocktail-field: #180d1e;
  --cocktail-edge: #6a2a72;
  --cocktail-edge-focus: #ff7ad0;
  --cocktail-fill: color-mix(in srgb, #ff7ad0 16%, transparent);
  --cocktail-ink: #ffc4e8;
  --cocktail-neon: rgba(255, 122, 208, 0.35);
  --cocktail-neon-alt: rgba(110, 229, 255, 0.28);
  --cocktail-sheen: rgba(255, 255, 255, 0.16);
  --cocktail-fizz: rgba(255, 235, 250, 0.75);
  --mood-panel-bg-active: #eeeeee;
}

/* colors.css is outside postcss-prefixwrap, so skin selectors need #Slowed. */

/* Rainy Day tiles: per-skin storm palette (overrides shared ambiance). */
#Slowed .mode-tile--ambiance-rainy.mode-tile--active,
#Slowed .mode-tile--ambiance-rainy.mode-tile--active:hover,
#Slowed .mode-tile--ambiance-rainy.mode-tile--dragging {
  --ambiance-field: var(--rainy-field);
  --ambiance-edge: var(--rainy-edge);
  --ambiance-edge-focus: var(--rainy-edge-focus);
  --ambiance-fill: var(--rainy-fill);
  --ambiance-ink: var(--rainy-ink);
}

/* Coffee Bar tiles: per-skin blue-hour palette. */
#Slowed .mode-tile--ambiance-coffee.mode-tile--active,
#Slowed .mode-tile--ambiance-coffee.mode-tile--active:hover,
#Slowed .mode-tile--ambiance-coffee.mode-tile--dragging {
  --ambiance-field: var(--coffee-field);
  --ambiance-edge: var(--coffee-edge);
  --ambiance-edge-focus: var(--coffee-edge-focus);
  --ambiance-fill: var(--coffee-fill);
  --ambiance-ink: var(--coffee-ink);
}

/* Hotel Lounge tiles: per-skin lamplit palette. */
#Slowed .mode-tile--ambiance-lounge.mode-tile--active,
#Slowed .mode-tile--ambiance-lounge.mode-tile--active:hover,
#Slowed .mode-tile--ambiance-lounge.mode-tile--dragging {
  --ambiance-field: var(--lounge-field);
  --ambiance-edge: var(--lounge-edge);
  --ambiance-edge-focus: var(--lounge-edge-focus);
  --ambiance-fill: var(--lounge-fill);
  --ambiance-ink: var(--lounge-ink);
}

/* Cocktail Bar tiles: per-skin neon palette. */
#Slowed .mode-tile--ambiance-cocktail.mode-tile--active,
#Slowed .mode-tile--ambiance-cocktail.mode-tile--active:hover,
#Slowed .mode-tile--ambiance-cocktail.mode-tile--dragging {
  --ambiance-field: var(--cocktail-field);
  --ambiance-edge: var(--cocktail-edge);
  --ambiance-edge-focus: var(--cocktail-edge-focus);
  --ambiance-fill: var(--cocktail-fill);
  --ambiance-ink: var(--cocktail-ink);
}

/* Berghain tiles: per-skin warehouse palette. */
#Slowed .mode-tile--ambiance-berghain.mode-tile--active,
#Slowed .mode-tile--ambiance-berghain.mode-tile--active:hover,
#Slowed .mode-tile--ambiance-berghain.mode-tile--dragging {
  --ambiance-field: var(--berghain-field);
  --ambiance-edge: var(--berghain-edge);
  --ambiance-edge-focus: var(--berghain-edge-focus);
  --ambiance-fill: var(--berghain-fill);
  --ambiance-ink: var(--berghain-ink);
}

#Slowed .mood-panel-scrim {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  z-index: 0;
  pointer-events: none;
  background-color: var(--mood-panel-bg-active);
  opacity: 0;
  visibility: hidden;
}

#Slowed > .popup,
#Slowed > .debug-bar {
  position: relative;
  z-index: 1;
}

#Slowed.winamp-mode .mode-tile--toggle.mode-tile--active,
#Slowed.winamp-mode .modes-grid--video .mode-tile--toggle.mode-tile--active,
#Slowed.winamp-mode .modes-grid--video .mode-tile--toggle.mode-tile--active .mode-tile__label-text,
#Slowed.winamp-mode .mode-tile--adjustable.mode-tile--active,
#Slowed.winamp-mode .mode-tile--adjustable.mode-tile--active:hover,
#Slowed.winamp-mode .mode-tile--adjustable.mode-tile--dragging,
#Slowed.y2k-mode .mode-tile--toggle.mode-tile--active,
#Slowed.y2k-mode .modes-grid--video .mode-tile--toggle.mode-tile--active,
#Slowed.y2k-mode .modes-grid--video .mode-tile--toggle.mode-tile--active .mode-tile__label-text,
#Slowed.y2k-mode .mode-tile--adjustable.mode-tile--active,
#Slowed.y2k-mode .mode-tile--adjustable.mode-tile--active:hover,
#Slowed.y2k-mode .mode-tile--adjustable.mode-tile--dragging,
#Slowed.aquarium-mode .mode-tile--toggle.mode-tile--active,
#Slowed.aquarium-mode .modes-grid--video .mode-tile--toggle.mode-tile--active,
#Slowed.aquarium-mode .modes-grid--video .mode-tile--toggle.mode-tile--active .mode-tile__label-text,
#Slowed.aquarium-mode .mode-tile--adjustable.mode-tile--active,
#Slowed.aquarium-mode .mode-tile--adjustable.mode-tile--active:hover,
#Slowed.aquarium-mode .mode-tile--adjustable.mode-tile--dragging,
#Slowed.winxp-mode .mode-tile--toggle.mode-tile--active,
#Slowed.winxp-mode .modes-grid--video .mode-tile--toggle.mode-tile--active,
#Slowed.winxp-mode .modes-grid--video .mode-tile--toggle.mode-tile--active .mode-tile__label-text,
#Slowed.winxp-mode .mode-tile--adjustable.mode-tile--active,
#Slowed.winxp-mode .mode-tile--adjustable.mode-tile--active:hover,
#Slowed.winxp-mode .mode-tile--adjustable.mode-tile--dragging,
#Slowed.neoy2k-mode .mode-tile--toggle.mode-tile--active,
#Slowed.neoy2k-mode .modes-grid--video .mode-tile--toggle.mode-tile--active,
#Slowed.neoy2k-mode .modes-grid--video .mode-tile--toggle.mode-tile--active .mode-tile__label-text,
#Slowed.neoy2k-mode .mode-tile--adjustable.mode-tile--active,
#Slowed.neoy2k-mode .mode-tile--adjustable.mode-tile--active:hover,
#Slowed.neoy2k-mode .mode-tile--adjustable.mode-tile--dragging,
#Slowed.dracula-mode .mode-tile--toggle.mode-tile--active,
#Slowed.dracula-mode .modes-grid--video .mode-tile--toggle.mode-tile--active,
#Slowed.dracula-mode .modes-grid--video .mode-tile--toggle.mode-tile--active .mode-tile__label-text,
#Slowed.dracula-mode .mode-tile--adjustable.mode-tile--active,
#Slowed.dracula-mode .mode-tile--adjustable.mode-tile--active:hover,
#Slowed.dracula-mode .mode-tile--adjustable.mode-tile--dragging,
#Slowed.alien-mode .mode-tile--toggle.mode-tile--active,
#Slowed.alien-mode .modes-grid--video .mode-tile--toggle.mode-tile--active,
#Slowed.alien-mode .modes-grid--video .mode-tile--toggle.mode-tile--active .mode-tile__label-text,
#Slowed.alien-mode .mode-tile--adjustable.mode-tile--active,
#Slowed.alien-mode .mode-tile--adjustable.mode-tile--active:hover,
#Slowed.alien-mode .mode-tile--adjustable.mode-tile--dragging,
#Slowed.macos-mode .mode-tile--toggle.mode-tile--active,
#Slowed.macos-mode .modes-grid--video .mode-tile--toggle.mode-tile--active,
#Slowed.macos-mode .modes-grid--video .mode-tile--toggle.mode-tile--active .mode-tile__label-text,
#Slowed.macos-mode .mode-tile--adjustable.mode-tile--active,
#Slowed.macos-mode .mode-tile--adjustable.mode-tile--active:hover,
#Slowed.macos-mode .mode-tile--adjustable.mode-tile--dragging {
  color: var(--mode-tile-active-ink);
  text-shadow: none;
}

#Slowed.winamp-mode .mood__chip--selected,
#Slowed.y2k-mode .mood__chip--selected,
#Slowed.aquarium-mode .mood__chip--selected,
#Slowed.winxp-mode .mood__chip--selected,
#Slowed.neoy2k-mode .mood__chip--selected,
#Slowed.dracula-mode .mood__chip--selected,
#Slowed.alien-mode .mood__chip--selected,
#Slowed.macos-mode .mood__chip--selected {
  color: var(--mood-chip-selected-ink);
  text-shadow: none;
}

#Slowed.winamp-mode .mode-tile--ambiance.mode-tile--active,
#Slowed.winamp-mode .mode-tile--ambiance.mode-tile--active:hover,
#Slowed.winamp-mode .mode-tile--ambiance.mode-tile--dragging,
#Slowed.y2k-mode .mode-tile--ambiance.mode-tile--active,
#Slowed.y2k-mode .mode-tile--ambiance.mode-tile--active:hover,
#Slowed.y2k-mode .mode-tile--ambiance.mode-tile--dragging,
#Slowed.aquarium-mode .mode-tile--ambiance.mode-tile--active,
#Slowed.aquarium-mode .mode-tile--ambiance.mode-tile--active:hover,
#Slowed.aquarium-mode .mode-tile--ambiance.mode-tile--dragging,
#Slowed.winxp-mode .mode-tile--ambiance.mode-tile--active,
#Slowed.winxp-mode .mode-tile--ambiance.mode-tile--active:hover,
#Slowed.winxp-mode .mode-tile--ambiance.mode-tile--dragging,
#Slowed.neoy2k-mode .mode-tile--ambiance.mode-tile--active,
#Slowed.neoy2k-mode .mode-tile--ambiance.mode-tile--active:hover,
#Slowed.neoy2k-mode .mode-tile--ambiance.mode-tile--dragging,
#Slowed.dracula-mode .mode-tile--ambiance.mode-tile--active,
#Slowed.dracula-mode .mode-tile--ambiance.mode-tile--active:hover,
#Slowed.dracula-mode .mode-tile--ambiance.mode-tile--dragging,
#Slowed.alien-mode .mode-tile--ambiance.mode-tile--active,
#Slowed.alien-mode .mode-tile--ambiance.mode-tile--active:hover,
#Slowed.alien-mode .mode-tile--ambiance.mode-tile--dragging,
#Slowed.macos-mode .mode-tile--ambiance.mode-tile--active,
#Slowed.macos-mode .mode-tile--ambiance.mode-tile--active:hover,
#Slowed.macos-mode .mode-tile--ambiance.mode-tile--dragging {
  color: var(--ambiance-ink);
  text-shadow: none;
}

#Slowed.winamp-mode .debug-bar__segment--active,
#Slowed.winamp-mode .debug-bar__toggle--on {
  color: var(--winamp-on-lcd);
  background: var(--winamp-lcd);
  border-color: var(--winamp-lcd);
}

#Slowed.y2k-mode .debug-bar__segment--active,
#Slowed.y2k-mode .debug-bar__toggle--on {
  color: var(--y2k-on-neon);
  background: var(--y2k-neon);
  border-color: var(--y2k-neon);
}

#Slowed.aquarium-mode .debug-bar__segment--active,
#Slowed.aquarium-mode .debug-bar__toggle--on {
  color: var(--aquarium-on-aqua);
  background: var(--aquarium-aqua);
  border-color: var(--aquarium-aqua);
}

#Slowed.winamp-mode .subscription-status-button--unlock-depleted,
#Slowed.winamp-mode .subscription-status-button--unlock-depleted:hover:not(:disabled),
#Slowed.winamp-mode .subscription-status-button--unlock-depleted:active:not(:disabled),
#Slowed.winamp-mode .subscription-status-button--glow,
#Slowed.winamp-mode .content__overlay-cta,
#Slowed.y2k-mode .subscription-status-button--unlock-depleted,
#Slowed.y2k-mode .subscription-status-button--unlock-depleted:hover:not(:disabled),
#Slowed.y2k-mode .subscription-status-button--unlock-depleted:active:not(:disabled),
#Slowed.y2k-mode .subscription-status-button--glow,
#Slowed.y2k-mode .content__overlay-cta,
#Slowed.aquarium-mode .subscription-status-button--unlock-depleted,
#Slowed.aquarium-mode .subscription-status-button--unlock-depleted:hover:not(:disabled),
#Slowed.aquarium-mode .subscription-status-button--unlock-depleted:active:not(:disabled),
#Slowed.aquarium-mode .subscription-status-button--glow,
#Slowed.aquarium-mode .content__overlay-cta,
#Slowed.winxp-mode .subscription-status-button--unlock-depleted,
#Slowed.winxp-mode .subscription-status-button--unlock-depleted:hover:not(:disabled),
#Slowed.winxp-mode .subscription-status-button--unlock-depleted:active:not(:disabled),
#Slowed.winxp-mode .subscription-status-button--glow,
#Slowed.winxp-mode .content__overlay-cta,
#Slowed.neoy2k-mode .subscription-status-button--unlock-depleted,
#Slowed.neoy2k-mode .subscription-status-button--unlock-depleted:hover:not(:disabled),
#Slowed.neoy2k-mode .subscription-status-button--unlock-depleted:active:not(:disabled),
#Slowed.neoy2k-mode .subscription-status-button--glow,
#Slowed.neoy2k-mode .content__overlay-cta,
#Slowed.dracula-mode .subscription-status-button--unlock-depleted,
#Slowed.dracula-mode .subscription-status-button--unlock-depleted:hover:not(:disabled),
#Slowed.dracula-mode .subscription-status-button--unlock-depleted:active:not(:disabled),
#Slowed.dracula-mode .subscription-status-button--glow,
#Slowed.dracula-mode .content__overlay-cta,
#Slowed.alien-mode .subscription-status-button--unlock-depleted,
#Slowed.alien-mode .subscription-status-button--unlock-depleted:hover:not(:disabled),
#Slowed.alien-mode .subscription-status-button--unlock-depleted:active:not(:disabled),
#Slowed.alien-mode .subscription-status-button--glow,
#Slowed.alien-mode .content__overlay-cta,
#Slowed.macos-mode .subscription-status-button--unlock-depleted,
#Slowed.macos-mode .subscription-status-button--unlock-depleted:hover:not(:disabled),
#Slowed.macos-mode .subscription-status-button--unlock-depleted:active:not(:disabled),
#Slowed.macos-mode .subscription-status-button--glow,
#Slowed.macos-mode .content__overlay-cta {
  color: var(--accent-on);
}

#Slowed {
  --spacing-0: 0;
  --spacing-05: 0.125rem;
  --spacing-1: 0.25rem;
  --spacing-2: 0.5rem;
  --spacing-3: 0.75rem;
  --spacing-4: 1rem;
  --spacing-5: 1.25rem;
  --spacing-6: 1.5rem;
  --spacing-7: 2rem;
  --spacing-8: 2.5rem;
  --spacing-9: 3rem;
  --spacing-10: 4rem;
}

#Slowed {
  --font-size-base: 1rem;
  --font-size-small: 0.9rem;
  --font-size-xsmall: 0.8rem;
  --font-size-xxsmall: 0.7rem;
  --font-family-base: "Inter", sans-serif;
  --font-family-variant: "Jost", "Inter", sans-serif;
}

#Slowed .mounting * {
  transition: none !important;
}

#Slowed .mounting *:before {
  transition: none !important;
}

#Slowed .mounting *:after {
  transition: none !important;
}

#Slowed {
  position: relative;
  isolation: isolate;
  /* Mirrored by POPUP_WIDTH_PX in popup/constants.js, which pins the popup
     document to the same width. */
  --popup-width: 525px;
  width: var(--popup-width);
  background-color: var(--color-page);
  overflow: hidden;
  overscroll-behavior: none;
}

/* Clear the fixed debug bar so it never covers the footer links. */
#Slowed .popup--debug {
  padding-bottom: calc(var(--spacing-5) + 34px);
}

/* Settings → Speed Up plays the video backwards from "slowed", so the
   controls run backwards too: the wordmark reads in a mirror and the
   control stack mirrors right-to-left. Scoped to the controls on purpose —
   the header status, the sheets and the footer links stay put, so nothing
   you navigate by moves. Latin text keeps its own direction, so everything
   stays readable: the joke is in the arrangement, not the letters. */
#Slowed .popup--reversed .content__effects {
  direction: rtl;
}

#Slowed .popup--reversed .header__title svg {
  transform: scaleX(-1);
}

@media (prefers-reduced-motion: no-preference) {
  #Slowed .popup--reversed .header__title svg {
    transition: transform 0.35s ease;
  }
}

#Slowed .popup {
  position: relative;
  z-index: 1;
  width: 100%;
  box-sizing: border-box;
  padding: var(--spacing-3) var(--spacing-5) var(--spacing-5);
  font-size: 14px;
  font-family: var(--font-family-base);
  color: var(--color-gray-900);
  background-color: transparent;
  letter-spacing: -0.005em;
}

#Slowed .header {
  position: relative;
  margin-bottom: var(--spacing-5);
}

#Slowed .header__content {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

#Slowed .header__title svg {
  width: auto;
  height: 22px;
  display: block;
}

#Slowed .header__left_button {
  position: absolute;
  left: 0;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

#Slowed .header__right_button {
  position: absolute;
  right: 0;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

#Slowed .header__status {
  font-family: var(--font-family-base);
  font-size: 10px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.01em;
  color: var(--color-gray-500);
  white-space: nowrap;
}

#Slowed .header__status--muted {
  color: var(--color-gray-400);
}

#Slowed .header__usage-quota {
  font-family: var(--font-family-base);
  font-size: 10px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.01em;
  color: var(--color-gray-500);
  white-space: nowrap;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  transition: color 0.15s ease;
}

#Slowed .header__usage-quota:hover {
  color: var(--color-gray-700);
}

#Slowed .header__upgrade-error {
  font-family: var(--font-family-base);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.01em;
  color: var(--color-error, #c0392b);
  white-space: nowrap;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

#Slowed .header__applying {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
  font-size: var(--font-size-xsmall);
  color: var(--accent);
}

#Slowed .header__spinner {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid var(--color-gray-200);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: header-spinner 0.7s linear infinite;
}

@keyframes header-spinner {
  to {
    transform: rotate(360deg);
  }
}

#Slowed .header__bar {
  width: 100%;
  margin: var(--spacing-2) auto var(--spacing-1) auto;
  height: 1px;
  border-radius: 1px;
  background-color: var(--color-gray-200);
}

#Slowed .switcher {
  position: relative;
  width: 40px;
  height: 18px;
  background-color: var(--color-gray-200);
  appearance: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s;
}

#Slowed .switcher:before {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(55% - 4px);
  height: calc(100% - 4px);
  border-radius: 6px;
  background-color: var(--white);
  content: "";
  margin: 2px;
  transition: left 0.15s ease-in-out;
}

#Slowed .switcher:active {
  background-color: var(--accent-soft-active);
}

#Slowed .switcher:checked {
  background-color: var(--accent);
}

#Slowed .switcher:checked:active {
  background-color: var(--accent-hover);
}

#Slowed .switcher:checked:before {
  left: 18px;
}

#Slowed .switcher:focus {
  outline: none;
}

#Slowed .switcher:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

#Slowed .slider {
  --slider-height: 30px;
  --slider-thumb-size: 20px;
  --slider-point-size: 4px;
  --slider-track-size: 1px;

  display: grid;
  grid-template-columns: 10% minmax(0, 1fr);
  column-gap: var(--spacing-3);
  align-items: center;
  width: 100%;
  padding: 0 var(--spacing-4);
}

#Slowed .slider__label {
  min-width: 0;
  font-size: var(--font-size-xsmall);
  font-weight: 500;
  color: var(--color-black);
  text-align: left;
  white-space: nowrap;
  pointer-events: none;
}

#Slowed .slider__track {
  position: relative;
  min-width: 0;
  height: var(--slider-height);
  cursor: pointer;
}

#Slowed .slider__points {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

#Slowed .slider__points--markers {
  z-index: 0;
}

#Slowed .slider__points--active {
  z-index: 1;
}

#Slowed .slider__point {
  position: absolute;
  top: 50%;
  left: calc(
    var(--slider-thumb-size) / 2 + (100% - var(--slider-thumb-size)) *
      var(--point-pct) / 100
  );
  width: var(--slider-point-size);
  height: var(--slider-point-size);
  transform: translate(-50%, -50%);
}

#Slowed .slider__ghost {
  position: absolute;
  left: calc(
    var(--slider-thumb-size) / 2 + (100% - var(--slider-thumb-size)) *
      var(--point-pct) / 100
  );
  width: 2px;
  margin-left: -1px;
  background-color: var(--accent);
  opacity: 0;
  z-index: 1;
  pointer-events: none;
  transition: 0.15s opacity;
}

#Slowed .slider__ghost--active {
  opacity: 1;
}

#Slowed .slider:hover .slider__points--markers .slider__point:after {
  transform: scale(1.6);
  background-color: var(--color-gray-300);
}

#Slowed .slider__point:after {
  position: absolute;
  inset: 0;
  background-color: var(--color-gray-200);
  content: "";
  border-radius: 50%;
  transition: 0.3s transform;
}

#Slowed .slider__point--active:after {
  background-color: var(--accent);
  transform: scale(2.5);
}

#Slowed .slider input[type="range"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  -webkit-appearance: none;
  background: transparent;
  cursor: pointer;
  z-index: 2;
}

#Slowed .slider input[type="range"]:focus {
  outline: none;
}

#Slowed .slider input[type="range"]::-webkit-slider-runnable-track {
  width: 100%;
  height: var(--slider-track-size);
  border-radius: var(--slider-track-size);
  background: transparent;
  cursor: pointer;
}

#Slowed .slider input[type="range"]::-webkit-slider-thumb {
  width: var(--slider-thumb-size);
  height: var(--slider-thumb-size);
  margin-top: calc(
    (var(--slider-thumb-size) / -2) + (var(--slider-track-size) / 2)
  );
  border-radius: 50%;
  box-shadow: var(--color-gray-200) 0 0 0 1px;
  -webkit-appearance: none;
  opacity: 0;
  transition: 0.15s all;
  cursor: ew-resize;
}

#Slowed .slider:hover input[type="range"]::-webkit-slider-thumb {
  opacity: 1;
  background: var(--color-white);
}

#Slowed .slider input[type="range"]:active::-webkit-slider-thumb {
  transform: scale(0.95);
}

#Slowed .slider input[type="range"]::-webkit-slider-thumb:hover {
  box-shadow: var(--color-gray-300) 0 0 0 1px;
}

#Slowed .slider--on input[type="range"]::-webkit-slider-thumb {
  border-color: var(--accent) !important;
}

#Slowed .content {
  position: relative;
  display: grid;
  gap: var(--spacing-6);
  transform: scale(1);
  transition: transform 0.3s ease-out;
}

/* Fade lives on the shell so it does not scroll away with content. */
#Slowed .content__push-shell {
  position: relative;
  /* Grid items default to min-width:auto, which lets a wide scroller (the
     Mood chip row) blow the shell past the popup and stop the effect grids
     wrapping. Pin it so the row scrolls instead. */
  min-width: 0;
}

#Slowed .content__push {
  overflow: visible;
  overscroll-behavior: none;
}

#Slowed .content__push-shell--mood-open .content__push {
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: none;
}

#Slowed .content__push-shell--mood-open .content__push::-webkit-scrollbar {
  display: none;
}

/* Top fade over the pinned effects while a sheet is open. */
#Slowed .content__push-shell::before {
  transition: opacity 0.22s ease;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 40px;
  z-index: 10;
  pointer-events: none;
  background: linear-gradient(to bottom, var(--color-page), transparent);
  opacity: 0;
}

#Slowed .content__push-shell--mood-open::before {
  opacity: 1;
}

#Slowed .content__effects-frame {
  position: relative;
}

#Slowed .content__effects {
  position: relative;
  display: grid;
  gap: var(--spacing-6);
}

#Slowed .content--disabled {
  transform: scale(0.98);
  opacity: 0.55;
  filter: saturate(0.6);
  transition:
    transform 0.3s ease-out,
    opacity 0.3s ease,
    filter 0.3s ease;
}

#Slowed .content__effects--dimmed {
  opacity: 0.9;
  cursor: default;
  transition: opacity 0.2s ease;
}

/* Click-catcher: closes Mood when tapping the effects area above. */
#Slowed .content__mood-backdrop {
  appearance: none;
  position: absolute;
  inset: 0;
  z-index: 5;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  cursor: default;
}

#Slowed .content__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: not-allowed;
  background-color: transparent;
  z-index: 999;
}

#Slowed .content__overlay--music-pro {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-3);
  padding: var(--spacing-6);
  text-align: center;
  cursor: default;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(2px);
}

#Slowed .content__overlay-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-black);
}

#Slowed .content__overlay-text {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--color-gray-600);
}

#Slowed .content__overlay-cta {
  border: none;
  border-radius: 999px;
  padding: 0.45rem 1rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-white);
  background: var(--accent);
  cursor: pointer;
}

#Slowed .content__overlay-cta:hover {
  background: var(--accent-hover);
}

#Slowed .content__title {
  display: flex;
  align-items: center;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-black);
  margin-bottom: var(--spacing-3);
}

#Slowed .content__title svg {
  width: 1.4em;
  height: 1.4em;
  margin-right: var(--spacing-1);
}

#Slowed .content__item--locked {
  cursor: pointer;
}

#Slowed .content__item--locked .content__title {
  color: var(--color-gray-400);
}

#Slowed .content__item--locked .slider {
  pointer-events: none;
}

#Slowed .content__item--locked .slider__point:after {
  background-color: var(--color-gray-200);
}

#Slowed .content__item--locked .slider__point--active:after {
  background-color: var(--color-gray-400);
}

#Slowed .content__item--locked .slider__label {
  color: var(--color-gray-400);
}

#Slowed .button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--accent-soft-hover);
  text-align: center;
  cursor: pointer;
  background: transparent;
  padding: 0;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-radius: 999px;
  padding: var(--spacing-1) var(--spacing-3);
  color: var(--accent-ink);
  background-color: var(--accent-soft);
  font-size: var(--font-size-xxsmall);
  font-weight: 600;
  font-family: var(--font-family-base);
  height: 22px;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}

#Slowed .button:hover:not(:disabled) {
  background-color: var(--accent-soft-hover);
  border-color: var(--accent-soft-active);
}

#Slowed .button:active:not(:disabled) {
  background-color: var(--accent-soft-active);
}

#Slowed .button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

#Slowed .subscription-status-button {
  display: inline-grid;
  align-items: center;
  justify-items: center;
  grid-template-columns: var(--subscription-status-label-width, max-content);
  border: none;
  background: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  font-family: var(--font-family-base);
  font-size: var(--font-size-xxsmall);
  font-weight: 500;
  color: var(--color-black);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transition:
    grid-template-columns 0.35s ease,
    background-color 0.15s ease;
  background-color: var(--color-gray-100);
  padding: var(--spacing-1) var(--spacing-2);
  border-radius: 999px;
  overflow: hidden;
  white-space: nowrap;
}

#Slowed .subscription-status-button--unlock {
  color: var(--color-black);
  background: var(--color-gray-100);
  box-shadow: none;
}

#Slowed .subscription-status-button--unlock:hover:not(:disabled), #Slowed .subscription-status-button--unlock:active:not(:disabled) {
  color: var(--color-black);
  background: var(--color-gray-100);
}

#Slowed .subscription-status-button--unlock-depleted, #Slowed .subscription-status-button--unlock-depleted:hover:not(:disabled), #Slowed .subscription-status-button--unlock-depleted:active:not(:disabled) {
  color: var(--accent-on);
  background: var(--accent);
  box-shadow: none;
}

#Slowed .subscription-status-button--unlock.subscription-status-button--glow {
  color: var(--color-black);
  background: var(--color-gray-100);
  box-shadow: none;
  animation: none;
}

#Slowed .subscription-status-button--unlock-depleted.subscription-status-button--glow, #Slowed .subscription-status-button--unlock-depleted.subscription-status-button--glow:hover:not(:disabled), #Slowed .subscription-status-button--unlock-depleted.subscription-status-button--glow:active:not(:disabled) {
  color: var(--accent-on);
  background: var(--accent);
  box-shadow: none;
  animation: none;
}

/* Trial ended — accent glow on the CTA. */
#Slowed .subscription-status-button--glow {
  color: var(--accent-on);
  background: linear-gradient(
    135deg,
    var(--accent-mid) 0%,
    var(--accent-hover) 100%
  );
  animation: subscription-status-button-glow 2.2s ease-in-out infinite;
}

#Slowed .subscription-status-button--glow:hover:not(:disabled) {
  color: var(--accent-on);
}

@keyframes subscription-status-button-glow {
  0%, 100% {
    box-shadow:
      0 0 0 0 transparent,
      0 0 6px 1px var(--accent-glow);
  }
  50% {
    box-shadow:
      0 0 0 4px var(--accent-glow),
      0 0 14px 3px var(--accent-glow);
  }
}

#Slowed .subscription-status-button:hover:not(:disabled):not(.subscription-status-button--unlock) {
  color: var(--color-black);
}

#Slowed .subscription-status-button:disabled {
  cursor: wait;
  opacity: 0.7;
}

#Slowed .subscription-status-button--loading {
  cursor: wait;
}

#Slowed .subscription-status-button__loading {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  pointer-events: none;
}

#Slowed .subscription-status-button:focus {
  outline: none;
}

#Slowed .subscription-status-button:focus-visible .subscription-status-button__label {
  text-decoration: underline;
}

#Slowed .subscription-status-button__label {
  grid-area: 1 / 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: max-content;
  max-width: none;
  transition:
    opacity 0.35s ease,
    transform 0.35s ease;
  white-space: nowrap;
  pointer-events: none;
}

/* Step 0: Unlock PRO showing */
#Slowed .subscription-status-button--step-0
  .subscription-status-button__label--default {
  opacity: 1;
  transform: translateY(0);
}
#Slowed .subscription-status-button--step-0
  .subscription-status-button__label--trial-mode {
  opacity: 0;
  transform: translateY(40%);
}
#Slowed .subscription-status-button--step-0
  .subscription-status-button__label--trial-days {
  opacity: 0;
  transform: translateY(40%);
}

/* Step 1: Trial mode showing */
#Slowed .subscription-status-button--step-1
  .subscription-status-button__label--default {
  opacity: 0;
  transform: translateY(-40%);
}
#Slowed .subscription-status-button--step-1
  .subscription-status-button__label--trial-mode {
  opacity: 1;
  transform: translateY(0);
}
#Slowed .subscription-status-button--step-1
  .subscription-status-button__label--trial-days {
  opacity: 0;
  transform: translateY(40%);
}

/* Step 2: X days left showing */
#Slowed .subscription-status-button--step-2
  .subscription-status-button__label--default {
  opacity: 0;
  transform: translateY(-40%);
}
#Slowed .subscription-status-button--step-2
  .subscription-status-button__label--trial-mode {
  opacity: 0;
  transform: translateY(-40%);
}
#Slowed .subscription-status-button--step-2
  .subscription-status-button__label--trial-days {
  opacity: 1;
  transform: translateY(0);
}

#Slowed .actions {
  display: flex;
  flex-direction: column;
  color: var(--color-gray-500);
  font-size: var(--font-size-xxsmall);
  gap: var(--spacing-2);
}

#Slowed .actions__list {
  display: flex;
  row-gap: var(--spacing-2);
  column-gap: var(--spacing-2);
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

#Slowed .actions__list > * + *::before {
  content: "·";
  margin-right: var(--spacing-2);
  color: var(--color-gray-300);
  pointer-events: none;
}

#Slowed .actions a, #Slowed .actions__toggle {
  text-decoration: none;
  color: var(--color-gray-500);
  transition: color 0.15s ease;
}

#Slowed .actions a:hover, #Slowed .actions__toggle:hover {
  color: var(--color-black);
}

#Slowed .actions a:focus-visible, #Slowed .actions__toggle:focus-visible {
  outline: none;
}

#Slowed .actions__toggle {
  appearance: none;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
}

#Slowed .actions__toggle:disabled {
  color: var(--color-gray-500);
  cursor: not-allowed;
}

#Slowed .actions__toggle:disabled:hover {
  color: var(--color-gray-500);
}

#Slowed .modes-grid {
  display: flex;
  gap: var(--spacing-2);
  flex-wrap: wrap;
  padding: 0 var(--spacing-1);
}

#Slowed .modes-grid--audio .mode-tile__label {
  gap: 0;
}

#Slowed .modes-grid--audio .mode-tile__icon-slot {
  width: 0;
  margin-right: 0;
  opacity: 0;
  overflow: hidden;
  transition:
    width 0.22s cubic-bezier(0.22, 1, 0.36, 1),
    margin-right 0.22s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.16s ease;
}

#Slowed .modes-grid--audio .mode-tile--active .mode-tile__icon-slot, #Slowed .modes-grid--audio .mode-tile--dragging .mode-tile__icon-slot {
  width: 16px;
  margin-right: 8px;
  opacity: 1;
  overflow: visible;
}

#Slowed .modes-grid--audio .mode-tile--adjustable.mode-tile--active, #Slowed .modes-grid--audio .mode-tile--adjustable.mode-tile--dragging, #Slowed .modes-grid--ambiance .mode-tile--adjustable.mode-tile--active, #Slowed .modes-grid--ambiance .mode-tile--adjustable.mode-tile--dragging {
  cursor: ew-resize;
}

#Slowed .mode-tile {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-2) var(--spacing-3);
  border: 1px solid var(--color-gray-200);
  background-color: var(--mode-tile-bg);
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.75rem;
  color: var(--mode-tile-ink);
  text-align: center;
  letter-spacing: 0.03em;
  font-weight: 500;
  --chip-edge: var(--color-gray-200);
  text-shadow: none;
  transition: all 0.15s ease;
}

#Slowed .mode-tile:hover {
  border-color: var(--color-gray-300);
  background-color: var(--mode-tile-bg);
  --chip-edge: var(--color-gray-300);
}

#Slowed .mode-tile:active {
  transform: scale(0.97);
}

#Slowed .modes-grid--video .mode-tile, #Slowed .modes-grid--video .mode-tile--active {
  text-shadow: none;
}

#Slowed .modes-grid--video .mode-tile {
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    color 0.15s ease,
    transform 0.12s ease-out;
}

#Slowed .mode-tile--toggle {
  overflow: hidden;
  border-color: transparent;
  box-shadow: inset 0 0 0 1px var(--chip-edge);
  background-color: var(--mode-tile-bg);
  transition:
    border-color 0.15s ease,
    box-shadow 0.2s cubic-bezier(0.22, 1, 0.36, 1),
    background-color 0.15s ease,
    color 0.15s ease,
    transform 0.12s ease-out;
}

#Slowed .mode-tile--toggle::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--effect-accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 0;
  pointer-events: none;
}

#Slowed .mode-tile--toggle.mode-tile--active::before {
  transform: scaleX(1);
}

#Slowed .mode-tile--toggle:hover {
  border-color: transparent;
  --chip-edge: var(--color-gray-300);
  box-shadow: inset 0 0 0 1px var(--chip-edge);
  background-color: var(--mode-tile-bg);
}

#Slowed .mode-tile--toggle.mode-tile--active {
  border-color: transparent;
  --chip-edge: var(--effect-accent);
  box-shadow: inset 0 0 0 1px var(--chip-edge);
  background-color: var(--mode-tile-active-bg);
  color: var(--mode-tile-active-ink);
}

#Slowed .mode-tile--toggle.mode-tile--active:hover {
  border-color: transparent;
  --chip-edge: var(--color-gray-200);
  box-shadow: inset 0 0 0 1px var(--chip-edge);
  background-color: var(--mode-tile-active-bg);
  color: var(--mode-tile-active-ink);
}

/* Video Effects: solid enabled color, no wipe. */
#Slowed .modes-grid--video .mode-tile--toggle::before {
  content: none;
}

#Slowed .modes-grid--video .mode-tile--toggle {
  border-color: var(--chip-edge);
  box-shadow: none;
}

#Slowed .modes-grid--video .mode-tile--toggle:hover {
  --chip-edge: var(--color-gray-300);
  border-color: var(--chip-edge);
  box-shadow: none;
}

#Slowed .modes-grid--video .mode-tile--toggle.mode-tile--active, #Slowed .modes-grid--video .mode-tile--toggle.mode-tile--active:hover {
  --chip-edge: var(--selected-edge);
  border-color: var(--chip-edge);
  box-shadow: none;
  background-color: var(--effect-accent);
  color: var(--mode-tile-selected-ink);
  font-weight: 600;
}

#Slowed .modes-grid--video .mode-tile--toggle.mode-tile--active:hover {
  background-color: var(--effect-accent);
}

#Slowed .modes-grid--video .mode-tile--toggle.mode-tile--active .mode-tile__label-text {
  font-weight: 600;
  color: var(--mode-tile-selected-ink);
}

#Slowed .modes-grid--video .mode-tile--toggle.mode-tile--active:focus-visible, #Slowed .modes-grid--video .mode-tile--toggle.mode-tile--active:hover:focus-visible {
  border-color: var(--chip-edge);
  box-shadow: none;
}

#Slowed .mode-tile--toggle .mode-tile__label {
  position: relative;
  z-index: 1;
}

#Slowed .mode-tile--locked, #Slowed .mode-tile--locked:hover {
  color: var(--color-gray-400);
  background-color: var(--color-locked-surface);
  border-color: transparent;
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}

#Slowed .mode-tile--locked .mode-tile__label-text {
  color: var(--color-gray-400);
}

#Slowed .mode-tile--locked:active {
  transform: none;
}

#Slowed .mode-tile__label {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: inherit;
}

#Slowed .mode-tile__label-content {
  position: relative;
  display: inline-block;
}

#Slowed .mode-tile__icon-slot {
  position: relative;
  flex-shrink: 0;
  width: 16px;
  height: 14px;
}

#Slowed .mode-tile__icon {
  position: absolute;
  top: 50%;
  left: 50%;
  display: inline-flex;
  width: 20px;
  height: 20px;
  color: inherit;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

#Slowed .mode-tile__icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

#Slowed .mode-tile__icon--mask {
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

#Slowed .mode-tile__icon--lock {
  color: var(--color-gray-400);
}

#Slowed .mode-tile__icon--lock svg {
  width: 12px;
  height: 12px;
}

#Slowed .mode-tile__lock-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-gray-400);
  pointer-events: none;
}

#Slowed .mode-tile__lock-badge svg {
  width: 8px;
  height: 8px;
  display: block;
}

#Slowed .mode-tile__label-text {
  display: inline-block;
}

#Slowed .mode-tile--active .mode-tile__label-text {
  font-weight: 500;
}

#Slowed .mode-tile__label-text--reserve {
  visibility: hidden;
}

#Slowed .mode-tile__label-value {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  opacity: 1;
  transform: translateY(0) scale(1);
  transition:
    opacity 0.22s ease,
    transform 0.22s ease;
}

#Slowed .mode-tile__label-value--out {
  opacity: 0;
  transform: translateY(3px) scale(0.96);
}

#Slowed .mode-tile__label-text--enter {
  animation: modeTileLabelIn 0.3s ease-out forwards;
}

@keyframes modeTileLabelIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

#Slowed .mode-tile--adjustable.mode-tile--active {
  overflow: hidden;
  border-color: transparent;
  box-shadow: inset 0 0 0 1px var(--effect-accent);
  background-color: var(--mode-tile-active-bg);
  color: var(--mode-tile-active-ink);
  --chip-edge: var(--chip-bevel-edge);
}

#Slowed .mode-tile--adjustable.mode-tile--active::before {
  content: "";
  position: absolute;
  top: -1px;
  bottom: -1px;
  left: -1px;
  width: calc((100% + 2px) * var(--mode-tile-fill, 0));
  background-color: var(--effect-accent);
  z-index: 0;
  pointer-events: none;
  transition: width 0.14s ease-out;
}

/* Inner bevel 1px in from the outer edge (above the fill). */
#Slowed .mode-tile--adjustable.mode-tile--active:not(.mode-tile--ambiance)::after {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: 1;
  border-radius: 6px;
  border: 1px solid var(--chip-edge);
  pointer-events: none;
}

#Slowed .mode-tile--adjustable {
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    background-color 0.15s ease,
    color 0.15s ease,
    transform 0.15s ease;
}

#Slowed .mode-tile--adjustable.mode-tile--fill-growing::before {
  transition: width 0.14s ease-out;
}

#Slowed .mode-tile--adjustable.mode-tile--dragging::before {
  transition: width 0.08s ease-out;
}

#Slowed .mode-tile--adjustable.mode-tile--active:hover, #Slowed .mode-tile--adjustable.mode-tile--dragging {
  border-color: transparent;
  box-shadow: inset 0 0 0 1px var(--effect-accent);
  background-color: var(--mode-tile-active-bg);
  color: var(--mode-tile-active-ink);
  user-select: none;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    background-color 0.15s ease,
    color 0.15s ease;
}

#Slowed .mode-tile--adjustable.mode-tile--dragging:active {
  transform: none;
}

#Slowed .mode-tile--adjustable.mode-tile--release-bounce {
  transition:
    border-color 0.15s ease,
    background-color 0.15s ease,
    color 0.15s ease;
}

#Slowed .mode-tile--adjustable.mode-tile--release-bounce:active {
  transform: none;
}

#Slowed .mode-tile--adjustable .mode-tile__label, #Slowed .mode-tile--adjustable .mode-tile__label-content {
  z-index: 2;
}

#Slowed .mode-tile:focus-visible, #Slowed .mode-tile--locked:focus-visible, #Slowed .mode-tile--locked:hover:focus-visible {
  outline: none;
  border-color: var(--effect-accent);
}

#Slowed .mode-tile--toggle:focus-visible, #Slowed .mode-tile--toggle.mode-tile--active:focus-visible {
  outline: none;
  border-color: transparent;
  box-shadow: inset 0 0 0 1px var(--effect-accent);
}

#Slowed .mode-tile--adjustable.mode-tile--active:focus-visible, #Slowed .mode-tile--adjustable.mode-tile--active:hover:focus-visible {
  outline: none;
  border-color: transparent;
  box-shadow: inset 0 0 0 1px var(--effect-accent);
}

#Slowed .mode-tile__atmosphere {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  border-radius: inherit;
}

/* Ambiance tiles keep their atmosphere animation, but use the same enabled
   colors as every other adjustable audio effect. */
#Slowed .mode-tile--ambiance.mode-tile--active, #Slowed .mode-tile--ambiance.mode-tile--active:hover, #Slowed .mode-tile--ambiance.mode-tile--dragging {
  background-color: var(--mode-tile-active-bg);
  box-shadow: inset 0 0 0 1px var(--effect-accent);
  color: var(--mode-tile-active-ink);
  text-shadow: none;
  --chip-edge: var(--chip-bevel-edge);
}

#Slowed .mode-tile--ambiance.mode-tile--active::before {
  background-color: var(--effect-accent);
}

#Slowed .mode-tile--ambiance.mode-tile--active::after {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: 1;
  border-radius: 6px;
  border: 1px solid var(--chip-edge);
  pointer-events: none;
  box-sizing: border-box;
}

#Slowed .mode-tile--ambiance.mode-tile--active .mode-tile__label, #Slowed .mode-tile--ambiance.mode-tile--active .mode-tile__label-text, #Slowed .mode-tile--ambiance.mode-tile--active .mode-tile__label-value {
  color: var(--mode-tile-active-ink);
  text-shadow: none;
  filter: none;
}

#Slowed .mode-tile__rain-svg {
  position: absolute;
  inset: -30% -10%;
  width: 120%;
  height: 160%;
  display: block;
  pointer-events: none;
}

#Slowed .mode-tile__rain-streak {
  stroke: var(--rain-streak, rgba(255, 255, 255, 0.85));
  stroke-width: 1;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  animation-name: ambiance-anime-rain;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes ambiance-anime-rain {
  from {
    transform: translate(-6px, -18px);
  }

  to {
    transform: translate(10px, 28px);
  }
}

#Slowed .mode-tile__coffee-noise {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0.35;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27120%27 height=%27120%27%3E%3Cfilter id=%27n%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%270.85%27 numOctaves=%274%27 stitchTiles=%27stitch%27/%3E%3CfeColorMatrix values=%270 0 0 0 0.85 0 0 0 0 0.82 0 0 0 0 0.95 0 0 0 0.5 0%27/%3E%3C/filter%3E%3Crect width=%27120%27 height=%27120%27 filter=%27url%28%23n%29%27/%3E%3C/svg%3E");
  background-size: 120px 120px;
}

#Slowed .mode-tile__steam-svg {
  position: absolute;
  inset: -30% -10%;
  width: 120%;
  height: 160%;
  display: block;
  pointer-events: none;
}

#Slowed .mode-tile__steam-wisp {
  fill: none;
  stroke: var(--coffee-steam, rgba(255, 230, 200, 0.8));
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  opacity: 0;
  animation-name: ambiance-anime-steam;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

/* Rises, leans, and thins out — the wisp is gone before it reaches the top. */
@keyframes ambiance-anime-steam {
  0% {
    opacity: 0;
    transform: translate(0, 6px) scaleX(0.7);
  }

  25% {
    opacity: var(--steam-peak, 0.3);
  }

  70% {
    opacity: calc(var(--steam-peak, 0.3) * 0.45);
  }

  100% {
    opacity: 0;
    transform: translate(-5px, -26px) scaleX(1.35);
  }
}

#Slowed .mode-tile__seashore-svg {
  position: absolute;
  inset: -20% -16%;
  width: 132%;
  height: 140%;
  display: block;
  pointer-events: none;
}

#Slowed .mode-tile__seashore-wave {
  fill: none;
  stroke: var(--seashore-foam, rgba(255, 255, 255, 0.7));
  stroke-width: 1.1;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  animation-name: ambiance-anime-wave;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

/* Hotel Lounge: lamp bloom + motes. */
#Slowed .mode-tile__lounge-lamp {
  position: absolute;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(
    circle,
    var(--lounge-lamp, rgba(255, 208, 140, 0.55)) 0%,
    transparent 68%
  );
  animation-name: ambiance-anime-lamp;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes ambiance-anime-lamp {
  from {
    opacity: calc(var(--lamp-peak, 0.45) * 0.55);
    transform: translate(-50%, -50%) scale(0.9);
  }

  to {
    opacity: var(--lamp-peak, 0.45);
    transform: translate(-50%, -50%) scale(1.08);
  }
}

#Slowed .mode-tile__lounge-svg {
  position: absolute;
  inset: -20% -10%;
  width: 120%;
  height: 140%;
  display: block;
  pointer-events: none;
}

#Slowed .mode-tile__lounge-mote {
  fill: var(--lounge-mote, rgba(255, 224, 178, 0.6));
  animation-name: ambiance-anime-mote;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

@keyframes ambiance-anime-mote {
  from {
    transform: translate(-3px, 8px);
  }

  to {
    transform: translate(5px, -12px);
  }
}

/* Cocktail Bar: neon wash, carbonation, and a slow sheen along the bar. */
#Slowed .mode-tile__cocktail-neon {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(
      120% 80% at 18% 110%,
      var(--cocktail-neon, rgba(255, 122, 208, 0.35)) 0%,
      transparent 60%
    ),
    radial-gradient(
      110% 70% at 86% -10%,
      var(--cocktail-neon-alt, rgba(110, 229, 255, 0.28)) 0%,
      transparent 62%
    );
}

#Slowed .mode-tile__cocktail-sheen {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    transparent 38%,
    var(--cocktail-sheen, rgba(255, 255, 255, 0.16)) 50%,
    transparent 62%
  );
  background-size: 260% 100%;
  animation: ambiance-anime-sheen 7.5s ease-in-out infinite;
}

@keyframes ambiance-anime-sheen {
  0%, 12% {
    background-position: 130% 0;
  }

  70%, 100% {
    background-position: -30% 0;
  }
}

#Slowed .mode-tile__cocktail-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

#Slowed .mode-tile__cocktail-fizz {
  fill: var(--cocktail-fizz, rgba(255, 235, 250, 0.75));
  animation-name: ambiance-anime-fizz;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes ambiance-anime-fizz {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(-46px);
  }
}

#Slowed .mode-tile__berghain-haze {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0.45;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27120%27 height=%27120%27%3E%3Cfilter id=%27n%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%270.9%27 numOctaves=%273%27 stitchTiles=%27stitch%27/%3E%3CfeColorMatrix values=%270 0 0 0 0.7 0 0 0 0 0.15 0 0 0 0 0.25 0 0 0 0.55 0%27/%3E%3C/filter%3E%3Crect width=%27120%27 height=%27120%27 filter=%27url%28%23n%29%27/%3E%3C/svg%3E");
  background-size: 120px 120px;
}

#Slowed .mode-tile__berghain-strobe {
  position: absolute;
  inset: -20%;
  pointer-events: none;
  background: radial-gradient(
    ellipse at 30% 20%,
    var(--berghain-strobe, rgba(255, 255, 255, 0.4)) 0%,
    transparent 55%
  );
  animation-name: ambiance-anime-strobe;
  animation-duration: 2.6s;
  animation-timing-function: steps(1, end);
  animation-iteration-count: infinite;
}

#Slowed .mode-tile__berghain-strobe--late {
  background: radial-gradient(
    ellipse at 78% 70%,
    var(--berghain-strobe, rgba(255, 255, 255, 0.28)) 0%,
    transparent 50%
  );
  animation-duration: 3.4s;
  animation-delay: 0.7s;
}

#Slowed .mode-tile__berghain-svg {
  position: absolute;
  inset: -20% -10%;
  width: 120%;
  height: 140%;
  display: block;
  pointer-events: none;
}

#Slowed .mode-tile__berghain-dust {
  fill: var(--berghain-dust, rgba(255, 200, 210, 0.5));
  animation-name: ambiance-anime-dust;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes ambiance-anime-wave {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-18px);
  }
}

@keyframes ambiance-anime-strobe {
  0%, 86%, 100% {
    opacity: 0;
  }

  88%, 92% {
    opacity: 1;
  }
}

@keyframes ambiance-anime-dust {
  from {
    transform: translate(0, 6px);
  }

  to {
    transform: translate(-8px, -10px);
  }
}

@media (prefers-reduced-motion: reduce) {
  #Slowed .modes-grid--audio .mode-tile__icon-slot {
    transition: none;
  }

  #Slowed .mode-tile__rain-streak {
    animation: none;
    opacity: 0.25;
  }

  #Slowed .mode-tile__steam-wisp {
    animation: none;
    opacity: 0.28;
  }

  #Slowed .mode-tile__seashore-wave {
    animation: none;
    opacity: 0.28;
  }

  #Slowed .mode-tile__lounge-lamp, #Slowed .mode-tile__lounge-mote, #Slowed .mode-tile__cocktail-sheen, #Slowed .mode-tile__cocktail-fizz {
    animation: none;
    opacity: 0.28;
  }

  #Slowed .mode-tile__berghain-strobe, #Slowed .mode-tile__berghain-dust {
    animation: none;
    opacity: 0.22;
  }
}

#Slowed .quick-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  margin: var(--spacing-1) 0 var(--spacing-4) 0;
  gap: var(--spacing-2);
  font-size: var(--font-size-xsmall);
  color: var(--color-black);
  font-weight: 500;
}

#Slowed .quick-actions__btn, #Slowed .quick-actions a {
  appearance: none;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-decoration: none;
}

#Slowed .quick-actions__btn:hover:not(:disabled), #Slowed .quick-actions a:hover {
  color: var(--color-black);
}

#Slowed .quick-actions__btn:focus-visible, #Slowed .quick-actions a:focus-visible {
  outline: none;
  text-decoration: underline;
}

#Slowed .quick-actions__btn:disabled {
  cursor: default;
  color: var(--color-gray-400);
}

#Slowed .quick-actions__sep {
  color: var(--color-gray-300);
  user-select: none;
}

/* Revealed by scrolling .content__push; does not resize the panel.
   Margin/padding stay applied when closed so open/close only scrolls. */
#Slowed .mood {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
  margin: var(--spacing-6) 0 0;
  padding: var(--spacing-5) 0 0;
  font-size: 14px;
  font-family: var(--font-family-base);
  color: var(--color-gray-900);
  letter-spacing: -0.005em;
  --mood-panel-fade: var(--color-page);
  background-color: transparent;
}

/* Sheets mount already open, so this is an animation rather than a
   transition: it has to run on mount, including when one sheet replaces
   another. */
#Slowed .mood--open {
  --mood-panel-fade: var(--mood-panel-bg-active);
  animation: mood-sheet-in 0.24s ease both;
}

@keyframes mood-sheet-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  #Slowed .mood--open {
    animation: none;
  }
}

#Slowed .mood__header {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

#Slowed .mood__header .content__title {
  margin-bottom: 0;
}

#Slowed .mood__subtitle {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--color-gray-500);
}

#Slowed .mood__chips-wrap {
  position: relative;
  min-width: 0;
}

#Slowed .mood__chips-wrap::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 32px;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(
    to right,
    transparent,
    var(--mood-panel-fade)
  );
  transition: opacity 0.15s ease;
}

#Slowed .mood__chips-wrap--fade-end::after {
  opacity: 1;
}

#Slowed .mood__chips {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--spacing-2);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

#Slowed .mood__chips::-webkit-scrollbar {
  display: none;
}

#Slowed .mood__chip {
  appearance: none;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 5px;
  max-width: none;
  padding: 5px 10px;
  border: 1px solid var(--chip-edge, var(--color-gray-200));
  border-radius: 999px;
  background: var(--mood-chip-bg);
  color: var(--mood-chip-ink);
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
  --chip-edge: var(--color-gray-200);
  text-shadow: none;
  transition:
    border-color 0.15s ease,
    background-color 0.15s ease;
}

#Slowed .mood__chip:hover:not(:disabled):not(.mood__chip--locked) {
  --chip-edge: var(--color-gray-300);
  border-color: var(--chip-edge);
  background: var(--mood-chip-hover-bg);
}

#Slowed .mood__chip:disabled, #Slowed .mood__chip--locked, #Slowed .mood__chip--locked:hover {
  color: var(--color-gray-400);
  background-color: var(--color-locked-surface);
  border-color: transparent;
  cursor: not-allowed;
  text-decoration: none;
}

#Slowed .mood__chip-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#Slowed .mood__chip--selected, #Slowed .mood__chip--selected:hover:not(:disabled):not(.mood__chip--locked) {
  --chip-edge: var(--selected-edge);
  border: 1px solid var(--chip-edge);
  background: var(--mood-chip-selected-bg);
  color: var(--mood-chip-selected-ink);
  font-weight: 600;
  box-shadow: none;
}

#Slowed .mood__chip--selected:hover:not(:disabled):not(.mood__chip--locked) {
  background: var(--mood-chip-selected-bg-hover);
}

/* Decoration behind the popup. `.popup` is transparent and sits at z-index 1,
   so everything here paints under the live UI without touching its layout. */
#Slowed .skin-backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
}

/* Matrix: columns of glyphs falling past the popup. */
#Slowed .skin-backdrop__matrix {
  position: absolute;
  inset: 0;
}

#Slowed .skin-backdrop__matrix-column {
  position: absolute;
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.05;
  font-family: "Courier New", ui-monospace, monospace;
  font-weight: 700;
  color: var(--matrix-phosphor, #00ff41);
  white-space: pre;
  /* The run fades out behind the head so each column reads as a trail. */
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0, 0, 0, 0.35) 22%,
    rgba(0, 0, 0, 0.9) 70%,
    #000 100%
  );
  animation-name: skin-backdrop-matrix-fall;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  will-change: transform;
}

#Slowed .skin-backdrop__matrix-glyph--head {
  color: var(--matrix-phosphor-bright, #b4ffc8);
}

@keyframes skin-backdrop-matrix-fall {
  from {
    transform: translateY(-100%);
  }

  to {
    transform: translateY(var(--skin-backdrop-travel, 760px));
  }
}

/* Aquarium: bubbles rising through the tank. */
#Slowed .skin-backdrop__aquarium {
  position: absolute;
  inset: 0;
}

#Slowed .skin-backdrop__bubble {
  position: absolute;
  bottom: -16px;
  border-radius: 50%;
  border: 1px solid var(--aquarium-aqua, #5ef0e0);
  background: radial-gradient(
    circle at 32% 28%,
    color-mix(in srgb, var(--aquarium-aqua-bright, #b8fff6) 55%, transparent),
    transparent 62%
  );
  animation-name: skin-backdrop-bubble-rise;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  will-change: transform;
}

@keyframes skin-backdrop-bubble-rise {
  from {
    transform: translate(0, 0) scale(0.85);
  }

  to {
    transform: translate(var(--bubble-drift, 6px), calc(var(--skin-backdrop-travel, 760px) * -1))
      scale(1.15);
  }
}

/* Mac OS: Platinum desktop + window frame drawn behind the popup. */
#Slowed .skin-backdrop--macos {
  background-color: var(--macos-desktop, #63639c);
}

#Slowed .skin-backdrop__macos-window {
  position: absolute;
  inset: 6px;
  background-color: var(--macos-face, #dddddd);
  border: 1px solid var(--macos-frame, #000000);
  box-shadow:
    inset 1px 1px 0 0 var(--macos-face-hi, #ffffff),
    inset -1px -1px 0 0 var(--macos-edge, #888888),
    2px 2px 0 0 rgba(0, 0, 0, 0.35);
}

#Slowed .skin-backdrop__macos-titlebar {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 22px;
  padding: 0 4px;
  box-sizing: border-box;
  background-color: var(--macos-face-dim, #cccccc);
  border-bottom: 1px solid var(--macos-frame, #000000);
  box-shadow: inset 0 1px 0 0 var(--macos-face-hi, #ffffff);
}

/* The six-line stripe pattern either side of the window title. */
#Slowed .skin-backdrop__macos-stripes {
  flex: 1 1 auto;
  height: 12px;
  min-width: 8px;
  background-image: repeating-linear-gradient(
    to bottom,
    var(--macos-face-hi, #ffffff) 0,
    var(--macos-face-hi, #ffffff) 1px,
    var(--macos-stripe, #777777) 1px,
    var(--macos-stripe, #777777) 2px
  );
}

#Slowed .skin-backdrop__macos-title {
  flex: 0 0 auto;
  padding: 0 6px;
  font-family: Charcoal, Geneva, Tahoma, var(--font-family-base);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  color: var(--macos-ink, #000000);
  background-color: var(--macos-face-dim, #cccccc);
}

#Slowed .skin-backdrop__macos-box {
  flex: 0 0 auto;
  width: 11px;
  height: 11px;
  box-sizing: border-box;
  background-color: var(--macos-face, #dddddd);
  border: 1px solid var(--macos-frame, #000000);
  box-shadow:
    inset 1px 1px 0 0 var(--macos-face-hi, #ffffff),
    inset -1px -1px 0 0 var(--macos-edge, #888888);
}

/* Collapse and zoom carry their glyph; close is a plain box, as in Platinum. */
#Slowed .skin-backdrop__macos-box--collapse {
  background-image: linear-gradient(
    to bottom,
    transparent 4px,
    var(--macos-edge-dark, #555555) 4px,
    var(--macos-edge-dark, #555555) 5px,
    transparent 5px
  );
}

#Slowed .skin-backdrop__macos-box--zoom {
  background-image: linear-gradient(
      to bottom,
      var(--macos-edge-dark, #555555) 0,
      var(--macos-edge-dark, #555555) 1px,
      transparent 1px
    ),
    linear-gradient(
      to right,
      var(--macos-edge-dark, #555555) 0,
      var(--macos-edge-dark, #555555) 1px,
      transparent 1px
    );
  background-size: 5px 5px;
  background-repeat: no-repeat;
  background-position: 1px 1px;
}

/* Windows XP: Luna window on a plain sky desktop. */
#Slowed .skin-backdrop--winxp {
  background: linear-gradient(to bottom, #3a6ea5, #6ba3e0);
}

#Slowed .skin-backdrop__winxp-window {
  position: absolute;
  inset: 5px;
  border-radius: 8px 8px 2px 2px;
  background-color: var(--winxp-face, #ece9d8);
  /* Luna draws a thick blue frame down the sides and along the bottom. */
  border: 3px solid #0058ee;
  border-top: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}

#Slowed .skin-backdrop__winxp-titlebar {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 28px;
  padding: 0 3px 0 6px;
  box-sizing: border-box;
  border-radius: 6px 6px 0 0;
  background: linear-gradient(
    to bottom,
    #0f66e8 0%,
    #3f8cf3 8%,
    #0e60dd 40%,
    #0a53c8 88%,
    #1a6be8 100%
  );
  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.45);
}

#Slowed .skin-backdrop__winxp-icon {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  background: linear-gradient(135deg, #ffd45e, #e8901a);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}

#Slowed .skin-backdrop__winxp-title {
  flex: 1 1 auto;
  font-family: "Trebuchet MS", Tahoma, var(--font-family-base);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  color: #ffffff;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.45);
}

#Slowed .skin-backdrop__winxp-buttons {
  display: flex;
  align-items: center;
  gap: 2px;
}

#Slowed .skin-backdrop__winxp-button {
  position: relative;
  width: 21px;
  height: 21px;
  border-radius: 3px;
  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, 0.55);
  background: linear-gradient(to bottom, #5c9df5, #1a63d8);
}

#Slowed .skin-backdrop__winxp-button--close {
  background: linear-gradient(to bottom, #f08a76, #c63c22);
}

/* Glyphs: a minimise bar, a maximise box, and the close cross. */
#Slowed .skin-backdrop__winxp-button--min::after {
  content: "";
  position: absolute;
  left: 5px;
  right: 5px;
  bottom: 4px;
  height: 2px;
  background: #ffffff;
}

#Slowed .skin-backdrop__winxp-button--max::after {
  content: "";
  position: absolute;
  inset: 4px;
  border: 2px solid #ffffff;
  border-top-width: 3px;
}

#Slowed .skin-backdrop__winxp-button--close::before,
#Slowed .skin-backdrop__winxp-button--close::after {
  content: "";
  position: absolute;
  top: 9px;
  left: 4px;
  width: 11px;
  height: 2px;
  background: #ffffff;
}

#Slowed .skin-backdrop__winxp-button--close::before {
  transform: rotate(45deg);
}

#Slowed .skin-backdrop__winxp-button--close::after {
  transform: rotate(-45deg);
}

/* Winamp: bevelled grey shell on black. */
#Slowed .skin-backdrop--winamp {
  background-color: #0d0d18;
}

#Slowed .skin-backdrop__winamp-window {
  position: absolute;
  inset: 4px;
  background-color: var(--winamp-frame, #181829);
  border: 1px solid #0d0d18;
  box-shadow:
    inset 1px 1px 0 0 #4a4a70,
    inset -1px -1px 0 0 #0d0d18;
}

/* Winamp 2's main-window titlebar. Metrics follow Webamp's main-window.css
   (github.com/captbaritone/webamp, MIT): 14px bar, 9x9 caption buttons at
   top 3px, options button 6px from the left. Colours are sampled from the
   base skin — indigo chrome, #717186 highlight, #afafbc detailing. */
#Slowed .skin-backdrop__winamp-titlebar {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 14px;
  padding: 0 2px;
  box-sizing: border-box;
  background-color: #39395a;
  border-top: 1px solid #26263d;
  border-bottom: 1px solid #26263d;
  box-shadow: inset 0 1px 0 0 #717186;
}

#Slowed .skin-backdrop__winamp-menu {
  position: relative;
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  margin-left: 4px;
  background-color: #26263d;
  box-shadow: inset 0 0 0 1px #717186;
}

#Slowed .skin-backdrop__winamp-menu::after {
  content: "";
  position: absolute;
  inset: 3px 2px;
  border-top: 1px solid #afafbc;
  border-bottom: 1px solid #afafbc;
}

/* The grip lines: thin, widely spaced, and only part of the bar's height. */
#Slowed .skin-backdrop__winamp-stripes {
  flex: 1 1 auto;
  height: 8px;
  min-width: 6px;
  background-image: repeating-linear-gradient(
    to bottom,
    #afafbc 0,
    #afafbc 1px,
    #39395a 1px,
    #39395a 2px
  );
}

#Slowed .skin-backdrop__winamp-title {
  flex: 0 0 auto;
  padding: 0 4px;
  font-family: Tahoma, Geneva, var(--font-family-base);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.18em;
  line-height: 1;
  text-transform: uppercase;
  color: #d8d8e4;
}

#Slowed .skin-backdrop__winamp-button {
  position: relative;
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  background-color: #39395a;
  box-shadow:
    inset 1px 1px 0 0 #717186,
    inset -1px -1px 0 0 #181829;
}

/* Minimise bar, windowshade bar, and the close cross. */
#Slowed .skin-backdrop__winamp-button--min::after,
#Slowed .skin-backdrop__winamp-button--shade::after {
  content: "";
  position: absolute;
  left: 2px;
  right: 2px;
  height: 1px;
  background: #afafbc;
}

#Slowed .skin-backdrop__winamp-button--min::after {
  bottom: 2px;
}

#Slowed .skin-backdrop__winamp-button--shade::after {
  top: 4px;
}

#Slowed .skin-backdrop__winamp-button--close::before,
#Slowed .skin-backdrop__winamp-button--close::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 1px;
  width: 7px;
  height: 1px;
  background: #afafbc;
}

#Slowed .skin-backdrop__winamp-button--close::before {
  transform: rotate(45deg);
}

#Slowed .skin-backdrop__winamp-button--close::after {
  transform: rotate(-45deg);
}

/* Dracula: oversized storm clouds crossing the crypt. */
#Slowed .skin-backdrop__dracula {
  position: absolute;
  inset: 0;
}

#Slowed .skin-backdrop__dracula-cloud {
  position: absolute;
  left: -58%;
  display: block;
  border-radius: 50%;
  background:
    radial-gradient(
      ellipse at 19% 62%,
      rgba(122, 51, 60, 0.48) 0 22%,
      transparent 56%
    ),
    radial-gradient(
      ellipse at 46% 43%,
      rgba(76, 28, 35, 0.58) 0 29%,
      transparent 62%
    ),
    radial-gradient(
      ellipse at 76% 61%,
      rgba(139, 13, 22, 0.32) 0 25%,
      transparent 58%
    );
  filter: blur(10px);
  animation-name: skin-backdrop-dracula-cloud-drift;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  will-change: transform;
}

@keyframes skin-backdrop-dracula-cloud-drift {
  from {
    transform: translate3d(-18%, 0, 0) scale(0.96);
  }

  to {
    transform: translate3d(
        calc(var(--popup-width, 525px) + 18%),
        var(--cloud-drift, 18px),
        0
      )
      scale(1.04);
  }
}

/* Alien: the head takes the place of the Slow Control knob. */
#Slowed.alien-mode .slider__point--active:after {
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 28%27%3E%3Cpath fill=%27%237cff1a%27 d=%27M12 1c6.2 0 9.6 4.6 9.6 10.2 0 6.9-4.7 13-9.6 16.3C7.1 24.2 2.4 18.1 2.4 11.2 2.4 5.6 5.8 1 12 1Z%27/%3E%3Cpath fill=%27%23030d03%27 d=%27M7.2 11.4c1.9.2 3.6 1.4 4.2 3-1.7 1-4 .6-5.2-1-.7-.9-.6-2.1 1-2Z%27/%3E%3Cpath fill=%27%23030d03%27 d=%27M16.8 11.4c-1.9.2-3.6 1.4-4.2 3 1.7 1 4 .6 5.2-1 .7-.9.6-2.1-1-2Z%27/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border-radius: 0;
  transform: scale(3.6);
  filter: drop-shadow(0 0 2px rgba(124, 255, 26, 0.6));
}

@media (prefers-reduced-motion: reduce) {
  #Slowed .skin-backdrop__dracula-cloud {
    animation: none;
  }
}

/* Window chrome needs room: clear the titlebar and the desktop edge. */
#Slowed.macos-mode > .popup {
  padding-top: calc(var(--spacing-3) + 26px);
  padding-left: calc(var(--spacing-5) + 6px);
  padding-right: calc(var(--spacing-5) + 6px);
  padding-bottom: calc(var(--spacing-5) + 6px);
}

#Slowed.winxp-mode > .popup {
  padding-top: calc(var(--spacing-3) + 32px);
  padding-left: calc(var(--spacing-5) + 8px);
  padding-right: calc(var(--spacing-5) + 8px);
  padding-bottom: calc(var(--spacing-5) + 8px);
}

#Slowed.winamp-mode > .popup {
  padding-top: calc(var(--spacing-3) + 24px);
  padding-left: calc(var(--spacing-5) + 5px);
  padding-right: calc(var(--spacing-5) + 5px);
  padding-bottom: calc(var(--spacing-5) + 5px);
}

@media (prefers-reduced-motion: reduce) {
  #Slowed .skin-backdrop__matrix-column,
  #Slowed .skin-backdrop__bubble {
    animation: none;
  }

  #Slowed .skin-backdrop__matrix-column {
    opacity: 0.12;
  }
}

/* Alien: short laser bursts appear at randomized positions and angles. */
#Slowed .skin-backdrop__alien-lasers {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

#Slowed .skin-backdrop__alien-laser {
  position: absolute;
  display: block;
  height: 2px;
  border-radius: 999px;
  transform: rotate(var(--laser-angle, 0deg)) scaleX(0.12);
  transform-origin: left center;
  background: linear-gradient(
    90deg,
    transparent,
    #54d912 10%,
    #edffb8 48%,
    #7cff1a 86%,
    transparent
  );
  box-shadow: 0 0 4px #7cff1a, 0 0 9px rgba(124, 255, 26, 0.72);
  opacity: 0;
  animation-name: alien-laser-random-flash;
  animation-timing-function: ease-out;
  animation-fill-mode: both;
  will-change: transform, opacity;
}

@keyframes alien-laser-random-flash {
  0% {
    opacity: 0;
    transform: rotate(var(--laser-angle, 0deg)) scaleX(0.12);
  }

  24%,
  68% {
    opacity: 0.96;
  }

  100% {
    opacity: 0;
    transform: rotate(var(--laser-angle, 0deg)) scaleX(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  #Slowed .skin-backdrop__alien-laser {
    display: none;
  }
}

/* Pinned to the bottom of the viewport rather than the end of the document.
   The popup is routinely taller than the 600px Chrome gives it, and the
   detached panel cancels document-level wheel scrolling outright, so a bar
   sitting at the end of the flow was simply unreachable. */
#Slowed .debug-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  box-sizing: border-box;
  width: 100%;
  max-width: var(--popup-width, 525px);
  min-width: 0;
  padding: 5px var(--spacing-2);
  background: var(--color-gray-100);
  border-top: 1px solid var(--color-gray-200);
  font-family: ui-monospace, "SFMono-Regular", monospace;
  font-size: 10px;
  line-height: 1;
  color: var(--color-gray-500);
  letter-spacing: 0;
  overflow: hidden;
}

#Slowed .debug-bar__group {
  display: flex;
  align-items: center;
  gap: var(--spacing-1);
  flex-shrink: 0;
  min-width: 0;
}

#Slowed .debug-bar__group--grow {
  flex: 1 1 0;
  min-width: 0;
}

#Slowed .debug-bar__sep {
  width: 1px;
  height: 12px;
  background: var(--color-gray-300);
  flex-shrink: 0;
}

#Slowed .debug-bar__segmented {
  display: inline-flex;
  align-items: stretch;
  box-sizing: border-box;
  flex-shrink: 0;
  height: 20px;
  padding: 1px;
  border: 1px solid var(--color-gray-300);
  border-radius: 999px;
  background: var(--color-white);
}

#Slowed .debug-bar__segmented--busy {
  opacity: 0.55;
  pointer-events: none;
}

#Slowed .debug-bar__segment {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border: none;
  background: none;
  padding: 0 7px;
  font: inherit;
  font-weight: 500;
  line-height: 1;
  color: var(--color-gray-500);
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
}

#Slowed .debug-bar__segment--active {
  color: var(--color-white);
  background: var(--color-gray-800);
}

#Slowed .debug-bar__toggle {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  flex-shrink: 0;
  height: 20px;
  padding: 0 8px;
  border: 1px solid var(--color-gray-300);
  border-radius: 999px;
  background: var(--color-white);
  font: inherit;
  font-weight: 500;
  line-height: 1;
  color: var(--color-gray-500);
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

#Slowed .debug-bar__toggle--on {
  color: var(--color-white);
  background: var(--color-gray-800);
  border-color: var(--color-gray-800);
}

#Slowed .debug-bar__toggle:hover:not(:disabled):not(.debug-bar__toggle--on) {
  color: var(--color-black);
  border-color: var(--color-gray-400);
}

#Slowed .debug-bar__toggle:disabled {
  opacity: 0.55;
  cursor: wait;
}

#Slowed .debug-bar__segment:focus-visible, #Slowed .debug-bar__toggle:focus-visible, #Slowed .debug-bar__action:focus-visible {
  outline: 2px solid var(--color-gray-400);
  outline-offset: 1px;
}

/* Shared action cluster. */
#Slowed .debug-bar__actions {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  flex-shrink: 0;
}

#Slowed .debug-bar__action {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 20px;
  height: 20px;
  padding: 0 4px;
  border: none;
  border-radius: 4px;
  background: transparent;
  font: inherit;
  color: var(--color-gray-500);
  cursor: pointer;
  transition: background 0.1s ease, color 0.1s ease;
}

#Slowed .debug-bar__action:hover:not(:disabled) {
  background: var(--color-gray-200);
  color: var(--color-black);
}

#Slowed .debug-bar__action:disabled {
  opacity: 0.45;
  cursor: wait;
}

#Slowed .debug-bar__action--done, #Slowed .debug-bar__action--done:hover:not(:disabled) {
  color: var(--color-gray-400);
  background: transparent;
  cursor: default;
}

#Slowed .debug-bar__chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  max-width: 100%;
  padding: 1px 1px 1px 6px;
  border: 1px solid var(--color-gray-300);
  border-radius: 6px;
  background: var(--color-white);
}

#Slowed .debug-bar__chip--busy {
  opacity: 0.55;
}

#Slowed .debug-bar__hook-icon {
  display: block;
  flex-shrink: 0;
  width: 11px;
  height: 11px;
  background: currentColor;
  color: var(--color-gray-500);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

#Slowed .debug-bar__chip-value {
  appearance: none;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  font: inherit;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--color-gray-600);
  cursor: pointer;
}

#Slowed .debug-bar__chip-value:hover:not(:disabled) {
  color: var(--color-black);
}

#Slowed .debug-bar__chip-value:disabled {
  cursor: default;
}

#Slowed .debug-bar__chip-value--copied {
  color: var(--color-gray-400);
}

#Slowed .debug-bar__chip .debug-bar__actions {
  padding-left: 1px;
  border-left: 1px solid var(--color-gray-200);
  margin-left: 2px;
}

#Slowed .debug-bar__error {
  min-width: 0;
  max-width: 100%;
  color: #b42318;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#Slowed .debug-bar__hash {
  flex: 0 0 auto;
  color: var(--color-gray-400);
  user-select: text;
  white-space: nowrap;
}




/*# sourceMappingURL=popup.css.map*/