:root,[data-theme=dark]{--bg: #070b14;--panel: #111827;--panel-soft: #1b2638;--border: #2f425f;--text: #e5eefc;--muted: #7a9cc5;--accent: #3dd9ff;--danger: #ff5c5c;--input-bg: #0f1725;--button-bg: #1c2b42;--topbar-bg: linear-gradient(180deg, #131f32 0%, #101827 100%);--footer-bg: #101827;--stage-bg: #1a2035}[data-theme=light]{--bg: #f4f6f8;--panel: #ffffff;--panel-soft: #eef1f6;--border: #cdd5e4;--text: #1e2735;--muted: #5a6882;--accent: #2563eb;--danger: #dc2626;--input-bg: #f8fafc;--button-bg: #e8eef8;--topbar-bg: linear-gradient(180deg, #ffffff 0%, #f4f6f8 100%);--footer-bg: #eef1f6;--stage-bg: #1e2735}*{box-sizing:border-box}html,body,#root{margin:0;height:100%;background:var(--bg);color:var(--text);font-family:Inter,Segoe UI,system-ui,sans-serif}.demo-shell{height:100vh;display:flex;flex-direction:column}.topbar{display:flex;align-items:center;justify-content:space-between;flex-wrap:nowrap;gap:12px 16px;padding:10px 16px;border-bottom:1px solid var(--border);background:var(--topbar-bg)}.topbar-brand{display:flex;flex-direction:row;align-items:center;gap:8px;flex:1 1 auto;min-width:0}.topbar-logo{width:28px;height:28px;object-fit:contain;flex-shrink:0}.topbar-title{margin:0;font-size:1.15rem;font-weight:700;letter-spacing:.02em;flex-shrink:0;line-height:1.2}.topbar-meta-line{margin:0;font-size:.78rem;color:var(--muted);line-height:1.3;opacity:.95;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.topbar-right{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;gap:10px;flex-shrink:0}.topbar-links{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:6px;font-size:.82rem}.topbar-links a{color:var(--accent);text-decoration:none}.topbar-links a:hover{text-decoration:underline}.topbar-links-sep{color:var(--muted);-webkit-user-select:none;user-select:none}.topbar-version{color:var(--muted);font-size:.78rem}.theme-select{font-size:.8rem;padding:5px 8px;border-radius:6px;border:1px solid var(--border);background:var(--panel-soft);color:var(--text);cursor:pointer}.status-pill{padding:6px 10px;border-radius:999px;border:1px solid var(--border);background:var(--panel-soft);font-size:.8rem;text-transform:uppercase;letter-spacing:.08em}.layout{flex:1;min-height:0;display:grid;grid-template-columns:430px 1fr 230px;gap:0}.wizard{padding:10px;overflow:auto;border-right:1px solid var(--border);display:flex;flex-direction:column;gap:10px;scrollbar-width:thin;scrollbar-color:var(--border) transparent}.wizard::-webkit-scrollbar{width:5px}.wizard::-webkit-scrollbar-track{background:transparent}.wizard::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}.wizard::-webkit-scrollbar-thumb:hover{background:var(--accent)}.wizard-card{border:1px solid var(--border);border-radius:10px;background:var(--panel);padding:10px}.wizard-hint{margin:-4px 0 10px;font-size:.78rem;line-height:1.35;color:var(--muted);opacity:.92}.mode-grid{display:grid;gap:8px}.mode-tile{display:flex;flex-direction:column;text-align:left;gap:5px;border:1px solid var(--border);border-radius:8px;padding:9px;background:var(--panel-soft);color:var(--text);cursor:pointer}.mode-tile.active{border-color:var(--accent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 30%,transparent)}.mode-tile span{color:var(--muted);font-size:.92rem}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.form-grid.single{grid-template-columns:1fr}label{display:flex;flex-direction:column;gap:4px;font-size:.92rem;color:var(--muted)}.custom-params{margin-top:14px;padding-top:12px;border-top:1px solid var(--border)}.custom-params-label{margin:0 0 8px;font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);opacity:.55}select,input{border:1px solid var(--border);border-radius:6px;background:var(--input-bg);color:var(--text);padding:10px;font-size:.95rem}input:disabled,select:disabled{opacity:.38;cursor:not-allowed}input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:18px;border-left:1px solid var(--border);border-radius:0 5px 5px 0;background-color:var(--panel-soft);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='14' viewBox='0 0 10 14'%3E%3Cpolygon points='5,2 9,6 1,6' fill='white' opacity='0.55'/%3E%3Cpolygon points='5,12 1,8 9,8' fill='white' opacity='0.55'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center;cursor:pointer;opacity:1;transition:background-color .12s}input[type=number]::-webkit-inner-spin-button:hover{background-color:var(--button-bg);border-left-color:var(--accent);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='14' viewBox='0 0 10 14'%3E%3Cpolygon points='5,2 9,6 1,6' fill='white' opacity='0.9'/%3E%3Cpolygon points='5,12 1,8 9,8' fill='white' opacity='0.9'/%3E%3C/svg%3E")}[data-theme=light] input[type=number]::-webkit-inner-spin-button{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='14' viewBox='0 0 10 14'%3E%3Cpolygon points='5,2 9,6 1,6' fill='%231e2735' opacity='0.55'/%3E%3Cpolygon points='5,12 1,8 9,8' fill='%231e2735' opacity='0.55'/%3E%3C/svg%3E")}[data-theme=light] input[type=number]::-webkit-inner-spin-button:hover{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='14' viewBox='0 0 10 14'%3E%3Cpolygon points='5,2 9,6 1,6' fill='%231e2735' opacity='0.9'/%3E%3Cpolygon points='5,12 1,8 9,8' fill='%231e2735' opacity='0.9'/%3E%3C/svg%3E")}button{border:1px solid var(--border);border-radius:6px;background:var(--button-bg);color:var(--text);padding:10px 12px;font-size:.95rem;cursor:pointer}button:hover:not(:disabled){border-color:var(--accent)}button:disabled{opacity:.5;cursor:not-allowed}button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.btn-primary{background:var(--accent);color:var(--bg);border-color:var(--accent);font-weight:600}.btn-primary:hover:not(:disabled){filter:brightness(1.1);border-color:var(--accent)}.btn-stop{background:transparent;border-color:var(--danger);color:var(--danger)}.btn-stop:hover:not(:disabled){background:color-mix(in srgb,var(--danger) 15%,transparent);border-color:var(--danger)}@media(prefers-reduced-motion:reduce){.status-pill,.mode-tile.active{transition:none}}.button-row{display:flex;gap:6px}.button-row.wrap{flex-wrap:wrap}.file-step-actions{margin-top:8px}.file-step-actions button{flex:1 1 auto;min-width:min(100%,11rem);white-space:normal;text-align:center}.status-line{margin:8px 0 0;font-size:.92rem;color:var(--muted)}.section-toggle{width:100%}.advanced-grid{margin-top:8px}.diag-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}.diag-grid>div{border:1px solid var(--border);border-radius:6px;background:var(--input-bg);padding:6px;display:flex;flex-direction:column;gap:2px}.diag-grid span{font-size:.86rem;color:var(--muted)}.diag-grid strong{font-size:.92rem;color:var(--text)}.stage{position:relative;min-width:0;min-height:0;background:var(--stage-bg)}.stage>div:not(.compare-grid):not(.empty-state):not(.stage-error-fallback),.stage canvas{position:absolute;top:0;right:0;bottom:0;left:0;width:100%!important;height:100%!important;display:block}.stage>.empty-state{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;text-align:center;padding:16px;box-sizing:border-box;color:var(--text);font-size:1rem;z-index:1;pointer-events:none}.stage-error-fallback{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:24px;text-align:center;background:color-mix(in srgb,var(--bg) 94%,transparent);z-index:3}.stage-error-title{margin:0;font-size:.95rem;font-weight:600;color:var(--danger)}.stage-error-message{margin:0;max-width:32rem;width:100%;text-align:left;font-size:.8rem;font-family:var(--font-mono, monospace);color:var(--text);background:color-mix(in srgb,var(--danger) 8%,var(--panel));border:1px solid color-mix(in srgb,var(--danger) 30%,var(--border));border-radius:6px;padding:10px 12px;white-space:pre-wrap;word-break:break-word;line-height:1.5}.stage-error-reset{margin-top:4px}.file-error-alert{margin-top:10px;padding:10px;border-radius:8px;border:1px solid var(--danger);background:color-mix(in srgb,var(--danger) 12%,transparent)}.file-error-alert-body{display:flex;align-items:flex-start;gap:8px;justify-content:space-between;font-size:.9rem}.file-error-dismiss{flex:0 0 auto;padding:4px 10px;min-width:2rem}.file-policy-hint{margin-top:8px;padding:8px 10px;border-radius:6px;border:1px solid var(--border);background:var(--panel-soft);font-size:.85rem;color:var(--muted)}.labs-url-row{display:flex;align-items:flex-start;gap:8px;margin-top:10px;padding:8px;border-radius:8px;background:var(--input-bg);border:1px solid var(--border)}.labs-url-row input[type=checkbox]{margin-top:3px;flex:0 0 auto;width:1rem;height:1rem;accent-color:var(--accent)}.labs-url-row label{font-size:.82rem;color:var(--muted);line-height:1.35}.dataset-attribution{margin-top:12px;padding:8px 10px;border-radius:8px;border:1px dashed var(--border);font-size:.8rem;color:var(--muted)}.dataset-attribution strong{display:block;margin-bottom:4px;color:var(--text);font-size:.86rem}.dataset-attribution a{color:var(--accent)}.demo-footer{flex-shrink:0;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 16px;padding:10px 16px;border-top:1px solid var(--border);font-size:.78rem;color:var(--muted);background:var(--footer-bg)}.demo-footer a{color:var(--accent);text-decoration:none}.demo-footer a:hover{text-decoration:underline}.compare-grid{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;min-height:0;display:grid;grid-template-columns:1fr 1fr;gap:2px;box-sizing:border-box}.compare-col{position:relative;min-width:0;min-height:0;display:flex;flex-direction:column}.compare-label{flex:0 0 auto;align-self:flex-start;margin:10px 0 0 10px;z-index:2;padding:6px 10px;border-radius:999px;border:1px solid var(--border);background:color-mix(in srgb,var(--panel) 85%,transparent);font-size:.8rem;color:var(--text)}.compare-label.alt{border-color:var(--accent)}.metrics-rail{border-left:1px solid var(--border);padding:10px;overflow:auto;display:flex;flex-direction:column;gap:8px;scrollbar-width:thin;scrollbar-color:var(--border) transparent}.metrics-rail::-webkit-scrollbar{width:5px}.metrics-rail::-webkit-scrollbar-track{background:transparent}.metrics-rail::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}.metrics-rail::-webkit-scrollbar-thumb:hover{background:var(--accent)}.rail-actions{display:flex;flex-direction:column;gap:5px;margin-bottom:10px}.rail-actions button{width:100%;padding:7px 10px;font-size:.85rem;text-align:center}.rail-timer{text-align:center;font-size:.9rem;font-variant-numeric:tabular-nums;color:var(--accent);letter-spacing:.05em;margin-bottom:8px;padding-bottom:8px;border-bottom:1px solid var(--border)}.bg-color-picker{margin-top:10px;padding-top:10px;border-top:1px solid var(--border)}.bg-color-label{display:block;font-size:.8rem;color:var(--muted);margin-bottom:6px}.bg-presets{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.bg-swatch{width:22px;height:22px;border-radius:4px;border:2px solid transparent;cursor:pointer;padding:0;outline-offset:1px}.bg-swatch.active{border-color:var(--accent)}.bg-hex-input{width:76px;font-size:.8rem;padding:3px 6px;font-family:monospace}.metric-block{border:1px solid var(--border);border-radius:8px;background:var(--panel);padding:8px;display:flex;justify-content:space-between;gap:8px;font-size:.92rem}.metric-block span{color:var(--muted)}@media(max-width:1100px){.layout{grid-template-columns:380px 1fr}.metrics-rail{display:none}}@media(max-width:640px){.layout{grid-template-columns:1fr;grid-template-rows:minmax(0,42vh) minmax(200px,1fr)}.wizard{order:1;border-right:none;border-bottom:1px solid var(--border);max-height:42vh}.stage{order:2;min-height:200px}}@media(max-width:720px){.topbar-meta-line{font-size:.72rem}.topbar-title{font-size:1.05rem}}@media(max-width:520px){.topbar{flex-wrap:wrap}.topbar-right{width:100%;justify-content:space-between}}@media(max-width:400px){.topbar-links{justify-content:flex-start;flex-wrap:wrap;row-gap:4px}}