:root{
    --bg:#131722; --panel:#1e222d; --border:#2a2e39; --grid:#1e222d;
    --text:#d1d4dc; --muted:#787b86; --blue:#2962ff;
    --up:#26a69a; --down:#ef5350;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html,body{height:100%}
  body{
    background:var(--bg);color:var(--text);overflow:hidden;
    display:flex;flex-direction:column;
    font-family:-apple-system,BlinkMacSystemFont,"Trebuchet MS",Roboto,Ubuntu,sans-serif;
    -webkit-font-smoothing:antialiased;
  }
  #root{height:100%;display:flex;flex-direction:column;min-height:0}
  .tb{display:flex;align-items:center;gap:4px;padding:0 8px;height:38px;flex:0 0 auto;
      background:var(--bg);border-bottom:1px solid var(--border)}
  .tb.bottom{border-bottom:0;border-top:1px solid var(--border);height:36px;gap:2px}
  .sep{width:1px;height:18px;background:var(--border);margin:0 6px}
  .sym{font-size:15px;font-weight:600;letter-spacing:.2px;padding:0 6px}
  .tbtn{
    font:inherit;font-size:13px;height:28px;padding:0 10px;border:0;border-radius:4px;cursor:pointer;
    background:transparent;color:var(--text);white-space:nowrap;
  }
  .tbtn:hover{background:var(--panel)}
  .tbtn:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
  .tbtn[aria-pressed="true"]{background:var(--panel);color:#fff;box-shadow:inset 0 0 0 1px var(--border)}
  .tbtn.iv{font-size:14px;padding:0 9px}
  .tbtn.iv[aria-pressed="true"]{background:transparent;color:var(--blue);box-shadow:none}
  .tbtn.tf{position:relative;font-size:14px;padding:0 12px;height:30px}
  .tbtn.tf[aria-pressed="true"]{background:transparent;color:var(--blue);box-shadow:none}
  .tbtn.tf[aria-pressed="true"]::after{
    content:"";position:absolute;left:9px;right:9px;bottom:0;height:2px;
    background:var(--blue);border-radius:1px;
  }
  .cal{position:relative;display:inline-flex;align-items:center;justify-content:center;
       width:34px;height:28px;border-radius:4px;color:var(--text)}
  .cal:hover{background:var(--panel)}
  .cal input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
  .cal svg{pointer-events:none}
  .live{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--up);
        margin-right:6px;vertical-align:1px;animation:pulse 1.6s ease-in-out infinite}
  .live.off{background:var(--muted);animation:none}
  @keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
  @media (prefers-reduced-motion:reduce){.live{animation:none}}
  .clock{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;padding:0 8px}
  .grow{margin-left:auto}
  label.rng{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--muted);padding:0 4px}
  input[type=range]{accent-color:var(--blue);width:110px;height:16px}
  main{flex:1;min-height:0;position:relative}
  canvas{display:block;width:100%;height:100%;cursor:crosshair}

  .nav{
    display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:4px;
    font-size:13px;color:var(--muted);text-decoration:none
  }
  .nav:hover{background:var(--panel);color:var(--text)}
  .nav.on{color:var(--text);background:var(--panel);box-shadow:inset 0 0 0 1px var(--border)}