:root {
  color-scheme: dark;
  --bg: #060a07;
  --field: #090d0a;
  --panel: #0b100d;
  --line: #203126;
  --line-strong: #2d4632;
  --text: #edf1ec;
  --secondary: #b5beb7;
  --muted: #758077;
  --green: #a6ff1a;
  --amber: #f4b758;
  --red: #f08e72;
  font-family: 'Instrument Sans', Inter, ui-sans-serif, system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }
html { background: var(--bg); }
body { margin: 0; min-height: 100vh; }
button, input, textarea { font: inherit; }
button { color: inherit; }
button:focus-visible, input:focus-visible, textarea:focus-visible, a:focus-visible {
  outline: 2px solid var(--green); outline-offset: 3px;
}
.instrument {
  width: min(1040px, 100%);
  min-height: 100vh;
  margin: 0 auto;
  padding: max(24px, env(safe-area-inset-top)) max(28px, env(safe-area-inset-right)) max(28px, env(safe-area-inset-bottom)) max(28px, env(safe-area-inset-left));
}
.mono, code, .eyebrow, .mode-button, .state-tag, .metric-value, .meter-label, .button-label, .readout-label, .counter, .serial, .level-value {
  font-family: 'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;
}
.topline { display:flex; align-items:center; justify-content:space-between; padding: 0 0 18px; border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:baseline; gap:11px; }
.brand-name { margin:0; font-size:17px; letter-spacing:.14em; font-weight:700; }
.brand-sub { color:var(--muted); font: 10px/1.4 'IBM Plex Mono', monospace; letter-spacing:.08em; text-transform:uppercase; }
.system-mark { display:flex; align-items:center; gap:8px; color:var(--secondary); font:10px 'IBM Plex Mono',monospace; letter-spacing:.08em; text-transform:uppercase; }
.system-dot { width:7px; height:7px; background:var(--green); }
.modebar { display:grid; grid-template-columns:repeat(3,1fr); border-bottom:1px solid var(--line-strong); margin-bottom:34px; }
.mode-button { min-height:48px; border:0; border-right:1px solid var(--line); background:transparent; color:var(--muted); font-size:11px; letter-spacing:.13em; cursor:pointer; text-align:left; padding:0 16px; }
.mode-button:first-child { padding-left:0; }
.mode-button:last-child { border-right:0; }
.mode-button[aria-pressed="true"] { color:var(--green); box-shadow: inset 0 -2px var(--green); }
.mode-index { color:var(--muted); margin-right:11px; }
.layout { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(260px,.65fr); gap:38px; align-items:start; }
.task { min-width:0; }
.readout { border:1px solid var(--line); background:var(--panel); }
.section-head { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; padding:0 0 16px; border-bottom:1px solid var(--line-strong); }
.eyebrow { margin:0 0 8px; color:var(--green); font-size:10px; letter-spacing:.14em; text-transform:uppercase; }
h1 { margin:0; font-size:clamp(25px,4vw,34px); line-height:1.08; letter-spacing:-.045em; font-weight:560; }
.section-note { max-width:25em; margin:10px 0 0; color:var(--secondary); font-size:13px; line-height:1.55; }
.state-tag { flex:none; padding:7px 9px; border:1px solid var(--line-strong); color:var(--muted); font-size:9px; letter-spacing:.1em; text-transform:uppercase; }
.state-tag.good { color:var(--green); border-color:#426127; }
.state-tag.warn { color:var(--amber); border-color:#604622; }
.state-tag.error { color:var(--red); border-color:#633b31; }
.form-block { margin-top:24px; }
.field-label-row { display:flex; align-items:center; justify-content:space-between; margin-bottom:9px; }
label, .field-label { color:var(--secondary); font-size:11px; letter-spacing:.08em; text-transform:uppercase; }
.counter { color:var(--muted); font-size:10px; }
.input, textarea { display:block; width:100%; min-height:48px; border:1px solid var(--line-strong); border-radius:0; background:var(--field); color:var(--text); padding:13px 14px; font-size:14px; }
textarea { min-height:132px; resize:vertical; line-height:1.55; }
.helper { color:var(--muted); font-size:11px; line-height:1.5; margin:8px 0 0; }
.helper.error { color:var(--red); }
.meter { display:flex; justify-content:space-between; gap:16px; margin-top:20px; padding:13px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.meter-label { color:var(--muted); font-size:9px; letter-spacing:.12em; text-transform:uppercase; }
.meter-value { color:var(--secondary); font:11px 'IBM Plex Mono',monospace; text-align:right; }
.button-row { display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
.button { min-height:44px; display:inline-flex; align-items:center; justify-content:center; gap:9px; padding:0 15px; border:1px solid var(--line-strong); border-radius:0; background:transparent; color:var(--secondary); cursor:pointer; text-decoration:none; font:10px 'IBM Plex Mono',monospace; letter-spacing:.1em; text-transform:uppercase; }
.button:hover:not(:disabled) { border-color:var(--green); color:var(--green); }
.button.primary { background:var(--green); border-color:var(--green); color:#081006; font-weight:700; }
.button.primary:hover:not(:disabled) { background:#c0ff58; color:#081006; }
.button.danger { border-color:#633b31; color:var(--red); }
.button:disabled { opacity:.42; cursor:not-allowed; }
.inline-status { min-height:22px; margin:14px 0 0; color:var(--secondary); font-size:12px; line-height:1.5; }
.inline-status.error { color:var(--red); }
.inline-status.success { color:var(--green); }
.frame-progress { margin-top:20px; }
.progress-meta { display:flex; justify-content:space-between; color:var(--muted); font:10px 'IBM Plex Mono',monospace; text-transform:uppercase; }
.progress-track { height:3px; background:#19231b; margin-top:9px; }
.progress-fill { width:0; height:100%; background:var(--green); transition:width .12s linear; }
.readout-head { padding:14px 16px 12px; border-bottom:1px solid var(--line); color:var(--muted); font:9px 'IBM Plex Mono',monospace; letter-spacing:.14em; text-transform:uppercase; }
.readout-body { padding:7px 16px 14px; }
.readout-row { display:flex; justify-content:space-between; gap:14px; padding:12px 0; border-bottom:1px solid #17231a; }
.readout-row:last-child { border:0; }
.readout-label { color:var(--muted); font-size:9px; letter-spacing:.09em; text-transform:uppercase; }
.readout-value { color:var(--secondary); font-size:11px; line-height:1.45; text-align:right; overflow-wrap:anywhere; }
.readout-value.active { color:var(--green); }
.readout-value.empty { color:var(--muted); }
.readout-footer { padding:12px 16px; border-top:1px solid var(--line); color:var(--muted); font:9px/1.5 'IBM Plex Mono',monospace; letter-spacing:.04em; }
.result-box { margin-top:22px; border:1px solid var(--line-strong); background:var(--field); padding:16px; }
.result-title { margin:0 0 10px; color:var(--green); font:10px 'IBM Plex Mono',monospace; letter-spacing:.11em; text-transform:uppercase; }
.result-content { margin:0; color:var(--text); font-size:14px; line-height:1.55; overflow-wrap:anywhere; white-space:pre-wrap; }
.device-grid, .diag-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:20px; }
.device-cell, .diag-cell { min-width:0; background:var(--panel); padding:13px; }
.device-cell .readout-label, .diag-cell .readout-label { display:block; margin-bottom:7px; }
.device-cell .readout-value, .diag-cell .readout-value { text-align:left; }
.listen-level { display:flex; align-items:center; gap:14px; margin:18px 0; padding:14px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.level-label { color:var(--muted); font:9px 'IBM Plex Mono',monospace; letter-spacing:.1em; }
.level-bars { display:flex; align-items:center; gap:3px; height:18px; flex:1; }
.level-bar { width:100%; max-width:5px; height:3px; background:#314035; }
.level-bar.on { background:var(--green); }
.level-value { color:var(--secondary); font-size:9px; min-width:4ch; text-align:right; }
.privacy-note { margin-top:24px; padding-top:13px; border-top:1px solid var(--line); color:var(--muted); font-size:11px; line-height:1.55; }
.loading { color:var(--secondary); font:12px 'IBM Plex Mono',monospace; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media (max-width:680px) {
  .instrument { padding: max(18px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left)); }
  .topline { padding-bottom:14px; }
  .brand { display:block; }
  .brand-sub { display:block; margin-top:4px; }
  .modebar { margin-bottom:25px; }
  .mode-button { padding:0 8px; text-align:center; font-size:9px; letter-spacing:.08em; }
  .mode-button:first-child { padding-left:0; }
  .mode-index { display:block; margin:0 0 4px; font-size:8px; }
  .layout { grid-template-columns:1fr; gap:25px; }
  .section-head { gap:10px; }
  .state-tag { padding:6px; font-size:8px; }
  .readout { order:2; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior:auto !important; transition-duration:.01ms !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; }
}