/* Optional looks for the harness, picked by plugin.json "ui": { "theme": "ceefax" | "90s" }.
   Everything here is scoped to [data-theme=...] so plugins without a theme are unaffected. */

/* ---- "ceefax" theme: BBC teletext, 8 colours, block graphics, Fastext buttons ---- */
[data-theme="ceefax"] {
  --bg: #000; --panel: #000; --panel-hi: #000; --text: #fff; --dim: #0ff;
  --accent: #ff0; --alt: #0ff; --bad: #f00;
  --t-red: #f00; --t-green: #0f0; --t-yellow: #ff0; --t-blue: #00f; --t-magenta: #f0f; --t-cyan: #0ff; --t-white: #fff;
  --c: var(--t-yellow);
}
[data-theme="ceefax"] body { background: #000; color: #fff; font: 22px/1.1 VT323, "Courier New", monospace; text-shadow: 0 0 3px rgba(255,255,255,.35); }
[data-theme="ceefax"] body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 20; background: repeating-linear-gradient(to bottom, transparent 0 2px, rgba(0,0,0,.3) 2px 3px); }
[data-theme="ceefax"] .ttx-top { display: flex; gap: 2ch; max-width: 1100px; margin: 0 auto; padding: 10px 14px 4px; font-size: 26px; color: #fff; }
[data-theme="ceefax"] .ttx-top span:nth-child(2) { flex: 1; }
[data-theme="ceefax"] .ttx-clock { color: var(--t-yellow); }
/* Header: a blue title band, then black teletext rows for Fastext and presets. */
[data-theme="ceefax"] header { max-width: 1100px; margin: 0 auto; padding: 0; border: 0; background: #000; gap: 0; }
[data-theme="ceefax"] header .head-row { padding: 8px 14px; gap: 6px 14px; }
[data-theme="ceefax"] header .head-title { background: var(--t-blue); padding: 12px 14px; }
[data-theme="ceefax"] header .head-actions { padding-top: 12px; }
[data-theme="ceefax"] header .presets { padding-bottom: 4px; }
[data-theme="ceefax"] header h1 { font: 64px/0.9 VT323, monospace; letter-spacing: .06em; color: var(--t-yellow); text-transform: none; }
[data-theme="ceefax"] header .sub { color: var(--t-cyan); font-size: 22px; }
[data-theme="ceefax"] button, [data-theme="ceefax"] select { font: 24px/1 VT323, monospace; letter-spacing: .06em; text-transform: uppercase; border: 0; border-radius: 0; padding: 4px 10px; background: #000; color: #fff; box-shadow: none; transform: none; }
[data-theme="ceefax"] button:hover { background: #fff; color: #000; }
[data-theme="ceefax"] button:active, [data-theme="ceefax"] button.on { background: var(--t-yellow); color: #000; transform: none; box-shadow: none; }
[data-theme="ceefax"] #play { background: var(--t-green); color: #000; }
[data-theme="ceefax"] #play.on { background: var(--t-red); color: #fff; }
[data-theme="ceefax"] #hit { background: var(--t-magenta); color: #000; }
[data-theme="ceefax"] header .bpm { color: #fff; font-size: 22px; }
[data-theme="ceefax"] header .bpm input, [data-theme="ceefax"] .meter { background: #000; color: var(--t-yellow); border: 0; border-radius: 0; font: 24px VT323, monospace; box-shadow: none; text-shadow: none; padding: 2px 6px; }
/* Fastext: red, green, yellow, cyan */
[data-theme="ceefax"] header .action { background: transparent; box-shadow: none; padding: 0; gap: 4px; }
[data-theme="ceefax"] header .action span { color: #fff; font: 22px VT323, monospace; letter-spacing: .08em; text-shadow: none; }
[data-theme="ceefax"] [data-act="0"][data-mode="random"] { background: var(--t-red); color: #fff; }
[data-theme="ceefax"] [data-act="0"][data-mode="alter"] { background: var(--t-green); color: #000; }
[data-theme="ceefax"] [data-act="1"][data-mode="random"] { background: var(--t-yellow); color: #000; }
[data-theme="ceefax"] [data-act="1"][data-mode="alter"] { background: var(--t-cyan); color: #000; }
[data-theme="ceefax"] [data-act]:hover { background: #fff; color: #000; }
/* Preset bar */
[data-theme="ceefax"] header .presets span { color: #fff; font: 22px VT323, monospace; letter-spacing: .08em; }
[data-theme="ceefax"] header .presets select { color: var(--t-yellow); box-shadow: inset 0 0 0 2px var(--t-yellow); width: 270px; }
[data-theme="ceefax"] header .presets select option { background: #000; color: var(--t-yellow); }
[data-theme="ceefax"] header .presets input { width: 270px; background: #000; color: var(--t-cyan); border: 0; border-radius: 0; box-shadow: inset 0 0 0 2px var(--t-cyan); font: 24px/1 VT323, monospace; padding: 4px 8px; }
[data-theme="ceefax"] header .presets input::placeholder { color: #0aa; }
[data-theme="ceefax"] #preset-prev, [data-theme="ceefax"] #preset-next { background: var(--t-blue); color: var(--t-yellow); }
[data-theme="ceefax"] #preset-roll { background: var(--t-blue); color: #fff; }
[data-theme="ceefax"] #preset-save { background: var(--t-green); color: #000; }
[data-theme="ceefax"] #preset-saveas { background: var(--t-cyan); color: #000; }
[data-theme="ceefax"] #preset-del { background: var(--t-red); color: #fff; }
[data-theme="ceefax"] #undo { background: var(--t-magenta); color: #000; }
[data-theme="ceefax"] header .presets button:hover:not(:disabled) { background: #fff; color: #000; }

[data-theme="ceefax"] main { max-width: 1100px; padding: 14px 14px 20px; background: #000; box-shadow: none; }
[data-theme="ceefax"] main::before, [data-theme="ceefax"] main::after { display: none; }
[data-theme="ceefax"] .groups { gap: 16px 14px; }
[data-theme="ceefax"] .group { background: #000; border: 0; border-radius: 0; padding: 0; box-shadow: none; }
[data-theme="ceefax"] .group h2 { display: block; margin: 0 0 6px; padding: 2px 8px; border-radius: 0; box-shadow: none; text-shadow: none; font: 28px/1 VT323, monospace; letter-spacing: .12em; background: var(--band); color: var(--band-text); }
[data-theme="ceefax"] .group:nth-child(6n+1 of .group:not(.compact-group)) { --band: var(--t-red); --band-text: #fff; --c: var(--t-red); }
[data-theme="ceefax"] .group:nth-child(6n+2 of .group:not(.compact-group)) { --band: var(--t-blue); --band-text: #fff; --c: var(--t-white); }
[data-theme="ceefax"] .group:nth-child(6n+3 of .group:not(.compact-group)) { --band: var(--t-green); --band-text: #000; --c: var(--t-green); }
[data-theme="ceefax"] .group:nth-child(6n+4 of .group:not(.compact-group)) { --band: var(--t-cyan); --band-text: #000; --c: var(--t-cyan); }
[data-theme="ceefax"] .group:nth-child(6n+5 of .group:not(.compact-group)) { --band: var(--t-yellow); --band-text: #000; --c: var(--t-yellow); }
[data-theme="ceefax"] .group:nth-child(6n+6 of .group:not(.compact-group)) { --band: var(--t-magenta); --band-text: #000; --c: var(--t-magenta); }
[data-theme="ceefax"] .compact-group { --band: var(--t-blue); --band-text: var(--t-yellow); --c: var(--t-yellow); }
[data-theme="ceefax"] #view { background: #fff; color: #000; }
[data-theme="ceefax"] #view:hover { background: var(--t-yellow); }
[data-theme="ceefax"] .group .knobs { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 10px 6px; }
@media (min-width: 1000px) { [data-theme="ceefax"] .group:not(.compact-group) .knobs { grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); } }
[data-theme="ceefax"] .knob { background: transparent; border-radius: 0; padding: 4px 2px; }
[data-theme="ceefax"] .knob .name { font: 21px/1 VT323, monospace; letter-spacing: .04em; color: #fff; }
/* The round knob stays as an invisible drag target over a block gauge. */
[data-theme="ceefax"] .group .knob svg { position: relative; z-index: 1; width: 100%; height: 34px; margin: 4px 0 0; opacity: 0; }
[data-theme="ceefax"] .gauge { display: block; position: relative; width: 88%; height: 26px; margin: -30px auto 4px;
  background: linear-gradient(90deg, var(--t-blue) 0 calc(100% - 3px), transparent 0) 0 0 / 12.5% 100% repeat-x; }
[data-theme="ceefax"] .gauge .fill { position: absolute; inset: 0 auto 0 0; width: calc(var(--cells, 0) * 12.5%);
  background: linear-gradient(90deg, var(--c) 0 calc(100% - 3px), transparent 0) 0 0 / calc(100% / max(1, var(--cells, 1))) 100% repeat-x; }
[data-theme="ceefax"] .knob .val { font: 22px/1 VT323, monospace; color: #fff; background: none; box-shadow: none; text-shadow: none; min-width: 0; padding: 0; }
[data-theme="ceefax"] .toggle-btn { width: min(80px, 100%); max-height: 40px; margin: 4px auto 22px; font-size: 26px; color: var(--c); background: #000; border: 0; border-radius: 0; box-shadow: inset 0 0 0 2px var(--c); padding: 0; }
[data-theme="ceefax"] .toggle-btn.on { color: #000; background: var(--c); box-shadow: none; }
[data-theme="ceefax"] .toggle-btn::before { display: none; }
[data-theme="ceefax"] .keyboard { height: 130px; gap: 4px; padding: 0; border-radius: 0; background: #000; box-shadow: none; }
[data-theme="ceefax"] .key.white { border: 0; border-radius: 0; background: #fff; color: #000; box-shadow: none; font: 24px VT323, monospace; text-shadow: none; }
[data-theme="ceefax"] .key.black { top: 0; border: 0; border-radius: 0; background: var(--t-blue); box-shadow: 0 0 0 4px #000; }
[data-theme="ceefax"] .key.white.on { background: var(--t-yellow); color: #000; box-shadow: none; }
[data-theme="ceefax"] .key.black.on { background: var(--t-red); box-shadow: 0 0 0 4px #000; }
[data-theme="ceefax"] .bar label { color: var(--t-cyan); font-size: 22px; }
[data-theme="ceefax"] .bar input[type="range"] { accent-color: var(--t-yellow); }
[data-theme="ceefax"] .help { color: #fff; font-size: 20px; }
[data-theme="ceefax"] .status { color: var(--t-cyan); font-size: 20px; }
[data-theme="ceefax"] .status.bad { color: var(--t-red); }
[data-theme="ceefax"] kbd { background: var(--t-blue); color: var(--t-yellow); border-radius: 0; font-size: 20px; }
[data-theme="ceefax"] .overlay { background: rgba(0,0,0,.92); }
[data-theme="ceefax"] .overlay button { background: var(--t-blue); color: var(--t-yellow); font-size: 40px; padding: 10px 26px; }
[data-theme="90s"] header .action { background: linear-gradient(#9097a0, #b3b9c0); box-shadow: inset 1px 1px 2px #0007, inset -1px -1px 0 #ffffff80; }
[data-theme="90s"] header .action span { color: #1b1e22; text-shadow: 0 1px 0 #ffffff90; font-family: Verdana, sans-serif; font-weight: 900; }

/* ---- "90s" theme (plugin.json ui.theme): bevelled plastic, chrome knobs, LCD readouts ---- */
[data-theme="90s"] {
  --bg: #23272c; --panel: #b4b9bf; --panel-hi: #cfd3d8; --text: #16191c; --dim: #3c4248;
  --accent: #ff7a00; --alt: #14a896; --bad: #d4002a;
  --lcd: #0d180b; --lcd-text: #9dff4f; --hi: rgba(255,255,255,.8); --lo: rgba(0,0,0,.5);
}
[data-theme="90s"] body { background: radial-gradient(ellipse at top, #3d434b, #15181b 75%) fixed; font-family: Verdana, Tahoma, sans-serif; }
[data-theme="90s"] header { background: linear-gradient(#ffffff40, #00000020), repeating-linear-gradient(90deg, #c7ccd2 0 2px, #b7bcc2 2px 3px, #ccd1d6 3px 5px); border-bottom: 4px solid var(--accent); box-shadow: inset 0 2px 0 var(--hi), inset 0 -2px 0 var(--lo), 0 4px 12px #000b; }
[data-theme="90s"] header h1 { font: italic 900 32px/1 "Arial Black", Impact, sans-serif; letter-spacing: .01em; color: #1b1e22; text-shadow: 1px 1px 0 #fff, -1px -1px 0 #0006; }
[data-theme="90s"] header .sub { color: #3a3f45; font-size: 11px; font-weight: 700; }
[data-theme="90s"] header .bpm { color: #22262a; font-weight: 700; }
[data-theme="90s"] header .presets input, [data-theme="90s"] header .bpm input, [data-theme="90s"] .meter { background: var(--lcd); color: var(--lcd-text); border: 0; border-radius: 2px; font: 700 13px "Courier New", monospace; text-shadow: 0 0 5px #9dff4f88; box-shadow: inset 1px 1px 0 #000, inset -1px -1px 0 #ffffff30, 0 1px 0 #fff8; }
[data-theme="90s"] .meter { padding: 5px 8px; }
[data-theme="90s"] main { position: relative; max-width: 1060px; margin: 20px auto; padding: 26px 24px 20px; border-radius: 6px; background: linear-gradient(#a2a8af, #7b8188); box-shadow: inset 2px 2px 0 var(--hi), inset -2px -2px 0 var(--lo), 0 10px 30px #000c; }
[data-theme="90s"] main::before, [data-theme="90s"] main::after { content: ""; position: absolute; top: 7px; width: 12px; height: 12px; border-radius: 50%; background: linear-gradient(45deg, transparent 44%, #3a3e43 44% 56%, transparent 56%), radial-gradient(circle at 35% 30%, #fff, #9aa0a6 60%, #50555b); box-shadow: 0 1px 1px #000a; }
[data-theme="90s"] main::before { left: 8px; }
[data-theme="90s"] main::after { right: 8px; }
[data-theme="90s"] .groups { gap: 14px; }
[data-theme="90s"] .group { border: 0; border-radius: 4px; padding: 10px 10px 12px; background: linear-gradient(#c6cbd1, #a3a9b0); box-shadow: inset 2px 2px 0 var(--hi), inset -2px -2px 0 var(--lo), 0 3px 6px #0008; }
[data-theme="90s"] .group h2 { display: inline-block; margin: 0 0 8px; padding: 3px 10px; border-radius: 2px; font: 900 11px Verdana, sans-serif; letter-spacing: .12em; color: #fff; text-shadow: 0 -1px 0 #0007; background: linear-gradient(#ff9a32, #d45e00); box-shadow: inset 1px 1px 0 #ffffff90, inset -1px -1px 0 #0006, 0 1px 2px #0006; }
[data-theme="90s"] .knob { background: transparent; }
[data-theme="90s"] .group .knobs { grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); }
[data-theme="90s"] .knob .name { color: #1d2125; font: 900 10px Verdana, sans-serif; letter-spacing: .04em; text-shadow: 0 1px 0 #ffffff90; }
[data-theme="90s"] .knob svg { filter: drop-shadow(1px 3px 2px rgba(0,0,0,.55)); }
[data-theme="90s"] .knob .track { stroke: #3a3f45; stroke-width: 6; }
[data-theme="90s"] .knob .arc { stroke-width: 4; }
[data-theme="90s"] .knob circle { fill: url(#knob-cap); stroke: #2b2f34; stroke-width: 2; }
[data-theme="90s"] .knob .ptr { stroke: #15171a; stroke-width: 3.5; }
[data-theme="90s"] .knob .val { display: inline-block; min-width: 66px; padding: 2px 6px; border-radius: 2px; background: var(--lcd); color: var(--lcd-text); font: 700 11px "Courier New", monospace; text-shadow: 0 0 4px #9dff4f88; box-shadow: inset 1px 1px 0 #000, inset -1px -1px 0 #ffffff30, 0 1px 0 #ffffff90; }
[data-theme="90s"] button, [data-theme="90s"] select { color: #16191c; border: 1px solid #23272b; border-radius: 3px; background: linear-gradient(#e6e9ec, #a7adb4); font: 900 12px Verdana, sans-serif; letter-spacing: .06em; text-transform: uppercase; box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #0005, 0 2px 0 #1d2125, 0 3px 5px #0007; }
[data-theme="90s"] button:hover { background: linear-gradient(#f2f4f6, #b6bcc2); }
[data-theme="90s"] button:active, [data-theme="90s"] button.on { transform: translateY(2px); color: #2a1200; background: linear-gradient(#ffad55, #e56a00); box-shadow: inset 1px 1px 3px #0008, 0 0 0 #000; }
[data-theme="90s"] button.alt:active { background: linear-gradient(#5fe6d5, #12a593); }
[data-theme="90s"] .toggle-btn { position: relative; padding-top: 14px; font-size: 10px; color: #16191c; }
[data-theme="90s"] .toggle-btn::before { content: ""; position: absolute; top: 8px; left: 50%; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #8a5a2e, #3a1c06); box-shadow: inset 0 1px 1px #000a, 0 1px 0 #fff8; }
[data-theme="90s"] .toggle-btn.on { color: #16191c; background: linear-gradient(#c9ced3, #9ba1a8); box-shadow: inset 1px 1px 3px #0009, inset -1px -1px 0 #ffffff60; }
[data-theme="90s"] .toggle-btn.on::before { background: radial-gradient(circle at 35% 30%, #fff1c2, #ff8a00 55%, #c25400); box-shadow: 0 0 10px #ff8a00, 0 0 3px #ffd08a; }
[data-theme="90s"] .bar label, [data-theme="90s"] .help, [data-theme="90s"] .status { color: #22262a; }
[data-theme="90s"] .bar input[type="range"] { accent-color: var(--accent); }
[data-theme="90s"] kbd { background: linear-gradient(#eef0f2, #b5bbc1); color: #16191c; box-shadow: inset -1px -1px 0 #0004, 0 1px 0 #0006; }
[data-theme="90s"] .keyboard { padding: 8px 8px 0; border-radius: 3px; background: linear-gradient(#1b1d20, #2e3237); box-shadow: inset 2px 2px 4px #000, inset -1px -1px 0 #ffffff40; height: 140px; }
[data-theme="90s"] .key.black { top: 8px; }

/* ---- "graphite" theme: a quiet charcoal card under a thin orange rule,
   small monospaced caps, vertical block faders, a solid Randomize block, block-matrix display. ---- */
[data-theme="graphite"] {
  --bg: #101010; --panel: #1e1e1d; --panel-hi: #282826; --text: #ecebe6; --dim: #77766f;
  --accent: #2fe0c8; --alt: #ff8a1f; --bad: #ff4d5e; --pill: #3a3935; --ink: #e6e3dc;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
}
[data-theme="graphite"] body { background: var(--bg); font: 11px/1.4 var(--mono); }
[data-theme="graphite"] #app { max-width: 1040px; margin: 24px auto; background: var(--panel); border-top: 3px solid var(--alt); border-radius: 0 0 4px 4px; }
[data-theme="graphite"] header { background: transparent; border: 0; padding: 26px 40px 6px; gap: 12px; }
[data-theme="graphite"] header h1 { font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
[data-theme="graphite"] header .sub { color: var(--dim); font-size: 10px; letter-spacing: .06em; }
[data-theme="graphite"] button, [data-theme="graphite"] select { background: transparent; border: 0; border-radius: 3px; padding: 3px 7px; color: var(--dim); font: 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
[data-theme="graphite"] button:hover { background: transparent; color: var(--text); }
[data-theme="graphite"] button:active, [data-theme="graphite"] button.on, [data-theme="graphite"] #view { background: var(--pill); color: var(--text); }
[data-theme="graphite"] #random { background: var(--ink); color: #141414; font-size: 11px; font-weight: 700; padding: 11px 30px; border-radius: 2px; letter-spacing: .16em; }
[data-theme="graphite"] #random:hover { background: var(--alt); color: #141414; }
[data-theme="graphite"] #random:active { transform: translateY(1px); background: #fff; color: #161616; }
[data-theme="graphite"] header .presets span, [data-theme="graphite"] header .bpm { color: var(--dim); font-size: 10px; font-weight: 400; letter-spacing: .1em; text-transform: uppercase; }
[data-theme="graphite"] header .presets select { color: var(--text); background: transparent; }
[data-theme="graphite"] header .presets input, [data-theme="graphite"] header .bpm input { background: transparent; border: 0; border-bottom: 1px solid #3a3a3a; border-radius: 0; color: var(--text); font-size: 12px; }
[data-theme="graphite"] main { max-width: none; padding: 26px 40px 30px; }
[data-theme="graphite"] .tiles { gap: 34px; margin: 6px 0 34px; }
[data-theme="graphite"] .tile span { font-size: 10px; letter-spacing: 0; }
[data-theme="graphite"] .groups { gap: 0; row-gap: 28px; }
[data-theme="graphite"] .group { background: transparent; border: 0; border-radius: 0; padding: 0 18px; border-left: 1px dotted #3a3935; }
[data-theme="graphite"] .group:first-child, [data-theme="graphite"] .compact-group { border-left: 0; }
[data-theme="graphite"] .group h2 { text-align: left; margin: 0 0 14px; font-size: 10px; font-weight: 400; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
[data-theme="graphite"] .knob { display: flex; flex-direction: column; align-items: center; background: transparent; padding: 0 2px 4px; }
[data-theme="graphite"] .knob svg, [data-theme="graphite"] .group .knob svg { display: none; }
[data-theme="graphite"] .knob .slider { order: 1; display: block; position: relative; width: 14px; height: 76px; margin: 4px auto 8px; background: repeating-linear-gradient(0deg, #2f2e2b 0 3px, transparent 3px 5px); }
[data-theme="graphite"] .knob .slider span { position: absolute; left: 0; right: 0; bottom: var(--from); height: var(--len); background: repeating-linear-gradient(0deg, var(--ink) 0 3px, transparent 3px 5px); }
[data-theme="graphite"] .knob:hover .slider span { background: repeating-linear-gradient(0deg, var(--alt) 0 3px, transparent 3px 5px); }
[data-theme="graphite"] .knob { cursor: ns-resize; }
[data-theme="graphite"] .knob .val { order: 2; font-size: 10px; color: var(--dim); min-height: 14px; }
[data-theme="graphite"] .knob .name, [data-theme="graphite"] .group .knob .name { order: 3; font-size: 9px; font-weight: 400; letter-spacing: .1em; text-transform: uppercase; color: var(--text); }
[data-theme="graphite"] .bar label, [data-theme="graphite"] .help, [data-theme="graphite"] .status, [data-theme="graphite"] .meter { color: var(--dim); font-size: 11px; }
[data-theme="graphite"] canvas { background: transparent; border-top: 1px solid #343434; border-radius: 0; }
[data-theme="graphite"] .graph { background: transparent; padding: 8px 0; }
[data-theme="graphite"] .graph-head { text-transform: none; letter-spacing: 0; }
[data-theme="graphite"] .graph-name { color: var(--text); }
[data-theme="graphite"] .graph canvas { border-top: 0; }
[data-theme="graphite"] kbd { background: #333; }
[data-theme="graphite"] #app::after { content: "JOHNNY"; display: block; text-align: right; padding: 0 40px 22px; font-size: 9px; color: var(--dim); }
[data-theme="graphite"] main .group.compact-group .knobs { grid-template-columns: repeat(var(--n), minmax(0, 1fr)); }
@media (max-width: 640px) { [data-theme="graphite"] main .group.compact-group .knobs { grid-template-columns: repeat(var(--half), minmax(0, 1fr)); } }

[data-theme="graphite"] .mcells { gap: 2px; }
[data-theme="graphite"] .mrow span { font-size: 9px; letter-spacing: .06em; }
/* ---- Worn layer (plugin.json ui.worn: true): kept subtle. Fine grain and a few scuffs over
   the panel, nicks out of the top rule, aged yellow-green phosphor, dust, a hairline
   scratch and faint burn-in on the tubes. Works on top of any theme. ---- */
[data-worn="1"] { --phosphor: #b4ec86; }
[data-worn="1"] #app { position: relative; }
[data-worn="1"] #app::before {
  content: ""; position: absolute; top: -3px; bottom: 0; left: 0; right: 0; pointer-events: none; z-index: 5;
  background:
    /* nicks out of the top rule */
    radial-gradient(circle at 14% 1px, var(--bg) 0 1.6px, transparent 2.1px),
    radial-gradient(ellipse 5px 2px at 37% 2px, var(--bg) 0 60%, transparent 100%),
    radial-gradient(circle at 58% 0, var(--bg) 0 1.4px, transparent 1.9px),
    radial-gradient(ellipse 6px 2px at 83% 1px, var(--bg) 0 60%, transparent 100%),
    /* rubbed paint on the rule */
    radial-gradient(ellipse 50px 3px at 26% 1px, rgba(255,255,255,.18), transparent 70%),
    radial-gradient(ellipse 40px 3px at 71% 2px, rgba(255,255,255,.14), transparent 70%),
    /* scuffs where hands rest */
    radial-gradient(ellipse 160px 50px at 30% 92%, rgba(255,255,255,.025), transparent 70%),
    radial-gradient(ellipse 120px 40px at 78% 70%, rgba(255,255,255,.02), transparent 70%),
    radial-gradient(ellipse 90px 30px at 62% 8%, rgba(0,0,0,.18), transparent 70%),
    /* grain */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light; opacity: .55;
}
[data-worn="1"] .screen { position: relative; }
[data-worn="1"] .screen::after {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: min(100%, 170px); aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  background:
    /* dust */
    radial-gradient(circle at 28% 34%, rgba(255,255,255,.22) 0 .6px, transparent 1px),
    radial-gradient(circle at 63% 22%, rgba(255,255,255,.16) 0 .5px, transparent .9px),
    radial-gradient(circle at 71% 68%, rgba(255,255,255,.2) 0 .7px, transparent 1.1px),
    radial-gradient(circle at 39% 77%, rgba(255,255,255,.14) 0 .5px, transparent .9px),
    radial-gradient(circle at 52% 49%, rgba(255,255,255,.1) 0 .4px, transparent .8px),
    /* hairline scratch */
    linear-gradient(118deg, transparent 47.8%, rgba(255,255,255,.07) 48%, transparent 48.3%),
    /* a smudge and glass sheen */
    radial-gradient(ellipse 30% 18% at 66% 30%, rgba(255,255,255,.035), transparent 70%),
    radial-gradient(ellipse 60% 40% at 35% 18%, rgba(255,255,255,.05), transparent 70%),
    /* darker, slightly uneven rim */
    radial-gradient(circle at 48% 52%, transparent 58%, rgba(0,0,0,.45) 100%);
}
/* Burn-in: the ghost of a mono diagonal and an ellipse, etched into the phosphor. */
[data-worn="1"] .phosphor .screen canvas {
  background:
    linear-gradient(45deg, transparent 49.5%, rgba(170,240,140,.055) 50%, transparent 50.5%),
    radial-gradient(ellipse 30% 20% at 50% 50%, transparent 92%, rgba(170,240,140,.05) 96%, transparent 100%),
    radial-gradient(circle at 50% 50%, #121d12 0%, #080b07 68%, #030403 100%),
    repeating-linear-gradient(0deg, transparent 0 calc(12.5% - 1px), #1d2e1c calc(12.5% - 1px) 12.5%),
    repeating-linear-gradient(90deg, transparent 0 calc(12.5% - 1px), #1d2e1c calc(12.5% - 1px) 12.5%);
  background-blend-mode: screen;
}
[data-theme="graphite"] .section { margin-bottom: 34px; }
[data-theme="graphite"] .section h3 { font-size: 11px; font-weight: 700; letter-spacing: .24em; border-bottom: 1px solid #34332f; padding-bottom: 8px; margin-bottom: 18px; }
[data-theme="graphite"] .section h3::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 10px; background: linear-gradient(90deg, var(--alt) 50%, var(--accent) 50%); vertical-align: 1px; }
[data-theme="graphite"] .section-groups { gap: 0; row-gap: 22px; }
[data-theme="graphite"] .section-groups .group:first-child { border-left: 0; padding-left: 0; }
/* Graphite header: one tidy row. Title, presets, then Undo / view / Hit on the right. */
[data-theme="graphite"] header { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 22px 40px 14px; border-bottom: 1px solid #2c2b28; }
[data-theme="graphite"] header .head-row, [data-theme="graphite"] header .head-row > .pgroup { display: contents; }
[data-theme="graphite"] header .spacer, [data-theme="graphite"] header .sub, [data-theme="graphite"] header .presets span, [data-theme="graphite"] #preset-roll { display: none; }
[data-theme="graphite"] header h1 { order: 0; margin-right: 18px; }
[data-theme="graphite"] #preset-prev { order: 1; } [data-theme="graphite"] #preset { order: 2; }
[data-theme="graphite"] #preset-next { order: 3; } [data-theme="graphite"] #preset-name { order: 4; }
[data-theme="graphite"] #preset-save { order: 5; } [data-theme="graphite"] #preset-saveas { order: 6; } [data-theme="graphite"] #preset-del { order: 7; }
[data-theme="graphite"] #undo { order: 8; margin-left: auto; }
[data-theme="graphite"] .bpm { order: 9; } [data-theme="graphite"] #play { order: 10; }
[data-theme="graphite"] #view { order: 11; } [data-theme="graphite"] #hit { order: 12; }
[data-theme="graphite"] header .presets select { width: 180px; }
[data-theme="graphite"] header .presets input { width: 150px; }
[data-theme="graphite"] header { flex-wrap: nowrap; }
/* Wordmark (ui.wordmark): the name as written, lower-case letters in orange. */
[data-wordmark="1"][data-theme="graphite"] header h1 { text-transform: none; font-size: 17px; letter-spacing: .14em; font-weight: 700; }
[data-wordmark="1"] header h1 i { font-style: normal; color: var(--alt); }
/* Graphite full view, packed to fit a laptop screen: smaller cube, shorter faders, Sound across
   the top, Shape under it, then Motion | Output. */
[data-theme="graphite"] main:not(.compact) { padding: 14px 32px 18px; }
[data-theme="graphite"] main:not(.compact) .squares.cube-mode { margin: 0 0 10px; gap: 6px; }
[data-theme="graphite"] main:not(.compact) .cube-wrap { --s: 66px; }
[data-theme="graphite"] main:not(.compact) .groups { display: grid; grid-template-columns: 7fr 3fr; column-gap: 24px; row-gap: 0; }
[data-theme="graphite"] main:not(.compact) .section { margin-bottom: 14px; min-width: 0; }
[data-theme="graphite"] main:not(.compact) div.section:nth-of-type(-n+2) { grid-column: 1 / -1; }
[data-theme="graphite"] main:not(.compact) .section h3 { margin-bottom: 10px; padding-bottom: 5px; font-size: 10px; }
[data-theme="graphite"] main:not(.compact) .section-groups { flex-wrap: nowrap; row-gap: 0; }
[data-theme="graphite"] main:not(.compact) .section-groups .group { flex: var(--n) 1 0 !important; min-width: 0; padding: 0 10px; }
[data-theme="graphite"] main:not(.compact) .group h2 { margin-bottom: 8px; font-size: 9px; }
[data-theme="graphite"] main:not(.compact) .knob .slider { height: 50px; margin: 2px auto 5px; }
[data-theme="graphite"] main:not(.compact) .knob .val { font-size: 9px; min-height: 12px; }
[data-theme="graphite"] main:not(.compact) .knob .name { font-size: 8px; }
/* Toggle (e.g. Poly / Mono) as a block in the same language as the faders. */
[data-theme="graphite"] .toggle-btn { flex: none; width: 46px; height: 50px; margin: 2px auto 8px; padding: 0; border: 1px solid #3a3935; border-radius: 0; background: transparent; color: var(--dim); font: 700 9px var(--mono); letter-spacing: .12em; box-shadow: none; }
[data-theme="graphite"] .toggle-btn:hover { border-color: var(--alt); color: var(--text); background: transparent; }
[data-theme="graphite"] .toggle-btn.on { background: var(--ink); border-color: var(--ink); color: #141414; box-shadow: none; }
[data-theme="graphite"] main.compact .toggle-btn { height: 76px; }
[data-theme="graphite"] .knob.toggle .name { order: 3; }
/* Graphite compact view, tidied: no panel title, clustered faders, an aligned cube row. */
[data-theme="graphite"] .compact-group > h2 { display: none; }
[data-theme="graphite"] main.compact .group.compact-group .knobs { display: flex; justify-content: center; gap: 0; }
[data-theme="graphite"] main.compact .compact-group .knob { flex: 0 0 74px; }
[data-theme="graphite"] main.compact .compact-group .knob.break { margin-left: 22px; padding-left: 22px; border-left: 1px dotted #3a3935; flex-basis: 96px; }
[data-theme="graphite"] main.compact .squares.cube-mode { grid-template-columns: 1fr auto 1fr; gap: 56px; margin: 10px 0 30px; align-items: end; justify-items: stretch; }
[data-theme="graphite"] .cube-flank:first-child { justify-content: flex-end; }
[data-theme="graphite"] .cube-flank:last-child { justify-content: flex-start; }
[data-theme="graphite"] .cube-flank .knob { width: 92px; }
[data-theme="graphite"] main.compact .cube-col { padding-bottom: 2px; }
[data-theme="graphite"] main.compact .toggle-btn { height: 76px; max-height: none; margin: 4px auto 8px; }
[data-theme="graphite"] .knob.toggle::after { content: ""; order: 2; display: block; min-height: 14px; }
[data-theme="graphite"] .status:not(.bad) { display: none; }
[data-theme="graphite"] header #random { order: 0; padding: 7px 16px; font-size: 10px; margin-right: 8px; }
[data-theme="graphite"] header button { white-space: nowrap; }
[data-theme="graphite"][data-view="full"] header .presets select { width: 150px; }
[data-theme="graphite"][data-view="full"] header .presets input { width: 120px; }
[data-theme="graphite"] header { gap: 10px 10px; }
/* Graphite full view, tidied: every fader column the same width so panels share one rhythm,
   panels sized to their content, untitled panels padded to line up with titled ones, the
   toggle the same height as a fader, a little more air between sections. */
[data-theme="graphite"] main:not(.compact) .section { margin-bottom: 20px; }
[data-theme="graphite"] main:not(.compact) .section h3 { margin-bottom: 12px; }
[data-theme="graphite"] main:not(.compact) .section-groups { gap: 0; }
[data-theme="graphite"] main:not(.compact) .section-groups .group { flex: none !important; padding: 0 14px; }
[data-theme="graphite"] main:not(.compact) .section-groups .group:first-child { padding-left: 0; }
[data-theme="graphite"] main:not(.compact) .section-groups .group .knobs { display: flex; gap: 0; }
[data-theme="graphite"] main:not(.compact) .section-groups .knob { width: 62px; flex: none; }
[data-theme="graphite"] main:not(.compact) .section-groups .group:not(:has(> h2)) { padding-top: 17px; }
[data-theme="graphite"] main:not(.compact) .toggle-btn { width: 40px; height: 50px; max-height: none; margin: 2px auto 5px; }
[data-theme="graphite"] main:not(.compact) .knob.toggle::after { min-height: 12px; }
[data-theme="graphite"] main:not(.compact) .groups { grid-template-columns: max-content max-content; column-gap: 40px; justify-content: start; }
[data-theme="graphite"] #app::after { padding-top: 4px; }
[data-theme="graphite"] main:not(.compact) .groups { justify-content: center; }