@import"https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;600;700&family=Outfit:wght@300;400;500;600;700&display=swap";:root{--bg-void: #07070e;--bg-surface: #0d0d18;--bg-raised: #13132a;--bg-input: #0a0a1a;--border: rgba(100, 220, 255, .08);--border-active: rgba(100, 220, 255, .2);--accent: #3df0d0;--accent-dim: rgba(61, 240, 208, .15);--accent-glow: rgba(61, 240, 208, .4);--amber: #f0b840;--amber-dim: rgba(240, 184, 64, .15);--rose: #f06080;--rose-dim: rgba(240, 96, 128, .12);--text: #d8dce6;--text-muted: #5a6080;--text-bright: #f0f2f8;--mono: "JetBrains Mono", monospace;--sans: "Outfit", sans-serif;--radius: 10px;--radius-sm: 6px;--transition: .18s ease}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}body{font-family:var(--sans);background:var(--bg-void);color:var(--text);min-height:100vh;-webkit-font-smoothing:antialiased;overflow-x:hidden}body:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;background:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");background-size:256px 256px;pointer-events:none;z-index:0}.app{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;min-height:100vh;padding:2rem 1.5rem;gap:1.5rem}.loader{display:flex;flex-direction:column;align-items:center;gap:1.2rem;margin-top:30vh;color:var(--text-muted);font-family:var(--mono);font-size:.85rem;letter-spacing:.05em}.loader-ring{width:36px;height:36px;border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.error-state{margin-top:30vh;color:var(--rose);font-family:var(--mono);font-size:.9rem}.header{text-align:center;animation:fadeDown .6s ease both}.title{font-family:var(--mono);font-size:1.8rem;font-weight:700;letter-spacing:-.02em;color:var(--text-bright)}.title-glyph{color:var(--accent);margin-right:.4rem;font-size:.7em;vertical-align:middle}.title-accent{color:var(--accent)}.subtitle{font-size:.8rem;color:var(--text-muted);letter-spacing:.12em;text-transform:uppercase;margin-top:.3rem;font-weight:300}.main{display:flex;flex-direction:column;align-items:center;gap:1.2rem;width:100%;max-width:520px;animation:fadeUp .5s ease .15s both}.algorithm-info{display:flex;flex-direction:column;align-items:center;gap:.5rem;width:100%}.algo-name{font-family:var(--mono);font-size:1.1rem;font-weight:600;color:var(--text-bright);letter-spacing:-.01em}.algo-stats{display:flex;align-items:center;gap:.75rem;font-size:.75rem;font-family:var(--mono)}.status-badge{padding:.2em .6em;border-radius:4px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;font-size:.65rem;transition:var(--transition)}.status-idle{background:var(--border);color:var(--text-muted)}.status-running{background:var(--accent-dim);color:var(--accent);animation:pulse-badge 1.5s ease infinite}.status-paused{background:var(--amber-dim);color:var(--amber)}.status-sorted{background:var(--accent-dim);color:var(--accent)}.step-count{color:var(--text-muted)}.play-all-badge{background:var(--rose-dim);color:var(--rose);padding:.2em .5em;border-radius:4px;font-weight:600;font-size:.65rem;letter-spacing:.04em}@keyframes pulse-badge{0%,to{opacity:1}50%{opacity:.6}}.canvas-wrapper{position:relative;display:flex;justify-content:center;padding:1.5rem}.canvas-glow{position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(ellipse 60% 60% at center,rgba(61,240,208,.06) 0%,transparent 70%);pointer-events:none;transition:opacity .4s ease}canvas{display:block;background:#fff;box-shadow:0 0 0 1px var(--border),0 8px 40px #0006,0 0 80px #3df0d00a;transition:box-shadow .3s ease}canvas:hover{box-shadow:0 0 0 1px var(--border-active),0 8px 40px #00000080,0 0 100px #3df0d012}.controls{width:100%;display:flex;flex-direction:column;gap:.75rem}.controls-row{display:flex;align-items:center;gap:.5rem;justify-content:center}select{-webkit-appearance:none;-moz-appearance:none;appearance:none;font-family:var(--mono);font-size:.78rem;font-weight:500;color:var(--text);background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius-sm);padding:.55em 2em .55em .8em;cursor:pointer;transition:var(--transition);background-image:url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%235a6080' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .7em center;min-width:170px}select:hover{border-color:var(--border-active)}select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-dim)}select:disabled{opacity:.4;cursor:not-allowed}.btn{font-family:var(--mono);font-size:.78rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;border:1px solid var(--border);border-radius:var(--radius-sm);padding:.55em 1.2em;cursor:pointer;transition:all var(--transition);background:var(--bg-input);color:var(--text)}.btn:hover:not(:disabled){border-color:var(--border-active);transform:translateY(-1px)}.btn:active:not(:disabled){transform:translateY(0)}.btn:disabled{opacity:.3;cursor:not-allowed}.btn-play{background:var(--accent-dim);color:var(--accent);border-color:#3df0d033}.btn-play:hover:not(:disabled){background:#3df0d038;border-color:#3df0d059;box-shadow:0 0 20px #3df0d01a}.btn-pause{background:var(--amber-dim);color:var(--amber);border-color:#f0b84033}.btn-pause:hover:not(:disabled){background:#f0b84033;border-color:#f0b84059}.btn-reset{color:var(--text-muted)}.btn-reset:hover:not(:disabled){color:var(--rose);border-color:#f0608033}.speed-row{justify-content:center}.speed-row label{display:flex;align-items:center;gap:.6rem;font-family:var(--mono);font-size:.7rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.08em}input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:140px;height:4px;background:var(--bg-raised);border-radius:2px;outline:none;cursor:pointer}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--accent);border:2px solid var(--bg-void);box-shadow:0 0 8px var(--accent-glow);transition:var(--transition)}input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.2);box-shadow:0 0 14px var(--accent-glow)}input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--accent);border:2px solid var(--bg-void);box-shadow:0 0 8px var(--accent-glow)}.footer{margin-top:auto;padding-top:2rem;font-family:var(--mono);font-size:.65rem;color:var(--text-muted);letter-spacing:.08em;display:flex;align-items:center;gap:.5rem;animation:fadeUp .5s ease .3s both}.footer-dot{width:5px;height:5px;border-radius:50%;background:var(--accent);opacity:.5}@keyframes fadeDown{0%{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeUp{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@media(max-width:500px){.app{padding:1.2rem 1rem}.title{font-size:1.4rem}canvas{border-radius:6px!important}.controls-row{flex-wrap:wrap}select{min-width:140px;font-size:.72rem}.btn{font-size:.72rem;padding:.5em .9em}}