@import"https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;600&display=swap";:root{--bg-deep: #0a0c14;--bg-base: #0f1220;--bg-surface: #141828;--bg-raised: #1b2035;--bg-overlay: rgba(20, 24, 40, .96);--neon-gold: #f5c842;--neon-aqua: #00e5c8;--neon-coral: #ff5f6d;--neon-violet: #b06aff;--neon-sky: #3ab5ff;--grad-primary: linear-gradient(135deg, #f5c842 0%, #ff8c42 55%, #ff5f6d 100%);--grad-aqua: linear-gradient(135deg, #00e5c8 0%, #3ab5ff 100%);--grad-violet: linear-gradient(135deg, #b06aff 0%, #ff5f6d 100%);--grad-bar: linear-gradient(180deg, #3ab5ff 0%, #1a6fcc 100%);--grad-header: linear-gradient(110deg, #f5c842 0%, #ff8c42 40%, #ff5f6d 75%, #b06aff 100%);--text-primary: #f0f2ff;--text-secondary: #8891b4;--text-muted: #505878;--border-subtle: rgba(255, 255, 255, .06);--glow-gold: 0 0 18px rgba(245, 200, 66, .35), 0 0 40px rgba(245, 200, 66, .12);--glow-aqua: 0 0 18px rgba(0, 229, 200, .35), 0 0 40px rgba(0, 229, 200, .12);--glow-coral: 0 0 18px rgba(255, 95, 109, .4);--shadow-card: 0 8px 32px rgba(0, 0, 0, .5), 0 1px 0 rgba(255,255,255,.04) inset;--shadow-btn: 0 4px 20px rgba(0, 0, 0, .5);--r-sm: 8px;--r-md: 14px;--r-lg: 20px;--r-xl: 26px}*,*:before,*:after{box-sizing:border-box}body{margin:0;font-family:Outfit,Segoe UI,sans-serif;background-color:var(--bg-deep);background-image:radial-gradient(ellipse 80% 50% at 20% -10%,rgba(245,200,66,.07) 0%,transparent 60%),radial-gradient(ellipse 60% 40% at 80% 110%,rgba(58,181,255,.07) 0%,transparent 60%),radial-gradient(ellipse 40% 30% at 60% 50%,rgba(176,106,255,.04) 0%,transparent 60%);background-attachment:fixed;color:var(--text-primary);min-height:100vh;-webkit-font-smoothing:antialiased}.container{max-width:1200px;margin:auto;padding:40px 24px}.header{text-align:center;margin-bottom:36px}.header h1{font-size:clamp(2em,5vw,3.2em);font-weight:900;letter-spacing:0px;background:var(--grad-header);background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent;margin:0 0 10px;line-height:1.15;filter:drop-shadow(0 0 24px rgba(245,200,66,.2))}.header p{color:var(--text-secondary);font-size:1.05em;font-weight:400;letter-spacing:.02em}.controls{background:var(--bg-raised);border:1px solid var(--border-subtle);border-radius:var(--r-xl);box-shadow:var(--shadow-card);padding:26px 28px;display:flex;flex-wrap:wrap;gap:22px;justify-content:space-between;margin-bottom:20px}.control-group{display:flex;flex-direction:column;min-width:160px;flex:1}.control-group label{color:var(--text-secondary);font-weight:600;font-size:.82em;letter-spacing:.08em;text-transform:uppercase;margin-bottom:10px}select,input[type=range]{padding:11px 14px;border-radius:var(--r-sm);border:1px solid var(--border-subtle);background:var(--bg-surface);color:var(--text-primary);font-size:.95em;font-family:Outfit,sans-serif;transition:border-color .25s,box-shadow .25s;-moz-appearance:none;appearance:none;-webkit-appearance:none}select{cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238891b4' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:36px}select:focus,input[type=range]:focus{outline:none;border-color:#f5c84266;box-shadow:0 0 0 3px #f5c8421a}input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;height:6px;padding:0;border-radius:100px;background:linear-gradient(90deg,var(--neon-gold) var(--val, 50%),var(--bg-deep) var(--val, 50%));cursor:pointer}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:var(--neon-gold);box-shadow:var(--glow-gold);border:2px solid var(--bg-surface);cursor:grab;transition:transform .15s}input[type=range]::-webkit-slider-thumb:active{cursor:grabbing;transform:scale(1.2)}.button-group{display:flex;gap:12px;align-items:flex-end}button{padding:12px 26px;border-radius:var(--r-md);border:none;cursor:pointer;font-family:Outfit,sans-serif;font-weight:700;font-size:.95em;letter-spacing:.02em;background:linear-gradient(135deg,var(--neon-sky) 0%,var(--neon-violet) 100%);color:#fff;box-shadow:var(--shadow-btn);transition:transform .18s ease,box-shadow .18s ease,filter .18s ease;position:relative;overflow:hidden}button:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:#ffffff14;opacity:0;transition:opacity .2s}button:hover:not(:disabled):before{opacity:1}button:hover:not(:disabled){transform:translateY(-2px) scale(1.03);box-shadow:0 8px 28px #00000073;filter:brightness(1.1)}button:active:not(:disabled){transform:translateY(0) scale(.98)}button:disabled{opacity:.38;cursor:not-allowed;filter:saturate(.5)}button.sort{background:var(--grad-aqua);color:var(--bg-deep);box-shadow:0 4px 20px #00e5c84d}button.sort:hover:not(:disabled){box-shadow:var(--glow-aqua),0 8px 28px #0006}button.generate-array{background:var(--grad-primary);color:var(--bg-deep);box-shadow:0 4px 20px #f5c84240}button.generate-array:hover:not(:disabled){box-shadow:var(--glow-gold),0 8px 28px #0006}button.stop{background:linear-gradient(135deg,#ff5f6d,#c0392b);color:#fff;box-shadow:0 4px 20px #ff5f6d4d}button.stop:hover:not(:disabled){box-shadow:var(--glow-coral),0 8px 28px #0006}.stats{display:flex;justify-content:space-around;align-items:center;padding:18px 24px;border-radius:var(--r-lg);background:var(--bg-raised);border:1px solid var(--border-subtle);margin-bottom:20px;box-shadow:var(--shadow-card);gap:10px}.stat-item{display:flex;flex-direction:row;align-items:baseline;gap:10px}.stat-label{color:var(--text-secondary);font-weight:500;font-size:.85em;letter-spacing:.06em;text-transform:uppercase}.stat-value{font-size:1.45em;font-weight:800;color:var(--neon-gold);font-family:JetBrains Mono,monospace;text-shadow:0 0 16px rgba(245,200,66,.4)}.stat-item:nth-child(2) .stat-value{color:var(--neon-aqua);text-shadow:0 0 16px rgba(0,229,200,.4)}.stat-item:nth-child(3) .stat-value{color:var(--neon-coral);text-shadow:0 0 16px rgba(255,95,109,.4)}.stat-item:nth-child(4) .stat-value{color:var(--neon-violet);text-shadow:0 0 16px rgba(176,106,255,.4)}.stat-item+.stat-item{border-left:1px solid var(--border-subtle);padding-left:24px}.array-container{height:360px;display:flex;align-items:flex-end;justify-content:center;gap:3px;background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--r-xl);box-shadow:var(--shadow-card),inset 0 -1px #ffffff08,inset 0 40px 80px #f5c84205;overflow-x:auto;padding:20px 14px 0;position:relative}.array-container:before{content:"";position:absolute;bottom:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(58,181,255,.2),transparent)}.bar-wrapper{display:flex;flex-direction:column;align-items:center}.bar-label{margin-bottom:5px;font-size:.65em;font-family:JetBrains Mono,monospace;color:var(--text-muted)}.array-bar{background:var(--grad-bar);border-radius:4px 4px 2px 2px;transition:height .2s ease,background .2s ease,box-shadow .2s ease;width:100%;position:relative}.array-bar:after{content:"";position:absolute;top:0;left:0;right:0;height:3px;border-radius:4px 4px 0 0;background:#3ab5ffcc;box-shadow:0 0 8px #3ab5ff99}.array-bar.comparing{background:linear-gradient(180deg,#f5c842,#e67e22);box-shadow:0 0 14px #f5c84299,0 0 32px #f5c84233}.array-bar.comparing:after{background:#f5c842;box-shadow:0 0 10px #f5c842}.array-bar.swapping{background:linear-gradient(180deg,#00e5c8,#00a86b);box-shadow:0 0 14px #00e5c8b3,0 0 32px #00e5c840}.array-bar.swapping:after{background:#00e5c8;box-shadow:0 0 10px #00e5c8}.array-bar.pivot{background:linear-gradient(180deg,#ff5f6d,#c0392b);box-shadow:0 0 14px #ff5f6db3,0 0 32px #ff5f6d40}.array-bar.pivot:after{background:#ff5f6d;box-shadow:0 0 10px #ff5f6d}.array-bar.sorted{background:linear-gradient(180deg,#b06aff,#6c2bd9);box-shadow:0 0 10px #b06aff73}.array-bar.sorted:after{background:#b06aff;box-shadow:0 0 8px #b06aff}.algorithm-info{background:var(--bg-raised);border:1px solid var(--border-subtle);padding:24px 28px;border-radius:var(--r-lg);box-shadow:var(--shadow-card);margin-top:20px;position:relative;overflow:hidden}.algorithm-info:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--grad-primary);border-radius:3px 0 0 3px}.algorithm-info h3{margin-top:0;font-size:1.1em;font-weight:700;letter-spacing:.04em;background:var(--grad-primary);background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent}.algorithm-info p{color:var(--text-secondary);font-size:.95em;line-height:1.7;margin:0}.array-container::-webkit-scrollbar{height:5px}.array-container::-webkit-scrollbar-track{background:transparent}.array-container::-webkit-scrollbar-thumb{background:#f5c8424d;border-radius:100px}@media (max-width: 900px){.controls,.stats{flex-direction:column;gap:14px}.stat-item+.stat-item{border-left:none;padding-left:0;border-top:1px solid var(--border-subtle);padding-top:14px}.container{padding:20px 12px}.array-container{height:240px}.header h1{font-size:2em}}