@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);
  --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.dark-mode {
  /*
    Dark: the Color skin on slowed.app's dark theme (slowed-web
    main/stylesheets/system/colors.css, html.dark-mode). A black page, the
    gray ramp turned upside down, and the pinks one step quieter, still
    running light to dark. Keep the two files in step.
  */
  color-scheme: dark;

  --pink-50: #f8f2f9;
  --pink-100: #f1e6f2;
  --pink-200: #e3cee4;
  --pink-300: #d4b5d7;
  --pink-400: #c69dc9;
  --pink-500: #b884bc;
  --pink-600: #936a96;
  --pink-700: #6e4f71;
  --pink-800: #4a354b;
  --pink-900: #251a26;

  background-color: #000000;

  --color-black: var(--white);
  --color-white: #000000;
  --color-page: #000000;

  --color-gray-50: var(--gray-900);
  --color-gray-100: var(--gray-800);
  --color-gray-200: var(--gray-700);
  --color-gray-300: var(--gray-600);
  --color-gray-400: var(--gray-500);
  --color-gray-500: var(--gray-400);
  --color-gray-600: var(--gray-300);
  --color-gray-700: var(--gray-200);
  --color-gray-800: var(--gray-100);
  --color-gray-900: var(--gray-50);

  /* The accent ramp follows the pinks above through the Color mapping. */
  --accent-glow: rgba(184, 132, 188, 0.45);
  /* Effect tiles carry white ink here, so their fill sits one step deeper. */
  --effect-accent: var(--pink-600);
  --mode-tile-selected-ink: var(--white);
  --chip-bevel-edge: rgba(0, 0, 0, 0.45);
  --ambiance-fill: rgba(184, 132, 188, 0.22);
  --rainy-fill: rgba(184, 132, 188, 0.22);
  --coffee-fill: rgba(184, 132, 188, 0.22);
}

