:root{--text:#44505f;--text-muted:#667487;--text-h:#101820;--bg:#f4f7f8;--surface:#fff;--surface-raised:#fbfcfd;--border:#dce4ea;--border-strong:#b9c7d2;--code-bg:#0f1720;--code-text:#d8e9ee;--accent:#0d6b78;--focus:#2d8cff;--success:#18864b;--warning:#c98b17;--danger:#c24134;--sans:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--mono:"SFMono-Regular", Consolas, "Liberation Mono", Menlo, ui-monospace, monospace;font:16px/1.5 var(--sans);letter-spacing:0;color:var(--text);background:var(--bg);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box;min-width:0}body{margin:0}button,textarea,input{font:inherit}h1,h2,p{margin:0}h1,h2{color:var(--text-h);letter-spacing:0;font-weight:720}h1{font-size:48px;line-height:1.04}h2{font-size:18px;line-height:1.2}code{color:var(--code-text);background:var(--code-bg);font:13px/1.4 var(--mono);letter-spacing:0;border-radius:4px;padding:3px 6px}#root{min-height:100svh}@media (prefers-color-scheme:dark){:root{--text:#bdc8d5;--text-muted:#92a0af;--text-h:#f2f6f8;--bg:#0b1117;--surface:#111a22;--surface-raised:#16212a;--border:#253440;--border-strong:#3b4d5b;--code-bg:#091018;--code-text:#e0eef2;--accent:#63c7bd;--focus:#5aa9ff;--success:#44b56f;--warning:#e5ae43;--danger:#e16b60}}@media (width<=720px){h1{font-size:34px}}.app-shell{box-sizing:border-box;flex-direction:column;gap:14px;width:min(1180px,100% - 24px);margin:0 auto;padding:16px 0 10px;display:flex}.hero{text-align:center;justify-items:center;display:grid}.hero h1{font-size:clamp(30px,4.4vw,48px);font-weight:780;line-height:1}.scenario-section,.result-section{width:100%}.scenario-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;display:grid}.scenario-card,.query-section,.result-section{border:1px solid var(--border);background:var(--surface);border-radius:8px}.scenario-card.active{border-color:color-mix(in srgb, var(--accent) 55%, var(--border));box-shadow:0 0 0 2px color-mix(in srgb, var(--accent) 12%, transparent)}.scenario-button{width:100%;color:inherit;text-align:left;cursor:pointer;background:0 0;border:0;justify-content:space-between;align-items:center;gap:12px;padding:9px 11px;display:flex}.scenario-button:focus-visible,textarea:focus{outline:2px solid var(--focus);outline-offset:-2px}.scenario-copy{gap:2px;display:grid}.scenario-copy strong{color:var(--text-h);white-space:nowrap;font-size:15px;line-height:1.1}.scenario-copy span,.scenario-facts,.scenario-button>span{color:var(--text-muted);font-size:12px;line-height:1.2}.scenario-facts{text-align:right;white-space:nowrap;flex:none;gap:2px;display:grid}.scenario-kicker{text-transform:uppercase;font-weight:800;color:var(--accent)!important}.metric span{color:var(--text-muted);text-transform:uppercase;font-size:11px;font-weight:700;display:block}.query-section{background:var(--code-bg);width:min(560px,100%);margin:0 auto;overflow:hidden}.duckdb-call{background:var(--code-bg);overflow:hidden}.call-line{min-height:24px;color:var(--code-text);font-family:var(--mono);align-items:center;gap:8px;padding:0 10px;font-size:12px;display:flex}.call-line code{min-width:0;color:var(--code-text);overflow-wrap:anywhere;white-space:normal;background:0 0;padding:0}.call-line.end{border-top:1px solid color-mix(in srgb, var(--code-text) 12%, transparent)}textarea{border:0;border-top:1px solid color-mix(in srgb, var(--code-text) 12%, transparent);box-sizing:border-box;resize:none;width:100%;height:68px;min-height:68px;max-height:68px;color:var(--code-text);background:var(--code-bg);font:12px/1.35 var(--mono);letter-spacing:0;outline:none;padding:6px 10px}.live-indicator{border:1px solid color-mix(in srgb, var(--code-text) 18%, transparent);color:var(--code-text);font:11px/1.4 var(--sans);border-radius:999px;margin-left:auto;padding:1px 7px}.result-section{gap:7px;width:min(440px,100%);margin:0 auto;padding:8px;display:grid}.result-heading{justify-content:space-between;align-items:flex-start;gap:14px;display:flex}.result-heading h2{font-size:16px}.result-heading p,.result-heading span{color:var(--text-muted);font-size:12px}.result-heading span{overflow-wrap:anywhere;text-align:right;max-width:56%}.result-list{border:1px solid var(--border);background:var(--border);border-radius:8px;gap:1px;display:grid;overflow:hidden}.metric{background:var(--surface-raised);box-sizing:border-box;grid-template-columns:minmax(0,220px) minmax(0,1fr);align-items:center;gap:12px;min-height:40px;padding:8px 10px;display:grid}.metric strong{color:var(--text-h);overflow-wrap:anywhere;font-size:15px;line-height:1.1;display:block}.message-panel{border:1px solid var(--border);background:var(--surface-raised);border-radius:8px;padding:8px}.message-panel strong{color:var(--text-h)}.message-panel p{color:var(--text-muted);overflow-wrap:anywhere;margin-top:2px;font-size:12px}.message-panel.error{border-color:color-mix(in srgb, var(--danger) 40%, var(--border));background:color-mix(in srgb, var(--danger) 8%, var(--surface-raised))}.message-panel.loading{align-items:center;gap:10px;display:flex}.spinner{border:2px solid color-mix(in srgb, var(--accent) 18%, var(--border));border-top-color:var(--accent);border-radius:50%;flex:none;width:18px;height:18px;animation:.75s linear infinite spin}@keyframes spin{to{transform:rotate(1turn)}}.footer{color:var(--text-muted);justify-content:center;gap:10px;padding:0;font-size:12px;display:flex}.footer a{color:var(--accent);font-weight:700;text-decoration:none}.footer a:hover{text-decoration:underline}@media (width<=900px){.scenario-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.result-heading{grid-template-columns:1fr;display:grid}.result-heading span{text-align:left;max-width:none}.metric{grid-template-columns:1fr}}@media (width<=640px){.app-shell{width:calc(100% - 16px);padding-top:14px}.scenario-grid{grid-template-columns:1fr}.query-section,.result-section{border-radius:6px}.result-list{grid-template-columns:1fr}textarea{height:84px;min-height:84px;max-height:84px;padding-inline:16px}.call-line{padding-inline:10px}.scenario-button{align-items:flex-start}.scenario-copy strong{white-space:normal}.scenario-facts{white-space:normal;max-width:38%}.live-indicator{flex:none}.footer{flex-wrap:wrap}}