:root{--room: #171614;--room-lift: #24211d;--case: #c8c8c1;--case-top: #d6d6cf;--case-bottom: #bcbcb4;--case-hi: #ebebe4;--case-lo: #9a9a92;--case-edge: #6d6d66;--case-recess: #b0b0a8;--lcd: #002FA7;--lcd-lit: #90D5FF;--lcd-ink: #FFFFFF;--lcd-ink-mid: rgba(255, 255, 255, .75);--lcd-ink-dim: rgba(255, 255, 255, .65);--bezel: #191917;--pad: #46453f;--pad-hi: #605f58;--pad-lo: #2c2b28;--pad-lit: #90D5FF;--ink: #33332f;--ink-mid: #403f39;--rec: #b1332a;--mono: "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;--label: ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;--radius-case: 18px;--radius-part: 5px}*,*:before,*:after{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{margin:0;min-height:100dvh;font-family:var(--mono);color:var(--ink);background:var(--room);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}button{font:inherit;color:inherit}.room{position:relative;min-height:100dvh;padding:clamp(16px,5vw,56px) clamp(12px,4vw,40px) clamp(32px,8vw,72px);display:flex;flex-direction:column;align-items:center;background:radial-gradient(120% 70% at 50% 0%,var(--room-lift) 0%,transparent 62%),var(--room)}.room__grain{position:fixed;top:0;right:0;bottom:0;left:0;z-index:2;pointer-events:none;opacity:.16;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}.machine{position:relative;width:100%;max-width:860px;padding:clamp(14px,3.4vw,26px);border-radius:var(--radius-case);background:linear-gradient(180deg,var(--case-top) 0%,var(--case) 46%,var(--case-bottom) 100%);border:1px solid var(--case-edge);box-shadow:inset 0 1px 0 var(--case-hi),inset 0 -1px #00000038,0 24px 48px -18px #000000e6,0 60px 90px -50px #000;animation:machine-rise .65s cubic-bezier(.2,.7,.3,1) both}@keyframes machine-rise{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}.screw{position:absolute;width:9px;height:9px;border-radius:50%;background:linear-gradient(180deg,#8e8e86,#b6b6ae);box-shadow:inset 0 1px 1px #00000073,0 1px #ffffff80}.screw:before{content:"";position:absolute;top:3px;right:1px;bottom:3px;left:1px;border-top:1px solid rgba(0,0,0,.4);transform:rotate(35deg)}.screw--tl{top:9px;left:9px}.screw--tr{top:9px;right:9px}.screw--bl{bottom:9px;left:9px}.screw--br{bottom:9px;right:9px}.nameplate{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 12px;padding:0 12px clamp(10px,2.4vw,14px)}.nameplate__mark{font-family:var(--label);font-size:clamp(13px,3.6vw,16px);font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--ink)}.nameplate__sub{font-size:9px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-mid);white-space:nowrap}.bezel{position:relative;padding:clamp(8px,2vw,11px);border-radius:8px;background:linear-gradient(180deg,#2a2a27,var(--bezel));box-shadow:inset 0 2px 5px #000000d9,inset 0 -1px #ffffff12,0 1px 0 var(--case-hi)}.lcd{position:relative;overflow:hidden;border-radius:3px;padding:clamp(11px,2.8vw,16px) clamp(12px,3vw,18px);color:var(--lcd-ink);background:radial-gradient(130% 150% at 50% 0%,var(--lcd-lit) 0%,var(--lcd) 58%,#001A70 100%);box-shadow:inset 0 0 22px #00000080,inset 0 0 3px #00000080;animation:lcd-boot .5s steps(1) .18s 3 both}@keyframes lcd-boot{0%,to{filter:none}50%{filter:brightness(.62) saturate(.7)}}.lcd:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;background-image:repeating-linear-gradient(to right,rgba(255,255,255,.07) 0 1px,transparent 1px 3px),repeating-linear-gradient(to bottom,rgba(255,255,255,.07) 0 1px,transparent 1px 3px)}.lcd:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;background:linear-gradient(160deg,rgba(255,255,255,.16) 0%,transparent 34%)}.lcd__head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.lcd__status{margin:0 0 3px;font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(--lcd-ink-mid)}.lcd__title{margin:0;font-size:clamp(17px,5vw,26px);font-weight:700;line-height:1.08;letter-spacing:-.01em;text-transform:uppercase}.lcd__readout{text-align:right;font-size:10px;line-height:1.5;letter-spacing:.08em;white-space:nowrap;font-variant-numeric:tabular-nums}.lcd__loop{display:inline-flex;align-items:center;gap:4px;margin-top:2px;padding:1px 5px;border-radius:2px;background:var(--lcd-ink);color:var(--lcd-lit);font-size:9px;letter-spacing:.14em}.scope{position:relative;height:clamp(46px,13vw,64px);margin:clamp(9px,2.4vw,13px) 0}.scope canvas{display:block;width:100%;height:100%}.scope__idle{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;font-size:9px;letter-spacing:.3em;text-transform:uppercase;color:var(--lcd-ink-dim);pointer-events:none}.seek{position:relative;display:block;width:100%;padding:7px 0;border:0;background:none;cursor:pointer;touch-action:none}.seek__track{position:relative;height:7px;border-radius:1px;background:#ffffff2e;box-shadow:inset 0 1px 1px #00000040;overflow:hidden}.seek__fill{position:absolute;inset:0 auto 0 0;width:var(--progress, 0%);background-image:repeating-linear-gradient(to right,var(--lcd-ink) 0 3px,transparent 3px 4px)}.seek:focus-visible{outline:2px solid var(--lcd-ink);outline-offset:3px}.lcd__foot{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;padding-top:7px;border-top:1px solid rgba(255,255,255,.22);font-size:10px;letter-spacing:.1em;font-variant-numeric:tabular-nums}.lcd__spec{color:var(--lcd-ink-mid);text-transform:uppercase}.lcd__time{font-size:clamp(12px,3.4vw,15px);font-weight:700}.deck{display:grid;gap:clamp(16px,3.4vw,24px);margin-top:clamp(16px,3.4vw,24px);grid-template-areas:"transport" "tracks" "pads" "master"}.deck__transport{grid-area:transport}.deck__tracks{grid-area:tracks}.deck__pads{grid-area:pads}@media (min-width: 720px){.deck{grid-template-columns:1fr 264px;grid-template-areas:"tracks transport" "tracks pads" "tracks master" "tracks .";align-items:start}}.panel-label{display:flex;align-items:center;gap:10px;margin-bottom:9px;font-family:var(--label);font-size:9px;font-weight:700;letter-spacing:.28em;text-transform:uppercase;color:var(--ink-mid)}.panel-label:after{content:"";flex:1;height:1px;background:linear-gradient(90deg,rgba(0,0,0,.22),transparent);box-shadow:0 1px #ffffff8c}.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:0;font-family:var(--label);font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);cursor:pointer;border-radius:var(--radius-part);background:linear-gradient(180deg,#dcdcd5,#c6c6bf);border:1px solid var(--case-lo);border-top-color:var(--case-hi);border-left-color:#dddcd5;box-shadow:inset 0 1px #ffffffd9,0 1px #ffffff73,0 2px 3px #00000047;transition:transform .05s ease,box-shadow .05s ease,background .12s ease}.btn:active,.btn[data-on=true]{transform:translateY(1px);background:linear-gradient(180deg,#bcbcb5,#cccdc5);border-top-color:var(--case-lo);border-left-color:var(--case-lo);box-shadow:inset 0 2px 4px #00000059}.btn:focus-visible{outline:2px solid var(--rec);outline-offset:2px}.transport{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:clamp(7px,1.8vw,10px)}.transport .btn{height:clamp(52px,14vw,62px);flex-direction:column;gap:4px}.btn--play{background:linear-gradient(180deg,#e4e4dc,#cdcdc5);box-shadow:inset 0 1px #fffffff2,0 1px #ffffff73,0 3px 5px #0000004d}.btn--play svg{width:22px;height:22px}.btn__cap{font-size:8px;letter-spacing:.18em;color:var(--ink-mid)}.btn--loop[data-on=true]{background:linear-gradient(180deg,#9c2c24 0%,var(--rec) 100%);border-color:#7a231d;color:#fbeae8}.btn--loop[data-on=true] .btn__cap{color:#fbeae8cc}.tracklist{margin:0;padding:5px;list-style:none;border-radius:7px;background:var(--case-recess);box-shadow:inset 0 2px 4px #0000004d,0 1px 0 var(--case-hi);scrollbar-width:thin;scrollbar-color:#82827a var(--case-recess)}@media (min-width: 720px){.tracklist{max-height:min(56vh,460px);overflow-y:auto;overscroll-behavior:contain}}.tracklist::-webkit-scrollbar{width:8px}.tracklist::-webkit-scrollbar-track{background:#0000001f;border-radius:4px}.tracklist::-webkit-scrollbar-thumb{background:#82827a;border-radius:4px;border:2px solid var(--case-recess)}.track{display:grid;grid-template-columns:22px 1fr auto;align-items:center;gap:10px;width:100%;padding:11px 10px;border:0;border-radius:var(--radius-part);background:none;font-family:var(--mono);font-size:12px;letter-spacing:.05em;text-transform:uppercase;text-align:left;color:var(--ink);cursor:pointer}.track+.track{box-shadow:inset 0 1px #00000017}.track:hover{background:#fff6}.track:focus-visible{outline:2px solid var(--rec);outline-offset:-2px}.track[aria-current=true]{background:var(--bezel);color:var(--lcd-lit);box-shadow:inset 0 1px 3px #0009}.track__index{font-size:10px;color:var(--ink-mid);font-variant-numeric:tabular-nums}.track[aria-current=true] .track__index{color:#90d5ff99}.track__title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.track__meta{display:flex;gap:12px;font-size:10px;color:var(--ink-mid);font-variant-numeric:tabular-nums}.track[aria-current=true] .track__meta{color:#90d5ff9e}.eq{display:flex;align-items:flex-end;gap:2px;height:12px}.eq span{width:3px;background:var(--lcd-lit);animation:eq .8s ease-in-out infinite}.eq span:nth-child(2){animation-duration:.62s}.eq span:nth-child(3){animation-duration:1s}@keyframes eq{0%,to{height:30%}50%{height:100%}}.pads{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(7px,1.8vw,10px);padding:9px;border-radius:8px;background:var(--case-recess);box-shadow:inset 0 2px 4px #00000047,0 1px 0 var(--case-hi)}.pad{aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:0;border-radius:var(--radius-part);cursor:pointer;touch-action:none;user-select:none;-webkit-user-select:none;font-family:var(--label);font-size:9px;font-weight:700;letter-spacing:.14em;color:#d3d2c9;background:radial-gradient(120% 120% at 50% 22%,var(--pad-hi) 0%,var(--pad) 58%,var(--pad-lo) 100%);border:1px solid #232220;box-shadow:inset 0 1px #ffffff24,inset 0 -2px 4px #0006,0 2px 3px #00000059;transition:transform .04s ease,box-shadow .04s ease,background .06s ease}.pad[data-hit=true]{transform:translateY(1px);color:#fff;background:radial-gradient(120% 120% at 50% 22%,#d3e072 0%,var(--pad-lit) 60%,#0055A8 100%);box-shadow:inset 0 2px 6px #00000059,0 0 14px #90d5ff73}.pad:focus-visible{outline:2px solid var(--pad-lit);outline-offset:2px}.pad__key{font-size:8px;opacity:.5;font-family:var(--mono);letter-spacing:0}.deck__master{grid-area:master;display:none}@media (min-width: 720px){.deck__master{display:block}}.master{display:flex;align-items:center;gap:16px;padding:14px 16px;border-radius:8px;background:var(--case-recess);box-shadow:inset 0 2px 4px #00000047,0 1px 0 var(--case-hi)}.knob{--angle: 0deg;position:relative;flex:none;width:62px;height:62px;padding:0;border-radius:50%;cursor:grab;touch-action:none;background:linear-gradient(180deg,#4f4e48,#35342f 62%,#2a2925);border:1px solid #201f1c;box-shadow:inset 0 1px #ffffff2e,inset 0 -3px 6px #00000073,0 2px 4px #0006}.knob:active{cursor:grabbing}.knob:before{content:"";position:absolute;top:6px;right:6px;bottom:6px;left:6px;border-radius:50%;background:repeating-conic-gradient(#ffffff12,#ffffff12 3deg,#00000029 3deg,#00000029 6deg);mask:radial-gradient(circle,transparent 58%,#000 60%);-webkit-mask:radial-gradient(circle,transparent 58%,#000 60%)}.knob:after{content:"";position:absolute;left:50%;top:7px;width:2px;height:17px;border-radius:1px;background:var(--lcd-lit);box-shadow:0 0 5px #bccc55b3;transform-origin:50% 24px;transform:translate(-50%) rotate(var(--angle))}.knob:focus-visible{outline:2px solid var(--lcd-lit);outline-offset:3px}.master__readout{min-width:0}.master__value{font-size:17px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink)}.master__label{margin-top:2px;font-family:var(--label);font-size:8px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-mid)}.plate{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:clamp(14px,3vw,20px);padding:0 14px;font-family:var(--label);font-size:8px;font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:var(--ink-mid)}.hint{display:none}@media (min-width: 720px){.hint{display:block;font-family:var(--mono);letter-spacing:.1em}}.colophon{width:100%;max-width:860px;margin-top:clamp(22px,5vw,36px);display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:#6f6c65}.colophon__links{display:flex;gap:16px}.colophon a{color:#9a968d;display:inline-flex;transition:color .2s ease}.colophon a:hover,.colophon a:focus-visible{color:var(--lcd-lit)}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.machine,.lcd{animation:none;opacity:1;transform:none;filter:none}}