/* ==========================================================================
   FILE          assets/aes-skins.css        REV65
   UPLOAD TO     public_html/assets/aes-skins.css
   LOAD AFTER    aes-nav.css   (last in the stylesheet chain)

   WHAT IT IS    THE WINAMP CHASSIS, IN SIX COLOURWAYS

   Ported from the Cut Society build (cs-skins.css REV59), the stylesheet
   that ships on the live Cut Society site.

   The chassis is always Winamp: title bar, LCD with clock and spectrum,
   transport, playlist window, ten-band equaliser.

   What the skin changes is the MATERIAL. Every chassis rule below reads
   from a --k-* custom property, and a skin is nothing more than a block
   that sets those properties. Adding a seventh colourway means writing one
   block of variables and adding one line to SKINS in aes-skins.js. No
   layout is duplicated and no chassis rule is ever overridden.

   -- SPECIFICITY --------------------------------------------------------
   Chassis rules are written against #player (1,0,0) so they beat the
   .player rules in aes.css (0,1,0) without !important. Skin blocks only
   set variables, so they never fight anything. aes.css is NOT modified.

   -- THE BAR MARKUP IS UNTOUCHED ----------------------------------------
   Every id in the footer player block is a contract with aes.js: #pprev,
   #pplay, #pnext, #ptitle, #ptime, #pseek, #pseekfill, #ptrack, #pvol.
   None is renamed here. aes-skins.js adds elements alongside the existing
   ones and this file positions them. Remove both files and the bar reverts
   to its built appearance and keeps working.

   -- MOBILE -------------------------------------------------------------
   Below 720px the whole bar reflows to a stacked grid: title, LCD, seek,
   then a full-width transport row, then the track select. The volume
   slider is removed because it is a dead control on iOS, where the
   hardware keys own volume.
   ========================================================================== */

/* ==========================================================================
   1. THE CHASSIS
   ========================================================================== */

#player {
  /* Narrower and squarer than the house bar. The original was 275px at 1x
     and reads wrong stretched to 760. */
  width: min(460px, calc(100vw - 24px));
  left: 50%;
  transform: translateX(-50%);

  display: grid;
  grid-template-columns: auto auto auto auto auto minmax(0, 1fr) auto;
  grid-template-areas:
    "title title title title title title title"
    "lcd   lcd   lcd   lcd   lcd   lcd   lcd"
    "seek  seek  seek  seek  seek  seek  seek"
    "pl    prev  play  next  eq    sel   vol"
    "eqp   eqp   eqp   eqp   eqp   eqp   eqp"
    "lhead lhead lhead lhead lhead lhead lhead"
    "list  list  list  list  list  list  list";
  gap: 3px;
  align-items: center;

  padding: 3px;
  border-radius: 3px;
  background: var(--k-shell);
  border: 1px solid var(--k-edge);
  box-shadow:
    inset  1px  1px 0 var(--k-bevel-hi),
    inset -1px -1px 0 var(--k-bevel-lo),
    0 12px 34px rgba(0, 0, 0, .55);
  backdrop-filter: var(--k-blur, none);
  -webkit-backdrop-filter: var(--k-blur, none);
  font-family: var(--k-font);
}

/* -- title bar ----------------------------------------------------------- */

.aes-wamp-title {
  grid-area: title;
  display: flex;
  align-items: center;
  height: 16px;
  padding: 0 5px;
  background: var(--k-title);
  border: 1px solid var(--k-edge);
  box-shadow: inset 1px 1px 0 var(--k-bevel-hi);
  border-radius: 2px 2px 0 0;
  color: var(--k-title-fg);
  font-size: 8px;
  letter-spacing: .24em;
  font-weight: 700;
  text-transform: uppercase;
}
.aes-wamp-title .aes-wamp-name { flex: 1; }

/* The SKIN button lives in the title bar. The cube on the transport row
   belongs to the track list, which is what people reach for most. */
.aes-skinbar-toggle {
  font-family: var(--k-font-lcd);
  font-size: 8px;
  letter-spacing: .16em;
  padding: 2px 7px;
  cursor: pointer;
  border-radius: 1px;
  background: var(--k-btn);
  border: 1px solid var(--k-edge);
  box-shadow: inset 1px 1px 0 var(--k-bevel-hi);
  color: var(--k-btn-fg);
  transition: background .12s, color .12s;
}
.aes-skinbar-toggle:hover { background: var(--k-btn-hover); color: var(--k-btn-fg-hi); }
.aes-skinbar-toggle[aria-expanded="true"] { background: var(--k-btn-down); color: var(--k-accent); }

/* -- the LCD ------------------------------------------------------------- */

.aes-lcd {
  grid-area: lcd;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 7px;
  background: var(--k-lcd);
  border: 1px solid var(--k-edge);
  box-shadow: inset 1px 1px 3px var(--k-lcd-inset);
}
.aes-lcd-time {
  flex: none;
  min-width: 70px;
  font-family: var(--k-font-lcd);
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--k-lcd-fg);
  text-shadow: 0 0 6px var(--k-lcd-glow);
}
.aes-viz { flex: none; display: block; width: 76px; height: 30px; }
.aes-lcd-meta { flex: 1; min-width: 0; }

.aes-lcd-scroll {
  overflow: hidden;
  white-space: nowrap;
  height: 14px;
  font-size: 10px;
  letter-spacing: .04em;
  color: var(--k-lcd-fg);
}
.aes-lcd-scroll b { display: inline-block; font-weight: 400; will-change: transform; }
.aes-lcd-scroll.aes-run b { animation: aes-marquee 16s linear infinite; }
@keyframes aes-marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.aes-lcd-kbps {
  margin-top: 1px;
  font-size: 8px;
  letter-spacing: .1em;
  color: var(--k-lcd-dim);
}