#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);
  --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);
  --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);
  --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);
  --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);
  --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.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;
  --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.maximalist-mode {
  /*
    Maximalist: a loud print collage — peach paper, poster red, electric
    blue, highlighter lime and black marker, with chunky offset shadows.
    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;

  --maximalist-paper: #fde4cc;
  --maximalist-card: #fff4e8;
  --maximalist-card-hover: #ffeadb;
  --maximalist-edge: #f1c7a3;
  --maximalist-ink: #141414;
  --maximalist-red: #f23b2e;
  --maximalist-red-hover: #ff5446;
  --maximalist-red-dim: #cf2a1f;
  --maximalist-blue: #3a3ae6;
  --maximalist-blue-dim: #2a2ab8;
  --maximalist-lime: #d8f53a;
  --maximalist-lime-hover: #e4ff55;
  --maximalist-pink: #ff7fb0;

  background-color: var(--maximalist-paper);

  --color-black: var(--maximalist-ink);
  --color-white: var(--maximalist-card);
  --color-page: var(--maximalist-paper);
  --color-locked-surface: #f6d6ba;

  --color-gray-50: #fff8f1;
  --color-gray-100: #fcebdc;
  --color-gray-200: var(--maximalist-edge);
  --color-gray-300: #e0ae88;
  --color-gray-400: #b98a68;
  --color-gray-500: #7d5c47;
  --color-gray-600: #5e4434;
  --color-gray-700: #3f2e24;
  --color-gray-800: #2a1f19;
  --color-gray-900: var(--maximalist-ink);

  --accent-soft: #e3e3ff;
  --accent-soft-hover: #d2d2ff;
  --accent-soft-active: #bdbdff;
  --accent-mid: #7a7af0;
  --accent: var(--maximalist-blue);
  --accent-hover: var(--maximalist-blue-dim);
  --accent-active: #1f1f8f;
  --accent-ink: #15156e;
  --accent-on: #ffffff;
  --accent-glow: rgba(58, 58, 230, 0.4);

  /* Selected tiles are poster red; selected chips are highlighter lime. */
  --effect-accent: var(--maximalist-red);
  --mode-tile-bg: var(--maximalist-card);
  --mode-tile-active-bg: var(--maximalist-card-hover);
  --mode-tile-ink: var(--maximalist-ink);
  --mode-tile-active-ink: var(--maximalist-ink);
  --mode-tile-selected-bg: var(--maximalist-red);
  --mode-tile-selected-bg-hover: var(--maximalist-red-hover);
  --mode-tile-selected-ink: #ffffff;
  --chip-bevel-edge: rgba(255, 255, 255, 0.6);
  --on-accent-ink: #ffffff;
  --selected-edge: var(--maximalist-ink);
  --mood-chip-bg: var(--maximalist-card);
  --mood-chip-hover-bg: var(--maximalist-card-hover);
  --mood-chip-ink: var(--maximalist-ink);
  --mood-chip-selected-bg: var(--maximalist-lime);
  --mood-chip-selected-bg-hover: var(--maximalist-lime-hover);
  --mood-chip-selected-ink: var(--maximalist-ink);
  --ambiance-field: var(--maximalist-blue);
  --ambiance-edge: #1f1f8f;
  --ambiance-edge-focus: var(--maximalist-lime);
  --ambiance-fill: color-mix(in srgb, var(--maximalist-lime) 24%, transparent);
  --ambiance-ink: #ffffff;
  /* Rainy Day (Maximalist): blue ink bleeding into pink. */
  --rainy-field: #2626b0;
  --rainy-edge: #15156e;
  --rainy-edge-focus: var(--maximalist-pink);
  --rainy-fill: color-mix(in srgb, var(--maximalist-pink) 26%, transparent);
  --rainy-ink: #ffe3ef;
  --rain-streak: rgba(255, 190, 220, 0.85);
  /* Coffee Bar (Maximalist): poster red. */
  --coffee-field: var(--maximalist-red-dim);
  --coffee-edge: #8f1810;
  --coffee-edge-focus: var(--maximalist-lime);
  --coffee-fill: color-mix(in srgb, var(--maximalist-lime) 22%, transparent);
  --coffee-ink: #fff1e4;
  --coffee-steam: rgba(255, 255, 255, 0.92);
  --seashore-foam: rgba(216, 245, 58, 0.85);
  /* Berghain (Maximalist): black marker, lime strobe. */
  --berghain-field: #141414;
  --berghain-edge: #3a3a3a;
  --berghain-edge-focus: var(--maximalist-lime);
  --berghain-fill: color-mix(in srgb, var(--maximalist-lime) 20%, transparent);
  --berghain-ink: var(--maximalist-lime);
  --berghain-strobe: rgba(216, 245, 58, 0.4);
  --berghain-dust: rgba(255, 127, 176, 0.55);
  /* Hotel Lounge: warm red room. */
  --lounge-field: #7a1a12;
  --lounge-edge: #4a0f0a;
  --lounge-edge-focus: #ffc07a;
  --lounge-fill: color-mix(in srgb, #ffc07a 18%, transparent);
  --lounge-ink: #ffe2c2;
  --lounge-lamp: rgba(255, 208, 140, 0.55);
  --lounge-mote: rgba(255, 224, 178, 0.6);
  /* Cocktail Bar: pink neon on blue. */
  --cocktail-field: #1f1f8f;
  --cocktail-edge: #121260;
  --cocktail-edge-focus: var(--maximalist-pink);
  --cocktail-fill: color-mix(in srgb, var(--maximalist-pink) 20%, transparent);
  --cocktail-ink: #ffd6e7;
  --cocktail-neon: rgba(255, 127, 176, 0.4);
  --cocktail-neon-alt: rgba(216, 245, 58, 0.3);
  --cocktail-sheen: rgba(255, 255, 255, 0.16);
  --cocktail-fizz: rgba(255, 240, 248, 0.8);
  --mood-panel-bg-active: var(--maximalist-card);
}

#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);
  --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);
  --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 Platinum face and accents. 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);
  --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.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,
#Slowed.maximalist-mode .mode-tile--toggle.mode-tile--active,
#Slowed.maximalist-mode .modes-grid--video .mode-tile--toggle.mode-tile--active,
#Slowed.maximalist-mode .modes-grid--video .mode-tile--toggle.mode-tile--active .mode-tile__label-text,
#Slowed.maximalist-mode .mode-tile--adjustable.mode-tile--active,
#Slowed.maximalist-mode .mode-tile--adjustable.mode-tile--active:hover,
#Slowed.maximalist-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.neoy2k-mode .mood__chip--selected,
#Slowed.dracula-mode .mood__chip--selected,
#Slowed.alien-mode .mood__chip--selected,
#Slowed.macos-mode .mood__chip--selected,
#Slowed.maximalist-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.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,
#Slowed.maximalist-mode .mode-tile--ambiance.mode-tile--active,
#Slowed.maximalist-mode .mode-tile--ambiance.mode-tile--active:hover,
#Slowed.maximalist-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.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,
#Slowed.maximalist-mode .subscription-status-button--unlock-depleted,
#Slowed.maximalist-mode .subscription-status-button--unlock-depleted:hover:not(:disabled),
#Slowed.maximalist-mode .subscription-status-button--unlock-depleted:active:not(:disabled),
#Slowed.maximalist-mode .subscription-status-button--glow,
#Slowed.maximalist-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;
  border-radius: 20px;
}

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

