/* SageAmp skins (s10, his call: five real skins, each with its own shape, material and art).
   The DOM never changes between skins. Each skin sets the custom properties below, plus a few shape rules.
   All art is our own CSS; the walnut and brushed-aluminium tiles were generated for us
   (scripts/gen-skin-tiles.mjs). Concepts: design/sageamp-skins/. Avoid-list:
   docs/research/2026-10-18-sageamp-skin-families.md section 6. */

/* ---------- Shared: what every skin can set ---------- */
.window--amp[data-amp-skin] {
  --amp-panel: linear-gradient(180deg, var(--amp-face), var(--amp-face-lo));
  --amp-panel-edge: var(--amp-edge);
  --amp-panel-shadow: inset 0 1px rgb(255 255 255 / 0.1), inset 0 -1px #000;
  --amp-panel-radius: 0;
  --amp-title: var(--amp-cream);
  --amp-title-shadow: 0 1px #000;
  --amp-stripes: linear-gradient(#fff6dc, var(--amp-cream-lo)) top / 100% 3px no-repeat,
    linear-gradient(#fff6dc, var(--amp-cream-lo)) bottom / 100% 3px no-repeat;
  --amp-key: linear-gradient(180deg, #fbfcfe 0%, #dfe3ea 45%, #c3c8d4 55%, #d8dce5 100%);
  --amp-key-down: linear-gradient(180deg, #b8bdc9, #d9dde5);
  --amp-key-edge: #23273a;
  --amp-key-ink: #2a2e40;
  --amp-key-shadow: inset 0 1px #fff, 0 1px 2px rgb(0 0 0 / 0.45);
  --amp-glyph: #2a2e40;
  --amp-led-off: #7e8496;
  --amp-led-on: #8cf03c;
  --amp-track: linear-gradient(180deg, #8fe8ff, #2bb5dc);
  --amp-track-edge: var(--amp-edge);
  --amp-thumb: repeating-linear-gradient(90deg, transparent 0 6px, #7d8395 6px 7px, transparent 7px 8px) center / 10px 8px no-repeat,
    linear-gradient(180deg, #fbfcfe, #c3c8d4);
  --amp-thumb-edge: #23273a;
  --amp-seek-thumb: linear-gradient(180deg, #fbf3da, var(--amp-cream-lo));
  --amp-viz: linear-gradient(0deg, #2fbf3a 0 45%, #e2df2c 72%, #ec5a24 100%);
  --amp-status: #ffd98a;
  --amp-list: var(--amp-green);
  --amp-list-current: #fff;
  --amp-dim: #6a7090;
  --amp-wbtn: linear-gradient(180deg, #4a5175, var(--amp-face-lo)) center / 16px 16px no-repeat,
    linear-gradient(180deg, var(--amp-cream-lo), #000) center / 18px 18px no-repeat;
}
.window--amp[data-amp-skin] :is(.amp__main, .amp__eq, .amp__pl, .amp__vid) {
  background: var(--amp-panel); border-color: var(--amp-panel-edge); box-shadow: var(--amp-panel-shadow); border-radius: var(--amp-panel-radius);
}
.window--amp[data-amp-skin] :is(.window__titlebar, .amp__bar) { color: var(--amp-title); }
.window--amp[data-amp-skin] :is(.window__title, .amp__bar span) { text-shadow: var(--amp-title-shadow); }
.window--amp[data-amp-skin] :is(.window__title, .amp__bar span)::before,
.window--amp[data-amp-skin] :is(.window__title, .amp__bar span)::after { background: var(--amp-stripes); }
.window--amp[data-amp-skin] .window__btn { background: var(--amp-wbtn); }
.window--amp[data-amp-skin] :is(.amp__transport button, .amp__skin, .amp__toggle, .amp__lit, .amp__mini, .amp__minis i) {
  border-color: var(--amp-key-edge); background: var(--amp-key); color: var(--amp-key-ink); box-shadow: var(--amp-key-shadow);
}
.window--amp[data-amp-skin] :is(.amp__transport button, .amp__skin, .amp__toggle, .amp__lit, .amp__mini):active { background: var(--amp-key-down); }
.window--amp[data-amp-skin] .amp__transport svg { fill: var(--amp-glyph); stroke: none; }
.window--amp[data-amp-skin] .amp__dot { background: var(--amp-led-off); }
.window--amp[data-amp-skin] [aria-pressed="true"] > .amp__dot { background: var(--amp-led-on); box-shadow: 0 0 5px var(--amp-led-on); }
.window--amp[data-amp-skin] .amp input[type="range"]::-webkit-slider-runnable-track { border-color: var(--amp-track-edge); background: var(--amp-track); }
.window--amp[data-amp-skin] .amp input[type="range"]::-moz-range-track { border-color: var(--amp-track-edge); background: var(--amp-track); }
.window--amp[data-amp-skin] .amp input[type="range"]::-webkit-slider-thumb { border-color: var(--amp-thumb-edge); background: var(--amp-thumb); }
.window--amp[data-amp-skin] .amp input[type="range"]::-moz-range-thumb { border-color: var(--amp-thumb-edge); background: var(--amp-thumb); }
.window--amp[data-amp-skin] .amp .amp__seek::-webkit-slider-runnable-track { background: var(--amp-lcd) !important; }
.window--amp[data-amp-skin] .amp .amp__seek::-webkit-slider-thumb { background: var(--amp-seek-thumb) !important; }
.window--amp[data-amp-skin] .amp .amp__seek::-moz-range-thumb { background: var(--amp-seek-thumb); }
.window--amp[data-amp-skin] .amp__viz i { background: var(--amp-viz) bottom / 100% 24px no-repeat; }
.window--amp[data-amp-skin] .amp__status { color: var(--amp-status); }
.window--amp[data-amp-skin] .amp__list button { color: var(--amp-list); }
.window--amp[data-amp-skin] .amp__list button.is-current { color: var(--amp-list-current); }
.window--amp[data-amp-skin] :is(.amp__led, .amp__clutter) { color: var(--amp-dim); }
.window--amp[data-amp-skin] .amp__led.is-on { color: var(--amp-green); }
.window--amp[data-amp-skin] .amp__curve polyline { stroke: var(--amp-green); }
.window--amp[data-amp-skin] .amp__scale { color: var(--amp-text); }

/* Skins drawn as separate objects with the desktop showing between them (Chrome, Tangerine). */
.window--amp:is([data-amp-skin="metal"], [data-amp-skin="candy"]),
.window--amp:is([data-amp-skin="metal"], [data-amp-skin="candy"]):not(.is-active) {
  padding: 0; border: 0; background: transparent; box-shadow: none;
}
.window--amp:is([data-amp-skin="metal"], [data-amp-skin="candy"], [data-amp-skin="wood"]) .window__body { background: transparent; }
.window--amp:is([data-amp-skin="metal"], [data-amp-skin="candy"]) .window__titlebar { margin: 0; border: 1px solid var(--amp-panel-edge); border-bottom: 0; }
.window--amp:is([data-amp-skin="metal"], [data-amp-skin="candy"]) .amp__main { border-top: 0; }
.window--amp:is([data-amp-skin="metal"], [data-amp-skin="candy"]) .amp { gap: 6px; }

/* ---------- 1 Chrome: brushed aluminium, chrome end-caps, a navy glass display, one big knob ---------- */
.window--amp[data-amp-skin="metal"] {
  --amp-face-lo: #9da1a6;
  --amp-edge: #3c4046;
  --amp-lcd: #070b26;
  --amp-green: #74e8ff;
  --amp-green-dim: #1e5f72;
  --amp-text: #172130;
  --amp-cream: #172130;
  --amp-cream-lo: #8a8f96;
  --amp-select: #1d5f73;
  --amp-label: "Trebuchet MS", Tahoma, sans-serif;
  /* Polished chrome end-caps: an 18 px tube down each side, bright core, dark outer edge. */
  --amp-caps: linear-gradient(90deg, #3d4146 0, #8f949a 2px, #f3f4f6 5px, #b9bdc2 9px, #ffffff 12px, #a3a8ae 15px, #50545a 17px, #2f3237 18px,
    transparent 18px calc(100% - 18px), #2f3237 calc(100% - 18px), #50545a calc(100% - 17px), #a3a8ae calc(100% - 15px), #ffffff calc(100% - 12px),
    #b9bdc2 calc(100% - 9px), #f3f4f6 calc(100% - 5px), #8f949a calc(100% - 2px), #3d4146);
  --amp-brushed: linear-gradient(180deg, rgb(255 255 255 / 0.4), rgb(255 255 255 / 0.04) 35%, rgb(0 0 0 / 0) 60%, rgb(0 0 0 / 0.16)),
    url("../assets/sageamp/metal.webp") 0 0 / 192px;
  --amp-screw: radial-gradient(circle, #6b7076 0 1px, #f2f3f5 1.6px 2.6px, #8d9298 3.4px, rgb(0 0 0 / 0.35) 4px, transparent 4.6px);
  --amp-panel: var(--amp-caps), var(--amp-brushed);
  --amp-panel-edge: #565a60;
  --amp-panel-shadow: inset 0 1px #fff, inset 0 -2px rgb(0 0 0 / 0.28), inset 0 0 0 2px rgb(255 255 255 / 0.22);
  --amp-panel-radius: 26px;
  --amp-title-shadow: 0 1px rgb(255 255 255 / 0.7);
  --amp-stripes: linear-gradient(#6f747a, #6f747a) 0 0 / 100% 1px no-repeat, linear-gradient(#fff, #fff) 0 1px / 100% 1px no-repeat,
    linear-gradient(#6f747a, #6f747a) 0 7px / 100% 1px no-repeat, linear-gradient(#fff, #fff) 0 8px / 100% 1px no-repeat;
  --amp-key: linear-gradient(180deg, #fdfdfe, #dfe2e6 48%, #c3c7cc 52%, #e6e8eb);
  --amp-key-down: linear-gradient(180deg, #b9bdc3, #e1e4e7);
  --amp-key-edge: #5f6369;
  --amp-key-ink: #172130;
  --amp-key-shadow: inset 0 1px #fff, 0 1px 2px rgb(0 0 0 / 0.4);
  --amp-glyph: #129ac0;
  --amp-led-off: #8e949b;
  --amp-led-on: #3fdcff;
  --amp-track: linear-gradient(180deg, #8ff0ff, #1fa9d1);
  --amp-track-edge: #3c4b57;
  --amp-thumb: linear-gradient(#25a8cc, #25a8cc) center / 2px 8px no-repeat, linear-gradient(180deg, #fcfcfd, #c2c6cc);
  --amp-thumb-edge: #50555b;
  --amp-seek-thumb: linear-gradient(#25a8cc, #25a8cc) center / 2px 10px no-repeat, linear-gradient(180deg, #fcfcfd, #bfc3c9);
  --amp-viz: linear-gradient(0deg, #1690b3, #74e8ff);
  --amp-status: #553000;
  --amp-list: #8ae9f8;
  --amp-dim: #3c4653;
  --amp-wbtn: linear-gradient(180deg, #fbfbfc, #c4c8cd) center / 16px 16px no-repeat, linear-gradient(180deg, #6a6e74, #3c4046) center / 18px 18px no-repeat;
  filter: drop-shadow(0 6px 9px rgb(0 0 0 / 0.5));
}
.window--amp[data-amp-skin="metal"] .window__titlebar {
  height: 32px;
  border-radius: 40px 40px 0 0;
  background: var(--amp-screw) left 16px top 9px / 10px 10px no-repeat, var(--amp-screw) right 16px top 9px / 10px 10px no-repeat,
    var(--amp-caps), var(--amp-brushed);
  box-shadow: inset 0 1px #fff, inset 0 0 0 2px rgb(255 255 255 / 0.22);
}
.window--amp[data-amp-skin="metal"] .window__title { padding-left: 22px; letter-spacing: 3px; }
.window--amp[data-amp-skin="metal"] .window__buttons { padding-right: 14px; }
.window--amp[data-amp-skin="metal"] .window__btn::before,
.window--amp[data-amp-skin="metal"] .window__btn::after { background: #172130; filter: none; }
.window--amp[data-amp-skin="metal"] .window__btn--max::before { background: none; border-color: #172130; }
.window--amp[data-amp-skin="metal"] .amp__main {
  grid-template-columns: 14px 106px minmax(0, 1fr) 60px;
  gap: 7px;
  padding: 4px 24px 16px;
  border-radius: 0 0 40px 40px;
  background: var(--amp-screw) left 16px bottom 7px / 10px 10px no-repeat, var(--amp-screw) right 16px bottom 7px / 10px 10px no-repeat, var(--amp-panel);
}
.window--amp[data-amp-skin="metal"] :is(.amp__eq, .amp__pl, .amp__vid) { padding-left: 20px; padding-right: 20px; }
.window--amp[data-amp-skin="metal"] .window__title { padding-left: 26px; }
.window--amp[data-amp-skin="metal"] .window__buttons { padding-right: 20px; }
/* Laptop: the info block's rows join the panel grid, so the sliders run under the knob at full length. */
@media (min-width: 721px) {
  .window--amp[data-amp-skin="metal"] .amp__info { display: contents; }
  .window--amp[data-amp-skin="metal"] :is(.amp__clutter, .amp__lcd) { grid-row: 1 / 4; }
  .window--amp[data-amp-skin="metal"] :is(.amp__marquee, .amp__meta) { grid-column: 3; align-self: center; }
  .window--amp[data-amp-skin="metal"] .amp__sliders { align-self: center; }
  .window--amp[data-amp-skin="metal"] .amp__marquee { grid-row: 1; }
  .window--amp[data-amp-skin="metal"] .amp__meta { grid-row: 2; }
  .window--amp[data-amp-skin="metal"] .amp__sliders { grid-column: 3 / 5; grid-row: 3; }
  .window--amp[data-amp-skin="metal"] .amp__main::before,
  .window--amp[data-amp-skin="metal"] .amp__main::after { grid-row: 1 / 3; margin: -8px 0 -6px; }
  .window--amp[data-amp-skin="metal"] .amp__vol { flex: 2.2; }
}
.window--amp[data-amp-skin="metal"] :is(.amp__eq, .amp__pl, .amp__vid) .amp__bar { margin: 0 4px; }
.window--amp[data-amp-skin="metal"] .amp__clutter { background: none; color: #2a3340; }
.window--amp[data-amp-skin="metal"] :is(.amp__lcd, .amp__marquee, .amp__meta b, .amp__pl-time, .amp__curve) {
  border-color: #2b3038;
  background: linear-gradient(162deg, rgb(255 255 255 / 0.13) 0 38%, rgb(255 255 255 / 0) 39%), var(--amp-lcd);
  box-shadow: inset 0 2px 5px rgb(0 0 0 / 0.8), 0 1px rgb(255 255 255 / 0.8);
}
.window--amp[data-amp-skin="metal"] .amp__lcd { border-radius: 6px; }
.window--amp[data-amp-skin="metal"] .amp__list { border-color: #2b3038; background: linear-gradient(180deg, #3d4046, #2a2c30); }
.window--amp[data-amp-skin="metal"] .amp__bands { border-color: #6a6f75; background: rgb(0 0 0 / 0.07); box-shadow: inset 0 1px 3px rgb(0 0 0 / 0.35), 0 1px #fff; }
.window--amp[data-amp-skin="metal"] .amp__band { color: #172130; }
.window--amp[data-amp-skin="metal"] .amp__scale { color: #172130; }
/* The knob: a glowing ring that fills with the volume, and a brushed chrome cap that turns with it. */
.window--amp[data-amp-skin="metal"] .amp__main::before,
.window--amp[data-amp-skin="metal"] .amp__main::after {
  content: ""; grid-column: 4; grid-row: 1; align-self: center; justify-self: center; border-radius: 50%; pointer-events: none;
}
.window--amp[data-amp-skin="metal"] .amp__main::before {
  width: 60px; height: 60px;
  background: conic-gradient(from 225deg, #3fdcff 0 calc(var(--amp-vol-turn, 0.7) * 270deg), rgb(23 33 48 / 0.35) 0 270deg, transparent 0);
  -webkit-mask: radial-gradient(closest-side, transparent 80%, #000 82% 97%, transparent 99%);
  mask: radial-gradient(closest-side, transparent 80%, #000 82% 97%, transparent 99%);
  filter: drop-shadow(0 0 2px #3fdcff);
}
.window--amp[data-amp-skin="metal"] .amp__main::after {
  width: 42px; height: 42px;
  border: 1px solid #5c6066;
  background: radial-gradient(circle at 50% 13%, #0f7f9f 0 2px, transparent 2.6px),
    repeating-radial-gradient(circle, rgb(255 255 255 / 0.18) 0 1px, rgb(0 0 0 / 0.03) 1px 2px),
    conic-gradient(#f4f5f7, #979ca3, #eceef1, #8d9299, #f4f5f7, #9ba0a7, #f4f5f7);
  box-shadow: 0 3px 5px rgb(0 0 0 / 0.45), inset 0 1px #fff, inset 0 -1px rgb(0 0 0 / 0.3);
  rotate: calc(var(--amp-vol-turn, 0.7) * 270deg - 135deg);
}
.window--amp[data-amp-skin="metal"] .amp__transport { gap: 5px; box-shadow: none; }
.window--amp[data-amp-skin="metal"] .amp__led.is-on { color: #04495e; text-shadow: none; }
.window--amp[data-amp-skin="metal"] .amp__transport button {
  width: 35px; height: 35px; border: 1px solid #5f6369; border-radius: 50%;
  background: radial-gradient(circle at 50% 30%, #fff 0 18%, rgb(255 255 255 / 0) 60%), linear-gradient(180deg, #f2f4f6, #aab0b6 58%, #dfe2e5);
  box-shadow: 0 0 0 3px rgb(0 0 0 / 0.07), 0 2px 3px rgb(0 0 0 / 0.4), inset 0 -2px 3px rgb(0 0 0 / 0.16);
}
.window--amp[data-amp-skin="metal"] .amp__transport button + button { border-left: 1px solid #5f6369; }
.window--amp[data-amp-skin="metal"] :is(.amp__toggle, .amp__lit, .amp__skin, .amp__mini, .amp__minis i) { border-radius: 7px; }

/* ---------- 2 Phosphor: a green-on-black terminal slab, square corners, double green frame ---------- */
.window--amp[data-amp-skin="terminal"] {
  --amp-face-lo: #0b0e0b;
  --amp-edge: #1d8f3c;
  --amp-lcd: #000;
  --amp-green: #3dff6e;
  --amp-green-dim: #0e6b28;
  --amp-text: #34e062;
  --amp-cream: #3dff6e;
  --amp-cream-lo: #1d8f3c;
  --amp-select: #0f5a24;
  --amp-label: "Lucida Console", "Courier New", ui-monospace, monospace;
  --amp-panel: repeating-linear-gradient(180deg, rgb(61 255 110 / 0.035) 0 1px, transparent 1px 3px), linear-gradient(180deg, #0d120d, #070a07);
  --amp-panel-edge: #1fa046;
  --amp-panel-shadow: inset 0 0 0 2px #010501, inset 0 0 0 3px #0f5a24, inset 0 0 22px rgb(61 255 110 / 0.07);
  --amp-title-shadow: 0 0 6px rgb(61 255 110 / 0.6);
  --amp-stripes: linear-gradient(#24c64f, #24c64f) top / 100% 1px no-repeat, linear-gradient(#24c64f, #24c64f) bottom / 100% 1px no-repeat;
  --amp-key: #000;
  --amp-key-down: #3dff6e;
  --amp-key-edge: #2bd659;
  --amp-key-ink: #3dff6e;
  --amp-key-shadow: inset 0 0 6px rgb(61 255 110 / 0.18);
  --amp-glyph: #3dff6e;
  --amp-led-off: #0f4a1e;
  --amp-led-on: #3dff6e;
  --amp-track: linear-gradient(180deg, #3dff6e, #17a83f);
  --amp-track-edge: #1d8f3c;
  --amp-thumb: linear-gradient(#04300f, #04300f) center / 2px 8px no-repeat, linear-gradient(180deg, #7dff9c, #26c853);
  --amp-thumb-edge: #9dffb5;
  --amp-seek-thumb: linear-gradient(#04300f, #04300f) center / 22px 2px no-repeat, linear-gradient(180deg, #7dff9c, #26c853);
  --amp-viz: linear-gradient(0deg, #138a33, #3dff6e);
  --amp-status: #b4ff9a;
  --amp-list: #3dff6e;
  --amp-list-current: #d9ffe2;
  --amp-dim: #22a447;
  --amp-wbtn: #000 center / 16px 16px no-repeat, linear-gradient(#2bd659, #2bd659) center / 18px 18px no-repeat;
  border-radius: 0;
  border-color: #1d3a24;
  background: #2b2f2b;
}
.window--amp[data-amp-skin="terminal"]:not(.is-active) { background: #2b2f2b; }
.window--amp[data-amp-skin="terminal"] .window__titlebar { border-radius: 0; background: #2b2f2b; }
.window--amp[data-amp-skin="terminal"] .window__btn::before,
.window--amp[data-amp-skin="terminal"] .window__btn::after { background: #3dff6e; filter: none; }
.window--amp[data-amp-skin="terminal"] .window__btn--max::before { background: none; border-color: #3dff6e; }
.window--amp[data-amp-skin="terminal"] .window__body { background: #2b2f2b; }
.window--amp[data-amp-skin="terminal"] .amp { gap: 6px; text-shadow: 0 0 4px rgb(61 255 110 / 0.4); }
.window--amp[data-amp-skin="terminal"] :is(.amp__lcd, .amp__marquee, .amp__meta b, .amp__list, .amp__curve, .amp__bands, .amp__pl-time, .amp__clutter) {
  border: 1px solid #1d8f3c; border-radius: 0; background: #000; box-shadow: inset 0 0 10px rgb(61 255 110 / 0.08);
}
.window--amp[data-amp-skin="terminal"] .amp__video { border: 1px solid #1d8f3c; border-radius: 0; }
.window--amp[data-amp-skin="terminal"] :is(.amp__transport button, .amp__skin, .amp__toggle, .amp__lit, .amp__mini, .amp__minis i, .amp__transport) { border-radius: 0 !important; }
.window--amp[data-amp-skin="terminal"] .amp__transport { gap: 4px; box-shadow: none; }
.window--amp[data-amp-skin="terminal"] .amp__transport button { width: 38px; }
.window--amp[data-amp-skin="terminal"] :is(.amp__toggle, .amp__skin, .amp__lit) { padding: 0 7px; letter-spacing: 0; font-size: 11px; }
.window--amp[data-amp-skin="terminal"] .amp__transport button + button { border-left: 1px solid #2bd659; }
.window--amp[data-amp-skin="terminal"] :is(.amp__transport button, .amp__skin, .amp__toggle, .amp__lit, .amp__mini):hover { background: #0f3d1b; }
.window--amp[data-amp-skin="terminal"] :is(.amp__transport button, .amp__skin, .amp__toggle, .amp__lit, .amp__mini):active { color: #000; text-shadow: none; }
.window--amp[data-amp-skin="terminal"] .amp__transport button:active svg { fill: #000; }
.window--amp[data-amp-skin="terminal"] .amp__dot { border-radius: 0; }
.window--amp[data-amp-skin="terminal"] .amp input[type="range"]::-webkit-slider-runnable-track { border-radius: 0; }
.window--amp[data-amp-skin="terminal"] .amp input[type="range"]::-webkit-slider-thumb { border-radius: 0 !important; box-shadow: 0 0 5px rgb(61 255 110 / 0.5); }
.window--amp[data-amp-skin="terminal"] .amp__time { filter: drop-shadow(0 0 4px rgb(61 255 110 / 0.7)); }
.window--amp[data-amp-skin="terminal"] .amp__colon i { box-shadow: 0 0 3px #3dff6e; }
/* A blinking block cursor after the song title (still with reduced motion). */
.window--amp[data-amp-skin="terminal"] .amp__now::after {
  content: ""; display: inline-block; width: 7px; height: 12px; margin-left: 2px; vertical-align: -1px;
  background: currentColor; animation: amp-blink 1.1s steps(1) infinite;
}
@keyframes amp-blink { 50% { opacity: 0; } }

/* ---------- 3 Walnut: a 1970s receiver, walnut cheeks, black faceplates with brass trim ---------- */
.window--amp[data-amp-skin="wood"] {
  --amp-face-lo: #1a120c;
  --amp-edge: #000;
  --amp-lcd: #0b0704;
  --amp-green: #ffb347;
  --amp-green-dim: #6b4512;
  --amp-text: #ead8b2;
  --amp-cream: #f3e4c4;
  --amp-cream-lo: #b8913f;
  --amp-select: #4f3413;
  --amp-label: "Trebuchet MS", Tahoma, sans-serif;
  --amp-brass: repeating-linear-gradient(90deg, rgb(255 255 255 / 0.07) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, #f0d892, #c19b48 50%, #9c7a2f 51%, #b8913f);
  --amp-wood: linear-gradient(180deg, rgb(255 214 160 / 0.26), rgb(255 190 120 / 0.1) 45%, rgb(70 25 0 / 0.1)), url("../assets/sageamp/wood.webp") 0 0 / 256px;
  --amp-brass-line: linear-gradient(180deg, #f3dc98, #c9a24f 45%, #8c6c27);
  /* Charcoal faceplates with a brushed brass trim line along the top and bottom, as in the concept. */
  --amp-panel: var(--amp-brass-line) top / 100% 3px no-repeat, var(--amp-brass-line) bottom / 100% 3px no-repeat,
    linear-gradient(180deg, #282420, #181513);
  --amp-panel-edge: #c9a24f;
  --amp-panel-shadow: inset 0 0 0 1px #3a2c16, inset 0 3px 6px rgb(0 0 0 / 0.35), 0 1px rgb(255 230 180 / 0.25), 0 2px 4px rgb(0 0 0 / 0.35);
  --amp-panel-radius: 3px;
  --amp-title-shadow: 0 1px #1a0d04, 0 -1px rgb(255 240 210 / 0.12);
  --amp-stripes: none;
  --amp-key: linear-gradient(180deg, #332a22, #17120e);
  --amp-key-down: linear-gradient(180deg, #120e0b, #2a221b);
  --amp-key-edge: #b48d3e;
  --amp-key-ink: #f1e3c4;
  --amp-key-shadow: inset 0 1px rgb(255 225 160 / 0.2), 0 2px 3px rgb(0 0 0 / 0.6);
  --amp-glyph: #efe1c2;
  --amp-led-off: #4a3a26;
  --amp-led-on: #ffae3c;
  --amp-track: linear-gradient(180deg, #050302, #1e1610);
  --amp-track-edge: #000;
  --amp-thumb: linear-gradient(#b8913f, #b8913f) center / 2px 9px no-repeat, linear-gradient(180deg, #fbf3e0, #d6c39c);
  --amp-thumb-edge: #6a5228;
  --amp-seek-thumb: linear-gradient(#b8913f, #b8913f) center / 2px 10px no-repeat, linear-gradient(180deg, #fbf3e0, #d6c39c);
  --amp-viz: linear-gradient(0deg, #a5560c, #ffb347);
  --amp-status: #ffcf8a;
  --amp-list: #ffbf62;
  --amp-list-current: #fff3dc;
  --amp-dim: #a8936e;
  --amp-wbtn: linear-gradient(180deg, #332a22, #17120e) center / 16px 16px no-repeat, linear-gradient(180deg, #e7cd84, #8c6c27) center / 18px 18px no-repeat;
  padding: 0 13px 12px;
  border: 1px solid #2a1408;
  border-radius: 10px;
  background: var(--amp-wood);
  box-shadow: inset 0 1px rgb(255 220 170 / 0.3), inset 0 -2px rgb(0 0 0 / 0.45), 0 6px 18px rgb(0 0 0 / 0.55);
}
.window--amp[data-amp-skin="wood"]:not(.is-active) { background: var(--amp-wood); box-shadow: inset 0 1px rgb(255 220 170 / 0.3), 0 6px 18px rgb(0 0 0 / 0.45); }
/* Walnut side cheeks with upright grain, a little taller than the case, as on a real receiver. */
.window--amp[data-amp-skin="wood"]::before,
.window--amp[data-amp-skin="wood"]::after {
  content: ""; position: absolute; top: -3px; bottom: -3px; width: 13px; pointer-events: none; z-index: 1;
  background: linear-gradient(90deg, rgb(255 220 170 / 0.18), transparent 40%, rgb(0 0 0 / 0.35)), url("../assets/sageamp/wood-v.webp") 0 0 / 192px;
  box-shadow: 0 2px 4px rgb(0 0 0 / 0.5);
}
.window--amp[data-amp-skin="wood"]::before { left: -1px; border-radius: 8px 3px 3px 8px; }
.window--amp[data-amp-skin="wood"]::after { right: -1px; border-radius: 3px 8px 8px 3px; transform: scaleX(-1); }
.window--amp[data-amp-skin="wood"] .window__titlebar { height: 28px; margin: 0; padding: 0 0 0 4px; border: 0;
  background: radial-gradient(ellipse 40% 70% at 50% 50%, rgb(40 14 0 / 0.42), transparent); } /* a soft shade under the title keeps it readable on the honey wood */
.window--amp[data-amp-skin="wood"] .window__title { letter-spacing: 3px; font-size: 12px; color: #fff5e0; text-shadow: 0 1px 2px #000, 0 0 4px rgb(0 0 0 / 0.6); }
.window--amp[data-amp-skin="wood"] .window__btn::before,
.window--amp[data-amp-skin="wood"] .window__btn::after { background: #f1e3c4; filter: none; }
.window--amp[data-amp-skin="wood"] .window__btn--max::before { background: none; border-color: #f1e3c4; }
.window--amp[data-amp-skin="wood"] .amp { gap: 12px; }
/* Equaliser and video titles sit on a walnut band; the playlist title on a brushed brass strip (as in the concept). */
.window--amp[data-amp-skin="wood"] :is(.amp__eq, .amp__vid) .amp__bar {
  margin: 0 0 5px; height: 26px; background: var(--amp-wood); box-shadow: inset 0 -3px #c9a24f, inset 0 -4px rgb(0 0 0 / 0.45), inset 0 1px rgb(255 225 180 / 0.3);
}
.window--amp[data-amp-skin="wood"] :is(.amp__eq, .amp__vid) .amp__bar span { color: #fff5e0; text-shadow: 0 1px 2px #000; }
.window--amp[data-amp-skin="wood"] .amp__pl .amp__bar {
  margin: 0 0 5px; height: 24px; background: var(--amp-brass); color: #2a1a06; box-shadow: inset 0 -1px rgb(0 0 0 / 0.35), inset 0 1px rgb(255 245 210 / 0.6);
}
.window--amp[data-amp-skin="wood"] .amp__pl .amp__bar span { text-shadow: 0 1px rgb(255 240 200 / 0.55); }
.window--amp[data-amp-skin="wood"] .amp__bar span { letter-spacing: 2.5px; }
.window--amp[data-amp-skin="wood"] :is(.amp__lcd, .amp__marquee, .amp__meta b, .amp__list, .amp__curve, .amp__bands, .amp__pl-time, .amp__clutter) {
  border-color: #000; background: linear-gradient(180deg, #050302, #0f0a06); box-shadow: inset 0 2px 5px #000, 0 1px rgb(255 220 160 / 0.12);
}
.window--amp[data-amp-skin="wood"] .amp__time { filter: drop-shadow(0 0 4px rgb(255 160 50 / 0.7)); }
.window--amp[data-amp-skin="wood"] .amp__list button { text-shadow: 0 0 6px rgb(255 160 50 / 0.35); }
.window--amp[data-amp-skin="wood"] .amp__transport button { width: 37px; }
.window--amp[data-amp-skin="wood"] :is(.amp__toggle, .amp__skin) { padding: 0 8px; }
.window--amp[data-amp-skin="wood"] .amp__transport { gap: 3px; padding: 3px; border-radius: 4px; background: #0a0705; box-shadow: inset 0 1px 3px #000, 0 1px rgb(255 220 160 / 0.12); }
.window--amp[data-amp-skin="wood"] :is(.amp__transport button, .amp__transport button:first-child, .amp__transport button:last-child) { border-radius: 3px; }
.window--amp[data-amp-skin="wood"] .amp__transport button + button { border-left: 1px solid #b48d3e; }
.window--amp[data-amp-skin="wood"] :is(.amp__toggle, .amp__lit, .amp__skin, .amp__mini, .amp__minis i) { border-radius: 3px; }
/* The amber pilot lamp above the SKIN key: lit while music plays. */
.window--amp[data-amp-skin="wood"] .amp__skin { position: relative; }
.window--amp[data-amp-skin="wood"] .amp__skin::before {
  content: ""; position: absolute; top: -9px; left: 50%; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #ffe2a8, #b36a12 70%); box-shadow: 0 0 3px rgb(255 170 60 / 0.5);
}
/* VOLUME and BALANCE knobs: cream caps on ridged brass skirts. They mirror the real sliders (aria-hidden). */
.window--amp[data-amp-skin="wood"] .amp__knobs { display: flex; grid-column: 1 / -1; grid-row: 4; justify-self: end; gap: 16px; padding-right: 4px; }
.window--amp[data-amp-skin="wood"] .amp__status { grid-row: 4; align-self: center; padding-right: 128px; }
.window--amp[data-amp-skin="wood"] .amp__knob { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.window--amp[data-amp-skin="wood"] .amp__knob--vol { --turn: var(--amp-vol-turn, 0.7); }
.window--amp[data-amp-skin="wood"] .amp__knob--bal { --turn: var(--amp-bal-turn, 0.5); }
.window--amp[data-amp-skin="wood"] .amp__knob small { color: #efe1c2; font: 700 9px/1 var(--amp-label); letter-spacing: 1px; }
.window--amp[data-amp-skin="wood"] .amp__knob i {
  position: relative; display: block; width: 32px; height: 32px; border-radius: 50%;
  background: linear-gradient(#3b2a10, #3b2a10) 50% 4px / 2px 11px no-repeat,
    radial-gradient(closest-side, #f6ead0 0 52%, #dcc796 64%, #b8913f 68%, #7d5f22 72%, transparent 73%),
    repeating-conic-gradient(#ecd9a8 0 5deg, #9a7b3b 5deg 10deg);
  box-shadow: 0 0 0 2px #0e0c0a, 0 4px 6px rgb(0 0 0 / 0.7);
  rotate: calc(var(--turn) * 270deg - 135deg);
}
.window--amp[data-amp-skin="wood"] .amp__knob i::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle at 36% 28%, rgb(255 255 255 / 0.75), rgb(255 255 255 / 0) 42%), radial-gradient(circle at 60% 85%, rgb(0 0 0 / 0.28), transparent 55%);
  rotate: calc(135deg - var(--turn) * 270deg); /* the light stays put while the knob turns */
}
.window--amp[data-amp-skin="wood"] .amp.is-playing .amp__skin::before { background: radial-gradient(circle at 40% 35%, #fff4d6, #ffa52e 70%); box-shadow: 0 0 8px #ffa52e, 0 0 2px #fff; }

/* ---------- 4 Tangerine: soft bubble shapes in see-through orange plastic with gel buttons ---------- */
.window--amp[data-amp-skin="candy"] {
  --amp-face-lo: #f07a20;
  --amp-edge: #b8480a;
  --amp-lcd: rgb(64 24 6 / 0.86);
  --amp-green: #ffd8bf;
  --amp-green-dim: #8a4a2a;
  --amp-text: #4a1700;
  --amp-cream: #4a1700;
  --amp-cream-lo: #b8480a;
  --amp-select: rgb(255 150 70 / 0.4);
  --amp-label: "Arial Rounded MT Bold", "Trebuchet MS", "Segoe UI", sans-serif;
  --amp-gloss: linear-gradient(180deg, rgb(255 255 255 / 0.55), rgb(255 255 255 / 0.14) 70%, rgb(255 255 255 / 0) 71%) 50% 3px / calc(100% - 26px) 30px no-repeat;
  /* Faint circuit "guts" seen through the plastic: pads, traces and a few chips. */
  --amp-guts: radial-gradient(circle, rgb(150 45 0 / 0.26) 0 2px, transparent 2.6px) 11px 9px / 46px 36px,
    linear-gradient(rgb(150 45 0 / 0.14), rgb(150 45 0 / 0.14)) 70% 60% / 26px 14px no-repeat,
    linear-gradient(rgb(150 45 0 / 0.12), rgb(150 45 0 / 0.12)) 18% 80% / 18px 10px no-repeat,
    repeating-linear-gradient(90deg, transparent 0 22px, rgb(150 45 0 / 0.13) 22px 23px, transparent 23px 46px),
    repeating-linear-gradient(0deg, transparent 0 17px, rgb(150 45 0 / 0.11) 17px 18px, transparent 18px 36px);
  --amp-plastic: radial-gradient(ellipse at 50% 120%, rgb(255 200 140 / 0.55), transparent 55%),
    linear-gradient(180deg, rgb(255 166 88 / 0.9), rgb(242 112 26 / 0.92) 60%, rgb(218 86 10 / 0.95));
  --amp-panel: var(--amp-gloss), var(--amp-guts), var(--amp-plastic);
  --amp-panel-edge: #c4520c;
  --amp-panel-shadow: inset 0 2px 1px rgb(255 255 255 / 0.75), inset 0 -8px 14px rgb(150 45 0 / 0.42),
    inset 0 0 0 3px rgb(255 196 140 / 0.55), inset 0 0 0 5px rgb(205 85 12 / 0.35), inset 0 0 0 6px rgb(255 220 180 / 0.3),
    0 8px 14px rgb(140 50 0 / 0.35), 0 2px 3px rgb(0 0 0 / 0.25);
  --amp-panel-radius: 34px;
  --amp-title-shadow: 0 1px rgb(255 228 200 / 0.75);
  --amp-stripes: none;
  --amp-key: radial-gradient(ellipse at 50% 16%, rgb(255 255 255 / 0.85) 0 20%, rgb(255 255 255 / 0) 52%), linear-gradient(180deg, #ffb36e, #f4761e 55%, #ffa253);
  --amp-key-down: radial-gradient(ellipse at 50% 80%, rgb(255 255 255 / 0.35), rgb(255 255 255 / 0) 55%), linear-gradient(180deg, #e2650f, #ff9a4a);
  --amp-key-edge: #b0450a;
  --amp-key-ink: #4a1700;
  --amp-key-shadow: inset 0 -2px 3px rgb(150 50 0 / 0.45), inset 0 1px rgb(255 240 220 / 0.9), 0 2px 3px rgb(120 40 0 / 0.45);
  --amp-glyph: #4a1700;
  --amp-led-off: rgb(120 40 0 / 0.45);
  --amp-led-on: #fff7c2;
  --amp-track: linear-gradient(180deg, rgb(80 26 4 / 0.75), rgb(130 45 8 / 0.6));
  --amp-track-edge: #9c3c08;
  --amp-thumb: radial-gradient(ellipse at 50% 22%, rgb(255 255 255 / 0.9) 0 25%, rgb(255 255 255 / 0) 60%), linear-gradient(180deg, #ffad66, #e8640f);
  --amp-thumb-edge: #a8430a;
  --amp-seek-thumb: radial-gradient(ellipse at 50% 22%, rgb(255 255 255 / 0.9) 0 25%, rgb(255 255 255 / 0) 60%), linear-gradient(180deg, #ffad66, #e8640f);
  --amp-viz: linear-gradient(0deg, #ff8a3d, #ffe1c9);
  --amp-status: #300e00;
  --amp-list: #ffd9c0;
  --amp-dim: #5c2306;
  --amp-wbtn: var(--amp-key) center / 18px 18px no-repeat;
}
.window--amp[data-amp-skin="candy"] :is(.window__titlebar, .amp__main, .amp__eq, .amp__pl, .amp__vid) {
  -webkit-backdrop-filter: blur(4px) saturate(1.3);
  backdrop-filter: blur(4px) saturate(1.3);
}
.window--amp[data-amp-skin="candy"] .window__titlebar {
  height: 32px; border-radius: 44px 44px 0 0;
  background: var(--amp-gloss), var(--amp-guts), var(--amp-plastic);
  box-shadow: inset 0 2px 1px rgb(255 255 255 / 0.75), inset 3px 3px 0 0 rgb(255 196 140 / 0.55), inset -3px 3px 0 0 rgb(255 196 140 / 0.55);
}
.window--amp[data-amp-skin="candy"] .window__title { justify-content: center; padding-left: 26px; font-size: 14px; letter-spacing: 1px; }
.window--amp[data-amp-skin="candy"] .window__title::before,
.window--amp[data-amp-skin="candy"] .window__title::after { display: none; }
.window--amp[data-amp-skin="candy"] .window__buttons { padding-right: 18px; }
.window--amp[data-amp-skin="candy"] .window__btn { border-radius: 50%; }
.window--amp[data-amp-skin="candy"] .window__btn::before,
.window--amp[data-amp-skin="candy"] .window__btn::after { background: #4a1700; filter: none; }
.window--amp[data-amp-skin="candy"] .window__btn--max::before { background: none; border-color: #4a1700; }
.window--amp[data-amp-skin="candy"] .amp__main {
  padding: 4px 18px 16px; border-radius: 0 0 44px 44px;
  background: var(--amp-guts), var(--amp-plastic);
}
.window--amp[data-amp-skin="candy"] :is(.amp__eq, .amp__pl, .amp__vid) { padding-left: 12px; padding-right: 12px; padding-bottom: 12px; }
.window--amp[data-amp-skin="candy"] .amp__bar { height: 26px; }
.window--amp[data-amp-skin="candy"] .amp__bar span { justify-content: center; font-size: 12px; }
.window--amp[data-amp-skin="candy"] .amp__bar span::before,
.window--amp[data-amp-skin="candy"] .amp__bar span::after { display: none; }
.window--amp[data-amp-skin="candy"] :is(.amp__lcd, .amp__marquee, .amp__meta b, .amp__list, .amp__curve, .amp__bands, .amp__pl-time, .amp__clutter) {
  border-color: #9c3c08; background: var(--amp-lcd); box-shadow: inset 0 3px 6px rgb(40 10 0 / 0.65), 0 1px rgb(255 230 200 / 0.6);
}
.window--amp[data-amp-skin="candy"] :is(.amp__lcd, .amp__list, .amp__bands) { border-radius: 12px; }
.window--amp[data-amp-skin="candy"] :is(.amp__marquee, .amp__meta b, .amp__curve, .amp__pl-time, .amp__clutter) { border-radius: 8px; }
.window--amp[data-amp-skin="candy"] .amp__clutter { color: #ffcfae; }
.window--amp[data-amp-skin="candy"] .amp__video { border-radius: 14px; }
.window--amp[data-amp-skin="candy"] .amp__band { color: #4a1700; }
/* The equaliser sits straight on the plastic with dark slots, as in the concept (no dark well). */
.window--amp[data-amp-skin="candy"] .amp .amp__bands { border-color: transparent; background: none; box-shadow: none; }
.window--amp[data-amp-skin="candy"] .amp__bands .amp__band { color: #260900; }
.window--amp[data-amp-skin="candy"] .amp__scale { color: #260900; }
.window--amp[data-amp-skin="candy"] .amp__band input[type="range"] { background: none; }
.window--amp[data-amp-skin="candy"] .amp__band input[type="range"]::-webkit-slider-runnable-track { width: 6px; border-radius: 3px; box-shadow: inset 0 1px 2px #000; }
.window--amp[data-amp-skin="candy"] .amp__band input[type="range"]::-webkit-slider-thumb { width: 16px; height: 22px; margin-left: -6px; border-radius: 8px; }
.window--amp[data-amp-skin="candy"] .amp__transport { gap: 5px; box-shadow: none; }
.window--amp[data-amp-skin="candy"] :is(.amp__toggle, .amp__skin) { padding: 0 8px; }
.window--amp[data-amp-skin="candy"] .amp__led { color: #561d00; }
.window--amp[data-amp-skin="candy"] .amp__led.is-on { color: #2a0c00; text-shadow: 0 0 6px rgb(255 245 200 / 0.9); }
.window--amp[data-amp-skin="candy"] .amp__transport button { width: 34px; height: 34px; border: 1px solid #b0450a; border-radius: 50%; }
.window--amp[data-amp-skin="candy"] .amp__transport button + button { border-left: 1px solid #b0450a; }
.window--amp[data-amp-skin="candy"] :is(.amp__toggle, .amp__lit, .amp__skin, .amp__mini) { border-radius: 14px; }
.window--amp[data-amp-skin="candy"] :is(.amp__pair, .amp__minis) { gap: 4px; }
.window--amp[data-amp-skin="candy"] :is(.amp__pair .amp__toggle, .amp__minis i) { border-left: 1px solid #b0450a; border-radius: 14px !important; }
.window--amp[data-amp-skin="candy"] .amp input[type="range"]::-webkit-slider-thumb { border-radius: 8px; }
.window--amp[data-amp-skin="candy"] .amp__seek::-webkit-slider-thumb { border-radius: 10px !important; }
.window--amp[data-amp-skin="candy"] .amp__dot { border-radius: 50%; width: 7px; height: 7px; }

/* ---------- 5 Vector: an angular gunmetal console, cut corners, thin glowing cyan trim ---------- */
.window--amp[data-amp-skin="hud"] {
  --amp-face-lo: #0d1014;
  --amp-edge: #2a3540;
  --amp-lcd: #0a0e12;
  --amp-green: #4ee6ff;
  --amp-green-dim: #1b5f6e;
  --amp-text: #d4e8ef;
  --amp-cream: #4ee6ff;
  --amp-cream-lo: #1d7f95;
  --amp-select: #12404d;
  --amp-label: "Bahnschrift SemiCondensed", "DIN Alternate", "Roboto Condensed", "Arial Narrow", "Trebuchet MS", sans-serif;
  --amp-cut: polygon(14px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px), 0 14px);
  --amp-cut-in: polygon(12px 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px), 0 12px);
  --amp-hex: polygon(7px 0, calc(100% - 7px) 0, 100% 50%, calc(100% - 7px) 100%, 7px 100%, 0 50%);
  --amp-oct: polygon(6px 0, calc(100% - 6px) 0, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 0 calc(100% - 6px), 0 6px);
  --amp-c: #4ee6ff;
  --amp-panel: linear-gradient(135deg, #4ee6ff, #1d7f95 30%, #1d4f5c 50%, #1d7f95 70%, #4ee6ff);
  --amp-panel-edge: transparent;
  --amp-panel-shadow: none;
  --amp-title-shadow: 0 0 6px rgb(78 230 255 / 0.7);
  --amp-stripes: linear-gradient(90deg, transparent, #4ee6ff) center / 100% 2px no-repeat;
  --amp-key: linear-gradient(180deg, #4ee6ff, #1d7f95);
  --amp-key-down: linear-gradient(180deg, #8ff2ff, #4ee6ff);
  --amp-key-edge: transparent;
  --amp-key-ink: #d9f8ff;
  --amp-key-shadow: none;
  --amp-glyph: #4ee6ff;
  --amp-led-off: #2a3a44;
  --amp-led-on: #4ee6ff;
  --amp-track: linear-gradient(180deg, #8ff2ff, #22b8dc);
  --amp-track-edge: #0a0e12;
  --amp-thumb: linear-gradient(#4ee6ff, #4ee6ff) center / 2px 8px no-repeat, linear-gradient(180deg, #4b5662, #232a32);
  --amp-thumb-edge: #6b7c88;
  --amp-seek-thumb: linear-gradient(#4ee6ff, #4ee6ff) center / 20px 2px no-repeat, linear-gradient(180deg, #4b5662, #232a32);
  --amp-viz: linear-gradient(0deg, #137a92, #4ee6ff);
  --amp-status: #ffd98a;
  --amp-list: #63e6f7;
  --amp-dim: #93aab6;
  --amp-wbtn: linear-gradient(180deg, #2c343e, #161b21) center / 16px 16px no-repeat, linear-gradient(180deg, #4ee6ff, #1d7f95) center / 18px 18px no-repeat;
  border-radius: 0;
  border-color: #000;
  background: #0d1014;
}
.window--amp[data-amp-skin="hud"]:not(.is-active) { background: #0d1014; }
.window--amp[data-amp-skin="hud"] .window__titlebar { border-radius: 0; background: linear-gradient(180deg, #1b2129, #0d1014); }
/* Titles sit in a raised visor notch: a line steps up on each side of the title. */
.window--amp[data-amp-skin="hud"] :is(.window__title, .amp__bar span)::before,
.window--amp[data-amp-skin="hud"] :is(.window__title, .amp__bar span)::after { height: 14px; filter: drop-shadow(0 0 2px rgb(78 230 255 / 0.8)); }
.window--amp[data-amp-skin="hud"] :is(.window__title, .amp__bar span)::before {
  background: linear-gradient(#4ee6ff, #4ee6ff) left bottom / calc(100% - 20px) 2px no-repeat,
    linear-gradient(to bottom right, transparent calc(50% - 1.3px), #4ee6ff calc(50% - 0.6px) calc(50% + 0.6px), transparent calc(50% + 1.3px)) right 8px top 0 / 13px 100% no-repeat,
    linear-gradient(#4ee6ff, #4ee6ff) right top / 9px 2px no-repeat;
}
.window--amp[data-amp-skin="hud"] :is(.window__title, .amp__bar span)::after {
  background: linear-gradient(#4ee6ff, #4ee6ff) right bottom / calc(100% - 20px) 2px no-repeat,
    linear-gradient(to top right, transparent calc(50% - 1.3px), #4ee6ff calc(50% - 0.6px) calc(50% + 0.6px), transparent calc(50% + 1.3px)) left 8px top 0 / 13px 100% no-repeat,
    linear-gradient(#4ee6ff, #4ee6ff) left top / 9px 2px no-repeat;
}
.window--amp[data-amp-skin="hud"] .amp__bar { height: 22px; }
.window--amp[data-amp-skin="hud"] .window__btn::before,
.window--amp[data-amp-skin="hud"] .window__btn::after { background: #4ee6ff; filter: none; }
.window--amp[data-amp-skin="hud"] .window__btn--max::before { background: none; border-color: #4ee6ff; }
.window--amp[data-amp-skin="hud"] .window__body { background: #0d1014; }
.window--amp[data-amp-skin="hud"] .amp { gap: 4px; }
/* Panels: a thick gunmetal rim cut at the corners, heavy cyan brackets on every cut corner, a thin cyan trim
   line inside the rim, then the hatched face. clip-path clips borders and shadows, so each layer is its own box. */
.window--amp[data-amp-skin="hud"] :is(.amp__main, .amp__eq, .amp__pl, .amp__vid) {
  position: relative; isolation: isolate; border: 0; clip-path: var(--amp-cut);
  background:
    linear-gradient(var(--amp-c), var(--amp-c)) left 13px top 0 / 30px 4px no-repeat,
    linear-gradient(var(--amp-c), var(--amp-c)) left 0 top 13px / 4px 30px no-repeat,
    linear-gradient(to bottom right, transparent 50%, var(--amp-c) 50% calc(50% + 4px), transparent calc(50% + 4px)) left top / 16px 16px no-repeat,
    linear-gradient(var(--amp-c), var(--amp-c)) right 13px top 0 / 30px 4px no-repeat,
    linear-gradient(var(--amp-c), var(--amp-c)) right 0 top 13px / 4px 30px no-repeat,
    linear-gradient(to bottom left, transparent 50%, var(--amp-c) 50% calc(50% + 4px), transparent calc(50% + 4px)) right top / 16px 16px no-repeat,
    linear-gradient(var(--amp-c), var(--amp-c)) left 13px bottom 0 / 30px 4px no-repeat,
    linear-gradient(var(--amp-c), var(--amp-c)) left 0 bottom 13px / 4px 30px no-repeat,
    linear-gradient(to top right, transparent 50%, var(--amp-c) 50% calc(50% + 4px), transparent calc(50% + 4px)) left bottom / 16px 16px no-repeat,
    linear-gradient(var(--amp-c), var(--amp-c)) right 13px bottom 0 / 30px 4px no-repeat,
    linear-gradient(var(--amp-c), var(--amp-c)) right 0 bottom 13px / 4px 30px no-repeat,
    linear-gradient(to top left, transparent 50%, var(--amp-c) 50% calc(50% + 4px), transparent calc(50% + 4px)) right bottom / 16px 16px no-repeat,
    linear-gradient(180deg, #59626d, #353c45 40%, #2a3038);
}
.window--amp[data-amp-skin="hud"] :is(.amp__main, .amp__eq, .amp__pl, .amp__vid)::before,
.window--amp[data-amp-skin="hud"] :is(.amp__main, .amp__eq, .amp__pl, .amp__vid)::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
}
.window--amp[data-amp-skin="hud"] :is(.amp__main, .amp__eq, .amp__pl, .amp__vid)::before {
  inset: 5px; clip-path: var(--amp-cut-in); background: linear-gradient(135deg, #7ff0ff, #2bb8d8 50%, #7ff0ff);
}
.window--amp[data-amp-skin="hud"] :is(.amp__main, .amp__eq, .amp__pl, .amp__vid)::after {
  inset: 7px; clip-path: var(--amp-cut-in);
  background: repeating-linear-gradient(45deg, rgb(255 255 255 / 0.03) 0 2px, transparent 2px 7px), linear-gradient(180deg, #2c333c, #1b2027);
}
.window--amp[data-amp-skin="hud"] .amp__main { padding: 14px 16px 13px; }
.window--amp[data-amp-skin="hud"] :is(.amp__eq, .amp__pl, .amp__vid) { padding: 7px 11px 13px; }
.window--amp[data-amp-skin="hud"] :is(.amp__lcd, .amp__marquee, .amp__meta b, .amp__list, .amp__curve, .amp__bands, .amp__pl-time, .amp__clutter) {
  border-color: #000; background: var(--amp-lcd); box-shadow: inset 0 1px 4px #000, 0 1px rgb(78 230 255 / 0.15);
}
.window--amp[data-amp-skin="hud"] .amp__time { filter: drop-shadow(0 0 5px rgb(78 230 255 / 0.75)); }
/* A thin scan line sweeps the display (still with reduced motion). */
.window--amp[data-amp-skin="hud"] .amp__lcd { position: relative; overflow: hidden; }
.window--amp[data-amp-skin="hud"] .amp__lcd::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgb(78 230 255 / 0.55), transparent); animation: amp-scan 3.2s linear infinite;
}
@keyframes amp-scan { to { transform: translateY(68px); } }
/* Keys: hexagon-cut transport, octagon-cut toggles; the cyan fill is the edge, the dark face sits inside it. */
.window--amp[data-amp-skin="hud"] .amp__transport { gap: 3px; box-shadow: none; }
.window--amp[data-amp-skin="hud"] .amp__transport button { width: 40px; }
.window--amp[data-amp-skin="hud"] :is(.amp__toggle, .amp__skin) { padding: 0 10px; }
.window--amp[data-amp-skin="hud"] :is(.amp__transport button, .amp__skin, .amp__toggle, .amp__lit, .amp__mini, .amp__minis i) {
  position: relative; isolation: isolate; border: 0 !important; border-radius: 0 !important;
}
.window--amp[data-amp-skin="hud"] .amp__transport button { clip-path: var(--amp-hex); }
.window--amp[data-amp-skin="hud"] :is(.amp__skin, .amp__toggle, .amp__lit, .amp__mini, .amp__minis i) { clip-path: var(--amp-oct); }
.window--amp[data-amp-skin="hud"] :is(.amp__transport button, .amp__skin, .amp__toggle, .amp__lit, .amp__mini, .amp__minis i)::before {
  content: ""; position: absolute; inset: 1.5px; z-index: -1; pointer-events: none; clip-path: inherit;
  background: linear-gradient(180deg, #313a45, #171c22);
}
.window--amp[data-amp-skin="hud"] :is(.amp__transport button, .amp__skin, .amp__toggle, .amp__lit, .amp__mini):active::before { background: linear-gradient(180deg, #1d6476, #12404d); }
.window--amp[data-amp-skin="hud"] :is(.amp__pair, .amp__minis) { gap: 4px; }
.window--amp[data-amp-skin="hud"] .amp__dot { border-radius: 1px; }

/* ---------- The faceplate swap (s10): lift, change at the midpoint, settle. Under 400 ms. ---------- */
.window--amp.is-amp-swapping { animation: amp-swap 320ms cubic-bezier(0.3, 0.7, 0.3, 1); transform-origin: 50% 0; }
@keyframes amp-swap {
  0% { transform: none; opacity: 1; }
  45% { transform: perspective(900px) translateY(-6px) rotateX(9deg) scale(0.975); opacity: 0.5; }
  100% { transform: none; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .window--amp.is-amp-swapping { animation: none; }
  .window--amp[data-amp-skin] .amp__now::after, .window--amp[data-amp-skin] .amp__lcd::after { animation: none; }
}

/* ---------- Phones: narrower trims; the Chrome knob steps aside so the controls keep their room ---------- */
@media (max-width: 720px), (pointer: coarse) and (max-height: 500px) {
  .window--amp[data-amp-skin="metal"] .amp__main { grid-template-columns: 14px 118px minmax(0, 1fr); padding: 4px 20px 14px; }
  .window--amp[data-amp-skin="metal"] :is(.amp__eq, .amp__pl, .amp__vid) { padding-left: 18px; padding-right: 18px; }
  .window--amp[data-amp-skin="metal"] .amp__main::before,
  .window--amp[data-amp-skin="metal"] .amp__main::after { display: none; }
  .window--amp[data-amp-skin="metal"] .window__titlebar { height: 34px; }
  .window--amp[data-amp-skin="metal"] .window__title { padding-left: 22px; }
  .window--amp[data-amp-skin="metal"] .window__titlebar { background-position: left 14px top 12px, right 14px top 12px, 0 0, 0 0; }
  .window--amp[data-amp-skin="metal"] .window__buttons { padding-right: 10px; }
  .window--amp[data-amp-skin="candy"] .window__titlebar { height: 36px; }
  .window--amp[data-amp-skin="candy"] .amp__main { padding: 4px 12px 14px; }
  .window--amp[data-amp-skin="wood"] { padding: 0 9px 9px; }
  .window--amp[data-amp-skin="wood"]::before, .window--amp[data-amp-skin="wood"]::after { width: 9px; }
  .window--amp[data-amp-skin="hud"] .amp__main { padding: 10px 10px 10px; }
}