@import"https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap";:root{font-family:JetBrains Mono,SF Mono,Fira Code,monospace;line-height:1.5;font-weight:400;color-scheme:dark;color:#e8e8ec;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}#root{min-height:100vh}button{font-family:inherit}input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}:root{--bg-primary: #0a0a0f;--bg-secondary: #12121a;--bg-tertiary: #1a1a28;--text-primary: #e8e8ec;--text-secondary: #8888a0;--text-muted: #555566;--accent-primary: #00ff88;--accent-secondary: #00cc6a;--early-color: #4488ff;--late-color: #ff8844;--perfect-color: #00ff88;--border-color: #2a2a3a;--shadow-color: rgba(0, 0, 0, .4)}*{box-sizing:border-box;margin:0;padding:0}.app{min-height:100vh;background:var(--bg-primary);background-image:radial-gradient(ellipse at top,rgba(0,255,136,.03) 0%,transparent 50%),radial-gradient(ellipse at bottom,rgba(68,136,255,.03) 0%,transparent 50%);color:var(--text-primary);font-family:JetBrains Mono,SF Mono,Fira Code,monospace;display:flex;flex-direction:column}.app-header{text-align:center;padding:2rem 1rem;border-bottom:1px solid var(--border-color)}.app-header h1{font-size:2.5rem;font-weight:700;letter-spacing:.1em;color:var(--accent-primary);text-shadow:0 0 30px rgba(0,255,136,.3);margin-bottom:.5rem}.tagline{color:var(--text-secondary);font-size:.9rem;letter-spacing:.2em;text-transform:uppercase}.app-main{flex:1;padding:2rem;max-width:800px;margin:0 auto;width:100%}section{margin-bottom:2rem}section h2{font-size:1.2rem;color:var(--text-secondary);margin-bottom:1rem;letter-spacing:.1em;text-transform:uppercase}.error-banner{background:#ff44441a;border:1px solid rgba(255,68,68,.3);border-radius:8px;padding:1rem;margin-bottom:1.5rem;display:flex;align-items:center;gap:.75rem;color:#f66}.error-icon{font-size:1.2rem}.config-panel{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:12px;padding:1.5rem}.config-section{margin-bottom:1.5rem}.config-section:last-child{margin-bottom:0}.config-section label{display:block;font-size:.85rem;color:var(--text-secondary);margin-bottom:.5rem;text-transform:uppercase;letter-spacing:.05em}.input-with-display{display:flex;gap:1rem;align-items:center}.input-with-display input[type=range]{flex:1;height:6px;background:var(--bg-tertiary);border-radius:3px;outline:none;-webkit-appearance:none}.input-with-display input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;background:var(--accent-primary);border-radius:50%;cursor:pointer;box-shadow:0 0 10px #0f86}.number-input{width:70px;padding:.5rem;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:6px;color:var(--text-primary);font-family:inherit;font-size:1rem;text-align:center}.number-input:focus{outline:none;border-color:var(--accent-primary)}.duration-info{font-size:.8rem;color:var(--text-muted);margin-top:.25rem}.input-method-buttons{display:flex;gap:.75rem;flex-wrap:wrap}.method-button{flex:1;min-width:120px;padding:1rem;background:var(--bg-tertiary);border:2px solid var(--border-color);border-radius:8px;color:var(--text-secondary);cursor:pointer;transition:all .2s ease;display:flex;flex-direction:column;align-items:center;gap:.5rem}.method-button:hover:not(:disabled){border-color:var(--text-secondary);color:var(--text-primary)}.method-button.active{border-color:var(--accent-primary);color:var(--accent-primary);background:#00ff880d}.method-button:disabled{opacity:.4;cursor:not-allowed}.method-icon{font-size:1.5rem}.method-label{font-size:.75rem;text-transform:uppercase;letter-spacing:.05em}.sound-settings{display:flex;flex-direction:column;gap:1rem}.sound-row{display:flex;flex-direction:column;gap:.5rem}.sound-row label{font-size:.8rem;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em}.sound-buttons{display:flex;gap:.5rem;flex-wrap:wrap}.sound-button{padding:.5rem .75rem;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:6px;color:var(--text-secondary);cursor:pointer;transition:all .15s ease;display:flex;align-items:center;gap:.4rem;font-family:inherit;font-size:.85rem}.sound-button:hover:not(:disabled){border-color:var(--text-secondary);color:var(--text-primary)}.sound-button.active{border-color:var(--accent-primary);color:var(--accent-primary);background:#00ff8814}.sound-button:disabled{opacity:.4;cursor:not-allowed}.sound-emoji{font-size:.9rem}.sound-label{font-size:.75rem;text-transform:uppercase;letter-spacing:.03em}.tap-sound-selector{display:flex;align-items:center;gap:.75rem}.current-tap-sound{display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:6px;min-width:100px}.current-tap-sound .sound-emoji{font-size:1.2rem}.current-tap-sound .sound-name{font-size:.85rem;color:var(--text-primary)}.tap-sound-select{padding:.5rem .75rem;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:6px;color:var(--text-primary);font-family:inherit;font-size:.85rem;cursor:pointer;min-width:150px}.tap-sound-select:disabled{opacity:.5;cursor:not-allowed}.tap-sound-select optgroup{font-weight:600;color:var(--text-secondary)}.tap-sound-select option{padding:.25rem}.mic-settings{margin-top:1rem;padding-top:1rem;border-top:1px solid var(--border-color)}.mic-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}.test-mic-button{padding:.4rem .75rem;font-size:.75rem;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:6px;color:var(--text-secondary);cursor:pointer;transition:all .2s ease}.test-mic-button:hover:not(:disabled){border-color:var(--accent-primary);color:var(--accent-primary)}.test-mic-button.active{background:var(--accent-primary);border-color:var(--accent-primary);color:var(--bg-primary)}.test-mic-button:disabled{opacity:.5;cursor:not-allowed}.hint{font-size:.7rem;color:var(--text-muted);font-style:italic}.audio-level-meter{margin-top:.5rem}.level-label{font-size:.75rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:.5rem}.level-bar-container{position:relative;height:24px;background:var(--bg-tertiary);border-radius:8px;overflow:visible}.level-bar-container.interactive{cursor:pointer}.level-bar{height:100%;background:linear-gradient(90deg,var(--accent-primary) 0%,#ffcc00 70%,#ff4444 100%);border-radius:8px}.threshold-marker{position:absolute;top:-4px;bottom:-4px;width:4px;background:#f44;border-radius:2px;box-shadow:0 0 8px #f449;transform:translate(-50%);z-index:10}.threshold-marker.draggable{cursor:ew-resize}.threshold-marker.draggable:before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:16px;height:16px;background:#f44;border-radius:50%;border:2px solid var(--bg-primary);box-shadow:0 0 8px #f449}.threshold-marker.draggable:hover:before{transform:translate(-50%,-50%) scale(1.2);box-shadow:0 0 12px #f44c}.input-indicator{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:12px;padding:2rem;text-align:center;min-height:150px;display:flex;flex-direction:column;align-items:center;justify-content:center}.input-indicator.idle .indicator-text{color:var(--text-muted);font-size:1rem}.input-indicator.counting-in{flex-direction:column;gap:1rem;background:#ffc8000d;border:2px solid #ffcc00;border-radius:16px;padding:2rem}.count-in-header{font-size:1rem;font-weight:700;color:#fc0;text-transform:uppercase;letter-spacing:.3em;animation:pulse .6s ease-in-out infinite}.input-indicator.counting-in .beat-indicator{width:140px;height:140px;background:#ffc80026;border:4px solid #ffcc00}.input-indicator.counting-in .beat-indicator.flash{background:#fc0;border-color:#fc0;box-shadow:0 0 60px #fc0c;transform:scale(1.1)}.input-indicator.counting-in .beat-number{font-size:4rem;color:#fc0}.input-indicator.counting-in .beat-indicator.flash .beat-number{color:var(--bg-primary)}.count-in-progress{display:flex;gap:.75rem;margin:.5rem 0}.count-dot{width:16px;height:16px;border-radius:50%;background:#ffc80033;border:2px solid #ffcc00;transition:all .15s ease}.count-dot.filled{background:#fc0;box-shadow:0 0 10px #fc09}.count-in-label{font-size:1.2rem;color:#fc0;text-transform:uppercase;letter-spacing:.2em;font-weight:600}@keyframes pulse{0%,to{opacity:.6}50%{opacity:1}}.input-indicator.running{flex-direction:row;gap:3rem}.beat-indicator{width:80px;height:80px;border-radius:50%;background:var(--bg-tertiary);border:3px solid var(--border-color);display:flex;align-items:center;justify-content:center;transition:all .05s ease}.beat-indicator.flash{background:var(--accent-primary);border-color:var(--accent-primary);box-shadow:0 0 30px #00ff8880}.beat-number{font-size:2rem;font-weight:700;color:var(--text-primary)}.beat-indicator.flash .beat-number{color:var(--bg-primary)}.input-feedback{min-width:150px;padding:1rem;border-radius:8px;transition:all .1s ease}.input-feedback.flash{animation:inputFlash .15s ease}.input-feedback.flash.early{background:#48f3}.input-feedback.flash.late{background:#f843}.input-feedback.flash.perfect{background:#0f83}@keyframes inputFlash{0%{transform:scale(1)}50%{transform:scale(1.05)}to{transform:scale(1)}}.offset-display{display:flex;flex-direction:column;gap:.25rem}.offset-value{font-size:1.5rem;font-weight:700}.offset-value.early{color:var(--early-color)}.offset-value.late{color:var(--late-color)}.offset-value.perfect{color:var(--perfect-color)}.offset-label{font-size:.8rem;color:var(--text-secondary);text-transform:uppercase}.session-controls{display:flex;flex-direction:column;align-items:center;gap:1rem}.control-button{padding:1rem 3rem;font-size:1.1rem;font-family:inherit;font-weight:600;letter-spacing:.1em;text-transform:uppercase;border:none;border-radius:8px;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;gap:.75rem}.control-button.start{background:var(--accent-primary);color:var(--bg-primary)}.control-button.start:hover{background:var(--accent-secondary);box-shadow:0 0 20px #0f86}.control-button.stop{background:#f44c;color:#fff}.control-button.stop:hover{background:#f44}.control-button.reset{background:var(--bg-tertiary);color:var(--text-primary);border:2px solid var(--border-color)}.control-button.reset:hover{border-color:var(--accent-primary);color:var(--accent-primary)}.button-icon{font-size:.9em}.progress-container{width:100%;max-width:400px}.progress-bar{height:8px;background:var(--bg-tertiary);border-radius:4px;overflow:hidden;margin-bottom:.5rem}.progress-fill{height:100%;background:var(--accent-primary);transition:width .1s ease}.progress-text{font-size:.85rem;color:var(--text-secondary)}.results-section{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:12px;padding:1.5rem}.results-chart{display:flex;flex-direction:column;gap:1.5rem}.results-chart.empty{text-align:center;padding:3rem;color:var(--text-muted)}.chart-canvas{background:var(--bg-primary);border-radius:8px}.stats-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:1rem}.stat-item{background:var(--bg-tertiary);border-radius:8px;padding:1rem;text-align:center}.stat-item.highlight{border:1px solid var(--accent-primary);background:#00ff880d}.stat-label{display:block;font-size:.75rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:.25rem}.stat-value{font-size:1.2rem;font-weight:600;color:var(--accent-primary)}.stat-detail{font-size:.7rem;color:var(--text-muted);margin-top:.15rem}.assessment-badges{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1.5rem}.assessment-badge{display:flex;align-items:center;gap:.75rem;padding:1rem 1.25rem;border-radius:12px;background:var(--bg-tertiary);border:2px solid var(--border-color)}.badge-emoji{font-size:2rem}.badge-info{display:flex;flex-direction:column;gap:.15rem}.badge-title{font-size:1.1rem;font-weight:700;color:var(--text-primary)}.badge-subtitle{font-size:.7rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em}.assessment-badge.consistency-scattered,.consistency-scattered{border-color:#f44;background:#ff44441a}.assessment-badge.consistency-loose,.consistency-loose{border-color:#f84;background:#ff88441a}.assessment-badge.consistency-steady,.consistency-steady{border-color:#fc4;background:#ffcc441a}.assessment-badge.consistency-locked_in,.consistency-locked_in{border-color:var(--accent-primary);background:#00ff881a}.assessment-badge.consistency-diamond,.consistency-diamond{border-color:#4df;background:#44ddff1a}.assessment-badge.consistency-atomic_clock,.consistency-atomic_clock{border-color:#f0f;background:#ff00ff1a}.assessment-badge.offset-in_the_pocket,.offset-in_the_pocket{border-color:var(--accent-primary)}.assessment-badge.offset-groove,.offset-groove{border-color:#48f}.assessment-badge.offset-snap,.offset-snap{border-color:#fc0}.assessment-badge.offset-drive,.offset-drive{border-color:#f84}.assessment-badge.offset-dragging,.offset-dragging{border-color:#f64}.assessment-badge.offset-nervous,.offset-nervous{border-color:#f48}.assessment-badge.offset-day_job,.offset-day_job{border-color:#f04}.assessment-section{background:var(--bg-tertiary);border-radius:8px;padding:1rem;margin-bottom:1rem}.assessment-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}.assessment-label{font-size:.8rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em}.assessment-value{font-weight:700;font-size:1.1rem;padding:.25rem .75rem;border-radius:6px}.assessment-description{color:var(--text-secondary);font-size:.9rem;line-height:1.5}.stat-value.early{color:var(--early-color)}.stat-value.late{color:var(--late-color)}.interpretation{background:var(--bg-tertiary);border-radius:8px;padding:1rem;line-height:1.6;color:var(--text-secondary)}.consistency-scale{background:var(--bg-tertiary);border-radius:8px;padding:1rem;margin-bottom:1rem}.scale-header{display:flex;align-items:center;gap:.5rem;margin-bottom:.75rem}.consistency-scale h4{font-size:.8rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;margin:0}.info-button{position:relative;cursor:help}.info-icon{font-size:.9rem;opacity:.7;transition:opacity .2s}.info-button:hover .info-icon{opacity:1}.info-tooltip{position:absolute;bottom:calc(100% + 10px);left:50%;transform:translate(-50%);width:450px;max-height:80vh;overflow-y:auto;background:var(--bg-primary);border:1px solid var(--border-color);border-radius:8px;padding:1.25rem;box-shadow:0 8px 32px #0006;z-index:100;opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s;pointer-events:none}.info-button:hover .info-tooltip{opacity:1;visibility:visible}.info-tooltip:after{content:"";position:absolute;top:100%;left:50%;transform:translate(-50%);border:8px solid transparent;border-top-color:var(--border-color)}.info-tooltip h5{font-size:.95rem;color:var(--accent-primary);margin:0 0 .75rem}.info-tooltip h6{font-size:.8rem;color:var(--text-primary);margin:.75rem 0 .5rem;text-transform:uppercase;letter-spacing:.05em}.info-tooltip p{font-size:.8rem;color:var(--text-secondary);margin:0 0 .5rem;line-height:1.5}.info-tooltip p:last-child{margin-bottom:0}.info-tooltip strong{color:var(--text-primary)}.info-tooltip .formula{font-family:JetBrains Mono,monospace;background:var(--bg-tertiary);padding:.5rem;border-radius:4px;text-align:center;color:var(--accent-primary);font-weight:600}.info-tooltip .cp-table{width:100%;border-collapse:collapse;margin:.5rem 0;font-size:.7rem}.info-tooltip .cp-table th,.info-tooltip .cp-table td{padding:.35rem .5rem;text-align:left;border-bottom:1px solid var(--border-color)}.info-tooltip .cp-table th{color:var(--text-muted);font-weight:500;text-transform:uppercase;font-size:.65rem}.info-tooltip .cp-table td{color:var(--text-secondary)}.info-tooltip .cp-table tr:last-child td{border-bottom:none}.info-tooltip .your-stats{background:var(--bg-tertiary);padding:.5rem;border-radius:4px;margin-top:.75rem;text-align:center}.scale-note{font-weight:400;opacity:.7;text-transform:none}.scale-description{font-size:.9rem;color:var(--text-secondary);margin:0 0 1rem;line-height:1.5}.scale-bar{position:relative;padding:.5rem 0}.scale-segments{display:flex;gap:2px}.scale-segment{flex:1;padding:.5rem .25rem;text-align:center;border-radius:4px;background:var(--bg-primary);opacity:.6;transition:all .2s ease}.scale-segment.current{opacity:1;transform:scale(1.05);box-shadow:0 0 12px #00ff884d}.scale-segment.scattered{background:#ff444440}.scale-segment.scattered.current{background:#ff444480;border:2px solid #ff4444}.scale-segment.loose{background:#ff884440}.scale-segment.loose.current{background:#ff884480;border:2px solid #ff8844}.scale-segment.steady{background:#ffcc4440}.scale-segment.steady.current{background:#ffcc4480;border:2px solid #ffcc44}.scale-segment.locked_in{background:#00ff8840}.scale-segment.locked_in.current{background:#00ff8880;border:2px solid var(--accent-primary)}.scale-segment.diamond{background:#44ddff40}.scale-segment.diamond.current{background:#44ddff80;border:2px solid #44ddff}.scale-segment.atomic_clock{background:#ff00ff40}.scale-segment.atomic_clock.current{background:#ff00ff80;border:2px solid #ff00ff}.segment-label{display:block;font-size:.75rem;color:var(--text-primary);margin-bottom:.25rem;font-weight:500}.scale-segment.current .segment-label{color:#fff;font-weight:700}.segment-value{display:block;font-size:.7rem;color:var(--text-secondary);font-family:JetBrains Mono,monospace}.scale-segment.current .segment-value{color:var(--text-primary)}.scale-marker{position:absolute;bottom:-8px;width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:8px solid var(--accent-primary);transform:translate(-50%)}.offset-scale{background:var(--bg-tertiary);border-radius:8px;padding:1rem}.offset-scale .assessment-header{margin-bottom:.5rem}.offset-scale .scale-description{margin-bottom:1.25rem}.offset-ruler{display:flex;flex-direction:column;gap:.5rem}.ruler-labels{display:flex;justify-content:space-between;font-size:.6rem;color:var(--text-muted);text-transform:uppercase}.ruler-label.good{color:var(--accent-primary)}.ruler-label.center{color:var(--accent-primary);font-weight:700}.ruler-label.extreme{color:#f48}.ruler-bar{height:8px;background:linear-gradient(to right,#ff4488 0%,#ff8844 20%,#ffcc00 35%,var(--accent-primary) 45%,var(--accent-primary) 55%,#4488ff 65%,#6644ff 80%,#ff4488 100%);border-radius:4px;position:relative}.ruler-marker{position:absolute;top:-4px;width:4px;height:16px;background:var(--text-primary);border-radius:2px;transform:translate(-50%);box-shadow:0 0 8px #ffffff80}.ruler-values{display:flex;justify-content:space-between;font-size:.6rem;color:var(--text-muted);font-family:JetBrains Mono,monospace}.instructions-section{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:12px;padding:1.5rem}.instructions-section ol{margin-left:1.5rem;margin-bottom:1rem}.instructions-section li{margin-bottom:.75rem;color:var(--text-secondary)}.instructions-section ul{margin-top:.5rem;margin-left:1rem;list-style-type:disc}.instructions-section strong{color:var(--text-primary)}.tips{background:var(--bg-tertiary);border-radius:8px;padding:1rem;margin-top:1rem}.tips h3{font-size:.9rem;color:var(--text-primary);margin-bottom:.75rem}.tips p{font-size:.85rem;color:var(--text-secondary);margin-bottom:.5rem}.tips p:last-child{margin-bottom:0}.pattern-editor{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:12px;padding:1rem;margin-top:1rem}.pattern-controls{display:flex;gap:1rem;align-items:flex-end;flex-wrap:wrap;margin-bottom:1rem;padding-bottom:1rem;border-bottom:1px solid var(--border-color)}.preview-button{width:48px;height:48px;border-radius:50%;background:var(--bg-tertiary);border:2px solid var(--accent-primary);color:var(--accent-primary);font-size:1.2rem;cursor:pointer;transition:all .15s ease;display:flex;align-items:center;justify-content:center;flex-shrink:0}.preview-button:hover:not(:disabled){background:#00ff8826;transform:scale(1.05)}.preview-button.playing{background:var(--accent-primary);color:var(--bg-primary);animation:pulse-glow 1s ease-in-out infinite}@keyframes pulse-glow{0%,to{box-shadow:0 0 8px #0f86}50%{box-shadow:0 0 20px #00ff88b3}}.preview-button:disabled{opacity:.4;cursor:not-allowed}.pattern-controls .control-group{display:flex;flex-direction:column;gap:.4rem}.pattern-controls .control-group label{font-size:.7rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em}.time-sig-buttons,.subdiv-buttons{display:flex;gap:.25rem}.time-sig-button,.subdiv-button{padding:.5rem .75rem;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:6px;color:var(--text-secondary);cursor:pointer;font-family:inherit;font-size:.9rem;transition:all .15s ease}.time-sig-button:hover:not(:disabled),.subdiv-button:hover:not(:disabled){border-color:var(--text-secondary);color:var(--text-primary)}.time-sig-button.active,.subdiv-button.active{border-color:var(--accent-primary);color:var(--accent-primary);background:#00ff881a}.time-sig-button:disabled,.subdiv-button:disabled{opacity:.4;cursor:not-allowed}.preset-select{padding:.5rem .75rem;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:6px;color:var(--text-primary);font-family:inherit;font-size:.85rem;cursor:pointer;min-width:120px}.preset-select:disabled{opacity:.5;cursor:not-allowed}.toggle-advanced{padding:.5rem .75rem;background:transparent;border:1px solid var(--border-color);border-radius:6px;color:var(--text-muted);cursor:pointer;font-family:inherit;font-size:.75rem;margin-left:auto}.toggle-advanced:hover{color:var(--text-primary);border-color:var(--text-secondary)}.advanced-controls{display:flex;gap:1rem;align-items:flex-end;margin-bottom:1rem;padding-bottom:1rem;border-bottom:1px solid var(--border-color)}.clear-button{padding:.5rem .75rem;background:#ff44441a;border:1px solid rgba(255,68,68,.3);border-radius:6px;color:#f66;cursor:pointer;font-family:inherit;font-size:.8rem;margin-left:auto}.clear-button:hover:not(:disabled){background:#f443;border-color:#ff444480}.beat-numbers{display:flex;gap:2px;margin-bottom:.25rem}.track-label-spacer{width:100px;flex-shrink:0}.beat-number{flex:1;text-align:center;font-size:.7rem;color:var(--text-muted);font-family:JetBrains Mono,monospace}.beat-number.on-beat{color:var(--text-primary);font-weight:600}.pattern-grid{display:flex;flex-direction:column;gap:2px}.pattern-row{display:flex;gap:2px}.track-label{width:100px;flex-shrink:0;display:flex;align-items:center;gap:.35rem;padding-right:.5rem}.remove-track-btn{width:18px;height:18px;border-radius:50%;border:none;background:#f443;color:#f66;font-size:14px;line-height:1;cursor:pointer;opacity:.5;transition:all .15s ease;display:flex;align-items:center;justify-content:center}.remove-track-btn:hover:not(:disabled){opacity:1;background:#f446}.remove-track-btn:disabled{cursor:not-allowed}.track-emoji{font-size:1rem}.track-name{font-size:.7rem;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.03em}.track-cells{display:flex;gap:2px;flex:1}.pattern-cell{flex:1;aspect-ratio:1;min-height:32px;max-height:40px;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:4px;cursor:pointer;transition:all .1s ease}.pattern-cell.on-beat{border-left-width:2px;border-left-color:var(--text-muted)}.pattern-cell:hover:not(:disabled){background:#ffffff1a;border-color:var(--text-secondary)}.pattern-cell:disabled{opacity:.5;cursor:not-allowed}.pattern-cell.active.kick{background:linear-gradient(135deg,#f44,#c22);border-color:#f44;box-shadow:0 0 8px #f446}.pattern-cell.active.snare{background:linear-gradient(135deg,#4af,#28d);border-color:#4af;box-shadow:0 0 8px #4af6}.pattern-cell.active.hihat_closed{background:linear-gradient(135deg,#fc4,#da2);border-color:#fc4;box-shadow:0 0 8px #fc46}.pattern-cell.active.hihat_open{background:linear-gradient(135deg,#f84,#d62);border-color:#f84;box-shadow:0 0 8px #f846}.pattern-cell.active.tom_high{background:linear-gradient(135deg,#f68,#d46);border-color:#f68;box-shadow:0 0 8px #f686}.pattern-cell.active.tom_low{background:linear-gradient(135deg,#a64,#842);border-color:#a64;box-shadow:0 0 8px #a646}.pattern-cell.active.crash{background:linear-gradient(135deg,#ff4,#dd2);border-color:#ff4;box-shadow:0 0 8px #ff46}.pattern-cell.active.ride{background:linear-gradient(135deg,#8cf,#6ad);border-color:#8cf;box-shadow:0 0 8px #8cf6}.pattern-cell.active.clap{background:linear-gradient(135deg,#f8f,#d6d);border-color:#f8f;box-shadow:0 0 8px #f8f6}.pattern-cell.active.cowbell{background:linear-gradient(135deg,#fa8,#d86);border-color:#fa8;box-shadow:0 0 8px #fa86}.pattern-cell.active.click_high,.pattern-cell.active.click_low{background:linear-gradient(135deg,#8f8,#6d6);border-color:#8f8;box-shadow:0 0 8px #8f86}.pattern-cell.active.wood_high,.pattern-cell.active.wood_low{background:linear-gradient(135deg,#c96,#a74);border-color:#c96;box-shadow:0 0 8px #c966}.pattern-cell.active.beep_high,.pattern-cell.active.beep_low{background:linear-gradient(135deg,#6fc,#4da);border-color:#6fc;box-shadow:0 0 8px #6fc6}.pattern-cell.active.bass_low,.pattern-cell.active.bass_mid,.pattern-cell.active.bass_high{background:linear-gradient(135deg,#84f,#62d);border-color:#84f;box-shadow:0 0 8px #84f6}.pattern-cell.active.guitar_mute{background:linear-gradient(135deg,#6a8,#486);border-color:#6a8;box-shadow:0 0 8px #6a86}.pattern-cell.active.guitar_strum{background:linear-gradient(135deg,#8c6,#6a4);border-color:#8c6;box-shadow:0 0 8px #8c66}.add-track-row{display:flex;padding:.5rem 0;margin-left:100px}.add-track-btn{padding:.5rem 1rem;background:var(--bg-tertiary);border:1px dashed var(--border-color);border-radius:6px;color:var(--text-muted);cursor:pointer;font-family:inherit;font-size:.8rem;transition:all .15s ease}.add-track-btn:hover:not(:disabled){border-color:var(--accent-primary);color:var(--accent-primary)}.add-track-btn:disabled{opacity:.4;cursor:not-allowed}.track-picker{background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:8px;padding:.75rem;margin-top:.5rem;margin-left:100px}.track-category{margin-bottom:.75rem}.track-category:last-child{margin-bottom:0}.category-label{font-size:.7rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:.4rem}.category-sounds{display:flex;flex-wrap:wrap;gap:.35rem}.track-option{padding:.4rem .6rem;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:4px;color:var(--text-secondary);cursor:pointer;font-family:inherit;font-size:.75rem;display:flex;align-items:center;gap:.3rem;transition:all .15s ease}.track-option:hover{border-color:var(--accent-primary);color:var(--accent-primary);background:#00ff881a}.option-emoji{font-size:.9rem}.option-label{font-size:.7rem}.pattern-info{margin-top:.75rem;padding-top:.75rem;border-top:1px solid var(--border-color);font-size:.75rem;color:var(--text-muted);text-align:center}.app-footer{text-align:center;padding:1.5rem;border-top:1px solid var(--border-color);color:var(--text-muted);font-size:.8rem}@media(max-width:600px){.app-header h1{font-size:1.8rem}.app-main{padding:1rem}.input-indicator.running{flex-direction:column;gap:1.5rem}.method-button{min-width:100px}.control-button{padding:.875rem 2rem}}