#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);
}

/* One-line ask to rate Slowed. Sits above the bottom bar, never over the
   controls, and goes away for a month on dismiss. */
#Slowed .rate-banner {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  width: 100%;
  margin: var(--spacing-2) 0 0 0;
  padding: var(--spacing-2) var(--spacing-2) var(--spacing-2) var(--spacing-3);
  border: 1px solid var(--color-gray-200);
  border-radius: 10px;
  background-color: var(--color-gray-50);
  color: var(--color-black);
  font-family: var(--font-family-base);
  font-size: var(--font-size-xsmall);
  line-height: 1.3;
  animation: rate-banner-in 0.28s ease-out both;
}

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

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

#Slowed .rate-banner__stars {
  display: inline-flex;
  flex-shrink: 0;
  gap: 1px;
  color: var(--accent);
}

#Slowed .rate-banner__stars svg {
  display: block;
  fill: currentColor;
}

/* The product updates banner is the same card with a spark instead of
   stars. Only one of the two is ever on screen. */
#Slowed .update-banner__icon {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--accent);
}

#Slowed .update-banner__icon svg {
  display: block;
  fill: currentColor;
}

#Slowed .rate-banner__text {
  flex: 1;
  min-width: 0;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#Slowed .rate-banner__actions {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: var(--spacing-1);
}

#Slowed .rate-banner__button {
  appearance: none;
  display: inline-flex;
  align-items: center;
  height: 24px;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 0 var(--spacing-2);
  font: inherit;
  font-weight: 500;
  cursor: pointer;
  background: transparent;
  color: var(--color-gray-500);
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}

#Slowed .rate-banner__button:hover {
  color: var(--color-black);
  background-color: var(--color-gray-100);
}

#Slowed .rate-banner__button--primary {
  padding: 0 var(--spacing-3);
  border-color: var(--accent-soft-hover);
  background-color: var(--accent-soft);
  color: var(--accent-ink);
  font-weight: 600;
}

#Slowed .rate-banner__button--primary:hover {
  color: var(--accent-ink);
  border-color: var(--accent-soft-active);
  background-color: var(--accent-soft-hover);
}

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

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

#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;
  overflow-anchor: none;
}

/* While a sheet is up, the controls behind it are pinned to a fixed height and
   frozen. This used to be overflow-y: auto, which made the region scrollable
   exactly when the sheet covered it — so the controls slid out from under a
   sheet that stays put. Nothing behind a sheet scrolls; close it first. */
#Slowed .content__push-shell--mood-open .content__push {
  overflow: hidden;
  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);
  /* Room for any sheet (Skins, Advanced, Feedback, Studio: about 120px,
     plus the 40px fade over the controls) where the controls are short:
     on Spotify, Slow Control alone. The panel keeps one height whether a
     sheet is open or not; the controls sit at the top of the room. */
  align-content: start;
  min-height: 168px;
}

#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);
}

/* Pitch Lock, Fast Control and Reset under the Slow Control slider, as pills
   (the Moods sheet's chips), the way Slowed Studio lays them out. */
#Slowed .content__options {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: var(--spacing-3);
}

#Slowed .content__option svg {
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
}

/* The chips are disabled-looking while locked, but still take the click:
   it opens the upgrade. */
#Slowed .content__option.mood__chip--locked {
  cursor: pointer;
}

#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: 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: 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;
  box-sizing: border-box;
}

#Slowed .subscription-status-button--unlock {
  color: var(--color-black);
  background: var(--color-gray-100);
  box-shadow: none;
  justify-items: center;
  /* Keep the stacked labels centred while width animates between steps. */
  justify-content: center;
  /* Width is set from the active label in popup-header.jsx so the pill can
     grow and shrink as the rotating copy changes. */
  transition:
    background-color 0.15s ease,
    width 0.35s ease;
}

