:root{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;line-height:1.5;font-weight:400;color-scheme:dark;color:#fff;background-color:#0a0a0f;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;min-width:320px;min-height:100vh;background:#0a0a0f}button{font-family:inherit}a{color:#60a5fa;text-decoration:none}a:hover{color:#93c5fd}input[type=range].slim-slider{-webkit-appearance:none;appearance:none;background:transparent}input[type=range].slim-slider::-webkit-slider-runnable-track{width:100%;height:3px;background:#333;border-radius:2px}input[type=range].slim-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:8px;height:8px;background:currentColor;border-radius:50%;margin-top:-2.5px;cursor:pointer}input[type=range].slim-slider::-moz-range-track{width:100%;height:3px;background:#333;border-radius:2px}input[type=range].slim-slider::-moz-range-thumb{width:8px;height:8px;background:currentColor;border-radius:50%;border:none;cursor:pointer}.loop-pad-matrix{display:flex;flex-direction:column;gap:6px;padding:8px 10px;background:linear-gradient(145deg,#1a1a2e,#15152a);border-radius:8px;border:1px solid #252542;box-shadow:0 2px 8px #0000004d}.player-header{display:flex;align-items:center;gap:6px;padding:4px 8px;border-left:3px solid;background:#ffffff08;border-radius:0 4px 4px 0;color:#fff;font-weight:600;font-size:11px;white-space:nowrap}.player-dot{width:8px;height:8px;border-radius:50%;box-shadow:0 0 6px currentColor}.player-name{flex:1}.active-count{font-size:9px;color:#4ade80;background:#4ade8026;padding:2px 6px;border-radius:10px;font-weight:500}.in-out-events{display:flex;gap:4px;margin-left:auto}.in-out-event{display:flex;align-items:center;gap:2px;padding:2px 6px;border-radius:10px;font-size:9px;font-weight:600;font-family:monospace;animation:event-pulse .6s ease-in-out infinite}.in-out-event.in{background:#4ade8033;border:1px solid rgba(74,222,128,.5);color:#4ade80}.in-out-event.out{background:#fb923c33;border:1px solid rgba(251,146,60,.5);color:#fb923c}.in-out-event .event-icon{font-size:8px}.in-out-event .event-type{text-transform:uppercase;letter-spacing:.5px}@keyframes event-pulse{0%,to{opacity:.7;transform:scale(1)}50%{opacity:1;transform:scale(1.05)}}.matrix-container{display:flex;flex-direction:column;gap:3px}.matrix-header{display:flex;gap:2px;padding-left:60px}.matrix-header-subtitle{display:flex;gap:2px;padding-left:60px;margin-bottom:4px}.bars-hint{font-size:8px;color:#444;font-family:monospace;letter-spacing:.5px;flex:1;text-align:center}.matrix-bar-label{width:30px;height:18px;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;font-family:monospace;color:#555;background:#ffffff05;border-radius:3px}.matrix-bar-label:hover{color:#888;background:#ffffff0d}.bar-number{position:relative}.matrix-row{display:flex;gap:2px;align-items:center;padding:2px 0;border-radius:4px;transition:background .15s}.matrix-row:hover{background:#ffffff05}.matrix-label{width:58px;display:flex;align-items:center;gap:4px;padding-left:4px;position:relative}.matrix-icon{font-size:10px;font-weight:700;font-family:monospace;min-width:18px}.matrix-label-text{font-size:9px;font-weight:500;opacity:.7;display:none}@media(min-width:500px){.matrix-label-text{display:inline}}.row-active-dot{width:5px;height:5px;border-radius:50%;position:absolute;right:2px;animation:pulse 1.5s ease-in-out infinite}@keyframes pulse{0%,to{opacity:.5;transform:scale(1)}50%{opacity:1;transform:scale(1.2)}}.matrix-cells{display:flex;gap:2px}.matrix-cell-empty{width:30px;height:26px;background:#151520;border-radius:4px;opacity:.25;border:1px dashed #252542;cursor:not-allowed}.matrix-cell-empty:hover{opacity:.35}.matrix-footer{display:flex;justify-content:center;padding-top:4px;border-top:1px solid #252542;margin-top:2px}.matrix-hint{font-size:9px;color:#444;font-family:monospace}.loop-pad-grid{display:flex;align-items:center;gap:6px;padding:4px 8px;background:#1a1a2e;border-radius:6px}.pads-container{display:flex;gap:4px;flex-wrap:nowrap}.loop-pad{position:relative;min-width:40px;height:28px;padding:0 8px;border:none;border-radius:4px;background:#252542;cursor:pointer;overflow:hidden;transition:transform .1s,box-shadow .15s;display:flex;align-items:center;justify-content:center;gap:4px}.loop-pad.compact{min-width:30px;width:30px;height:26px;padding:0;font-size:10px;border:1px solid transparent;transition:all .15s}.loop-pad.compact:hover{border-color:#fff3}.loop-pad.compact.active{border-color:var(--loop-color)}.loop-pad:hover{transform:scale(1.05)}.loop-pad:active{transform:scale(.95)}.loop-pad.active{box-shadow:0 0 8px var(--loop-color),inset 0 0 8px #ffffff1a;background:linear-gradient(135deg,rgba(255,255,255,.1),transparent)}.loop-pad-progress{position:absolute;bottom:0;left:0;height:2px;width:calc(var(--phase) * 100%);background:var(--loop-color);transition:width .1s linear}.loop-pad.active .loop-pad-progress{box-shadow:0 0 4px var(--loop-color)}.loop-pad-icon{font-size:9px;font-weight:700;font-family:monospace;color:#555;opacity:.7}.loop-pad.active .loop-pad-icon{color:var(--loop-color);opacity:1}.loop-pad-label{font-size:10px;font-weight:700;color:#666;font-family:monospace}.loop-pad.active .loop-pad-label{color:var(--loop-color)}.loop-pad-status{font-size:10px;color:#555;font-family:monospace}.loop-pad.active .loop-pad-status{color:#fff}.intensity-mode-btn{padding:2px 6px;border-radius:4px;font-size:9px;font-weight:600;cursor:pointer;transition:all .2s;border:1px solid #444;background:#0000004d;color:#888;margin-left:auto}.intensity-mode-btn:hover{border-color:#666;color:#aaa}.intensity-mode-btn.mode-show{border-color:#60a5fa;color:#60a5fa;background:#60a5fa1a}.intensity-mode-btn.mode-edit{border-color:#f472b6;color:#f472b6;background:#f472b61a}.loop-pad-wrapper{position:relative}.loop-pad-wrapper.selected:after{content:"";position:absolute;inset:-2px;border:2px solid #f472b6;border-radius:6px;pointer-events:none;animation:pulse-border 1s ease-in-out infinite}@keyframes pulse-border{0%,to{opacity:.5}50%{opacity:1}}.intensity-panel{margin:8px 0;padding:8px;background:#0000004d;border-radius:8px;border:1px solid #333;display:flex;flex-direction:column;gap:8px;max-height:250px;overflow-y:auto}.intensity-loop-row{display:flex;align-items:stretch;gap:8px;cursor:pointer;border-radius:6px;padding:4px;transition:background .15s}.intensity-loop-row:hover{background:#ffffff0d}.intensity-loop-row.selected{background:#ffffff1a;box-shadow:inset 0 0 0 1px #fff3}.intensity-loop-label{min-width:50px;font-size:10px;font-weight:700;font-family:monospace;display:flex;align-items:center;padding-left:4px}.intensity-empty{color:#555;font-size:11px;font-style:italic;text-align:center;padding:12px}.loop-pad.has-intensity{overflow:hidden}.loop-pad.pending{animation:pending-pulse .8s ease-in-out infinite;border:1px solid var(--loop-color)!important;opacity:.85}.loop-pad.pending .loop-pad-progress{display:none}@keyframes pending-pulse{0%,to{box-shadow:0 0 4px var(--loop-color),inset 0 0 4px #ffffff0d;background:linear-gradient(135deg,rgba(255,255,255,.03),transparent)}50%{box-shadow:0 0 12px var(--loop-color),inset 0 0 8px #ffffff26;background:linear-gradient(135deg,rgba(255,255,255,.12),transparent)}}.pending-indicator{font-size:8px;color:var(--loop-color);animation:pending-dots 1s ease-in-out infinite;margin-left:2px}@keyframes pending-dots{0%,to{opacity:.4}50%{opacity:1}}.loop-pad.pending-stop{animation:pending-stop-pulse .8s ease-in-out infinite;border:1px solid rgba(255,100,100,.6)!important}@keyframes pending-stop-pulse{0%,to{box-shadow:0 0 4px var(--loop-color),inset 0 0 4px #ff64641a;opacity:1}50%{box-shadow:0 0 8px #ff646480,inset 0 0 6px #ff646433;opacity:.7}}@media(max-width:600px){.loop-pad{min-width:36px;height:24px;padding:0 6px}.loop-pad-label{font-size:10px}.loop-pad-status,.player-header{font-size:9px}}.section-bar{background:#1a1a2e;border-radius:8px;padding:6px 10px;display:flex;flex-direction:row;align-items:center;gap:8px;flex-shrink:0}.section-header{display:flex;flex-direction:row;align-items:center;gap:6px;flex-shrink:0}.current-section{display:flex;align-items:center;gap:3px}.section-label{font-size:10px;color:#555;text-transform:uppercase}.section-name{font-size:20px;font-weight:700;color:#4ade80;font-family:monospace}.next-section{display:flex;align-items:center;gap:4px;padding:4px 8px;background:#252542;border-radius:4px;animation:pulse 1s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.7}}.next-label{font-size:10px;color:#888}.next-name{font-size:14px;font-weight:700;color:#f472b6}.next-countdown{font-size:11px;color:#f472b6;font-family:monospace}.section-progress{width:60px;height:16px;background:#252542;border-radius:8px;position:relative;overflow:hidden;flex-shrink:0}.progress-fill{position:absolute;top:0;left:0;height:100%;background:linear-gradient(90deg,#4ade80,#60a5fa);transition:width .1s linear}.progress-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:11px;font-weight:600;color:#fff;font-family:monospace;text-shadow:0 1px 2px rgba(0,0,0,.5)}.section-buttons{display:flex;flex-wrap:wrap;gap:4px;justify-content:center}.section-button{padding:6px 10px;border:1px solid #333;border-radius:4px;background:#252542;color:#888;cursor:pointer;transition:all .15s;display:flex;flex-direction:row;align-items:center;gap:4px}.section-button:not(:disabled):hover{border-color:#666;color:#fff}.section-button:disabled{cursor:not-allowed;opacity:.5}.section-button.current{border-color:#4ade80;background:#4ade801a;color:#4ade80}.section-button.queued{border-color:#f472b6;background:#f472b61a;color:#f472b6;animation:pulse 1s ease-in-out infinite}.section-button.voted{border-color:#60a5fa;background:#60a5fa26;color:#60a5fa}.button-name{font-size:13px;font-weight:700;line-height:1}.vote-count{font-size:10px;color:#f59e0b;font-weight:600}.queued-indicator{font-size:11px;color:#f472b6;font-weight:700}.memory-indicator{font-size:9px;color:#a855f7;font-weight:700;background:#a855f733;padding:2px 4px;border-radius:3px}.section-button.has-memory{border-color:#a855f780}.section-button.has-memory.current{border-color:#a855f7;box-shadow:0 0 6px #a855f74d}.vote-notice{font-size:9px;color:#555;font-style:italic}.create-section-buttons{display:flex;flex-wrap:nowrap;gap:4px;margin-left:0;padding-left:8px;border-left:1px solid #333;padding-top:0;border-top:none}.create-section-btn{display:flex;flex-direction:row;align-items:center;gap:3px;padding:5px 8px;border:1px dashed #444;border-radius:4px;background:#1a1a2e;color:#666;cursor:pointer;transition:all .15s}.create-section-btn:hover{border-color:#4ade80;color:#4ade80;background:#4ade801a}.create-section-btn.voted{border-color:#60a5fa;border-style:solid;color:#60a5fa;background:#60a5fa26}.create-section-btn.memory{border-color:#a855f7}.create-section-btn.memory:hover{border-color:#a855f7;color:#a855f7;background:#a855f71a}.create-section-btn.memory.voted{border-color:#a855f7;color:#a855f7;background:#a855f726}.btn-icon{font-size:14px;font-weight:700;line-height:1}.btn-label{font-size:9px;text-transform:uppercase}.vote-notice{display:none}@media(min-width:769px){.section-bar{flex-direction:column;gap:6px}.section-header{flex-direction:column}.section-progress{width:100%}.create-section-buttons{flex-wrap:wrap;padding-left:0;border-left:none;padding-top:6px;border-top:1px solid #333}}@media(max-width:600px){.section-bar{gap:6px;padding:4px 8px}.section-progress{width:50px}.section-name{font-size:16px}.section-button{padding:4px 6px}.button-name{font-size:11px}}.transport-controls{display:flex;flex-direction:row;align-items:center;gap:8px;padding:6px 10px;background:#1a1a2e;border-radius:8px;flex-shrink:0}.transport-buttons{display:flex;gap:8px}.transport-button{width:40px;height:40px;border:none;border-radius:50%;background:#252542;color:#888;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s}.transport-button svg{width:18px;height:18px}.transport-button:not(:disabled):hover{background:#333;color:#fff}.transport-button:disabled{opacity:.4;cursor:not-allowed}.transport-button.play{width:48px;height:48px;background:#4ade80;color:#000}.transport-button.play:not(:disabled):hover{background:#22c55e;color:#000}.transport-button.play.active{background:#fbbf24}.transport-button.stop{background:#ef4444;color:#fff}.transport-button.stop:not(:disabled):hover{background:#dc2626}.tempo-control{display:flex;flex-direction:row;align-items:center;gap:6px;margin-left:0;padding-left:8px;border-left:1px solid #333;padding-top:0;border-top:none}.tempo-control label{font-size:10px;color:#666;text-transform:uppercase;letter-spacing:.5px}.tempo-control input[type=range]{width:70px;height:6px;appearance:none;background:#333;border-radius:3px;cursor:pointer}.tempo-control input[type=range]::-webkit-slider-thumb{appearance:none;width:16px;height:16px;border-radius:50%;background:#60a5fa;cursor:pointer}.tempo-control input[type=range]:disabled{opacity:.5;cursor:not-allowed}.tempo-value{font-size:14px;font-weight:700;color:#fff;font-family:monospace;min-width:32px}.sync-indicator{display:none}@media(max-width:600px){.transport-controls{padding:4px 8px}.transport-button{width:32px;height:32px}.transport-button.play{width:36px;height:36px}.tempo-control input[type=range]{width:60px}}.room-join{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;padding:20px;background:linear-gradient(135deg,#0a0a0f,#1a1a2e)}.join-header{text-align:center;margin-bottom:32px}.join-header h1{font-size:48px;font-weight:700;color:#fff;margin:0;background:linear-gradient(135deg,#f472b6,#60a5fa);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.join-header p{color:#666;margin-top:8px}.mode-toggle{display:flex;gap:4px;padding:4px;background:#1a1a2e;border-radius:12px;margin-bottom:24px}.mode-toggle button{padding:12px 24px;border:none;border-radius:8px;background:transparent;color:#666;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s}.mode-toggle button.active{background:#252542;color:#fff}.join-form{width:100%;max-width:320px;display:flex;flex-direction:column;gap:20px}.form-group{display:flex;flex-direction:column;gap:8px}.form-group label{font-size:12px;color:#888;text-transform:uppercase;letter-spacing:1px}.form-group input{padding:14px 16px;border:2px solid #333;border-radius:8px;background:#1a1a2e;color:#fff;font-size:16px;transition:border-color .2s}.form-group input:focus{outline:none;border-color:#60a5fa}.form-group input.prefilled{border-color:#4ade80;background:#4ade801a;cursor:default}.form-group label .from-qr{color:#4ade80;font-weight:600;text-transform:none}.color-picker{display:flex;gap:8px}.color-option{width:40px;height:40px;border:3px solid transparent;border-radius:50%;cursor:pointer;transition:all .2s}.color-option:hover{transform:scale(1.1)}.color-option.selected{border-color:#fff;box-shadow:0 0 15px currentColor}.join-button{padding:16px;border:none;border-radius:8px;background:linear-gradient(135deg,#f472b6,#60a5fa);color:#fff;font-size:16px;font-weight:600;cursor:pointer;transition:transform .2s,box-shadow .2s}.join-button:hover{transform:translateY(-2px);box-shadow:0 10px 30px #60a5fa4d}.join-button:active{transform:translateY(0)}.glass-quote{margin-top:48px;text-align:center;color:#444}.glass-quote p{font-size:18px;font-style:italic;margin:0}.glass-quote span{font-size:12px}.room-share{display:flex;flex-direction:row;align-items:center;gap:8px;padding:6px 10px;background:#1a1a2e;border-radius:8px;flex-shrink:0}.share-info{display:flex;flex-direction:column;gap:4px}.room-code{font-size:16px;font-weight:700;color:#fff;font-family:monospace;letter-spacing:1px}.player-count{font-size:11px;color:#666}.track-allocation{font-size:10px;color:#60a5fa;font-weight:600;padding:2px 6px;background:#60a5fa26;border-radius:6px;margin-top:2px;cursor:help}.connection-status{font-size:10px;padding:2px 6px;border-radius:6px;margin-top:2px}.connection-status.connected{color:#4ade80;background:#4ade8026}.connection-status.disconnected{color:#f87171;background:#f8717126}.share-actions{display:flex;flex-direction:row;align-items:center;gap:6px;margin-left:0}.copy-button{padding:6px 12px;border:1px solid #333;border-radius:4px;background:transparent;color:#888;font-size:11px;cursor:pointer;transition:all .2s}.copy-button:hover{border-color:#60a5fa;color:#60a5fa}.qr-container{padding:6px;background:#252542;border-radius:6px}@media(max-width:600px){.join-header h1{font-size:32px}.room-share{flex-direction:column;align-items:flex-start}.share-actions{width:100%;justify-content:space-between}}*{box-sizing:border-box}body{margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:#0a0a0f;color:#fff;overflow-x:hidden}#root{min-height:100vh}.app{display:flex;flex-direction:column;min-height:100vh}.app-header{display:flex;align-items:center;justify-content:space-between;padding:8px 16px;background:#1a1a2ee6;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid #252542;position:sticky;top:0;z-index:100}.app-header h1{margin:0;font-size:18px;font-weight:700;background:linear-gradient(135deg,#f472b6,#60a5fa);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.audio-unlock-btn{background:linear-gradient(135deg,#ef4444,#f97316);color:#fff;border:none;padding:8px 16px;border-radius:20px;font-size:14px;font-weight:600;cursor:pointer;animation:pulse-glow 1.5s ease-in-out infinite;box-shadow:0 0 20px #ef444480}.audio-unlock-btn:active{transform:scale(.95)}@keyframes pulse-glow{0%,to{box-shadow:0 0 20px #ef444480}50%{box-shadow:0 0 30px #ef4444cc}}.app-main{flex:1;display:flex;flex-direction:column;gap:6px;padding:6px 12px}.toolbar-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.timeline-section{width:100%;background:#0a0a0f;border-radius:8px;border:1px solid #252542;overflow:hidden;flex:1;min-height:300px;display:flex;flex-direction:column}.controls-and-pads-row{display:flex;flex-direction:column;gap:6px;flex-shrink:0}.controls-column{display:flex;flex-direction:row;gap:4px;flex-shrink:0;flex-wrap:nowrap;align-items:stretch;overflow-x:auto}@media(min-width:769px){.controls-and-pads-row{flex-direction:row;align-items:flex-start}.controls-column{flex-direction:column;flex-wrap:nowrap;overflow-x:visible}}.loop-pads-row{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;flex:1}.loop-pads-row::-webkit-scrollbar{height:4px}.loop-pads-row>*{flex:0 0 auto}.app-footer{padding:12px 24px;text-align:center;background:#1a1a2e80;border-top:1px solid #252542}.app-footer p{margin:0;font-size:11px;color:#555}.app-footer .copyright{margin-top:4px;font-size:10px;color:#888}.loading{display:flex;align-items:center;justify-content:center;min-height:100vh;font-size:18px;color:#666}@media(max-width:768px){.app-header{flex-direction:column;gap:8px;padding:8px 12px}.app-main{padding:8px;gap:6px}.toolbar-row{gap:8px}.timeline-section{min-height:180px}}@media(max-width:480px)and (orientation:portrait){.app-header{padding:6px 8px}.app-header h1{font-size:16px}.app-main{padding:4px;gap:4px}.timeline-section{min-height:150px;overflow-y:auto}.loop-pads-row{flex-wrap:nowrap;gap:6px;padding:4px 0}.toolbar-row{flex-wrap:wrap;gap:6px;justify-content:center}.app-footer{padding:8px}.app-footer p{font-size:9px}}@media(max-height:500px)and (orientation:landscape){.app-header{padding:4px 12px;flex-direction:row}.app-header h1{font-size:14px}.app-main{padding:4px 8px;gap:4px;flex-direction:row;flex-wrap:wrap}.timeline-section{flex:2;min-width:60%;min-height:120px;max-height:calc(100vh - 80px)}.loop-pads-row{flex:1;flex-direction:column;overflow-y:auto;overflow-x:hidden;max-height:calc(100vh - 80px);gap:4px}.toolbar-row{width:100%;gap:6px;flex-wrap:nowrap;overflow-x:auto}.app-footer{display:none}}@media(max-width:360px){.app-header h1{font-size:14px}.app-main{padding:2px}}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:#1a1a2e;border-radius:3px}::-webkit-scrollbar-thumb{background:#333;border-radius:3px}::-webkit-scrollbar-thumb:hover{background:#444}::selection{background:#60a5fa4d}@media(hover:none){button{-webkit-tap-highlight-color:transparent}}