:root{color-scheme:dark;font-family:system-ui,sans-serif;color:#e7eefb;background:#060b18}*{box-sizing:border-box}body{margin:0}main{max-width:900px;margin:auto;padding:24px}h1{font-size:clamp(2rem,5vw,3.5rem);margin:.3em 0}.eyebrow,a{color:#22d3ee}p{line-height:1.6;color:#aebdd5}canvas{display:block;width:100%;height:48vh;min-height:280px;border-radius:20px;background:radial-gradient(ellipse,#172640,#060b18)}.controls{display:flex;flex-wrap:wrap;gap:18px;margin:24px 0}label{display:grid;gap:8px}input,select,button{font:inherit;max-width:100%;padding:10px;color:inherit;background:#14223a;border:1px solid #516580;border-radius:8px}button{cursor:pointer}pre{overflow:auto;padding:20px;border:1px solid #293c5e;border-radius:12px;line-height:1.6}*:focus-visible{outline:3px solid #22d3ee;outline-offset:3px}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}