#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;
}

@media (prefers-reduced-motion: reduce) {
  #Slowed .subscription-status-button--unlock {
    transition: background-color 0.15s ease;
  }

  #Slowed .subscription-status-button__label {
    transition: none;
  }
}

/* Active label sits in place; every other label parks below so each step
   (including the wrap back to Unlock PRO) exits down and enters from under. */
#Slowed .subscription-status-button__label--default, #Slowed .subscription-status-button__label--trial-mode, #Slowed .subscription-status-button__label--trial-days, #Slowed .subscription-status-button__label--usage-reset, #Slowed .subscription-status-button__label--promo {
  opacity: 0;
  transform: translateY(40%);
}

#Slowed .subscription-status-button--step-0
  .subscription-status-button__label--default, #Slowed .subscription-status-button--step-1
  .subscription-status-button__label--trial-mode, #Slowed .subscription-status-button--step-2
  .subscription-status-button__label--trial-days, #Slowed .subscription-status-button--step-3
  .subscription-status-button__label--usage-reset, #Slowed .subscription-status-button--step-4
  .subscription-status-button__label--promo {
  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);
  font-weight: 400;
  transition: color 0.15s ease;
}

#Slowed .actions a.actions__link--active {
  font-weight: 600;
  color: var(--color-black);
}

#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);
}

/* Studio: the footer's one special item, set as a tag in the skin's ink with
   its surface for the letters, so it reads as a white tag on Dark and a
   black one on the light skins. The tag is the inner label, so the row's
   separator dot still sits before it, outside the tag. */
#Slowed .actions a.actions__tag {
  display: inline-flex;
  align-items: center;
}

#Slowed .actions__tag-label {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--color-black);
  color: var(--color-white);
  font-weight: 700;
  font-size: 0.85em;
  line-height: 1.4;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease;
}

#Slowed .actions a.actions__tag:hover .actions__tag-label {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--color-black) 30%, transparent);
}

#Slowed .actions a.actions__tag.actions__link--active .actions__tag-label, #Slowed .actions a.actions__tag:focus-visible .actions__tag-label {
  box-shadow:
    0 0 0 2px var(--color-white),
    0 0 0 3px var(--color-black);
}

/* Gate shown when Slowed is opened off YouTube / YouTube Music. */
#Slowed .popup--unsupported {
  padding: var(--spacing-5);
  box-sizing: border-box;
}

#Slowed .unsupported-gate {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
  font-family: var(--font-family-base);
}

#Slowed .unsupported-gate__brand {
  display: flex;
  justify-content: center;
  color: var(--color-black);
}

#Slowed .unsupported-gate__brand svg {
  width: auto;
  height: 26px;
}

#Slowed .unsupported-gate__hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-6) var(--spacing-5);
  border-radius: 16px;
  background: var(--accent-soft);
  text-align: center;
}

#Slowed .unsupported-gate__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: var(--spacing-1);
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-on);
  box-shadow: 0 6px 18px var(--accent-glow);
}

#Slowed .unsupported-gate__title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--color-black);
}

#Slowed .unsupported-gate__text {
  margin: 0;
  max-width: 300px;
  font-size: 0.82rem;
  font-weight: 450;
  line-height: 1.45;
  color: var(--color-gray-600);
}

#Slowed .unsupported-gate__ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--spacing-2);
  margin-top: var(--spacing-3);
}

/* A quieter way out for a song that is a file rather than a video. */
#Slowed .unsupported-gate__cta {
  border: 1px solid var(--color-gray-300);
  border-radius: 999px;
  padding: 0.5rem 1.1rem;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-black);
  background: var(--color-white);
  cursor: pointer;
  transition:
    background 0.15s ease,
    border-color 0.15s ease;
}

#Slowed .unsupported-gate__cta:hover {
  border-color: var(--color-gray-500);
}

#Slowed .unsupported-gate__cta--primary {
  border-color: transparent;
  color: var(--on-accent-ink);
  background: var(--accent);
}

#Slowed .unsupported-gate__cta--primary:hover {
  border-color: transparent;
  background: var(--accent-hover);
}

#Slowed .unsupported-gate__cta:focus-visible, #Slowed .unsupported-gate__plan-button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

