.cnm{--n-accent:#067957;--n-accent-h:#055f45;--n-ink:#172033;--n-muted:#5b687e;--n-line:#dfe5ec;--n-bg:#f8fafc;--n-g:#12a150;--n-a:#f0a31a;--n-r:#e0362b;--n-bad:#b42318;
box-sizing:border-box;max-width:880px;margin:0 auto 1.5em;padding:16px;background:#fff;border:1px solid var(--n-line);border-radius:14px;color:var(--n-ink);font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;box-shadow:0 1px 3px rgba(23,32,51,.06)}
.cnm *,.cnm *::before,.cnm *::after{box-sizing:border-box}
.cnm .cnm-title{margin:0 0 4px;font-size:1.45em;line-height:1.2;color:var(--n-ink)}
.cnm .cnm-intro{margin:0 0 12px;color:var(--n-muted)}
.cnm-stage{display:flex;align-items:center;justify-content:center;gap:24px;padding:18px;border-radius:14px;background:var(--n-bg);border:1px solid var(--n-line);transition:background .3s}
.cnm-stage[data-state=green]{background:#e9f8ef;border-color:#b5e6c9}
.cnm-stage[data-state=amber]{background:#fff5df;border-color:#f6d58d}
.cnm-stage[data-state=red]{background:#fde8e6;border-color:#f3b3ad}
.cnm-light{display:flex;flex-direction:column;gap:10px;padding:12px;border-radius:40px;background:#1f2937}
.cnm-light i{display:block;width:56px;height:56px;border-radius:50%;background:#374151;transition:background .2s,box-shadow .2s}
.cnm-stage[data-state=red] .cnm-r{background:var(--n-r);box-shadow:0 0 24px var(--n-r)}
.cnm-stage[data-state=amber] .cnm-a{background:var(--n-a);box-shadow:0 0 24px var(--n-a)}
.cnm-stage[data-state=green] .cnm-g{background:var(--n-g);box-shadow:0 0 24px var(--n-g)}
.cnm-read{min-width:0;text-align:left}
.cnm-word{margin:0;font-size:clamp(28px,7vw,48px);font-weight:800;line-height:1.1}
.cnm-stage[data-state=green] .cnm-word{color:#0b6b36}
.cnm-stage[data-state=amber] .cnm-word{color:#8a5a00}
.cnm-stage[data-state=red] .cnm-word{color:var(--n-bad)}
.cnm-db{margin:6px 0 0;font-size:1.3em;font-weight:700;color:var(--n-muted);font-variant-numeric:tabular-nums}
.cnm-db output{font-size:1.5em;color:var(--n-ink)}
.cnm-hint{margin:4px 0 0;color:var(--n-muted)}
.cnm-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:12px}
.cnm .cnm-btn{appearance:none;display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:8px 16px;border:1px solid var(--n-line);border-radius:10px;background:#fff;color:var(--n-ink);font:inherit;font-weight:600;cursor:pointer}
.cnm .cnm-btn:hover{border-color:var(--n-accent);color:var(--n-accent)}
.cnm .cnm-btn:disabled{opacity:.5;cursor:not-allowed}
.cnm .cnm-primary{min-width:160px;background:var(--n-accent);border-color:var(--n-accent);color:#fff}
.cnm .cnm-primary:hover{background:var(--n-accent-h);color:#fff}
.cnm.is-running .cnm-primary{background:#fff;color:var(--n-bad);border-color:#e5484d}
.cnm .cnm-btn:focus-visible,.cnm input:focus-visible,.cnm select:focus-visible{outline:3px solid var(--n-accent);outline-offset:2px}
.cnm-status{margin:10px 0 0;text-align:center;font-size:.9em;color:var(--n-muted);min-height:1.5em}
.cnm-status.is-error{color:var(--n-bad)}
.cnm-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:12px 0 0;padding:0}
.cnm-stats div{border:1px solid var(--n-line);border-radius:10px;padding:8px 10px}
.cnm-stats div:last-child{grid-column:1/-1}
.cnm-stats dt{font-size:.8em;color:var(--n-muted);margin:0}
.cnm-stats dd{margin:0;font-size:1.15em;font-weight:700;font-variant-numeric:tabular-nums}
.cnm-settings{margin-top:12px}
.cnm-presets{border:1px solid var(--n-line);border-radius:10px;margin:0 0 12px;padding:8px 12px 10px;min-width:0}
.cnm-presets legend{font-weight:700;padding:0 4px}
.cnm-presets label{display:flex;align-items:center;gap:8px;min-height:40px;cursor:pointer}
.cnm-presets small{color:var(--n-muted)}
.cnm input[type=radio],.cnm input[type=checkbox]{width:18px;height:18px;accent-color:var(--n-accent)}
.cnm-grid{display:grid;grid-template-columns:1fr;gap:12px}
.cnm-field>label{display:block;font-weight:700;margin-bottom:4px}
.cnm-field input[type=range]{width:100%;accent-color:var(--n-accent);min-height:32px}
.cnm-field select{font:inherit;width:100%;min-height:44px;padding:6px 10px;border:1px solid #c9d3de;border-radius:8px;background:#fff;color:var(--n-ink)}
.cnm-check label{display:flex;align-items:center;gap:8px;font-weight:600}
.cnm-small{font-size:.85em;color:var(--n-muted);margin:10px 0 0}
@media (min-width:640px){.cnm{padding:22px}.cnm-stats{grid-template-columns:repeat(5,minmax(0,1fr))}.cnm-stats div:last-child{grid-column:auto}.cnm-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Full screen: a big, dark projector view with only the light, word and number. */
.cnm:fullscreen{max-width:none;width:100%;height:100%;margin:0;border:0;border-radius:0;padding:4vh 4vw;background:#0f172a;color:#fff;display:flex;flex-direction:column;justify-content:center}
.cnm:fullscreen .cnm-title,.cnm:fullscreen .cnm-intro,.cnm:fullscreen .cnm-settings,.cnm:fullscreen .cnm-small,.cnm:fullscreen .cnm-status{display:none}
.cnm:fullscreen .cnm-stage{flex:1;gap:6vw;background:transparent;border:0}
.cnm:fullscreen .cnm-light{border-radius:12vh;padding:2vh;gap:2vh}
.cnm:fullscreen .cnm-light i{width:16vh;height:16vh}
.cnm:fullscreen .cnm-word{font-size:12vh}
.cnm:fullscreen .cnm-db{font-size:5vh;color:#cbd5e1}
.cnm:fullscreen .cnm-db output{color:#fff}
.cnm:fullscreen .cnm-hint{font-size:3.5vh;color:#cbd5e1}
.cnm:fullscreen .cnm-stage[data-state=green] .cnm-word{color:#4ade80}
.cnm:fullscreen .cnm-stage[data-state=amber] .cnm-word{color:#fbbf24}
.cnm:fullscreen .cnm-stage[data-state=red] .cnm-word{color:#f87171}
.cnm:fullscreen .cnm-stats dd{color:#fff}
.cnm:fullscreen .cnm-stats div{border-color:#334155}
.cnm:fullscreen .cnm-stats dt{color:#94a3b8}
@media (prefers-reduced-motion:reduce){.cnm-stage,.cnm-light i{transition:none}}