site 1.4.0: Pionaarr Mods -- plainer text, player look, moving background, stock switch

- Hero renamed Pionaarr Mods with a short plain explanation; card texts trimmed.
- New before/after shots: stock against every mod incl. those in testing (3-band waveform).
- Look taken from the player: LCD chip, CDJ-style tabs, Chakra Petch/Barlow, a record
  and a 3-band waveform running in the background (static with reduced motion).
- Builder: Stock firmware switch clears and locks the mods, gives the picks back when off.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

style.css

@@ -412,3 +412,86 @@ button.btn { font: inherit; font-weight: 700; cursor: pointer; }
   .ver-btn { padding: 6px 7px; font-size: .68rem; }
   .tabs a { padding: 6px 10px; }
 }
+
+/* ---- Pionaarr look: CDJ hardware, LCD readouts, a turning record ---- */
+:root {
+  --display: "Chakra Petch", "Barlow", system-ui, sans-serif;
+  --sans: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+  --lcd: #ff7a2a;
+  --lcd-green: #8dffb4;
+  --beat: 0;
+}
+:root[data-theme="light"] { --lcd: #d9520c; --lcd-green: #0a8f45; }
+html { background: var(--bg); }
+body { background: transparent; font-size: 17px; }
+.bg-fx { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
+h1, h2, h3, .brand, .tile .n { font-family: var(--display); }
+.hero::before { display: none; }
+
+.brand .disc { animation: spin 1.8s linear infinite; }
+@keyframes spin { to { transform: rotate(360deg); } }
+.brand .disc { background: repeating-radial-gradient(circle, #1a1d26 0 2px, #2a2f3c 2px 3px); box-shadow: inset 0 0 0 9px #11141b, 0 0 0 2px var(--accent); position: relative; }
+.brand .disc::after { content: ""; position: absolute; inset: 11px; border-radius: 50%; background: var(--accent); }
+
+.tabs { background: none; border: 0; gap: 2px; padding: 0; }
+.tabs a {
+  font: 600 .8rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase;
+  border-radius: 0; padding: 12px 12px 10px; color: var(--faint);
+}
+.tabs a:hover { color: var(--text); }
+.tabs a[aria-current="page"] {
+  background: none; color: var(--lcd-green); box-shadow: inset 0 -2px 0 var(--lcd-green);
+  text-shadow: 0 0 10px color-mix(in srgb, var(--lcd-green) 65%, transparent);
+}
+
+.lcd {
+  display: inline-flex; align-items: center; gap: 12px; font: 700 .82rem/1 var(--mono);
+  color: var(--lcd); letter-spacing: .16em; text-transform: uppercase; padding: 9px 12px;
+  border: 1px solid color-mix(in srgb, var(--lcd) 40%, transparent); border-radius: 6px;
+  background: color-mix(in srgb, #000 55%, transparent);
+  text-shadow: 0 0 calc(6px + 6px * var(--beat)) color-mix(in srgb, var(--lcd) 70%, transparent);
+}
+:root[data-theme="light"] .lcd { background: #fff8f2; }
+.lcd i { width: 7px; height: 7px; border-radius: 50%; background: var(--lcd); opacity: calc(.35 + .65 * var(--beat)); }
+
+.hero { padding: 64px 0 36px; }
+.hero h1 {
+  font-size: clamp(2.8rem, 8vw, 5.6rem); line-height: .95; letter-spacing: .01em;
+  text-transform: uppercase; margin: 22px 0 18px; font-weight: 700;
+}
+.hero h1 .r { color: var(--accent); }
+.hero p.lead { font-size: 1.18rem; color: var(--muted); max-width: 680px; margin: 0 0 12px; }
+.hero p.lead + p.lead { margin-bottom: 26px; }
+.btn { border-radius: 8px; font-family: var(--display); letter-spacing: .03em; text-transform: uppercase; font-size: .92rem; }
+
+.card { border-radius: 10px; background: color-mix(in srgb, var(--card) 90%, transparent); backdrop-filter: blur(6px); }
+.card h3 { font-weight: 700; letter-spacing: .01em; }
+.tile { background: color-mix(in srgb, var(--card) 85%, transparent); border-radius: 10px; }
+.tile .n { color: var(--lcd); font-weight: 700; }
+h2.section-title { text-transform: uppercase; letter-spacing: .02em; }
+
+/* builder: the stock switch */
+.picks-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 4px 0 14px; }
+.stock-btn {
+  display: inline-flex; align-items: center; gap: 10px; font: 700 .78rem/1 var(--mono); letter-spacing: .12em;
+  text-transform: uppercase; padding: 10px 14px; border-radius: 8px; border: 1px solid var(--line);
+  background: var(--card); color: var(--muted); cursor: pointer;
+}
+.stock-btn:hover { color: var(--text); }
+.stock-btn .sw { width: 30px; height: 16px; border-radius: 999px; background: var(--line); position: relative; transition: background .2s; flex: none; }
+.stock-btn .sw::after {
+  content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%;
+  background: #fff; transition: transform .2s;
+}
+.stock-btn[aria-pressed="true"] { color: var(--text); border-color: var(--accent-2); }
+.stock-btn[aria-pressed="true"] .sw { background: var(--accent-2); }
+.stock-btn[aria-pressed="true"] .sw::after { transform: translateX(14px); }
+.pick.off { opacity: .38; filter: grayscale(1); cursor: not-allowed; }
+.pick.off input { cursor: not-allowed; }
+
+@media (max-width: 560px) {
+  .tabs a { padding: 10px 7px 8px; letter-spacing: .06em; font-size: .72rem; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .brand .disc { animation: none; }
+}