/* The LCD carries the title and the clock, so the originals are hidden.
   They stay in the DOM because aes.js writes to them and this file reads
   the clock back out of them. */
#player .pline { display: none; }

/* -- seek ---------------------------------------------------------------- */

#player .pcore { grid-area: seek; min-width: 0; }
#player .pseek {
  height: 10px;
  border-radius: 1px;
  background: var(--k-trough);
  border: 1px solid var(--k-edge);
  box-shadow: inset 1px 1px 2px var(--k-lcd-inset);
}
#player .pseek-fill {
  border-radius: 0;
  background: var(--k-fill);
  box-shadow: inset 0 1px 0 var(--k-fill-hi);
}

/* -- transport ----------------------------------------------------------- */

#player .pbtn,
#player .pbtn.pplay {
  width: 36px;
  height: 26px;
  flex: none;
  border-radius: 1px;
  background: var(--k-btn);
  border: 1px solid var(--k-edge);
  box-shadow: inset 1px 1px 0 var(--k-bevel-hi);
  color: var(--k-btn-fg);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .12s, color .12s;
}
#player .pbtn:hover,
#player .pbtn.pplay:hover { background: var(--k-btn-hover); color: var(--k-btn-fg-hi); }
#player .pbtn:active,
#player .pbtn.pplay:active {
  background: var(--k-btn-down);
  box-shadow: inset 1px 1px 3px var(--k-lcd-inset);
  color: var(--k-accent);
}
#player .pbtn svg { width: 12px; height: 12px; fill: currentColor; }

#player #pprev { grid-area: prev; }
#player #pplay { grid-area: play; }
#player #pnext { grid-area: next; }

/* -- selector and volume -------------------------------------------------- */

#player .psel {
  grid-area: sel;
  min-width: 0;
  max-width: none;
  background: var(--k-lcd);
  border: 1px solid var(--k-edge);
  box-shadow: inset 1px 1px 2px var(--k-lcd-inset);
  border-radius: 1px;
  color: var(--k-lcd-fg);
  font-family: var(--k-font-lcd);
  font-size: 9px;
  padding: 6px 5px;
}
#player .pvolwrap { grid-area: vol; }
#player .pvol { width: 70px; accent-color: var(--k-accent); }

/* -- the playlist window --------------------------------------------------- */

/* Playlist header: position, count and shuffle. Sits directly on top of the
   list window and shares its material. */
.aes-wamp-listhead {
  grid-area: lhead;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 7px;
  background: var(--k-lcd);
  border: 1px solid var(--k-edge);
  border-bottom: none;
  box-shadow: inset 1px 1px 3px var(--k-lcd-inset);
  border-radius: 2px 2px 0 0;
  font-family: var(--k-font-lcd);
  font-size: 9px;
  letter-spacing: .12em;
  color: var(--k-lcd-dim);
}
.aes-wamp-listhead[hidden] { display: none; }

.aes-wamp-count { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.aes-wamp-shuffle {
  font-family: inherit;
  font-size: 9px;
  letter-spacing: .12em;
  padding: 3px 8px;
  cursor: pointer;
  flex-shrink: 0;
  background: var(--k-btn);
  border: 1px solid var(--k-edge);
  box-shadow: inset 1px 1px 0 var(--k-bevel-hi);
  color: var(--k-btn-fg);
  border-radius: 1px;
  transition: background .15s, color .15s;
}
.aes-wamp-shuffle:hover  { background: var(--k-btn-hover); color: var(--k-btn-fg-hi); }
.aes-wamp-shuffle:active { background: var(--k-btn-down);  color: var(--k-accent); }

.aes-wamp-list {
  grid-area: list;
  border-top: none;
  border-radius: 0 0 2px 2px;
  max-height: 132px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--k-lcd);
  border: 1px solid var(--k-edge);
  box-shadow: inset 1px 1px 3px var(--k-lcd-inset);
  border-radius: 0 0 2px 2px;
  font-family: var(--k-font-lcd);
  font-size: 10px;
}
.aes-wamp-list[hidden] { display: none; }

.aes-wamp-row {
  display: flex;
  gap: 7px;
  padding: 3px 7px;
  color: var(--k-list-fg);
  cursor: pointer;
  white-space: nowrap;
}
.aes-wamp-row:hover { background: var(--k-list-hover); color: var(--k-lcd-fg); }
.aes-wamp-row[aria-current="true"] { background: var(--k-list-on); color: var(--k-list-on-fg); }
.aes-wamp-row.aes-dead { color: var(--k-list-dead); cursor: default; text-decoration: line-through; }
.aes-wamp-row.aes-dead:hover { background: none; color: var(--k-list-dead); }
.aes-wamp-row i { width: 20px; flex: none; text-align: right; font-style: normal; opacity: .7; }
.aes-wamp-row s { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; text-decoration: none; }

/* -- the skin switcher ----------------------------------------------------- */

/* The tray sits above the chassis, so opening it never reflows the
   controls underneath. */
.aes-skintray {
  position: absolute;
  left: 3px;
  bottom: calc(100% + 6px);
  display: flex;
  gap: 3px;
  flex-wrap: wrap;
  max-width: calc(100% - 6px);
  padding: 5px;
  background: var(--k-title);
  border: 1px solid var(--k-edge);
  border-radius: 2px;
  box-shadow: inset 1px 1px 0 var(--k-bevel-hi), 0 10px 26px rgba(0, 0, 0, .55);
  z-index: 4;
}
.aes-skintray[hidden] { display: none; }

