.scatterplot-app-shell{--scatterplot-bg-top:#f8efe4;--scatterplot-bg-bottom:#d8eadf;--scatterplot-glow:hsla(0,0%,100%,.7);--scatterplot-panel:rgba(255,251,246,.92);--scatterplot-panel-border:rgba(84,70,48,.18);--scatterplot-divider:rgba(84,70,48,.12);--scatterplot-ink:#1f2b28;--scatterplot-muted:#566866;--scatterplot-accent:#0b6e62;--scatterplot-accent-soft:rgba(11,110,98,.12);--scatterplot-accent-strong:#d46c2f;--scatterplot-shadow:0 22px 60px rgba(57,43,21,.18);--scatterplot-button-shadow:0 8px 22px rgba(57,43,21,.18);--scatterplot-canvas-bg:linear-gradient(180deg,hsla(36,62%,97%,.95),rgba(245,250,247,.95));--scatterplot-kbd-bg:hsla(0,0%,100%,.72);--scatterplot-kbd-border:rgba(33,39,38,.18);display:grid;grid-template-columns:320px minmax(0,1fr);gap:20px;padding:20px;font-family:Avenir Next,Trebuchet MS,Gill Sans,sans-serif;color:var(--scatterplot-ink);background:radial-gradient(circle at top left,var(--scatterplot-glow),transparent 32%),linear-gradient(145deg,var(--scatterplot-bg-top),var(--scatterplot-bg-bottom));border-radius:24px;margin:16px}.dark .scatterplot-app-shell{--scatterplot-bg-top:#161d1b;--scatterplot-bg-bottom:#101816;--scatterplot-glow:rgba(103,132,125,.16);--scatterplot-panel:rgba(23,30,28,.92);--scatterplot-panel-border:rgba(214,226,223,.14);--scatterplot-divider:rgba(214,226,223,.1);--scatterplot-ink:#e4ebe9;--scatterplot-muted:#99a8a4;--scatterplot-accent:#35b3a2;--scatterplot-accent-soft:rgba(53,179,162,.16);--scatterplot-accent-strong:#e2854a;--scatterplot-shadow:0 22px 60px rgba(0,0,0,.45);--scatterplot-button-shadow:0 8px 22px rgba(0,0,0,.4);--scatterplot-canvas-bg:#0f1514;--scatterplot-kbd-bg:hsla(0,0%,100%,.08);--scatterplot-kbd-border:rgba(214,226,223,.22)}.scatterplot-canvas-frame,.scatterplot-side-panel{border:1px solid var(--scatterplot-panel-border);border-radius:24px;background:var(--scatterplot-panel);backdrop-filter:blur(16px);box-shadow:var(--scatterplot-shadow)}.scatterplot-side-panel{display:flex;flex-direction:column;gap:16px;padding:22px}.scatterplot-panel-block+.scatterplot-panel-block{border-top:1px solid var(--scatterplot-divider);padding-top:16px}.scatterplot-panel-block h2{margin:0 0 10px;font-size:.78rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--scatterplot-muted)}.scatterplot-panel-title h1{margin:4px 0 10px;font-family:Georgia,Times New Roman,serif;font-size:2rem;line-height:1.05}.scatterplot-control-list,.scatterplot-query-hint,.scatterplot-status-copy{margin:0;color:var(--scatterplot-muted);line-height:1.5;font-size:.92rem}.scatterplot-error-copy{margin-top:8px;color:#a64a18;font-size:.85rem}.dark .scatterplot-error-copy{color:#eb9a66}.scatterplot-panel-actions{display:flex;gap:10px;flex-wrap:wrap}.scatterplot-action-button{border:none;border-radius:999px;padding:11px 16px;font:inherit;font-weight:600;background:var(--scatterplot-accent);color:#fff;cursor:pointer;transition:transform .14s ease,opacity .14s ease,background .14s ease,box-shadow .14s ease}.scatterplot-action-button:hover:not(:disabled){transform:translateY(-1px);box-shadow:var(--scatterplot-button-shadow)}.scatterplot-action-button:focus-visible{outline:2px solid var(--scatterplot-accent);outline-offset:2px}.scatterplot-action-button:disabled{opacity:.45;cursor:default}.scatterplot-action-button-secondary{background:transparent;color:var(--scatterplot-ink);border:1px solid var(--scatterplot-panel-border)}.scatterplot-action-button-secondary:hover:not(:disabled){background:var(--scatterplot-accent-soft)}.scatterplot-control-list{padding-left:20px;display:grid;gap:8px}.scatterplot-speed-control{display:flex;align-items:center;gap:10px;color:var(--scatterplot-muted)}.scatterplot-speed-control input[type=range]{flex:1;accent-color:var(--scatterplot-accent)}.scatterplot-speed-value{min-width:3.5ch;text-align:right;font-variant-numeric:tabular-nums}.scatterplot-app-shell kbd{font-family:Courier New,monospace;font-size:.85em;padding:1px 6px;border-radius:999px;border:1px solid var(--scatterplot-kbd-border);background:var(--scatterplot-kbd-bg)}.scatterplot-canvas-panel{min-width:0}.scatterplot-canvas-frame{position:relative;height:calc(100vh - 160px);min-height:520px;overflow:hidden;padding:14px}.scatterplot-canvas-frame #viz-canvas{width:100%;height:100%;display:block;border-radius:16px;outline:none;touch-action:none;background:var(--scatterplot-canvas-bg)}.scatterplot-touch-controls{position:absolute;left:14px;right:14px;bottom:22px;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px;pointer-events:none}.scatterplot-touch-controls>*{pointer-events:auto}.scatterplot-touch-cluster{display:flex;gap:8px}.scatterplot-touch-stack{display:flex;flex-direction:column;align-items:flex-start;gap:10px}.scatterplot-touch-button{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border:1px solid var(--scatterplot-panel-border);border-radius:14px;background:var(--scatterplot-panel);color:var(--scatterplot-ink);box-shadow:var(--scatterplot-button-shadow);backdrop-filter:blur(12px);cursor:pointer}.scatterplot-touch-button:active{transform:scale(.96)}.scatterplot-touch-button svg{width:20px;height:20px}.scatterplot-touch-open,.scatterplot-touch-toggle{display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:0 18px;border:none;border-radius:999px;font:inherit;font-weight:600;background:var(--scatterplot-accent);color:#fff;box-shadow:var(--scatterplot-button-shadow);cursor:pointer}.scatterplot-touch-open:disabled{opacity:.5;cursor:default}.scatterplot-touch-toggle{background:var(--scatterplot-panel);color:var(--scatterplot-ink);border:1px solid var(--scatterplot-panel-border)}.scatterplot-touch-toggle.is-active{background:var(--scatterplot-accent-strong);color:#fff;border-color:transparent}.scatterplot-touch-open svg,.scatterplot-touch-toggle svg{width:18px;height:18px}.scatterplot-touch-dpad{display:grid;grid-template-columns:repeat(3,46px);grid-template-rows:repeat(2,46px);gap:6px;margin-left:auto}.scatterplot-dpad-up{grid-column:2;grid-row:1}.scatterplot-dpad-left{grid-column:1;grid-row:2}.scatterplot-dpad-right{grid-column:3;grid-row:2}.scatterplot-dpad-down{grid-column:2;grid-row:2}.scatterplot-canvas-frame #viz-canvas:focus-visible{box-shadow:0 0 0 2px var(--scatterplot-accent)}@media (max-width:1040px){.scatterplot-app-shell{grid-template-columns:1fr}.scatterplot-canvas-frame{height:72vh}}