:root{--acid:#b8ff3d;--cyan:#31d8d2;--red:#ff554d;--ink:#101412;--panel:#252b28;--metal:#656b67;--line:#343b37;--text:#d7ded9;--muted:#6f7a74;font-family:"IBM Plex Mono","Courier New",monospace;color-scheme:dark}
*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(circle at 50% -10%,#28312d,#121714 52%,#080a09);color:var(--text)}button,input{font:inherit}.topbar{height:70px;padding:0 clamp(18px,4vw,64px);display:flex;align-items:center;gap:22px;border-bottom:1px solid #ffffff12;background:#0b0e0cdd}.back{color:var(--acid);text-decoration:none;font-size:10px;letter-spacing:.15em}.wordmark{display:flex;align-items:center;justify-content:center;margin:auto;min-width:190px}.wordmark img{display:block;width:clamp(170px,15vw,205px);height:auto;max-height:48px;object-fit:contain}.build{color:var(--muted);font-size:7px;letter-spacing:.18em}.stage{width:min(1280px,96vw);margin:clamp(24px,5vw,70px) auto}.device{display:grid;grid-template-columns:190px 290px minmax(430px,1fr) 44px;gap:12px;padding:16px;border:1px solid #2b302d;border-radius:18px;background:linear-gradient(145deg,#858b87,#626864 48%,#505652);box-shadow:0 30px 70px #0009,inset 0 1px #fff3}.left-rail,.control-bank,.performance{padding:11px;border:1px solid #303633;border-radius:10px;background:#2025222b;box-shadow:inset 0 1px #fff1}.left-rail{display:flex;flex-direction:column;gap:11px}.screen{display:flex;align-items:center;gap:10px;min-height:78px;padding:11px;border:2px solid #141816;border-radius:6px;background:#090c0a;color:var(--acid);box-shadow:inset 0 0 22px #000}.screen>span{font-size:30px}.screen div{display:grid;gap:5px}.screen strong{font-size:11px}.screen small{color:#71923b;font-size:7px}.history,.transport,.selectors,.utility{display:grid;grid-template-columns:1fr 1fr;gap:7px}.history button,.utility button,.selectors button,.mode{border:1px solid #303633;border-radius:4px;background:linear-gradient(#737a75,#515753);color:#1c211e;box-shadow:inset 0 1px #fff3,0 2px 4px #0005;cursor:pointer}.history button{height:28px;font-size:7px}.tempo-dial{display:grid;place-items:center;margin:auto 0}.tempo-dial input{appearance:none;width:112px;height:112px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#929894 0 12%,#565d58 40%,#252a27 65%,#747b76 69%,#343936 76%);writing-mode:vertical-lr;direction:rtl}.tempo-dial input::-webkit-slider-thumb{appearance:none;width:8px;height:8px;border-radius:50%;background:var(--acid);box-shadow:0 0 10px var(--acid)}.tempo-dial strong{font-size:20px;margin-top:-67px;color:#1a201c;pointer-events:none}.tempo-dial span{margin-top:47px;font-size:7px;color:#202521}.transport button{aspect-ratio:1;border:2px solid #2b302d;border-radius:50%;background:radial-gradient(circle at 35% 30%,#7b817d,#4e5450);font-size:23px;cursor:pointer}.transport #record{color:#ff492d}.transport #play{color:#45f977}.transport button[aria-pressed="true"]{box-shadow:0 0 17px currentColor}.control-bank{display:flex;flex-direction:column;gap:10px}.encoders{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.encoder{display:grid;place-items:center;gap:4px;color:#252a27;font-size:7px}.encoder input{appearance:none;width:50px;height:50px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#8c928e,#4b514d 58%,#222725 62%)}.encoder input::-webkit-slider-thumb{appearance:none;width:6px;height:6px;border-radius:50%;background:var(--cyan)}.modes{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}.mode{min-height:45px;padding:6px 7px;text-align:left;font-size:7px;font-weight:800}.mode small,.utility small,.selectors small{display:block;margin-top:3px;font-size:5px;color:#333a36}.mode.active{background:#202722;color:var(--acid);border-color:var(--acid);box-shadow:0 0 12px #b8ff3d35}.mode.active small{color:#739c3c}.utility{margin-top:auto}.utility button{min-height:43px;text-align:left;padding:7px}.utility strong{font-size:7px}.performance{display:flex;flex-direction:column;gap:9px}.selectors button{height:43px;padding:6px 9px;text-align:left}.selectors strong{font-size:9px}.pads{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;min-height:420px;padding:10px;border:1px solid #292f2c;border-radius:9px;background:#373d39}.pad{position:relative;border:1px solid #252a27;border-radius:7px;background:linear-gradient(#555c57,#353b37);color:#8d9691;box-shadow:inset 0 1px #fff2,0 4px 7px #0007;cursor:pointer}.pad::before{content:"";position:absolute;left:7px;right:7px;top:7px;height:7px;border-radius:3px;background:var(--pad-color);box-shadow:0 0 12px var(--pad-color)}.pad strong{display:block;font-size:15px}.pad span{font-size:6px}.pad.on{color:#fff;border-color:var(--pad-color);box-shadow:inset 0 -32px 44px color-mix(in srgb,var(--pad-color) 20%,transparent),0 0 15px color-mix(in srgb,var(--pad-color) 45%,transparent)}.pad.playing{transform:scale(.95);filter:brightness(1.7)}.touch-strip{display:grid;place-items:center}.touch-strip span{font-size:6px;color:#202521;writing-mode:vertical-rl}.touch-strip input{appearance:none;writing-mode:vertical-lr;direction:rtl;width:18px;height:390px;border-radius:8px;background:#2b302d;accent-color:var(--acid)}.workspace{display:grid;grid-template-columns:1fr 1.4fr 1.3fr;gap:24px;align-items:center;margin-top:14px;padding:20px 24px;border:1px solid #252d28;border-radius:10px;background:#151a17}.workspace>div:first-child{display:grid;gap:5px}.workspace span{font-size:7px;letter-spacing:.14em;color:var(--muted)}.workspace strong{font-size:11px;color:var(--acid)}.workspace p{margin:0;font-size:9px;line-height:1.7;color:#8e9993}.status-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}.status-grid span{display:grid;gap:5px;padding:9px;border:1px solid #28302b;background:#0e120f}.status-grid strong{font-size:8px;color:var(--cyan)}
@media(max-width:1000px){.device{grid-template-columns:170px 1fr 1.45fr}.touch-strip{display:none}.pads{min-height:350px}}@media(max-width:720px){.wordmark{min-width:132px}.wordmark img{width:132px;max-height:38px}.device{grid-template-columns:1fr}.left-rail{display:grid;grid-template-columns:1fr 1fr}.screen{grid-column:1/-1}.tempo-dial{display:none}.pads{min-height:440px}.workspace{grid-template-columns:1fr}.topbar{height:58px}.build{display:none}}
.sample-deck{margin-top:14px;padding:18px 20px;border:1px solid #27312c;border-radius:10px;background:#141a17}.sample-deck[hidden]{display:none}.sample-deck header{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-bottom:12px}.sample-deck header>div:first-child{display:grid;gap:4px}.sample-deck header span{font-size:7px;letter-spacing:.16em;color:var(--muted)}.sample-deck header strong{font-size:11px;color:var(--cyan)}.sample-actions{display:flex;gap:6px;flex-wrap:wrap}.sample-actions button{height:30px;padding:0 10px;border:1px solid #36443d;border-radius:4px;background:#202823;color:var(--cyan);font-size:7px;font-weight:800;cursor:pointer}.sample-actions button.active{border-color:var(--acid);color:var(--acid);box-shadow:0 0 10px #b8ff3d33}.sample-deck canvas{display:block;width:100%;height:180px;border:1px solid #25302a;border-radius:6px;background:#0a0e0c;cursor:crosshair}.sample-controls{display:grid;grid-template-columns:repeat(8,1fr);gap:8px;margin-top:10px}.sample-controls label{display:grid;grid-template-columns:1fr auto;gap:5px;padding:8px;border:1px solid #252e29;background:#0e1310;color:var(--muted);font-size:7px}.sample-controls input,.sample-controls select{grid-column:1/-1;width:100%;accent-color:var(--cyan)}.sample-controls output{color:var(--cyan)}@media(max-width:900px){.sample-controls{grid-template-columns:repeat(4,1fr)}}@media(max-width:520px){.sample-deck header{align-items:flex-start;flex-direction:column}.sample-controls{grid-template-columns:repeat(2,1fr)}}