:root{font-family:system-ui,sans-serif;color-scheme:dark;background:#111;color:#eee}body{margin:0}main{max-width:520px;margin:auto;padding:24px}.card{background:#202124;border:1px solid #444;border-radius:16px;padding:22px;box-shadow:0 8px 30px #0006}.hidden{display:none}h1{font-size:1.5rem}h2{font-size:1.1rem;margin-top:24px}.status{margin-bottom:25px}.ok{color:#7ee787}.off,.error{color:#ff7b72}label{display:block;font-size:1.1rem;margin:20px 0}label output{float:right}input[type=range]{display:block;width:100%;margin-top:12px;height:32px}input[type=password]{box-sizing:border-box;width:100%;font-size:1.1rem;padding:12px;border-radius:8px;border:1px solid #666}button{margin-top:12px;padding:12px 18px;border:0;border-radius:9px;font-size:1rem;font-weight:700;touch-action:manipulation;-webkit-user-select:none;user-select:none}.channelStep{display:flex;align-items:center;justify-content:space-between;border-top:1px solid #3c3f44;padding:12px 0}.stepper{display:flex;align-items:center;gap:8px}.step{width:48px;height:44px;margin:0;background:#343941;color:#fff;font-size:1.5rem;padding:0}.stepper output{min-width:36px;text-align:right;font-variant-numeric:tabular-nums;font-size:1.35rem}.percent{font-size:1.1rem}.meter{border-top:1px solid #555;margin-top:14px;padding-top:2px}.meterHead{display:flex;align-items:baseline;justify-content:space-between}.meterHead h2{margin-bottom:8px}.meterHead span{font-size:.78rem;color:#bbb}.dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin:0 3px 0 8px}.aDot{background:#bf5af2}.bDot{background:#32ade6}#intensityGraph{display:block;width:100%;height:150px;background:#16181c;border:1px solid #3c3f44;border-radius:8px}.graphNote{margin:7px 0 0;color:#888;font-size:.78rem}.ramp{border-top:1px solid #555;margin:28px 0;padding-top:4px}.rampTime{margin:4px 0;color:#ddd;font-size:.9rem}.rampButton{width:100%;background:#2f81f7;color:white}.stop{width:100%;min-height:110px;background:#d1242f;color:white;font-size:2.2rem}.note{color:#aaa;line-height:1.4}button:disabled{opacity:.45}
@media (max-width:600px) and (max-height:950px){main{padding:6px;max-width:none}main>h1{font-size:1.05rem;margin:4px 4px 6px}.card{padding:10px;border-radius:10px}.status{margin-bottom:5px;font-size:.82rem}h2{font-size:.9rem;margin:7px 0 4px}.channelStep{padding:3px 0;font-size:.86rem}.step{width:44px;height:36px;font-size:1.25rem}.stepper{gap:5px}.stepper output{font-size:1rem;min-width:28px}.percent{font-size:.78rem}.meter{margin-top:4px}.meterHead h2{margin:3px 0}.meterHead span{font-size:.66rem}#intensityGraph{height:90px}.graphNote{font-size:.65rem;margin:1px 0}.ramp{margin:5px 0 4px}.ramp label{font-size:.78rem;margin:3px 0}input[type=range]{height:18px;margin-top:0}.rampTime{display:inline-block;font-size:.76rem;margin:1px 0}.rampButton{float:right;width:auto;margin:0;padding:7px 12px}.ramp .note{clear:both;font-size:.72rem;margin:2px 0}.stop{min-height:50px;font-size:1.4rem;margin-top:2px}.stop+.note{display:none}.error{font-size:.75rem;margin:2px 0}}
:root{--page:#111;--surface:#202124;--surface-2:#16181c;--control:#343941;--line:#3c3f44;--text:#eee;--muted:#aaa;--grid:#3b4048;--a:#bf5af2;--b:#32ade6;background:var(--page);color:var(--text)}:root[data-theme="light"]{color-scheme:light;--page:#f2f4f7;--surface:#fff;--surface-2:#f7f8fa;--control:#e3e7ed;--line:#c8ced8;--text:#17191d;--muted:#59616d;--grid:#ccd2db}body{background:var(--page);color:var(--text)}.card{background:var(--surface);border-color:var(--line)}.channelStep,.meter,.ramp{border-color:var(--line)}.step{background:var(--control);color:var(--text)}#intensityGraph{background:var(--surface-2);border-color:var(--line)}.note,.graphNote{color:var(--muted)}.status{display:flex;align-items:center;justify-content:space-between}.themeToggle{margin:0;padding:6px 9px;background:var(--control);color:var(--text);font-size:.76rem}.freqStep{width:58px;font-size:.78rem}
@media (max-width:600px) and (max-height:950px){.themeToggle{padding:4px 7px;font-size:.68rem}.freqStep{width:52px;font-size:.7rem}}