:root{--ink:#172b4d;--muted:#72829a;--blue:#1357d4;--line:#e0e7f0;--surface:#fff;--shadow:0 12px 36px rgba(29,54,94,.055)}
*{box-sizing:border-box}[hidden]{display:none!important}html{background:#f5f7fb}body{margin:0;color:var(--ink);font:14px/1.5 'DM Sans',system-ui,sans-serif;background:radial-gradient(ellipse at 12% 0%,#e9f1ff 0,rgba(245,247,251,0) 36rem),#f5f7fb}button,input,select{font:inherit}button{cursor:pointer}.viz-topbar{height:66px;background:rgba(255,255,255,.9);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 max(28px,calc((100vw - 1500px)/2));position:relative;z-index:2}.brand{display:flex;gap:11px;align-items:center;text-decoration:none;color:var(--ink);font:800 13px Manrope,sans-serif;letter-spacing:1.2px}.brand-muted{font-weight:500;color:#8090a7;margin-left:5px}.brand-mark{width:28px;height:28px;border-radius:8px;background:var(--blue);display:flex;align-items:flex-end;justify-content:center;gap:2px;padding:6px}.brand-mark span{width:3px;border-radius:2px;background:#fff}.brand-mark span:nth-child(1){height:6px}.brand-mark span:nth-child(2){height:11px}.brand-mark span:nth-child(3){height:8px}.brand-mark span:nth-child(4){height:15px}.back-link{font-size:12px;text-decoration:none;color:#506884;font-weight:600}.back-link:hover,.viz-footer a:hover,.board-footer a:hover{color:var(--blue);text-decoration:underline}.viz-page{max-width:1500px;margin:0 auto;padding:38px 28px 24px}.viz-hero{padding:0 3px 25px}.eyebrow{font-size:10px;letter-spacing:1.6px;font-weight:700;color:var(--blue);margin-bottom:12px}.viz-hero h1{font:800 clamp(32px,3.4vw,46px)/1.12 Manrope,sans-serif;letter-spacing:-1.7px;margin:0;color:#152b4c}.rainbow-text{background:linear-gradient(95deg,#e94b3c 0%,#f59b29 18%,#dfc52d 32%,#36a66c 48%,#2b96d3 65%,#4f67d7 82%,#9859c6 100%);-webkit-background-clip:text;background-clip:text;color:transparent}.viz-hero p{margin:13px 0 16px;color:#687a92;font-size:14px;max-width:800px;line-height:1.7}.hero-tags{display:flex;flex-wrap:wrap;gap:7px}.hero-tags span{border:1px solid #d9e4f5;background:rgba(255,255,255,.58);border-radius:5px;padding:5px 9px;color:#526884;font-size:10px;font-weight:700}.viz-layout{display:grid;grid-template-columns:minmax(300px,350px) minmax(0,1fr);gap:19px;align-items:start}.viz-panel{min-width:0;background:var(--surface);border:1px solid #e3e9f2;border-radius:12px;box-shadow:var(--shadow)}.settings-panel{padding:21px 20px}.panel-title{display:flex;gap:10px;align-items:flex-start;margin-bottom:18px}.panel-title h2,.board-head h2{font:700 16px Manrope,sans-serif;margin:0;letter-spacing:-.25px;color:#1a3152}.panel-title p{margin:4px 0 0;font-size:10px;color:#8694a8;line-height:1.55}.step-badge{font:500 10px 'DM Mono',monospace;color:var(--blue);background:#edf4ff;border:1px solid #dce9ff;border-radius:4px;padding:4px 6px;margin-top:1px}.control-label{display:flex;align-items:center;justify-content:space-between;font-weight:700;font-size:10px;color:#536780;margin:0 0 6px}.control{width:100%;border:1px solid #dbe3ee;background:#fbfcfe;border-radius:6px;padding:9px 10px;color:#263b5a;outline:0;min-width:0;font-size:11px;transition:border .15s,box-shadow .15s}.control:focus{border-color:#87b1fa;box-shadow:0 0 0 3px #eaf2ff}.settings-panel>.control,.settings-panel>.control-label{margin-bottom:7px}.two-controls{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0}.check-card{align-self:end;padding:7px 8px;border:1px solid #e5eaf1;background:#f8fafc;border-radius:6px;min-height:56px}.check-card label{font-weight:600;font-size:10px;color:#4a607d;display:flex;gap:6px;align-items:center}.check-card input{accent-color:var(--blue);margin:0}.check-card small{display:block;color:#93a0b1;font-size:9px;line-height:1.35;margin:5px 0 0}.primary-button,.secondary-button{border-radius:7px;padding:10px 11px;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;gap:7px;transition:transform .12s,background .12s,border-color .12s}.primary-button{background:var(--blue);border:1px solid var(--blue);color:#fff;box-shadow:0 4px 12px rgba(19,87,212,.13)}.primary-button:hover:not(:disabled){background:#0849bd;transform:translateY(-1px)}.secondary-button{border:1px solid #dbe4f0;background:#fff;color:#536780}.secondary-button:hover:not(:disabled){border-color:#a7c2f1;background:#f7faff;color:var(--blue)}button:disabled{opacity:.42;cursor:not-allowed;transform:none!important}.settings-panel>.primary-button{width:100%;margin-top:3px}.hint{font-size:9px;line-height:1.6;color:#8795a8;margin:9px 0 0}.panel-divider{height:1px;background:#edf1f6;margin:18px 0}.compact-title{margin-bottom:15px}.compact-title .step-badge{min-width:25px;text-align:center}.speed-heading{display:flex;align-items:center;justify-content:space-between;gap:8px}.speed-heading output{font:500 10px 'DM Mono',monospace;color:var(--blue)}.speed-slider{width:100%;accent-color:var(--blue);margin:5px 0 0}.speed-ends{display:flex;justify-content:space-between;font-size:9px;color:#98a4b5}.transport-controls{display:grid;grid-template-columns:1.2fr .95fr;gap:7px;margin-top:14px}.play-button{grid-column:1/-1}.transport-controls .secondary-button:last-child{grid-column:1/-1}.board-panel{padding:21px 22px 17px;overflow:hidden}.board-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}.panel-kicker{font:500 9px 'DM Mono',monospace;color:#8a99ad;letter-spacing:1px;margin-bottom:4px}.board-head h2{font-size:17px;line-height:1.3}.state-pill{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;background:#f2f6fc;color:#68809f;border:1px solid #e1e9f4;border-radius:20px;padding:5px 9px;font-size:9px;font-weight:700}.state-pill span{width:6px;height:6px;border-radius:50%;background:#8da2bc}.state-pill.running{background:#eef5ff;color:#1a62cc;border-color:#d5e5ff}.state-pill.running span{background:#2e77e5;box-shadow:0 0 0 3px #d9e9ff}.state-pill.paused{background:#fff8e9;color:#9c7423;border-color:#f5e4b4}.state-pill.paused span{background:#d39b2d}.state-pill.done{background:#eefaf5;color:#188064;border-color:#d5f1e4}.state-pill.done span{background:#27a47f}.state-pill.error{background:#fff0ef;color:#b6433c}.state-pill.error span{background:#b6433c}.stats-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid #e8edf5;border-radius:8px;background:#f8fafc;margin-bottom:11px}.stat-box{padding:10px 11px;min-width:0}.stat-box+.stat-box{border-left:1px solid #e5ebf4}.stat-box span{display:block;font:500 8px 'DM Mono',monospace;color:#8795a9;letter-spacing:.35px;line-height:1.4;min-height:22px}.stat-box strong{display:block;color:#1d385e;font:700 20px Manrope,sans-serif;letter-spacing:-.4px;white-space:nowrap}.stat-box strong small{font:500 10px 'DM Mono',monospace;color:#9ba8b8;letter-spacing:0}.progress-track{height:4px;background:#edf1f7;border-radius:9px;overflow:hidden;margin-bottom:16px}.progress-bar{width:0%;height:100%;background:linear-gradient(90deg,#e94b3c,#f59b29,#daca32,#39a56e,#2c99d2,#5368d7,#9b59c5);border-radius:9px;transition:width .08s linear}.array-frame{border:1px solid #e5ebf4;border-radius:9px;background:linear-gradient(180deg,#fbfcfe,#fff);padding:12px 12px 10px;overflow:hidden}.array-topline,.array-bottomline{display:flex;align-items:center;justify-content:space-between;gap:8px;font:500 8px 'DM Mono',monospace;color:#9aa7b8;letter-spacing:.45px}.array-topline{margin-bottom:10px}.array-topline code{background:#eff3f8;color:#667b96;border-radius:3px;padding:3px 4px;font:inherit}.array-bottomline{margin-top:10px;letter-spacing:0;text-transform:none;font-size:8px}.array-bottomline span:nth-child(2){text-align:center;font-family:'DM Sans',sans-serif;letter-spacing:0}.array-bars{height:320px;display:flex;align-items:stretch;justify-content:stretch;gap:2px;padding:9px 1px 0;position:relative;overflow:hidden}.bar-slot{position:relative;flex:1 1 0;min-width:0;height:100%;display:flex;align-items:flex-end;justify-content:center;border-radius:3px 3px 0 0;transition:filter .08s}.bar{width:100%;height:var(--bar-height,20%);min-height:4px;border-radius:3px 3px 0 0;background:var(--bar-color,#398dcc);box-shadow:inset 0 1px 0 rgba(255,255,255,.34);transition:height .12s ease,background-color .12s linear,filter .12s,transform .12s;transform-origin:center bottom}.bar-slot.compare .bar{filter:saturate(1.35) brightness(1.06);box-shadow:0 0 0 2px #1a3152,0 4px 9px rgba(24,48,81,.17);transform:translateY(-3px);z-index:2}.bar-slot.swap .bar{box-shadow:0 0 0 2px #d36e25,0 4px 10px rgba(211,110,37,.2);transform:translateY(-5px);z-index:3}.bar-slot.write .bar{box-shadow:0 0 0 2px #188d78,0 4px 10px rgba(24,141,120,.2);transform:translateY(-4px);z-index:3}.bar-slot.pivot .bar{box-shadow:0 0 0 2px #7755c7;z-index:2}.bar-slot.inspect .bar{box-shadow:0 0 0 2px #6d86c2,0 3px 8px rgba(67,96,157,.18);transform:translateY(-2px);z-index:2}.bar-value{position:absolute;left:50%;bottom:calc(var(--bar-height,20%) + 3px);transform:translateX(-50%);font:500 8px 'DM Mono',monospace;color:#425572;white-space:nowrap;line-height:1;background:rgba(255,255,255,.86);border-radius:3px;padding:2px;pointer-events:none}.array-baseline{height:1px;background:#cfd9e7;margin:0 0 0}.color-key{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:15px 1px 16px}.color-key-text{max-width:290px;display:flex;flex-direction:column;gap:3px}.color-key-text strong{font-size:10px;color:#526782}.color-key-text span{font-size:9px;color:#8a98aa;line-height:1.5}.color-scale-wrap{width:min(48%,260px);flex:none}.color-scale{height:10px;border-radius:7px;background:linear-gradient(90deg,hsl(0 82% 55%),hsl(35 85% 55%),hsl(60 85% 52%),hsl(120 64% 42%),hsl(180 75% 42%),hsl(220 79% 55%),hsl(270 65% 56%),hsl(300 62% 53%));border:1px solid rgba(33,53,82,.07)}.color-scale-labels{display:flex;justify-content:space-between;gap:6px;color:#9aa6b6;font:8px 'DM Mono',monospace;margin-top:5px}.color-scale-labels span:nth-child(2){font-family:'DM Sans',sans-serif}.operation-card{border:1px solid #e3eaf4;border-radius:8px;background:#f8fafd;display:flex;gap:12px;align-items:center;padding:13px 13px;margin-top:3px}.operation-icon{width:32px;height:32px;border-radius:8px;background:#eaf1fc;color:#235dba;display:grid;place-items:center;font-size:16px;flex:none}.operation-copy{min-width:0;flex:1}.operation-copy>span{display:block;font:500 8px 'DM Mono',monospace;color:#8b99ac;letter-spacing:.7px;margin-bottom:3px}.operation-copy strong{display:block;font:700 12px Manrope,sans-serif;color:#25466f}.operation-copy p{font-size:10px;color:#7b8ca3;line-height:1.5;margin:3px 0 0}.algorithm-complexity{flex:none;border-left:1px solid #e0e7f0;padding-left:12px;font:700 10px 'DM Mono',monospace;color:#5e6fc1;text-align:right}.algorithm-complexity small{display:block;font:9px 'DM Sans',sans-serif;font-weight:500;color:#95a1b1;margin-top:4px}.board-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;font-size:9px;color:#8a98aa}.board-footer>span{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.board-footer a{color:#416da7;text-decoration:none;font-weight:700;white-space:nowrap}.legend-dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-left:5px}.legend-dot:first-child{margin-left:0}.compare-dot{background:#1a3152}.swap-dot{background:#d36e25}.write-dot{background:#188d78}.inspect-dot{background:#7188c5}.explain-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:17px;margin-top:18px}.explain-strip>div{display:flex;align-items:flex-start;gap:10px;background:rgba(255,255,255,.78);border:1px solid #e4eaf3;border-radius:9px;padding:15px}.explain-number{flex:none;display:grid;place-items:center;width:25px;height:25px;border-radius:6px;background:#edf4ff;color:#2862bd;font:700 10px 'DM Mono',monospace}.explain-strip strong{display:block;font:700 11px Manrope,sans-serif;color:#2b4568}.explain-strip p{font-size:9px;line-height:1.6;color:#8291a6;margin:5px 0 0}.viz-footer{display:flex;justify-content:space-between;gap:12px;padding:23px 2px 0;color:#a0acbc;font-size:9px}.viz-footer a{color:#5575a0;text-decoration:none}
@media(max-width:1120px){.viz-layout{grid-template-columns:minmax(275px,310px) minmax(0,1fr);gap:13px}.settings-panel{padding:17px 15px}.board-panel{padding:17px}.array-bars{height:270px}.stat-box{padding:8px}.stat-box strong{font-size:18px}.algorithm-complexity{display:none}}
@media(max-width:800px){.viz-page{padding:28px 16px 20px}.viz-layout{grid-template-columns:1fr}.settings-panel{order:2}.board-panel{order:1}.array-bars{height:310px}.explain-strip{grid-template-columns:1fr;gap:9px}.viz-topbar{padding:0 16px}.back-link{font-size:10px}.viz-hero{padding-bottom:20px}}
@media(max-width:520px){.viz-topbar{height:58px}.brand{font-size:11px;gap:7px}.brand-mark{width:24px;height:24px}.back-link{max-width:135px;text-align:right;line-height:1.3}.viz-hero h1{font-size:32px;letter-spacing:-1.1px}.board-panel{padding:14px 10px}.board-head{align-items:flex-start}.board-head h2{font-size:14px}.state-pill{font-size:8px;padding:4px 6px}.stats-row{grid-template-columns:repeat(2,minmax(0,1fr))}.stat-box:nth-child(3){border-left:0;border-top:1px solid #e5ebf4}.stat-box:nth-child(4){border-top:1px solid #e5ebf4}.array-frame{padding:8px 7px}.array-bars{height:245px;gap:1px;padding-left:0;padding-right:0}.bar-value{font-size:7px}.array-bottomline span:nth-child(2){display:none}.color-key{align-items:flex-start;flex-direction:column;gap:10px}.color-scale-wrap{width:100%}.operation-card{gap:8px;padding:10px}.operation-icon{width:27px;height:27px}.operation-copy p{font-size:9px}.transport-controls{grid-template-columns:1fr 1fr}.viz-footer{flex-direction:column}.two-controls{gap:7px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:0.01ms!important;animation-duration:0.01ms!important;scroll-behavior:auto!important}}