body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}:root{--bg: #0a0a0a;--bg-1: #111111;--bg-2: #181818;--bg-3: #202020;--fg: #c8ffc8;--fg-dim: #4a8f4a;--fg-muted: #2a5a2a;--accent: #39ff14;--accent-dim: #1a7a08;--border: #1e3a1e;--border-hi: #2e5a2e;--cursor: #39ff14;--font: "Cascadia Code", "JetBrains Mono", "Fira Code", "Consolas", monospace;--font-size: 12px}*,*:before,*:after{box-sizing:border-box}html,body,#root{height:100%;width:100%;margin:0;overflow:hidden;background:var(--bg);color:var(--fg);font-family:var(--font);font-size:var(--font-size)}.App{height:100%;display:flex;flex-direction:column}.seventeen{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden}.toolbar{flex-shrink:0;display:flex;flex-direction:row;align-items:center;background:var(--bg-3);border-bottom:1px solid var(--border-hi);padding:0 8px;height:28px;gap:8px}.header{display:flex;flex-direction:row;align-items:center;gap:12px;flex:1;min-width:0;height:100%}.header__title{color:var(--accent);font-weight:700;letter-spacing:.05em;margin-right:8px}.header__field{display:flex;align-items:center;gap:4px;font-size:11px;color:var(--fg-dim)}.header__field span{color:var(--fg-dim)}.header__settings-btn{margin-left:auto;color:var(--fg-dim);border-color:var(--border)}.header__settings-btn:hover{color:var(--accent);border-color:var(--accent-dim)}.metronome{display:flex;align-items:center;gap:2px}.metronome__tick{display:inline-block;width:6px;height:6px;border:1px solid var(--fg-muted)}.metronome__tick--on{background:var(--accent);border-color:var(--accent);box-shadow:0 0 4px var(--accent)}.project-controls{display:flex;align-items:center;gap:4px;flex-shrink:0;font-size:11px}.layers{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden}.layer{flex:1;min-height:0;display:flex;flex-direction:row;overflow:hidden;font-size:11px;padding:2px 8px;border-bottom:1px solid var(--border)}.layer:last-child{border-bottom:none}.sample{width:320px;flex-shrink:0;display:flex;flex-direction:column;justify-content:center;gap:3px;overflow:hidden;padding-right:8px;border-right:1px solid var(--border)}.sample .sample-name{color:var(--fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sample .sample-name b{color:var(--accent);font-weight:400}.toggles{flex:1;min-width:0;display:flex;flex-direction:column;padding-left:8px;background:repeating-linear-gradient(90deg,transparent 0%,transparent calc(25% - 1px),var(--border) calc(25% - 1px),var(--border) 25%,transparent 25%,transparent calc(50% - 1px),var(--border) calc(50% - 1px),var(--border) 50%,transparent 50%,transparent calc(75% - 1px),var(--border) calc(75% - 1px),var(--border) 75%,transparent 75%,transparent 100%)}.toggles .flex-row{flex:1;min-height:0}.flex-row{display:flex;width:100%}.button{flex:1;min-width:0;margin:2px;border:1px solid var(--fg-muted);background:transparent;cursor:pointer}.button:hover{border-color:var(--fg-dim);background:var(--bg-2)}.button.on{background:var(--accent-dim);border-color:var(--fg-dim)}.trig{border-color:var(--accent)!important;box-shadow:inset 0 0 6px var(--accent-dim)}.button.on.trig{background:var(--accent);box-shadow:0 0 8px var(--accent)}input{border:1px solid var(--border-hi);background:var(--bg-1);color:var(--fg);padding:1px 4px;margin:0 2px;font-family:var(--font);font-size:11px;border-radius:0;outline:none}input:focus{border-color:var(--fg-dim)}button{border:1px solid var(--border-hi);background:transparent;color:var(--fg-dim);padding:1px 6px;cursor:pointer;font-family:var(--font);font-size:11px;border-radius:0}button:hover{color:var(--fg);border-color:var(--fg-dim)}button.on{background:var(--accent-dim);border-color:var(--fg-dim);color:var(--accent)}select{background:var(--bg-1);color:var(--fg);border:1px solid var(--border-hi);padding:1px 4px;font-family:var(--font);font-size:11px;border-radius:0;outline:none}select:focus{border-color:var(--fg-dim)}.sample button{border-color:var(--fg-muted);height:20px;width:auto;padding:0 6px;margin:0 2px 0 0}.midi-output-config{display:flex;flex-wrap:wrap;gap:4px;align-items:center}.midi-output-config label{display:flex;align-items:center;gap:2px;color:var(--fg-dim)}.midi-output-config input{width:44px}.settings-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000d9;display:flex;align-items:center;justify-content:center;z-index:100}.settings-modal{background:var(--bg-1);border:1px solid var(--border-hi);padding:20px;min-width:420px;max-width:580px;max-height:80vh;overflow-y:auto;display:flex;flex-direction:column;gap:16px;box-shadow:0 0 32px #39ff140f}.settings-modal__header{display:flex;justify-content:space-between;align-items:center;color:var(--accent);font-size:12px;letter-spacing:.1em;text-transform:uppercase;border-bottom:1px solid var(--border-hi);padding-bottom:8px}.settings-modal__close{border:none;color:var(--fg-dim);font-size:12px}.settings-modal__close:hover{color:var(--accent)}.settings-section{display:flex;flex-direction:column;gap:8px}.settings-section__title{margin:0 0 4px;font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--fg-dim);border-bottom:1px solid var(--border);padding-bottom:4px;font-weight:400}.settings__field{display:flex;align-items:center;gap:8px;font-size:11px}.settings__label{width:120px;flex-shrink:0;color:var(--fg-dim);font-size:11px}.settings__input--wide{flex:1}.settings__device-list{display:flex;gap:8px;font-size:11px;align-items:flex-start}.settings__device-list ul{margin:0;padding:0 0 0 12px;color:var(--fg-dim);list-style:none}.settings__device-list ul li:before{content:"› ";color:var(--fg-muted)}.settings__unsupported{color:var(--fg-muted);font-size:11px;margin:0}.google-drive-panel{display:flex;align-items:center;gap:4px}.drive-status{font-size:10px;color:var(--fg-dim);margin-left:4px}