/* Receiver: the faceplate of a 1970s hi-fi receiver. Brushed aluminium,
   labels engraved small and wide, chrome keys that sink when pressed, and
   everything live behind black glass: the meters, the clock, the programme
   picture and the suggestions glow cyan in the display window, the way a
   tuner's frequency did. Light around the edges, dark only where the signal is. */

@font-face {
  font-family: "Michroma";
  src: url("/static/fonts/michroma-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

/* Barlow for everything read: a plain grotesk drawn after highway signs
   and licence plates, at home next to the engraving. Latin always, the
   extended set only when a name needs it. */
@font-face {
  font-family: "Barlow";
  src: url("/static/fonts/barlow-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Barlow";
  src: url("/static/fonts/barlow-ext-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Barlow";
  src: url("/static/fonts/barlow-500.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Barlow";
  src: url("/static/fonts/barlow-ext-500.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Barlow";
  src: url("/static/fonts/barlow-600.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Barlow";
  src: url("/static/fonts/barlow-ext-600.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Barlow";
  src: url("/static/fonts/barlow-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Barlow";
  src: url("/static/fonts/barlow-ext-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  color-scheme: light;
  --metal: #c8ccd1;
  --metal-hi: #e4e7ea;
  --metal-lo: #9ea4ab;
  --glass: #070b0d;
  --vfd: #71f2df; /* the display's cyan */
  --vfd-dim: #3aa79a;
  --bg: var(--metal);
  --panel: #d6d9dd;
  --raise: #e2e5e8;
  --line: #a9aeb5;
  --line-strong: #7f858d;
  --text: #16191d;
  --soft: #30353c;
  --dim: #474c53; /* 4.5:1 even on the darkest band of the brushing */
  --accent: #1f2328;
  --accent-ink: #f2f4f6;
  --live: #e3342f;
  --ok: #0e8f6f;
  --label: "Michroma", system-ui, sans-serif;
  --sans: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --radius: 3px;
  accent-color: #0e8f6f;
  scrollbar-color: var(--metal-lo) transparent;
}

/* Brushed: hairline streaks across a soft vertical sheen. */
html, body {
  background-color: var(--metal);
  background-image:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.07) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, #d7dade, #bfc3c8 60%, #c9cdd2);
  background-attachment: fixed;
  color: var(--text);
}
::selection { background: rgba(14, 143, 111, 0.28); }

/* Engraving: small, wide, dark, with a highlight under the cut. */
.bar .mark, .inputs h2, .page h2, .panel-head, .news-wrap h2, .tag, .btn, .quiet, th,
.transcript summary, details summary, .status, .plan, .field, .check, .live {
  font-family: var(--label);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55);
}
.bar {
  background: linear-gradient(180deg, #2a2e33, #15181b); border-bottom: 2px solid #0a0c0e;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.bar a, .bar .who { color: #b9c0c7; text-shadow: none; }
.bar .mark { color: var(--vfd); font-size: 13px; text-shadow: 0 0 8px rgba(113, 242, 223, 0.6); }
.bar .quiet { color: #b9c0c7; text-shadow: none; background: #23272c; border-color: #3a3f46; }

/* Chrome keys. */
.btn, .quiet {
  background: linear-gradient(180deg, #f3f5f7, #cdd1d6 55%, #b9bec4);
  color: var(--text); border: 1px solid #7f858d; border-radius: 3px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 2px 0 #8a9097, 0 3px 4px rgba(0, 0, 0, 0.18);
  padding: 8px 14px; font-weight: 400;
}
.btn:hover:not(:disabled), .quiet:hover:not(:disabled) {
  filter: none; color: var(--text); border-color: #5f656c; background: linear-gradient(180deg, #fafbfc, #d8dce0 55%, #c3c8cd);
}
.btn:active:not(:disabled), .quiet:active:not(:disabled) {
  transform: translateY(2px); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 0 0 #8a9097;
}
.quiet { padding: 6px 10px; font-size: 10px; }
/* The record key carries its own lamp. */
.btn.rec::before, .btn.go::before {
  content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 8px;
  vertical-align: 1px; background: #6b2523; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.5);
}
.btn.rec { color: var(--text); }
.studio[data-rec="on"] .btn.rec::before { background: #ff3b33; box-shadow: 0 0 8px #ff3b33; }
.studio[data-rec="on"] .btn.rec { transform: translateY(2px); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3); }
.btn.go.stop { background: linear-gradient(180deg, #f3f5f7, #cdd1d6 55%, #b9bec4); color: #a51d18; }
/* A chrome key like the rest until it is down; the lamp says what it does. */
.btn.rec { background: linear-gradient(180deg, #f3f5f7, #cdd1d6 55%, #b9bec4); }
.studio[data-rec="on"] .btn.rec { background: linear-gradient(180deg, #c3c8cd, #d8dce0); }

input, select, textarea {
  background: #eef0f2; border: 1px solid #8f959c; border-radius: 2px; color: var(--text);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.18);
}
input:focus-visible, select:focus-visible, textarea:focus-visible { border-color: #0a5e49; }
:focus-visible { outline-color: #0a5e49; } /* pilot green, deep enough for 3:1 on metal */

.page h1 { font-family: var(--label); font-weight: 400; font-size: 18px; letter-spacing: 0.06em; text-transform: uppercase; }
/* Titles people typed are content, not engraving. */
.studio h1, .show-head h1, .public-show h1, .page .show-head h1 {
  font-family: var(--sans); font-weight: 600; font-size: 20px; letter-spacing: 0; text-transform: none;
}
.studio[data-live="live"] h1::after, .studio[data-rec="on"] h1::after {
  content: "On air"; font-family: var(--label); font-size: 10px; letter-spacing: 0.14em; color: #ff4b44;
  background: var(--glass); padding: 4px 8px; border-radius: 2px; text-shadow: 0 0 6px rgba(255, 75, 68, 0.8);
}
.inputs .group { border-bottom: 1px solid var(--metal-lo); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); }
.inputs h2, .page h2 { color: var(--dim); }

/* Black glass: anything that carries signal. */
.meter {
  height: 8px; background: var(--glass); border-radius: 1px; box-shadow: inset 0 1px 2px #000, 0 1px 0 rgba(255, 255, 255, 0.6);
}
.meter::after {
  background: repeating-linear-gradient(90deg, var(--vfd-dim) 0 4px, transparent 4px 6px);
}
.meter.on::after {
  background: repeating-linear-gradient(90deg, var(--vfd) 0 4px, transparent 4px 6px);
  filter: drop-shadow(0 0 3px rgba(113, 242, 223, 0.8));
}
.clock {
  font-family: var(--mono); font-size: 18px; color: #ff6a5f; background: var(--glass); padding: 2px 8px;
  border-radius: 2px; text-shadow: 0 0 6px rgba(255, 90, 80, 0.7); letter-spacing: 0.06em;
}
.program, .thumb { border-radius: 3px; background: var(--glass); border: 6px solid #1a1d21; box-shadow: 0 0 0 1px #6f757c, 0 2px 0 rgba(255, 255, 255, 0.5); }
.on-air {
  background: rgba(7, 11, 13, 0.8); color: var(--vfd); font-family: var(--label); font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase; text-shadow: 0 0 6px rgba(113, 242, 223, 0.8);
}
.studio[data-rec="on"] .on-air { background: rgba(7, 11, 13, 0.8); color: #ff6a5f; text-shadow: 0 0 6px rgba(255, 90, 80, 0.8); }
.thumb { border-width: 4px; }
.thumb .tag { color: var(--vfd); text-shadow: 0 0 6px rgba(113, 242, 223, 0.8); }
.thumb.on { border-color: #2b0f0e; box-shadow: 0 0 0 1px #ff3b33, 0 0 10px rgba(255, 59, 51, 0.5); }
.thumb[aria-pressed="true"] { border-color: #0f3c37; }
.thumb[aria-pressed="true"]:not(.on) { box-shadow: 0 0 0 1px var(--vfd), 0 0 8px rgba(113, 242, 223, 0.45); }
.cam .tag { color: var(--dim); }

/* The display window. */
.panel {
  background: radial-gradient(120% 80% at 50% 0%, #0f1a1c, var(--glass) 70%);
  border: 8px solid #1a1d21; border-radius: 4px; color: var(--vfd);
  box-shadow: 0 0 0 1px #6f757c, inset 0 0 40px rgba(113, 242, 223, 0.05), 0 2px 0 rgba(255, 255, 255, 0.55);
}
.panel-head { color: var(--vfd-dim); text-shadow: none; }
.panel-head .state-word { color: var(--vfd); text-shadow: 0 0 6px rgba(113, 242, 223, 0.7); }
.panel-head .quiet { background: #121719; color: var(--vfd-dim); border-color: #26302f; box-shadow: none; text-shadow: none; }
.panel-head .quiet:hover:not(:disabled) { color: var(--vfd); border-color: var(--vfd-dim); background: #121719; }
.state[data-state="live"] { background: var(--vfd); box-shadow: 0 0 8px var(--vfd); }
.state[data-state="working"] { background: var(--vfd-dim); box-shadow: 0 0 6px rgba(113, 242, 223, 0.5); }
.summary { color: var(--vfd-dim); }
.topic { border-top-color: rgba(113, 242, 223, 0.12); }
.topic .title { color: var(--vfd); font-weight: 600; text-shadow: 0 0 10px rgba(113, 242, 223, 0.45); }
.topic .hook { color: #b8f3ea; opacity: 0.8; }
.news-wrap h2 { color: var(--vfd-dim); text-shadow: none; }
.news .item { border-top-color: rgba(113, 242, 223, 0.12); }
.news .headline { color: #e8fffb; }
.news .meta { color: var(--vfd-dim); }
.news .angle { color: #b8f3ea; opacity: 0.8; }
body.window { background: var(--glass); }
body.window .panel { border: 0; box-shadow: none; }

.lines { border-top-color: var(--metal-lo); color: var(--soft); }
.lines .clock { background: none; color: var(--dim); text-shadow: none; font-size: 12px; padding: 0; }

/* Shows, episodes, the public page. */
.art { border: 6px solid #1a1d21; box-shadow: 0 0 0 1px #6f757c; background: var(--glass); }
.art.empty { color: var(--vfd-dim); }
.episode { background: var(--panel); border: 1px solid var(--line-strong); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6); }
.status { background: var(--glass); color: var(--vfd); border-color: #1a1d21; text-shadow: 0 0 6px rgba(113, 242, 223, 0.6); }
.status.live { background: var(--glass); color: #ff6a5f; border-color: #1a1d21; text-shadow: 0 0 6px rgba(255, 90, 80, 0.7); }
.status.failed { color: #ff6a5f; }
.public-show .author { color: var(--dim); font-family: var(--sans); text-transform: none; letter-spacing: 0; }
.public-episodes li { border-top-color: var(--metal-lo); }
.present li { background: var(--glass); color: var(--vfd); border-color: #1a1d21; }
td, th { border-bottom-color: var(--metal-lo); }
.gate .mark { font-family: var(--label); letter-spacing: 0.2em; text-transform: uppercase; }
.public-show .public-episodes h2 { font-weight: 600; text-shadow: none; }
.public-show h1 { font-size: 20px; }

/* -- Controls: machined knobs and bat-handle toggles. -------------------- */

/* Knobs. The light is fixed overhead, so the cap's highlights stay put while
   the knurled skirt and the engraved pointer turn. */
.dial .knob { color: #1b1f23; }
.dial .skirt {
  background:
    radial-gradient(farthest-side, transparent 78%, rgba(0, 0, 0, 0.25) 79%, transparent 100%),
    repeating-conic-gradient(#eef0f2 0 3deg, #8f969d 3deg 6deg);
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.32), 0 1px 1px rgba(0, 0, 0, 0.35);
}
.dial .cap {
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.35) 0 18%, transparent 19%),
    conic-gradient(from 200deg, #f8f9fa, #a6adb4 12%, #eff1f3 26%, #99a0a7 40%, #f4f5f7 54%, #a3a9b0 68%, #edf0f2 82%, #f8f9fa);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.9), inset 0 -1px 2px rgba(0, 0, 0, 0.3), 0 0 0 1px #7f858d;
}
.dial .pointer::after { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7); }
.dial .knob:focus-visible { outline: 2px solid #0a5e49; }
.dial .pos {
  font-family: var(--label); letter-spacing: 0.06em; color: var(--dim);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55);
}
.dial .pos:not(.on) { opacity: 0.68; }
.dial .pos.on { color: var(--text); }
.dial.smooth { --tick: #4d535a; --arc: #1f2328; }
.dial.smooth .body::after { filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.6)); }
.dial-field .legend { font-family: var(--label); letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55); }
.dial-field output {
  font-family: var(--mono); font-size: 11px; color: var(--vfd); background: var(--glass);
  padding: 1px 5px; border-radius: 2px; margin-top: 3px; text-shadow: 0 0 5px rgba(113, 242, 223, 0.6);
}

/* Toggles: a chrome bat lever in a steel hex nut. */
.toggle .nut { background: linear-gradient(135deg, #f7f8f9, #c3c8cd 45%, #8a9198); }
.toggle .bush {
  background: radial-gradient(circle at 40% 35%, #f3f5f7, #9aa1a8 60%, #5f666d);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35);
}
.toggle .lever { --chrome: linear-gradient(90deg, #6f767d, #f7f8f9 40%, #c3c8cd 62%, #6a7178); }
.toggle .lever::after { background: radial-gradient(circle at 38% 32%, #ffffff, #d3d7db 40%, #7c838a 95%); }
.toggle > input:focus-visible ~ .switch { outline-color: #0a5e49; }
.toggle .legend { font-family: var(--label); color: var(--dim); }
.check.toggle { font-family: var(--label); }
/* The legend the lever points at is the one that is lit. */
.toggle > input:not(:checked) ~ .lo, .toggle > input:checked ~ .hi { color: var(--text); }
.toggle .nut { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25); }
/* In the top trim: legends light on the dark bar, the chosen one lit. */
.bar .theme-switch { margin-right: 4px; }
.bar .theme-switch .legend { color: #7e868e; text-shadow: none; transition: color 120ms, text-shadow 120ms; }
.bar .theme-switch > input:not(:checked) ~ .lo, .bar .theme-switch > input:checked ~ .hi {
  color: var(--vfd); text-shadow: 0 0 6px rgba(113, 242, 223, 0.55);
}
.bar .theme-switch .nut { background: linear-gradient(135deg, #c9ced3, #7d848b 50%, #3e444a); }

/* -- Layout pieces. ---------------------------------------------------- */

/* The three places each carry a lamp; the one you are in is lit. */
.bar nav.primary a::before {
  content: ""; display: inline-block; width: 5px; height: 5px; border-radius: 50%; margin-right: 7px;
  vertical-align: 2px; background: #30363b; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.7);
}
.bar a[aria-current="page"] { color: #e6ecef; }
.bar nav.primary a[aria-current="page"]::before { background: var(--vfd); box-shadow: 0 0 6px var(--vfd); }

/* The transport: a raised plate the length of the console. */
.transport {
  background: linear-gradient(180deg, #dcdfe2, #c9cdd2);
  border-bottom: 1px solid var(--metal-lo);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5), 0 8px 14px -10px rgba(0, 0, 0, 0.35);
}
.page-head { border-bottom-color: var(--metal-lo); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); }
.show-row, .episodes, .episodes .episode { border-color: var(--metal-lo); }
.show-row .art.empty { background: var(--glass); }
.new-show > summary, .new-ep > summary { font-family: var(--label); }
.rooms .brief-line { color: var(--dim); }
.tile { border: 4px solid #1a1d21; box-shadow: 0 0 0 1px #6f757c; }
.tile figcaption { font-family: var(--label); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--vfd); text-shadow: 0 0 6px rgba(113, 242, 223, 0.7); }
.call-key::before { background: #233d34; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.5); }
.call-key[aria-pressed="true"]::before { background: #19d39a; box-shadow: 0 0 8px #19d39a; }
.qr canvas { border: 6px solid #1a1d21; box-shadow: 0 0 0 1px #6f757c; }
.pair canvas { border: 6px solid #1a1d21; box-shadow: 0 0 0 1px #6f757c; }
.pair .code { color: var(--vfd); background: var(--glass); padding: 4px 10px; border-radius: 2px; text-shadow: 0 0 8px rgba(113, 242, 223, 0.7); width: fit-content; }
.viewfinder { border: 8px solid #1a1d21; box-shadow: 0 0 0 1px #6f757c; }
.cam-head .cam-state { font-family: var(--label); letter-spacing: 0.12em; text-transform: uppercase; font-size: 10px; }

/* Rockers: a black moulded switch set into the aluminium. Off, the I half
   stands proud and lit and the O half is pressed into shadow; on, the other
   way round, and the bar lights green. */
.rocker .housing {
  background: linear-gradient(180deg, #2c3035, #15171a);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4), 0 1px 0 1px rgba(255, 255, 255, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
}
.rocker .paddle { background: #0b0c0e; }
.rocker .paddle span { color: rgba(226, 230, 233, 0.82); }
/* Proud: lit along the edge that faces the light, falling away to the pivot. */
.rocker .paddle .on, .rocker > input:checked ~ .housing .off {
  background: linear-gradient(180deg, #5d636a 0%, #3a3f45 45%, #2a2e33 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32), inset 0 -1px 0 rgba(0, 0, 0, 0.35);
}
/* Pressed: under the bezel's lip, the proud half's shadow across it. */
.rocker .paddle .off {
  background: linear-gradient(180deg, #060708 0%, #121417 55%, #1a1d20 100%);
  box-shadow: inset 0 3px 3px -1px rgba(0, 0, 0, 0.85);
}
.rocker > input:checked ~ .housing .on {
  background: linear-gradient(0deg, #060708 0%, #121417 55%, #1a1d20 100%);
  box-shadow: inset 0 -3px 3px -1px rgba(0, 0, 0, 0.85), inset 0 2px 2px -1px rgba(0, 0, 0, 0.7);
  color: #2df0b0;
}
.rocker > input:checked ~ .housing .on::before { box-shadow: 0 0 5px rgba(45, 240, 176, 0.9), 0 0 1px #b9ffe6; }
.rocker > input:checked ~ .housing .off { color: rgba(226, 230, 233, 0.82); }
.rocker .legend { font-family: var(--label); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); }

/* Plays: a second display window, the numbers lit like the clock. */
.plays-deck {
  padding: 14px 16px; border-radius: 4px; color: var(--vfd);
  background: radial-gradient(120% 90% at 30% 0%, #0f1a1c, var(--glass) 70%);
  border: 6px solid #1a1d21; box-shadow: 0 0 0 1px #6f757c, 0 2px 0 rgba(255, 255, 255, 0.5);
}
.readouts dt, .chart figcaption, .apps .n { color: var(--vfd-dim); text-shadow: none; }
.readouts dd { color: var(--vfd); text-shadow: 0 0 8px rgba(113, 242, 223, 0.6); }
.chart rect, .apps rect { fill: var(--vfd); }
.chart rect { filter: drop-shadow(0 0 2px rgba(113, 242, 223, 0.5)); }
.apps .name { color: var(--vfd); }
.apps svg { background: #16201f; }