/* hmic.dev gear looks (2026-10-25): switchable "gear" skins for /radio/ (amp head) and /jam/ (pedalboard).
   <html data-gear="vintage|studio|scifi|plain">; html.gear is set for every theme except plain. Plain = the site's
   normal look, so every rule that changes layout is scoped under html.gear and plain stays byte-for-byte today's page.
   Themes are token sets. They do not follow prefers-color-scheme, so an explicit choice is never overridden.
   Raster textures: every --tx-* hook is `none` here; gear/textures.css points them at gear/<theme>/<asset>.webp.
   A hook is always the top layer over a flat CSS fallback, so a missing or slow file never breaks the look. */

:root{--tx-tolex:none;--tx-grill:none;--tx-faceplate:none;--tx-vu-face:none;--tx-glow:none;--tx-rail:none;--tx-board:none;
  --tx-enc-0:none;--tx-enc-1:none;--tx-enc-2:none;--tx-enc-3:none;--tx-pickguard:none;--tx-fretboard:none;--tx-hero-radio:none;--tx-hero-jam:none}

/* ---------- theme tokens ---------- */
html[data-gear=vintage]{
  /* page: the site's own cream palette, warmed a touch */
  --bg:#f1e6cc;--panel:#fbf4e2;--soft:#f0e4c4;--mid:#6d6252;--tan:#83602f;--orange:#ad3d1c;--teal:#286b69;   /* darker than the site's own so small text clears AA */
  /* amp head: blonde tolex, oxblood/wheat grill, brushed aluminum, chicken-head knobs, cream VU, amber pilot */
  --g-tolex:#e3d1a6;--g-tolex-edge:#a88f5e;--g-tolex-ink:#2a2618;
  --g-tolex-pat:repeating-linear-gradient(45deg,rgba(120,92,40,.16) 0 2px,transparent 2px 6px),repeating-linear-gradient(-45deg,rgba(255,250,232,.35) 0 2px,transparent 2px 6px),linear-gradient(180deg,#ecdcb4,#d9c492);
  --g-corner:none;
  --g-piping:#d6c08a;--g-piping-dark:#6e5a32;
  --g-grill:#4a1416;
  --g-grill-pat:repeating-linear-gradient(90deg,rgba(214,176,112,.20) 0 1px,transparent 1px 4px),repeating-linear-gradient(0deg,rgba(214,176,112,.12) 0 1px,rgba(0,0,0,.22) 1px 2px,transparent 2px 4px),radial-gradient(ellipse at 50% 30%,#5e1a1c,#3a0f11 75%);
  --g-glow:rgba(255,170,70,.42);
  --g-face:#cfd0ce;--g-face-ink:#1d1d1b;--g-face-dim:#45453f;--g-face-edge:#8b8c88;
  --g-face-pat:repeating-linear-gradient(90deg,rgba(255,255,255,.22) 0 1px,rgba(0,0,0,.035) 1px 2px,transparent 2px 3px),linear-gradient(180deg,#e6e7e4,#c3c5c2 55%,#d6d7d4);
  --g-screw:radial-gradient(circle,#f2f2ef 0 2px,#8d8e8a 2.5px 3.5px,transparent 4px);
  --g-knob-body:#1d1712;--g-knob-hi:#5b4a3a;--g-knob-line:#f4ecd8;--g-knob-tick:#1d1d1b;
  --g-vu-face:#f2e4bd;--g-vu-ink:#2a2618;--g-vu-red:#b2361e;--g-vu-needle:#151310;--g-vu-bezel:#2b2620;--g-vu-light:rgba(255,184,90,.55);
  --g-pilot-off:#5a2a10;--g-pilot-on:#ffb340;--g-pilot-glow:rgba(255,165,50,.75);
  --g-lever:linear-gradient(90deg,#8e9092,#f4f5f6 45%,#b5b7b9);--g-nut:radial-gradient(circle at 40% 35%,#ffffff,#c7c9cb 45%,#7c7e81 75%);
  --g-sw-bg:#2a241c;--g-sw-ink:#f4ecd8;--g-sw-edge:#120e09;--g-sw-on:#ffb340;
  /* pedalboard: aged birch rails, hammered teal/rust/cream/olive enclosures */
  --g-board:#cdb07a;
  --g-board-pat:repeating-linear-gradient(180deg,transparent 0 44px,rgba(52,36,14,.85) 44px 50px),repeating-linear-gradient(90deg,rgba(255,244,214,.10) 0 3px,rgba(120,84,30,.08) 3px 7px,transparent 7px 13px),linear-gradient(180deg,#dcc28c,#c4a56c);
  --g-board-ink:#2a2618;--g-board-plate:rgba(250,240,214,.92);
  --g-enc-0:#2f6f6a;--g-enc-1:#a6442a;--g-enc-2:#e6d9bb;--g-enc-3:#666634;
  --g-enc-ink-0:#f8f1dd;--g-enc-ink-1:#f8f1dd;--g-enc-ink-2:#2a2618;--g-enc-ink-3:#f8f1dd;
  --g-hammer:radial-gradient(circle at 30% 30%,rgba(255,255,255,.10) 0 1.5px,transparent 3px) 0 0/8px 8px,radial-gradient(circle at 70% 60%,rgba(0,0,0,.08) 0 1.5px,transparent 3.5px) 3px 4px/11px 10px,linear-gradient(180deg,rgba(255,255,255,.12),rgba(0,0,0,.10));
  --g-plate:#f6edd5;--g-plate-ink:#2a2618;--g-plate-dim:#6b5f4d;--g-plate-next:#205552;
  --g-led-off:#4a1a12;--g-led-on:#ff4a2a;--g-led-glow:rgba(255,80,40,.75);--g-led-soon:#ffb340;
  --g-foot:radial-gradient(circle at 40% 35%,#ffffff,#c9cbcd 40%,#7b7d80 72%,#4b4d50);
  --g-focus:#c44a26;
  --viz-grill-a:#f0dcaa;--viz-grill-b:#ffb347;
  /* fretboard: rosewood neck, bone nut, clay dots, on a parchment pickguard */
  --fb-surface:#f3e8cc;--fb-board:#4a2b1c;--fb-board-edge:#2a170d;--fb-fret:#cfcabd;--fb-nut:#f1e6c8;--fb-str:#ddd6c4;--fb-inlay:#b08f68;
  --fb-s-fill:#f6edd5;--fb-s-stroke:#cdbd96;--fb-s-ink:#3d3426;--fb-ring:#f6edd5;--fb-out:#f6edd5;
  --fb-ghost:#ffb347;--fb-ghost-fill:#2a170d;
}
html[data-gear=studio]{
  /* page: dark control room */
  --bg:#18181a;--panel:#212124;--soft:#2b2b2f;--text:#ecebe6;--dim:#c3c0b7;--mid:#a29f96;--border:#3c3c42;--rule:#323237;
  --teal:#7cc7c1;--deep:#9fd6d0;--orange:#f39a6c;--tan:#d6b07a;
  /* amp head: black levant, tan wicker grille, black faceplate with white legends, chrome corners and piping, white jewel */
  --g-tolex:#121212;--g-tolex-edge:#000;--g-tolex-ink:#ecebe6;
  --g-tolex-pat:radial-gradient(circle at 30% 30%,rgba(255,255,255,.07) 0 1px,transparent 1.6px) 0 0/5px 5px,radial-gradient(circle at 70% 70%,rgba(255,255,255,.05) 0 1px,transparent 1.6px) 2px 3px/7px 6px,linear-gradient(180deg,#1b1b1b,#0d0d0d);
  --g-corner:linear-gradient(135deg,#ffffff,#9da0a4 45%,#e6e7e9 60%,#6d7074) top left/26px 26px no-repeat,linear-gradient(225deg,#ffffff,#9da0a4 45%,#e6e7e9 60%,#6d7074) top right/26px 26px no-repeat,linear-gradient(45deg,#ffffff,#9da0a4 45%,#e6e7e9 60%,#6d7074) bottom left/26px 26px no-repeat,linear-gradient(315deg,#ffffff,#9da0a4 45%,#e6e7e9 60%,#6d7074) bottom right/26px 26px no-repeat;
  --g-piping:#e2e3e5;--g-piping-dark:#5b5d61;
  --g-grill:#a98a5c;
  --g-grill-pat:repeating-linear-gradient(45deg,rgba(58,38,16,.42) 0 2px,transparent 2px 7px),repeating-linear-gradient(-45deg,rgba(255,238,200,.20) 0 2px,rgba(58,38,16,.14) 2px 3px,transparent 3px 7px),linear-gradient(180deg,#b89a6b,#957650);
  --g-glow:rgba(225,238,255,.30);
  --g-face:#111;--g-face-ink:#f2f2ee;--g-face-dim:#c9c9c4;--g-face-edge:#000;
  --g-face-pat:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,0) 40%),repeating-linear-gradient(90deg,rgba(255,255,255,.025) 0 1px,transparent 1px 3px),linear-gradient(180deg,#191919,#0b0b0b);
  --g-screw:radial-gradient(circle,#d9dadc 0 2px,#5b5d61 2.5px 3.5px,transparent 4px);
  --g-knob-body:#0c0c0c;--g-knob-hi:#3a3a3a;--g-knob-line:#ffffff;--g-knob-tick:#f2f2ee;
  --g-vu-face:#eef0f1;--g-vu-ink:#141414;--g-vu-red:#c22b2b;--g-vu-needle:#0d0d0d;--g-vu-bezel:#c9cbce;--g-vu-light:rgba(220,236,255,.55);
  --g-pilot-off:#3d4248;--g-pilot-on:#f2f8ff;--g-pilot-glow:rgba(200,225,255,.85);
  --g-lever:linear-gradient(90deg,#8e9092,#ffffff 45%,#b5b7b9);--g-nut:radial-gradient(circle at 40% 35%,#ffffff,#c7c9cb 45%,#6c6e71 75%);
  --g-sw-bg:#0d0d0d;--g-sw-ink:#f2f2ee;--g-sw-edge:#5b5d61;--g-sw-on:#eaf4ff;
  /* pedalboard: matte-black pedals on black loop fabric */
  --g-board:#141414;
  --g-board-pat:repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 3px),repeating-linear-gradient(90deg,rgba(255,255,255,.025) 0 1px,transparent 1px 3px),linear-gradient(180deg,#1a1a1a,#0f0f0f);
  --g-board-ink:#dcdbd5;--g-board-plate:rgba(20,20,20,.9);
  --g-enc-0:#1b1b1c;--g-enc-1:#1b1b1c;--g-enc-2:#1b1b1c;--g-enc-3:#1b1b1c;
  --g-enc-ink-0:#f2f2ee;--g-enc-ink-1:#f2f2ee;--g-enc-ink-2:#f2f2ee;--g-enc-ink-3:#f2f2ee;
  --g-hammer:radial-gradient(circle at 50% 50%,rgba(255,255,255,.03) 0 1px,transparent 1.5px) 0 0/4px 4px;
  --g-plate:#0c0c0c;--g-plate-ink:#f4f4f0;--g-plate-dim:#bdbcb6;--g-plate-next:#cfe9e6;
  --g-led-off:#2a2d31;--g-led-on:#eaf4ff;--g-led-glow:rgba(190,220,255,.85);--g-led-soon:#ffcf7a;
  --g-foot:radial-gradient(circle at 40% 35%,#ffffff,#c9cbcd 40%,#6b6d70 72%,#3b3d40);
  --g-focus:#f39a6c;
  --viz-grill-a:#121212;--viz-grill-b:#f6f6f2;
  /* fretboard: ebony neck */
  --fb-surface:#1d1d20;--fb-board:#15110f;--fb-board-edge:#000;--fb-fret:#b9b9b6;--fb-nut:#ebe6da;--fb-str:#d2d2cf;--fb-inlay:#5e5c58;
  --fb-s-fill:#2d2d32;--fb-s-stroke:#9a978e;--fb-s-ink:#ecebe6;--fb-ring:#ecebe6;--fb-out:#ecebe6;
  --fb-root:#ad3d1c;--fb-tone:#205552;--fb-tone-stroke:#5fb0aa;--fb-ext:#2e7a78;--fb-ghost:#f39a6c;--fb-ghost-fill:#15110f;
  --fb-seg-on-bg:#e9e7e1;--fb-seg-on-ink:#151515;--fb-pill-bg:#ad3d1c;
}
html[data-gear=scifi]{
  /* page: deep space */
  --bg:#0b1117;--panel:#111b23;--soft:#18252f;--text:#e4f1f2;--dim:#b2c6ca;--mid:#93aab0;--border:#2a3c48;--rule:#21313b;
  --teal:#5fe0d2;--deep:#8beee3;--orange:#ffb26b;--tan:#e6c27a;
  /* amp head: gunmetal hull, glowing hex mesh, holographic glass faceplate, energy cell */
  --g-tolex:#2a3139;--g-tolex-edge:#0c1015;--g-tolex-ink:#e4f1f2;
  --g-tolex-pat:linear-gradient(90deg,transparent 0 calc(50% - 1px),rgba(0,0,0,.45) calc(50% - 1px) calc(50% + 1px),transparent calc(50% + 1px)),repeating-linear-gradient(180deg,transparent 0 47px,rgba(0,0,0,.4) 47px 48px,rgba(255,255,255,.06) 48px 49px),linear-gradient(180deg,#36404a,#232a32 60%,#2c343d);
  --g-corner:radial-gradient(circle at 9px 9px,#a9bcc6 0 2.5px,#141b20 3px 4px,transparent 4.5px),radial-gradient(circle at calc(100% - 9px) 9px,#a9bcc6 0 2.5px,#141b20 3px 4px,transparent 4.5px),radial-gradient(circle at 9px calc(100% - 9px),#a9bcc6 0 2.5px,#141b20 3px 4px,transparent 4.5px),radial-gradient(circle at calc(100% - 9px) calc(100% - 9px),#a9bcc6 0 2.5px,#141b20 3px 4px,transparent 4.5px);
  --g-piping:#2ee6d2;--g-piping-dark:#0f3a3a;
  --g-grill:#061217;
  --g-grill-pat:radial-gradient(circle,rgba(62,232,214,.55) 0 1.3px,transparent 1.9px) 0 0/10px 17.32px,radial-gradient(circle,rgba(62,232,214,.55) 0 1.3px,transparent 1.9px) 5px 8.66px/10px 17.32px,radial-gradient(ellipse at 50% 100%,rgba(46,230,210,.22),transparent 70%),linear-gradient(180deg,#071a20,#04090d);
  --g-glow:rgba(46,230,210,.38);
  --g-face:rgba(18,44,54,.92);--g-face-ink:#d9fbf6;--g-face-dim:#a6d2cf;--g-face-edge:#2ee6d2;
  --g-face-pat:repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 3px),linear-gradient(115deg,rgba(120,255,240,.10),rgba(120,160,255,.06) 40%,rgba(255,120,220,.05) 70%,rgba(120,255,240,.08)),linear-gradient(180deg,#14303a,#0c1c23);
  --g-screw:radial-gradient(circle,#7f98a3 0 2px,#10181d 2.5px 3.5px,transparent 4px);
  --g-knob-body:#0e1a20;--g-knob-hi:#2b4a55;--g-knob-line:#5ff2e2;--g-knob-tick:#9fe9e1;
  --g-vu-face:#06131a;--g-vu-ink:#9fe9e1;--g-vu-red:#ff5a6e;--g-vu-needle:#5ff2e2;--g-vu-bezel:#2ee6d2;--g-vu-light:rgba(46,230,210,.35);
  --g-pilot-off:#123036;--g-pilot-on:#6ff7e8;--g-pilot-glow:rgba(46,230,210,.9);
  --g-lever:linear-gradient(90deg,#4c5a64,#cfe3ea 45%,#6c7d88);--g-nut:radial-gradient(circle at 40% 35%,#e6f6fa,#7f98a3 45%,#27333b 75%);
  --g-sw-bg:#0d1a21;--g-sw-ink:#d9fbf6;--g-sw-edge:#2a4c55;--g-sw-on:#5ff2e2;
  /* pedalboard: pod modules on hull plating */
  --g-board:#1a232b;
  --g-board-pat:linear-gradient(90deg,rgba(46,230,210,.18) 0 1px,transparent 1px) 0 0/120px 100%,repeating-linear-gradient(180deg,transparent 0 59px,rgba(0,0,0,.45) 59px 60px),linear-gradient(180deg,#202b34,#141c23);
  --g-board-ink:#cfe9ea;--g-board-plate:rgba(10,20,26,.9);
  --g-enc-0:#14303a;--g-enc-1:#2b1f3d;--g-enc-2:#33301a;--g-enc-3:#1d3320;
  --g-enc-ink-0:#e4f1f2;--g-enc-ink-1:#e4f1f2;--g-enc-ink-2:#e4f1f2;--g-enc-ink-3:#e4f1f2;
  --g-enc-glow-0:#2ee6d2;--g-enc-glow-1:#b48cff;--g-enc-glow-2:#ffd166;--g-enc-glow-3:#7be37b;
  --g-hammer:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,0) 35%,rgba(0,0,0,.25));
  --g-plate:#07141a;--g-plate-ink:#e4fbf8;--g-plate-dim:#a6c9cc;--g-plate-next:#8beee3;
  --g-led-off:#12303a;--g-led-on:#5ff2e2;--g-led-glow:rgba(46,230,210,.9);--g-led-soon:#ffd166;
  --g-foot:radial-gradient(circle at 50% 50%,#5ff2e2 0 3px,#0e2a30 4px 9px,#2b4a55 10px,#0b1418 13px);
  --g-focus:#ffd166;
  --viz-grill-a:#3fe6d2;--viz-grill-b:#ffd166;
  /* fretboard: instrument panel */
  --fb-surface:#0f1920;--fb-board:#0b161c;--fb-board-edge:#2ee6d2;--fb-fret:#2fbfb2;--fb-nut:#9ff5ea;--fb-str:#9fb7bf;--fb-inlay:#1c4a4d;
  --fb-s-fill:#13252e;--fb-s-stroke:#4f8f92;--fb-s-ink:#d6f2f1;--fb-ring:#9ff5ea;--fb-out:#e4f1f2;
  --fb-root:#b8410e;--fb-tone:#0f5a5c;--fb-tone-stroke:#3fe6d2;--fb-ext:#0f6d66;--fb-ghost:#ffd166;--fb-ghost-fill:#0b161c;
  --fb-seg-on-bg:#5fe0d2;--fb-seg-on-ink:#06141a;--fb-pill-bg:#b8410e;
}

/* ---------- channel switch (all four looks, including plain) ---------- */
.gear-switch{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin-top:22px;font:700 11px/1.3 'IBM Plex Mono',monospace;letter-spacing:1.6px;text-transform:uppercase;color:var(--mid)}
.gear-switch .gs-lab{margin-right:2px}
.gear-switch .gs-row{display:flex;flex-wrap:wrap;gap:8px}
.gear-switch button{position:relative;min-height:44px;min-width:64px;padding:16px 12px 7px;border:1px solid var(--border);border-radius:3px;background:var(--panel);color:var(--dim);font:700 11.5px/1 'IBM Plex Mono',monospace;letter-spacing:1px;text-transform:uppercase;cursor:pointer}
.gear-switch button::before{content:"";position:absolute;left:50%;top:5px;width:7px;height:7px;margin-left:-3.5px;border-radius:50%;background:var(--border)}
.gear-switch button[aria-pressed=true]{color:var(--text);border-color:var(--text)}
.gear-switch button[aria-pressed=true]::before{background:var(--orange)}
.gear-switch button:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
html.gear .gear-switch button{background:var(--g-sw-bg);color:var(--g-sw-ink);border:1px solid var(--g-sw-edge);border-bottom-width:4px;box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 2px 3px rgba(0,0,0,.35)}
html.gear .gear-switch button::before{background:#3a3a3a;box-shadow:inset 0 1px 1px rgba(0,0,0,.6)}
html.gear .gear-switch button[aria-pressed=true]{border-bottom-width:1px;margin-top:3px;transform:none;box-shadow:inset 0 2px 4px rgba(0,0,0,.55)}
html.gear .gear-switch button[aria-pressed=true]::before{background:var(--g-sw-on);box-shadow:0 0 6px 1px var(--g-sw-on)}
html.gear .gear-switch button:focus-visible{outline-color:var(--g-focus)}

/* Gear-only parts are hidden by each page's own CSS (.gear-only{display:none}) and shown here, so if this file fails
   to load the page is simply today's plain look. Plain-only parts (the native volume slider) hide under a gear theme. */
html.gear .plain-only{display:none!important}
html.gear .legend,html.gear .pilot,html.gear .knob,html.gear .vu{display:block}

/* ---------- shared page frame ---------- */
html.gear body{background:var(--bg)}
html[data-gear=studio] .hx-bar,html[data-gear=studio] .hx-foot{--hx-panel:#0f0f10;--hx-soft:#141416;--hx-dim:#c3c0b7;--hx-deep:#9fd6d0;--hx-orange:#f39a6c;--hx-border:#2c2c30}
html[data-gear=scifi] .hx-bar,html[data-gear=scifi] .hx-foot{--hx-panel:#081016;--hx-soft:#0a141b;--hx-dim:#b2c6ca;--hx-deep:#8beee3;--hx-orange:#ffb26b;--hx-border:#1f2f39}
html[data-gear=studio] .chip.engine,html[data-gear=scifi] .chip.engine{background:#205552;border-color:#205552;color:#f8f3df}
html[data-gear=studio] .chip.engine.v1,html[data-gear=scifi] .chip.engine.v1{background:var(--panel);color:var(--deep);border-color:var(--teal)}
html.gear .hero{position:relative}
@media (min-width:761px){
  html.gear .gear-radio .hero,html.gear .gear-jam .hero{max-width:none;padding-right:var(--hero-pad,0);background-repeat:no-repeat;background-position:right center;background-size:auto 100%}
  html.gear .gear-radio .hero{background-image:linear-gradient(90deg,var(--bg) 58%,transparent 80%),var(--tx-hero-radio)}
  html.gear .gear-jam .hero{background-image:linear-gradient(90deg,var(--bg) 58%,transparent 80%),var(--tx-hero-jam)}
}
@media (max-width:760px){html.gear .wrap{padding-left:16px;padding-right:16px}}

/* ---------- RADIO: amp head ---------- */
html.gear .card.amp{position:relative;padding:12px;border:1px solid var(--g-tolex-edge);border-radius:12px;
  background-color:var(--g-tolex);background-image:var(--tx-tolex),var(--g-tolex-pat);background-size:auto;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.18),inset 0 -3px 0 rgba(0,0,0,.25),0 18px 30px rgba(0,0,0,.28),0 3px 0 var(--g-tolex-edge)}
html.gear .card.amp::before{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--g-corner);pointer-events:none}
html.gear .amp-face{position:relative;padding:18px 20px 20px;border-radius:6px;background:var(--panel);border:2px solid var(--g-piping);box-shadow:inset 0 0 0 1px var(--g-piping-dark),inset 0 2px 8px rgba(0,0,0,.18)}
html.gear .amp-face .np-top{margin-top:12px}
html.gear .grill{position:relative;margin-top:12px;padding:14px 16px;border-radius:6px;background-color:var(--g-grill);background-image:var(--tx-grill),var(--g-grill-pat);
  border:3px solid var(--g-piping);box-shadow:inset 0 0 0 1px var(--g-piping-dark),inset 0 6px 18px rgba(0,0,0,.55),inset 0 -10px 26px rgba(0,0,0,.35);overflow:hidden}
html.gear .grill::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .6s;
  background-image:var(--tx-glow),radial-gradient(ellipse at 50% 112%,var(--g-glow),transparent 62%)}
html.gear .live .grill::after{opacity:1}
html.gear .card.amp .grill .viz{position:relative;z-index:1;margin-top:0;height:118px;--viz-a:var(--viz-grill-a);--viz-b:var(--viz-grill-b)}
html[data-gear=scifi] .grill::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(6,18,23,.85) 0 2px,transparent 2px 7px)}
html.gear .faceplate{position:relative;margin-top:12px;padding:16px 20px 14px;border-radius:5px;color:var(--g-face-ink);
  background-color:var(--g-face);background-image:var(--tx-faceplate),var(--g-face-pat);border:1px solid var(--g-face-edge);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -1px 0 rgba(0,0,0,.25),0 2px 4px rgba(0,0,0,.25)}
html.gear .faceplate::before{content:"";position:absolute;inset:6px;pointer-events:none;
  background:var(--g-screw) 0 0/8px 8px no-repeat,var(--g-screw) 100% 0/8px 8px no-repeat,var(--g-screw) 0 100%/8px 8px no-repeat,var(--g-screw) 100% 100%/8px 8px no-repeat}
html[data-gear=scifi] .faceplate{box-shadow:0 0 0 1px rgba(46,230,210,.35),0 0 18px rgba(46,230,210,.18),inset 0 1px 0 rgba(160,255,245,.35)}
html.gear .faceplate .bar{margin-top:0;background:rgba(0,0,0,.28);border-color:rgba(0,0,0,.35)}
html.gear .faceplate .bar i{background:var(--g-pilot-on)}
html[data-gear=vintage] .faceplate .bar i{background:#c44a26}
html.gear .faceplate .times,html.gear .faceplate .status{color:var(--g-face-dim)}
html.gear .faceplate .status{margin-top:8px;min-height:20px;font-size:13.5px}
html.gear .faceplate .controls{display:grid;grid-template-columns:auto auto minmax(150px,1fr);grid-template-areas:"pwr vol vu" "jam jam jam";align-items:center;gap:12px 22px;margin-top:14px}
html.gear .faceplate .fp-power{grid-area:pwr}
html.gear .faceplate .fp-vol{grid-area:vol}
html.gear .faceplate .fp-vu{grid-area:vu}
html.gear .faceplate .xlink{grid-area:jam;justify-self:start;margin-left:0;color:var(--g-face-ink)}
html.gear .faceplate .xlink:hover{color:var(--g-face-ink);opacity:.8}
.legend{font:700 10.5px/1.2 'IBM Plex Sans',sans-serif;letter-spacing:2.2px;text-transform:uppercase;color:var(--g-face-ink);text-align:center}
html.gear .fp-power,html.gear .fp-vol,html.gear .fp-vu{display:flex;flex-direction:column;align-items:center;gap:6px}
html.gear .fp-power .row{display:flex;align-items:center;gap:14px}

/* Tune in / Stop: a chrome bat toggle. station.js writes the button text and aria-pressed; the lever is drawn here. */
html.gear .faceplate .btn.tune{position:relative;min-width:0;min-height:58px;margin:0;padding:0 0 0 46px;border:0;border-radius:0;background:none;box-shadow:none;
  color:var(--g-face-ink);font:700 12px/1.2 'IBM Plex Sans',sans-serif;letter-spacing:1.6px;text-transform:uppercase;text-align:left;cursor:pointer}
html.gear .faceplate .btn.tune::before{content:"";position:absolute;left:4px;top:50%;width:30px;height:30px;margin-top:-15px;border-radius:50%;background:var(--g-nut);box-shadow:0 0 0 2px rgba(0,0,0,.35),0 2px 3px rgba(0,0,0,.4)}
html.gear .faceplate .btn.tune::after{content:"";position:absolute;left:14px;top:50%;width:10px;height:27px;margin-top:-27px;border-radius:5px 5px 4px 4px;background:var(--g-lever);box-shadow:0 1px 2px rgba(0,0,0,.5);
  transform-origin:50% 100%;transform:rotate(180deg);transition:transform .12s ease-out}
html.gear .faceplate .btn.tune[aria-pressed=true]::after{transform:rotate(0)}
html.gear .faceplate .btn.tune:hover{background:none;color:var(--g-face-ink)}
html.gear .faceplate .btn.tune:disabled{opacity:.55;cursor:default}
html.gear .faceplate .btn.tune:focus-visible{outline:2px solid var(--g-focus);outline-offset:4px;border-radius:4px}
.pilot{width:20px;height:20px;border-radius:50%;flex:none;background:radial-gradient(circle at 38% 32%,rgba(255,255,255,.55) 0 2px,transparent 4px),var(--g-pilot-off);
  box-shadow:inset 0 -2px 4px rgba(0,0,0,.5),0 0 0 3px rgba(0,0,0,.35),0 0 0 4px rgba(255,255,255,.25)}
html.gear .live .pilot{background:radial-gradient(circle at 38% 32%,#fff 0 2px,transparent 5px),var(--g-pilot-on);box-shadow:0 0 0 3px rgba(0,0,0,.35),0 0 12px 3px var(--g-pilot-glow),0 0 28px 6px var(--g-pilot-glow);animation:gear-tube 2.8s ease-in-out infinite}
html[data-gear=scifi] .pilot{width:12px;height:30px;border-radius:6px}
@keyframes gear-tube{0%,100%{filter:brightness(1)}47%{filter:brightness(1.12)}50%{filter:brightness(.9)}53%{filter:brightness(1.08)}}

/* VOLUME knob (gear.js builds the SVG; role=slider) */
.knob{position:relative;width:76px;height:76px;touch-action:none;cursor:grab;border-radius:50%}
.knob:active{cursor:grabbing}
.knob:focus-visible{outline:2px solid var(--g-focus);outline-offset:3px}
.knob svg{display:block;width:100%;height:100%;overflow:visible}
.knob .k-tick{stroke:var(--g-knob-tick);stroke-width:1.6;stroke-linecap:round}
.knob .k-num{font:700 8.5px 'IBM Plex Mono',monospace;fill:var(--g-knob-tick);text-anchor:middle}
.knob .k-body{fill:var(--g-knob-body)}
.knob .k-hi{fill:var(--g-knob-hi)}
.knob .k-line{stroke:var(--g-knob-line);stroke-width:2.6;stroke-linecap:round}
.knob .k-track{fill:none;stroke:rgba(255,255,255,.12);stroke-width:4;stroke-linecap:round}
.knob .k-arc{fill:none;stroke:var(--g-knob-line);stroke-width:4;stroke-linecap:round;filter:drop-shadow(0 0 3px var(--g-knob-line))}
.knob .k-chicken,.knob .k-round,.knob .k-ring{display:none}
html[data-gear=vintage] .knob .k-chicken,html[data-gear=studio] .knob .k-round,html[data-gear=scifi] .knob .k-ring{display:inline}
.knob .k-rot{transform-origin:50px 50px;transform:rotate(var(--k-angle,0deg))}
html[data-gear=studio] .knob .k-knurl{fill:none;stroke:#2c2c2c;stroke-width:3;stroke-dasharray:1.4 1.4}

/* VU meter: needle (vintage, studio) or segmented LEDs (scifi) */
.vu{width:100%;max-width:200px;border-radius:7px;background:var(--tx-vu-face) center/cover,var(--g-vu-face)}
.vu svg{display:block;width:100%;height:auto}
.vu .vu-face{fill:var(--g-vu-face)}
.vu .vu-bezel{fill:none;stroke:var(--g-vu-bezel);stroke-width:3}
.vu .vu-arc{fill:none;stroke:var(--g-vu-ink);stroke-width:1}
.vu .vu-red{fill:none;stroke:var(--g-vu-red);stroke-width:3.2}
.vu .vu-tick{stroke:var(--g-vu-ink);stroke-width:1}
.vu .vu-tick.r{stroke:var(--g-vu-red)}
.vu .vu-num{font:600 7px 'IBM Plex Mono',monospace;fill:var(--g-vu-ink);text-anchor:middle}
.vu .vu-num.r{fill:var(--g-vu-red)}
.vu .vu-cap{font:700 9px 'IBM Plex Sans',sans-serif;letter-spacing:1px;fill:var(--g-vu-ink);text-anchor:middle}
.vu .vu-needle{stroke:var(--g-vu-needle);stroke-width:1.3;stroke-linecap:round}
.vu .vu-pivot{fill:var(--g-vu-needle)}
.vu .vu-n{transform-origin:70px 96px;transform:rotate(var(--vu-angle,-48deg))}
.vu .vu-light{fill:var(--g-vu-light);opacity:0;transition:opacity .6s}
html.gear .live .vu .vu-light{opacity:1}
.vu .vu-led{display:none}
html[data-gear=scifi] .vu .vu-needle-set{display:none}
html[data-gear=scifi] .vu .vu-led{display:inline}
.vu .seg{fill:#0f2a31}
.vu .seg.on{fill:#3fe6d2}
.vu .seg.on.w{fill:#ffd166}
.vu .seg.on.r{fill:#ff5a6e}

/* Up next + this week's list: themed through the page tokens only (kept plain and readable) */
html.gear .card.side{border-top-color:var(--g-piping)}
html[data-gear=vintage] .card.side{border-top-color:#a6442a}

/* ---------- JAM: pedalboard ---------- */
html.gear .board{margin-top:22px;padding:16px 14px 14px;border-radius:8px;background-color:var(--g-board);background-image:var(--tx-board),var(--g-board-pat);
  border:1px solid rgba(0,0,0,.45);box-shadow:inset 0 2px 0 rgba(255,255,255,.12),inset 0 -6px 12px rgba(0,0,0,.25),0 10px 22px rgba(0,0,0,.25)}
html[data-gear=vintage] .board{border-top:10px solid #b89660;border-bottom:10px solid #9b7a48;background-image:var(--tx-rail),var(--tx-board),var(--g-board-pat)}
html.gear .board .big{margin-top:0}
html.gear .now,html.gear .nxt{position:relative;min-height:0;padding:30px 12px 62px;border:0;border-radius:14px;
  background:var(--g-hammer),var(--g-enc,var(--g-enc-0));
  box-shadow:inset 0 2px 0 rgba(255,255,255,.28),inset 0 -4px 0 rgba(0,0,0,.28),inset 0 0 0 1px rgba(0,0,0,.35),0 8px 14px rgba(0,0,0,.4)}
html.gear [data-pedal="0"]{--g-enc:var(--g-enc-0);--g-enc-ink:var(--g-enc-ink-0);--g-enc-glow:var(--g-enc-glow-0,transparent);--g-enc-tx:var(--tx-enc-0)}
html.gear [data-pedal="1"]{--g-enc:var(--g-enc-1);--g-enc-ink:var(--g-enc-ink-1);--g-enc-glow:var(--g-enc-glow-1,transparent);--g-enc-tx:var(--tx-enc-1)}
html.gear [data-pedal="2"]{--g-enc:var(--g-enc-2);--g-enc-ink:var(--g-enc-ink-2);--g-enc-glow:var(--g-enc-glow-2,transparent);--g-enc-tx:var(--tx-enc-2)}
html.gear [data-pedal="3"]{--g-enc:var(--g-enc-3);--g-enc-ink:var(--g-enc-ink-3);--g-enc-glow:var(--g-enc-glow-3,transparent);--g-enc-tx:var(--tx-enc-3)}
html.gear .now[data-pedal],html.gear .nxt[data-pedal]{background:var(--g-enc-tx,none) center/cover,var(--g-hammer),var(--g-enc)}
/* LED */
html.gear .now::before,html.gear .nxt::before{content:"";position:absolute;left:50%;top:10px;width:12px;height:12px;margin-left:-6px;border-radius:50%;
  background:radial-gradient(circle at 38% 32%,rgba(255,255,255,.5) 0 1.5px,transparent 3px),var(--g-led-off);box-shadow:0 0 0 2px rgba(0,0,0,.4)}
html.gear .now.lit::before{background:radial-gradient(circle at 38% 32%,#fff 0 1.5px,transparent 3.5px),var(--g-led-on);box-shadow:0 0 0 2px rgba(0,0,0,.4),0 0 10px 3px var(--g-led-glow)}
html.gear .nxt.soon::before{background:radial-gradient(circle at 38% 32%,#fff 0 1.5px,transparent 3.5px),var(--g-led-soon);box-shadow:0 0 0 2px rgba(0,0,0,.4),0 0 8px 2px var(--g-led-soon);animation:gear-blink .5s steps(2) infinite}
@keyframes gear-blink{50%{opacity:.35}}
/* footswitch */
html.gear .now::after,html.gear .nxt::after{content:"";position:absolute;left:50%;bottom:12px;width:36px;height:36px;margin-left:-18px;border-radius:50%;background:var(--g-foot);
  box-shadow:0 0 0 3px rgba(0,0,0,.35),0 3px 4px rgba(0,0,0,.5)}
html.gear .nxt::after{width:30px;height:30px;margin-left:-15px;bottom:15px}
/* label plate carries all the text, so contrast never depends on the enclosure colour */
html.gear .plate{flex:1;display:flex;flex-direction:column;justify-content:space-between;gap:6px;min-height:118px;height:100%;padding:10px 12px;border-radius:5px;background:var(--g-plate);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.25),0 1px 0 rgba(255,255,255,.25)}
html.gear .plate .lab{color:var(--g-plate-dim)}
html.gear .plate .chord{color:var(--g-plate-ink)}
html.gear .nxt .plate .chord{color:var(--g-plate-next)}
html.gear .plate .count{color:var(--g-plate-dim)}
html.gear .nxt:not(.soon){filter:saturate(.75)}
html[data-gear=scifi] .now,html[data-gear=scifi] .nxt{border-radius:28px;box-shadow:inset 0 0 0 1px var(--g-enc-glow,#2ee6d2),0 0 14px -2px var(--g-enc-glow,#2ee6d2),0 8px 14px rgba(0,0,0,.45)}
html[data-gear=scifi] .plate{border-radius:16px}
html[data-gear=studio] .now,html[data-gear=studio] .nxt{box-shadow:inset 0 1px 0 rgba(255,255,255,.1),inset 0 0 0 1px #000,0 8px 14px rgba(0,0,0,.6)}
/* beat lamps as LEDs on a strip of the board */
html.gear .board .pulse{margin-top:14px;padding:8px 12px;border-radius:5px;background:var(--g-board-plate);color:var(--g-board-ink)}
html.gear .board .pulse span{width:14px;height:14px;border:0;background:var(--g-led-off);box-shadow:0 0 0 2px rgba(0,0,0,.35)}
html.gear .board .pulse span.on{background:var(--g-led-soon);box-shadow:0 0 0 2px rgba(0,0,0,.35),0 0 8px 2px var(--g-led-soon)}
html.gear .board .pulse span.one.on{background:var(--g-led-on);box-shadow:0 0 0 2px rgba(0,0,0,.35),0 0 8px 2px var(--g-led-glow)}
/* progression strip: a row of small pedals on the board */
html.gear .strip{height:64px;border:1px solid rgba(0,0,0,.45);border-radius:6px;background-color:var(--g-board);background-image:var(--tx-board),var(--g-board-pat);box-shadow:inset 0 4px 10px rgba(0,0,0,.35)}
html[data-gear=vintage] .strip{background-image:var(--tx-rail),linear-gradient(180deg,#dcc28c,#c4a56c)}
html.gear .strip .c{top:7px;bottom:7px;padding:0 3px;border:0;border-radius:6px;font:700 14px/50px 'IBM Plex Sans',sans-serif;color:var(--g-enc-ink,var(--g-enc-ink-0));
  background:var(--g-enc-tx,none) center/cover,var(--g-hammer),var(--g-enc,var(--g-enc-0));box-shadow:inset 0 1px 0 rgba(255,255,255,.25),inset 0 0 0 1px rgba(0,0,0,.4),0 3px 4px rgba(0,0,0,.35)}
html.gear .strip .c::before{content:"";position:absolute;left:50%;top:4px;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:var(--g-led-off)}
html.gear .strip .c.cur{background:var(--g-enc-tx,none) center/cover,var(--g-hammer),var(--g-enc,var(--g-enc-0));color:var(--g-enc-ink,var(--g-enc-ink-0));box-shadow:inset 0 0 0 2px var(--g-led-on),0 0 10px 1px var(--g-led-glow)}
html.gear .strip .c.cur::before{background:var(--g-led-on);box-shadow:0 0 6px 2px var(--g-led-glow)}
html.gear .strip .c.n{background:transparent;box-shadow:none;border:1px dashed var(--g-board-ink);color:var(--g-board-ink);opacity:.7}
html.gear .strip .c.n::before{display:none}
html[data-gear=vintage] .strip .c.n{border-color:#3a2a12;color:#2a2618}
html[data-gear=scifi] .strip .c{border-radius:14px;box-shadow:inset 0 0 0 1px var(--g-enc-glow,#2ee6d2)}
html.gear .strip .head-line{background:var(--g-led-on);box-shadow:0 0 6px var(--g-led-glow)}
/* fretboard surface (colours only; fretboard.css reads the --fb-* tokens) */
html.gear .fb{background-color:var(--fb-surface);background-image:var(--tx-pickguard);border-color:var(--border)}
html.gear .stage{border-top-color:var(--g-piping)}
html[data-gear=vintage] .stage{border-top-color:#a6442a}

/* ---------- reduced motion: no needle swing, no glow or LED animation ---------- */
@media (prefers-reduced-motion:reduce){
  html.gear .live .pilot,html.gear .nxt.soon::before{animation:none}
  html.gear .faceplate .btn.tune::after,html.gear .grill::after,.vu .vu-light{transition:none}
}

/* ---------- phones ---------- */
@media (max-width:760px){
  html.gear .card.amp{padding:10px;border-radius:10px}
  html.gear .amp-face{padding:14px 14px 16px}
  html.gear .grill{padding:10px}
  html.gear .card.amp .grill .viz{height:84px}
  html.gear .faceplate{padding:14px 14px 12px}
  html.gear .faceplate .controls{grid-template-columns:auto auto;grid-template-areas:"pwr vol" "vu vu" "jam jam";gap:12px 18px;justify-content:space-around}
  html.gear .fp-vu .vu{max-width:230px}
  html.gear .board{padding:12px 10px 10px}
  html.gear .now,html.gear .nxt{padding:26px 8px 56px}
  html.gear .plate{min-height:96px;padding:8px}
}

/* plain buttons (jam Tune in) as a chunky channel button in every gear look; the radio toggle above overrides this */
html.gear .btn{background:var(--g-sw-bg);color:var(--g-sw-ink);border:1px solid var(--g-sw-edge);box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 3px 0 rgba(0,0,0,.5)}
html.gear .btn:hover{background:var(--g-sw-bg);color:var(--g-sw-ink);filter:brightness(1.2)}
html.gear .btn:focus-visible{outline:2px solid var(--g-focus);outline-offset:3px}
html.gear .live .btn:not(.tune)[aria-pressed=true]{box-shadow:inset 0 2px 4px rgba(0,0,0,.6),0 0 0 2px var(--g-led-on,var(--g-pilot-on))}

/* 2026-10-26 Listen | Jam view switch (radio + jam): links styled as the Channel amp buttons; the lit one is the page you're on.
   Soft navigation keeps the radio playing while you switch. */
.sw-row{display:flex;flex-wrap:wrap;align-items:flex-end;gap:0 30px}
.gear-switch a.vs{position:relative;display:inline-block;min-height:44px;min-width:88px;padding:16px 16px 7px;border:1px solid var(--border);border-radius:3px;background:var(--panel);color:var(--dim);font:700 12.5px/1 'IBM Plex Mono',monospace;letter-spacing:1.2px;text-transform:uppercase;text-align:center;text-decoration:none;cursor:pointer}
.gear-switch a.vs::before{content:"";position:absolute;left:50%;top:5px;width:7px;height:7px;margin-left:-3.5px;border-radius:50%;background:var(--border)}
.gear-switch a.vs:hover{color:var(--text);border-color:var(--text)}
.gear-switch a.vs[aria-current=page]{color:var(--text);border-color:var(--text);cursor:default}
.gear-switch a.vs[aria-current=page]::before{background:var(--orange)}
.gear-switch a.vs:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
html.gear .gear-switch a.vs{background:var(--g-sw-bg);color:var(--g-sw-ink);border:1px solid var(--g-sw-edge);border-bottom-width:4px;box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 2px 3px rgba(0,0,0,.35)}
html.gear .gear-switch a.vs::before{background:#3a3a3a;box-shadow:inset 0 1px 1px rgba(0,0,0,.6)}
html.gear .gear-switch a.vs[aria-current=page]{border-bottom-width:1px;margin-top:3px;box-shadow:inset 0 2px 4px rgba(0,0,0,.55)}
html.gear .gear-switch a.vs[aria-current=page]::before{background:var(--g-sw-on);box-shadow:0 0 6px 1px var(--g-sw-on)}
html.gear .gear-switch a.vs:focus-visible{outline-color:var(--g-focus)}