:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--bg:#f4f7fb;--panel:#fff;--panel-soft:#f7f9fc;--line:#dbe3ee;--line-strong:#a8b4c5;--text:#142033;--muted:#536176;--accent:#1d4ed8;--accent-dark:#1e40af;--accent-soft:#e8efff;--compare:#c2410c;--move:#a21caf;--sorted:#047857;--base:#2563eb;--cyan:#0e7490;--purple:#6d28d9;--warning:#b45309;--shadow:0 16px 40px #1e375a14}*{box-sizing:border-box}body{min-height:100vh;color:var(--text);background:radial-gradient(circle at 10% 0%, #dce8ff 0, transparent 34rem), linear-gradient(180deg, #edf3ff 0, var(--bg) 260px), var(--bg);margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}button,input,select,textarea{font:inherit}#root{min-height:100vh}.app-shell{width:min(1360px,100% - 40px);margin:0 auto;padding:32px 0 44px}.skip-link{z-index:20;color:#fff;background:var(--accent-dark);border-radius:8px;padding:10px 14px;position:fixed;top:12px;left:12px;transform:translateY(-180%)}.skip-link:focus{transform:translateY(0)}.hero-card,.panel{border:1px solid var(--line);background:var(--panel);border-radius:14px}.hero-card{border-top:5px solid var(--accent);background:linear-gradient(135deg,#fff 0%,#f5f8ff 100%);justify-content:space-between;align-items:center;gap:20px;padding:18px 24px;display:flex}.eyebrow{color:var(--muted);text-transform:uppercase;margin:0 0 6px;font-size:.8rem;font-weight:700}h1,h2,h3{margin:0}h1{letter-spacing:-.045em;font-size:clamp(1.8rem,3vw,2.3rem);line-height:1.05}.hero-copy{max-width:70ch;color:var(--muted);margin:10px 0 0;line-height:1.6}.stat-card span,.info-card span{color:var(--muted);font-size:.82rem;display:block}.stat-card strong,.info-card strong{margin-top:5px;font-size:1.1rem;display:block}.mode-tabs{border:1px solid var(--line);background:#fff;border-radius:10px;grid-template-columns:repeat(2,minmax(180px,1fr));gap:4px;margin-top:14px;padding:4px;display:inline-grid}.mode-tabs button{color:var(--text);background:0 0;border-color:#0000;border-radius:7px;font-weight:700}.mode-tabs button.active{color:#fff;background:var(--accent);border-color:var(--accent-dark)}.dashboard{grid-template-columns:310px minmax(420px,1fr) 250px;align-items:start;gap:16px;margin-top:16px;display:grid}.compare-workspace{margin-top:16px}.panel{align-self:start;padding:20px}.controls-panel{border-top:4px solid var(--accent)}.visualizer-panel{border-top:4px solid var(--cyan)}.stats-panel{border-top:4px solid var(--sorted)}.theory-panel{border-top:4px solid var(--warning);grid-column:1/-1}.compare-panel{border-top:4px solid var(--purple)}.controls-panel,.stats-panel,.theory-panel,.compare-panel{align-content:start;gap:12px;display:grid}.visualizer-panel{align-content:start;gap:8px;display:grid}.section-kicker{letter-spacing:.09em;text-transform:uppercase;font-size:.72rem;font-weight:800;color:var(--accent)!important;margin-bottom:4px!important}.visualizer-heading{justify-content:space-between;align-items:start;gap:12px;display:flex}.action-badge{border:1px solid var(--line);max-width:190px;color:var(--muted);background:var(--panel-soft);text-align:center;border-radius:999px;padding:6px 9px;font-size:.78rem;font-weight:700}.panel-head p{color:var(--muted);margin:5px 0 0;line-height:1.5}.field{gap:6px;display:grid}.field span,.field label{font-weight:700}select,input[type=range],textarea{width:100%}select,textarea{border:1px solid var(--line-strong);color:var(--text);background:#fff;border-radius:8px;padding:9px 10px}textarea{resize:vertical;min-height:78px;line-height:1.45}input[type=range]{accent-color:var(--accent)}button{border:1px solid var(--line-strong);cursor:pointer;color:var(--text);background:#fff;border-radius:8px;padding:9px 11px;transition:background-color .18s,border-color .18s,color .18s}button:hover{background:var(--accent-soft);border-color:var(--accent)}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:2px}button:disabled{cursor:not-allowed;opacity:.5}select:disabled,textarea:disabled,input:disabled{cursor:not-allowed;opacity:.65}button.primary{background:var(--accent);border-color:var(--accent-dark);color:#fff;font-weight:700}button.primary:hover{background:var(--accent-dark)}button.secondary{background:#fff}button.secondary:hover{border-color:var(--compare);background:#fff7ed}.field-hint,.field-error{margin:0;font-size:.85rem;line-height:1.45}.field-hint{color:var(--muted)}.field-error{color:#b91c1c}.button-grid,.preset-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;display:grid}.lock-note{border-left:3px solid var(--warning);color:var(--muted);background:#fff7ed;margin:0;padding:9px 10px;font-size:.82rem;line-height:1.45}.legend{color:var(--muted);flex-wrap:wrap;gap:10px;margin-top:-2px;margin-bottom:0;font-size:.9rem;display:flex}.legend span{align-items:center;gap:6px;display:inline-flex}.legend-dot{border-radius:50%;width:9px;height:9px}.legend-dot.base{background:var(--base)}.legend-dot.compare{background:var(--compare)}.legend-dot.swap{background:var(--move)}.legend-dot.sorted{background:var(--sorted)}.chart-card{border:1px solid var(--line);background:linear-gradient(#fff 0%,#eff6ff 100%);border-radius:10px;min-height:0;padding:10px;overflow:hidden}.chart{grid-template-columns:repeat(auto-fit,minmax(8px,1fr));align-items:end;gap:clamp(1px,.35vw,5px);height:340px;min-height:0;display:grid}.bar-wrap{flex-direction:column;justify-content:flex-end;align-items:center;gap:5px;min-width:0;height:100%;display:flex}.bar-value{color:var(--muted);font-size:.7rem}.bar{background:linear-gradient(180deg, #60a5fa 0%, var(--base) 100%);border-radius:3px 3px 0 0;width:100%;min-height:16px;transition:height .18s ease-out,background-color .18s ease-out,opacity .14s;box-shadow:inset 0 1px #ffffff59}.bar-wrap:hover .bar{opacity:.82}.bar-wrap:hover .bar-value{color:var(--text);font-weight:700}.bar.compare{background:linear-gradient(180deg, #fdba74 0%, var(--compare) 100%)}.bar.swap{background:linear-gradient(180deg, #f472b6 0%, var(--move) 100%)}.bar.sorted{background:linear-gradient(180deg, #4ade80 0%, var(--sorted) 100%)}.stats-grid,.theory-grid{gap:8px;display:grid}.theory-grid{grid-template-columns:repeat(5,minmax(0,1fr))}.stat-card,.info-card,.array-preview{border:1px solid var(--line);background:var(--panel-soft);border-radius:10px;padding:12px;transition:border-color .16s,background-color .16s}.stat-card{border-left:4px solid var(--accent)}.info-card{border-left:4px solid var(--warning)}.stat-card:hover,.info-card:hover{border-color:#a9bad2}.compare-controls{grid-template-columns:repeat(4,minmax(0,1fr));align-items:end;gap:12px;display:grid}.compare-presets{flex-wrap:wrap;gap:8px;display:flex}.array-preview{gap:5px;display:grid}.array-preview span{color:var(--muted);font-size:.82rem;font-weight:700}.array-preview strong{word-break:break-word;line-height:1.5}.comparison-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;display:grid}.app-footer{color:var(--muted);flex-wrap:wrap;justify-content:space-between;gap:12px;margin-top:18px;padding:14px 2px 0;font-size:.9rem;display:flex}.app-footer a{color:var(--accent);font-weight:700;text-decoration:none}.app-footer a:hover,.app-footer a:focus-visible{text-decoration:underline}@media (width<=1120px){.hero-card{display:grid}.dashboard{grid-template-columns:1fr}.theory-panel{grid-column:auto}.mode-tabs{width:100%}.compare-controls{grid-template-columns:1fr 1fr}.compare-controls .primary{grid-column:1/-1}.chart-card{min-height:0}.chart{height:300px}.theory-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media (width<=640px){.app-shell{width:min(100% - 24px,100%);padding-top:16px}.hero-card,.panel{padding:14px}.mode-tabs,.button-grid,.preset-grid,.compare-controls,.comparison-grid{grid-template-columns:1fr}.preset-grid button:last-child,.compare-controls .primary{grid-column:auto}.theory-grid{grid-template-columns:1fr 1fr}.visualizer-heading{display:grid}.action-badge{justify-self:start;max-width:none}.chart{gap:1px}.bar-value{display:none}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}.skip-link{transition:none}}[hidden]{display:none!important}.header-note{color:var(--muted);white-space:nowrap;font-size:.85rem}.comparison-grid{align-items:start;gap:20px;margin-top:16px}.comparison-lane{border:1px solid var(--line);border-top:4px solid var(--accent);background:var(--panel);border-radius:14px;gap:12px;min-width:0;padding:16px;display:grid}.comparison-lane:nth-child(2){border-top-color:var(--purple)}.comparison-lane .visualizer-panel{border:0;padding:0}.comparison-lane .chart{height:260px;min-height:0}.comparison-lane .bar-value{display:none}.lane-status,.lane-progress{justify-content:space-between;align-items:center;gap:12px;font-size:.85rem;display:flex}.lane-status strong{color:var(--sorted)}.lane-status>span{color:var(--muted);font-weight:700}.lane-progress>span{font-variant-numeric:tabular-nums;min-width:3em}progress{width:100%;height:9px;accent-color:var(--accent)}.lane-metrics{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:0;display:grid}.lane-metrics>div{background:var(--panel-soft);border-radius:8px;padding:12px 8px}.lane-metrics dt{color:var(--muted);overflow-wrap:anywhere;font-size:.75rem}.lane-metrics dd{font-variant-numeric:tabular-nums;margin:6px 0 0;font-size:1.3rem;font-weight:700}.comparison-toolbar{flex-wrap:wrap;gap:8px;display:flex}.comparison-toolbar>button{min-width:130px}.measurement-note{color:var(--muted);max-width:100ch;font-size:.85rem;line-height:1.6}.single-run-stats{gap:10px;min-width:0;display:grid}.single-run-stats>p{color:var(--muted);margin:0;font-size:.9rem}.array-preview{overflow-wrap:anywhere;display:block}summary{cursor:pointer}summary:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}button:disabled:hover{background:var(--panel-soft);border-color:var(--line-strong)}.bar{flex-shrink:0}.bar-value{height:14px;line-height:14px}.chart:has(.bar-wrap:nth-child(40)) .bar-value{display:none}@media (width<=1120px){.comparison-lane .visualizer-heading{display:grid}.lane-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (width<=760px){.comparison-grid{grid-template-columns:1fr}.header-note{white-space:normal}}@media (width<=640px){.mode-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}.compare-controls{grid-template-columns:1fr 1fr}.chart{height:260px}}