/* Original sequence, drawn at the embed's native size for readable type. */
@font-face{font-family:"Inter";src:url("fonts/Inter-roman.var.woff2") format("woff2");font-style:normal;font-weight:100 900;font-display:block}

  :root{
    --bg:#FFFFFF; --surface:#F7F8FC;
    --line:rgba(23,38,60,0.06); --line-strong:rgba(23,38,60,0.14);
    --ink:#17263C; --ink-2:#687386; --ink-3:#8793A7; --ink-faint:#8793A7;
    --accent:#7C49EC; --pos:#338579; --neg:#C36562; --amber:#B98548;
    --mono:'JetBrains Mono', ui-monospace, Menlo, monospace;
    --sans:'Inter', system-ui, -apple-system, sans-serif;
  }
  *{ box-sizing:border-box; margin:0; padding:0; }
  html,body{ background:#fff; width:100vw; height:100vh; overflow:hidden; }
  #root{ width:100vw; height:100vh; display:flex; align-items:center; justify-content:center; }
  .stage{
    width:100%; height:100%; position:relative; flex-shrink:0;
    background:var(--bg);
    transform-origin:center center; overflow:hidden;
    font-family:var(--sans); color:var(--ink);
    border-radius:16px;
  }

  /* Header */
  .hdr{ position:absolute; top:12px; left:18px; right:18px; display:flex; align-items:center; justify-content:space-between; z-index:6; }
  .hdr .lft{ display:flex; align-items:center; gap:11px; flex-shrink:0; }
  .hdr .live{ width:6px; height:6px; border-radius:50%; background:var(--neg); flex-shrink:0; }
  .hdr .ttl{ font-family:var(--sans); font-size:10px; letter-spacing:0.12em; text-transform:uppercase; color:var(--ink-2); font-weight:600; white-space:nowrap; }
  .hdr .meta{ font-family:var(--sans); font-size:10px; color:var(--ink-2); }

  .chart-wrap{ position:absolute; top:36px; left:0; right:0; bottom:48px; }
  #chart{ display:block; width:100%; height:100%; }

  /* Toast callouts */
  .toast{
    position:absolute; z-index:10; width:310px; max-width:calc(100% - 36px);
    background:#fff;
    border:1px solid rgba(195,101,98,0.38); border-radius:12px; padding:12px 14px;
    box-shadow:0 8px 24px rgba(36,43,62,0.10);
    visibility:hidden; opacity:0; transform:translateY(8px);
    transition:opacity .3s ease, transform .3s ease;
    pointer-events:none;
  }
  .toast.show{ visibility:visible; opacity:1; transform:none; }
  @media (prefers-reduced-motion:reduce){ .toast{ transition:opacity .3s; transform:none; } }
  .toast .t-head{ display:flex; align-items:center; gap:8px; margin-bottom:8px; }
  .t-badge{ width:20px; height:20px; border-radius:50%; background:rgba(195,101,98,0.12); border:1px solid var(--neg); color:var(--neg); display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; flex-shrink:0; }
  .t-label{ font-family:var(--sans); font-size:10px; letter-spacing:0.06em; color:var(--neg); font-weight:700; }
  .t-time{ margin-left:auto; font-family:var(--sans); font-size:10px; color:var(--ink-2); font-variant-numeric:tabular-nums; }
  .t-body{ font-size:13px; line-height:1.45; color:var(--ink); }
  .t-body .hl-neg{ color:var(--neg); font-weight:600; }
  .t-body .hl-strong{ font-weight:600; }
  .t-out{ display:inline-block; margin-top:9px; padding:4px 9px; border-radius:5px; font-family:var(--sans); font-size:11px; font-weight:600; transition:background .3s ease, border-color .3s ease, color .3s ease; }
  .t-out.pending{ background:rgba(23,38,60,0.05); border:1px solid rgba(23,38,60,0.2); color:var(--ink-2); }
  .t-out.ack{ background:rgba(51,133,121,0.14); border:1px solid var(--pos); color:var(--pos); }
  .t-out.ign{ background:rgba(195,101,98,0.14); border:1px solid var(--neg); color:var(--neg); }
  .cursor{ position:absolute; left:0; top:0; z-index:30; width:24px; height:24px; pointer-events:none; opacity:0; transform:translate(-5px,-3px); transform-origin:5px 3px; transition:left .5s cubic-bezier(.4,0,.2,1), top .5s cubic-bezier(.4,0,.2,1), opacity .3s ease; filter:drop-shadow(0 3px 6px rgba(36,43,62,0.20)); }
  .cursor svg{ display:block; }
  .cursor.clicking{ transform:translate(-5px,-3px) scale(0.82); }
  .cursor .ring{ position:absolute; left:-4px; top:-4px; width:22px; height:22px; border-radius:50%; border:2px solid var(--accent); opacity:0; }
  .cursor.clicking .ring{ animation:cursorRipple .5s ease-out; }
  @keyframes cursorRipple{ 0%{ opacity:0.6; transform:scale(0.35);} 100%{ opacity:0; transform:scale(1.7);} }
  .t-voice{ display:flex; align-items:center; gap:10px; margin-bottom:8px; }
  .t-play{ width:26px; height:26px; border-radius:50%; background:rgba(195,101,98,0.12); border:1px solid rgba(195,101,98,0.4); color:var(--neg); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
  .t-wave{ flex:1; display:flex; align-items:center; justify-content:space-between; height:24px; }
  .t-wave i{ width:2.5px; border-radius:2px; background:var(--neg); opacity:0.55; }

  #tPattern, #tFreq, #tStop{ left:18px; bottom:62px; }

  /* Controls */
  .ctl{ position:absolute; left:50%; bottom:7px; transform:translateX(-50%); z-index:14;
    display:flex; align-items:center; gap:12px; padding:4px 12px 4px 5px; border-radius:999px;
    background:rgba(255,255,255,0.96); border:1px solid rgba(23,38,60,0.08);
    box-shadow:0 3px 12px rgba(36,43,62,0.08); }
  .ctl button{ width:30px; height:30px; border-radius:50%; border:none; cursor:pointer; flex-shrink:0;
    background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center;
    transition:background .2s, transform .1s; }
  .ctl button:hover{ background:#6254BF; }
  .ctl button:active{ transform:scale(0.94); }
  .ctl .track{ width:170px; height:5px; border-radius:3px; background:rgba(23,38,60,0.12); position:relative; cursor:pointer; }
  .ctl .track::before{ content:''; position:absolute; inset:-10px 0; }
  .ctl .fill{ position:absolute; left:0; top:0; bottom:0; border-radius:3px; background:var(--accent); width:0%; }
  .ctl .clock{ font-family:var(--sans); font-size:11px; color:var(--ink-2); font-variant-numeric:tabular-nums; min-width:36px; text-align:center; }