:root{color-scheme:dark;--bg:#111714;--panel:#19221d;--border:#33433a;--muted:#a8b8ae;--ink:#f1f4ef;--accent:#c1f67f;font:16px/1.5 system-ui,sans-serif}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:radial-gradient(ellipse at 40% 0,#223329 0,transparent 36rem),var(--bg);color:var(--ink)}
main{max-width:760px;margin:auto;padding:clamp(20px,5vw,48px) max(16px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}
.mast,.section-head,.settings,.actions,.ticks{display:flex;align-items:center;justify-content:space-between;gap:12px}
.mast{justify-content:flex-start;margin-bottom:25px}.mast button{margin-left:auto}
.mark{display:grid;place-items:center;background:var(--accent);color:#142310;width:48px;height:48px;border-radius:15px;font-size:30px}
.eyebrow,.ticks{color:var(--muted);font:700 .69rem/1.4 ui-monospace,monospace;letter-spacing:.12em}
h1,h2,p{margin:0}h1{font-size:2.25rem;line-height:1;letter-spacing:-.075em}h1 span{color:var(--accent)}
h2{font-size:1.35rem;letter-spacing:-.03em}p{color:var(--muted)}
.card{background:var(--panel);border:1px solid var(--border);border-radius:20px;padding:clamp(14px,4vw,24px);margin-bottom:16px}
.section-head{margin-bottom:14px}
.viewfinder{background:#0c110e;aspect-ratio:4/3;border:1px solid var(--border);border-radius:12px;overflow:hidden;display:grid;place-items:center}
.viewfinder img{width:100%;height:100%;object-fit:contain;display:block}
.foot{font-size:.85rem;margin-top:12px}
button,input,select{font:inherit;color:inherit}button{cursor:pointer;border-radius:10px;min-height:44px;padding:8px 13px;font-weight:650}
button:disabled,fieldset:disabled{opacity:.65;cursor:default}
.quiet{background:#223028;border:1px solid var(--border)}.primary{background:var(--accent);border:1px solid transparent;color:#142310}
input,select{min-width:0;background:#121b16;border:1px solid var(--border);border-radius:8px;padding:8px 10px;min-height:44px}
input[type=checkbox]{accent-color:var(--accent);min-height:auto;width:18px;height:18px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
label{display:grid;gap:5px;font-size:.875rem;color:var(--muted)}
form p{font-size:.85rem;margin:12px 0}fieldset{padding:0;border:0;min-width:0;margin:0}
#login-form{display:grid;gap:14px;margin-top:16px;max-width:360px}
#timeline{position:relative;height:12px;background:#38463e;border-radius:5px;overflow:hidden}
#timeline span{position:absolute;top:0;height:100%;background:var(--accent);border-right:1px solid var(--panel)}
#timeline .quiet-hours{background:#7684ac}#timeline.paused{opacity:.35}.ticks{margin:5px 0 18px;letter-spacing:0}
.toggle{display:flex;align-items:center;min-height:44px}.input-unit input{width:82px}
.window{display:grid;grid-template-columns:1fr 1fr 1.25fr auto;align-items:end;gap:8px;margin-bottom:8px;padding:10px;background:#152019;border:1px solid var(--border);border-radius:10px}
.window input,.window select{width:100%}.window .interval{grid-column:3}.actions{margin-top:14px;flex-wrap:wrap}
#status{min-height:1.5em;color:var(--accent)}#status[data-error]{color:#ffb8a8}
@media(max-width:520px){.window{grid-template-columns:1fr 1fr}.window .interval{grid-column:auto}.window .remove{justify-self:start}.settings{align-items:end}}