.aes-skinchip {
  font-family: var(--k-font-lcd);
  font-size: 9.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 5px 9px;
  cursor: pointer;
  border-radius: 1px;
  background: var(--k-btn);
  border: 1px solid var(--k-edge);
  box-shadow: inset 1px 1px 0 var(--k-bevel-hi);
  color: var(--k-btn-fg);
  transition: background .15s, color .15s;
}
.aes-skinchip:hover { background: var(--k-btn-hover); color: var(--k-btn-fg-hi); }
.aes-skinchip[aria-pressed="true"] {
  background: var(--k-chip-on);
  border-color: var(--k-chip-on-edge);
  box-shadow: inset 1px 1px 3px var(--k-lcd-inset);
  color: var(--k-chip-on-fg);
}
.aes-skinchip:focus-visible,
.aes-skinbar-toggle:focus-visible,
#player .pbtn:focus-visible { outline: 2px solid var(--k-accent); outline-offset: 1px; }


/* -- the cube and the equaliser button ------------------------------------ */

.aes-chip-btn {
  width: 30px;
  height: 26px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 1px;
  background: var(--k-btn);
  border: 1px solid var(--k-edge);
  box-shadow: inset 1px 1px 0 var(--k-bevel-hi);
  color: var(--k-btn-fg);
  transition: background .12s, color .12s;
}
.aes-chip-btn:hover { background: var(--k-btn-hover); color: var(--k-btn-fg-hi); }
.aes-chip-btn[aria-pressed="true"] {
  background: var(--k-btn-down);
  box-shadow: inset 1px 1px 3px var(--k-lcd-inset);
  color: var(--k-accent);
}
.aes-chip-btn svg { width: 14px; height: 14px; fill: currentColor; display: block; }

/* -- the equaliser -------------------------------------------------------- */

/* Same footprint as the chassis: it is a panel of the same instrument, not
   a dialogue floating over it. */
.aes-eq {
  grid-area: eqp;
  background: var(--k-lcd);
  border: 1px solid var(--k-edge);
  box-shadow: inset 1px 1px 3px var(--k-lcd-inset);
  padding: 7px 8px 6px;
}
.aes-eq[hidden] { display: none; }

.aes-eq-head { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.aes-eq-title {
  flex: 1;
  font-family: var(--k-font-lcd);
  font-size: 9px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--k-lcd-dim);
}
.aes-eq-preset {
  background: var(--k-btn);
  border: 1px solid var(--k-edge);
  box-shadow: inset 1px 1px 0 var(--k-bevel-hi);
  border-radius: 1px;
  color: var(--k-btn-fg);
  font-family: var(--k-font-lcd);
  font-size: 9px;
  padding: 3px 5px;
}

.aes-eq-curve {
  display: block;
  width: 100%;
  height: 62px;
  margin-bottom: 6px;
}

.aes-eq-body {
  display: grid;
  grid-template-columns: auto repeat(10, minmax(0, 1fr));
  gap: 3px;
  align-items: end;
}
.aes-eq-band { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.aes-eq-pre { padding-right: 6px; border-right: 1px solid var(--k-edge); margin-right: 3px; }

/* Vertical sliders. writing-mode is the modern route; the appearance and
   -webkit-slider-vertical pair keeps older WebKit honest. */
.aes-eq-slider {
  writing-mode: vertical-lr;
  direction: rtl;
  -webkit-appearance: slider-vertical;
  appearance: slider-vertical;
  width: 16px;
  height: 62px;
  margin: 0;
  padding: 0;
  accent-color: var(--k-accent);
  cursor: ns-resize;
  background: transparent;
}
.aes-eq-label {
  font-family: var(--k-font-lcd);
  font-size: 7.5px;
  letter-spacing: .04em;
  color: var(--k-lcd-dim);
  white-space: nowrap;
}

.aes-eq-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  padding-top: 5px;
  border-top: 1px solid var(--k-edge);
}
.aes-eq-foot span {
  flex: 1;
  font-family: var(--k-font-lcd);
  font-size: 7.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--k-lcd-dim);
}
.aes-eq-reset {
  background: var(--k-btn);
  border: 1px solid var(--k-edge);
  box-shadow: inset 1px 1px 0 var(--k-bevel-hi);
  border-radius: 1px;
  color: var(--k-btn-fg);
  font-family: var(--k-font-lcd);
  font-size: 8px;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 4px 9px;
  cursor: pointer;
}
.aes-eq-reset:hover { background: var(--k-btn-hover); color: var(--k-btn-fg-hi); }

/* ==========================================================================
   LIGHT — deeper engraving
   You asked for the engraved edges specifically, so on this colourway the
   bevels are cut harder than the others: a dark score above and left, a
   white catch below and right. That is what makes an edge read as milled
   rather than drawn.
   ========================================================================== */

#player.aes-skin--light .aes-wamp-title,
#player.aes-skin--light .aes-lcd,
#player.aes-skin--light .aes-eq,
#player.aes-skin--light .aes-wamp-list {
  box-shadow:
    inset  1px  1px 2px rgba(20,23,26,.16),
    inset -1px -1px 0   rgba(255,255,255,.95);
}
#player.aes-skin--light .aes-wamp-name {
  text-shadow: 0 1px 0 rgba(255,255,255,.95), 0 -1px 1px rgba(20,23,26,.30);
}
#player.aes-skin--light .aes-lcd-time {
  text-shadow: 0 1px 0 rgba(255,255,255,.9), 0 -1px 1px rgba(20,23,26,.22);
}

/* ==========================================================================
   2. THE COLOURWAYS

   A skin sets variables and nothing else. --k-viz-1 and --k-viz-2 are read
   back out by aes-skins.js with getComputedStyle to colour the canvas, so
   the meter follows the skin without any JavaScript per skin.
   ========================================================================== */

/* -- CHROME  (default; agrees with the site's own chrome-on-black) -------- */