#Slowed .unsupported-gate__plan {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-3);
  padding: var(--spacing-3) var(--spacing-4);
  border: 1px solid var(--color-gray-200);
  border-radius: 12px;
}

#Slowed .unsupported-gate__plan-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

#Slowed .unsupported-gate__plan-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-black);
}

#Slowed .unsupported-gate__plan-detail {
  font-size: 0.75rem;
  color: var(--color-gray-600);
}

#Slowed .unsupported-gate__plan-error {
  font-size: 0.75rem;
  color: var(--color-error, #c0392b);
}

#Slowed .unsupported-gate__plan-button {
  flex-shrink: 0;
  border: 1px solid var(--color-gray-300);
  border-radius: 999px;
  padding: 0.4rem 0.9rem;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-black);
  background: var(--color-white);
  cursor: pointer;
}

#Slowed .unsupported-gate__plan-button:hover:not(:disabled) {
  border-color: var(--color-gray-500);
}

#Slowed .unsupported-gate__plan-button:disabled {
  cursor: progress;
  opacity: 0.7;
}

#Slowed .unsupported-gate__plan-button--unlock {
  border-color: transparent;
  color: var(--accent-ink);
  background: var(--accent-soft);
}

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

#Slowed .unsupported-gate__links {
  padding-top: var(--spacing-1);
}

#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--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__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. First open rides the panel scroll; switching
   between Moods / Skins / Advanced / Feedback remounts this class in place
   so only the content fades, not the whole panel. */
#Slowed .mood--open {
  --mood-panel-fade: var(--mood-panel-bg-active);
  animation: mood-sheet-in 0.24s ease-out both;
}

@keyframes mood-sheet-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

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

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

#Slowed .mood__title-row {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: 0.4em;
}

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

#Slowed .mood__version {
  appearance: none;
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--color-gray-500);
  cursor: pointer;
}

#Slowed .mood__version:hover {
  color: var(--color-gray-900);
}

#Slowed .mood__version:focus-visible {
  outline: none;
  color: var(--color-gray-900);
}

#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;
}

/* Studio's chips are links to another page; keep the chip look. */
#Slowed a.mood__chip, #Slowed a.mood__chip:hover {
  text-decoration: none;
}

#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);
}

/* Per-skin header marks. Every skin that does not appear here keeps the
   plain wordmark, so this file only carries the exceptions. */

/* Applying a mood names it where the mark sits. Both layers run the same
   2200ms timeline in opposite directions, so the name fades up as the mark
   fades out and the mark is fully back before the overlay unmounts — no
   element ever appears or disappears on a frame boundary. The mark keeps its
   place in flow, so nothing in the header moves. */
#Slowed .skin-logo__swap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

#Slowed .skin-logo__swap-mark {
  animation: skin-logo-mark-swap 2200ms ease-in-out both;
}

#Slowed .skin-logo__swap-name {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--color-black);
  white-space: nowrap;
  pointer-events: none;
  animation: skin-logo-name-swap 2200ms ease-in-out both;
}

@keyframes skin-logo-mark-swap {
  0% {
    opacity: 1;
  }
  14%, 70% {
    opacity: 0;
  }
  92%, 100% {
    opacity: 1;
  }
}

@keyframes skin-logo-name-swap {
  0% {
    opacity: 0;
    transform: translateY(3px);
  }
  16%, 68% {
    opacity: 1;
    transform: translateY(0);
  }
  86%, 100% {
    opacity: 0;
    transform: translateY(-2px);
  }
}

@media (prefers-reduced-motion: reduce) {
  #Slowed .skin-logo__swap-mark, #Slowed .skin-logo__swap-name {
    animation-duration: 1ms;
  }
}

/* Alien: the saucer drops in, lifts the wordmark out of the header, holds an
   empty sky, then puts it back. One long CSS cycle — mostly idle, and no
   animation loop running in script while the popup sits open.

   Everything stays inside the title block: the header is the first row in the
   popup, so anything drawn above it is simply cut off by the window edge. */
#Slowed .skin-logo__alien {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

#Slowed .skin-logo__ufo {
  position: absolute;
  top: -2px;
  left: 50%;
  width: 34px;
  height: 12px;
  margin-left: -17px;
  opacity: 0;
  animation: skin-logo-ufo 26s ease-in-out infinite;
}

