:root{--bg:#fff;--bg-secondary:#f7f7f5;--bg-hover:#f1f1ef;--border:#e3e3e0;--border-light:#eeeeec;--text:#1f1f1f;--text-secondary:#6b6b6b;--text-tertiary:#9b9b9b;--accent:#2e7d6f;--blue:#337ea9;--orange:#c77d2e;--red:#c4554d}*{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg);color:var(--text);height:100vh;font-family:"Source Sans 3",-apple-system,sans-serif;overflow:hidden}.app{grid-template-columns:minmax(320px,1.15fr) minmax(420px,1.65fr) 280px;width:100vw;height:100vh;display:grid;overflow:hidden}.panel-left{background:var(--bg);border-right:1px solid var(--border);flex-direction:column;gap:10px;min-width:0;padding:16px;display:flex;overflow-y:auto}.panel-label{text-transform:uppercase;letter-spacing:.06em;color:var(--text-tertiary);font-family:IBM Plex Mono,monospace;font-size:.65rem;font-weight:500}.search-bar{background:var(--bg);border:1px solid var(--border);color:var(--text-tertiary);border-radius:4px;align-items:center;gap:6px;padding:5px 8px;display:flex}.search-bar input{color:var(--text);background:0 0;border:none;outline:none;width:100%;font-family:IBM Plex Mono,monospace;font-size:.72rem}.search-bar input::placeholder{color:var(--text-tertiary)}.scatter-wrap{flex:auto;width:100%;min-height:560px;position:relative;overflow:hidden}#scatter-canvas{background:var(--bg-secondary);border:1px solid var(--border-light);cursor:crosshair;border-radius:4px;width:100%;height:100%;position:absolute;top:0;left:0}.zoom-indicator{color:var(--text-tertiary);border:1px solid var(--border-light);pointer-events:none;background:#ffffffd9;border-radius:3px;padding:1px 5px;font-family:IBM Plex Mono,monospace;font-size:.58rem;position:absolute;bottom:6px;right:6px}.scatter-hint{color:var(--text-tertiary);pointer-events:none;opacity:.6;font-family:IBM Plex Mono,monospace;font-size:.5rem;position:absolute;bottom:6px;left:6px}.legend{flex-direction:column;gap:4px;margin-top:2px;display:flex}.legend-item{color:var(--text-secondary);align-items:center;gap:6px;font-size:.78rem;display:flex}.legend-dot{border-radius:50%;flex-shrink:0;width:8px;height:8px}.status-bar{color:var(--text-tertiary);text-align:center;margin-top:auto;padding-top:8px;font-family:IBM Plex Mono,monospace;font-size:.65rem}.panel-center{background:var(--bg-secondary);padding:20px;position:relative;overflow:hidden}#three-canvas{border:1px solid var(--border-light);border-radius:8px;width:100%;height:100%;display:block}.viewport-badge{background:var(--bg);border:1px solid var(--border-light);color:var(--text-tertiary);pointer-events:none;border-radius:3px;padding:2px 8px;font-family:IBM Plex Mono,monospace;font-size:.6rem;position:absolute;top:10px;left:10px}.viewport-hint{color:var(--text-tertiary);pointer-events:none;font-size:.85rem;transition:opacity .3s;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.viewport-hint.hidden{opacity:0}.panel-right{background:var(--bg);border-left:1px solid var(--border);flex-direction:column;gap:12px;min-width:0;padding:14px;display:flex;overflow:hidden}.section{flex-direction:column;gap:6px;display:flex}.info-block{background:var(--bg-secondary);border-radius:6px;padding:10px 12px}.info-block.compact{padding:6px 10px}.info-row{justify-content:space-between;align-items:center;padding:2px 0;font-size:.78rem;line-height:1.6;display:flex}.info-row .lbl{color:var(--text-tertiary)}.info-row .val{color:var(--text);text-overflow:ellipsis;white-space:nowrap;max-width:120px;font-family:IBM Plex Mono,monospace;font-size:.72rem;font-weight:500;overflow:hidden}.slider-group{flex-direction:column;gap:6px;display:flex}.slider-row{color:var(--text-tertiary);align-items:center;gap:6px;min-width:0;font-family:IBM Plex Mono,monospace;font-size:.75rem;display:flex}.slider-label{flex-shrink:0;width:36px;font-size:.7rem}.slider-val{text-align:right;flex-shrink:0;width:32px;font-size:.65rem}input[type=range]{appearance:none;background:var(--border);border-radius:2px;outline:none;flex:1;min-width:0;height:3px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:var(--text);border:2px solid var(--bg);width:12px;height:12px;box-shadow:0 0 0 1px var(--border);cursor:pointer;border-radius:50%}input[type=range]:disabled{opacity:.35;cursor:not-allowed}input[type=range]:disabled::-webkit-slider-thumb{cursor:not-allowed}.checkbox-row{color:var(--text-secondary);cursor:pointer;align-items:center;gap:6px;margin-top:4px;font-size:.78rem;display:flex}.checkbox-row input[type=checkbox]{accent-color:var(--text)}.interp-controls{flex-direction:column;gap:8px;display:flex}.interp-endpoints{gap:6px;display:flex}.interp-t{text-align:center;color:var(--text-tertiary);font-family:IBM Plex Mono,monospace;font-size:.7rem}.interp-mode-toggle{border:1px solid var(--border);border-radius:4px;gap:0;display:flex;overflow:hidden}.interp-mode-toggle .mode-btn{border:none;border-radius:0;flex:1;padding:4px 8px;font-size:.65rem}.interp-mode-toggle .mode-btn:first-child{border-right:1px solid var(--border)}.interp-btn-row{gap:6px;display:flex}.interp-btn-row .btn{flex:1}.actions{flex-direction:row;gap:6px;margin-top:auto}.restricted-notice{color:var(--text-secondary);background:var(--bg-secondary);border:1px solid var(--border-light);border-radius:6px;margin-top:auto;padding:8px 10px;font-size:.68rem;line-height:1.35}.restricted-notice+.actions{margin-top:0}.btn{border:1px solid var(--border);background:var(--bg);color:var(--text);cursor:pointer;white-space:nowrap;border-radius:4px;justify-content:center;align-items:center;gap:4px;padding:6px 12px;font-family:"Source Sans 3",sans-serif;font-size:.72rem;transition:background .15s;display:inline-flex}.btn:hover{background:var(--bg-secondary)}.btn.primary{background:var(--text);color:var(--bg);border-color:var(--text)}.btn.primary:hover{background:#333}.btn.active{background:var(--blue);color:#fff;border-color:var(--blue)}.btn:disabled{opacity:.4;cursor:not-allowed}@media (width<=800px){.app{grid-template-rows:200px 1fr auto;grid-template-columns:1fr}.panel-left{border-right:none;border-bottom:1px solid var(--border)}.panel-right{border-left:none;border-top:1px solid var(--border);max-height:300px}.scatter-wrap{min-height:200px}}
