:root{color-scheme:dark}*{box-sizing:border-box}body{margin:0;background:#0b161b;color:#e9e2c5;font:15px/1.65 system-ui}main{max-width:1440px;padding:28px;margin:auto}h1{font:clamp(32px,4vw,55px)/1.1 Georgia;margin:14px 0}h2{font:28px Georgia}.eyebrow{font:11px ui-monospace,monospace;letter-spacing:.17em;color:#dabc74}header p,.explanation p{color:#a9bfc1;max-width:95ch}.instrument{border:1px solid #47676b;border-radius:20px;overflow:hidden;margin:28px 0;background:#112328}.controls{display:flex;align-items:center;flex-wrap:wrap;gap:14px;padding:18px;border-bottom:1px solid #395559}.controls label{font-size:12px;display:flex;gap:7px;align-items:center}.controls input[type=range]{width:115px;accent-color:#dac17e}output{color:#e0c67f;min-width:25px}button{border:1px solid #6c8b85;border-radius:9px;background:#233c3e;color:#eee2bf;padding:11px 15px;font:inherit;cursor:pointer}button:hover{border-color:#e8d598;box-shadow:0 0 20px #9ce3cf35}button:disabled{opacity:.5;cursor:wait}button:focus-visible,input:focus-visible,canvas:focus-visible{outline:2px solid #dfc17d;outline-offset:3px}.views{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:#355054}.views figure{margin:0;background:#091419;min-width:0}.views figcaption{padding:13px 18px}.views figcaption b,.views figcaption span{display:block}.views figcaption b{font-size:13px}.views figcaption span{color:#99afb1;font-size:11px}canvas{display:block;width:100%;aspect-ratio:1.25;touch-action:none;cursor:grab;background:#081217}#reference{image-rendering:auto}.footer{display:flex;justify-content:space-between;gap:16px;align-items:center;padding:20px}.footer strong,.footer span,.footer small{display:block}.footer strong{font-size:13px;color:#e0c67f}.footer span{font:12px/2 ui-monospace,monospace}.footer small{color:#91a9ac;font-size:11px}.pipeline{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.pipeline li{padding:18px;border-left:2px solid #ba9e63;background:#12252a}.pipeline b,.pipeline span{display:block}.pipeline span{font-size:13px;color:#aac0c0;margin-top:8px}.explanation{margin-top:35px}.explanation p{font-size:13px}@media(max-width:760px){main{padding:16px}.views,.pipeline{grid-template-columns:1fr}.footer{align-items:flex-start;flex-direction:column}.controls{gap:12px}.controls input[type=range]{width:100px}}