#Slowed .skin-logo__ufo-hull {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 5px;
  border-radius: 50%;
  background: linear-gradient(
    to bottom,
    var(--alien-secondary, #8fd48f),
    var(--alien-border, #2c6e2c)
  );
  box-shadow: 0 0 6px var(--alien-bio, #7cff1a);
}

#Slowed .skin-logo__ufo-dome {
  position: absolute;
  left: 50%;
  bottom: 3px;
  width: 15px;
  height: 8px;
  margin-left: -7.5px;
  border-radius: 8px 8px 0 0;
  background: radial-gradient(
    circle at 50% 90%,
    var(--alien-bio-bright, #ccffb0),
    var(--alien-bio, #7cff1a) 60%,
    transparent 100%
  );
}

#Slowed .skin-logo__beam {
  position: absolute;
  top: 8px;
  left: 50%;
  width: 0;
  height: 0;
  margin-left: -20px;
  opacity: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-top: 24px solid var(--alien-bio, #7cff1a);
  filter: blur(2px);
  animation: skin-logo-beam 26s ease-in-out infinite;
}

#Slowed .skin-logo__abductee {
  animation: skin-logo-abductee 26s ease-in-out infinite;
}

@keyframes skin-logo-ufo {
  0%, 8% {
    opacity: 0;
    transform: translateY(-12px);
  }
  14%, 46% {
    opacity: 1;
    transform: translateY(0);
  }
  54%, 100% {
    opacity: 0;
    transform: translateY(-12px);
  }
}

@keyframes skin-logo-beam {
  0%, 14% {
    opacity: 0;
  }
  20%, 42% {
    opacity: 0.18;
  }
  50%, 100% {
    opacity: 0;
  }
}

@keyframes skin-logo-abductee {
  0%, 18% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
  /* Lifted into the saucer. */
  30%, 40% {
    transform: translateY(-14px) scale(0.35);
    opacity: 0;
  }
  /* Sky is empty for a while, then it comes back. */
  46% {
    transform: translateY(-14px) scale(0.35);
    opacity: 0;
  }
  56%, 100% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  #Slowed .skin-logo__ufo, #Slowed .skin-logo__beam, #Slowed .skin-logo__abductee {
    animation: none;
  }
  #Slowed .skin-logo__ufo, #Slowed .skin-logo__beam {
    opacity: 0;
  }
}

/* Dracula: the wordmark bleeds once, shortly after the popup opens — three
   drops staggered so the bleed reads as one event rather than a loop, then
   it is over and the header settles. The header row keeps its height: the
   drops are absolutely positioned and the run-off is drawn over the rule
   below the header. */
#Slowed .skin-logo__dracula {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

#Slowed .skin-logo__drip {
  position: absolute;
  bottom: 0;
  width: 3px;
  height: 3px;
  border-radius: 0 0 50% 50%;
  background: linear-gradient(
    to bottom,
    var(--dracula-blood, #c1121f),
    var(--dracula-blood-dim, #8b0d16)
  );
  opacity: 0;
  pointer-events: none;
  /* Runs once: `both` holds the final frame, which is fully faded. */
  animation: skin-logo-drip 3.2s ease-in both;
}

#Slowed .skin-logo__drip--1 {
  left: 28%;
  animation-delay: 0s;
}

#Slowed .skin-logo__drip--2 {
  left: 52%;
  width: 4px;
  animation-delay: 0.7s;
}

#Slowed .skin-logo__drip--3 {
  left: 71%;
  animation-delay: 1.5s;
}

@keyframes skin-logo-drip {
  0% {
    opacity: 0;
    transform: translateY(0) scaleY(0.4);
  }
  /* Gathers at the edge... */
  8% {
    opacity: 1;
    transform: translateY(0) scaleY(1);
  }
  14% {
    transform: translateY(1px) scaleY(1.6);
  }
  /* ...then runs off and fades out. */
  34% {
    opacity: 1;
    transform: translateY(14px) scaleY(2.4);
  }
  46%, 100% {
    opacity: 0;
    transform: translateY(20px) scaleY(2.4);
  }
}

@media (prefers-reduced-motion: reduce) {
  #Slowed .skin-logo__drip {
    animation: none;
    opacity: 0;
  }
}

/* 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);
  }
}

/* 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;
  }
}

@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;
  }
}

/* Maximalist skin: collage backdrop, misregistered wordmark, poster-red
   titles and chunky offset shadows. Colors come from the
   --maximalist-* tokens in system/colors.css. */

