:root {
    --bg:#0b0f14; --bg2:#111820; --bg3:#18212b; --line:#243040;
    --text:#e6edf3; --text2:#9fb0c3; --text3:#6b7f94;
    --accent:#38bdf8; --good:#34d399; --warn:#fbbf24; --bad:#f87171;
    --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
  }
  * { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
  body {
    margin:0; background:var(--bg); color:var(--text); font-family:var(--sans);
    padding: max(18px, env(safe-area-inset-top)) 16px calc(28px + env(safe-area-inset-bottom));
    -webkit-text-size-adjust:100%;
  }
  main { max-width:620px; margin:0 auto; }
  header { display:flex; align-items:center; gap:11px; margin-bottom:6px; }
  header .mark { display:flex; align-items:center; gap:5px; }
  header .mark i { display:block; background:var(--good); border-radius:99px; height:7px; }
  header .mark i.d { width:7px; } header .mark i.h { width:21px; }
  h1 { font-size:20px; margin:0; letter-spacing:-.02em; }
  .sub { color:var(--text3); font-size:13px; line-height:1.5; }
  .card { background:var(--bg2); border:1px solid var(--line); border-radius:13px;
          padding:16px; margin:14px 0; }
  label.lbl { display:block; font-size:13px; font-weight:650; margin-bottom:7px; }
  select {
    width:100%; background:var(--bg); color:var(--text); border:1px solid var(--line);
    border-radius:9px; padding:12px; font-size:16px; font-family:inherit;
  }
  button {
    background:var(--bg3); color:var(--text); border:1px solid var(--line);
    border-radius:10px; padding:14px 16px; font-size:15px; font-weight:650;
    font-family:inherit; cursor:pointer; display:inline-flex; align-items:center;
    justify-content:center; gap:8px; min-height:50px;
  }
  button:active:not(:disabled) { transform:translateY(1px); }
  button.primary { background:var(--good); border-color:var(--good); color:#04120b; }
  button.wide { width:100%; }
  button:disabled { opacity:.4; cursor:default; }
  .row { display:flex; flex-wrap:wrap; gap:9px; }
  .row.grow > * { flex:1 1 auto; }
  .note { border-left:3px solid var(--accent); background:var(--bg3);
          padding:11px 13px; border-radius:0 9px 9px 0; font-size:12.5px;
          line-height:1.55; margin-top:13px; color:var(--text2); }
  .note.warn { border-left-color:var(--warn); }
  .note.bad  { border-left-color:var(--bad); }
  .note.good { border-left-color:var(--good); }
  .note strong { color:var(--text); }
  .live { background:var(--bg); border:1px solid var(--line); border-radius:9px;
          padding:14px; min-height:64px; }
  .live .txt { font-size:22px; font-weight:650; letter-spacing:.04em;
               word-break:break-word; min-height:26px; }
  .live .txt.idle { color:var(--text3); font-size:15px; font-weight:500; letter-spacing:0; }
  .live .pat { font-family:var(--mono); color:var(--accent); font-size:14px;
               letter-spacing:.1em; word-break:break-word; margin-top:8px;
               line-height:1.7; }
  .stats { display:flex; gap:18px; flex-wrap:wrap; margin-top:12px; font-size:13px; }
  .stats b { display:block; font-family:var(--mono); font-size:16px; font-weight:650; }
  .stats span { color:var(--text3); font-size:11.5px; text-transform:uppercase;
                letter-spacing:.06em; }
  /* Level meters. display:block on the fill is load-bearing -- these are spans,
     and width does nothing to an inline box. */
  .band { display:flex; align-items:center; gap:9px; margin-bottom:5px;
          font-size:13px; font-family:var(--mono); }
  .band .hz { min-width:56px; color:var(--text2); }
  .band .bar { flex:1; height:15px; background:var(--bg3); border-radius:4px;
               overflow:hidden; position:relative; }
  .band .fill { display:block; height:100%; width:0; background:var(--text3);
                transition:width .07s linear; }
  .band .db { min-width:62px; text-align:right; color:var(--text3); font-size:12px; }
  .band.keyed .fill { background:var(--warn); }
  .band.keyed .db { color:var(--warn); }
  .band.lock  .fill { background:var(--good); }
  .band.lock  .db { color:var(--good); }
  .band.lock  .hz { color:var(--good); }
  .log { list-style:none; margin:12px 0 0; padding:0; }
  .log li { border:1px solid var(--line); border-radius:9px; padding:11px 13px;
            margin-bottom:8px; background:var(--bg); }
  .log .msg { font-size:17px; font-weight:650; word-break:break-word; }
  /* A class, not a style attribute: the hosted copy runs under
     style-src 'self', which blocks attributes parsed from innerHTML. */
  .log .dupe { color:var(--text3); font-size:13px; }
  .log .meta { color:var(--text3); font-size:11.5px; font-family:var(--mono);
               margin-top:5px; }
  .log .pat { font-family:var(--mono); color:var(--accent); font-size:12px;
              letter-spacing:.08em; margin-top:5px; word-break:break-word; }
  .dot { width:9px; height:9px; border-radius:99px; background:var(--text3);
         display:inline-block; }
  .dot.on { background:var(--bad); animation:pulse 1.4s infinite; }
  @keyframes pulse { 50% { opacity:.25; } }
  #toast { position:fixed; left:50%; bottom:calc(24px + env(safe-area-inset-bottom));
           transform:translateX(-50%) translateY(70px); background:var(--bg2);
           border:1px solid var(--good); padding:11px 19px; border-radius:99px;
           font-size:13.5px; font-weight:600; opacity:0;
           transition:transform .22s, opacity .22s; z-index:120;
           pointer-events:none; max-width:88vw; text-align:center; }
  #toast.show { transform:translateX(-50%) translateY(0); opacity:1; }
  #toast.bad { border-color:var(--bad); }
  .foot { color:var(--text3); font-size:12px; line-height:1.6; margin-top:22px; }


/* generated from style="" attributes, which CSP blocks */
.x-92c18f6b { margin-top:16px }
.x-ab79ea2b { margin:0 }
.x-b276ab28 { min-height:38px;padding:8px 13px;font-size:13px }
.x-c53ea1da { margin-top:14px }
.x-ca6fc035 { margin-left:auto }
.x-f74c1979 { justify-content:space-between;align-items:center }