/* ---------------------------------------------------------------------------
   Skin: Winamp
   Every rule here starts with html[data-skin="winamp"], so this file does
   nothing until the head script in index.html sets that attribute. Removing
   the skin means deleting this file, its <link> and fonts/winamp/.

   Ported 2026-09-13 from .scratch/motion-playground/, where the user approved
   it on the phone, then extended to every part aero.css reaches. A 2000s media
   player redrawn in CSS: gunmetal panels with bevels, ridged title bars, silver
   keys, LED toggles, black LCD panels with green text. Nothing is copied from
   Nullsoft's artwork, and no rule writes the player's name. Skins ticket 03.

   The user's decisions (.scratch/skins/spec.md, "Next skins"): pixel type in
   title bars only; LCD digits on counts that have their own element, CSS
   only; gold stays the app's gold; Silkscreen's small capitals accepted; the
   LCD green and --working may be the same family.

   NO REDUCED-MOTION HANDLING for the spectrum, also the user's call. Under
   reduced motion style.css's blanket shortens its animation, and an infinite
   animation cut short flickers rather than stops.

   Most selectors keep the playground's :is(.screen, .viewer, .keepbar) scope,
   as aero.css does: it keeps the tokens and push-button rules off anything
   that is not the app's own surface.
   --------------------------------------------------------------------------- */

/* SILKSCREEN (OFL, no Reserved Font Name) for title bars. It draws lowercase
   as small capitals, so "e621" looks like "E621"; no text-transform is used.
   DSEG7 Classic Bold (OFL, "DSEG" a Reserved Font Name, so unmodified) for
   counts. Its unicode-range is digits, point, colon and slash only: its
   seven-segment letters misread ("MB" came out as "Nb"), so letters fall
   through to the monospace face. A face only downloads when used. */
@font-face { font-family: "Silkscreen"; font-weight: 400; font-display: swap; src: url("../fonts/winamp/silkscreen-latin.woff2") format("woff2"); }
@font-face { font-family: "DSEG7"; font-weight: 400; font-display: swap; src: url("../fonts/winamp/dseg7-classic-bold.woff2") format("woff2"); unicode-range: U+0030-0039, U+002E, U+002F, U+003A; }

