@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:opsz,wght@9..40,500;9..40,700&family=Instrument+Serif:ital@0;1&display=swap');
:root{--ink:#eaf0ff;--muted:#95a2c1;--deep:#080b16;--panel:#11182b;--line:#29334d;--cyan:#48d8ed;--orange:#ff9f5b;--lime:#b9ef6c;--pink:#f085b8}*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 82% 5%,#283359 0,transparent 24rem),var(--deep);color:var(--ink);font-family:'DM Sans',system-ui,sans-serif}.shell{width:min(1440px,calc(100% - 3rem));margin:auto;padding:3.5rem 0 1.5rem}.hero{display:flex;justify-content:space-between;align-items:end;gap:2rem;margin-bottom:2.4rem}.eyebrow,.control span,dt,footer{font:500 .68rem/1.3 'DM Mono',monospace;letter-spacing:.12em;color:var(--muted);text-transform:uppercase}.hero h1{font-size:clamp(3rem,7vw,6.5rem);line-height:.84;letter-spacing:-.07em;margin:.3rem 0 0}.hero h1 em{font-family:'Instrument Serif',serif;font-weight:400;color:var(--cyan)}.intro{max-width:28rem;margin:0;color:#c5cde3;font-size:1rem;line-height:1.55}.controls{display:grid;grid-template-columns:1.4fr 1.25fr 1fr 1fr auto;gap:1px;background:var(--line);border:1px solid var(--line)}.control,.actions{background:var(--panel);padding:1rem 1.15rem;min-height:76px;display:flex;flex-direction:column;justify-content:center;gap:.55rem}.control select{appearance:none;background:#19233c url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2348d8ed' stroke-width='2'/%3E%3C/svg%3E") no-repeat right .8rem center;color:var(--ink);border:0;padding:.55rem 2rem .55rem .7rem;border-radius:3px;font:500 .85rem 'DM Mono',monospace}input[type=range]{accent-color:var(--cyan);width:100%}.actions{flex-direction:row;align-items:center}.actions button{height:40px;border:1px solid transparent;padding:0 1rem;font:500 .75rem 'DM Mono',monospace;cursor:pointer}.primary{background:var(--cyan);color:#061116}.primary span{font-size:1.1rem;margin-left:.3rem}.secondary{background:transparent;border-color:#4a5776!important;color:var(--ink)}button:disabled,select:disabled,input:disabled{opacity:.45;cursor:not-allowed}.readout{display:grid;grid-template-columns:repeat(6,1fr);border-inline:1px solid var(--line);margin-top:1.25rem}.readout div{padding:1rem;border-right:1px solid var(--line);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.readout div:last-child{border-right:0}.readout span{display:block;font:500 .61rem 'DM Mono',monospace;color:var(--muted);text-transform:uppercase;letter-spacing:.1em;margin-bottom:.4rem}.readout strong{font:500 1.1rem 'DM Mono',monospace;color:var(--cyan)}.visualizer{height:clamp(260px,45vh,510px);margin-top:1.25rem;position:relative;padding:1.4rem 1.2rem .5rem;border:1px solid var(--line);background:linear-gradient(180deg,#10162a,rgba(16,22,42,.25));overflow:hidden}.visualizer:before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent,transparent 20%,rgba(149,162,193,.08) 20.25%);pointer-events:none}.bars{height:100%;display:flex;align-items:end;gap:1px;position:relative;z-index:1}.bar{background:linear-gradient(to top,#368cc2,#78e7f0);flex:1 1 0;min-width:1px;transition:height .05s linear,background .07s linear;box-shadow:0 -1px 9px rgba(72,216,237,.2)}.bar.compare{background:linear-gradient(to top,#d7609b,#ffb4d4)}.bar.swap{background:linear-gradient(to top,#e37333,#ffc178)}.bar.write{background:linear-gradient(to top,#78b63a,#c9fa83)}.bar.done{background:linear-gradient(to top,#6f8b38,#b9ef6c)}.chart-floor{height:2px;position:absolute;bottom:.5rem;left:1.2rem;right:1.2rem;background:var(--cyan);box-shadow:0 0 14px var(--cyan)}.details{display:flex;justify-content:space-between;align-items:end;gap:2rem;margin:1.7rem 0}.about h2{font-size:clamp(1.6rem,3vw,2.6rem);margin:.3rem 0}.about p:last-child{max-width:38rem;margin:0;color:var(--muted)}.properties{display:grid;grid-template-columns:repeat(4,1fr);min-width:min(100%,560px);gap:1.5rem;margin:0}.properties dd{font:500 .9rem 'DM Mono',monospace;margin:.4rem 0 0}footer{border-top:1px solid var(--line);padding-top:1rem;display:flex;justify-content:space-between;gap:1rem}footer i,footer b,footer u{display:inline-block;width:.55rem;height:.55rem;margin:0 .15rem;text-decoration:none;background:var(--pink)}footer b{background:var(--orange)}footer u{background:var(--lime)}@media(max-width:820px){.shell{width:min(100% - 1.5rem,1440px);padding-top:1.5rem}.hero,.details{display:block}.intro{margin-top:1.2rem}.controls{grid-template-columns:1fr 1fr}.algorithm-control{grid-column:1/-1}.actions{grid-column:1/-1}.readout{grid-template-columns:repeat(3,1fr)}.readout div:nth-child(3){border-right:0}.readout div:nth-child(n+4){border-top:0}.properties{margin-top:1.5rem;grid-template-columns:repeat(2,1fr)}footer{font-size:.55rem;flex-direction:column}.visualizer{height:330px}}@media(max-width:430px){.controls{grid-template-columns:1fr}.readout{grid-template-columns:repeat(2,1fr)}.readout div:nth-child(3){border-right:1px solid var(--line);border-top:0}.readout div:nth-child(2),.readout div:nth-child(4),.readout div:nth-child(6){border-right:0}.actions{grid-column:auto}.visualizer{height:280px}}