:root {
      color-scheme: light;
      --bg: #ffffff;
      --panel: #ffffff;
      --panel-border: #e2e2e2;
      --text: #0a0a0a;
      --muted: #6b6b6b;
      --accent: #ff4d00;
      --accent-soft: #fff2eb;
      --blue: #2d7ff9;
      --red: #e5484d;
      --grid: #e2e2e2;
      font-family: var(--font-sans);
      background: var(--bg);
      color: var(--text);
    }
    * { box-sizing: border-box; }
    html, body { margin: 0; min-height: 100%; }
    body {
      background:
        radial-gradient(circle at top left, rgba(255, 77, 0, 0.10), transparent 28%),
        linear-gradient(180deg, #f4f4f4 0%, #ffffff 22%, #ffffff 100%);
    }
    a { color: #1b5fd0; text-decoration: none; }
    header {
      display: flex;
      justify-content: space-between;
      gap: 18px;
      align-items: flex-start;
      padding: 20px 24px;
      border-bottom: 1px solid var(--panel-border);
      background: rgba(255, 255, 255, 0.92);
      position: sticky;
      top: 0;
      z-index: 10;
      backdrop-filter: blur(10px);
    }
    h1 { font-size: 20px; line-height: 1.15; margin: 0 0 5px; font-weight: 720; }
    .header-copy { margin: 0; color: var(--muted); font-size: 13px; max-width: 820px; }
    .about-link {
      flex: none;
      align-self: center;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 9px 16px;
      border-radius: 8px;
      background: var(--accent);
      color: #fff;
      font-size: 13px;
      font-weight: 650;
      white-space: nowrap;
      box-shadow: 0 6px 16px rgba(255, 77, 0, 0.25);
      transition: background 0.15s ease, transform 0.15s ease;
    }
    .about-link:hover { background: #d94000; transform: translateY(-1px); }
    main { padding: 18px 24px 36px; }
    .controls {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
      gap: 12px;
      margin-bottom: 18px;
    }
    label { display: grid; gap: 5px; font-size: 12px; color: var(--muted); font-weight: 650; }
    select {
      min-width: 0;
      padding: 8px 10px;
      border: 1px solid #d2d2d2;
      background: #fff;
      border-radius: 7px;
      color: var(--text);
    }
    .layout {
      display: grid;
      grid-template-columns: minmax(300px, 390px) minmax(0, 1fr);
      gap: 18px;
      align-items: start;
    }
    .panel {
      background: var(--panel);
      border: 1px solid var(--panel-border);
      border-radius: 8px;
      box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);
    }
    .summary-panel { padding: 15px; position: sticky; top: 96px; }
    .record-title { font-size: 15px; line-height: 1.25; margin: 0 0 12px; }
    .record-meta {
      display: grid;
      gap: 7px;
      padding: 10px 0 12px;
      border-top: 1px solid #f4f4f4;
      border-bottom: 1px solid #f4f4f4;
      color: var(--muted);
      font-size: 12px;
    }
    .meta-row { display: flex; justify-content: space-between; gap: 12px; }
    .meta-row span:last-child { color: var(--text); text-align: right; }
    .metrics {
      display: grid;
      gap: 8px;
      margin-top: 13px;
    }
    .metric-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 12px;
      align-items: center;
      padding: 7px 0;
      border-bottom: 1px solid #f4f4f4;
      font-size: 13px;
    }
    .metric-row:last-child { border-bottom: 0; }
    .metric-label {
      display: inline-flex;
      min-width: 0;
      gap: 6px;
      align-items: center;
      color: #2a2a2a;
    }
    .metric-name {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .metric-info {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 16px;
      height: 16px;
      border-radius: 999px;
      background: var(--accent-soft);
      color: #ff4d00;
      font-size: 11px;
      font-weight: 750;
      flex: 0 0 auto;
    }
    .metric-value {
      font-variant-numeric: tabular-nums;
      color: #0a0a0a;
      font-weight: 650;
      text-align: right;
    }
    .links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; font-size: 12px; }
    .layer-metrics {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
      gap: 14px;
    }
    .layer-metric {
      border: 1px solid #f4f4f4;
      border-radius: 7px;
      padding: 8px 8px 4px;
      background: #ffffff;
      min-width: 0;
    }
    .layer-metric-head { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; font-size: 12px; }
    .layer-metric-head .metric-name { font-weight: 650; color: #2a2a2a; }
    .layer-metric-value {
      margin-left: auto;
      font-variant-numeric: tabular-nums;
      font-weight: 650;
      color: #0a0a0a;
    }
    .chart-mini { width: 100%; height: 168px; }
    .metric-info { cursor: help; }
    #tip {
      position: fixed;
      z-index: 60;
      max-width: 320px;
      padding: 10px 12px;
      background: #0a0a0a;
      color: #f4f4f4;
      font-size: 12px;
      line-height: 1.5;
      border-radius: 8px;
      box-shadow: 0 14px 34px rgba(15, 23, 42, 0.34);
      white-space: pre-line;
      pointer-events: none;
      opacity: 0;
      transform: translateY(2px);
      transition: opacity 0.09s ease, transform 0.09s ease;
    }
    #tip.visible { opacity: 1; transform: translateY(0); }
    .charts { display: grid; gap: 16px; min-width: 0; }
    .pair-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; min-width: 0; }
    .pair-row > section { min-width: 0; margin: 0; }
    .pair-row > section:nth-child(1) { order: 2; }  /* Centroid path -> right */
    .pair-row > section:nth-child(2) { order: 1; }  /* Input signal -> left */
    @media (max-width: 980px) { .pair-row { grid-template-columns: 1fr; } }
    .chart-card { padding: 14px 14px 10px; overflow: hidden; }
    .chart-header {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 10px 18px;
      align-items: start;
      margin-bottom: 8px;
    }
    .chart-header h3 { margin: 0; font-size: 15px; line-height: 1.2; }
    .chart-copy {
      grid-column: 1 / -1;
      margin: 0;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.45;
    }
    .chart-note {
      margin: 0;
      color: #6b6b6b;
      font-size: 12px;
      text-align: right;
    }
    .chart-head-right { display: flex; align-items: center; gap: 10px; justify-content: flex-end; }
    .seg-toggle { display: inline-flex; border: 1px solid #d2d2d2; border-radius: 7px; overflow: hidden; flex: 0 0 auto; }
    .seg-toggle button {
      border: 0;
      background: #fff;
      color: #2a2a2a;
      font: inherit;
      font-size: 12px;
      font-weight: 650;
      padding: 4px 11px;
      cursor: pointer;
    }
    .seg-toggle button + button { border-left: 1px solid #d2d2d2; }
    .seg-toggle button.active { background: var(--accent); color: #fff; }
    .collapsible > summary {
      cursor: pointer;
      list-style: none;
      user-select: none;
    }
    .collapsible > summary::-webkit-details-marker { display: none; }
    .collapsible > summary h3 { display: inline-flex; align-items: center; gap: 9px; }
    .chev {
      flex: 0 0 auto;
      width: 0;
      height: 0;
      border-left: 5px solid transparent;
      border-right: 5px solid transparent;
      border-top: 6px solid #444444;
      transform: rotate(-90deg);
      transition: transform 0.15s ease;
    }
    .collapsible[open] > summary .chev { transform: rotate(0deg); }
    .collapsible:not([open]) > summary { margin-bottom: 0; }
    .distance-section { margin-top: 12px; }
    .distance-section + .distance-section {
      margin-top: 16px;
      padding-top: 14px;
      border-top: 1px solid #f4f4f4;
    }
    .distance-header {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      align-items: center;
      margin: 0 0 6px;
    }
    .distance-header h4 {
      margin: 0;
      color: #2a2a2a;
      font-size: 13px;
      line-height: 1.2;
    }
    .comparison {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 10px;
      margin: 0 0 16px;
      padding: 10px 12px;
      background: rgba(255, 255, 255, 0.72);
      border: 1px solid var(--panel-border);
      border-radius: 8px;
    }
    .comparison-label { font-size: 12px; font-weight: 720; color: var(--muted); }
    .comparison button {
      font: inherit;
      font-size: 12px;
      font-weight: 650;
      padding: 5px 11px;
      border: 1px solid #d2d2d2;
      border-radius: 7px;
      background: var(--accent);
      color: #fff;
      cursor: pointer;
    }
    .comparison button.ghost { background: #fff; color: #2a2a2a; }
    .comparison button[disabled] { opacity: 0.45; cursor: not-allowed; }
    .chips { display: flex; flex-wrap: wrap; gap: 8px; flex: 1 1 auto; min-width: 0; }
    .chips-empty { color: var(--muted); font-size: 12px; }
    .chip {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 3px 6px 3px 9px;
      border: 1px solid var(--panel-border);
      border-radius: 999px;
      background: #fff;
      font-size: 12px;
    }
    .chip-dot { width: 10px; height: 10px; border-radius: 999px; background: var(--chip, #ff4d00); flex: 0 0 auto; }
    .chip-label { color: #2a2a2a; }
    .chip-x { border: 0; background: transparent; color: #6b6b6b; cursor: pointer; font-size: 15px; line-height: 1; padding: 0 2px; }
    .chip-x:hover { color: var(--red); }
    .comparison-hint { color: var(--muted); font-size: 11px; }
    .sbs-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
    .sbs-grid.heatmap-grid { grid-template-columns: repeat(auto-fit, minmax(440px, 1fr)); }
    .sbs-cell { border: 1px solid #f4f4f4; border-radius: 8px; padding: 8px 8px 4px; background: #ffffff; min-width: 0; }
    .sbs-title { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 650; color: #2a2a2a; margin-bottom: 4px; }
    .sbs-chart { height: 330px; border-top: 0; }
    .chart {
      width: 100%;
      height: 430px;
      border-top: 1px solid #f4f4f4;
    }
    #heatmap-chart { height: 410px; }
    .status, .empty {
      padding: 24px;
      color: var(--muted);
      font-size: 13px;
    }
    .warning {
      color: #b3383c;
      background: #fbe3e4;
      border: 1px solid #f0b6b8;
      border-radius: 8px;
    }
    @media (max-width: 1040px) {
      header { position: static; }
      .controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .layout { grid-template-columns: 1fr; }
      .summary-panel { position: static; }
    }
    @media (max-width: 620px) {
      main, header { padding-left: 14px; padding-right: 14px; }
      .controls { grid-template-columns: 1fr; }
      .chart { height: 360px; }
    }
    .signal-controls { display: flex; align-items: center; gap: 14px; margin: 12px 4px 2px; }
    .signal-controls .signal-play {
      flex: none; width: 34px; height: 34px; border-radius: 50%; border: 0; cursor: pointer;
      background: #ff4d00; color: #fff; font-size: 12px; line-height: 1;
      display: inline-flex; align-items: center; justify-content: center;
    }
    .signal-controls .signal-play:hover { background: #d94000; }
    .signal-controls input[type="range"] { flex: 1; accent-color: #ff4d00; height: 4px; cursor: pointer; }
    .signal-controls .readout {
      flex: none; min-width: 188px; text-align: right; font-variant-numeric: tabular-nums;
      font-size: 13px; font-weight: 600; color: #0a0a0a; font-family: var(--font-mono);
    }
    @media (max-width: 720px) { .signal-controls .readout { min-width: 120px; font-size: 11px; } }