* { margin: 0; padding: 0; box-sizing: border-box; }
  body {
    background: #0a0a0f;
    color: #c8c8d0;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    overflow: hidden;
    width: 100vw;
    height: 100vh;
  }
  canvas {
    display: block;
    position: absolute;
    top: 0; left: 0;
    cursor: crosshair;
  }

  #title {
    position: absolute;
    top: 18px; left: 24px;
    font-size: 20px;
    font-weight: 300;
    letter-spacing: 0.08em;
    color: #9090a8;
    pointer-events: none;
    z-index: 10;
    text-transform: uppercase;
  }
  #title span { color: #60608a; font-weight: 200; }

  #stats-bar {
    position: absolute;
    top: 48px; left: 24px;
    font-size: 12px;
    color: #505068;
    letter-spacing: 0.06em;
    pointer-events: none;
    z-index: 10;
  }

  #search-box {
    position: absolute;
    top: 18px; right: 24px;
    z-index: 20;
  }
  #search-box input {
    background: rgba(15, 15, 25, 0.85);
    border: 1px solid #2a2a3a;
    color: #b0b0c0;
    padding: 6px 12px;
    font-size: 13px;
    border-radius: 4px;
    width: 220px;
    outline: none;
    font-family: inherit;
    transition: border-color 0.2s;
  }
  #search-box input:focus { border-color: #4a4a6a; }
  #search-box input::placeholder { color: #404058; }

  #legend {
    position: absolute;
    bottom: 110px; left: 24px;
    z-index: 10;
    font-size: 11px;
    line-height: 1.8;
  }
  .legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #707088;
  }
  .legend-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
  }
  .legend-diamond {
    width: 8px; height: 8px;
    flex-shrink: 0;
    transform: rotate(45deg);
  }

  #shape-legend {
    position: absolute;
    bottom: 74px; left: 24px;
    z-index: 10;
    font-size: 11px;
    color: #505068;
    display: flex;
    gap: 16px;
  }
  .shape-item { display: flex; align-items: center; gap: 6px; }
  .shape-circle {
    width: 7px; height: 7px; border-radius: 50%;
    background: #707088;
  }
  .shape-diamond {
    width: 7px; height: 7px;
    background: #707088;
    transform: rotate(45deg);
  }

  #stats-panel {
    position: absolute;
    bottom: 16px; left: 24px; right: 24px;
    z-index: 10;
    display: flex;
    gap: 32px;
    font-size: 11px;
    color: #505068;
    background: rgba(10, 10, 15, 0.7);
    padding: 10px 16px;
    border-radius: 6px;
    border: 1px solid #1a1a28;
  }
  .stat-group { display: flex; flex-direction: column; gap: 2px; }
  .stat-label { color: #404058; font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; }
  .stat-value { color: #8080a0; }
  #sparkline-container { display: flex; align-items: flex-end; gap: 1px; height: 24px; }
  .spark-bar {
    width: 4px;
    background: #3a3a5a;
    border-radius: 1px 1px 0 0;
    transition: background 0.2s;
  }

  #tooltip {
    position: absolute;
    display: none;
    background: rgba(12, 12, 20, 0.94);
    border: 1px solid #2a2a40;
    border-radius: 6px;
    padding: 10px 14px;
    font-size: 12px;
    line-height: 1.6;
    pointer-events: none;
    z-index: 30;
    max-width: 320px;
    backdrop-filter: blur(8px);
  }
  #tooltip .tt-title { color: #d0d0e0; font-weight: 500; margin-bottom: 4px; }
  #tooltip .tt-meta { color: #707090; font-size: 11px; }
  #tooltip .tt-topics { color: #505070; font-size: 10px; margin-top: 4px; }

  #zoom-hint {
    position: absolute;
    bottom: 64px; right: 24px;
    font-size: 10px;
    color: #303048;
    z-index: 10;
    pointer-events: none;
  }