:root{color-scheme:dark;--bg:var(--theme-bg);--panel:var(--theme-panel);--line:var(--theme-line);--text:var(--theme-text);--muted:var(--theme-muted);--accent:var(--theme-accent);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-synthesis:none}*{box-sizing:border-box}body{margin:0;color:var(--text);background:radial-gradient(ellipse at 85% 0%,color-mix(in srgb,var(--theme-active) 19%,transparent),transparent 50%),var(--bg);-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}a:hover{color:var(--accent)}button,select,input{font:inherit}button,select{background:var(--theme-control);border:1px solid var(--theme-border);color:#d8e7fc;border-radius:8px;min-height:44px;padding:10px 13px}button{cursor:pointer;transition:background .15s,border-color .15s}button:hover{background:var(--theme-line);border-color:#678bbd}button:disabled{opacity:.4;cursor:default}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--theme-strong);outline-offset:5px}header{height:84px;max-width:1520px;margin:auto;padding:0 54px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid color-mix(in srgb,var(--theme-line) 44%,transparent);font-size:12px;color:#a5bbdb}.brand{display:flex;align-items:center;gap:14px;color:#94beff;font-size:25px}.brand span{font-size:11px;font-weight:650;letter-spacing:1.5px;color:#e5efff}main{max-width:1520px;margin:auto;padding:0 54px}.intro{display:flex;align-items:center;justify-content:space-between;margin:43px 0 30px;gap:20px}.eyebrow,.intro-tag,.section-label,.status,.code-tag,.stats>div>span,.visual-footer,.code-footer{font-family:ui-monospace,monospace}.eyebrow{font-size:10px;letter-spacing:2px;color:#89acdf;margin:0 0 15px}h1{font-size:clamp(30px,3.5vw,44px);font-weight:550;letter-spacing:-1.7px;margin:0}h1>span{color:var(--accent)}.intro p:last-child{font-size:13px;color:var(--muted);margin:13px 0 0}.intro-tag{font-size:10px;letter-spacing:1px;color:#89a4c8;padding:12px 15px;border:1px solid var(--theme-active);border-radius:6px}.toolbar{display:flex;align-items:flex-end;flex-wrap:wrap;gap:22px;padding:23px 25px;background:var(--theme-panel);border:1px solid var(--line);border-radius:14px;margin-bottom:24px}.toolbar label{display:flex;flex-direction:column;gap:12px;font-size:10px;color:#a0b7d6}.algorithm-control{flex:1;min-width:175px}.preset-control{width:134px}.toolbar select{font-size:12px;width:100%}.range-control{position:relative;width:120px}.range-control output{position:absolute;top:0;right:0;color:#d0e3ff;font:10px ui-monospace,monospace}.toolbar input{accent-color:var(--theme-strong);width:100%;height:44px;margin:0;cursor:pointer}.speed-control{width:150px}.play-controls{display:flex;gap:8px}.play-controls button{min-width:44px;font-size:18px}.play-controls .primary{display:flex;align-items:center;justify-content:center;gap:9px;min-width:102px;background:var(--theme-accent);color:var(--theme-control);border-color:#bcd9ff;font-size:12px;font-weight:650}.play-controls .primary:hover{background:#c4dfff}.studio{display:grid;grid-template-columns:minmax(0,1fr) 355px;gap:24px;align-items:stretch}.panel{background:linear-gradient(140deg,color-mix(in srgb,var(--theme-line) 17%,transparent),transparent 60%),var(--panel);border:1px solid var(--line);border-radius:15px;overflow:hidden;box-shadow:0 12px 40px color-mix(in srgb,var(--theme-bg) 15%,transparent)}.panel-top{display:flex;align-items:center;justify-content:space-between;padding:24px 27px;gap:18px}.section-label{font-size:10px;color:#9eb8df;letter-spacing:1px}.status,.code-tag{font-size:9px;letter-spacing:1px;color:#a7ccff;background:color-mix(in srgb,var(--theme-line) 31%,transparent);border:1px solid var(--theme-border);border-radius:5px;padding:7px 9px}.array-scroll{overflow-x:auto;margin:2px 27px 0;scrollbar-width:thin;scrollbar-color:#446993 var(--theme-deep);padding-bottom:8px}.array-stage{width:100%;min-width:calc(var(--count,24)*30px)}#bars{width:100%;height:310px;display:block}.values,.indices{display:grid;grid-template-columns:repeat(var(--count,24),minmax(0,1fr));font-family:ui-monospace,monospace}.values{border:1px solid var(--theme-border);border-radius:6px;overflow:hidden;margin-top:12px}.values>span{height:40px;display:flex;align-items:center;justify-content:center;border-right:1px solid var(--theme-border);color:#bcd1ef;font-size:11px;background:var(--theme-control)}.values>span:last-child{border-right:0}.values>span.compare{background:#54402b;color:#ffe0aa}.values>span.write{background:var(--theme-border);color:#eef6ff}.values>span.sorted{background:var(--theme-line);color:#a0e5f3}.indices{padding-top:9px;font-size:9px;color:#6f8aae;text-align:center}.visual-footer{display:flex;justify-content:space-between;align-items:center;gap:15px;padding:22px 27px 25px;font-size:9px;color:#809abd}.legend{display:flex;flex-wrap:wrap;gap:17px}.legend>span{display:flex;align-items:center;gap:7px}.legend i{width:6px;height:6px;border-radius:2px}.idle{background:#5477a7}.compare{background:#efba76}.write{background:#bedcff}.sorted{background:#74cadb}#scroll-hint{font-size:8px;white-space:nowrap;letter-spacing:.5px}.stats{display:grid;grid-template-columns:repeat(4,1fr);padding:25px 27px 28px;gap:15px;background:var(--theme-deep);border-top:1px solid var(--line)}.stats>div>span{font-size:8px;letter-spacing:.8px;color:#87a1c7}.stats strong{display:block;font:23px ui-monospace,monospace;font-weight:400;margin-top:12px;color:#d1e5ff}.stats strong span{font-size:12px;color:#7798c2;margin-left:4px}.code{display:flex;flex-direction:column}.code h2{font-size:21px;font-weight:500;margin:0;padding:3px 27px 21px;letter-spacing:-.5px;line-height:1.4}.complexity{display:flex;gap:25px;flex-wrap:wrap;padding:0 27px 24px;color:#849fc5;font-size:10px}.complexity b{font-weight:400;color:#bed4f4;margin-left:6px;font-family:ui-monospace,monospace}#code-lines{list-style:none;counter-reset:line;padding:19px 0;margin:0;background:var(--theme-deep);border-top:1px solid var(--theme-line);border-bottom:1px solid var(--theme-line)}#code-lines li{counter-increment:line;display:flex;gap:15px;font:11px/1.8 ui-monospace,monospace;color:#95aecf;white-space:pre-wrap;padding:11px 23px;border-left:3px solid transparent;overflow-wrap:anywhere}#code-lines li::before{content:counter(line,decimal-leading-zero);flex-shrink:0;font-size:9px;color:#58749a;padding-top:2px}#code-lines li.active{background:var(--theme-line);border-left-color:#9dc9ff;color:#e2efff}#code-lines li.active::before{color:#a1c7f7}#algorithm-note{padding:23px 27px;font-size:10px;line-height:1.9;color:#8ca5c9;margin:0}#algorithm-note:empty{display:none}.code-footer{padding:23px 27px;display:flex;justify-content:space-between;align-items:center;margin-top:auto;font-size:9px;color:#819dc4}.code-footer>span:last-child{font-size:20px;color:#9abbec}footer{display:flex;justify-content:space-between;gap:20px;padding:29px 0 34px;font-size:10px;color:#819abb;line-height:1.8}kbd{font:9px ui-monospace,monospace;border:1px solid var(--theme-border);padding:4px 6px;border-radius:4px;background:var(--theme-control);color:#a3bbdd}.separator{margin:0 10px}@media(min-width:1500px){#bars{height:350px}}@media(max-width:1200px){header,main{padding-left:32px;padding-right:32px}.toolbar{gap:18px}.studio{grid-template-columns:minmax(0,1fr) 310px}.speed-control{width:130px}.range-control{width:95px}.play-controls{margin-left:auto}}@media(max-width:900px){.studio{grid-template-columns:1fr}.code h2{padding-bottom:17px}#code-lines{display:grid;grid-template-columns:1fr}#bars{height:290px}.intro-tag{font-size:9px}.toolbar .algorithm-control{flex-basis:45%;min-width:0}.preset-control{flex:1}.range-control,.speed-control{width:130px}.play-controls{margin-left:auto}.code-footer{margin-top:0}}@media(max-width:600px){header{height:70px;padding:0 21px}.brand{font-size:23px;gap:10px}.brand span{font-size:9px;letter-spacing:1px}header>a:last-child{font-size:11px}main{padding:0 18px}.intro{margin:32px 0 25px}.intro-tag{display:none}h1{font-size:33px;letter-spacing:-1px}.intro p:last-child{font-size:12px}.toolbar{padding:21px 20px;gap:20px 16px;border-radius:12px}.toolbar .algorithm-control{flex-basis:54%}.toolbar select{font-size:11px;padding-left:10px}.range-control,.speed-control{width:calc(50% - 8px)}.play-controls{margin-left:0;width:100%;gap:10px}.play-controls button{flex:1}.play-controls .primary{flex:2}.studio{gap:20px}.panel-top{padding:23px 21px}.section-label{font-size:9px}.array-scroll{margin:0 21px}#bars{height:260px}.array-stage{min-width:calc(var(--count,24)*27px)}.values>span{height:37px;font-size:10px}.visual-footer{padding:19px 21px 22px;align-items:flex-start}.legend{gap:13px;font-size:8px}#scroll-hint{display:none}.stats{padding:23px 21px;gap:14px}.stats>div>span{font-size:7px;letter-spacing:.35px}.stats strong{font-size:19px}.code h2{padding:0 23px 20px;font-size:20px}.complexity{padding:0 23px 23px}#code-lines li{font-size:10px;padding:11px 19px;gap:12px}.code-footer,#algorithm-note{padding:22px 23px}footer{flex-direction:column;gap:17px;padding:27px 3px;font-size:10px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

@media(max-width:600px){.toolbar .algorithm-control{flex:0 1 calc(60% - 8px)}.toolbar .preset-control{flex:0 1 calc(40% - 8px);width:auto;min-width:0}}