: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(--accent); 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; }
  textarea, input[type=text] {
    width:100%; background:var(--bg); color:var(--text); border:1px solid var(--line);
    border-radius:9px; padding:12px; font-size:16px; font-family:inherit; resize:vertical;
  }
  textarea:focus, input:focus { outline:none; border-color:var(--accent); }
  input[type=range] { width:100%; accent-color:var(--accent); height:28px; }
  .row { display:flex; flex-wrap:wrap; gap:9px; }
  .row.grow > * { flex:1 1 auto; }
  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(--accent); border-color:var(--accent); color:#04121b; }
  button.wide { width:100%; }
  button:disabled { opacity:.4; cursor:default; }
  button svg { width:18px; height:18px; stroke-width:2; fill:none; stroke:currentColor; }
  .pattern {
    font-family:var(--mono); color:var(--accent); font-size:17px; letter-spacing:.11em;
    line-height:1.75; word-break:break-word; background:var(--bg); border:1px solid var(--line);
    border-radius:9px; padding:13px; min-height:22px; margin-top:10px;
  }
  .viz { display:flex; align-items:center; height:24px; margin-top:9px;
         overflow-x:auto; gap:0; padding-bottom:2px; }
  .viz i { display:block; height:11px; border-radius:2px; flex:none; }
  .viz i.on { background:var(--accent); } .viz i.off { background:transparent; }
  .viz i.lit { background:var(--warn); box-shadow:0 0 7px var(--warn); }
  .stats { display:flex; gap:18px; flex-wrap:wrap; margin-top:12px; font-size:13px; }
  .stats b { display:block; font-family:var(--mono); font-size:17px; font-weight:650; }
  .stats span { color:var(--text3); font-size:11.5px; text-transform:uppercase;
                letter-spacing:.06em; }
  .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 strong { color:var(--text); }
  .switch { display:flex; align-items:flex-start; gap:11px; cursor:pointer;
            font-size:13px; color:var(--text2); line-height:1.45; margin-top:14px; }
  .switch input { appearance:none; width:40px; height:23px; border-radius:99px; flex:none;
    background:var(--bg3); border:1px solid var(--line); position:relative; cursor:pointer; margin:0; }
  .switch input::after { content:""; position:absolute; top:2px; left:2px; width:17px; height:17px;
    border-radius:50%; background:var(--text3); transition:transform .15s, background .15s; }
  .switch input:checked { background:rgba(56,189,248,.22); border-color:var(--accent); }
  .switch input:checked::after { transform:translateX(17px); background:var(--accent); }
  #flash { position:fixed; inset:0; background:#000; display:none; z-index:99; }
  #flash.on { display:block; } #flash.lit { background:#fff; }
  #flash .hint { position:absolute; bottom:calc(34px + env(safe-area-inset-bottom));
                 left:0; right:0; text-align:center; color:#777; font-size:13px;
                 font-weight:600; mix-blend-mode:difference; }
  #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(--accent); 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); }
  .sweeprow { display:flex; align-items:center; gap:11px; padding:11px 13px;
              border:1px solid var(--line); border-radius:9px; margin-bottom:7px;
              cursor:pointer; font-size:14px; background:var(--bg); }
  .sweeprow.live { border-color:var(--accent); background:var(--bg3);
                   box-shadow:0 0 0 1px var(--accent); }
  .sweeprow.got  { border-color:var(--good); }
  .sweeprow.lost { border-color:var(--bad); opacity:.65; }
  .sweeprow .hz  { font-family:var(--mono); font-weight:650; min-width:62px; }
  .sweeprow .st  { margin-left:auto; font-size:12px; color:var(--text3); }
  .sweeprow.got  .st { color:var(--good); }
  .sweeprow.lost .st { color:var(--bad); }
  .sweeprow.live .st { color:var(--accent); }
  .earrow { display:flex; align-items:center; gap:9px; margin-bottom:5px;
            font-size:13px; font-family:var(--mono); }
  .earrow .hz { min-width:52px; color:var(--text2); }
  .earrow .bar { flex:1; height:15px; background:var(--bg3); border-radius:4px;
                 overflow:hidden; position:relative; }
  /* display:block is load-bearing. These are spans, and width does nothing on
     an inline box -- the bar rendered 0 px wide while reporting width:100%,
     with the correct colour, so only a screenshot showed it. The peak marker
     below escaped the same bug purely because position:absolute blockifies. */
  .earrow .fill { display:block; height:100%; width:0; background:var(--text3);
                  transition:width .07s linear; }
  .earrow .peak { position:absolute; top:0; bottom:0; width:2px;
                  background:var(--accent); left:0; }
  /* Lit is not the same as carrying: 'hot' only means energy is present at
     that frequency, which leakage also produces. 'won' means it was the
     loudest by a clear margin, which only a real carrier manages. */
  .earrow.hot .fill { background:var(--warn); }
  .earrow.won .fill { background:var(--good); }
  .earrow .db { min-width:58px; text-align:right; color:var(--text3);
                font-size:12px; }
  .earrow.hot .db { color:var(--warn); }
  .earrow.won .db { color:var(--good); }
  .foot { color:var(--text3); font-size:12px; line-height:1.6; margin-top:22px; }


/* generated from style="" attributes, which CSP blocks */
.x-097ae647 { color:var(--accent) }
.x-2e7990f8 { flex:1 1 100%;margin:6px 0 0 }
.x-4967cd1a { width:100%;background:var(--bg); color:var(--text);border:1px solid var(--line);border-radius:9px; padding:12px;font-size:16px;font-family:inherit }
.x-5747f4ee { margin-top:13px }
.x-8037400c { flex:0 0 auto }
.x-83725d2c { flex:1 }
.x-8bde36d0 { font-weight:400 }
.x-92c18f6b { margin-top:16px }
.x-a0fc2e0b { margin-top:7px }
.x-a202af86 { font-family:var(--mono) }
.x-c53ea1da { margin-top:14px }
.x-df928149 { margin-top:10px }
.x-f9f81afd { margin-top:11px }
.x-fe3c94c1 { margin-top:9px }