@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800&family=IBM+Plex+Mono:wght@500;600&display=swap');

:root{--black:#080807;--steel:#171714;--line:#3a3932;--bone:#dfddd0;--dim:#88877e;--acid:#d8ff45;--rust:#d7552b;--pad:clamp(14px,2vw,28px)}
*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;background:var(--black);color:var(--bone);overflow:hidden}body{font-family:"Barlow Condensed",sans-serif;background:radial-gradient(circle at 50% 42%,#1c1c17 0,#0d0d0b 38%,#060605 75%)}button,input{font:inherit}.machine{height:100dvh;display:grid;grid-template-rows:auto minmax(0,1fr) auto auto;padding:var(--pad);position:relative}.machine:before{content:"";position:absolute;inset:8px;border:1px solid #2b2b26;pointer-events:none}.topbar{display:flex;justify-content:space-between;align-items:start;border-bottom:1px solid var(--line);padding:0 0 10px;z-index:2}.maker,.tempo span,.statusline,.rack label,.export small{font:600 10px/1.2 "IBM Plex Mono",monospace;letter-spacing:.13em}.maker{color:var(--rust)}h1{margin:0;font-size:clamp(34px,4vw,58px);line-height:.82;letter-spacing:-.025em}.tempo{display:flex;gap:10px;align-items:end;text-align:right}.tempo strong{font-size:clamp(34px,4vw,58px);line-height:.8;color:var(--acid)}.tempo span{max-width:65px;color:var(--dim)}
.rotor-stage{min-height:0;position:relative;display:grid;place-items:center;overflow:hidden}#rotor{display:block;width:min(72vh,72vw);height:min(72vh,72vw);max-width:100%;max-height:100%;filter:drop-shadow(0 15px 25px #000)}.hub{position:absolute;display:grid;place-items:center;gap:7px}.play{width:clamp(70px,10vh,105px);aspect-ratio:1;border-radius:50%;border:1px solid #5e5c51;background:#11110f;color:var(--bone);box-shadow:inset 0 0 0 8px #080807,0 0 0 1px #050504;cursor:pointer;display:grid;place-content:center;gap:3px}.play:hover,.play:focus-visible{border-color:var(--acid);color:var(--acid)}.play:active{transform:scale(.97)}.play-icon{font-size:20px}.play-label{font:600 10px "IBM Plex Mono",monospace;letter-spacing:.12em}.play.is-playing .play-icon{font-size:0}.play.is-playing .play-icon:after{content:"■";font-size:17px}#transport{font:600 9px "IBM Plex Mono",monospace;color:var(--dim);letter-spacing:.12em}
.rack{border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:grid;grid-template-columns:1.2fr repeat(3,1fr) .8fr;min-height:86px;background:rgba(15,15,13,.8)}.rack>*{border-right:1px solid var(--line);padding:11px 15px}.rack>*:last-child{border-right:0}.seed-block label,.control span{display:flex;justify-content:space-between;color:var(--dim);margin-bottom:10px}.control output{color:var(--bone)}.seed-row{display:grid;grid-template-columns:1fr auto;height:34px}.seed-row input{min-width:0;border:1px solid #4a4941;background:#080807;color:var(--acid);padding:0 9px;font:600 12px "IBM Plex Mono",monospace;text-transform:uppercase}.seed-row button{border:1px solid #4a4941;border-left:0;background:#24231f;color:var(--bone);padding:0 12px;font:600 10px "IBM Plex Mono",monospace;letter-spacing:.1em;cursor:pointer}.seed-row button:hover,.seed-row button:focus-visible{background:var(--acid);color:#080807}.control{display:flex;flex-direction:column;justify-content:center}input[type=range]{appearance:none;width:100%;height:22px;background:transparent;cursor:pointer}input[type=range]::-webkit-slider-runnable-track{height:3px;background:#4b4a42}input[type=range]::-webkit-slider-thumb{appearance:none;width:15px;height:22px;margin-top:-9px;background:var(--bone);border:0;border-radius:0}input[type=range]:focus-visible::-webkit-slider-thumb{background:var(--acid);outline:2px solid var(--acid);outline-offset:3px}.export{border:0;background:var(--acid);color:#090908;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding-left:20px;cursor:pointer}.export span{font-weight:800;font-size:24px;line-height:.9}.export small{margin-top:5px}.export:hover,.export:focus-visible{background:var(--rust);color:white}.statusline{display:flex;justify-content:space-between;color:var(--dim);padding-top:8px}.statusline span:first-child{color:var(--bone)}button:focus-visible,input:focus-visible{outline:2px solid var(--acid);outline-offset:3px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
@media(max-width:700px){.machine{padding:12px;grid-template-rows:auto minmax(270px,1fr) auto auto}.machine:before{inset:4px}.topbar{padding:2px 2px 9px}.maker{font-size:8px}h1{font-size:35px}.tempo strong{font-size:34px}.tempo span{font-size:8px}.rotor-stage{overflow:visible}#rotor{width:min(94vw,48vh);height:min(94vw,48vh)}.play{width:72px}.rack{grid-template-columns:1fr 1fr;min-height:0}.rack>*{min-height:68px;padding:9px 11px}.seed-block{grid-column:1/3}.rack>*:nth-child(2),.rack>*:nth-child(4){border-left:0}.rack>*:nth-child(2),.rack>*:nth-child(3){border-bottom:1px solid var(--line)}.rack>*:nth-child(3){border-right:0}.control span{margin-bottom:2px}.export{min-height:68px}.export span{font-size:20px}.statusline{font-size:8px;padding:6px 2px 0}.statusline span:last-child{display:none}}
@media(max-height:680px) and (max-width:700px){.machine{grid-template-rows:auto minmax(190px,1fr) auto auto}#rotor{width:min(72vw,38vh);height:min(72vw,38vh)}.rack>*{min-height:58px;padding-top:6px;padding-bottom:6px}.seed-block{min-height:54px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}