*,:before,:after{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0}:root{--surface-0:#0d0d0d;--surface-1:#141414;--surface-2:#1a1a1a;--surface-3:#222;--surface-4:#2a2a2a;--surface-5:#333;--accent:#b0b0b0;--accent-light:#d4d4d4;--accent-bright:#e8e8e8;--accent-dim:gray;--accent-glow:#c0c0c026;--accent-glow-strong:#c0c0c04d;--text-primary:#f0f0f0;--text-secondary:#999;--text-tertiary:#666;--text-inverse:#111;--color-record:#e84040;--color-record-glow:#e840404d;--color-play:#50c878;--color-warning:#e8a040;--color-error:#e84040;--color-mute:#555;--lane-1:#6a8caf;--lane-2:#8a6aaf;--lane-3:#af8a6a;--lane-4:#6aaf8a;--lane-5:#af6a8a;--lane-6:#8aaf6a;--space-xs:4px;--space-sm:8px;--space-md:12px;--space-lg:16px;--space-xl:24px;--space-2xl:32px;--space-3xl:48px;--font-family:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-size-xs:.6875rem;--font-size-sm:.75rem;--font-size-base:.875rem;--font-size-md:1rem;--font-size-lg:1.25rem;--font-size-xl:1.5rem;--font-size-2xl:2rem;--font-weight-light:300;--font-weight-regular:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--tap-min:44px;--tap-comfortable:56px;--tap-large:72px;--radius-sm:6px;--radius-md:10px;--radius-lg:16px;--radius-xl:24px;--radius-round:50%;--border-subtle:1px solid #ffffff0f;--border-accent:1px solid #c0c0c033;--shadow-sm:0 1px 3px #0006;--shadow-md:0 4px 12px #00000080;--shadow-lg:0 8px 32px #0009;--shadow-glow:0 0 20px #c0c0c01a;--shadow-glow-strong:0 0 30px #c0c0c033;--glass-bg:#1a1a1ad9;--glass-border:1px solid #ffffff14;--glass-blur:blur(20px);--ease-out:cubic-bezier(.16, 1, .3, 1);--ease-in-out:cubic-bezier(.45, 0, .55, 1);--ease-spring:cubic-bezier(.34, 1.56, .64, 1);--duration-fast:.12s;--duration-normal:.2s;--duration-slow:.35s;--z-base:0;--z-sticky:100;--z-modal-backdrop:500;--z-modal:600;--z-toast:700;--z-tooltip:800}html,body{background:var(--surface-0);height:100%;color:var(--text-primary);font-family:var(--font-family);font-size:var(--font-size-md);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;touch-action:manipulation;-webkit-user-select:none;user-select:none;overscroll-behavior:none;margin:0;padding:0;line-height:1.5}input,textarea,select,[contenteditable]{-webkit-user-select:text;user-select:text}#app{flex-direction:column;width:100%;height:100%;display:flex;overflow:hidden}.visually-hidden{clip:rect(0, 0, 0, 0);border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.glass-panel{background:var(--glass-bg);-webkit-backdrop-filter:var(--glass-blur);border:var(--glass-border);border-radius:var(--radius-md)}.btn{justify-content:center;align-items:center;gap:var(--space-sm);min-height:var(--tap-min);min-width:var(--tap-min);padding:var(--space-sm) var(--space-lg);font-family:var(--font-family);font-size:var(--font-size-base);font-weight:var(--font-weight-medium);color:var(--text-primary);background:var(--surface-3);border:var(--border-subtle);border-radius:var(--radius-md);cursor:pointer;transition:all var(--duration-fast) var(--ease-out);-webkit-user-select:none;user-select:none;display:inline-flex}.btn:hover{background:var(--surface-4);border-color:#ffffff1a}.btn:active{background:var(--surface-5);transform:scale(.96)}.btn--accent{background:var(--accent-dim);color:var(--text-inverse);border-color:#0000}.btn--accent:hover{background:var(--accent)}.btn--accent:active{background:var(--accent-light)}.btn--ghost{background:0 0;border-color:#0000}.btn--ghost:hover{background:var(--accent-glow)}.btn--icon{padding:var(--space-sm);border-radius:var(--radius-round);min-width:var(--tap-min);min-height:var(--tap-min)}.btn--record{background:var(--color-record);color:#fff;box-shadow:0 0 0 0 var(--color-record-glow);border:none}.btn--record:hover{background:#f04848}.btn--record.is-active{animation:1.2s ease-in-out infinite pulse-record}@keyframes pulse-record{0%,to{box-shadow:0 0 0 0 var(--color-record-glow)}50%{box-shadow:0 0 0 12px #0000}}.transport-bar{align-items:center;gap:var(--space-md);z-index:200;padding:var(--space-sm) var(--space-lg);background:var(--surface-1);border-bottom:var(--border-subtle);flex-shrink:0;min-height:56px;display:flex;position:relative}.transport-bar__section{align-items:center;gap:var(--space-sm);display:flex}.transport-bar__spacer{flex:1}.transport-bar__bpm{align-items:center;gap:var(--space-xs);font-variant-numeric:tabular-nums;font-weight:var(--font-weight-semibold);color:var(--accent-light);font-size:var(--font-size-md);display:flex}.transport-bar__bpm input{text-align:center;background:var(--surface-3);border:var(--border-subtle);border-radius:var(--radius-sm);width:56px;color:var(--accent-bright);font-family:var(--font-family);font-size:var(--font-size-md);font-weight:var(--font-weight-semibold);padding:var(--space-xs);font-variant-numeric:tabular-nums}.transport-bar__bpm input:focus{border-color:var(--accent-dim);box-shadow:var(--shadow-glow);outline:none}.arp-toggle{transition:all var(--duration-fast) var(--ease-out)}.arp-toggle.is-hold{color:var(--accent-light);background:var(--surface-3);border-color:var(--accent-dim)}.arp-toggle.is-arp{color:var(--color-record);background:var(--surface-3);border-color:var(--color-record-glow);box-shadow:0 0 8px var(--color-record-glow)}.transport-bar__more{align-items:center;gap:var(--space-sm);display:flex}.transport-bar__more-btn{display:none}@media (width<=560px){.transport-bar{padding-right:var(--space-sm)}.transport-bar__more{top:100%;right:var(--space-sm);align-items:stretch;gap:var(--space-xs);background:var(--surface-1);border:var(--border-subtle);border-radius:var(--radius-sm);min-width:172px;padding:var(--space-sm);z-index:250;flex-direction:column;display:none;position:absolute;box-shadow:0 4px 16px #00000080}.transport-bar__more.is-open{display:flex}.transport-bar__more .transport-bar__mod{flex-direction:column;gap:2px}.transport-bar__more-btn{z-index:260;justify-content:center;align-items:center;min-width:36px;min-height:36px;font-size:1.1rem;display:flex;position:relative}}.beat-indicator{align-items:center;gap:6px;display:flex}.beat-indicator__dot{border-radius:var(--radius-round);background:var(--surface-5);width:8px;height:8px;transition:all var(--duration-fast) var(--ease-out)}.beat-indicator__dot.is-active{background:var(--accent-light);box-shadow:0 0 8px var(--accent-glow-strong);transform:scale(1.3)}.beat-indicator__dot.is-accent{background:var(--accent-bright);box-shadow:0 0 12px var(--accent-glow-strong);transform:scale(1.5)}.mode-tabs{background:var(--surface-1);border-top:var(--border-subtle);flex-shrink:0;display:flex}.mode-tabs__tab{padding:var(--space-sm) var(--space-md);min-height:var(--tap-comfortable);font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);color:var(--text-tertiary);cursor:pointer;transition:all var(--duration-fast) var(--ease-out);-webkit-user-select:none;user-select:none;text-transform:uppercase;letter-spacing:.05em;background:0 0;border:none;flex-direction:column;flex:1;align-items:center;gap:2px;display:flex}.mode-tabs__tab:hover{color:var(--text-secondary)}.mode-tabs__tab.is-active{color:var(--accent-light)}.mode-tabs__tab.is-active:after{content:"";background:var(--accent);border-radius:1px;width:24px;height:2px;margin-top:2px;display:block}.mode-tabs__icon{font-size:var(--font-size-lg);line-height:1}.main-content{flex:1;position:relative;overflow:hidden}.mode-view{opacity:0;pointer-events:none;transition:opacity var(--duration-normal) var(--ease-out), transform var(--duration-normal) var(--ease-out);flex-direction:column;display:flex;position:absolute;inset:0;transform:translateY(8px)}.mode-view.is-active{opacity:1;pointer-events:auto;transform:translateY(0)}.metronome-toggle{position:relative}.metronome-toggle.is-active .btn{color:var(--accent-light);background:var(--accent-glow)}.empty-state{justify-content:center;align-items:center;gap:var(--space-lg);height:100%;color:var(--text-tertiary);text-align:center;padding:var(--space-2xl);flex-direction:column;display:flex}.empty-state__icon{opacity:.4;font-size:48px}.empty-state__title{font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);color:var(--text-secondary)}.empty-state__desc{font-size:var(--font-size-base);max-width:280px;line-height:1.6}.toast-container{z-index:var(--z-toast);gap:var(--space-sm);pointer-events:none;flex-direction:column;display:flex;position:fixed;bottom:80px;left:50%;transform:translate(-50%)}.toast{padding:var(--space-md) var(--space-xl);background:var(--surface-4);border:var(--glass-border);border-radius:var(--radius-lg);color:var(--text-primary);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);box-shadow:var(--shadow-lg);-webkit-backdrop-filter:var(--glass-blur);animation:toast-in var(--duration-slow) var(--ease-spring);pointer-events:auto}.toast.is-leaving{animation:toast-out var(--duration-normal) var(--ease-out) forwards}@keyframes toast-in{0%{opacity:0;transform:translateY(16px)scale(.95)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes toast-out{0%{opacity:1;transform:translateY(0)scale(1)}to{opacity:0;transform:translateY(-8px)scale(.95)}}.modal-backdrop{-webkit-backdrop-filter:blur(8px);z-index:var(--z-modal-backdrop);animation:fade-in var(--duration-normal) var(--ease-out);background:#0009;position:fixed;inset:0}.modal{z-index:var(--z-modal);background:var(--surface-2);border:var(--glass-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:var(--space-xl);min-width:300px;max-width:90vw;max-height:80vh;animation:modal-in var(--duration-slow) var(--ease-spring);position:fixed;top:50%;left:50%;overflow-y:auto;transform:translate(-50%,-50%)}.modal__header{margin-bottom:var(--space-xl);justify-content:space-between;align-items:center;display:flex}.modal__title{font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);color:var(--text-primary)}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes modal-in{0%{opacity:0;transform:translate(-50%,-48%)scale(.96)}to{opacity:1;transform:translate(-50%,-50%)scale(1)}}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--surface-5);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--accent-dim)}::selection{background:var(--accent-glow-strong);color:var(--text-primary)}:focus-visible{outline:2px solid var(--accent-dim);outline-offset:2px}.instrument-switcher{padding:var(--space-sm) var(--space-md);background:var(--surface-1);border-bottom:var(--border-subtle);flex-shrink:0;gap:2px;display:flex}.instrument-switcher__tab{justify-content:center;align-items:center;gap:var(--space-xs);padding:var(--space-sm) var(--space-md);min-height:40px;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--text-tertiary);border-radius:var(--radius-sm);cursor:pointer;transition:all var(--duration-fast) var(--ease-out);-webkit-user-select:none;user-select:none;background:0 0;border:none;flex:1;display:flex}.instrument-switcher__tab:hover{background:var(--surface-3);color:var(--text-secondary)}.instrument-switcher__tab.is-active{background:var(--surface-3);color:var(--accent-light)}.patch-selector{align-items:center;gap:var(--space-sm);padding:var(--space-xs) var(--space-md);background:var(--surface-1);border-bottom:var(--border-subtle);flex-shrink:0;display:flex}.patch-selector__label{font-size:var(--font-size-xs);color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.05em}.patch-selector select{background:var(--surface-3);border:var(--border-subtle);border-radius:var(--radius-sm);color:var(--text-primary);font-family:var(--font-family);font-size:var(--font-size-sm);padding:var(--space-xs) var(--space-sm);min-height:32px}.scaleboard{height:100%;padding:var(--space-md);gap:var(--space-md);flex-direction:column;display:flex}.scaleboard__controls{align-items:center;gap:var(--space-lg);flex-wrap:wrap;display:flex}.scaleboard__control-group{align-items:center;gap:var(--space-xs);display:flex}.scaleboard__label{font-size:var(--font-size-xs);color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.05em}.scaleboard__select{background:var(--surface-3);border:var(--border-subtle);border-radius:var(--radius-sm);color:var(--text-primary);font-family:var(--font-family);font-size:var(--font-size-sm);padding:var(--space-xs) var(--space-sm);min-height:32px}.scaleboard__octave{align-items:center;gap:var(--space-xs);margin-left:auto;display:flex}.scaleboard__oct-btn{font-size:var(--font-size-sm);min-width:36px!important;min-height:36px!important}.scaleboard__oct-display{font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);color:var(--accent);text-align:center;min-width:48px}.scaleboard__pads{gap:var(--space-md);flex:1;grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(56px,1fr);align-content:start;padding:2px;display:grid;overflow-y:auto}.scaleboard__pad{justify-content:center;align-items:center;gap:var(--space-xs);background:var(--surface-3);border:2px solid var(--surface-5);border-radius:var(--radius-lg);cursor:pointer;min-height:56px;transition:all var(--duration-fast) var(--ease-out);-webkit-user-select:none;user-select:none;color:var(--text-primary);font-family:var(--font-family);flex-direction:column;display:flex}.scaleboard__pad:hover{background:var(--surface-4);border-color:var(--accent-dim)}.scaleboard__pad.is-active{background:var(--accent-dim);border-color:var(--accent);box-shadow:0 0 20px var(--accent-glow-strong);transform:scale(.94)}.scaleboard__pad.is-editing{border-style:dashed;border-color:var(--accent-dim);cursor:pointer}.scaleboard__pad.is-editing:hover{border-color:var(--accent);background:var(--surface-4)}.scaleboard__pad-type{opacity:.7;color:var(--accent-light);font-size:10px;font-weight:var(--font-weight-semibold)}.scaleboard__pad-degree{font-size:var(--font-size-xl);font-weight:var(--font-weight-bold);line-height:1}.scaleboard__pad-note{font-size:var(--font-size-xs);color:var(--text-secondary)}.micropiano{height:100%;padding:var(--space-md);gap:var(--space-md);flex-direction:column;display:flex}.micropiano__controls{justify-content:center;align-items:center;gap:var(--space-sm);display:flex}.micropiano__oct-display{font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);color:var(--accent);text-align:center;min-width:48px}.micropiano__keyboard{flex:1;align-items:stretch;gap:2px;padding:0;display:flex;position:relative;overflow-x:auto}.micropiano__boards{gap:var(--space-sm);padding:var(--space-sm) 0;flex-direction:column;flex:1;display:flex;overflow:hidden}.micropiano__boards .micropiano__keyboard{flex:1;min-height:0}.micropiano__key{padding-bottom:var(--space-md);border-radius:0 0 var(--radius-sm) var(--radius-sm);cursor:pointer;transition:all var(--duration-fast) var(--ease-out);-webkit-user-select:none;user-select:none;font-family:var(--font-family);border:none;justify-content:center;align-items:flex-end;display:flex;position:relative}.micropiano__key--white{color:var(--surface-2);z-index:1;background:linear-gradient(#e8e8e8 0%,#d0d0d0 100%);flex:1;min-height:80px}.micropiano__key--white:hover{background:linear-gradient(#f0f0f0 0%,#ddd 100%)}.micropiano__key--white.is-active{background:linear-gradient(180deg, var(--accent) 0%, var(--accent-dim) 100%);transform-origin:top;transform:scaleY(.98)}.micropiano__key--black{color:var(--text-secondary);z-index:2;background:linear-gradient(#333 0%,#1a1a1a 100%);border:1px solid #ffffff0d;flex:.6;min-height:50px;margin:0 -4px}.micropiano__key--black:hover{background:linear-gradient(#444 0%,#222 100%)}.micropiano__key--black.is-active{background:linear-gradient(180deg, var(--accent-dim) 0%, #444 100%);transform-origin:top;transform:scaleY(.97)}.micropiano__key-label{font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);pointer-events:none}.sketchkit{height:100%;padding:var(--space-md);gap:var(--space-sm);flex-direction:column;display:flex}.sk-kit-selector{align-items:center;gap:var(--space-sm);padding:0 var(--space-xs);flex-shrink:0;display:flex}.sk-kit-selector__label{font-size:var(--font-size-xs);color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.05em}.sk-kit-selector__select{background:var(--surface-3);border:var(--border-subtle);border-radius:var(--radius-sm);color:var(--text-primary);font-family:var(--font-family);font-size:var(--font-size-sm);padding:var(--space-xs) var(--space-sm);flex:1;min-height:32px}.sketchkit__pads{gap:var(--space-md);flex:1;grid-auto-rows:minmax(64px,1fr);align-content:center;padding:2px;display:grid}.sketchkit__pad{justify-content:center;align-items:center;gap:var(--space-xs);border-radius:var(--radius-lg);background:var(--surface-3);border:2px solid var(--surface-5);cursor:pointer;min-height:64px;transition:all var(--duration-fast) var(--ease-spring);-webkit-user-select:none;user-select:none;font-family:var(--font-family);color:var(--text-primary);flex-direction:column;display:flex}.sketchkit__pad:hover{background:var(--surface-4);border-color:var(--accent-dim)}.sketchkit__pad.is-active{border-color:var(--accent);box-shadow:0 0 24px var(--accent-glow-strong);transform:scale(.92)}.sketchkit__pad--kick.is-active{background:#8c785066}.sketchkit__pad--snare.is-active{background:#7864a066}.sketchkit__pad--clap.is-active{background:#a08c7866}.sketchkit__pad--hihat.is-active{background:#a08c6466}.sketchkit__pad--cymbal.is-active{background:#8ca0b466}.sketchkit__pad--tomlo.is-active{background:#648ca066}.sketchkit__pad--tommid.is-active{background:#788c8c66}.sketchkit__pad--tomhi.is-active{background:#8c788c66}.sketchkit__pad--rim.is-active{background:#a0646466}.sketchkit__pad--shaker.is-active{background:#a0a07866}.sketchkit__pad-icon{font-size:24px;line-height:1}.sketchkit__pad-label{font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);text-transform:uppercase;letter-spacing:.06em;color:var(--text-secondary)}.mic-recorder{height:100%;padding:var(--space-lg);justify-content:center;align-items:center;gap:var(--space-xl);flex-direction:column;display:flex}.mic-recorder__visual{align-items:center;gap:var(--space-md);flex-direction:column;display:flex}.mic-recorder__meter{border-radius:var(--radius-md);background:var(--surface-1);border:var(--border-subtle)}.mic-recorder__status{font-size:var(--font-size-sm);color:var(--text-tertiary);text-align:center}.mic-recorder__device-row{justify-content:center;align-items:center;gap:var(--space-sm);display:flex}.mic-recorder__device-label{font-size:var(--font-size-xs);color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.05em}.mic-recorder__device-select{background:var(--surface-3);border:var(--border-subtle);border-radius:var(--radius-sm);min-width:180px;max-width:260px;color:var(--text-primary);padding:var(--space-xs) var(--space-sm);font-size:var(--font-size-sm)}.mic-recorder__controls{gap:var(--space-md);display:flex}.mic-recorder__btn{border-radius:var(--radius-round);width:72px;height:72px}.controller-mode{height:100%;padding:var(--space-md);gap:var(--space-md);flex-direction:column;display:flex}.ctrlmode__controls{align-items:center;gap:var(--space-md);flex-wrap:wrap;display:flex}.ctrlmode__control-group{align-items:center;gap:var(--space-xs);display:flex}.ctrlmode__label{font-size:var(--font-size-xs);color:var(--text-tertiary);text-transform:uppercase}.ctrlmode__select{background:var(--surface-3);border:var(--border-subtle);border-radius:var(--radius-sm);color:var(--text-primary);font-family:var(--font-family);font-size:var(--font-size-sm);padding:var(--space-xs) var(--space-sm);min-height:32px}.ctrlmode__octave{align-items:center;gap:var(--space-xs);margin-left:auto;display:flex}.ctrlmode__oct-label{font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);color:var(--accent);text-align:center;min-width:48px}.ctrlmode__status{font-size:var(--font-size-xs);color:var(--text-tertiary)}.ctrlmode__body{gap:var(--space-md);flex:1;display:flex;overflow:hidden}.ctrlmode__pads{gap:var(--space-xs);flex-direction:column;flex:none;min-width:100px;display:flex}.ctrlmode__pad{align-items:center;gap:var(--space-sm);padding:var(--space-xs) var(--space-sm);background:var(--surface-3);border:1px solid var(--surface-4);border-radius:var(--radius-sm);color:var(--text-primary);font-family:var(--font-family);cursor:default;min-height:28px;display:flex}.ctrlmode__pad-degree{font-weight:var(--font-weight-bold);font-size:var(--font-size-sm);color:var(--accent);min-width:16px}.ctrlmode__pad-label{font-size:var(--font-size-xs);color:var(--text-secondary)}.ctrlmode__controller{justify-content:center;align-items:center;gap:var(--space-sm);flex-direction:column;flex:1;min-width:0;display:flex}.ctrlmode__art{aspect-ratio:479/310;width:min(100%,520px);position:relative}.ctrlmode__img{object-fit:contain;opacity:.92;width:100%;height:100%;display:block}.ctrlmode__hotspot,.ctrlmode__stick{pointer-events:none;opacity:0;transition:opacity 80ms,box-shadow 80ms,transform 80ms;position:absolute;transform:translate(-50%,-50%)}.ctrlmode__hotspot{background:#f5f5f573;border:2px solid #ffffffe6;box-shadow:0 0 0 5px #ffffff1f,0 0 22px #ffffff80}.ctrlmode__hotspot.is-active{opacity:1}.ctrlmode__hotspot--dpad{border-radius:999px;width:15%;height:15%}.ctrlmode__hotspot--button{border-radius:999px;width:8%;height:12%}.ctrlmode__hotspot--bumper{border-radius:8px;width:17%;height:8%}.ctrlmode__stick{opacity:1;background:#ffffff2e;border:2px solid #ffffff8c;border-radius:999px;width:10%;height:15%}#ct-dpad-u{top:27%;left:25.5%}#ct-dpad-d{top:43%;left:25.5%}#ct-dpad-l{top:35%;left:18.6%}#ct-dpad-r{top:35%;left:32.3%}#ct-btn-y{top:22.5%;left:73.5%}#ct-btn-x{top:34.8%;left:66.4%}#ct-btn-a{top:45.5%;left:73.6%}#ct-btn-b{top:34.8%;left:81.4%}#ct-bumper-l{top:2.8%;left:30.6%}#ct-bumper-r{top:2.8%;left:69.4%}#ct-stick-l{top:64.2%;left:34.7%}#ct-stick-r{top:64.2%;left:65.3%}.ctrlmode__stick:is(#ct-stick-l,#ct-stick-r){box-shadow:0 0 0 5px #0000000d}.ctrlmode__guide{justify-content:center;gap:var(--space-xs) var(--space-md);font-size:var(--font-size-xs);color:var(--text-tertiary);text-align:center;flex-wrap:wrap;display:flex}.ctrlmode__guide span{white-space:nowrap}.instrument-container{flex:1;position:relative;overflow:hidden}.instrument-view{opacity:0;pointer-events:none;transition:opacity var(--duration-fast) var(--ease-out);position:absolute;inset:0}.instrument-view.is-active{opacity:1;pointer-events:auto}.settings-panel{z-index:100;pointer-events:none;position:fixed;inset:0}.settings-panel.is-open{pointer-events:auto}.settings-panel__overlay{transition:background var(--duration-normal) var(--ease-out);background:0 0;position:absolute;inset:0}.settings-panel.is-open .settings-panel__overlay{background:#00000080}.settings-panel__drawer{background:var(--surface-1);border-left:var(--border-subtle);width:min(400px,90vw);transition:transform var(--duration-normal) var(--ease-spring);flex-direction:column;display:flex;position:absolute;top:0;bottom:0;right:0;overflow:hidden;transform:translate(100%)}.settings-panel.is-open .settings-panel__drawer{transform:translate(0)}.settings-panel__header{padding:var(--space-md) var(--space-lg);border-bottom:var(--border-subtle);flex-shrink:0;justify-content:space-between;align-items:center;display:flex}.settings-panel__title{font-size:var(--font-size-lg);font-weight:var(--font-weight-bold);color:var(--text-primary);margin:0}.settings-panel__close{font-size:var(--font-size-lg)!important}.settings-panel__tabs{border-bottom:var(--border-subtle);flex-shrink:0;display:flex}.settings-panel__tab{padding:var(--space-sm) var(--space-md);font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);color:var(--text-tertiary);cursor:pointer;transition:all var(--duration-fast) var(--ease-out);font-family:var(--font-family);background:0 0;border:none;border-bottom:2px solid #0000;flex:1;justify-content:center;align-items:center;gap:4px;display:flex}.settings-panel__tab:hover{color:var(--text-secondary);background:var(--surface-2)}.settings-panel__tab.is-active{color:var(--accent-light);border-bottom-color:var(--accent)}.settings-panel__body{padding:var(--space-md) var(--space-lg);flex:1;overflow-y:auto}.settings-section{gap:var(--space-lg);flex-direction:column;display:flex}.settings-group{gap:var(--space-sm);flex-direction:column;display:flex}.settings-group__title{font-size:var(--font-size-sm);font-weight:var(--font-weight-bold);color:var(--accent);text-transform:uppercase;letter-spacing:.08em;padding-bottom:var(--space-xs);border-bottom:1px solid var(--surface-3);margin:0}.settings-desc{font-size:var(--font-size-sm);color:var(--text-tertiary);margin:0;line-height:1.4}.settings-row{justify-content:space-between;align-items:center;gap:var(--space-md);min-height:36px;display:flex}.settings-label{font-size:var(--font-size-sm);color:var(--text-secondary);flex-shrink:0}.settings-input{background:var(--surface-3);border:var(--border-subtle);border-radius:var(--radius-sm);color:var(--text-primary);font-family:var(--font-family);font-size:var(--font-size-sm);padding:var(--space-xs) var(--space-sm);flex:1;max-width:200px;min-height:32px}.settings-input--sm{max-width:80px}.settings-select{background:var(--surface-3);border:var(--border-subtle);border-radius:var(--radius-sm);color:var(--text-primary);font-family:var(--font-family);font-size:var(--font-size-sm);padding:var(--space-xs) var(--space-sm);min-height:32px}.settings-range{max-width:180px;accent-color:var(--accent);flex:1;height:4px}.version-list{gap:var(--space-sm);flex-direction:column;display:flex}.version-list__loading,.version-list__empty{padding:var(--space-md);text-align:center;color:var(--text-tertiary);font-size:var(--font-size-sm);font-style:italic}.version-list__item{justify-content:space-between;align-items:center;gap:var(--space-md);padding:var(--space-sm) var(--space-md);background:var(--surface-2);border:1px solid var(--surface-3);border-radius:var(--radius-sm);display:flex}.version-list__info{flex-direction:column;gap:2px;display:flex}.version-list__time{font-size:var(--font-size-sm);color:var(--text-primary)}.version-list__meta{font-size:var(--font-size-xs);color:var(--text-tertiary)}.version-list__restore{font-size:var(--font-size-xs)!important;min-height:28px!important;padding:2px 10px!important}.sheet-music{gap:var(--space-md);flex-direction:column;height:100%;display:flex}.sheet-music__toolbar{align-items:center;gap:var(--space-sm);flex-wrap:wrap;display:flex}.sheet-music__toolbar-group{align-items:center;gap:var(--space-xs);display:flex}.sheet-music__toolbar-label{font-size:var(--font-size-xs);color:var(--text-tertiary);text-transform:uppercase}.sheet-music__toolbar-spacer{flex:1}.sheet-music__select{background:var(--surface-3);border:var(--border-subtle);border-radius:var(--radius-sm);color:var(--text-primary);font-family:var(--font-family);font-size:var(--font-size-sm);padding:var(--space-xs) var(--space-sm);min-height:28px}.sheet-music__export-btn{font-size:var(--font-size-xs)!important;min-height:28px!important;padding:2px 8px!important}.sheet-music__container{background:var(--surface-0);border:var(--border-subtle);border-radius:var(--radius-md);padding:var(--space-md);min-height:150px;overflow:auto}.sheet-music__render{min-height:100px}.sheet-music__render svg{max-width:100%}.sheet-music__empty{height:100px;color:var(--text-tertiary);font-style:italic;font-size:var(--font-size-sm);justify-content:center;align-items:center;display:flex}.sheet-music__abc-preview{background:var(--surface-0);border:var(--border-subtle);border-radius:var(--radius-sm);padding:var(--space-sm);max-height:120px;overflow:auto}.sheet-music__abc-text{font-family:Courier New,monospace;font-size:var(--font-size-xs);color:var(--text-secondary);white-space:pre-wrap;margin:0;line-height:1.4}.loop-progress{background:var(--surface-3);flex-shrink:0;height:3px;position:relative;overflow:hidden}.loop-progress__bar{background:linear-gradient(90deg, var(--accent-dim), var(--accent-light));border-radius:0 2px 2px 0;width:0%;height:100%;transition:width 50ms linear}.loop-progress__bar.is-recording{background:linear-gradient(90deg, var(--color-record), #ff6b6b);box-shadow:0 0 8px var(--color-record-glow)}.snippet-tray{background:var(--surface-1);border-top:var(--border-subtle);flex-shrink:0;max-height:140px}.snippet-tray__header{padding:var(--space-xs) var(--space-md);border-bottom:var(--border-subtle);justify-content:space-between;align-items:center;display:flex}.snippet-tray__title{font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.08em}.snippet-tray__count{font-size:var(--font-size-xs);font-weight:var(--font-weight-bold);color:var(--accent);background:var(--surface-3);border-radius:var(--radius-sm);text-align:center;min-width:20px;padding:1px 8px}.snippet-tray__list{gap:var(--space-sm);padding:var(--space-sm) var(--space-md);scrollbar-width:thin;display:flex;overflow:auto hidden}.snippet-tray__empty{width:100%;padding:var(--space-md);color:var(--text-tertiary);font-size:var(--font-size-sm);justify-content:center;align-items:center;font-style:italic;display:flex}.snippet-tray__item{padding:var(--space-xs);background:var(--surface-2);border:1px solid var(--surface-4);border-radius:var(--radius-sm);cursor:pointer;transition:all var(--duration-fast) var(--ease-out);flex-direction:column;flex-shrink:0;gap:4px;min-width:100px;display:flex}.snippet-tray__item:hover{border-color:var(--accent-dim);background:var(--surface-3)}.snippet-tray__item.is-selected{border-color:var(--accent);box-shadow:0 0 12px var(--accent-glow)}.snippet-tray__item-preview{justify-content:center;display:flex}.snippet-tray__item-info{align-items:center;gap:4px;padding:0 2px;display:flex}.snippet-tray__item-icon{font-size:12px;line-height:1}.snippet-tray__item-meta{color:var(--text-tertiary);white-space:nowrap;font-size:10px}.snippet-tray__item-actions{justify-content:flex-end;padding:0 2px;display:flex}.snippet-tray__action-btn{color:var(--text-tertiary);cursor:pointer;border-radius:var(--radius-sm);transition:all var(--duration-fast) var(--ease-out);font-size:12px;font-family:var(--font-family);background:0 0;border:none;padding:2px 4px;line-height:1}.snippet-tray__action-btn:hover{color:var(--color-error);background:#e840401a}.canvas-mode{background:var(--surface-0);flex-direction:column;height:100%;display:flex}.canvas-toolbar{align-items:center;gap:var(--space-sm);padding:var(--space-xs) var(--space-md);background:var(--surface-1);border-bottom:var(--border-subtle);flex-shrink:0;min-height:36px;display:flex}.canvas-toolbar__group{align-items:center;gap:var(--space-xs);display:flex}.canvas-toolbar__label{font-size:var(--font-size-xs);color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.05em}.canvas-toolbar__spacer{flex:1}.canvas-timeline{flex-direction:column;flex:1;display:flex;position:relative;overflow:hidden}.canvas-ruler{background:var(--surface-2);border-bottom:var(--border-subtle);flex-shrink:0;height:24px;display:flex;position:relative;overflow:hidden}.canvas-ruler__bar{height:100%;font-size:10px;font-weight:var(--font-weight-medium);color:var(--text-tertiary);border-right:1px solid var(--surface-4);box-sizing:border-box;font-variant-numeric:tabular-nums;flex-shrink:0;align-items:center;padding-left:6px;display:flex}.canvas-ruler__beat{height:100%;color:var(--text-tertiary);border-right:1px solid var(--surface-4);box-sizing:border-box;font-variant-numeric:tabular-nums;flex-shrink:0;justify-content:center;align-items:center;font-size:8px;display:flex}.canvas-ruler__bar:nth-child(4n+1){color:var(--text-secondary)}.canvas-tracks{flex:1;position:relative;overflow:auto}.canvas-tracks__inner{flex-direction:column;min-height:100%;display:flex;position:relative}.canvas-lane{border-bottom:1px solid var(--surface-3);min-height:72px;display:flex;position:relative}.canvas-lane__header{width:140px;padding:var(--space-xs) var(--space-sm);background:var(--surface-1);border-right:var(--border-subtle);z-index:2;flex-direction:column;flex-shrink:0;justify-content:center;gap:3px;display:flex;position:sticky;left:0}.canvas-lane__name-row{align-items:center;gap:4px;display:flex}.canvas-lane__name{font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);color:var(--text-primary);white-space:nowrap;text-overflow:ellipsis;cursor:text;flex:1;overflow:hidden}.canvas-lane__name:hover{color:var(--accent-light)}.canvas-lane__type{border:1px solid var(--surface-4);color:var(--text-tertiary);text-transform:uppercase;border-radius:3px;flex:none;padding:2px 3px;font-size:9px;line-height:1}.canvas-lane__name-input{font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);color:var(--text-primary);background:var(--surface-3);border:1px solid var(--accent);font-family:var(--font-family);border-radius:3px;outline:none;width:90px;padding:1px 4px}.canvas-lane__remove-btn{color:var(--text-tertiary);cursor:pointer;opacity:0;transition:opacity var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);background:0 0;border:none;padding:0 2px;font-size:10px;line-height:1}.canvas-lane__header:hover .canvas-lane__remove-btn{opacity:1}.canvas-lane__remove-btn:hover{color:var(--color-error)}.canvas-lane__instrument{font-size:10px;font-family:var(--font-family);background:var(--surface-3);border:1px solid var(--surface-4);color:var(--text-secondary);cursor:pointer;border-radius:3px;max-width:120px;padding:1px 3px;line-height:1.3}.canvas-lane__instrument:hover{border-color:var(--accent-dim)}.canvas-lane__inst-label{font-size:10px;font-family:var(--font-family);color:var(--accent-light);opacity:.8;padding:1px 3px;line-height:1.3}.canvas-lane__controls{gap:4px;display:flex}.canvas-lane__ctrl-btn{font-size:9px;font-weight:var(--font-weight-bold);background:var(--surface-3);color:var(--text-tertiary);cursor:pointer;font-family:var(--font-family);text-transform:uppercase;letter-spacing:.05em;transition:all var(--duration-fast) var(--ease-out);border:none;border-radius:3px;padding:1px 6px;line-height:1.4}.canvas-lane__ctrl-btn:hover{background:var(--surface-4);color:var(--text-secondary)}.canvas-lane__ctrl-btn.is-muted{background:var(--color-mute);color:var(--surface-1)}.canvas-lane__ctrl-btn.is-solo{background:var(--color-warning);color:var(--surface-1)}.canvas-lane__content{background:repeating-linear-gradient(90deg, transparent, transparent calc(var(--bar-width) - 1px), var(--surface-3) calc(var(--bar-width) - 1px), var(--surface-3) var(--bar-width));flex:1;position:relative;overflow:hidden}.canvas-lane__content:before{content:"";background:repeating-linear-gradient(90deg, transparent, transparent calc(var(--beat-width) - 1px), #ffffff05 calc(var(--beat-width) - 1px), #ffffff05 var(--beat-width));pointer-events:none;position:absolute;inset:0}.canvas-clip{border-radius:var(--radius-sm);cursor:grab;transition:box-shadow var(--duration-fast) var(--ease-out);border:1px solid #ffffff1a;flex-direction:column;min-width:20px;display:flex;position:absolute;top:4px;bottom:4px;overflow:visible}.canvas-clip:hover{border-color:#fff3;box-shadow:0 0 12px #ffffff1a}.canvas-clip.is-selected{border-color:var(--accent);box-shadow:0 0 16px var(--accent-glow)}.canvas-clip.is-dragging{opacity:.7;cursor:grabbing;z-index:10}.canvas-clip__label{font-size:9px;font-weight:var(--font-weight-semibold);white-space:nowrap;text-overflow:ellipsis;color:#fffc;padding:2px 4px;overflow:hidden}.canvas-clip__preview{opacity:.6;flex:1;padding:2px}.canvas-playhead{background:var(--accent-light);z-index:5;pointer-events:none;width:2px;box-shadow:0 0 6px var(--accent-glow-strong);transition:left 50ms linear;position:absolute;top:0;bottom:0}.canvas-playhead:before{content:"";background:var(--accent-light);clip-path:polygon(0 0,100% 0,50% 100%);width:10px;height:8px;position:absolute;top:0;left:-4px}.canvas-lane__content.is-drop-target{background-color:var(--accent-glow)}.canvas-add-track{justify-content:center;align-items:center;gap:var(--space-sm);padding:var(--space-md);color:var(--text-tertiary);font-size:var(--font-size-sm);cursor:pointer;border:1px dashed var(--surface-4);margin:var(--space-sm);border-radius:var(--radius-sm);transition:all var(--duration-fast) var(--ease-out);font-family:var(--font-family);background:0 0;display:flex}.canvas-add-track:hover{border-color:var(--accent-dim);color:var(--text-secondary);background:var(--accent-glow)}.canvas-snippet-dock{gap:var(--space-sm);padding:var(--space-sm) var(--space-md);background:var(--surface-1);border-top:var(--border-subtle);flex-shrink:0;align-items:center;min-height:52px;display:flex;overflow-x:auto}.canvas-snippet-dock__empty{color:var(--text-tertiary);font-size:var(--font-size-xs);white-space:nowrap;font-style:italic}.canvas-snippet-dock__item{padding:var(--space-xs) var(--space-sm);background:var(--surface-3);border:1px solid var(--surface-4);border-radius:var(--radius-sm);font-size:var(--font-size-xs);color:var(--text-secondary);cursor:grab;transition:all var(--duration-fast) var(--ease-out);-webkit-user-select:none;user-select:none;flex-shrink:0;align-items:center;gap:4px;display:flex}.canvas-snippet-dock__item:hover{border-color:var(--accent-dim);background:var(--surface-4)}.canvas-snippet-dock__item.is-dragging{opacity:.5}.edit-mode{background:var(--surface-0);flex-direction:column;height:100%;display:flex}.edit-toolbar{align-items:center;gap:var(--space-sm);padding:var(--space-xs) var(--space-md);background:var(--surface-1);border-bottom:var(--border-subtle);flex-shrink:0;min-height:36px;display:flex}.edit-toolbar__group{align-items:center;gap:var(--space-xs);display:flex}.edit-toolbar__label{font-size:var(--font-size-xs);color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.05em}.edit-toolbar__value{font-size:var(--font-size-sm);color:var(--text-primary);font-weight:var(--font-weight-semibold)}.edit-toolbar__spacer{flex:1}.edit-toolbar .btn.is-active{color:var(--accent-light);background:var(--surface-3)}.edit-toolbar__select{background:var(--surface-3);border:var(--border-subtle);border-radius:var(--radius-sm);color:var(--text-primary);font-family:var(--font-family);font-size:var(--font-size-xs);min-height:28px;padding:2px 6px}.edit-empty{justify-content:center;align-items:center;gap:var(--space-md);height:100%;color:var(--text-tertiary);flex-direction:column;display:flex}.edit-empty__icon{opacity:.5;font-size:48px}.edit-empty__title{font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);color:var(--text-secondary)}.edit-empty__desc{font-size:var(--font-size-sm);text-align:center;max-width:300px;line-height:1.5}.edit-empty__select{background:var(--surface-3);border:var(--border-subtle);border-radius:var(--radius-sm);color:var(--text-primary);font-family:var(--font-family);font-size:var(--font-size-sm);padding:var(--space-xs) var(--space-sm);min-width:200px;min-height:32px;margin-top:var(--space-md)}.piano-roll{flex:1;display:flex;position:relative;overflow:hidden}.piano-roll-pane{border-bottom:1px solid var(--surface-3);flex:1;display:flex;position:relative;overflow:hidden}.piano-roll-pane:last-child{border-bottom:none}.piano-roll__keys{background:var(--surface-1);border-right:var(--border-subtle);z-index:2;flex-shrink:0;width:48px;overflow-y:hidden}.piano-roll__key{height:var(--note-height,16px);font-variant-numeric:tabular-nums;border-bottom:1px solid var(--surface-3);box-sizing:border-box;-webkit-user-select:none;user-select:none;justify-content:flex-end;align-items:center;padding-right:4px;font-size:9px;display:flex}.piano-roll__key--white{background:var(--surface-2);color:var(--text-tertiary)}.piano-roll__key--black{background:var(--surface-0);color:var(--text-tertiary);font-weight:var(--font-weight-semibold)}.piano-roll__key--c{color:var(--accent);font-weight:var(--font-weight-bold)}.piano-roll__key--drum{color:#d4a574;font-weight:var(--font-weight-semibold);letter-spacing:.04em;font-size:8px;background:#af8a6a26!important}.piano-roll__grid-container{flex:1;position:relative;overflow:auto}.piano-roll__grid{position:relative}.piano-roll__grid-bg{pointer-events:none;position:absolute;inset:0}.piano-roll__row{height:var(--note-height,16px);border-bottom:1px solid var(--surface-3);box-sizing:border-box}.piano-roll__row--black{background:#00000026}.piano-roll__row--c{border-bottom:1px solid var(--surface-5)}.piano-roll__beat-line{background:var(--surface-4);pointer-events:none;width:1px;position:absolute;top:0;bottom:0}.piano-roll__beat-line--bar{background:var(--surface-5);width:1px}.piano-roll__beat-line--sub{background:#ffffff08}.piano-roll__note{height:calc(var(--note-height,16px) - 2px);cursor:pointer;transition:box-shadow var(--duration-fast) var(--ease-out);color:#ffffffb3;white-space:nowrap;box-sizing:border-box;border-radius:2px;align-items:center;min-width:6px;padding-left:3px;font-size:8px;display:flex;position:absolute;overflow:hidden}.piano-roll__note--midi{background:linear-gradient(135deg,#6a8cafcc,#6a8caf80);border:1px solid #6a8caf99}.piano-roll__note--drum{border-radius:var(--radius-round);background:linear-gradient(135deg,#af8a6acc,#af8a6a80);border:1px solid #af8a6a99}.piano-roll__note:hover{z-index:3;box-shadow:0 0 8px #6a8caf66}.piano-roll__note.is-selected{border-color:var(--accent-light);box-shadow:0 0 12px var(--accent-glow-strong);z-index:4}.piano-roll__note-resize{cursor:ew-resize;background:0 0;width:6px;position:absolute;top:0;bottom:0;right:0}.piano-roll__note-velocity{background:var(--accent);opacity:.6;border-radius:0 0 2px 2px;height:2px;position:absolute;bottom:0;left:0;right:0}.piano-roll__ghost-note{height:calc(var(--note-height,16px) - 2px);pointer-events:none;background:#ffffff0d;border:1px solid #ffffff0d;border-radius:2px;position:absolute}.piano-roll__ruler{background:var(--surface-2);border-bottom:var(--border-subtle);flex-shrink:0;height:20px;display:flex;position:relative}.piano-roll__ruler-label{color:var(--text-tertiary);font-variant-numeric:tabular-nums;font-size:9px;position:absolute;top:4px}.velocity-lane{background:var(--surface-1);border-top:var(--border-subtle);flex-shrink:0;height:48px;position:relative;overflow:hidden}.velocity-lane__bar{background:var(--accent-dim);cursor:ns-resize;width:4px;transition:background var(--duration-fast) var(--ease-out);border-radius:2px 2px 0 0;position:absolute;bottom:0}.velocity-lane__bar:hover{background:var(--accent)}.velocity-lane__bar.is-selected{background:var(--accent-light)}.edit-audio{justify-content:center;align-items:center;gap:var(--space-lg);height:100%;color:var(--text-primary);flex-direction:column;display:flex}.edit-audio__header{font-size:var(--font-size-md);font-weight:var(--font-weight-semibold)}.edit-audio__body{align-items:center;gap:var(--space-md);flex-direction:column;display:flex}.edit-audio__player{border-radius:var(--radius-sm);background:var(--surface-2);width:280px;height:40px}.edit-audio__meta{font-size:var(--font-size-xs);color:var(--text-tertiary)}.abcjs-inline-audio{box-sizing:border-box;background-color:#424242;border-radius:3px;align-items:center;height:26px;padding:0 5px;display:flex}.abcjs-inline-audio.abcjs-disabled{opacity:.5}.abcjs-inline-audio .abcjs-btn{box-sizing:border-box;border:1px solid #0000;width:28px;height:34px;margin-right:2px;padding:7px 4px;line-height:1;display:block;background:0 0!important}.abcjs-btn g{fill:#f4f4f4;stroke:#f4f4f4}.abcjs-inline-audio .abcjs-btn:hover g{fill:#ccc;stroke:#ccc}.abcjs-inline-audio .abcjs-midi-selection.abcjs-pushed,.abcjs-inline-audio .abcjs-midi-loop.abcjs-pushed,.abcjs-inline-audio .abcjs-midi-reset.abcjs-pushed{box-sizing:border-box;background-color:#666;border:1px solid #ccc}.abcjs-inline-audio .abcjs-midi-start .abcjs-pause-svg,.abcjs-inline-audio .abcjs-midi-start .abcjs-loading-svg,.abcjs-inline-audio .abcjs-midi-start.abcjs-pushed .abcjs-play-svg,.abcjs-inline-audio .abcjs-midi-start.abcjs-loading .abcjs-play-svg{display:none}.abcjs-inline-audio .abcjs-midi-start.abcjs-pushed .abcjs-pause-svg{display:block}.abcjs-inline-audio .abcjs-midi-progress-background{box-sizing:border-box;background-color:#424242;border:2px solid #ccc;border-radius:5px;flex:1;height:10px;margin:0 8px 0 15px;padding:0;position:relative}.abcjs-inline-audio .abcjs-midi-progress-indicator{box-sizing:border-box;background-color:#f4f4f4;border-radius:6px;width:20px;height:14px;margin-left:-10px;display:inline-block;position:absolute;top:-4px;left:0}.abcjs-inline-audio .abcjs-midi-clock{box-sizing:border-box;color:#f4f4f4;margin-top:1px;margin-left:4px;margin-right:2px;font-family:sans-serif;font-size:16px;display:inline-block}.abcjs-inline-audio .abcjs-tempo-wrapper{color:#f4f4f4;box-sizing:border-box;align-items:center;font-size:10px;display:flex}.abcjs-inline-audio .abcjs-midi-tempo{box-sizing:border-box;border:none;border-radius:2px;width:42px;margin:0 2px 0 4px;padding-left:2px}.abcjs-inline-audio .abcjs-loading .abcjs-loading-svg{display:inherit}.abcjs-inline-audio .abcjs-loading{outline:none;animation-name:abcjs-spin;animation-duration:1s;animation-timing-function:linear;animation-iteration-count:infinite}.abcjs-inline-audio .abcjs-loading-svg circle{stroke:#f4f4f4}@keyframes abcjs-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.abcjs-large .abcjs-inline-audio{height:52px}.abcjs-large .abcjs-btn{width:56px;height:52px;padding:6px 8px;font-size:28px}.abcjs-large .abcjs-midi-progress-background{border:4px solid #ccc;height:20px}.abcjs-large .abcjs-midi-progress-indicator{width:40px;height:28px;top:-8px}.abcjs-large .abcjs-midi-clock{margin-top:-1px;margin-left:10px;margin-right:10px;font-size:32px}.abcjs-large .abcjs-midi-tempo{width:50px;font-size:20px}.abcjs-large .abcjs-tempo-wrapper{font-size:20px}.abcjs-css-warning{display:none}