html[data-skin="winamp"] body { background: #111119; }

html[data-skin="winamp"] :is(.screen, .viewer, .keepbar) {
  --wa-face: #2b2b3c;
  --wa-key: linear-gradient(180deg, #4a4a62, #303044);
  --wa-edge-hi: #6b6b86;
  --wa-edge-lo: #0c0c14;
  --wa-bevel: inset 1px 1px 0 var(--wa-edge-hi), inset -1px -1px 0 var(--wa-edge-lo);
  --wa-sunk: inset 1px 1px 0 var(--wa-edge-lo), inset -1px -1px 0 var(--wa-edge-hi);
  --wa-lcd: #00e000;
  --wa-lcd-dim: #3fa03f;
  --wa-lcd-off: #0a3a0a;
  --wa-glow: 0 0 5px rgba(0, 224, 0, 0.6);
  --wa-select: rgba(0, 0, 198, 0.5);   /* the playlist's selected row */
  --wa-ridges: repeating-linear-gradient(180deg, #c9a64a 0 1px, #5c4a1c 1px 2px, transparent 2px 4px);
  --wa-pixel: "Silkscreen", ui-monospace, monospace;
  --wa-digits: "DSEG7", ui-monospace, monospace;

  --bg: #111119;
  --bg-raised: var(--wa-face);
  --bg-pressed: #1d1d2a;
  --line: #000;
  --text: #e8e8f2;
  --text-dim: #adadc4;
  --text-faint: #8b8ba6;
  --text-ghost: #75758f;
  --working: var(--wa-lcd);
  --radius: 0;
  --radius-lg: 0;
}

html[data-skin="winamp"] :is(.screen, .viewer, .keepbar) :focus-visible {
  outline: 1px dotted var(--wa-lcd);
  outline-offset: -3px;
}
html[data-skin="winamp"] :is(.headline, .feedhead__name) { letter-spacing: 0; }
html[data-skin="winamp"] .settings__link { color: var(--wa-lcd); }

/* COUNTS IN LCD DIGITS: every count with an element of its own. Numbers
   written inside sentences stay in the ordinary face. */
html[data-skin="winamp"] :is(.badge, .nametile__badge, .feedbtn__count, .source__count, .follows__count, .suggest__count, .viewer__count, .storage__total) {
  font-family: var(--wa-digits);
}

/* --- Title bars ------------------------------------------------------------
   Ridges run the width of the bar; the title and the keys sit on patches of
   plain face so the ridges show between them. */
html[data-skin="winamp"] .appbar {
  border-bottom: 1px solid #000;
  background: var(--wa-ridges) 0 50% / 100% 12px no-repeat, var(--wa-face);
  box-shadow: var(--wa-bevel);
}
html[data-skin="winamp"] .appbar__title {
  flex: 0 1 auto;
  margin: 0 0.25rem;
  padding: 0 0.5rem;
  background: var(--wa-face);
  font-family: var(--wa-pixel);
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0;
  color: #fff;
}
/* The title no longer takes the slack, so the first thing after it does. */
html[data-skin="winamp"] .appbar__title + * { margin-left: auto; }
html[data-skin="winamp"] :is(.appbar, .viewer__bar) .iconbtn {
  border-radius: 0;
  background: var(--wa-key);
  box-shadow: var(--wa-bevel);
  color: #dcdce8;
}
html[data-skin="winamp"] :is(.appbar, .viewer__bar) .iconbtn:active { background: var(--bg-pressed); box-shadow: var(--wa-sunk); }
/* STATE COLOURS SURVIVE THE KEY GLYPHS. The rule above outranks style.css's
   one-class state rules, as aero.css found. */
html[data-skin="winamp"] .viewer__bar .viewer__star--on { color: var(--accent); }
html[data-skin="winamp"] .viewer__bar .viewer__favorite--on { color: #ff5c8a; }
html[data-skin="winamp"] .viewer__bar .viewer__pocket-open--lazy { color: var(--accent); }

html[data-skin="winamp"] .viewer__bar {
  padding-top: calc(var(--safe-top) + 0.375rem);
  padding-bottom: 0.375rem;
  border-bottom: 1px solid #000;
  background: var(--wa-face);
  box-shadow: var(--wa-bevel);
}
/* The count is the LCD's time readout; the group is its scrolling title. */
html[data-skin="winamp"] .viewer__count {
  padding: 0.3125rem 0.5rem;
  background: #000;
  box-shadow: var(--wa-sunk);
  color: var(--wa-lcd);
  text-shadow: var(--wa-glow);
}
html[data-skin="winamp"] .viewer__group {
  border-radius: 0;
  background: #000;
  box-shadow: var(--wa-sunk);
  color: var(--wa-lcd);
  text-shadow: var(--wa-glow);
}

/* --- Cards you open: plain bevelled panels ---------------------------------
   The picker's bands, the shelf's squares, creators, and the platform
   screen's feed rows. Press is the playlist's blue. The shelf's gold "new"
   ring is style.css's own ::after and is left alone. */
html[data-skin="winamp"] :is(.nametile, .feedbtn) :is(.cardfield, .ghost) { display: none; }
html[data-skin="winamp"] :is(.nametile, .feedbtn) {
  border: 1px solid #000;
  background: var(--wa-face);
  box-shadow: var(--wa-bevel);
}
html[data-skin="winamp"] :is(.nametile--band, .feedbtn):active { transform: none; }
html[data-skin="winamp"] :is(.nametile__name, .feedbtn__name) { letter-spacing: 0; }
html[data-skin="winamp"] :is(.nametile__meta, .feedbtn__note) { color: var(--wa-lcd); }
html[data-skin="winamp"] .feedbtn__chev { color: var(--text-dim); }
html[data-skin="winamp"] :is(.nametile--band, .feedbtn, .tile):active::after { border: 0; background: var(--wa-select); }

/* BUSY: a small spectrum analyser in the corner instead of the green outline.
   Five bars, each its own background layer, their heights animated together. */
html[data-skin="winamp"] .nametile--capturing {
  outline: 0;
  background-color: var(--wa-face);
  background-image:
    linear-gradient(0deg, var(--wa-lcd), #d8d800 75%, #e03000),
    linear-gradient(0deg, var(--wa-lcd), #d8d800 75%, #e03000),
    linear-gradient(0deg, var(--wa-lcd), #d8d800 75%, #e03000),
    linear-gradient(0deg, var(--wa-lcd), #d8d800 75%, #e03000),
    linear-gradient(0deg, var(--wa-lcd), #d8d800 75%, #e03000);
  background-repeat: no-repeat;
  background-position:
    right 2.5rem bottom 1rem, right 2.125rem bottom 1rem, right 1.75rem bottom 1rem,
    right 1.375rem bottom 1rem, right 1rem bottom 1rem;
  animation: wa-spectrum 900ms linear infinite;
}
@keyframes wa-spectrum {
  0%, 100% { background-size: 4px 0.75rem, 4px 2rem, 4px 1.25rem, 4px 2.5rem, 4px 0.5rem; }
  25%      { background-size: 4px 2rem, 4px 1rem, 4px 2.5rem, 4px 1.5rem, 4px 1.25rem; }
  50%      { background-size: 4px 1.25rem, 4px 2.5rem, 4px 0.75rem, 4px 2rem, 4px 2.25rem; }
  75%      { background-size: 4px 2.5rem, 4px 1.5rem, 4px 2rem, 4px 0.5rem, 4px 1rem; }
}

/* Subreddit results: the same panel, as buttons beside a Follow key. */
html[data-skin="winamp"] .subresult__open {
  border: 1px solid #000;
  border-radius: 0;
  background: var(--wa-face);
  box-shadow: var(--wa-bevel);
}
html[data-skin="winamp"] .subresult__open:active { background: var(--wa-select); }
html[data-skin="winamp"] .subresult__title { color: var(--text-dim); }

/* The niche screen's featured squares are photographs: a black frame only,
   outside, because the picture would cover an inset one. */
html[data-skin="winamp"] .nichecard { border-radius: 0; box-shadow: 0 0 0 1px #000; }
html[data-skin="winamp"] .nichesaved__rule { border-top-color: #3a3a50; }

/* --- Thumbnails ------------------------------------------------------------ */
html[data-skin="winamp"] .tile { border-radius: 0; box-shadow: inset 0 0 0 1px #000; }
html[data-skin="winamp"] .tile:active { transform: none; }

/* --- Chips: the player's small toggle keys, an LED lit when on. Tag chips
   are keys without the LED, and keep their category colours. ------------- */
html[data-skin="winamp"] :is(.orderchip, .tagchip) {
  border: 1px solid #000;
  border-radius: 0;
  background: var(--wa-key);
  box-shadow: var(--wa-bevel);
}
html[data-skin="winamp"] :is(.orderchip, .tagchip):active { border-color: #000; box-shadow: var(--wa-sunk); }
html[data-skin="winamp"] .tagchip--inert { border-color: transparent; background: none; box-shadow: none; }
html[data-skin="winamp"] .orderchip {
  position: relative;
  padding-left: 1.5rem;
  color: var(--text);
}
html[data-skin="winamp"] .orderchip::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0.5rem;
  width: 0.5rem;
  height: 0.5rem;
  margin-top: -0.25rem;
  background: var(--wa-lcd-off);
  box-shadow: inset 0 0 0 1px #000;
}
html[data-skin="winamp"] .orderchip--on { border-color: #000; background: var(--wa-key); color: #fff; }
html[data-skin="winamp"] .orderchip--on::before { background: var(--wa-lcd); box-shadow: 0 0 6px var(--wa-lcd); }

/* --- Settings: each card a small window, its heading the title bar. ------- */
html[data-skin="winamp"] .source__name {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0.375rem 0.5rem;
  border: 1px solid #000;
  border-bottom: 0;
  background: var(--wa-face);
  box-shadow: var(--wa-bevel);
  font-family: var(--wa-pixel);
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0;
  color: #fff;
}
html[data-skin="winamp"] :is(.source__name, .status--empty .status__text, .status--error .status__text, .lookup__title, .viewer__peek-name)::after {
  content: "";
  flex: 1;
  min-width: 1rem;
  height: 10px;
  background: var(--wa-ridges);
}
html[data-skin="winamp"] .settings__form {
  border: 1px solid #000;
  border-top: 0;
  border-radius: 0;
  background: #1c1c28;
  box-shadow: var(--wa-bevel);
}
html[data-skin="winamp"] :is(.settings__form, .status--empty, .status--error, .shelf__empty) > :is(.cardfield, .ghost) { display: none; }

/* Tabs and one-of-several choices, the feed's Live/Kept switch among them:
   rows of keys, the chosen one held down with a green label. */
html[data-skin="winamp"] :is(.segchoice, .keepswitch) {
  gap: 0.25rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
}
html[data-skin="winamp"] :is(.segseg, .keepseg) {
  border: 1px solid #000;
  border-radius: 0;
  background: var(--wa-key);
  box-shadow: var(--wa-bevel);
  color: var(--text-dim);
}
html[data-skin="winamp"] :is(.segseg--on, .keepseg--on) {
  background: var(--bg-pressed);
  box-shadow: var(--wa-sunk);
  color: var(--wa-lcd);
  text-shadow: var(--wa-glow);
}

/* Text boxes: black LCD wells with green text. The platform screen's search
   bar is a button dressed as one, so it gets the well too. */
html[data-skin="winamp"] :is(.field__input, .lookup__name, .field__select, .search__input, .nichefilter__input, .searchbar) {
  border: 1px solid #000;
  border-radius: 0;
  background: #000;
  box-shadow: var(--wa-sunk);
  color: var(--wa-lcd);
}
html[data-skin="winamp"] :is(.field__input, .lookup__name, .search__input, .nichefilter__input)::placeholder { color: var(--wa-lcd-dim); }
html[data-skin="winamp"] :is(.field__input, .lookup__name, .field__select, .search__input, .nichefilter__input):focus { outline: 1px dotted var(--wa-lcd); outline-offset: -4px; }
html[data-skin="winamp"] .field__select option { background: #000; }
html[data-skin="winamp"] .searchbar { color: var(--wa-lcd-dim); }
html[data-skin="winamp"] .searchbar__icon { color: var(--wa-lcd-dim); }
html[data-skin="winamp"] .searchbar:active { outline: 1px dotted var(--wa-lcd); outline-offset: -4px; }

/* LISTS OF WORDS ARE THE PLAYLIST: recent searches and tag suggestions in one
   black box, green rows, the playlist's blue selection on press. */
html[data-skin="winamp"] :is(.recents__list, .suggest__list) {
  gap: 0;
  border: 1px solid #000;
  background: #000;
  box-shadow: var(--wa-sunk);
  overflow: hidden;
  --text: var(--wa-lcd);
  --text-dim: var(--wa-lcd-dim);
}
html[data-skin="winamp"] :is(.recents__item, .suggest__row) {
  border-radius: 0;
  background: none;
  color: var(--text);
}
html[data-skin="winamp"] :is(.recents__item:active, .suggest__row:active) { background: #0000c6; --text: #fff; --text-dim: #d0d0ff; }

/* Buttons: silver transport keys. The main action is a dark key whose label
   glows green, as a lit display does. A feed header's Follow is a key too. */
html[data-skin="winamp"] :is(.screen, .viewer, .keepbar) :is(.btn, .field__reveal, .feedhead__follow, .tagdrawer__toggle) {
  border: 1px solid #000;
  border-radius: 0;
  background: linear-gradient(180deg, #cfcfdc, #9a9aae);
  box-shadow: inset 1px 1px 0 #f4f4ff, inset -1px -1px 0 #5a5a6e;
  color: #15151f;
  font-weight: 600;
}
html[data-skin="winamp"] :is(.screen, .viewer, .keepbar) :is(.btn, .field__reveal, .feedhead__follow, .tagdrawer__toggle):active {
  background: linear-gradient(180deg, #9a9aae, #cfcfdc);
  box-shadow: inset 1px 1px 0 #5a5a6e, inset -1px -1px 0 #f4f4ff;
  opacity: 1;
}
html[data-skin="winamp"] :is(.screen, .viewer, .keepbar) .btn--primary {
  background: var(--wa-key);
  box-shadow: var(--wa-bevel);
  color: var(--wa-lcd);
  font-weight: 700;
  text-shadow: var(--wa-glow);
}
html[data-skin="winamp"] :is(.screen, .viewer, .keepbar) .btn--primary:active { background: var(--bg-pressed); box-shadow: var(--wa-sunk); filter: none; }
/* FOLLOWING IS THE KEY HELD DOWN, with a lit label, as a chosen segment is.
   Without this the key rule would make Follow and Following look the same. */
html[data-skin="winamp"] :is(.screen, .viewer) :is(.btn.subresult__follow--on, .feedhead__follow--on) {
  background: var(--bg-pressed);
  box-shadow: var(--wa-sunk);
  color: var(--wa-lcd);
  text-shadow: var(--wa-glow);
}
html[data-skin="winamp"] :is(.screen, .viewer, .keepbar) .btn.btn:disabled {
  background: #2a2a38;
  box-shadow: none;
  color: var(--text-faint);
  text-shadow: none;
}

/* The switch: a toggle key with an LED, held down when on. Same markup in
   Settings and in the viewer's Pocket. */
html[data-skin="winamp"] .switchrow__track,
html[data-skin="winamp"] .switchrow__input:checked ~ .switchrow__track {
  width: 3.75rem;
  height: 1.75rem;
  border: 1px solid #000;
  border-radius: 0;
  background: var(--wa-key);
  box-shadow: var(--wa-bevel);
}
html[data-skin="winamp"] .switchrow__input:checked ~ .switchrow__track { background: var(--bg-pressed); box-shadow: var(--wa-sunk); }
html[data-skin="winamp"] .switchrow__track::after {
  content: "ON";
  position: absolute;
  top: 50%;
  right: 0.5rem;
  transform: translateY(-50%);
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--text-dim);
}
html[data-skin="winamp"] .switchrow__input:checked ~ .switchrow__track::after { color: var(--wa-lcd); }
html[data-skin="winamp"] .switchrow__knob,
html[data-skin="winamp"] .switchrow__input:checked ~ .switchrow__track .switchrow__knob {
  top: 50%;
  left: 0.5rem;
  width: 0.625rem;
  height: 0.625rem;
  margin-top: -0.3125rem;
  border-radius: 0;
  background: var(--wa-lcd-off);
  box-shadow: inset 0 0 0 1px #000;
  transform: none;
}
html[data-skin="winamp"] .switchrow__input:checked ~ .switchrow__track .switchrow__knob { background: var(--wa-lcd); box-shadow: 0 0 6px var(--wa-lcd); }

/* Storage: the total on the LCD, the bar a segmented LED meter. */
html[data-skin="winamp"] .storage__total {
  display: inline-block;
  padding: 0.3125rem 0.625rem;
  background: #000;
  box-shadow: var(--wa-sunk);
  color: var(--wa-lcd);
  font-weight: 400;
  letter-spacing: 0.04em;
  text-shadow: var(--wa-glow);
}
html[data-skin="winamp"] .storage__bar {
  height: 0.875rem;
  padding: 3px;
  border-radius: 0;
  background: #000;
  box-shadow: var(--wa-sunk);
}
html[data-skin="winamp"] .storage__fill {
  border-radius: 0;
  background: repeating-linear-gradient(90deg, var(--wa-lcd) 0 4px, transparent 4px 6px);
}

/* --- Dialogs: a window, its title in the bar with ridges after it. -------- */
html[data-skin="winamp"] :is(.status--empty, .status--error, .shelf__empty, .viewer__peek-card) {
  border: 1px solid #000;
  border-radius: 0;
  background: var(--wa-face);
  box-shadow: var(--wa-bevel), 0 0.5rem 1.5rem rgba(0, 0, 0, 0.7);
}
html[data-skin="winamp"] :is(.status--empty .status__text, .status--error .status__text, .lookup__title, .viewer__peek-name) {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--wa-pixel);
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0;
  color: #fff;
}
html[data-skin="winamp"] :is(.status--empty, .status--error) .status__detail { color: var(--text-dim); }
/* The shelf's empty card is one sentence in the display face; plain text here. */
html[data-skin="winamp"] .shelf__empty { font-size: 1.125rem; font-weight: 600; letter-spacing: 0; }

/* THE TAG DRAWER AND THE POCKET are panels over the black viewer, so the tag
   colours keep a dark ground. */
html[data-skin="winamp"] .tagdrawer {
  border-left: 1px solid #000;
  background: var(--wa-face);
  box-shadow: var(--wa-bevel);
}
html[data-skin="winamp"] .pocket__sheet {
  border-top: 1px solid #000;
  border-radius: 0;
  background: var(--wa-face);
  box-shadow: var(--wa-bevel);
}

/* --- The video bar: the player's own transport ------------------- skins 04 ---
   Winamp asks for the app's bar instead of the browser's controls, which cannot
   be restyled. js/playbar.js reads this property; style.css lays the bar out.
   The user's choices: play, position, time, mute and fullscreen; it fades. */
html[data-skin="winamp"] { --video-controls: app; }

html[data-skin="winamp"] .playbar {
  gap: 0.375rem;
  border-top: 1px solid #000;
  background: var(--wa-face);
  box-shadow: var(--wa-bevel);
}
html[data-skin="winamp"] .playbar__key {
  border: 1px solid #000;
  background: linear-gradient(180deg, #cfcfdc, #9a9aae);
  box-shadow: inset 1px 1px 0 #f4f4ff, inset -1px -1px 0 #5a5a6e;
  color: #15151f;
}
/* Pressed, and a key that is on (sound off, fullscreen), is held down. */
html[data-skin="winamp"] .playbar__key:active,
html[data-skin="winamp"] .playbar__key[aria-pressed="true"] {
  background: linear-gradient(180deg, #9a9aae, #cfcfdc);
  box-shadow: inset 1px 1px 0 #5a5a6e, inset -1px -1px 0 #f4f4ff;
}
html[data-skin="winamp"] .playbar__time {
  padding: 0.3125rem 0.5rem;
  background: #000;
  box-shadow: var(--wa-sunk);
  color: var(--wa-lcd);
  font-family: var(--wa-digits);
  text-shadow: var(--wa-glow);
}
/* The position bar: a black groove and a silver grip. One rule per engine,
   because a selector list naming the other engine's pseudo-element is dropped
   whole. */
html[data-skin="winamp"] .playbar__seek { -webkit-appearance: none; appearance: none; background: none; }
html[data-skin="winamp"] .playbar__seek::-webkit-slider-runnable-track { height: 0.5rem; background: #000; box-shadow: var(--wa-sunk); }
html[data-skin="winamp"] .playbar__seek::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 1.75rem;
  height: 1.25rem;
  margin-top: -0.375rem;
  border: 1px solid #000;
  background: linear-gradient(180deg, #cfcfdc, #9a9aae);
  box-shadow: inset 1px 1px 0 #f4f4ff, inset -1px -1px 0 #5a5a6e;
}
html[data-skin="winamp"] .playbar__seek::-moz-range-track { height: 0.5rem; background: #000; }
html[data-skin="winamp"] .playbar__seek::-moz-range-thumb {
  width: 1.75rem;
  height: 1.25rem;
  border: 1px solid #000;
  border-radius: 0;
  background: linear-gradient(180deg, #cfcfdc, #9a9aae);
}

/* The toast: a line on the LCD. */
html[data-skin="winamp"] .viewer__toast {
  border: 1px solid #000;
  border-radius: 0;
  background: #000;
  box-shadow: var(--wa-sunk);
  color: var(--wa-lcd);
  text-shadow: var(--wa-glow);
}

/* --- The keep bar: the player's main window, its message on the LCD. Update
   is new work waiting, so its label glows gold rather than green. ---------- */
html[data-skin="winamp"] .keepbar {
  border-top: 1px solid #000;
  background: var(--wa-face);
  box-shadow: var(--wa-bevel), 0 -0.5rem 1.5rem rgba(0, 0, 0, 0.45);
}
html[data-skin="winamp"] .keepbar__line {
  padding: 0.5rem 0.625rem;
  background: #000;
  box-shadow: var(--wa-sunk);
  color: var(--wa-lcd);
  text-shadow: var(--wa-glow);
}
html[data-skin="winamp"] .keepbar .btn--primary { color: var(--accent); text-shadow: 0 0 6px rgba(232, 182, 76, 0.7); }