.offline-indicator[data-v-65b9d241]{position:fixed;top:0;left:0;right:0;background:var(--warning-color, #ffc107);color:var(--warning-text, #000);padding:.5rem 1rem;text-align:center;z-index:9999;animation:slideDown-65b9d241 .3s ease-out}.offline-content[data-v-65b9d241]{display:flex;align-items:center;justify-content:center;gap:.5rem;font-size:.875rem;font-weight:500}.offline-icon[data-v-65b9d241]{font-size:1rem}.offline-text[data-v-65b9d241]{text-transform:uppercase;letter-spacing:.5px}@keyframes slideDown-65b9d241{0%{transform:translateY(-100%)}to{transform:translateY(0)}}@media (max-width: 480px){.offline-indicator[data-v-65b9d241]{padding:.75rem}.offline-content[data-v-65b9d241]{font-size:.8rem}}.pwa-install-prompt[data-v-8edd40ca]{position:fixed;top:0;left:0;right:0;bottom:0;background:#000c;display:flex;align-items:center;justify-content:center;z-index:10000;padding:1rem}.pwa-install-content[data-v-8edd40ca]{background:var(--card-bg, #2d2d2d);border-radius:16px;padding:2rem;max-width:400px;width:100%;position:relative;box-shadow:0 20px 40px #0000004d;border:1px solid rgba(255,255,255,.1)}.pwa-install-header[data-v-8edd40ca]{display:flex;align-items:center;gap:1rem;margin-bottom:1rem}.pwa-install-icon[data-v-8edd40ca]{font-size:2rem}.pwa-install-header h3[data-v-8edd40ca]{margin:0;color:var(--text-primary, #ffffff);font-size:1.5rem}.pwa-install-description[data-v-8edd40ca]{color:var(--text-secondary, #cccccc);line-height:1.6;margin-bottom:1.5rem}.pwa-install-benefits[data-v-8edd40ca]{margin-bottom:2rem}.benefit-item[data-v-8edd40ca]{display:flex;align-items:center;gap:.75rem;margin-bottom:.75rem;color:var(--text-secondary, #cccccc)}.benefit-icon[data-v-8edd40ca]{font-size:1.2rem;width:24px;text-align:center}.pwa-install-actions[data-v-8edd40ca]{display:flex;gap:1rem;flex-direction:column}.pwa-install-btn[data-v-8edd40ca]{padding:.75rem 1.5rem;border:none;border-radius:8px;font-size:1rem;cursor:pointer;transition:all .3s ease;font-weight:500}.pwa-install-btn.primary[data-v-8edd40ca]{background:var(--primary-color, #4a90e2);color:#fff}.pwa-install-btn.primary[data-v-8edd40ca]:hover{background:var(--primary-hover, #357abd);transform:translateY(-2px)}.pwa-install-btn.secondary[data-v-8edd40ca]{background:transparent;color:var(--text-secondary, #cccccc);border:1px solid rgba(255,255,255,.2)}.pwa-install-btn.secondary[data-v-8edd40ca]:hover{background:#ffffff1a;border-color:#ffffff4d}.pwa-install-close[data-v-8edd40ca]{position:absolute;top:1rem;right:1rem;background:none;border:none;color:var(--text-secondary, #cccccc);font-size:1.5rem;cursor:pointer;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:all .3s ease}.pwa-install-close[data-v-8edd40ca]:hover{background:#ffffff1a;color:var(--text-primary, #ffffff)}@media (max-width: 480px){.pwa-install-content[data-v-8edd40ca]{padding:1.5rem;margin:1rem}.pwa-install-actions[data-v-8edd40ca]{flex-direction:column}.pwa-install-btn[data-v-8edd40ca]{width:100%}}.pwa-update-prompt[data-v-b9245362]{position:fixed;top:0;left:0;right:0;bottom:0;background:#000c;display:flex;align-items:center;justify-content:center;z-index:10000;padding:1rem}.pwa-update-content[data-v-b9245362]{background:var(--card-bg, #2d2d2d);border-radius:16px;padding:2rem;max-width:400px;width:100%;position:relative;box-shadow:0 20px 40px #0000004d;border:1px solid rgba(255,255,255,.1)}.pwa-update-header[data-v-b9245362]{display:flex;align-items:center;gap:1rem;margin-bottom:1rem}.pwa-update-icon[data-v-b9245362]{font-size:2rem;animation:spin-b9245362 2s linear infinite}@keyframes spin-b9245362{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.pwa-update-header h3[data-v-b9245362]{margin:0;color:var(--text-primary, #ffffff);font-size:1.5rem}.pwa-update-description[data-v-b9245362]{color:var(--text-secondary, #cccccc);line-height:1.6;margin-bottom:1.5rem}.pwa-update-benefits[data-v-b9245362]{margin-bottom:2rem}.benefit-item[data-v-b9245362]{display:flex;align-items:center;gap:.75rem;margin-bottom:.75rem;color:var(--text-secondary, #cccccc)}.benefit-icon[data-v-b9245362]{font-size:1.2rem;width:24px;text-align:center}.pwa-update-actions[data-v-b9245362]{display:flex;gap:1rem;flex-direction:column}.pwa-update-btn[data-v-b9245362]{padding:.75rem 1.5rem;border:none;border-radius:8px;font-size:1rem;cursor:pointer;transition:all .3s ease;font-weight:500}.pwa-update-btn.primary[data-v-b9245362]{background:var(--success-color, #28a745);color:#fff}.pwa-update-btn.primary[data-v-b9245362]:hover{background:var(--success-hover, #218838);transform:translateY(-2px)}.pwa-update-btn.secondary[data-v-b9245362]{background:transparent;color:var(--text-secondary, #cccccc);border:1px solid rgba(255,255,255,.2)}.pwa-update-btn.secondary[data-v-b9245362]:hover{background:#ffffff1a;border-color:#ffffff4d}.pwa-update-close[data-v-b9245362]{position:absolute;top:1rem;right:1rem;background:none;border:none;color:var(--text-secondary, #cccccc);font-size:1.5rem;cursor:pointer;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:all .3s ease}.pwa-update-close[data-v-b9245362]:hover{background:#ffffff1a;color:var(--text-primary, #ffffff)}@media (max-width: 480px){.pwa-update-content[data-v-b9245362]{padding:1.5rem;margin:1rem}.pwa-update-actions[data-v-b9245362]{flex-direction:column}.pwa-update-btn[data-v-b9245362]{width:100%}}:root{--bg: #0f1220;--panel: #171a2b;--accent: #7c5cff;--accent2:#18c2ff;--text:#e9ecff;--muted:#99a1c2;--grid:#232842;--on:#2a315a;--active:#2de3a0}:root.theme-light{--bg: #f8fafc;--panel: #ffffff;--accent: #7c5cff;--accent2: #18c2ff;--text: #1e293b;--muted: #64748b;--grid: #e2e8f0;--on: #cbd5e1;--active: #2de3a0}:root.theme-dark{--bg: #0f1220;--panel: #171a2b;--accent: #7c5cff;--accent2: #18c2ff;--text: #e9ecff;--muted: #99a1c2;--grid: #232842;--on: #2a315a;--active: #2de3a0}*{box-sizing:border-box}body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:radial-gradient(1200px 600px at 70% -20%,var(--panel),var(--bg) 60%),var(--bg);color:var(--text);transition:background .3s ease,color .3s ease}.wrap{max-width:1080px;margin:32px auto;padding:16px}.card{background:linear-gradient(180deg,#ffffff08,#ffffff03);border:1px solid var(--grid);border-radius:16px;box-shadow:0 10px 40px #0006}.theme-light .card{background:linear-gradient(180deg,#00000008,#00000003);box-shadow:0 10px 40px #0000001a}header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px;border-bottom:1px solid var(--grid)}h1{font-size:20px;margin:0;letter-spacing:.3px}.controls{display:flex;flex-wrap:wrap;gap:12px;align-items:center}button,.btn{background:var(--panel);border:1px solid var(--grid);color:var(--text);padding:10px 14px;border-radius:12px;cursor:pointer;font-weight:600}button:hover{filter:brightness(1.06)}.primary{background:linear-gradient(90deg,var(--accent),var(--accent2));border:none;color:#0b0d18}.add-track-btn{background:linear-gradient(90deg,#2de3a0,#18c2ff);border:none;color:#0b0d18;font-weight:700}.export-btn{background:linear-gradient(90deg,#ff6b6b,#ffa726);border:none;color:#0b0d18;font-weight:700}.import-btn{background:linear-gradient(90deg,#4ecdc4,#44a08d);border:none;color:#0b0d18;font-weight:700}.theme-toggle{display:flex;align-items:center;justify-content:center;width:40px;height:40px;background:var(--panel);border:1px solid var(--grid);border-radius:12px;cursor:pointer;transition:all .3s ease;position:relative;overflow:hidden}.theme-toggle:hover{transform:translateY(-2px);box-shadow:0 4px 12px #00000026;border-color:var(--accent)}.theme-toggle:active{transform:translateY(0)}.theme-icon{font-size:18px;transition:transform .3s ease}.theme-toggle:hover .theme-icon{transform:rotate(180deg)}*{transition:background-color .3s ease,color .3s ease,border-color .3s ease,box-shadow .3s ease}.toggle{display:inline-flex;align-items:center;gap:8px;padding:10px 12px;background:var(--panel);border:1px solid var(--grid);border-radius:12px}.led{width:10px;height:10px;border-radius:50%;background:#3b3f63;box-shadow:0 0 0 2px #2b3154 inset}.led.on{background:var(--active);box-shadow:0 0 12px var(--active),0 0 0 2px #2b3154 inset}.grid{width:100%;overflow:auto}table{width:100%;border-collapse:collapse}th,td{padding:0}thead th{position:sticky;top:0;background:var(--panel);z-index:2}.rowLabel{width:160px;white-space:nowrap;padding:10px 12px;font-weight:700;color:var(--muted);border-right:1px solid var(--grid);position:sticky;left:0;background:var(--panel);z-index:1}.track-header{display:flex;align-items:center;justify-content:space-between;gap:8px}.remove-track-btn{background:var(--bg);border:1px solid var(--grid);color:var(--muted);width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;cursor:pointer;padding:0;transition:all .2s ease}.remove-track-btn:hover{background:var(--panel);color:var(--text);transform:scale(1.1)}.steps{display:grid;grid-template-columns:repeat(16,minmax(28px,1fr))}.cell{aspect-ratio:1 / 1;border-right:1px solid var(--grid);border-bottom:1px solid var(--grid);display:flex;align-items:center;justify-content:center;cursor:pointer}.cell:nth-child(4n){border-right-color:var(--muted)}.cell .dot{width:16px;height:16px;border-radius:6px;background:var(--bg);border:2px solid var(--grid);transition:transform .08s ease,background .12s ease,border-color .12s ease,box-shadow .12s ease}.cell.active .dot{background:var(--on);border-color:var(--accent)}.cell.now{background:var(--panel)}.cell.active.now .dot{background:var(--active);border-color:var(--active);box-shadow:0 0 18px #2de3a0a6;transform:scale(1.1)}.panel{padding:16px 20px;display:grid;grid-template-columns:1fr;gap:16px}.sliders{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}.slider{background:var(--panel);border:1px solid var(--grid);border-radius:12px;padding:12px}.slider label{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin-bottom:6px}input[type=range]{width:100%}.small{font-size:12px;color:var(--muted)}.footer{padding:12px 20px;color:var(--muted);font-size:12px;border-top:1px solid var(--grid);display:flex;justify-content:space-between}.badges{display:flex;gap:8px;align-items:center}.badge{padding:4px 8px;border-radius:999px;background:var(--bg);border:1px solid var(--grid);font-size:11px}code{background:var(--bg);padding:2px 6px;border-radius:6px;border:1px solid var(--grid)}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000c;display:flex;align-items:center;justify-content:center;z-index:1000;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.theme-light .modal-overlay{background:#0006}.modal{background:var(--panel);border:1px solid var(--grid);border-radius:16px;padding:24px;max-width:500px;width:90%;max-height:80vh;overflow-y:auto;box-shadow:0 20px 60px #0009}.theme-light .modal{box-shadow:0 20px 60px #0003}.modal h3{margin:0 0 20px;font-size:18px;color:var(--text)}.track-types{display:grid;gap:12px;margin-bottom:24px}.track-type{display:flex;align-items:center;gap:16px;padding:16px;background:#ffffff08;border:1px solid var(--grid);border-radius:12px;cursor:pointer;transition:all .2s ease}.theme-light .track-type{background:#00000008}.track-type:hover{background:#ffffff0f;border-color:var(--accent);transform:translateY(-2px)}.theme-light .track-type:hover{background:#0000000f}.track-type-icon{font-size:24px;width:48px;height:48px;display:flex;align-items:center;justify-content:center;background:#7c5cff1a;border-radius:12px;border:1px solid rgba(124,92,255,.3)}.track-type-info{flex:1}.track-type-name{font-weight:600;color:var(--text);margin-bottom:4px}.track-type-desc{font-size:12px;color:var(--muted)}.modal-close{width:100%;background:var(--panel);border:1px solid var(--grid);color:var(--text);padding:12px;border-radius:12px;cursor:pointer;font-weight:600;transition:all .2s ease}.modal-close:hover{background:var(--bg);border-color:var(--accent)}.export-section,.import-section{margin-bottom:20px}.export-description,.import-description{color:var(--muted);margin-bottom:16px;font-size:14px}.seed-container{display:flex;gap:8px;margin-bottom:16px}.seed-input{flex:1;background:var(--bg);border:1px solid var(--grid);border-radius:8px;padding:12px;color:var(--text);font-family:Courier New,monospace;font-size:12px;cursor:pointer}.seed-input:focus{outline:none;border-color:var(--accent)}.copy-btn,.import-pattern-btn{background:linear-gradient(90deg,var(--accent),var(--accent2));border:none;color:#0b0d18;padding:12px 16px;border-radius:8px;cursor:pointer;font-weight:600;white-space:nowrap;transition:all .2s ease}.copy-btn:hover,.import-pattern-btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px #7c5cff4d}.seed-info{background:#ffffff08;border:1px solid var(--grid);border-radius:8px;padding:12px;font-size:12px}.theme-light .seed-info{background:#00000008}.seed-info p{margin:4px 0;color:var(--muted)}.seed-info strong{color:var(--text)}.import-error{background:#ff6b6b1a;border:1px solid rgba(255,107,107,.3);border-radius:8px;padding:12px;color:#ff6b6b;font-size:12px;margin-top:12px}.import-success{background:#2ee3a01a;border:1px solid rgba(46,227,160,.3);border-radius:8px;padding:12px;color:#2de3a0;font-size:12px;margin-top:12px}@keyframes recording-pulse{0%{box-shadow:0 0 #ff4757b3}70%{box-shadow:0 0 0 10px #ff475700}to{box-shadow:0 0 #ff475700}}.recording-info{margin-bottom:20px}.recording-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-bottom:24px;padding:16px;background:#ffffff0d;border-radius:8px;border:1px solid var(--grid)}.stat{display:flex;justify-content:space-between;align-items:center;padding:8px 0}.stat-label{font-weight:600;color:var(--muted)}.stat-value{font-family:Courier New,monospace;color:var(--accent);font-weight:700}.recording-events{margin-bottom:24px}.recording-events h4{margin-bottom:12px;color:var(--text);font-size:16px}.events-list{max-height:300px;overflow-y:auto;border:1px solid var(--grid);border-radius:8px;background:#ffffff05}.event-item{display:flex;align-items:center;padding:8px 12px;border-bottom:1px solid var(--grid);font-size:12px;transition:background-color .2s ease}.event-item:hover{background:#ffffff0d}.event-item:last-child{border-bottom:none}.event-time{font-family:Courier New,monospace;color:var(--accent);font-weight:600;min-width:60px;margin-right:12px}.event-type{font-weight:600;color:var(--text);min-width:120px;margin-right:12px}.event-details{color:var(--muted);flex:1;font-size:11px}.recording-actions{display:flex;gap:12px;margin-top:16px}.recording-actions button{flex:1;padding:12px 16px;border:none;border-radius:8px;cursor:pointer;font-weight:600;transition:all .2s ease}.recording-actions .copy-btn{background:linear-gradient(90deg,var(--accent),var(--accent2));color:#0b0d18}.recording-actions .play-btn{background:linear-gradient(90deg,#2ed3a0,#1dd1a1);color:#0b0d18}.recording-actions button:hover{transform:translateY(-1px);box-shadow:0 4px 12px #0003}.recording-indicator{position:fixed;top:20px;right:20px;background:#ff4757e6;color:#fff;padding:8px 16px;border-radius:20px;font-size:12px;font-weight:600;z-index:1000;animation:recording-pulse 2s infinite}.sessions-section{background:var(--panel);border-radius:12px;padding:20px;margin:20px 0;border:1px solid var(--grid)}.sessions-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.sessions-header h3{margin:0;color:var(--text);font-size:18px;font-weight:600}.sessions-controls{display:flex;gap:12px;align-items:center}.recording-btn{background:linear-gradient(90deg,#ff6b6b,#ee5a52);border:none;color:#fff;padding:12px 16px;border-radius:8px;cursor:pointer;font-weight:600;transition:all .2s ease;position:relative;overflow:hidden}.recording-btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px #ff6b6b4d}.recording-btn.recording{background:linear-gradient(90deg,#ff4757,#ff3742);animation:recording-pulse 2s infinite}.sessions-btn{background:linear-gradient(90deg,var(--accent),var(--accent2));border:none;color:#0b0d18;padding:12px 16px;border-radius:8px;cursor:pointer;font-weight:600;transition:all .2s ease}.sessions-btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px #7c5cff4d}.recording-status{background:#ff47571a;border:1px solid rgba(255,71,87,.3);border-radius:8px;padding:12px;margin-bottom:12px}.recording-indicator{display:flex;align-items:center;gap:8px;color:#ff4757;font-weight:600}.recording-dot{width:8px;height:8px;background:#ff4757;border-radius:50%;animation:recording-pulse 1s infinite}.save-success{background:#2ee3a01a;border:1px solid rgba(46,227,160,.3);border-radius:8px;padding:12px;color:#2de3a0;font-weight:600;text-align:center;margin-bottom:12px}.saved-sessions-list{max-height:400px;overflow-y:auto;margin-bottom:20px}.no-sessions-message{text-align:center;color:var(--muted);padding:40px 20px;font-style:italic}.saved-session-item{background:#ffffff0d;border:1px solid var(--grid);border-radius:8px;padding:16px;margin-bottom:12px;transition:all .2s ease}.saved-session-item:hover{background:#ffffff14;transform:translateY(-1px)}.saved-session-item:last-child{margin-bottom:0}.session-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;flex-wrap:wrap;gap:8px}.session-name{font-weight:700;color:var(--text);font-size:16px;flex:1;min-width:200px}.session-date{color:var(--muted);font-size:12px;font-family:Courier New,monospace}.session-duration{color:var(--accent);font-weight:600;font-size:14px;font-family:Courier New,monospace}.session-actions{display:flex;gap:8px;flex-wrap:wrap}.session-actions button{padding:8px 12px;border:none;border-radius:6px;cursor:pointer;font-weight:600;font-size:12px;transition:all .2s ease;flex:1;min-width:80px}.session-actions .play-btn{background:linear-gradient(90deg,#2ed3a0,#1dd1a1);color:#0b0d18}.session-actions .export-btn{background:linear-gradient(90deg,var(--accent),var(--accent2));color:#0b0d18}.session-actions .delete-btn{background:linear-gradient(90deg,#ff6b6b,#ee5a52);color:#fff}.session-actions button:hover{transform:translateY(-1px);box-shadow:0 2px 8px #0003}.recording-summary{background:#ffffff0d;border:1px solid var(--grid);border-radius:8px;padding:16px;margin-bottom:20px;display:grid;grid-template-columns:1fr 1fr;gap:12px}.summary-item{display:flex;justify-content:space-between;align-items:center}.summary-label{color:var(--muted);font-weight:600}.summary-value{color:var(--accent);font-weight:700;font-family:Courier New,monospace}.name-input-container{margin-bottom:20px}.name-input-container label{display:block;margin-bottom:8px;color:var(--text);font-weight:600}.name-input-container input{width:100%;padding:12px 16px;border:1px solid var(--grid);border-radius:8px;background:var(--bg);color:var(--text);font-size:14px;transition:all .2s ease}.name-input-container input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px #7c5cff33}.name-input-container input::placeholder{color:var(--muted)}.modal-actions{display:flex;gap:12px;margin-top:20px}.modal-actions button{flex:1;padding:12px 16px;border:none;border-radius:8px;cursor:pointer;font-weight:600;transition:all .2s ease}.modal-actions button:disabled{opacity:.5;cursor:not-allowed;transform:none!important}.modal-actions .primary{background:linear-gradient(90deg,var(--accent),var(--accent2));color:#0b0d18}.modal-actions button:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 4px 12px #0003}@media (max-width: 640px){.wrap{margin:8px auto;padding:8px}.card{border-radius:12px;margin:0}header{flex-direction:column;gap:16px;padding:12px 16px}h1{font-size:18px;text-align:center}.controls{flex-wrap:wrap;gap:8px;justify-content:center}button,.btn{padding:12px 16px;font-size:14px;min-height:44px;border-radius:10px}.primary{font-size:16px;font-weight:700;padding:14px 20px}.grid{overflow-x:auto;-webkit-overflow-scrolling:touch}table{min-width:100%;font-size:12px}.rowLabel{width:100px;padding:8px 10px;font-size:12px;font-weight:600}.cell{min-width:40px;min-height:40px;border-radius:6px;margin:1px}.cell .dot{width:20px;height:20px;border-radius:8px}.cell.active.now .dot{transform:scale(1.2)}.track-header{flex-direction:row;align-items:center;justify-content:space-between;padding:8px 12px;gap:8px}.remove-track-btn{width:28px;height:28px;font-size:16px}.panel{padding:16px}.sliders{flex-direction:column;gap:16px}.slider{padding:16px}.slider label{font-size:14px;margin-bottom:8px}input[type=range]{width:100%;height:8px}.modal-overlay{padding:16px}.modal{margin:0;width:100%;max-height:90vh;border-radius:12px;padding:20px}.modal h3{font-size:18px;margin-bottom:16px}.track-types{gap:12px}.track-type{padding:16px;border-radius:10px}.track-type-icon{font-size:24px;width:40px;height:40px}.track-type-name{font-size:14px}.track-type-desc{font-size:12px}.export-section,.import-section{margin-bottom:24px}.seed-container{flex-direction:column;gap:12px}.seed-input{padding:16px;font-size:14px;min-height:44px}.copy-btn,.import-pattern-btn{padding:16px;font-size:14px;min-height:44px;width:100%}.footer{padding:16px;flex-direction:column;gap:8px;text-align:center}.badges{justify-content:center;gap:8px}.badge{font-size:10px;padding:6px 10px}.theme-toggle{width:44px;height:44px}.theme-icon{font-size:20px}.toggle{padding:12px 16px;min-height:44px}@media (max-width: 480px){.wrap{margin:4px auto;padding:4px}.card{border-radius:8px}header{padding:8px 12px}h1{font-size:16px}.controls{gap:6px}button,.btn{padding:10px 12px;font-size:13px;min-height:40px}.primary{font-size:15px;padding:12px 16px}.rowLabel{width:80px;padding:6px 8px;font-size:11px}.cell{min-width:35px;min-height:35px}.cell .dot{width:18px;height:18px}.modal{padding:16px;margin:8px;width:calc(100% - 16px)}.track-type{padding:12px}.track-type-icon{font-size:20px;width:32px;height:32px}}@media (max-width: 640px) and (orientation: landscape){.wrap{margin:4px auto}header{flex-direction:row;gap:12px}.controls{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px}.grid{max-height:60vh;overflow-y:auto}.modal{max-height:80vh}}}@media (max-width: 640px){.cell{touch-action:manipulation;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}.cell:active{transform:scale(.95);transition:transform .1s ease}button,.btn{touch-action:manipulation;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}button:active,.btn:active{transform:scale(.98);transition:transform .1s ease}.grid{scroll-behavior:smooth;-webkit-overflow-scrolling:touch}.cell.active{animation:pulse .3s ease}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.05)}to{transform:scale(1)}}input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;cursor:pointer}input[type=range]::-webkit-slider-track{background:var(--grid);height:8px;border-radius:4px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--accent);height:20px;width:20px;border-radius:50%;border:2px solid var(--panel);box-shadow:0 2px 4px #0003}input[type=range]::-moz-range-track{background:var(--grid);height:8px;border-radius:4px;border:none}input[type=range]::-moz-range-thumb{background:var(--accent);height:20px;width:20px;border-radius:50%;border:2px solid var(--panel);box-shadow:0 2px 4px #0003;cursor:pointer}.modal{touch-action:pan-y}.modal-close{min-height:44px;touch-action:manipulation}.track-type{touch-action:manipulation;-webkit-tap-highlight-color:transparent}.track-type:active{transform:scale(.98);transition:transform .1s ease}.seed-input,.theme-toggle{touch-action:manipulation;-webkit-tap-highlight-color:transparent}.theme-toggle:active{transform:scale(.95);transition:transform .1s ease}}@media (max-width: 640px){.cell:active .dot{transform:scale(1.2);transition:transform .1s ease}button:active,.btn:active{transform:scale(.98);transition:transform .1s ease}input[type=range]:active{transform:scale(1.05);transition:transform .1s ease}.track-type:active{transform:scale(.98);transition:transform .1s ease}.theme-toggle:active{transform:scale(.95);transition:transform .1s ease}.modal-close:active{transform:scale(.98);transition:transform .1s ease}*{scroll-behavior:smooth}.grid{scroll-snap-type:x mandatory}.grid .steps{scroll-snap-align:start}.cell:focus,button:focus,.btn:focus{outline:2px solid var(--accent);outline-offset:2px}.cell.active .dot{box-shadow:0 0 8px #2de3a099}.cell.active.now .dot{box-shadow:0 0 12px #2de3a0cc}.rowLabel,.badge{text-shadow:0 1px 2px rgba(0,0,0,.1)}.modal{backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.modal-overlay{backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}}.mobile-device{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.mobile-device .wrap{max-width:100vw;margin:0;padding:4px}.mobile-device .card{border-radius:8px;margin:0;box-shadow:0 2px 8px #0000001a}.mobile-device header{padding:8px 12px;gap:8px}.mobile-device h1{font-size:16px;margin:0}.mobile-device .controls{gap:6px;flex-wrap:wrap;justify-content:center}.mobile-device button,.mobile-device .btn{min-height:44px;padding:12px 16px;font-size:14px;border-radius:8px}.mobile-device .primary{font-size:16px;font-weight:700;padding:14px 20px}.mobile-device .grid{overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-behavior:smooth}.mobile-device .cell{min-width:40px;min-height:40px;border-radius:6px;margin:1px;touch-action:manipulation}.mobile-device .cell .dot{width:20px;height:20px;border-radius:8px}.mobile-device .cell:active{transform:scale(.95);transition:transform .1s ease}.mobile-device .rowLabel{width:80px;padding:6px 8px;font-size:11px;font-weight:600}.mobile-device .track-header{flex-direction:row;align-items:center;justify-content:space-between;padding:6px 8px;gap:6px}.mobile-device .remove-track-btn{width:24px;height:24px;font-size:14px}.mobile-device .panel{padding:12px}.mobile-device .sliders{flex-direction:column;gap:12px}.mobile-device .slider{padding:12px}.mobile-device .slider label{font-size:13px;margin-bottom:6px}.mobile-device input[type=range]{width:100%;height:8px;-webkit-appearance:none;-moz-appearance:none;appearance:none}.mobile-device input[type=range]::-webkit-slider-thumb{height:20px;width:20px;border-radius:50%;background:var(--accent);border:2px solid var(--panel);box-shadow:0 2px 4px #0003}.mobile-device .modal{margin:8px;width:calc(100% - 16px);max-height:90vh;border-radius:8px;padding:16px}.mobile-device .modal h3{font-size:16px;margin-bottom:12px}.mobile-device .track-type{padding:12px;border-radius:8px}.mobile-device .track-type-icon{font-size:20px;width:32px;height:32px}.mobile-device .track-type-name{font-size:13px}.mobile-device .track-type-desc{font-size:11px}.mobile-device .seed-container{flex-direction:column;gap:8px}.mobile-device .seed-input{padding:12px;font-size:13px;min-height:44px}.mobile-device .copy-btn,.mobile-device .import-pattern-btn{padding:12px;font-size:13px;min-height:44px;width:100%}.mobile-device .footer{padding:12px;flex-direction:column;gap:6px;text-align:center}.mobile-device .badges{justify-content:center;gap:6px}.mobile-device .badge{font-size:9px;padding:4px 8px}@media (max-width: 640px) and (orientation: landscape){.mobile-device .wrap{margin:2px auto}.mobile-device header{flex-direction:row;gap:8px}.mobile-device .controls{flex-wrap:nowrap;overflow-x:auto;padding-bottom:2px}.mobile-device .grid{max-height:60vh;overflow-y:auto}.mobile-device .modal{max-height:80vh}}@media (max-width: 640px){.recording-stats{grid-template-columns:1fr;gap:8px}.event-item{flex-direction:column;align-items:flex-start;gap:4px}.event-time,.event-type{min-width:auto;margin-right:0}.recording-actions{flex-direction:column}.recording-actions button{width:100%}}@media (max-width: 640px){.sessions-header{flex-direction:column;gap:12px;align-items:stretch}.sessions-controls{flex-direction:column;gap:8px}.session-header{flex-direction:column;align-items:flex-start;gap:4px}.session-name{min-width:auto;width:100%}.session-actions{flex-direction:column}.session-actions button{width:100%}.modal-actions{flex-direction:column}}.session-playback-status{background:#2ee3a01a;border:1px solid rgba(46,227,160,.3);border-radius:8px;padding:16px;margin-bottom:12px;animation:session-playback-pulse 2s infinite}@keyframes session-playback-pulse{0%{box-shadow:0 0 #2ee3a066}70%{box-shadow:0 0 0 8px #2ee3a000}to{box-shadow:0 0 #2ee3a000}}.session-playback-indicator{display:flex;align-items:center;gap:8px;color:#2de3a0;font-weight:600;margin-bottom:12px}.session-playback-dot{width:8px;height:8px;background:#2de3a0;border-radius:50%;animation:session-playback-dot-pulse 1s infinite}@keyframes session-playback-dot-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.2);opacity:.7}to{transform:scale(1);opacity:1}}.session-playback-time{font-family:Courier New,monospace;font-weight:700;color:#2de3a0;margin-left:auto}.session-playback-progress{display:flex;align-items:center;gap:12px}.progress-bar{flex:1;height:8px;background:#2ee3a033;border-radius:4px;overflow:hidden;position:relative}.progress-fill{height:100%;background:linear-gradient(90deg,#2de3a0,#1dd1a1);border-radius:4px;transition:width .3s ease;position:relative}.progress-fill:after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);animation:progress-shine 2s infinite}@keyframes progress-shine{0%{transform:translate(-100%)}to{transform:translate(100%)}}.stop-session-btn{background:linear-gradient(90deg,#ff6b6b,#ee5a52);border:none;color:#fff;padding:8px 12px;border-radius:6px;cursor:pointer;font-weight:600;font-size:12px;transition:all .2s ease;white-space:nowrap}.stop-session-btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px #ff6b6b4d}@media (max-width: 640px){.session-playback-indicator{flex-direction:column;align-items:flex-start;gap:4px}.session-playback-time{margin-left:0}.session-playback-progress{flex-direction:column;gap:8px}.stop-session-btn{width:100%;padding:10px}}.session-playback-header{display:flex;align-items:center;gap:8px;background:#2ee3a01a;border:1px solid rgba(46,227,160,.3);border-radius:6px;padding:6px 12px;margin:8px 0;color:#2de3a0;font-weight:600;font-size:14px;animation:session-playback-header-pulse 2s infinite}@keyframes session-playback-header-pulse{0%{box-shadow:0 0 #2ee3a04d}70%{box-shadow:0 0 0 4px #2ee3a000}to{box-shadow:0 0 #2ee3a000}}.session-playback-header-dot{width:6px;height:6px;background:#2de3a0;border-radius:50%;animation:session-playback-header-dot-pulse 1s infinite}@keyframes session-playback-header-dot-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.3);opacity:.7}to{transform:scale(1);opacity:1}}.cell.session-playing{animation:session-cell-pulse .5s ease-in-out}.cell.session-playing .dot{background:linear-gradient(45deg,#2de3a0,#1dd1a1);box-shadow:0 0 8px #2ee3a099;animation:session-dot-glow 1s infinite}@keyframes session-cell-pulse{0%{transform:scale(1)}50%{transform:scale(1.05)}to{transform:scale(1)}}@keyframes session-dot-glow{0%{box-shadow:0 0 8px #2ee3a099}50%{box-shadow:0 0 12px #2ee3a0cc}to{box-shadow:0 0 8px #2ee3a099}}.copy-success-message{background:#2ee3a01a;border:1px solid rgba(46,227,160,.3);border-radius:8px;padding:12px 16px;margin-bottom:16px;color:#2de3a0;font-weight:600;text-align:center;animation:copy-success-fade .3s ease-in-out}@keyframes copy-success-fade{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.sessions-modal-controls{display:flex;justify-content:center;margin-bottom:20px;padding:16px;background:#ffffff0d;border-radius:8px;border:1px solid var(--grid)}.import-session-btn{background:linear-gradient(90deg,var(--accent),var(--accent2));border:none;color:#0b0d18;padding:12px 20px;border-radius:8px;cursor:pointer;font-weight:600;font-size:14px;transition:all .2s ease;display:flex;align-items:center;gap:8px}.import-session-btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px #0003}.import-session-content{max-width:600px;margin:0 auto}.import-instructions{color:var(--muted);margin-bottom:16px;text-align:center;font-size:14px;line-height:1.5}.import-input-container{margin-bottom:20px}.import-session-textarea{width:100%;padding:16px;border:2px solid var(--grid);border-radius:8px;background:var(--panel);color:var(--text);font-family:Courier New,monospace;font-size:12px;line-height:1.4;resize:vertical;min-height:120px;transition:border-color .2s ease}.import-session-textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px #2ee3a033}.import-session-textarea::placeholder{color:var(--muted);opacity:.7}.import-error{background:#ff6b6b1a;border:1px solid rgba(255,107,107,.3);border-radius:8px;padding:12px 16px;margin-bottom:16px;color:#ff6b6b;font-weight:600;text-align:center;animation:import-error-fade .3s ease-in-out}@keyframes import-error-fade{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.import-success{background:#2ee3a01a;border:1px solid rgba(46,227,160,.3);border-radius:8px;padding:12px 16px;margin-bottom:16px;color:#2de3a0;font-weight:600;text-align:center;animation:import-success-fade .3s ease-in-out}@keyframes import-success-fade{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.import-session-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}.import-session-actions .import-btn{background:linear-gradient(90deg,#2de3a0,#1dd1a1);border:none;color:#0b0d18;padding:12px 24px;border-radius:8px;cursor:pointer;font-weight:600;font-size:14px;transition:all .2s ease;display:flex;align-items:center;gap:8px}.import-session-actions .import-btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 4px 12px #2ee3a04d}.import-session-actions .import-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}.import-session-actions .cancel-btn{background:linear-gradient(90deg,#6c757d,#5a6268);border:none;color:#fff;padding:12px 24px;border-radius:8px;cursor:pointer;font-weight:600;font-size:14px;transition:all .2s ease}.import-session-actions .cancel-btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px #6c757d4d}@media (max-width: 640px){.sessions-modal-controls{padding:12px}.import-session-btn{width:100%;justify-content:center;padding:14px 20px}.import-session-content{padding:0 8px}.import-session-textarea{font-size:11px;padding:12px}.import-session-actions{flex-direction:column}.import-session-actions button{width:100%;justify-content:center}}.background-effects{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:-1;overflow:hidden}.rhythm-grid{position:absolute;top:0;left:0;width:100%;height:100%}.grid-line{position:absolute;width:100%;height:1px;background:linear-gradient(90deg,transparent 0%,rgba(46,227,160,.3) 50%,transparent 100%);animation:grid-line-pulse 1s infinite ease-out;top:50%;transform:translateY(-50%)}.grid-line:nth-child(1){top:12.5%}.grid-line:nth-child(2){top:25%}.grid-line:nth-child(3){top:37.5%}.grid-line:nth-child(4){top:50%}.grid-line:nth-child(5){top:62.5%}.grid-line:nth-child(6){top:75%}.grid-line:nth-child(7){top:87.5%}.grid-line:nth-child(8){top:100%}@keyframes grid-line-pulse{0%{opacity:0;transform:translateY(-50%) scaleX(0)}50%{opacity:.8;transform:translateY(-50%) scaleX(1)}to{opacity:0;transform:translateY(-50%) scaleX(0)}}.pulse-circle:nth-child(1){width:100px;height:100px;border-color:#2ee3a066}.pulse-circle:nth-child(2){width:200px;height:200px;border-color:#2ee3a059}.pulse-circle:nth-child(3){width:300px;height:300px;border-color:#2ee3a04d}.pulse-circle:nth-child(4){width:400px;height:400px;border-color:#2ee3a040}.pulse-circle:nth-child(5){width:500px;height:500px;border-color:#2ee3a033}.pulse-circle:nth-child(6){width:600px;height:600px;border-color:#2ee3a026}@keyframes pulse-circle-animation{0%{opacity:0;transform:translate(-50%,-50%) scale(.8)}50%{opacity:.6;transform:translate(-50%,-50%) scale(1.2)}to{opacity:0;transform:translate(-50%,-50%) scale(1.6)}}.floating-particles{position:absolute;top:0;left:0;width:100%;height:100%}.particle{position:absolute;width:4px;height:4px;background:linear-gradient(45deg,#2de3a0,#1dd1a1);border-radius:50%;animation:particle-float 6s infinite linear;opacity:.7;filter:blur(.5px);box-shadow:0 0 4px #2ee3a080}@keyframes particle-float{0%{transform:translateY(100vh) rotate(0);opacity:0}10%{opacity:.7}90%{opacity:.7}to{transform:translateY(-100px) rotate(360deg);opacity:0}}.beat-waves{position:absolute;bottom:0;left:0;width:100%;height:100%}.beat-wave{position:absolute;bottom:0;left:0;width:100%;height:100%;background:linear-gradient(180deg,transparent 0%,rgba(46,227,160,.1) 50%,transparent 100%);animation:beat-wave-animation 2s infinite ease-out;transform-origin:bottom;filter:blur(1px)}@keyframes beat-wave-animation{0%{transform:scaleY(0);opacity:0}50%{opacity:.6}to{transform:scaleY(1);opacity:0}}@keyframes background-pulse{0%,to{background:linear-gradient(135deg,#2ee3a00d,#1dd1a108,#2ee3a00d)}50%{background:linear-gradient(135deg,#2ee3a014,#1dd1a10d,#2ee3a014)}}@keyframes card-glow{0%,to{box-shadow:0 0 20px #2ee3a033,0 0 40px #2ee3a01a,0 0 60px #2ee3a00d}50%{box-shadow:0 0 30px #2ee3a04d,0 0 60px #2ee3a026,0 0 90px #2ee3a014}}.wrap.playing .cell.active{animation:playing-cell-pulse .5s ease-in-out}.wrap.playing .cell.now{animation:playing-cell-now .25s ease-in-out}@keyframes playing-cell-pulse{0%{transform:scale(1)}50%{transform:scale(1.1)}to{transform:scale(1)}}@keyframes playing-cell-now{0%{transform:scale(1)}50%{transform:scale(1.15)}to{transform:scale(1)}}.wrap.playing .cell.active .dot{animation:playing-dot-glow .5s ease-in-out}@keyframes playing-dot-glow{0%{box-shadow:0 0 8px #2ee3a099;background:var(--accent)}50%{box-shadow:0 0 16px #2ee3a0cc;background:#2de3a0}to{box-shadow:0 0 8px #2ee3a099;background:var(--accent)}}.pulse-circles{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100%;height:100%}.pulse-circle{position:absolute;border:2px solid rgba(46,227,160,.3);border-radius:50%;animation:pulse-circle-animation 4s infinite;top:50%;left:50%;transform:translate(-50%,-50%);filter:blur(.5px)}.active-step-effects{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.track-effect{position:absolute;width:100%;height:100%}.step-effect{position:absolute;width:20px;height:20px;border-radius:50%;background:radial-gradient(circle,rgba(46,227,160,.8) 0%,rgba(46,227,160,.2) 70%,transparent 100%);transform:translate(-50%,-50%);opacity:0;animation:step-effect-pulse .5s ease-out;filter:blur(1px);box-shadow:0 0 10px #2ee3a099}.step-effect.active{animation:step-effect-active .5s ease-out}@keyframes step-effect-pulse{0%{opacity:0;transform:translate(-50%,-50%) scale(0)}50%{opacity:.8;transform:translate(-50%,-50%) scale(1.5)}to{opacity:0;transform:translate(-50%,-50%) scale(2)}}@keyframes step-effect-active{0%{opacity:0;transform:translate(-50%,-50%) scale(0)}25%{opacity:1;transform:translate(-50%,-50%) scale(1.2)}50%{opacity:.8;transform:translate(-50%,-50%) scale(1.5)}to{opacity:0;transform:translate(-50%,-50%) scale(2.5)}}.wrap.playing{background:linear-gradient(135deg,#2ee3a00d,#1dd1a108,#2ee3a00d);animation:background-pulse 2s infinite ease-in-out}.wrap.playing .card{animation:card-glow 2s infinite ease-in-out}.session-actions .share-btn{background:linear-gradient(90deg,#1da1f2,#0d8bd9);color:#fff}.session-actions .share-btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px #1da1f24d}.shared-session-modal{max-width:800px;margin:0 auto}.shared-session-info{background:#ffffff0d;border:1px solid var(--grid);border-radius:8px;padding:20px;margin-bottom:20px}.shared-session-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px;margin-bottom:20px}.shared-session-stat{display:flex;flex-direction:column;align-items:center;text-align:center;padding:12px;background:#2ee3a01a;border-radius:8px;border:1px solid rgba(46,227,160,.2)}.shared-session-stat-label{font-size:12px;color:var(--muted);font-weight:600;margin-bottom:4px}.shared-session-stat-value{font-size:16px;font-weight:700;color:#2de3a0}.shared-session-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}.shared-session-actions .primary{background:linear-gradient(90deg,#2de3a0,#1dd1a1);color:#0b0d18;padding:12px 24px;border-radius:8px;border:none;cursor:pointer;font-weight:600;font-size:14px;transition:all .2s ease;display:flex;align-items:center;gap:8px}.shared-session-actions .primary:hover{transform:translateY(-1px);box-shadow:0 4px 12px #2ee3a04d}@media (max-width: 640px){.session-actions{flex-direction:column;gap:8px}.session-actions button{width:100%;justify-content:center;padding:12px}.shared-session-stats{grid-template-columns:1fr 1fr;gap:12px}.shared-session-actions{flex-direction:column}.shared-session-actions button{width:100%;justify-content:center}}.share-success-message{background:linear-gradient(90deg,#1da1f2,#0d8bd9);border:1px solid #1da1f2;padding:12px 16px;margin:12px 0;border-radius:8px;color:#fff;font-weight:600;text-align:center;animation:share-success-fade .3s ease-in-out}@keyframes share-success-fade{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.share-btn:disabled{opacity:.7;cursor:not-allowed;background:linear-gradient(90deg,#666,#555)}.share-btn:disabled:hover{transform:none;box-shadow:none}.share-btn:disabled:hover{opacity:.5;cursor:not-allowed}.share-section{display:flex;flex-direction:column;gap:20px}.share-session-info{background:var(--panel);border:1px solid var(--grid);border-radius:12px;padding:16px}.session-summary h4{margin:0 0 12px;color:var(--text);font-size:18px;font-weight:600}.session-details{display:flex;flex-wrap:wrap;gap:12px}.detail-item{background:var(--grid);color:var(--text);padding:6px 12px;border-radius:8px;font-size:14px;font-weight:500}.share-url-section{display:flex;flex-direction:column;gap:12px}.share-description{margin:0;color:var(--text);font-size:14px;line-height:1.5}.url-container{display:flex;gap:8px;align-items:center}.url-input{flex:1;background:var(--panel);border:1px solid var(--grid);color:var(--text);padding:12px 16px;border-radius:8px;font-family:Courier New,monospace;font-size:14px;cursor:text;transition:border-color .2s ease}.url-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px #7c5cff33}.url-input:read-only{cursor:pointer;background:var(--grid)}.copy-url-btn{background:var(--accent);color:#fff;border:none;padding:12px 16px;border-radius:8px;font-weight:600;cursor:pointer;transition:all .2s ease;white-space:nowrap}.copy-url-btn:hover{background:var(--accent2);transform:translateY(-1px)}.copy-url-btn:active{transform:translateY(0)}.share-actions{display:flex;gap:12px;justify-content:flex-end;margin-top:8px}.minimize-btn{background:var(--grid);color:var(--text);border:1px solid var(--grid);padding:10px 16px;border-radius:8px;font-weight:600;cursor:pointer;transition:all .2s ease}.minimize-btn:hover{background:var(--on);border-color:var(--accent)}@media (max-width: 640px){.share-section{gap:16px}.session-details{flex-direction:column;gap:8px}.detail-item{text-align:center}.url-container{flex-direction:column;gap:8px}.url-input{font-size:12px;padding:10px 12px}.copy-url-btn{width:100%;padding:10px 12px}.share-actions{flex-direction:column;gap:8px}.minimize-btn,.modal-close{width:100%;text-align:center}}