#Slowed .skin-backdrop__maximalist {
  position: absolute;
  inset: 0;
}

#Slowed .skin-backdrop__maximalist-block {
  position: absolute;
  transform: rotate(var(--block-rotate, 0deg));
}

/* Grainy blue-to-pink, like the risograph blocks in the reference. */
#Slowed .skin-backdrop__maximalist-block--gradient {
  opacity: 0.7;
  background:
    radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.25), transparent 55%),
    linear-gradient(
      135deg,
      var(--maximalist-blue, #3a3ae6) 0%,
      #7a5ad8 45%,
      var(--maximalist-pink, #ff7fb0) 100%
    );
}

#Slowed .skin-backdrop__maximalist-block--red {
  opacity: 0.85;
  background: var(--maximalist-red, #f23b2e);
}

#Slowed .skin-backdrop__maximalist-block--halftone {
  opacity: 0.35;
  background-image: radial-gradient(
    var(--maximalist-ink, #141414) 1.3px,
    transparent 1.6px
  );
  background-size: 7px 7px;
}

#Slowed .skin-backdrop__maximalist-scribble {
  position: absolute;
  overflow: visible;
  stroke-linecap: round;
  stroke-linejoin: round;
  animation: skin-backdrop-maximalist-boil 0.5s steps(1) infinite;
}

#Slowed .skin-backdrop__maximalist-scribble path {
  stroke-width: 3;
}

#Slowed .skin-backdrop__maximalist-scribble--lime {
  stroke: var(--maximalist-lime, #d8f53a);
  opacity: 0.95;
}

#Slowed .skin-backdrop__maximalist-scribble--lime path {
  stroke-width: 4;
}

#Slowed .skin-backdrop__maximalist-scribble--blue {
  stroke: var(--maximalist-blue, #3a3ae6);
  opacity: 0.8;
}

#Slowed .skin-backdrop__maximalist-scribble--ink {
  stroke: var(--maximalist-ink, #141414);
  opacity: 0.75;
}

#Slowed .skin-backdrop__maximalist-scribble--ink path {
  stroke-width: 2.5;
}

/* Stop-motion "line boil": the marker redraws itself a pixel off each frame. */
@keyframes skin-backdrop-maximalist-boil {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }

  33% {
    transform: translate(1px, -1px) rotate(0.6deg);
  }

  66% {
    transform: translate(-1px, 1px) rotate(-0.5deg);
  }
}

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

/* Wordmark: poster red over a misregistered blue plate, lime swipe below. */
#Slowed .skin-logo__maximalist {
  position: relative;
  display: inline-flex;
  color: var(--maximalist-red, #f23b2e);
  filter: drop-shadow(2px 2px 0 var(--maximalist-blue, #3a3ae6));
}

#Slowed .skin-logo__maximalist svg {
  position: relative;
  z-index: 1;
}

#Slowed .skin-logo__maximalist-swipe {
  position: absolute;
  left: 2%;
  right: 34%;
  bottom: 10%;
  height: 22%;
  z-index: 0;
  border-radius: 40% 60% 55% 45% / 60% 40% 60% 40%;
  background: var(--maximalist-lime, #d8f53a);
  transform: rotate(-2deg);
}

/* Section titles in poster red; the font stays the popup's own. */
#Slowed.maximalist-mode .content__title {
  color: var(--maximalist-red);
}

/* Black marker outlines and hard offset shadows on every chip and tile. */
#Slowed.maximalist-mode .mood__chip,
#Slowed.maximalist-mode .mode-tile {
  border-color: var(--maximalist-ink);
  box-shadow: 2px 2px 0 var(--maximalist-ink);
}

#Slowed.maximalist-mode .mood__chip--selected {
  box-shadow: 3px 3px 0 var(--maximalist-blue);
}

/* The chip row scrolls sideways, which clips vertically too, so the offset
   shadows above were cut at the bottom. Room for the deepest (3px) shadow,
   with the margin keeping the sheet's spacing unchanged. */
#Slowed.maximalist-mode .mood__chips {
  padding: 0 3px 3px 0;
  margin-bottom: -3px;
}

#Slowed.maximalist-mode .mode-tile--active {
  box-shadow: 3px 3px 0 var(--maximalist-blue);
}

/* 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__note {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 240px;
  color: var(--color-gray-500);
  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*/