:root{font-family:"Segoe UI",system-ui,sans-serif;color:#f1e7d7;background:#151719;color-scheme:dark}
*{box-sizing:border-box}body{margin:0}main{max-width:1520px;margin:auto;padding:32px 28px}
header{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:26px}
.eyebrow{font-size:11px;font-weight:700;letter-spacing:.16em;color:#c9ad7b;margin:0 0 10px}
h1{font-size:34px;font-weight:600;letter-spacing:-.04em;margin:0}.lead{color:#adaaa3;font-size:14px;margin:9px 0 0;line-height:1.5}
a{color:#d2b888;text-decoration:none;white-space:nowrap;font-size:13px}a:hover{text-decoration:underline}
.controls{display:flex;flex-wrap:wrap;align-items:center;gap:20px;background:#202225;border:1px solid #343638;border-radius:12px;padding:16px 18px}
.controls + .controls{margin-top:12px}input[name=seed]{width:100px}
fieldset{border:0;padding:0;margin:0}legend{font-size:11px;color:#aaa69e;margin-bottom:8px}.versions{display:flex;gap:14px}.versions label{font-size:13px;cursor:pointer;display:flex;align-items:center;gap:5px}
input[type=radio]{accent-color:#d2b888;margin:0}.amount{font-size:11px;color:#aaa69e;display:grid;gap:5px}.amount span{display:flex;align-items:center;gap:6px;font-size:13px;color:#e7dac3}
input[type=number]{width:61px;padding:5px 7px;border:1px solid #484849;border-radius:5px;background:#16181a;font:inherit;color:inherit}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-left:auto}button,select{font:inherit;font-size:13px;border:1px solid #484849;border-radius:6px;background:#2a2c2e;color:#f1e7d7;padding:9px 12px;cursor:pointer}
button:hover{background:#393b3c}button.primary{background:#cdb082;color:#25221e;border-color:#cdb082}button.primary:hover{background:#e4c595}button:disabled{opacity:.4;cursor:wait}button[aria-pressed=true]{border-color:#d2b888;color:#ead1a8}
.speed{display:flex;gap:7px;align-items:center;font-size:12px;color:#aaa69e}select{padding:8px}
:focus-visible{outline:2px solid #f5d494;outline-offset:3px}#status{color:#b8b1a4;font-size:12px;min-height:17px;margin:14px 2px}
.tracks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.tracks article{overflow:hidden;border:1px solid #48403a;border-radius:12px;background:#242326}
.track-title{display:flex;justify-content:space-between;align-items:center;padding:16px 18px}h2{font-size:16px;font-weight:600;margin:0}.track-title span{color:#d2b888;font-size:12px;font-variant-numeric:tabular-nums}
.stage{height:340px;position:relative;overflow:hidden;background:#c7956e}.stage canvas{position:absolute;inset:0;display:block;width:100%;height:100%}.hero{pointer-events:none;will-change:transform}.track-state{margin:0;padding:13px 18px;font-size:12px;color:#cfc4b2;font-variant-numeric:tabular-nums}
footer{font-size:12px;color:#9e9b94;line-height:1.6;margin-top:21px}footer p{margin:4px 0}
@media(max-width:1000px){main{padding:24px 18px}.controls{gap:16px}.actions{margin-left:0;width:100%}.tracks{gap:12px}.stage{height:310px}}
@media(max-width:720px){main{padding:20px 14px}header{align-items:flex-start;flex-direction:column;gap:12px;margin-bottom:18px}h1{font-size:29px}.tracks{grid-template-columns:1fr}.stage{height:290px}.controls{padding:14px;gap:16px}.versions{width:100%;gap:18px}.actions{gap:7px}button{padding:9px 10px}.lead{font-size:13px}}