/* The display belongs to the selected site theme.  These variables also feed
 * the canvas renderer: --matrix-bg is the screen background, --matrix-dot the
 * default text colour (`theme`), --matrix-accent the `accent` colour used for
 * headings, and --matrix-dim the empty part of progress bars.  The renderer
 * keeps every other colour readable against --matrix-bg automatically.
 * Light themes use dark ink on a pale screen; dark themes share the classic
 * warm orange text, while frames match the selected theme. */
html[data-theme="standard"] { --matrix-bg:#07070b; --matrix-dot:#ffb14a; --matrix-dim:#392914; --matrix-frame:#0b0b12; --matrix-border:#ff9966; --matrix-glow:#ff8a2b; --matrix-accent:#9fa8ff; }
html[data-theme="modern"] { --matrix-bg:#eef3fb; --matrix-dot:#172033; --matrix-dim:#cbd5e3; --matrix-frame:#f4f7fb; --matrix-border:#2859c5; --matrix-glow:#172033; --matrix-accent:#2859c5; }
html[data-theme="calm"] { --matrix-bg:#f4f1e9; --matrix-dot:#27342e; --matrix-dim:#d9e1da; --matrix-frame:#f4f1e9; --matrix-border:#426b57; --matrix-glow:#27342e; --matrix-accent:#2f6b4f; }
html[data-theme="midnight"] { --matrix-bg:#050c16; --matrix-dot:#ffb14a; --matrix-dim:#402810; --matrix-frame:#07111f; --matrix-border:#92581f; --matrix-glow:#ff8a2b; --matrix-accent:#6fb7ff; }
html[data-theme="vintage"] { --matrix-bg:#ded8c7; --matrix-dot:#292820; --matrix-dim:#bcb39b; --matrix-frame:#ded8c7; --matrix-border:#89816b; --matrix-glow:#292820; --matrix-accent:#8b3a1e; }
html[data-theme="electronics"] { --matrix-bg:#06120f; --matrix-dot:#ffb14a; --matrix-dim:#402810; --matrix-frame:#071d18; --matrix-border:#e8b877; --matrix-glow:#ff8a2b; --matrix-accent:#5ee08a; }
html[data-theme="mtg"] { --matrix-bg:#181c20; --matrix-dot:#ffb14a; --matrix-dim:#44301b; --matrix-frame:#252a30; --matrix-border:#8d7850; --matrix-glow:#ff8a2b; --matrix-accent:#e2c06b; }
html[data-theme="roses"] { --matrix-bg:#fff9fb; --matrix-dot:#49333e; --matrix-dim:#f0dfe6; --matrix-frame:#ffffff; --matrix-border:#ead4de; --matrix-glow:#49333e; --matrix-accent:#b2245c; }

#matrix-bar {
 flex: 0 0 auto; background: var(--matrix-frame); border-bottom: 2px solid var(--matrix-border);
 display: flex; justify-content: center; padding: 4px 8px; transition: background-color 180ms ease, border-color 180ms ease;
}
/* The canvas backing store is the framebuffer (480x20, or 240x20 for text on
 * phones); the element scales it to the page width, at most 3x on desktop.
 * Its height follows from the backing store's shape, so no fixed height. */
#matrix {
 display: block; width: min(1440px, 100%); height: auto; background: var(--matrix-bg);
 border: 1px solid var(--matrix-border); border-radius: 0;
 image-rendering: pixelated;
}
/* Video shrunk below its native width is smoothed rather than having whole
 * columns dropped by nearest-neighbour sampling. */
#matrix.downscaled { image-rendering: auto; }
html[data-theme="vintage"] #matrix { border-width: 5px; border-style: ridge; }
html[data-theme="electronics"] #matrix { border-top-width: 3px; }
@media (prefers-reduced-motion: reduce) { #matrix-bar { transition: none; } }