@font-face { font-family:Inter;src:url('/inter.woff2') format('woff2');font-weight:100 900;font-display:swap; }
:root {
  --bg:#101918;--surface:#182623;--well:#101e1b;--ink:#eff8f2;--muted:#b0c7bd;
  --mint:#a1e5c6;--line:#36574d;--warning:#f7a690;
  color-scheme:dark;
}
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { margin:0;background:radial-gradient(ellipse at 67% -8%,#254239 0,transparent 55%),var(--bg);color:var(--ink);font:15px/1.54 Inter,sans-serif; }
a { color:var(--mint);text-underline-offset:.23em; }
button,input,select { font:inherit; }
button { cursor:pointer; }
button:disabled { cursor:default;opacity:.5; }
:focus-visible { outline:2px solid var(--mint);outline-offset:3px; }
.skip { position:absolute;left:12px;top:-100px;z-index:4;padding:8px;background:var(--surface); }
.skip:focus { top:8px; }
.shell { width:min(1180px,calc(100% - 64px));margin-inline:auto; }
.top,.brand,.top nav,.panel-head,.controls,.actions,.level,.scale,.check { display:flex;align-items:center; }
.top { min-height:66px;justify-content:space-between;gap:10px;border-bottom:1px solid var(--line); }
.top nav { gap:14px;justify-content:end;flex-wrap:wrap;font-size:13px; }
.brand { color:var(--ink);font-weight:785;text-decoration:none;gap:8px; }
.mark { position:relative;width:28px;height:28px;border:1px solid #669987;border-radius:6px;background:#263f36; }
.mark::before,.mark::after { content:'';position:absolute;inset:6px;border:1px solid var(--mint);border-radius:4px; }
.mark::after { inset:11px;background:var(--mint); }
.intro { display:grid;grid-template-columns:minmax(0,1.22fr) minmax(220px,290px);align-items:end;gap:22px;margin:36px 0 20px; }
h1 { margin:0;font:820 clamp(43px,7.3vw,95px)/.93 Inter,sans-serif;letter-spacing:-.075em; }
h1 em { display:block;color:var(--mint);font-style:normal; }
.intro p { color:var(--muted);max-width:36ch;margin:0 0 3px;font-size:16px; }
.checks { display:grid;grid-template-columns:minmax(0,1.26fr) minmax(0,1fr);gap:10px;align-items:start; }
.audio { min-width:0;display:grid;gap:10px; }
.panel { min-width:0;padding:13px;background:var(--surface);border:1px solid var(--line);border-radius:10px; }
.panel-head,.level,.scale { justify-content:space-between;gap:7px; }
h2,p { margin:0; }
h2 { font-size:17px;letter-spacing:-.025em;line-height:1.23; }
.hint,.stats,.state { color:var(--muted);font-size:12px;overflow-wrap:anywhere; }
.stats { min-height:17px;margin:4px 0; }
.state { min-height:16px;margin:2px 0;color:var(--mint); }
.primary,.quiet { min-height:34px;padding:7px 10px;border:1px solid transparent;border-radius:6px;font-weight:720;font-size:12px;line-height:1.2; }
.primary { background:var(--mint);color:#142f25; }
.primary:hover { background:#c0efd7; }
.quiet { background:#244239;border-color:#436c5f;color:var(--ink); }
.quiet:hover { border-color:#74a795; }
.viewfinder { position:relative;overflow:hidden;aspect-ratio:1.67;margin:8px 0 4px;border:1px solid #3b6154;border-radius:8px;background:var(--well); }
.placeholder { display:grid;place-content:center;justify-items:center;gap:6px;height:100%;text-align:center;color:var(--muted);font-size:13px;background:radial-gradient(ellipse at center,#21372f,transparent 72%); }
.frame { width:44px;height:31px;border:1px dashed #8acaaf;border-radius:5px;position:relative; }
.frame::after { content:'';position:absolute;width:11px;height:11px;border:1px solid #8acaaf;border-radius:50%;inset:9px auto auto 15px; }
video { width:100%;height:100%;display:block;object-fit:contain;background:#060c0a; }
video.mirrored { transform:scaleX(-1); }
.controls { align-items:end;justify-content:space-between;flex-wrap:wrap;gap:7px; }
.controls label:first-child { flex:1 1 170px; }
.check { gap:5px;align-self:end;margin:5px 0; }
label { display:grid;gap:4px;min-width:0;font-weight:650;font-size:12px; }
select { width:100%;min-width:0;min-height:35px;padding:6px 8px;background:var(--well);border:1px solid #497064;border-radius:6px;color:var(--ink);font-size:14px; }
input[type="checkbox"],input[type="range"] { accent-color:var(--mint); }
.level { margin-top:13px; }
.level strong { font-size:18px;color:var(--mint);font-variant-numeric:tabular-nums; }
progress { display:block;width:100%;height:12px;margin-top:5px;border:0;border-radius:5px;appearance:none;background:#2a4d41;accent-color:var(--mint);overflow:hidden; }
progress::-webkit-progress-bar { background:#2a4d41; }
progress::-webkit-progress-value { background:#7addb5; }
progress::-moz-progress-bar { background:#7addb5; }
progress[data-clipping]::-webkit-progress-value { background:var(--warning); }
progress[data-clipping]::-moz-progress-bar { background:var(--warning); }
.scale { color:var(--muted);font-size:10px;margin-top:3px; }
.volume { grid-template-columns:1fr auto;align-items:center;margin:8px 0; }
.volume input { grid-column:1/-1;width:100%; }
.actions { flex-wrap:wrap;gap:6px; }
.privacy { margin:14px 0 0;border-top:1px solid var(--line);padding:12px 0 15px; }
.privacy p { color:var(--muted);font-size:13px;margin:5px 0;max-width:75ch; }
footer { border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:10px;padding:12px 0 25px;color:var(--muted);font-size:12px; }
.reading { width:min(750px,100%);padding:44px 0; }
.reading h1 { font-size:clamp(45px,7.3vw,95px);margin-bottom:17px; }
.reading h2 { font-size:25px;margin:23px 0 6px; }
.reading p,.reading li { max-width:66ch;color:var(--muted);margin-bottom:8px; }
.reading .lead { font-size:17px; }
@media(max-width:930px) { .shell { width:calc(100% - 34px); } }
@media(max-width:680px) {
  .intro,.checks { grid-template-columns:1fr;gap:10px; }
  .intro { margin:27px 0 15px; }
  .top nav { gap:5px;font-size:11px; }
  .top .quiet { min-height:29px;font-size:11px; }
  .panel { padding:9px; }
}
@media(max-width:360px) { .shell { width:calc(100% - 22px); } }