/* View: metronome — Page-specific styles */

:root { --green:#4cff4c; --dim:#2aa72a; --bg:#000; }
.metronome-page body{margin:0;background:var(--bg);color:var(--green);font:18px/1.3 "Menlo","Monaco","Courier New",monospace;letter-spacing:.5px;display:grid;place-items:center;overflow:hidden}
.crt{position:relative;width:min(900px,96vw);height:min(560px,92vh);border:6px solid var(--dim);border-radius:10px;box-shadow:0 0 40px #0f0a inset,0 0 24px #072;background:#001900;padding:16px;display:grid;grid-template-rows:auto 1fr auto;gap:10px;text-shadow:0 0 6px rgba(76,255,76,.6);margin:2rem auto}
.crt:after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(to bottom,rgba(0,0,0,0)0px,rgba(0,0,0,0)2px,rgba(0,0,0,.15)3px,rgba(0,0,0,.15)4px);pointer-events:none;mix-blend-mode:multiply;border-radius:6px}
.crt h1{margin:0;font-size:22px;letter-spacing:2px;color:var(--green)}
.grid{display:grid;grid-template-columns:1fr 2fr;gap:14px;height:100%;align-items:stretch}
.panel,.stage{border:2px solid var(--dim);border-radius:8px;padding:12px;position:relative}
.stage{display:grid;place-items:center}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.row+.row{margin-top:8px}
.label{color:var(--dim);min-width:7ch}
.value{font-weight:bold}
.crt button,.crt input,.crt select{background:#002200;color:var(--green);border:2px solid var(--dim);border-radius:6px;padding:6px 10px;font:inherit;filter:drop-shadow(0 0 4px rgba(76,255,76,.25))}
.crt button:active{transform:translateY(1px)}
.crt input[type="range"]{width:160px}
.big{font-size:clamp(24px,5.5vw,56px);letter-spacing:2px}
.footer{display:flex;justify-content:space-between;align-items:center}
.blink{animation:blink 1s steps(2,start) infinite}@keyframes blink{to{visibility:hidden}}
.meter{display:grid;grid-auto-flow:column;gap:6px;align-items:end}
.bar{width:12px;height:14px;background:#003300;border:1px solid var(--dim)}
.bar.on{background:var(--green);box-shadow:0 0 10px rgba(76,255,76,.7)}
.accent{outline:2px dashed var(--green);outline-offset:2px}
.crt a{color:var(--green)}
.dial{width:100%;max-width:520px;aspect-ratio:1/1}
.svg{width:100%;height:100%;display:block}