/* Oberton-Stimmgerät – alle Regeln sind auf .ost-app begrenzt, damit das Theme unberührt bleibt. */
.ost-app{
  --ost-bg:#06080c;
  --ost-panel:#0e1219;
  --ost-line:#1f2733;
  --ost-fg:#e3e9f0;
  --ost-muted:#8391a3;
  --ost-trace:#5ff0ff;
  --ost-good:#4ade80;
  --ost-warn:#fbbf24;
  --ost-bad:#f87171;
  --f-display:"Barlow Semi Condensed","Roboto Condensed","Arial Narrow","Helvetica Neue",Arial,sans-serif;
  --f-mono:ui-monospace,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  /* Namen, die das Skript für die Zeichenfarben ausliest */
  --bg:var(--ost-bg);--fg:var(--ost-fg);--muted:var(--ost-muted);--trace:var(--ost-trace);
  --good:var(--ost-good);--warn:var(--ost-warn);--bad:var(--ost-bad);
  color-scheme:dark;
  display:block;
  max-width:100%;
  margin:1.5em 0;
  background:var(--ost-bg);
  color:var(--ost-fg);
  font-family:var(--f-display);
  font-size:15px;
  line-height:1.3;
  border-radius:10px;
  overflow:hidden;
}
.ost-app *,.ost-app *::before,.ost-app *::after{box-sizing:border-box}
.ost-app [hidden]{display:none!important}
.ost-app .ost-inner{display:flex;flex-direction:column;gap:10px;padding:14px 16px}
.ost-app .top{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:10px 24px}
.ost-app .brand{display:flex;flex-direction:column;gap:2px;min-width:0}
.ost-app .brand h2{margin:0;padding:0;border:0;font-family:var(--f-display);font-size:20px;line-height:1.2;font-weight:600;letter-spacing:.01em;color:var(--ost-fg);text-transform:none;text-wrap:balance}
.ost-app .brand h2.ost-notitle{font-size:0}
.ost-app .brand h2.ost-notitle .chip{font-size:12px;margin-left:0}
.ost-app .brand .sub{color:var(--ost-muted);font-size:13px}
.ost-app .chip{display:inline-block;padding:1px 8px;border-radius:999px;border:1px solid var(--ost-line);color:var(--ost-fg);font-size:12px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;margin-left:6px;vertical-align:2px;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ost-app .readout{display:flex;align-items:flex-end;gap:22px;flex-wrap:wrap}
.ost-app .ro-note{display:flex;flex-direction:column;min-width:0}
.ost-app .ro-note b{font-size:44px;line-height:1;font-weight:700;color:var(--ost-fg)}
.ost-app .ro-note small{color:var(--ost-muted);font-size:13px;letter-spacing:.04em;text-transform:uppercase}
.ost-app .ro-cents{font-family:var(--f-mono);font-size:40px;line-height:1;font-weight:600;font-variant-numeric:tabular-nums;min-width:4.2ch;text-align:right}
.ost-app .ro-cents.good{color:var(--ost-good)}.ost-app .ro-cents.warn{color:var(--ost-warn)}.ost-app .ro-cents.bad{color:var(--ost-bad)}.ost-app .ro-cents.idle{color:var(--ost-muted)}
.ost-app .ro-hz{display:flex;flex-direction:column;font-family:var(--f-mono);font-size:12px;color:var(--ost-muted);font-variant-numeric:tabular-nums;gap:2px}
.ost-app .stage{position:relative;height:480px;border:1px solid var(--ost-line);border-radius:6px;overflow:hidden;background:var(--ost-bg)}
.ost-app canvas{position:absolute;inset:0;width:100%;height:100%;max-width:none;display:block}
.ost-app .msg{position:absolute;left:12px;right:12px;top:12px;background:var(--ost-panel);border:1px solid var(--ost-bad);border-radius:6px;padding:10px 12px;font-size:14px;line-height:1.4;display:flex;gap:12px;align-items:flex-start;color:var(--ost-fg)}
.ost-app .msg p{margin:0;flex:1;max-width:70ch}
.ost-app .controls{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:flex-end}
.ost-app .grp{display:flex;flex-direction:column;gap:4px}
.ost-app .grp>span{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--ost-muted)}
.ost-app .row{display:flex;gap:6px;align-items:center;margin:0}
.ost-app .seg{display:flex;flex-wrap:wrap;border:1px solid var(--ost-line);border-radius:6px;overflow:hidden}
.ost-app .seg button,.ost-app .seg label,.ost-app .btn{all:unset;box-sizing:border-box;cursor:pointer;padding:7px 11px;font-family:var(--f-display);font-size:14px;line-height:1.2;color:var(--ost-muted);background:var(--ost-panel)}
.ost-app .seg button+button,.ost-app .seg label+button,.ost-app .seg button+label{border-left:1px solid var(--ost-line)}
.ost-app .seg [aria-pressed="true"]{color:var(--ost-bg);background:var(--ost-fg);font-weight:600}
.ost-app .btn{border:1px solid var(--ost-line);border-radius:6px;color:var(--ost-fg)}
.ost-app .btn:hover,.ost-app .seg button:hover,.ost-app .seg label:hover{color:var(--ost-fg)}
.ost-app .seg [aria-pressed="true"]:hover{color:var(--ost-bg)}
.ost-app .btn[aria-pressed="true"]{border-color:var(--ost-warn);color:var(--ost-warn)}
.ost-app .seg button:focus-visible,.ost-app .seg label:focus-within,.ost-app .btn:focus-visible,.ost-app select:focus-visible,.ost-app input:focus-visible{outline:2px solid var(--ost-trace);outline-offset:1px}
.ost-app select,.ost-app input[type=number]{appearance:auto;-webkit-appearance:auto;width:auto;max-width:100%;height:auto;min-height:0;margin:0;box-shadow:none;font-family:var(--f-display);font-size:14px;line-height:1.2;color:var(--ost-fg);background:var(--ost-panel);border:1px solid var(--ost-line);border-radius:6px;padding:6px 8px}
.ost-app input[type=number]{width:5.2em;font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.ost-app input[type=checkbox]{appearance:auto;-webkit-appearance:auto;width:auto;height:auto;margin:0;accent-color:var(--ost-trace)}
.ost-app .chk{display:flex;align-items:center;gap:6px;font-size:14px;color:var(--ost-muted);margin:0;font-weight:400;cursor:pointer}
.ost-app .vis{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@media (max-width:560px){
  .ost-app .ost-inner{padding:12px}
  .ost-app .ro-note b{font-size:34px}
  .ost-app .ro-cents{font-size:32px}
}
@media (prefers-reduced-motion:reduce){.ost-app *{transition:none!important}}