@import"https://fonts.googleapis.com/css2?family=Roboto+Condensed&display=swap";:root{--background-color: #202020;--text-color: #E0E0E0;--primary-color: #339999;--primary-hover-color: #2d8888;--secondary-color: #2a2a2a;--border-color: #404040;--success-color: #98c379;--error-color: #e06c75;--font-family: "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif}*{box-sizing:border-box}body{font-family:var(--font-family);background-color:var(--background-color);color:var(--text-color);margin:0;padding:1rem;display:flex;justify-content:center;align-items:flex-start;min-height:100vh;text-transform:uppercase}#root{width:100%;max-width:600px;display:flex;flex-direction:column;gap:1.5rem}h1{text-align:center;color:var(--primary-color);margin:0;display:flex;align-items:center;justify-content:center;gap:.75rem;position:relative;top:2px}.midi-indicator{width:24px;height:24px;border-radius:50%;background-color:#5c1a1a;transition:background-color .1s ease,box-shadow .1s ease;position:relative}.midi-indicator.active{background-color:var(--error-color);box-shadow:0 0 8px var(--error-color)}.card{background-color:var(--secondary-color);border:1px solid var(--border-color);border-radius:8px;padding:1rem;display:flex;flex-direction:column}.control-group{display:flex;flex-direction:column;gap:.5rem;margin-top:1rem}.control-group:first-of-type{margin-top:initial}.control-group label{font-weight:700}select,button,.button-like{font-family:inherit;font-size:.8rem;padding:.5rem .75rem;border-radius:2px;border:1px solid var(--border-color);background-color:#333;color:var(--text-color);cursor:pointer;transition:background-color .2s,border-color .2s,color .2s;text-align:center;display:flex;align-items:center;justify-content:center;gap:.5rem;text-transform:uppercase;-webkit-user-select:none;user-select:none}select:focus,button:focus{outline:none;border-color:var(--primary-color);color:var(--primary-color)}button:hover,.button-like:hover{background-color:var(--secondary-color);border-color:var(--primary-hover-color);color:var(--primary-hover-color)}button:disabled{opacity:.5;cursor:not-allowed}.controls-grid,.controls-grid-sm{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:.75rem}.controls-grid-sm{grid-template-columns:repeat(auto-fit,minmax(90px,1fr))}.button-record:before,.button-play:before,.auto-record-control label:before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background-color:#555;transition:background-color .2s}.button-record.recording:before{background-color:var(--error-color);box-shadow:0 0 5px var(--error-color)}.button-play.playing:before{background-color:var(--success-color);box-shadow:0 0 5px var(--success-color)}#import-midi-input{display:none}.auto-record-control{display:flex;align-items:center;gap:.75rem;margin-top:1rem;justify-content:center;font-size:.9rem;color:var(--text-color)}.auto-record-control{margin-top:0}.auto-record-control input[type=checkbox]{display:none}.auto-record-control label{font-family:inherit;font-size:.8rem;padding:.5rem .75rem;border-radius:2px;border:1px solid var(--border-color);background-color:#333;color:var(--text-color);cursor:pointer;transition:background-color .2s,border-color .2s,color .2s;display:flex;align-items:center;justify-content:center;gap:.5rem;width:100%}.auto-record-control input[type=checkbox]:checked+label:before{background-color:var(--success-color);box-shadow:0 0 5px var(--success-color)}.status-bar{text-align:center;padding:.75rem;background-color:var(--secondary-color);border-radius:6px;border:1px solid var(--border-color);font-style:italic;min-height:48px;text-transform:initial}#playback-card{padding:.75rem 1rem}.playback-controls{display:flex;align-items:center;gap:1rem;width:100%}.time-display{font-family:monospace;font-size:.9rem;white-space:nowrap}.playback-slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:8px;background:var(--border-color);outline:none;border-radius:4px;cursor:pointer}.playback-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:20px;height:20px;background:var(--primary-color);border-radius:50%;cursor:pointer;transition:background-color .2s,box-shadow .2s}.playback-slider::-moz-range-thumb{width:20px;height:20px;background:var(--primary-color);border:none;border-radius:50%;cursor:pointer;transition:background-color .2s,box-shadow .2s}.playback-slider:active::-webkit-slider-thumb,.playback-slider:focus::-webkit-slider-thumb{box-shadow:0 0 8px var(--primary-color)}.playback-slider:active::-moz-range-thumb,.playback-slider:focus::-moz-range-thumb{box-shadow:0 0 8px var(--primary-color)}.playback-slider:hover::-webkit-slider-thumb{background:var(--primary-hover-color)}.playback-slider:hover::-moz-range-thumb{background:var(--primary-hover-color)}.collapsible-header{width:100%;text-align:left;background-color:transparent;border:none;padding:0;margin:0;display:flex;justify-content:space-between;align-items:center;font-size:1.1rem;font-weight:700}.collapsible-header:hover{background-color:transparent;color:var(--primary-color)}.header-content{display:flex;align-items:center;gap:.75rem}.led{width:12px;height:12px;border-radius:50%;transition:background-color .2s,box-shadow .2s}.led.connected{background-color:var(--success-color);box-shadow:0 0 6px var(--success-color)}.led.disconnected{background-color:var(--error-color);animation:blink 1.5s infinite}@keyframes blink{0%,to{background-color:var(--error-color);box-shadow:0 0 6px var(--error-color)}50%{background-color:#5c1a1a;box-shadow:none}}.collapsible-header .chevron{display:inline-block;width:8px;height:8px;border-style:solid;border-color:currentColor;border-width:0 2px 2px 0;transform:rotate(45deg);transition:transform .3s ease}.collapsible-header[aria-expanded=true] .chevron{transform:rotate(-135deg)}.collapsible-content{overflow:hidden;transition:max-height .3s ease-in-out,margin-top .3s ease-in-out;max-height:0;margin-top:0}.collapsible-content.expanded{max-height:300px;margin-top:1rem}