:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--bg:#eef4ff;--panel:#fff;--panel-soft:#f8fbff;--line:#d4d4d8;--line-strong:#a1a1aa;--text:#18181b;--muted:#52525b;--accent:#2563eb;--accent-dark:#1d4ed8;--accent-soft:#dbeafe;--compare:#f97316;--move:#be185d;--sorted:#15803d;--base:#2563eb;--cyan:#0891b2;--purple:#7c3aed;--warning:#d97706}*{box-sizing:border-box}body{min-height:100vh;color:var(--text);background:linear-gradient(180deg, #dbeafe 0, var(--bg) 220px), var(--bg);margin:0;font-family:Arial,Helvetica,sans-serif}button,input,select,textarea{font:inherit}#root{min-height:100vh}.app-shell{width:min(1280px,94vw);margin:0 auto;padding:24px 0 40px}.hero-card,.panel{border:1px solid var(--line);background:var(--panel);border-radius:8px;transition:border-color .16s,box-shadow .16s}.panel:hover{border-color:#93c5fd;box-shadow:0 6px 18px #0f172a14}.hero-card{border-top:4px solid var(--accent);background:linear-gradient(#fff 0%,#f8fbff 100%);justify-content:space-between;gap:20px;padding:20px;display:flex;box-shadow:0 8px 24px #1e40af14}.eyebrow{color:var(--muted);text-transform:uppercase;margin:0 0 6px;font-size:.8rem;font-weight:700}h1,h2,h3{margin:0}h1{font-size:clamp(2rem,4vw,3rem);line-height:1.05}.hero-copy{max-width:70ch;color:var(--muted);margin:10px 0 0;line-height:1.6}.hero-metrics{flex-wrap:wrap;align-content:flex-start;gap:10px;display:flex}.metric-chip{border:1px solid var(--line);border-left:4px solid var(--accent);background:#fff;border-radius:6px;min-width:140px;padding:10px 12px}.metric-chip span,.stat-card span,.info-card span{color:var(--muted);font-size:.82rem;display:block}.metric-chip strong,.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:8px;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:5px;font-weight:700}.mode-tabs button.active{color:#fff;background:var(--accent);border-color:var(--accent-dark)}.dashboard{grid-template-columns:320px minmax(0,1fr) 260px;align-items:start;gap:14px;margin-top:14px;display:grid}.compare-workspace{margin-top:14px}.panel{align-self:start;padding:16px}.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)}.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}.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:6px;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:6px;padding:9px 11px;transition:background-color .14s,border-color .14s,color .14s,transform .14s}button:hover{background:var(--accent-soft);border-color:var(--accent);transform:translateY(-1px)}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}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}.preset-grid button:last-child{grid-column:1/-1}.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:8px;min-height:430px;padding:10px;overflow:hidden}.chart{grid-template-columns:repeat(auto-fit,minmax(8px,1fr));align-items:end;gap:6px;height:100%;min-height:400px;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,background-color .18s,transform .14s,opacity .14s}.bar-wrap:hover .bar{opacity:.82;transform:translateY(-3px)}.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}.stat-card,.info-card,.compare-card,.array-preview{border:1px solid var(--line);background:var(--panel-soft);border-radius:8px;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)}.compare-card{border-left:4px solid var(--purple)}.stat-card:hover,.info-card:hover,.compare-card:hover{border-color:var(--accent);background:#eff6ff}.compare-controls{grid-template-columns:repeat(3,minmax(180px,1fr)) auto;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}.compare-card h3{margin:0 0 10px;font-size:1.05rem}.compare-card dl{gap:8px;margin:0;display:grid}.compare-card dl div{border-top:1px solid var(--line);justify-content:space-between;gap:12px;padding-top:8px;display:flex}.compare-card dt{color:var(--muted)}.compare-card dd{margin:0;font-weight:700}.compare-result-chart{border:1px solid var(--line);background:linear-gradient(#fff 0%,#eff6ff 100%);border-radius:8px;grid-template-columns:repeat(auto-fit,minmax(6px,1fr));align-items:end;gap:4px;height:150px;margin:12px 0 14px;padding:10px 8px 0;display:grid;overflow:hidden}.compare-result-chart i{background:linear-gradient(180deg, #60a5fa 0%, var(--accent) 100%);border-radius:3px 3px 0 0;min-height:10px;transition:opacity .16s,transform .16s;display:block}.compare-result-chart i:hover{opacity:.82;transform:translateY(-2px)}.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}.mode-tabs{width:100%}.compare-controls{grid-template-columns:1fr 1fr}.compare-controls .primary{grid-column:1/-1}.chart-card{min-height:360px}.chart{min-height:330px}}@media (width<=640px){.app-shell{width:min(94vw,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}.chart{gap:4px}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}button:hover,.bar-wrap:hover .bar,.compare-result-chart i:hover{transform:none}}