:root{--bg:#090a0d;--panel:#171a20;--panel-edge:#2b303a;--well:#0c0e12;--pad:#242831;--text:#f0f2f5;--dim:#9299a6;--amber:#ffad32;--blue:#55b8ff;--green:#43d679;--red:#ff5660;--pulse:#55c7ff;--foundation:#a8df57;--harmony:#49d8b2;--hook:#c78cff;--texture:#f5ca56;--fx:#ff7e6c;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;font-family:Inter,Segoe UI,system-ui,sans-serif}*{box-sizing:border-box}html{background:var(--bg);min-width:320px}body{min-height:100vh;color:var(--text);-webkit-tap-highlight-color:transparent;background:radial-gradient(circle at 50% -20%,#ffad3214,#0000 36rem),linear-gradient(145deg,#0d0f13,#08090b 70%);margin:0;overflow-x:hidden}button,input{font:inherit}button{color:inherit}button:focus-visible,input:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--blue);outline-offset:3px}button:disabled{cursor:not-allowed;opacity:.38}.accent{color:var(--amber)}.eyebrow,.panel-kicker{color:var(--dim);letter-spacing:.16em;margin:0;font-size:.64rem;font-weight:800}.wordmark{letter-spacing:-.04em;margin:0;font-size:1.45rem;font-weight:850}.panel{border:1px solid var(--panel-edge);background:linear-gradient(145deg,#1d2129fa,#111318fa);border-radius:.9rem;box-shadow:inset 0 1px #ffffff0a,0 12px 30px #0000003b}.sr-only{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.select-screen{z-index:100;background:radial-gradient(circle at 24% 48%,#ffad3221,#0000 28rem),radial-gradient(circle at 78% 54%,#55b8ff1f,#0000 28rem),#090a0d;grid-template-rows:auto auto auto auto auto;gap:clamp(.85rem,2.2vh,1.8rem);padding:clamp(1rem,4vw,3rem);display:grid;position:fixed;inset:0;overflow:auto}.select-screen[hidden]{display:none}.select-header{text-align:center}.select-header .eyebrow{margin-top:.2rem}.select-hero{text-align:center}.select-hero h1{letter-spacing:-.07em;margin:.35rem 0;font-size:clamp(2.25rem,7vw,5.6rem);line-height:.95}.select-hero p:last-child{color:var(--dim);margin:.7rem 0 0}.tune-library{width:min(100%,76rem);margin-inline:auto}.tune-library__heading{justify-content:space-between;align-items:end;gap:1rem;margin-bottom:.65rem;display:flex}.tune-library__heading h2{letter-spacing:.06em;margin:.18rem 0 0;font-size:1rem}.tune-library__heading>p{color:var(--dim);margin:0;font-size:.7rem}.tune-picker{grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem;display:grid}.tune-card{--tune-colour:var(--amber);border:1px solid var(--panel-edge);background:linear-gradient(145deg, color-mix(in srgb, var(--tune-colour) 13%, #171a20), #0d0f13 72%);text-align:left;cursor:pointer;isolation:isolate;border-radius:.85rem;flex-direction:column;min-height:11rem;padding:1rem;transition:transform .1s,border-color .12s,box-shadow .12s;display:flex;position:relative;overflow:hidden}.tune-card:before{content:"";z-index:-1;aspect-ratio:1;border:1px solid color-mix(in srgb, var(--tune-colour) 35%, transparent);background:repeating-radial-gradient(circle, color-mix(in srgb, var(--tune-colour) 10%, transparent) 0 2px, transparent 2px 12px);opacity:.7;border-radius:50%;position:absolute;inset:-40% -10% auto 35%}.tune-card--midnight{--tune-colour:var(--hook)}.tune-card--reactor{--tune-colour:var(--red)}.tune-card:hover,.tune-card.is-selected{border-color:var(--tune-colour);box-shadow:0 0 1.2rem color-mix(in srgb, var(--tune-colour) 17%, transparent);transform:translateY(-2px)}.tune-card__number{color:var(--dim);letter-spacing:.15em;font-size:.62rem;font-weight:850}.tune-card__style{color:var(--tune-colour);letter-spacing:.12em;margin-top:.55rem;font-size:.62rem;font-weight:850}.tune-card__title{letter-spacing:-.03em;margin-top:.22rem;font-size:clamp(1.15rem,2.4vw,1.65rem);font-weight:850}.tune-card__description{color:#b7bdc8;max-width:82%;margin-top:.35rem;font-size:.7rem;line-height:1.4}.tune-card__meta{color:var(--dim);letter-spacing:.08em;margin-top:auto;padding-top:.7rem;font-size:.56rem;font-weight:750}.tune-card__play{border:1px solid var(--tune-colour);background:color-mix(in srgb, var(--tune-colour) 14%, #0d0f13);width:2rem;height:2rem;color:var(--tune-colour);border-radius:50%;place-items:center;font-size:.7rem;display:grid;position:absolute;bottom:.85rem;right:.9rem}.guide-picker{grid-template-columns:repeat(2,minmax(0,30rem));justify-content:center;gap:1rem;display:grid}.guide-card{border:1px solid var(--panel-edge);background:var(--panel);text-align:left;cursor:pointer;isolation:isolate;border-radius:1rem;min-height:10rem;padding:1.25rem;position:relative;overflow:hidden}.guide-card:before{content:"";z-index:-1;opacity:.64;position:absolute;inset:0}.guide-card--starter:before{background:linear-gradient(#0000 20%,#11141a 95%),radial-gradient(circle at 80% 30%,#ffad3261,#0000 35%),repeating-linear-gradient(120deg,#0000 0 2rem,#ffad320a 2rem 2.1rem)}.guide-card--free:before{background:linear-gradient(#0000 20%,#0f141a 95%),radial-gradient(circle at 25% 35%,#55b8ff59,#0000 35%),repeating-linear-gradient(60deg,#0000 0 2rem,#55b8ff0a 2rem 2.1rem)}.guide-card:hover{border-color:var(--amber);transform:translateY(-2px)}.guide-card--free:hover{border-color:var(--blue)}.guide-card span{display:block}.guide-card__badge{color:var(--dim);letter-spacing:.13em;font-size:.65rem;font-weight:800}.guide-card__title{margin-top:2.5rem;font-size:clamp(1.15rem,2.4vw,1.65rem);font-weight:800}.guide-card__meta{color:var(--dim);letter-spacing:.08em;margin-top:.45rem;font-size:.72rem}.guide-card__action{color:var(--amber);letter-spacing:.08em;margin-top:1rem;font-size:.76rem;font-weight:850}.guide-card--free .guide-card__action{color:var(--blue)}.keyboard-hint{color:var(--dim);text-align:center;margin:0}kbd{border:1px solid var(--panel-edge);background:#111319;border-radius:.3rem;padding:.3rem .45rem}.app-header{background:#0a0b0ee6;border-bottom:1px solid #232730;justify-content:space-between;align-items:center;min-height:4.6rem;padding:.8rem clamp(1rem,3vw,2rem);display:flex}.app-header .eyebrow{margin-top:.15rem}.mode-tools{align-items:center;gap:.8rem;display:flex}.mode-pill{color:var(--amber);letter-spacing:.1em;border:1px solid #ffad3280;border-radius:999px;padding:.4rem .75rem;font-size:.67rem;font-weight:850}.text-btn{color:var(--dim);letter-spacing:.08em;cursor:pointer;background:0 0;border:0;padding:.4rem;font-size:.68rem;font-weight:800}.text-btn:hover{color:var(--text)}.instrument-shell{grid-template-columns:minmax(13.5rem,.72fr) minmax(31rem,1.65fr) minmax(15rem,.82fr);gap:.85rem;max-width:96rem;min-height:calc(100vh - 7.4rem);margin:auto;padding:.85rem;display:grid}.guide-panel{flex-direction:column;gap:1.5rem;padding:1.1rem;display:flex}.guide-panel h2,.layers-panel h2,.macro-panel h2{letter-spacing:.03em;margin:.15rem 0 0;font-size:1rem}.panel-meta{color:var(--dim);margin:.35rem 0 0;font-size:.74rem}.stage-list{gap:.45rem;margin:.75rem 0 0;padding:0;list-style:none;display:grid}.stage-button{background:var(--well);text-align:left;cursor:pointer;border:1px solid #0000;border-radius:.55rem;grid-template-columns:2rem 1fr auto;align-items:center;width:100%;padding:.65rem;display:grid}.stage-button span:first-child{color:var(--dim);font-size:.7rem}.stage-button strong{letter-spacing:.08em;font-size:.75rem}.stage-button small{color:var(--dim)}.stage-button.is-current{background:#ffad3217;border-color:#ffad328c}.stage-button.is-current strong{color:var(--amber)}.stage-cue{border-left:2px solid var(--amber);background:var(--well);color:#c5c9d0;min-height:5rem;margin:0;padding:.85rem;font-size:.82rem;line-height:1.55}.guide-actions{gap:.5rem;margin-top:auto;display:grid}.secondary-btn,.setting-btn{border:1px solid var(--panel-edge);letter-spacing:.09em;cursor:pointer;background:#11141a;border-radius:.5rem;padding:.65rem;font-size:.68rem;font-weight:850}.secondary-btn--blue{color:var(--blue);border-color:#55b8ff80}.workstation{flex-direction:column;gap:.85rem;min-width:0;display:flex}.loop-view{min-height:8rem;padding:.85rem 1rem}.loop-view__header,.panel-heading{justify-content:space-between;align-items:center;gap:.8rem;display:flex}.loop-settings{align-items:center;gap:.7rem;display:flex}.swing-control,.master-volume{color:var(--dim);letter-spacing:.08em;align-items:center;gap:.45rem;font-size:.62rem;font-weight:800;display:flex}input[type=range]{width:5.5rem;accent-color:var(--amber)}.beat-ruler{grid-template-columns:repeat(16,1fr);gap:.25rem;min-height:3.2rem;margin-top:.8rem;display:grid;position:relative}.beat-cell{background:#0d1015;border-radius:.3rem;position:relative}.beat-cell:nth-child(4n+1){border-left:1px solid #4b515d}.beat-cell.is-current{background:#ffad323d}.ghost-dot,.recorded-dot{border-radius:50%;width:.35rem;height:.35rem;position:absolute;left:50%;transform:translate(-50%)}.ghost-dot{border:1px solid var(--amber);top:.65rem}.recorded-dot{background:var(--blue);box-shadow:0 0 .45rem var(--blue);bottom:.6rem}.pad-grid{background:#0d0f13;border:1px solid #303641;border-radius:1rem;flex:1;grid-template-columns:repeat(4,1fr);gap:clamp(.5rem,1.1vw,.85rem);padding:clamp(.65rem,1.4vw,1.05rem);display:grid;box-shadow:inset 0 0 2.5rem #000c,0 1.2rem 2.5rem #0000003d}.pad{aspect-ratio:1.12;cursor:pointer;touch-action:none;-webkit-user-select:none;user-select:none;background:linear-gradient(155deg,#2b303a,#181b21 75%);border:1px solid #353b47;border-radius:clamp(.65rem,1.2vw,1rem);min-height:4rem;transition:transform 60ms,box-shadow 60ms,border-color .12s,background .12s;position:relative;box-shadow:0 5px #06070a,inset 0 1px #ffffff14}.pad-key{color:#777f8d;font-size:.7rem;font-weight:850;position:absolute;top:.65rem;left:.75rem}.pad-label{letter-spacing:.02em;font-size:clamp(.68rem,1.15vw,.95rem);font-weight:750}.pad-led{background:#4d5564;border-radius:1rem;width:1.1rem;height:.18rem;position:absolute;top:.55rem;left:50%;transform:translate(-50%)}.pad:hover{border-color:#565f70}.pad.is-guide-lit{border-color:#ffad3280}.pad.is-guide-lit .pad-led{background:var(--amber);box-shadow:0 0 .75rem var(--amber);animation:1.6s ease-in-out infinite breathe}.pad.is-active{border-color:var(--amber);background:linear-gradient(155deg,#6a4a1e,#2f2518 80%);transform:translateY(4px);box-shadow:0 1px #06070a,inset 0 0 1.2rem #ffad3233}.pad.is-active .pad-led{box-shadow:0 0 1rem var(--amber);background:#fff0c2}@keyframes breathe{50%{opacity:.45}}.transport{flex-wrap:wrap;align-items:center;gap:.45rem;padding:.7rem;display:flex}.transport-btn{letter-spacing:.07em;cursor:pointer;background:#11141a;border:1px solid #333945;border-radius:.5rem;padding:.62rem .8rem;font-size:.65rem;font-weight:850}.transport-btn--play.is-active{border-color:var(--green);color:var(--green);box-shadow:inset 0 0 .7rem #43d6791f}.transport-btn--record.is-active{border-color:var(--red);color:var(--red);animation:.9s infinite breathe}.transport-btn--perform{color:var(--amber);border-color:#ffad3280}.bpm-readout{color:var(--amber);font-variant-numeric:tabular-nums;margin-left:auto;font-size:.72rem;font-weight:850}.right-rack{flex-direction:column;gap:.85rem;min-width:0;display:flex}.layers-panel,.macro-panel{padding:1rem}.selected-layer{color:var(--dim);letter-spacing:.07em;font-size:.58rem}.layer-rack{gap:.42rem;margin-top:.8rem;display:grid}.layer-strip{background:var(--well);border:1px solid #292e38;border-radius:.5rem;grid-template-columns:.5rem minmax(4.5rem,1fr) auto;align-items:center;gap:.55rem;padding:.55rem;display:grid}.layer-strip.is-armed{border-color:var(--red)}.layer-strip.has-events .layer-name{color:var(--text)}.layer-led{background:var(--layer-colour);width:.45rem;height:.45rem;box-shadow:0 0 .5rem var(--layer-colour);opacity:.3;border-radius:50%}.layer-strip.has-events .layer-led,.layer-strip.is-active .layer-led{opacity:1}.layer-name{color:var(--dim);letter-spacing:.07em;font-size:.7rem;font-weight:800}.layer-controls{align-items:center;gap:.35rem;display:flex}.layer-level{width:3.2rem!important}.mute-chip{color:var(--dim);cursor:pointer;background:0 0;border:1px solid #353b47;border-radius:.3rem;padding:.3rem .42rem;font-size:.58rem}.mute-chip[aria-pressed=true]{border-color:var(--blue);color:var(--blue);background:#55b8ff1a}.macro-panel{margin-top:auto}.macro-xy{aspect-ratio:1.7;cursor:crosshair;touch-action:none;background-color:#0c0e12;background-image:linear-gradient(#55b8ff0d 1px,#0000 1px),linear-gradient(90deg,#55b8ff0d 1px,#0000 1px),radial-gradient(circle,#55b8ff17,#0000 45%),none;background-position:0 0,0 0,0 0,0 0;background-repeat:repeat,repeat,repeat,repeat;background-size:25% 25%;background-attachment:scroll,scroll,scroll,scroll;background-origin:padding-box,padding-box,padding-box,padding-box;background-clip:border-box,border-box,border-box,border-box;border:1px solid #343b47;border-radius:.65rem;margin-top:.8rem;position:relative}.macro-axis{color:var(--dim);letter-spacing:.08em;pointer-events:none;font-size:.53rem;font-weight:800;position:absolute}.macro-axis--top{top:.4rem;left:50%;transform:translate(-50%)}.macro-axis--bottom{bottom:.4rem;left:50%;transform:translate(-50%)}.macro-axis--left{top:50%;left:.45rem;transform:translateY(-50%)}.macro-axis--right{top:50%;right:.45rem;transform:translateY(-50%)}.macro-puck{background:var(--blue);width:1.1rem;height:1.1rem;box-shadow:0 0 1rem var(--blue);pointer-events:none;border:2px solid #cdeeff;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.instrument-shell[data-mode=PERFORM]{grid-template-columns:minmax(0,2fr) minmax(15rem,.78fr)}.instrument-shell[data-mode=PERFORM] .guide-panel{display:none}.instrument-shell[data-mode=PERFORM] .loop-view{min-height:13rem}.perform-timeline{gap:.25rem;margin-top:.65rem;display:grid}.perform-timeline[hidden]{display:none}.timeline-lane{background:#0c0f13;border-radius:.25rem;grid-template-columns:5.5rem 1fr;align-items:center;min-height:1.1rem;display:grid;position:relative;overflow:hidden}.timeline-lane__name{color:var(--layer-colour);padding-left:.4rem;font-size:.55rem;font-weight:850}.timeline-lane__events{border-left:1px solid #303640;height:100%;position:relative}.timeline-event{background:var(--layer-colour);width:.4rem;height:50%;box-shadow:0 0 .35rem var(--layer-colour);border-radius:.2rem;position:absolute;top:25%}.app-footer{min-height:2.8rem;color:var(--dim);letter-spacing:.1em;border-top:1px solid #232730;justify-content:space-between;padding:.85rem 1.25rem;font-size:.62rem;font-weight:750;display:flex}@media (width<=68rem){.instrument-shell{grid-template-columns:minmax(12rem,.75fr) minmax(29rem,1.6fr)}.right-rack{grid-column:1/-1;grid-template-columns:1.4fr 1fr;display:grid}.macro-panel{margin-top:0}.layer-rack{grid-template-columns:repeat(3,1fr)}.layer-strip{grid-template-columns:.5rem 1fr}.layer-controls{grid-column:1/-1}}@media (width<=47rem){.app-header{min-height:4rem}.mode-pill,#show-guide{display:none}.instrument-shell,.instrument-shell[data-mode=PERFORM]{flex-direction:column;min-height:auto;padding:.55rem;display:flex}.guide-panel{order:1;gap:.75rem}.guide-panel .stage-list{grid-template-columns:repeat(4,minmax(0,1fr))}.stage-button{text-align:center;grid-template-columns:auto;justify-items:center;padding:.45rem .25rem}.stage-button span:first-child,.stage-button small{display:none}.stage-cue{min-height:auto}.workstation{order:2}.loop-view{min-height:6.8rem}.right-rack{flex-direction:column;order:3;display:flex}.layer-rack{padding-bottom:.25rem;display:flex;overflow-x:auto}.layer-strip{flex:0 0 8.8rem}.pad-grid{gap:.45rem;width:100%;padding:.55rem}.pad{aspect-ratio:1;min-height:0}.pad-label{font-size:clamp(.62rem,2.8vw,.82rem)}.transport{justify-content:center}.bpm-readout{margin-left:0}.master-volume{justify-content:center;width:100%}.macro-xy{aspect-ratio:2.7}.instrument-shell[data-mode=PERFORM] .guide-panel,.app-footer{display:none}.tune-library__heading{flex-direction:column;align-items:start;gap:.35rem}.tune-picker{grid-template-columns:1fr}.tune-card{min-height:8.8rem}.guide-picker{grid-template-columns:1fr}}@media (width<=34rem){.select-screen{grid-template-rows:auto auto auto auto}.guide-picker{grid-template-columns:1fr}.guide-card{min-height:10.5rem}.guide-card__title{margin-top:2.8rem}.keyboard-hint{display:none}.loop-view__header{align-items:flex-start}.loop-settings{flex-direction:column;align-items:flex-end}.swing-control{display:none}.transport-btn{flex:1 0 27%}.bpm-readout{text-align:center;flex:1 0 100%}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.001ms!important;animation-duration:.001ms!important;animation-iteration-count:1!important}}