:root{color-scheme:dark;--bg:#020d18;--panel:#051c30;--line:rgba(17,171,232,.34);--text:#f2f8ff;--muted:#91b7d4;--cyan:#06c6ff;--blue:#078cff;--green:#00e4ad;--amber:#ffbe25}*{box-sizing:border-box}html{min-width:320px;background:var(--bg)}body{min-height:100vh;margin:0;background:radial-gradient(circle at 15% 20%,rgba(0,153,255,.09),transparent 30rem),linear-gradient(135deg,#020a13,#031525 55%,#020b14);color:var(--text);font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif}button,input{font:inherit}button{touch-action:manipulation}header{display:flex;align-items:center;justify-content:space-between;gap:40px;min-height:103px;padding:18px clamp(28px,4vw,52px);border-bottom:1px solid var(--line)}.brand{display:grid}.brand b{font-size:clamp(1.9rem,3vw,2.8rem);letter-spacing:-.04em}.brand i{color:var(--cyan);font-style:normal;text-shadow:0 0 20px #06c6ff77}.brand span,.heading p{color:#8fc9f6}.brand span{letter-spacing:.06em}.heading{display:flex;align-items:center;gap:20px}.heading em{padding:9px 18px;border:1px solid var(--cyan);border-radius:999px;color:var(--cyan);font-size:.86rem;font-style:normal;font-weight:750}h1{margin:0;font-size:clamp(1.25rem,2.3vw,1.8rem)}.heading p{margin:4px 0 0;font-size:.84rem}main{width:min(1200px,calc(100% - 56px));margin:14px auto}.panel{border:1px solid var(--line);border-radius:14px;background:linear-gradient(145deg,rgba(5,28,48,.9),rgba(2,19,34,.86))}.toolbar{display:grid;grid-template-columns:minmax(280px,1.08fr) minmax(450px,1.75fr) minmax(172px,.62fr);gap:14px}.input,.speed,.actions{min-height:102px;padding:15px 16px}.input label,.speed label{display:block;margin-bottom:8px;color:#bce4ff;font-size:.85rem;font-weight:700}.input>div{display:flex;overflow:hidden;border:1px solid #35678c;border-radius:9px;background:#071a2d}.input input{min-width:0;flex:1;border:0;outline:0;padding:8px 11px;background:transparent;color:white;font-size:.78rem}.input button{border:0;border-left:1px solid #315c7c;padding:0 14px;background:#173852;color:white}.input small{display:block;margin-top:7px;color:var(--muted);font-size:.64rem}#error{display:block;color:#ff7e8a;font-size:.68rem}.actions{display:flex;align-items:center;justify-content:center;gap:9px}.actions button{min-height:42px;padding:0 17px;border:1px solid #38698c;border-radius:9px;background:linear-gradient(#102d47,#081b2d);color:white;cursor:pointer;font-size:.76rem;font-weight:720}.actions .primary{background:linear-gradient(145deg,#0ea9ff,#0477ef)}.speed input{width:100%;accent-color:var(--blue)}.speed div{display:flex;justify-content:space-between;color:var(--muted);font-size:.63rem}.workspace{display:grid;grid-template-columns:minmax(0,3.1fr) minmax(220px,1.1fr);gap:14px;margin-top:14px}.chart{display:flex;align-items:flex-end;gap:clamp(7px,2vw,30px);height:294px;padding:34px 36px 35px}.barwrap{position:relative;display:flex;flex:1;align-items:flex-end;justify-content:center;height:100%;border-bottom:1px solid #6fbade66}.bar{position:relative;width:min(58px,100%);min-width:8px;border:1px solid #63dcff;border-radius:5px 5px 0 0;background:linear-gradient(#53d6fb,#058aee);transition:.16s}.bar:before{content:attr(data-value);position:absolute;top:-23px;left:50%;transform:translateX(-50%);font-size:.78rem;font-weight:730}.barwrap:after{content:attr(data-index);position:absolute;bottom:-21px;color:#8bb5d0;font-size:.62rem}.bar.active{background:linear-gradient(#ffd76b,#f39a0a);transform:translateY(-4px)}.bar.sorted{background:linear-gradient(#44f0c1,#00a985)}.stats{padding:14px 16px}.stats h2,.info h2{margin:0 0 9px;font-size:.94rem}.statbox{padding:12px;border-radius:10px;background:#010e1a6b}.statbox p{display:flex;justify-content:space-between;margin:0 0 14px;font-size:.75rem}.statbox p:nth-child(1) b{color:var(--cyan)}.statbox p:nth-child(2) b{color:var(--amber)}.statbox p:nth-child(3) b{color:var(--green)}.statbox b{font-size:1.05rem}.statbox hr{border:0;border-top:1px solid #79b9d659}.statbox label{display:block;margin-bottom:8px;font-size:.7rem}#status{display:block;padding:8px;border:1px solid var(--cyan);border-radius:9px;color:var(--cyan);text-align:center}.info{display:grid;grid-template-columns:2.15fr 1fr;margin-top:14px;padding:18px 24px}.explain{display:flex;align-items:center;gap:20px;padding-right:30px;border-right:1px solid #6eb7da59}.bulb{display:grid;flex:none;width:58px;height:58px;place-items:center;border:1px solid var(--cyan);border-radius:50%;color:var(--cyan)}.explain p{margin:4px 0;color:var(--muted);font-size:.73rem}.try{padding-left:26px}.try h3{margin:0 0 7px;font-size:.76rem}.try ul{margin:0;padding:0;list-style:none;color:var(--muted);font-size:.69rem;line-height:1.7}.try li:before{content:"✓";margin-right:8px;color:var(--cyan)}footer{display:flex;justify-content:space-between;padding:14px clamp(28px,4vw,52px);border-top:1px solid var(--line);color:#86abc5;font-size:.62rem}footer p{margin:0}
@media(max-width:980px){.toolbar{grid-template-columns:1fr 1fr}.actions{grid-column:1/-1;grid-row:2}.workspace{grid-template-columns:2.4fr 1fr}}
@media(max-width:680px){body{overflow-x:hidden}header{display:block;padding:18px 16px}.brand b{font-size:2rem}.brand span{font-size:.76rem}.heading{justify-content:flex-start;margin-top:18px;padding-top:15px;border-top:1px solid #79b9d633}.heading>div{min-width:0}.heading em{padding:7px 10px;font-size:.68rem}h1{font-size:1rem;white-space:normal}.heading p{font-size:.65rem}main{width:calc(100% - 24px);margin-top:10px}.panel{min-width:0}.toolbar,.workspace,.info{display:flex;min-width:0;flex-direction:column;gap:10px}.actions{order:2;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));min-height:0;padding:12px}.actions button{min-width:0;min-height:46px;padding:0 4px;font-size:.65rem;white-space:normal}.speed{order:3;min-height:0}.input{min-height:0}.workspace{margin-top:10px}.chart{order:1;height:270px;gap:4px;padding:35px 8px}.barwrap{min-width:0}.bar{width:min(34px,100%)}.bar:before{font-size:.62rem}.stats{order:2}.statbox{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.statbox p{display:block;margin:0;padding:8px 3px;text-align:center;background:#0002;border-radius:8px}.statbox p b{display:block}.statbox hr{display:none}.statbox label,#status{grid-column:1/-1}.info{margin-top:10px}.explain{align-items:flex-start;padding:0 0 17px;border:0;border-bottom:1px solid #6eb7da59}.bulb{width:42px;height:42px}.try{padding:15px 0 0 62px}footer{align-items:flex-end;padding:14px 16px 22px}footer p:last-child{text-align:right}}
@media(max-width:400px){.actions{grid-template-columns:repeat(2,1fr)}#step{grid-column:span 2}.chart{height:240px;gap:3px}.bar:before{font-size:.55rem}footer{display:block;line-height:1.5}footer p:last-child{margin-top:7px;text-align:left}}
@media(prefers-reduced-motion:reduce){*{transition-duration:.01ms!important}}