@import"https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap";:root{--bg: #0d0f14;--surface: #161a22;--surface-2: #1e2330;--surface-3: #252c3a;--border: rgba(255,255,255,.07);--border-hover: rgba(255,255,255,.15);--text: #e8eaf0;--text-muted: #6b7385;--text-dim: #3a4055;--accent: #6c8fff;--accent-glow: rgba(108,143,255,.25);--accent-2: #a78bfa;--compare: #f59e0b;--compare-glow: rgba(245,158,11,.3);--swap: #ec4899;--swap-glow: rgba(236,72,153,.3);--sorted: #10b981;--sorted-glow: rgba(16,185,129,.3);--pivot: #8b5cf6;--pivot-glow: rgba(139,92,246,.3);--highlight: #38bdf8;--radius-sm: 6px;--radius: 10px;--radius-lg: 16px;--font: "JetBrains Mono", monospace;--transition: .2s ease}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html,body,#root{width:100%;height:100%;overflow:hidden;background:var(--bg);color:var(--text);font-family:var(--font);font-size:13px}::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--surface-3);border-radius:2px}.app{position:relative;height:100%;width:100%}.sidebar-toggle{position:absolute;top:16px;left:16px;z-index:300;display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:var(--radius);border:1px solid var(--border);background:var(--surface);color:var(--text-muted);cursor:pointer!important;transition:border-color .2s ease,color .2s ease,background .2s ease;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 4px 20px #0006}.sidebar-toggle:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-glow)}.panel-toggle{position:absolute;top:16px;right:20px;z-index:250;display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:var(--radius);border:1px solid var(--border);background:var(--surface);color:var(--text-muted);cursor:pointer!important;transition:border-color .2s ease,color .2s ease,background .2s ease;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 4px 20px #0006}.panel-toggle:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-glow)}.sidebar{position:absolute;top:16px;left:16px;z-index:300;width:240px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:0 12px 48px #00000080;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);overflow:hidden;max-height:calc(100vh - 32px);display:flex;flex-direction:column}.sidebar__header{display:flex;align-items:center;justify-content:flex-end;padding:8px 10px;background:var(--surface-2);border-bottom:1px solid var(--border);cursor:move;-webkit-user-select:none;user-select:none;flex-shrink:0}.sidebar__logo{font-size:14px;font-weight:700;color:var(--accent);letter-spacing:-.5px}.sidebar__logo span{color:var(--text-muted);font-weight:400}.sidebar__close{display:flex;align-items:center;justify-content:center;background:none;border:none;color:var(--text-muted);cursor:pointer;padding:4px;border-radius:4px;transition:var(--transition)}.sidebar__close:hover{color:var(--swap);background:var(--swap-glow)}.sidebar__body{padding:12px;display:flex;flex-direction:column;gap:14px;overflow-y:auto;flex:1}.sidebar__section{display:flex;flex-direction:column;gap:6px}.sidebar__label{font-size:10px;font-weight:600;color:var(--text-dim);text-transform:uppercase;letter-spacing:.5px}.sidebar__row{display:flex;gap:6px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:6px 12px;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--surface-2);color:var(--text);font-family:var(--font);font-size:12px;cursor:pointer;transition:var(--transition);white-space:nowrap;-webkit-user-select:none;user-select:none}.btn--sm{padding:5px 10px;font-size:11px;flex:1}.btn:hover{border-color:var(--border-hover);background:var(--surface-3)}.btn.btn--active{border-color:var(--accent);color:var(--accent);background:var(--accent-glow)}.btn.btn--icon{padding:5px 8px}.btn.btn--play{border-color:var(--sorted);color:var(--sorted)}.btn.btn--play:hover{background:var(--sorted-glow)}.btn.btn--pause{border-color:var(--compare);color:var(--compare)}.btn.btn--pause:hover{background:var(--compare-glow)}.btn.btn--reset{border-color:var(--text-dim);color:var(--text-muted)}.btn.btn--reset:hover{border-color:var(--swap);color:var(--swap)}.btn:disabled{opacity:.35;cursor:not-allowed}.ctrl-select{padding:6px 28px 6px 10px;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--surface-2);color:var(--text);font-family:var(--font);font-size:12px;cursor:pointer;transition:var(--transition);appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%236b7385'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 6px center;background-size:16px;width:100%}.ctrl-select:hover{border-color:var(--border-hover);background-color:var(--surface-3)}.ctrl-select:focus{outline:none;border-color:var(--accent)}.speed-control{display:flex;align-items:center;gap:8px;color:var(--text-muted);font-size:11px}.speed-slider{-webkit-appearance:none;flex:1;height:4px;border-radius:2px;background:var(--surface-3);cursor:pointer}.speed-slider::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--accent);cursor:pointer;transition:var(--transition);box-shadow:0 0 8px var(--accent-glow)}.speed-slider::-webkit-slider-thumb:hover{transform:scale(1.2)}.ctrl-input{padding:6px 10px;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--surface-2);color:var(--text);font-family:var(--font);font-size:12px;width:100%;transition:var(--transition)}.ctrl-input::placeholder{color:var(--text-dim)}.ctrl-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-glow)}.canvas-workspace{width:100%;height:100%;position:relative;overflow:hidden;cursor:default}.canvas-inner{position:absolute;top:50%;left:50%;transform-origin:0 0;display:flex;align-items:center;justify-content:center}.canvas-workspace:before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle,var(--surface-2) 1px,transparent 1px);background-size:32px 32px;opacity:.4;pointer-events:none;z-index:0}.sorting-visualizer{display:flex;align-items:flex-end;justify-content:center;padding:40px 48px;background:var(--surface);border-radius:var(--radius-lg);border:1px solid var(--border);min-width:500px;min-height:360px;box-shadow:0 20px 60px #00000080}.sorting-visualizer:has(.empty-state){align-items:center}.sort-element{display:flex;flex-direction:column;align-items:center;gap:6px;transition:transform .35s cubic-bezier(.4,0,.2,1)}.sort-element__label{font-size:11px;color:var(--text-muted);transition:color .3s ease}.sort-element__bar{width:42px;border-radius:6px;background:var(--accent);transition:height .35s cubic-bezier(.4,0,.2,1),background .3s ease,box-shadow .3s ease,transform .35s cubic-bezier(.4,0,.2,1)}.sort-element__circle{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;background:var(--surface-3);border:2px solid var(--accent);transition:background .3s ease,border-color .3s ease,box-shadow .3s ease,transform .35s cubic-bezier(.4,0,.2,1)}.sort-element__square{width:52px;height:52px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;background:var(--surface-3);border:2px solid var(--accent);transition:background .3s ease,border-color .3s ease,box-shadow .3s ease,transform .35s cubic-bezier(.4,0,.2,1)}.sort-element__cell{width:52px;height:52px;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:600;border-left:2px solid var(--border);border-top:2px solid var(--border);border-bottom:2px solid var(--border);transition:background .3s ease,border-color .3s ease,transform .35s cubic-bezier(.4,0,.2,1)}.sort-element__cell:last-child{border-right:2px solid var(--border)}.sort-element.state-compare .sort-element__bar,.sort-element.state-compare .sort-element__circle,.sort-element.state-compare .sort-element__square,.sort-element.state-compare .sort-element__cell{background:var(--compare-glow);border-color:var(--compare);box-shadow:0 0 16px var(--compare-glow),0 0 4px var(--compare-glow)}.sort-element.state-compare .sort-element__bar{background:var(--compare)}.sort-element.state-compare .sort-element__label{color:var(--compare)}.sort-element.state-swap .sort-element__bar,.sort-element.state-swap .sort-element__circle,.sort-element.state-swap .sort-element__square,.sort-element.state-swap .sort-element__cell{background:var(--swap-glow);border-color:var(--swap);box-shadow:0 0 16px var(--swap-glow),0 0 4px var(--swap-glow)}.sort-element.state-swap .sort-element__bar{background:var(--swap)}.sort-element.state-swap .sort-element__label{color:var(--swap)}.sort-element.state-sorted .sort-element__bar,.sort-element.state-sorted .sort-element__circle,.sort-element.state-sorted .sort-element__square,.sort-element.state-sorted .sort-element__cell{background:var(--sorted-glow);border-color:var(--sorted);box-shadow:0 0 12px var(--sorted-glow)}.sort-element.state-sorted .sort-element__bar{background:var(--sorted)}.sort-element.state-sorted .sort-element__label{color:var(--sorted)}.sort-element.state-pivot .sort-element__bar,.sort-element.state-pivot .sort-element__circle,.sort-element.state-pivot .sort-element__square,.sort-element.state-pivot .sort-element__cell{background:var(--pivot-glow);border-color:var(--pivot);box-shadow:0 0 16px var(--pivot-glow),0 0 4px var(--pivot-glow)}.sort-element.state-pivot .sort-element__bar{background:var(--pivot)}.sort-element.state-pivot .sort-element__label{color:var(--pivot)}.sort-element.state-highlight .sort-element__bar,.sort-element.state-highlight .sort-element__circle,.sort-element.state-highlight .sort-element__square,.sort-element.state-highlight .sort-element__cell{border-color:var(--highlight);box-shadow:0 0 12px #38bdf84d}.sort-element.state-highlight .sort-element__label{color:var(--highlight)}.floating-panel{position:absolute;top:16px;right:20px;width:320px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:0 20px 60px #0009;z-index:200;overflow:hidden;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}.floating-panel__header{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;background:var(--surface-2);border-bottom:1px solid var(--border);cursor:move;-webkit-user-select:none;user-select:none}.floating-panel__title{font-size:11px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px}.floating-panel__close{background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:16px;line-height:1;padding:0 2px;transition:var(--transition);border-radius:4px}.floating-panel__close:hover{color:var(--swap);background:var(--swap-glow)}.floating-panel__body{padding:14px;display:flex;flex-direction:column;align-items:center;gap:12px}.panel-stat{display:flex;align-items:center;justify-content:space-between;width:100%}.panel-stat__label{font-size:10px;color:var(--text-muted)}.panel-stat__value{font-size:11px;font-weight:600;color:var(--accent)}.panel-stat__value.done{color:var(--sorted)}.panel-step-log{max-height:180px;overflow-y:auto;display:flex;flex-direction:column;gap:8px;width:100%}.panel-step-entry{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--text-muted);padding:6px 10px;border-radius:var(--radius-sm);background:var(--surface-2);border-left:2px solid var(--border);line-height:1.5;transition:var(--transition)}.panel-step-entry .tag{flex-shrink:0;font-size:7.5px;min-width:44px;padding:1px 5px}.panel-step-entry.active{color:var(--text);border-left-color:var(--accent);background:var(--surface-3)}.recursion-visualizer{display:block;padding:24px;background:var(--surface);border-radius:var(--radius-lg);border:1px solid var(--border);min-width:500px;min-height:360px;box-shadow:0 20px 60px #00000080;overflow:auto}.recursion-level{display:flex;align-items:flex-start;justify-content:center;gap:12px;flex-wrap:wrap}.recursion-node{display:flex;flex-direction:column;align-items:center}.recursion-node__box{border-radius:var(--radius);border:1px solid var(--border);background:var(--surface-2);font-size:11px;color:var(--text-muted);transition:border-color .3s ease,background .3s ease,box-shadow .3s ease,color .3s ease;width:148px;overflow:hidden}.recursion-node__header{display:flex;align-items:center;justify-content:center;gap:6px;padding:6px 10px;font-weight:600;white-space:nowrap}.recursion-node__label{color:inherit}.recursion-node__value{color:var(--accent);font-size:10px}.recursion-node__sections{border-top:1px solid var(--border);transition:border-color .3s ease}.recursion-node__section{display:flex;align-items:center;gap:5px;padding:3px 8px;font-size:9px;color:var(--text-muted);transition:background .3s ease,color .3s ease;white-space:nowrap}.recursion-node__section+.recursion-node__section{border-top:1px solid var(--border)}.recursion-node__section-tag{font-weight:700;text-transform:uppercase;font-size:8px;letter-spacing:.04em;opacity:.6;min-width:22px}.recursion-node__section--active{background:var(--accent-glow);color:var(--accent)}.recursion-node.status-active .recursion-node__box{border-color:var(--accent);color:var(--accent);background:var(--accent-glow);box-shadow:0 0 12px var(--accent-glow)}.recursion-node.status-active .recursion-node__sections{border-color:#60a5fa33}.recursion-node.status-returned .recursion-node__box{border-color:var(--sorted);color:var(--sorted);background:var(--sorted-glow)}.recursion-node.status-returned .recursion-node__value{color:var(--sorted)}.recursion-node.status-returned .recursion-node__sections{border-color:#10b98133}.recursion-node.status-returning .recursion-node__box{animation:pulse-return .5s ease;border-color:var(--sorted);color:var(--sorted);background:var(--sorted-glow);box-shadow:0 0 16px var(--sorted-glow)}.recursion-node.status-returning .recursion-node__value{color:var(--sorted)}@keyframes pulse-return{0%{transform:scale(1);box-shadow:0 0 #10b98100}50%{transform:scale(1.06);box-shadow:0 0 20px #10b98166}to{transform:scale(1);box-shadow:0 0 16px var(--sorted-glow)}}.recursion-lines{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0;overflow:visible}.recursion-level{z-index:1}.recursion-line{stroke:var(--border);stroke-width:2;stroke-linecap:round;transition:stroke .3s ease,stroke-width .3s ease,stroke-opacity .3s ease;stroke-opacity:.6;fill:none}.recursion-line--drawing{stroke:var(--accent);stroke-width:2.5;stroke-opacity:1;filter:drop-shadow(0 0 4px var(--accent));animation:drawLine .45s cubic-bezier(.4,0,.2,1) forwards}@keyframes drawLine{0%{stroke-dashoffset:var(--line-len, 9999)}to{stroke-dashoffset:0}}.recursion-line--calling{stroke:var(--accent);stroke-width:2.5;stroke-opacity:1;filter:drop-shadow(0 0 3px var(--accent))}.recursion-line--returned{stroke:var(--sorted);stroke-opacity:.45}.recursion-line--active{stroke:var(--sorted);stroke-width:3;stroke-opacity:1;filter:drop-shadow(0 0 4px var(--sorted))}.recursion-dot{fill:var(--border);transition:fill .3s ease}.recursion-dot--active{fill:var(--accent)}.recursion-dot--returned{fill:var(--sorted)}.return-bubble__glow{fill:#10b9811f;filter:blur(6px)}.return-bubble__bg{fill:#10b9812e;stroke:#10b98166;stroke-width:1}.return-bubble__circle{fill:var(--sorted);filter:drop-shadow(0 0 8px var(--sorted)) drop-shadow(0 0 14px rgba(16,185,129,.5))}.return-bubble__text{fill:#fff;font-size:11px;font-weight:800;text-anchor:middle;dominant-baseline:central;letter-spacing:-.03em}.return-bubble__trail{fill:var(--sorted)}.empty-state{display:flex;flex-direction:column;align-items:center;gap:12px;color:var(--text-dim);text-align:center}.empty-state__icon{font-size:40px;opacity:.4}.empty-state__text{font-size:12px;line-height:1.6;max-width:240px}.visualizer-wrapper{display:flex;flex-direction:column;align-items:stretch}.progress-header{padding:8px 16px 10px;background:var(--surface-2);border:1px solid var(--border);border-bottom:none;border-radius:var(--radius-lg) var(--radius-lg) 0 0;min-width:500px}.progress-header__info{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}.progress-header__left{display:flex;align-items:center;gap:8px}.progress-header__status{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;padding:2px 7px;border-radius:4px;line-height:1}.progress-header__status--idle{color:var(--text-muted);background:var(--surface-3)}.progress-header__status--playing{color:#34d399;background:#34d3991a}.progress-header__status--paused{color:#fbbf24;background:#fbbf241a}.progress-header__status--done{color:var(--accent);background:var(--accent-glow)}.progress-header__step-type{font-size:10px;color:var(--text-muted);font-style:italic}.progress-header__right{display:flex;align-items:center;gap:10px}.progress-header__counter{font-size:11px;color:var(--text);font-variant-numeric:tabular-nums;font-weight:500}.progress-header__sep{color:var(--text-dim);margin:0 1px}.progress-header__pct{font-size:10px;color:var(--text-muted);font-variant-numeric:tabular-nums;min-width:30px;text-align:right}.progress-header__track{position:relative;height:4px;background:var(--surface-3);border-radius:2px;overflow:visible}.progress-header__fill{height:100%;border-radius:2px;transition:width .3s ease}.progress-header__fill--idle{background:var(--surface-3)}.progress-header__fill--playing{background:linear-gradient(90deg,var(--accent),#34d399);box-shadow:0 0 8px var(--accent-glow)}.progress-header__fill--paused{background:#fbbf24;box-shadow:0 0 6px #fbbf2433}.progress-header__fill--done{background:linear-gradient(90deg,var(--accent),#a78bfa);box-shadow:0 0 8px var(--accent-glow)}.progress-header__thumb{position:absolute;top:50%;width:8px;height:8px;background:#fff;border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 4px #0006;transition:left .3s ease}.visualizer-wrapper .sorting-visualizer,.visualizer-wrapper .recursion-visualizer{border-top-left-radius:0;border-top-right-radius:0}.algo-info{font-size:11px;color:var(--text-muted);line-height:1.6;padding:8px;background:var(--surface-2);border-radius:var(--radius-sm);width:100%;text-align:center}.algo-info strong{color:var(--accent)}.tag{display:inline-flex;align-items:center;justify-content:center;padding:1px 6px;border-radius:999px;font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:.03em;min-width:52px;text-align:center;background:var(--surface-3);color:var(--text-muted);border:1px solid var(--border)}.tag.compare{background:var(--compare-glow);color:var(--compare);border-color:var(--compare)}.tag.swap{background:var(--swap-glow);color:var(--swap);border-color:var(--swap)}.tag.sorted{background:var(--sorted-glow);color:var(--sorted);border-color:var(--sorted)}.tag.pivot{background:var(--pivot-glow);color:var(--pivot);border-color:var(--pivot)}.tag.done{background:var(--sorted-glow);color:var(--sorted);border-color:var(--sorted)}@media(max-width:1023px){.sidebar{width:220px;max-height:calc(100vh - 24px)}.step-log-panel,.step-log{width:260px;min-width:200px}}@media(max-width:767px){.canvas-root,.visualizer-wrapper,.visualizer-area{width:100vw;height:100svh;overflow:hidden;touch-action:none}.recursion-node__box{width:118px;font-size:10px}.recursion-node__header{padding:4px 6px;font-size:10px}.recursion-node__section{padding:3px 6px;font-size:9px}.recursion-node__section-tag{font-size:8px;padding:1px 4px;min-width:28px}.step-log-panel,.step-log{display:none}.sidebar{position:fixed!important;transform:none!important;inset:auto 0 0!important;width:100%!important;max-width:100%;border-radius:16px 16px 0 0;max-height:70svh;overflow-y:auto;border-top:1px solid var(--border);box-shadow:0 -8px 40px #00000080}.sidebar__header{justify-content:center;cursor:grab;padding:10px 14px 6px;position:relative}.sidebar__header:before{content:"";position:absolute;top:6px;left:50%;transform:translate(-50%);width:36px;height:4px;border-radius:2px;background:var(--border)}.sidebar__close{position:absolute;right:12px;top:50%;transform:translateY(-50%)}.sidebar__body{padding:10px 12px 20px;display:grid;grid-template-columns:1fr 1fr;gap:10px}.sidebar__section:last-child{grid-column:1 / -1}.btn{min-height:36px;padding:6px 10px;font-size:12px}.ctrl-select,.ctrl-input{height:36px;font-size:12px}.sidebar-toggle{position:fixed!important;inset:auto 20px 20px auto!important;transform:none!important;width:48px;height:48px;border-radius:50%;box-shadow:0 4px 20px #00000080}.speed-slider-wrap{margin-top:6px}}@media(max-width:480px){.recursion-node__box{width:104px}.recursion-node__header{font-size:9px}.recursion-node__section{font-size:8px}.sidebar__body{grid-template-columns:1fr}.sidebar__section:last-child{grid-column:1}}