:root{font-family:system-ui,sans-serif;color:#f2f6f5;background:#111b20;color-scheme:dark;--accent: #cef77d;--muted: #b0c0c5;--border: #35464d}*{box-sizing:border-box}body{margin:0}nav,main{width:min(100% - 2rem,68rem);margin-inline:auto}nav{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding-block:max(1rem,env(safe-area-inset-top)) 1rem;border-bottom:1px solid var(--border)}nav div{display:flex;gap:1rem}nav a{color:var(--muted);text-decoration:none}nav a[aria-current],nav .wordmark{color:var(--accent);font-weight:700}main{padding-block:1.25rem max(1.5rem,env(safe-area-inset-bottom))}main.camera{max-width:48rem}header{display:flex;justify-content:space-between;align-items:center;gap:.75rem;margin-bottom:1rem}h1{margin:0;font-size:clamp(1.45rem,4vw,2.2rem)}.eyebrow,.label,dt{color:var(--muted);font-size:.85rem}.eyebrow{margin:0 0 .25rem}.status{border:1px solid var(--border);border-radius:2rem;padding:.45rem .75rem;font-size:.85rem}.stage{position:relative;display:grid;place-items:center;aspect-ratio:16 / 9;max-height:59svh;background:#080e11;border:1px solid var(--border);border-radius:.8rem;overflow:hidden}.stage video{width:100%;height:100%;object-fit:contain;min-height:0}.stage span{position:absolute;color:var(--muted);text-align:center;padding:.75rem}.stage.dimmed video{opacity:.12}.toolbar{display:flex;flex-wrap:wrap;align-items:end;gap:.75rem;margin-block:1rem}button,input,select{font:inherit;border-radius:.45rem;min-height:2.75rem}button{border:1px solid transparent;background:var(--accent);color:#142000;padding:.6rem 1rem;font-weight:700;cursor:pointer}button:disabled{opacity:.5;cursor:default}button.secondary,input,select{color:inherit;background:#1a282e;border:1px solid var(--border)}label{display:grid;gap:.35rem}input,select{padding-inline:.65rem}input{max-width:10rem}.code{display:block;font-size:2rem;letter-spacing:.12em;font-variant-numeric:tabular-nums;color:var(--accent)}.metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(8rem,1fr));gap:.5rem}.metrics div{padding:.65rem .75rem;border:1px solid var(--border);border-radius:.5rem}dd{margin:.3rem 0 0;font-variant-numeric:tabular-nums}.error{color:#ffb4a8}@media(orientation:landscape)and (min-width:480px){.camera-layout{display:grid;grid-template-rows:auto minmax(0,1fr);height:100dvh;padding:env(safe-area-inset-top) max(.75rem,env(safe-area-inset-right)) env(safe-area-inset-bottom) max(.75rem,env(safe-area-inset-left))}.camera-layout nav{width:100%;padding-block:.5rem}main.camera{display:grid;grid-template-columns:minmax(0,1fr) clamp(12rem,27vw,16rem);grid-template-rows:auto minmax(0,1fr);grid-template-areas:"preview heading" "preview controls";column-gap:.875rem;width:100%;max-width:none;min-height:0;padding-block:.625rem}.camera>.stage{grid-area:preview;aspect-ratio:auto;max-height:none;min-height:0}.camera>.stage video{position:absolute;inset:0}.camera>header{grid-area:heading;flex-direction:column;align-items:flex-start;gap:.375rem;margin-bottom:.5rem}.camera h1{font-size:1.25rem}.camera .status{padding:.25rem .625rem}.camera-controls{grid-area:controls;min-height:0;overflow-y:auto}.camera-controls>p{margin:0 0 .5rem}.camera .toolbar{display:grid;gap:.5rem;margin-block:0}.camera .code{font-size:clamp(1.45rem,3.3vw,2rem)}}