:root{color-scheme:light dark;--figure-bg:#fff;--figure-surface:#f8fafc;--figure-text:#17202a;--figure-muted:#64748b;--figure-border:#d8dee8;--figure-accent:#2563eb;--figure-accent-2:#db2777;--figure-good:#059669;--figure-warn:#d97706}@media(prefers-color-scheme:dark){:root{--figure-bg:#111827;--figure-surface:#172033;--figure-text:#e5e7eb;--figure-muted:#9ca3af;--figure-border:#374151;--figure-accent:#60a5fa;--figure-accent-2:#f472b6;--figure-good:#34d399;--figure-warn:#fbbf24}}*{box-sizing:border-box}html,body{width:100%;min-height:100%}body{margin:0;background:var(--figure-bg);color:var(--figure-text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}.figure-root{min-height:100vh;padding:18px}.figure-panel{display:grid;gap:14px}.figure-toolbar{display:flex;flex-wrap:wrap;gap:12px;align-items:end;padding:12px;border:1px solid var(--figure-border);border-radius:6px;background:var(--figure-surface)}.figure-control{display:grid;gap:5px;min-width:160px}.figure-control label{color:var(--figure-muted);font-size:12px;font-weight:650}.figure-control input,.figure-control select,.figure-button{min-height:36px;border:1px solid var(--figure-border);border-radius:5px;background:var(--figure-bg);color:var(--figure-text);font:inherit}.figure-control input[type="range"]{min-height:auto;accent-color:var(--figure-accent)}.figure-button{padding:0 12px;cursor:pointer;font-weight:650}.figure-button[data-primary="true"]{border-color:var(--figure-accent);background:var(--figure-accent);color:#fff}.figure-button:hover{filter:brightness(0.97)}.figure-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.figure-metric{padding:10px;border:1px solid var(--figure-border);border-radius:6px;background:var(--figure-surface)}.figure-metric span{display:block;color:var(--figure-muted);font-size:11px;font-weight:700;text-transform:uppercase}.figure-metric strong{display:block;margin-top:3px;color:var(--figure-text);font-size:18px}.figure-canvas{width:100%;overflow:hidden;border:1px solid var(--figure-border);border-radius:6px;background:var(--figure-bg)}.figure-canvas svg{display:block;width:100%;height:auto}.figure-note{color:var(--figure-muted);font-size:12px;line-height:1.45}@media(max-width:720px){.figure-root{padding:12px}.figure-toolbar{display:grid;grid-template-columns:1fr 1fr;align-items:stretch}.figure-control{min-width:0}.figure-control:first-child,.figure-control:nth-child(2){grid-column:1 / -1}.figure-button{width:100%}.figure-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}}