#player.aes-skin--chrome {
  --k-font:       "Helvetica Neue", Arial, sans-serif;
  --k-font-lcd:   "Share Tech Mono", "Courier New", monospace;
  --k-shell:      linear-gradient(180deg, #2A2E34, #16181C);
  --k-edge:       #0B0C0E;
  --k-bevel-hi:   rgba(255,255,255,.16);
  --k-bevel-lo:   rgba(0,0,0,.55);
  --k-title:      linear-gradient(180deg, #444A52, #23262B);
  --k-title-fg:   #D8DCE2;
  --k-lcd:        #0A0C0F;
  --k-lcd-inset:  rgba(0,0,0,.85);
  --k-lcd-fg:     #E9EEF4;
  --k-lcd-dim:    #6C737C;
  --k-lcd-glow:   rgba(200,225,255,.30);
  --k-btn:        linear-gradient(180deg, #3C424A, #24282D);
  --k-btn-hover:  linear-gradient(180deg, #4B525B, #2E333A);
  --k-btn-down:   #14171B;
  --k-btn-fg:     #C4CAD2;
  --k-btn-fg-hi:  #FFFFFF;
  --k-accent:     #E9EEF4;
  --k-trough:     #101318;
  --k-fill:       linear-gradient(180deg, #EDF1F6, #9BA3AD);
  --k-fill-hi:    rgba(255,255,255,.55);
  --k-list-fg:    #99A1AA;
  --k-list-hover: #171B20;
  --k-list-on:    linear-gradient(90deg, #4A525C, #2B3038);
  --k-list-on-fg: #FFFFFF;
  --k-list-dead:  #454B52;
  --k-chip-on:    linear-gradient(180deg, #E8ECF0, #A6ADB5);
  --k-chip-on-edge: #F2F4F6;
  --k-chip-on-fg: #0A0C0F;
  --k-viz-1:      #8A939D;
  --k-viz-2:      #EDF2F8;
}

/* -- WINAMP  (the authentic green-on-grey colourway) ---------------------- */

#player.aes-skin--winamp {
  --k-font:       "Courier New", monospace;
  --k-font-lcd:   "Courier New", monospace;
  --k-shell:      #3B3B47;
  --k-edge:       #16161C;
  --k-bevel-hi:   #6A6A7A;
  --k-bevel-lo:   #1C1C24;
  --k-title:      linear-gradient(180deg, #5A5A6B 0%, #3D3D4A 45%, #2B2B36 100%);
  --k-title-fg:   #C9C9DC;
  --k-lcd:        #000A00;
  --k-lcd-inset:  rgba(0,0,0,.9);
  --k-lcd-fg:     #00EF00;
  --k-lcd-dim:    #009000;
  --k-lcd-glow:   rgba(0,255,0,.5);
  --k-btn:        linear-gradient(180deg, #545463, #3A3A46);
  --k-btn-hover:  linear-gradient(180deg, #63637A, #454554);
  --k-btn-down:   #262630;
  --k-btn-fg:     #D2D2E0;
  --k-btn-fg-hi:  #FFFFFF;
  --k-accent:     #3FEF3F;
  --k-trough:     #14141C;
  --k-fill:       linear-gradient(180deg, #00C000, #007000);
  --k-fill-hi:    rgba(120,255,120,.5);
  --k-list-fg:    #00C000;
  --k-list-hover: #002200;
  --k-list-on:    #0000C0;
  --k-list-on-fg: #FFFFFF;
  --k-list-dead:  #005000;
  --k-chip-on:    #0D2A0D;
  --k-chip-on-edge: #0A1F0A;
  --k-chip-on-fg: #3FEF3F;
  --k-viz-1:      #00C800;
  --k-viz-2:      #7DFF7D;
}

/* -- LIGHT  (restrained, the daytime and high-contrast option) ------------ */

#player.aes-skin--light {
  --k-font:       "Helvetica Neue", Arial, sans-serif;
  --k-font-lcd:   "Share Tech Mono", "Courier New", monospace;
  --k-shell:      linear-gradient(180deg, #FFFFFF, #ECEDEF);
  --k-edge:       #C7CACE;
  --k-bevel-hi:   #FFFFFF;
  --k-bevel-lo:   rgba(0,0,0,.10);
  --k-title:      linear-gradient(180deg, #F7F8F9, #E2E4E7);
  --k-title-fg:   #5A5F66;
  --k-lcd:        #FFFFFF;
  --k-lcd-inset:  rgba(0,0,0,.10);
  --k-lcd-fg:     #14171A;
  --k-lcd-dim:    #9AA0A7;
  --k-lcd-glow:   rgba(0,0,0,0);
  --k-btn:        linear-gradient(180deg, #FFFFFF, #E8EAEC);
  --k-btn-hover:  linear-gradient(180deg, #FFFFFF, #DDE0E3);
  --k-btn-down:   #D4D7DB;
  --k-btn-fg:     #4C5157;
  --k-btn-fg-hi:  #000000;
  --k-accent:     #14171A;
  --k-trough:     #E4E6E9;
  --k-fill:       linear-gradient(180deg, #4A5058, #23272C);
  --k-fill-hi:    rgba(255,255,255,.30);
  --k-list-fg:    #6B7178;
  --k-list-hover: #F2F3F5;
  --k-list-on:    #14171A;
  --k-list-on-fg: #FFFFFF;
  --k-list-dead:  #C3C7CC;
  --k-chip-on:    #14171A;
  --k-chip-on-edge: #14171A;
  --k-chip-on-fg: #FFFFFF;
  --k-viz-1:      #B4B9BF;
  --k-viz-2:      #23272C;
}

/* -- MARBLE  (warm stone, matching the site's own marble.jpg splash) ---------- */

#player.aes-skin--marble {
  --k-font:       "Helvetica Neue", Arial, sans-serif;
  --k-font-lcd:   "Share Tech Mono", "Courier New", monospace;
  --k-shell:      linear-gradient(180deg, #FBF9F6, #E7E0D8);
  --k-edge:       #C4B9AC;
  --k-bevel-hi:   #FFFFFF;
  --k-bevel-lo:   rgba(90,72,54,.18);
  --k-title:      linear-gradient(180deg, #F4F0EA, #DCD3C8);
  --k-title-fg:   #6B6157;
  --k-lcd:        #FCFAF7;
  --k-lcd-inset:  rgba(90,72,54,.16);
  --k-lcd-fg:     #2A2622;
  --k-lcd-dim:    #A0958A;
  --k-lcd-glow:   rgba(0,0,0,0);
  --k-btn:        linear-gradient(180deg, #FDFBF8, #E4DCD2);
  --k-btn-hover:  linear-gradient(180deg, #FFFFFF, #D9CFC3);
  --k-btn-down:   #CDC2B5;
  --k-btn-fg:     #6B6157;
  --k-btn-fg-hi:  #2A2622;
  --k-accent:     #8A7A66;
  --k-trough:     #E4DCD2;
  --k-fill:       linear-gradient(180deg, #9C8B75, #6B5E4C);
  --k-fill-hi:    rgba(255,255,255,.42);
  --k-list-fg:    #7D7268;
  --k-list-hover: #F3EEE7;
  --k-list-on:    #6B5E4C;
  --k-list-on-fg: #FFFFFF;
  --k-list-dead:  #C9C0B6;
  --k-chip-on:    #6B5E4C;
  --k-chip-on-edge: #6B5E4C;
  --k-chip-on-fg: #FFFFFF;
  --k-viz-1:      #C4B7A6;
  --k-viz-2:      #6B5E4C;
}

/* -- MINIMAL  (no ornament, maximum contrast) ---------------------------- */

#player.aes-skin--minimal {
  --k-font:       "Helvetica Neue", Arial, sans-serif;
  --k-font-lcd:   "Share Tech Mono", "Courier New", monospace;
  --k-shell:      #0B0B0C;
  --k-edge:       #262628;
  --k-bevel-hi:   rgba(255,255,255,.06);
  --k-bevel-lo:   rgba(0,0,0,.6);
  --k-title:      #131315;
  --k-title-fg:   #77777C;
  --k-lcd:        #0B0B0C;
  --k-lcd-inset:  rgba(0,0,0,.7);
  --k-lcd-fg:     #F2F2F3;
  --k-lcd-dim:    #6A6A70;
  --k-lcd-glow:   rgba(0,0,0,0);
  --k-btn:        #1A1A1C;
  --k-btn-hover:  #26262A;
  --k-btn-down:   #000000;
  --k-btn-fg:     #C8C8CB;
  --k-btn-fg-hi:  #FFFFFF;
  --k-accent:     #FFFFFF;
  --k-trough:     #1A1A1C;
  --k-fill:       #FFFFFF;
  --k-fill-hi:    rgba(255,255,255,0);
  --k-list-fg:    #85858B;
  --k-list-hover: #18181A;
  --k-list-on:    #FFFFFF;
  --k-list-on-fg: #0B0B0C;
  --k-list-dead:  #3A3A3E;
  --k-chip-on:    #FFFFFF;
  --k-chip-on-edge: #FFFFFF;
  --k-chip-on-fg: #0B0B0C;
  --k-viz-1:      #4A4A50;
  --k-viz-2:      #FFFFFF;
}

/* -- GLASS  (frosted; degrades to a flat tint without backdrop-filter) --- */

#player.aes-skin--glass {
  --k-font:       "Helvetica Neue", Arial, sans-serif;
  --k-font-lcd:   "Share Tech Mono", "Courier New", monospace;
  --k-blur:       blur(20px) saturate(170%);
  --k-shell:      linear-gradient(140deg, rgba(120,60,200,.34), rgba(20,60,150,.30) 45%, rgba(20,140,120,.30));
  --k-edge:       rgba(255,255,255,.22);
  --k-bevel-hi:   rgba(255,255,255,.24);
  --k-bevel-lo:   rgba(0,0,0,.20);
  --k-title:      rgba(255,255,255,.10);
  --k-title-fg:   rgba(255,255,255,.72);
  --k-lcd:        rgba(0,0,0,.24);
  --k-lcd-inset:  rgba(0,0,0,.30);
  --k-lcd-fg:     #FFFFFF;
  --k-lcd-dim:    rgba(255,255,255,.55);
  --k-lcd-glow:   rgba(255,255,255,.35);
  --k-btn:        rgba(255,255,255,.12);
  --k-btn-hover:  rgba(255,255,255,.22);
  --k-btn-down:   rgba(0,0,0,.30);
  --k-btn-fg:     rgba(255,255,255,.85);
  --k-btn-fg-hi:  #FFFFFF;
  --k-accent:     #FFFFFF;
  --k-trough:     rgba(255,255,255,.16);
  --k-fill:       rgba(255,255,255,.92);
  --k-fill-hi:    rgba(255,255,255,.5);
  --k-list-fg:    rgba(255,255,255,.62);
  --k-list-hover: rgba(255,255,255,.10);
  --k-list-on:    rgba(255,255,255,.24);
  --k-list-on-fg: #FFFFFF;
  --k-list-dead:  rgba(255,255,255,.24);
  --k-chip-on:    rgba(255,255,255,.92);
  --k-chip-on-edge: rgba(255,255,255,.92);
  --k-chip-on-fg: #1A1A2E;
  --k-viz-1:      rgba(255,255,255,.38);
  --k-viz-2:      #FFFFFF;
}


/* ==========================================================================
   THE WINAMP-FAMILY COLOURWAYS  (added REV66)

   Four palettes evoking the best known skins in Winamp's history. Each is
   nothing more than a block of --k-* variables, so no chassis rule is
   duplicated or overridden and no bitmap asset is involved.
   ========================================================================== */

/* -- MODERN  (gunmetal and cyan — the Winamp 5 default) ------------------- */

#player.aes-skin--modern {
  --k-font:       "Helvetica Neue", Arial, sans-serif;
  --k-font-lcd:   "Share Tech Mono", "Courier New", monospace;
  --k-shell:      linear-gradient(180deg, #3A434D, #232A31);
  --k-edge:       #12171B;
  --k-bevel-hi:   #5D6A76;
  --k-bevel-lo:   #14191E;
  --k-title:      linear-gradient(180deg, #4C5865 0%, #333C45 48%, #232A31 100%);
  --k-title-fg:   #B8C6D2;
  --k-lcd:        #0A1014;
  --k-lcd-inset:  rgba(0,0,0,.85);
  --k-lcd-fg:     #7FD4F0;
  --k-lcd-dim:    #47819A;
  --k-lcd-glow:   rgba(127,212,240,.45);
  --k-btn:        linear-gradient(180deg, #4A5561, #313941);
  --k-btn-hover:  linear-gradient(180deg, #586573, #3A434D);
  --k-btn-down:   #1E242A;
  --k-btn-fg:     #C4D2DE;
  --k-btn-fg-hi:  #FFFFFF;
  --k-accent:     #4FC3E8;
  --k-trough:     #161C21;
  --k-fill:       linear-gradient(180deg, #4FC3E8, #24708C);
  --k-fill-hi:    rgba(160,230,255,.5);
  --k-list-fg:    #93A6B6;
  --k-list-hover: #1C232A;
  --k-list-on:    #1D4E63;
  --k-list-on-fg: #E8F6FC;
  --k-list-dead:  #4A5764;
  --k-chip-on:    #123542;
  --k-chip-on-edge: #0C242D;
  --k-chip-on-fg: #4FC3E8;
  --k-viz-1:      #3E9CBC;
  --k-viz-2:      #A8E8FF;
}

/* -- BENTO  (black glass and electric blue — the Winamp 5.5 default) ------ */

#player.aes-skin--bento {
  --k-font:       "Helvetica Neue", Arial, sans-serif;
  --k-font-lcd:   "Share Tech Mono", "Courier New", monospace;
  --k-shell:      linear-gradient(180deg, #23262A, #131417);
  --k-edge:       #0A0B0D;
  --k-bevel-hi:   #40454C;
  --k-bevel-lo:   #0C0D0F;
  --k-title:      linear-gradient(180deg, #2E3238 0%, #1B1E22 55%, #101215 100%);
  --k-title-fg:   #A9B4C0;
  --k-lcd:        #07080A;
  --k-lcd-inset:  rgba(0,0,0,.92);
  --k-lcd-fg:     #9FC8FF;
  --k-lcd-dim:    #4E6A88;
  --k-lcd-glow:   rgba(120,170,255,.42);
  --k-btn:        linear-gradient(180deg, #2C3036, #1A1D21);
  --k-btn-hover:  linear-gradient(180deg, #383D44, #22262B);
  --k-btn-down:   #0E1013;
  --k-btn-fg:     #B6C0CC;
  --k-btn-fg-hi:  #FFFFFF;
  --k-accent:     #3C8FE0;
  --k-trough:     #0D0F11;
  --k-fill:       linear-gradient(180deg, #3C8FE0, #1B4C7E);
  --k-fill-hi:    rgba(150,200,255,.5);
  --k-list-fg:    #8A94A0;
  --k-list-hover: #16191D;
  --k-list-on:    #17395C;
  --k-list-on-fg: #E4F0FF;
  --k-list-dead:  #454C55;
  --k-chip-on:    #0F2942;
  --k-chip-on-edge: #091B2C;
  --k-chip-on-fg: #5CA8F0;
  --k-viz-1:      #2E6FAF;
  --k-viz-2:      #9FD0FF;
}

/* -- NUCLEO  (charcoal and amber) ----------------------------------------- */

#player.aes-skin--nucleo {
  --k-font:       "Helvetica Neue", Arial, sans-serif;
  --k-font-lcd:   "Share Tech Mono", "Courier New", monospace;
  --k-shell:      linear-gradient(180deg, #2C2926, #1A1816);
  --k-edge:       #100F0D;
  --k-bevel-hi:   #4B4640;
  --k-bevel-lo:   #131211;
  --k-title:      linear-gradient(180deg, #3A3630 0%, #262320 55%, #1A1816 100%);
  --k-title-fg:   #C2B6A6;
  --k-lcd:        #0E0B08;
  --k-lcd-inset:  rgba(0,0,0,.9);
  --k-lcd-fg:     #FFAA2B;
  --k-lcd-dim:    #8A5D18;
  --k-lcd-glow:   rgba(255,170,43,.42);
  --k-btn:        linear-gradient(180deg, #38342F, #232120);
  --k-btn-hover:  linear-gradient(180deg, #45403A, #2C2926);
  --k-btn-down:   #14120F;
  --k-btn-fg:     #CDBFAD;
  --k-btn-fg-hi:  #FFFFFF;
  --k-accent:     #FF8C1A;
  --k-trough:     #141210;
  --k-fill:       linear-gradient(180deg, #FF8C1A, #9A4E06);
  --k-fill-hi:    rgba(255,200,130,.5);
  --k-list-fg:    #A2968A;
  --k-list-hover: #201E1B;
  --k-list-on:    #5A3306;
  --k-list-on-fg: #FFE7C6;
  --k-list-dead:  #57504A;
  --k-chip-on:    #3A2106;
  --k-chip-on-edge: #281604;
  --k-chip-on-fg: #FFAA2B;
  --k-viz-1:      #C4700F;
  --k-viz-2:      #FFCB7A;
}

/* -- OSMOSIS  (aqua and steel) -------------------------------------------- */

#player.aes-skin--osmosis {
  --k-font:       "Helvetica Neue", Arial, sans-serif;
  --k-font-lcd:   "Share Tech Mono", "Courier New", monospace;
  --k-shell:      linear-gradient(180deg, #33454F, #1E2C34);
  --k-edge:       #101A1F;
  --k-bevel-hi:   #587381;
  --k-bevel-lo:   #142026;
  --k-title:      linear-gradient(180deg, #456070 0%, #2E434E 50%, #1E2C34 100%);
  --k-title-fg:   #AEC9D6;
  --k-lcd:        #06141B;
  --k-lcd-inset:  rgba(0,0,0,.85);
  --k-lcd-fg:     #6FE6D8;
  --k-lcd-dim:    #35897F;
  --k-lcd-glow:   rgba(111,230,216,.45);
  --k-btn:        linear-gradient(180deg, #3E5765, #27383F);
  --k-btn-hover:  linear-gradient(180deg, #4B6878, #31474F);
  --k-btn-down:   #172429;
  --k-btn-fg:     #BBD5E0;
  --k-btn-fg-hi:  #FFFFFF;
  --k-accent:     #3FD6C4;
  --k-trough:     #121E24;
  --k-fill:       linear-gradient(180deg, #3FD6C4, #17756B);
  --k-fill-hi:    rgba(150,255,240,.5);
  --k-list-fg:    #8FAEBB;
  --k-list-hover: #1B2B33;
  --k-list-on:    #14544E;
  --k-list-on-fg: #DFFFF9;
  --k-list-dead:  #47616C;
  --k-chip-on:    #0C3B37;
  --k-chip-on-edge: #072925;
  --k-chip-on-fg: #6FE6D8;
  --k-viz-1:      #2FA294;
  --k-viz-2:      #8FF2E5;
}


/* ==========================================================================
   FOUR MORE COLOURWAYS  (added REV67)

   Original palettes, not ports of any particular Winamp skin. Signal is the
   house one: AES red on the wall navy.
   ========================================================================== */

/* -- SIGNAL  (AES red on wall navy — the house colourway) ----------------- */

#player.aes-skin--signal {
  --k-font:       "Rajdhani", "Helvetica Neue", Arial, sans-serif;
  --k-font-lcd:   "Share Tech Mono", "Courier New", monospace;
  --k-shell:      linear-gradient(180deg, #16293B, #0A1622);
  --k-edge:       #060E16;
  --k-bevel-hi:   #35516B;
  --k-bevel-lo:   #08121C;
  --k-title:      linear-gradient(180deg, #274259 0%, #17293A 55%, #0F1E2E 100%);
  --k-title-fg:   #8FA3B8;
  --k-lcd:        #060E16;
  --k-lcd-inset:  rgba(0,0,0,.88);
  --k-lcd-fg:     #FFE3BC;
  --k-lcd-dim:    #7A6A55;
  --k-lcd-glow:   rgba(255,227,188,.40);
  --k-btn:        linear-gradient(180deg, #22405A, #14283A);
  --k-btn-hover:  linear-gradient(180deg, #26445F, #16293B);
  --k-btn-down:   #0A1622;
  --k-btn-fg:     #C9D4E0;
  --k-btn-fg-hi:  #FFFFFF;
  --k-accent:     #D10000;
  --k-trough:     #0A1622;
  --k-fill:       linear-gradient(180deg, #E5303A, #8B0000);
  --k-fill-hi:    rgba(255,150,150,.5);
  --k-list-fg:    #8FA3B8;
  --k-list-hover: #16293B;
  --k-list-on:    #6E0000;
  --k-list-on-fg: #FFE3BC;
  --k-list-dead:  #4A5C6E;
  --k-chip-on:    #4A0000;
  --k-chip-on-edge: #2E0000;
  --k-chip-on-fg: #FF6B6B;
  --k-viz-1:      #9E2A2A;
  --k-viz-2:      #FFE3BC;
}

/* -- VIOLET  (deep plum and magenta) -------------------------------------- */

#player.aes-skin--violet {
  --k-font:       "Helvetica Neue", Arial, sans-serif;
  --k-font-lcd:   "Share Tech Mono", "Courier New", monospace;
  --k-shell:      linear-gradient(180deg, #322A44, #1D1829);
  --k-edge:       #120F1A;
  --k-bevel-hi:   #574A73;
  --k-bevel-lo:   #16121F;
  --k-title:      linear-gradient(180deg, #443A5C 0%, #2C2540 55%, #1D1829 100%);
  --k-title-fg:   #BCAFD6;
  --k-lcd:        #0D0916;
  --k-lcd-inset:  rgba(0,0,0,.9);
  --k-lcd-fg:     #E48CFF;
  --k-lcd-dim:    #7A4C93;
  --k-lcd-glow:   rgba(228,140,255,.42);
  --k-btn:        linear-gradient(180deg, #3E3556, #262036);
  --k-btn-hover:  linear-gradient(180deg, #4B4067, #302842);
  --k-btn-down:   #17121F;
  --k-btn-fg:     #C6B8DE;
  --k-btn-fg-hi:  #FFFFFF;
  --k-accent:     #C45CFF;
  --k-trough:     #16101F;
  --k-fill:       linear-gradient(180deg, #C45CFF, #61258A);
  --k-fill-hi:    rgba(232,180,255,.5);
  --k-list-fg:    #9C8DB8;
  --k-list-hover: #241D33;
  --k-list-on:    #4A1D6B;
  --k-list-on-fg: #F4E4FF;
  --k-list-dead:  #5A5070;
  --k-chip-on:    #35104F;
  --k-chip-on-edge: #240A36;
  --k-chip-on-fg: #E48CFF;
  --k-viz-1:      #8B3FBF;
  --k-viz-2:      #EEB4FF;
}

/* -- EMBER  (near-black and hot coal) ------------------------------------- */

#player.aes-skin--ember {
  --k-font:       "Helvetica Neue", Arial, sans-serif;
  --k-font-lcd:   "Share Tech Mono", "Courier New", monospace;
  --k-shell:      linear-gradient(180deg, #2A2222, #171212);
  --k-edge:       #0E0A0A;
  --k-bevel-hi:   #4A3B3B;
  --k-bevel-lo:   #120D0D;
  --k-title:      linear-gradient(180deg, #3A2E2E 0%, #241C1C 55%, #171212 100%);
  --k-title-fg:   #C9AFAF;
  --k-lcd:        #0C0707;
  --k-lcd-inset:  rgba(0,0,0,.92);
  --k-lcd-fg:     #FF6A3D;
  --k-lcd-dim:    #8A3A1E;
  --k-lcd-glow:   rgba(255,106,61,.45);
  --k-btn:        linear-gradient(180deg, #362B2B, #211919);
  --k-btn-hover:  linear-gradient(180deg, #433636, #2B2121);
  --k-btn-down:   #130E0E;
  --k-btn-fg:     #CBB4B4;
  --k-btn-fg-hi:  #FFFFFF;
  --k-accent:     #FF5722;
  --k-trough:     #140F0F;
  --k-fill:       linear-gradient(180deg, #FF5722, #8C2408);
  --k-fill-hi:    rgba(255,170,130,.5);
  --k-list-fg:    #A38C8C;
  --k-list-hover: #1F1818;
  --k-list-on:    #6B2109;
  --k-list-on-fg: #FFE0D2;
  --k-list-dead:  #574848;
  --k-chip-on:    #451504;
  --k-chip-on-edge: #2E0E02;
  --k-chip-on-fg: #FF6A3D;
  --k-viz-1:      #B8431C;
  --k-viz-2:      #FFA37A;
}

/* -- SLATE  (cool grey, low contrast, quiet) ------------------------------ */

#player.aes-skin--slate {
  --k-font:       "Helvetica Neue", Arial, sans-serif;
  --k-font-lcd:   "Share Tech Mono", "Courier New", monospace;
  --k-shell:      linear-gradient(180deg, #3B4046, #24282C);
  --k-edge:       #14171A;
  --k-bevel-hi:   #5C6369;
  --k-bevel-lo:   #1A1D20;
  --k-title:      linear-gradient(180deg, #4B5157 0%, #33383D 55%, #24282C 100%);
  --k-title-fg:   #B0B7BD;
  --k-lcd:        #121517;
  --k-lcd-inset:  rgba(0,0,0,.8);
  --k-lcd-fg:     #DCE2E7;
  --k-lcd-dim:    #79828A;
  --k-lcd-glow:   rgba(220,226,231,.22);
  --k-btn:        linear-gradient(180deg, #474D53, #2E3338);
  --k-btn-hover:  linear-gradient(180deg, #545B61, #383E43);
  --k-btn-down:   #1C1F22;
  --k-btn-fg:     #BFC6CC;
  --k-btn-fg-hi:  #FFFFFF;
  --k-accent:     #9FB0BD;
  --k-trough:     #1A1D20;
  --k-fill:       linear-gradient(180deg, #9FB0BD, #5A666F);
  --k-fill-hi:    rgba(220,230,238,.5);
  --k-list-fg:    #949CA3;
  --k-list-hover: #272B2F;
  --k-list-on:    #3E4950;
  --k-list-on-fg: #F0F4F7;
  --k-list-dead:  #5E656B;
  --k-chip-on:    #2A3238;
  --k-chip-on-edge: #1C2226;
  --k-chip-on-fg: #DCE2E7;
  --k-viz-1:      #6F7B84;
  --k-viz-2:      #D8E0E6;
}

/* ==========================================================================
   3. MOBILE
   The selector gets its own row rather than competing with four buttons,
   and the volume slider goes: it is a dead control on iOS, where the
   hardware keys own volume.
   ========================================================================== */

@media (max-width: 720px) {
  #player {
    width: calc(100vw - 16px);
    grid-template-columns: auto minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) auto;
    grid-template-areas:
      "title title title title title"
      "lcd   lcd   lcd   lcd   lcd"
      "seek  seek  seek  seek  seek"
      "pl    prev  play  next  eq"
      "sel   sel   sel   sel   sel"
      "eqp   eqp   eqp   eqp   eqp"
      "lhead lhead lhead lhead lhead"
      "list  list  list  list  list";
  }
  #player .pbtn,
  #player .pbtn.pplay { width: 100%; height: 36px; }

  /* AES-SPECIFIC. aes.css carries
        @media(max-width:700px){.pvolwrap,.psel{display:none}}
     which the Cut Society build never had. The chassis reserves a grid row
     for the track select and expects it present, so that hide is reversed
     here. #player .psel (1,1,0) beats .psel (0,1,0), so no !important is
     needed and aes.css is not modified.

     The volume slider stays hidden, which agrees with aes.css: it is a dead
     control on iOS, where the hardware keys own volume. */
  #player .psel     { display: block; }
  #player .pvolwrap { display: none; }

  .aes-lcd-time { font-size: 20px; min-width: 60px; }
  .aes-viz { width: 52px; height: 26px; }
  .aes-wamp-list { max-height: 112px; font-size: 11px; }
  .aes-wamp-row { padding: 7px; }

  .aes-eq-body { gap: 2px; }
  .aes-eq-slider { width: 14px; height: 54px; }
  .aes-eq-label { font-size: 6.5px; }
  .aes-eq-curve { height: 52px; }
  .aes-chip-btn { width: 100%; height: 36px; }
  .aes-skintray { left: 3px; right: 3px; max-width: none; }
  .aes-skinchip { padding: 7px 10px; font-size: 10px; }
}

/* ==========================================================================
   4. MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .aes-lcd-scroll.aes-run b { animation: none; }
  .aes-skinchip, .aes-skinbar-toggle, #player .pbtn { transition: none; }
}