*,:before,:after{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%}body{color:#ff5753;-webkit-font-smoothing:antialiased;background:#000;font-family:IBM Plex Mono,monospace;font-size:12px;line-height:1.4}button{font-family:inherit;font-size:inherit;cursor:pointer;color:inherit;background:0 0;border:none}input,select{font-family:inherit;font-size:inherit}.label{text-transform:uppercase;letter-spacing:.08em;color:#ff57538c;font-size:10px}.heading{letter-spacing:.04em;font-size:14px;font-weight:500}@keyframes zone-beat-pulse{0%,92%,to{opacity:1}8%{opacity:.55}}@keyframes zone-flicker{0%,to{opacity:1}25%{opacity:.7}50%{opacity:.85}75%{opacity:.6}}@keyframes object-glow{0%,to{box-shadow:0 0 #0000}50%{box-shadow:0 0 8px #ff575373}}@keyframes zone-live-trigger{0%{opacity:1;filter:brightness()}40%{opacity:.75;filter:brightness(1.35)}to{opacity:1;filter:brightness()}}.zone--loop.zone--playing:not(.zone--muted) .zone__border{animation:zone-beat-pulse calc(60s / var(--bpm,120)) linear infinite}.zone--live-trigger{animation:.18s ease-out zone-live-trigger}.topbar{border-bottom:1px solid #263d5866;flex-shrink:0;justify-content:space-between;align-items:center;height:48px;padding:0 16px;display:flex}.topbar__brand{letter-spacing:.12em;text-transform:uppercase;color:#ff5753;font-size:14px}.topbar__mode-label{text-transform:uppercase;letter-spacing:.1em;color:#ff57538c;margin-left:16px;font-size:10px}.topbar__mode-label--play{color:#ff5753}.topbar__controls{align-items:center;gap:24px;display:flex}.topbar__zoom{align-items:center;gap:4px;display:flex}.topbar__zoom-label{text-transform:uppercase;letter-spacing:.08em;color:#ff57538c;margin-right:4px;font-size:10px}.topbar__zoom-btn{border:1px solid #263d5866;justify-content:center;align-items:center;width:24px;height:24px;padding:0;font-size:14px;line-height:1;transition:border-color .12s,color .12s;display:flex}.topbar__zoom-btn:hover:not(:disabled){border-color:#ff57538c}.topbar__zoom-btn:disabled{opacity:.35;cursor:default}.topbar__zoom-value{font-variant-numeric:tabular-nums;letter-spacing:.04em;color:#ff5753;border:1px solid #0000;min-width:44px;padding:2px 4px;font-size:10px;transition:border-color .12s,color .12s}.topbar__zoom-value:hover{color:#ff5753;border-color:#263d5866}.topbar__bpm{align-items:center;gap:8px;display:flex}.topbar__bpm-label{text-transform:uppercase;letter-spacing:.08em;color:#ff57538c;font-size:10px}.topbar__bpm-slider{accent-color:#ff5753;width:120px}.topbar__bpm-value{text-align:right;font-variant-numeric:tabular-nums;min-width:32px;font-size:12px}.topbar__mode-btn{text-transform:uppercase;letter-spacing:.08em;border:1px solid #263d5866;padding:8px 16px;font-size:10px;transition:border-color .12s,color .12s}.topbar__mode-btn--play{color:#ff5753;border-color:#ff5753}.topbar__mode-btn:hover{border-color:#ff57538c}.object-card{cursor:grab;-webkit-user-select:none;user-select:none;width:100%;color:inherit;background:0 0;border:1px solid #263d5866;align-items:center;gap:8px;padding:8px 16px;transition:border-color .12s,opacity .12s;display:flex}.object-card:hover{border-color:#ff57538c}.object-card:active{cursor:grabbing;opacity:.7}.object-card--selected{color:#ff5753;border-color:#ff5753;box-shadow:inset 0 0 0 1px #ff5753}.object-card__icon{border:1px solid;flex-shrink:0;justify-content:center;align-items:center;width:20px;height:20px;font-size:10px;display:flex}.object-card__label{text-transform:uppercase;letter-spacing:.06em;font-size:10px}.sidebar{z-index:10;background:#000;border-right:1px solid #263d5866;flex-direction:column;flex-shrink:0;gap:16px;width:200px;padding:16px;display:flex;position:relative;overflow-y:auto}.sidebar__title{text-transform:uppercase;letter-spacing:.1em;color:#ff57538c;font-size:10px}.sidebar__catalog{flex-direction:column;gap:16px;display:flex}.sidebar__category{flex-direction:column;gap:4px;display:flex}.sidebar__category-title{text-transform:uppercase;letter-spacing:.08em;color:#ff57538c;border-bottom:1px solid #263d5866;padding-bottom:4px;font-size:10px}.sidebar__objects{flex-direction:column;gap:8px;display:flex}.cell{width:var(--cell-size,32px);height:var(--cell-size,32px);border:var(--grid-line-width,1px) solid #00000040;flex-shrink:0;transition:background .12s;position:relative}.cell--selectable{cursor:crosshair}.cell--selected{z-index:2;background:#ff575338;outline:1px solid #ff57538c}.cell--occupied{cursor:default}.cell--drop-target{outline-offset:-2px;z-index:2;outline:2px dashed #ff5753}.cell--place-ready{cursor:copy}.cell--zone-moving{cursor:grabbing}.cell--zone-resizing{cursor:nwse-resize}.cell--move-preview{z-index:1}.cell--move-invalid{outline-offset:-1px;outline:1px dashed #ff5753}.cell--live-interact{cursor:pointer}.cell--live-hit{outline-offset:-2px;z-index:2;outline:2px solid #ff57538c}.cell__fill{pointer-events:none;position:absolute;inset:0}.musical-object{text-transform:uppercase;letter-spacing:.04em;pointer-events:auto;cursor:grab;background:#00000080;border:1px solid;align-items:center;gap:4px;padding:2px 6px;font-size:10px;transition:box-shadow .12s;display:flex}.musical-object--active{animation:.15s ease-out object-glow}.musical-object--dragging{opacity:.45;cursor:grabbing}.musical-object--muted{opacity:.4;border-style:dashed}.musical-object__icon{opacity:.7}.musical-object__label{text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;overflow:hidden}.musical-object__category{opacity:.55;font-size:.85em}.zone{pointer-events:none;z-index:3;position:absolute}.zone--drop-target{pointer-events:auto;outline-offset:-2px;cursor:copy;outline:2px dashed #ff5753}.zone--playing .zone__mute,.zone--playing .zone__objects{pointer-events:auto}.zone--muted{opacity:.45}.zone--live .zone__border{border-style:dashed}.zone--loop .zone__border{border-style:solid;border-width:2px}.zone--movable .zone__handle--draggable,.zone--movable .zone__resize{pointer-events:auto}.zone--movable .zone__handle--draggable{cursor:grab}.zone--movable .zone__handle--draggable:active{cursor:grabbing}.zone--moving,.zone--resizing{z-index:5;pointer-events:none}.zone--move-invalid .zone__border,.zone--resize-invalid .zone__border{border-style:dashed;border-color:#ff5753!important}.zone--effect-max .zone__border{box-shadow:inset 0 0 0 1px #ffffff1f}.zone__resize{pointer-events:none;z-index:2;position:absolute}.zone__resize--e{cursor:ew-resize;opacity:.55;border-right:2px solid;width:6px;right:-3px}.zone__resize--s{cursor:ns-resize;opacity:.55;border-bottom:2px solid;height:6px;bottom:-3px}.zone__resize--se{cursor:nwse-resize;opacity:.75;border-bottom:2px solid;border-right:2px solid;width:10px;height:10px;bottom:-4px;right:-4px}.zone__resize:hover{opacity:1}.zone__border{box-sizing:border-box;pointer-events:none;color:inherit;border:1.5px solid;position:absolute}.zone__handle{box-sizing:border-box;pointer-events:none;padding:2px 4px 4px;position:absolute;top:0;left:0}.zone__label{letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;text-overflow:ellipsis;font-size:10px;display:block;overflow:hidden}.zone__handle-line{opacity:.55;pointer-events:none;height:1px;margin-top:3px;display:block}.zone__objects{pointer-events:none;flex-direction:column;gap:4px;padding:4px;display:flex;position:absolute;top:22px;left:4px}.zone__footer{pointer-events:none;flex-direction:column;gap:2px;display:flex;position:absolute;bottom:3px;left:4px;right:14px}.zone__specs{flex-wrap:wrap;gap:1px 5px;line-height:1.15;display:flex}.zone__spec{letter-spacing:.04em;opacity:.72;white-space:nowrap;font-size:9px}.zone__mode{letter-spacing:.08em;text-transform:uppercase;opacity:.7;font-size:10px}.zone__mode--loop{opacity:.85;font-weight:600}.zone__mode--live{opacity:.95;letter-spacing:.12em}.zone__mute{opacity:.85;cursor:pointer;pointer-events:none;background:currentColor;border:none;border-radius:50%;width:7px;height:7px;padding:0;transition:opacity .12s,transform .12s;position:absolute;bottom:3px;right:3px}.zone__mute:hover{opacity:1;transform:scale(1.2)}.zone__mute--off{opacity:.25;background:0 0;box-shadow:inset 0 0 0 1px}.zone-modal-overlay{z-index:100;background:#0009;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.zone-modal{background:#000;border:1px solid #263d5866;flex-direction:column;gap:16px;min-width:280px;padding:24px;display:flex}.zone-modal__title{letter-spacing:.06em;text-transform:uppercase;font-size:14px}.zone-modal__field{flex-direction:column;gap:4px;display:flex}.zone-modal__input{color:#ff5753;background:#000;border:1px solid #263d5866;padding:8px}.zone-modal__colors{flex-wrap:wrap;gap:8px;display:flex}.zone-modal__color{cursor:pointer;border:2px solid #0000;width:24px;height:24px;transition:border-color .12s}.zone-modal__color--active{border-color:#ff5753}.zone-modal__modes{gap:8px;display:flex}.zone-modal__mode-btn{text-transform:uppercase;letter-spacing:.06em;border:1px solid #263d5866;flex:1;padding:8px;font-size:10px;transition:border-color .12s,color .12s}.zone-modal__mode-btn--active{color:#ff5753;border-color:#ff5753}.zone-modal__mode-btn:hover{border-color:#ff57538c}.zone-modal__actions{justify-content:flex-end;gap:8px;display:flex}.zone-modal__btn{text-transform:uppercase;letter-spacing:.06em;border:1px solid #263d5866;padding:8px 16px;font-size:10px}.zone-modal__btn--primary,.zone-modal__btn--danger{color:#ff5753;border-color:#ff5753}.zone-modal__btn:hover{opacity:.85}.zone-modal__live{border-top:1px solid #263d5866;flex-direction:column;gap:16px;padding-top:4px;display:flex}.zone-modal__live-hint{color:#ff57538c;font-size:10px;line-height:1.4}.zone-modal__toggles{flex-direction:column;gap:4px;display:flex}.zone-modal__toggle{cursor:pointer;text-transform:capitalize;align-items:center;gap:8px;font-size:10px;display:flex}.zone-modal__field input[type=range]{accent-color:#ff5753;width:100%}.grid-container{touch-action:none;background:#263d58;flex:1;min-width:0;min-height:0;padding:0;position:relative;overflow:hidden}.grid-canvas{position:absolute;inset:0}.grid{position:absolute;inset:0;overflow:hidden}.grid--placing .musical-object:not(.musical-object--dragging){pointer-events:none}.grid__cells{grid-template-columns:repeat(var(--visible-cols), var(--cell-size,32px));grid-template-rows:repeat(var(--visible-rows), var(--cell-size,32px));display:grid;position:absolute;top:0;left:0}.grid__zones{pointer-events:none;position:absolute;inset:0}.object-params-overlay{z-index:100;background:0 0;position:fixed;inset:0}.object-params{background:#000;border:1px solid #263d5866;flex-direction:column;gap:16px;min-width:260px;padding:24px;display:flex;box-shadow:0 8px 24px #00000073}.object-params--menu{min-width:240px;padding:16px;position:fixed}.object-params__title{letter-spacing:.06em;text-transform:uppercase;font-size:14px}.object-params__field{flex-direction:column;gap:4px;display:flex}.object-params__select{color:#ff5753;background:#000;border:1px solid #263d5866;padding:8px}.object-params__value{color:#ff57538c;font-variant-numeric:tabular-nums;font-size:10px}.app{background:#000;flex-direction:column;height:100%;display:flex}.app__body,.app__main{flex:1;display:flex;overflow:hidden}