:root { color-scheme: dark; --bg:#0f1115; --panel:#181b22; --line:#2a2f3a; --fg:#e8e9ec; --muted:#8b93a3; --blue:#3d8bff; --white:#f4f6ff; }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--fg); font:15px/1.4 system-ui,-apple-system,Segoe UI,Roboto,sans-serif; }
main { max-width: 560px; margin: 0 auto; padding: 16px; }
header { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:12px; }
h1 { font-size:20px; margin:0; } h2 { font-size:15px; margin:0 0 8px; }
.muted { color:var(--muted); font-weight:400; font-size:13px; }
.pill { font-size:12px; padding:2px 10px; border-radius:999px; background:var(--panel); border:1px solid var(--line); }
.pill.ok { border-color:#2e7d4f; color:#8fe0b0; } .pill.bad { border-color:#8a2e2e; color:#f0a0a0; }

/* The faceplate: an ABS box, 120x80 mm-ish proportions */
.faceplate { background:#2b2f36; border:2px solid #3b414b; border-radius:14px; padding:18px 18px 14px; box-shadow: 0 10px 30px #0008, inset 0 1px 0 #ffffff14; }
.epd-frame { background:#1c1e23; border-radius:6px; padding:8px; margin:0 auto 18px; width: fit-content; max-width:100%; }
canvas#epd { display:block; width: 100%; max-width: 500px; aspect-ratio: 250/122; background:#d7d9d3; image-rendering: pixelated; image-rendering: crisp-edges; border:1px solid #000; transition: filter .12s; }
canvas#epd.flash { filter: invert(1); }
.buttons { display:flex; justify-content:space-around; gap:8px; }
.btn-wrap { display:flex; flex-direction:column; align-items:center; gap:6px; }
.btn-wrap label { font-size:11px; letter-spacing:.08em; color:#c9cdd6; text-align:center; }
.btn-wrap label small { display:block; letter-spacing:0; color:var(--muted); font-size:10px; }
.btn { position:relative; width:64px; height:64px; border-radius:50%; border:none; background:#111; padding:0; cursor:pointer; touch-action:none; -webkit-user-select:none; user-select:none; }
.btn .cap { position:absolute; inset:10px; border-radius:50%; background: radial-gradient(circle at 35% 30%, #3a3d44, #15171b 70%); box-shadow: inset 0 2px 4px #fff2, 0 3px 6px #0009; display:flex; align-items:center; justify-content:center; color:#c9cdd6; font-size:14px; transition: transform .05s; }
.btn:active .cap, .btn.down .cap { transform: scale(.94); box-shadow: inset 0 2px 8px #000c; }
/* RGB rings: --ring is set from JS (the COLOR table), .lit adds the glow */
.btn .ring { position:absolute; inset:4px; border-radius:50%; border:4px solid var(--ring, #23262c); transition: border-color .15s, box-shadow .15s; }
.btn.lit .ring { box-shadow: 0 0 14px var(--ring), inset 0 0 8px var(--ring); }
.btn.holding .ring { animation: blink .3s steps(1) infinite; }
.btn.nolink .ring { animation: slowblink 2s steps(1) infinite; }
@keyframes blink { 50% { border-color:#23262c; box-shadow:none; } }
@keyframes slowblink { 0%,20% { border-color:var(--ring); box-shadow:0 0 12px var(--ring);} 21%,100% { border-color:#23262c; box-shadow:none; } }
.swatch { display:inline-block; width:12px; height:12px; border-radius:50%; vertical-align:-1px; margin-right:6px; }

.panel { background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:12px 14px; margin-top:14px; }
.row { display:flex; gap:8px; align-items:center; }
.row label { font-size:12px; color:var(--muted); white-space:nowrap; }
input { flex:1; min-width:0; background:#0c0e12; border:1px solid var(--line); color:var(--fg); border-radius:6px; padding:6px 8px; font:inherit; }
button.small { background:#262a33; color:var(--fg); border:1px solid var(--line); border-radius:6px; padding:6px 10px; font:13px inherit; cursor:pointer; }
button.small:active { background:#343945; }
.stats { display:grid; grid-template-columns:auto 1fr; gap:4px 12px; margin:10px 0 0; font-size:13px; }
.stats dt { color:var(--muted); } .stats dd { margin:0; font-variant-numeric: tabular-nums; }
.chips { display:flex; flex-wrap:wrap; gap:6px; }
#log { margin:0; padding-left:1.4em; font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; color:#c9cdd6; max-height:260px; overflow:auto; }
#log li.err { color:#f0a0a0; } #log li.cmd { color:#9fd0ff; }
[hidden] { display:none !important; }