/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial}}}@layer theme{:root,:host{--font-sans:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--color-red-400:oklch(70.4% .191 22.216);--color-amber-300:oklch(87.9% .169 91.605);--color-gray-400:oklch(70.7% .022 261.325);--color-gray-500:oklch(55.1% .027 264.364);--spacing:.25rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring:where(:not(iframe)){outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.pointer-events-none{pointer-events:none}.absolute{position:absolute}.relative{position:relative}.inset-0{inset:0}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.h-3{height:calc(var(--spacing) * 3)}.h-4{height:calc(var(--spacing) * 4)}.h-full{height:100%}.min-h-0{min-height:0}.w-3{width:calc(var(--spacing) * 3)}.w-4{width:calc(var(--spacing) * 4)}.w-9{width:calc(var(--spacing) * 9)}.w-20{width:calc(var(--spacing) * 20)}.w-36{width:calc(var(--spacing) * 36)}.max-w-40{max-width:calc(var(--spacing) * 40)}.min-w-0{min-width:0}.shrink-0{flex-shrink:0}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.touch-none{touch-action:none}.resize{resize:both}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.justify-center{justify-content:center}.gap-2{gap:calc(var(--spacing) * 2)}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.p-1{padding:var(--spacing)}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.text-\[10px\]{font-size:10px}.text-amber-300{color:var(--color-amber-300)}.text-gray-400{color:var(--color-gray-400)}.text-gray-500{color:var(--color-gray-500)}.text-red-400{color:var(--color-red-400)}.blur{--tw-blur:blur(8px);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.disabled\:opacity-30:disabled{opacity:.3}@media (width>=48rem){.md\:block{display:block}}}:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg:#10151f;--surface:#161d29;--surface-raised:#1d2736;--surface-hover:#263347;--border:#2a3546;--text:#eef1f7;--muted:#a1afc2;--gold:#f0cd73;--gold-soft:#f0cd7314;--danger:#fb927c;--instrument-color:var(--gold);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;font-family:Inter,Segoe UI,sans-serif}body{background:var(--bg);color:var(--text);margin:0;overflow:hidden}.startup-screen{box-sizing:border-box;background:radial-gradient(ellipse at 50% 35%, #26364b44, transparent 65%), var(--bg);place-items:center;height:100dvh;min-height:100dvh;padding:28px;display:grid;overflow-y:auto}.startup-card{text-align:center;width:min(100%,320px)}.startup-logo{width:138px;height:auto;margin:0 auto 16px;display:block}.startup-card h1{color:var(--gold);letter-spacing:-1px;font-size:27px;font-weight:650}.startup-symbol{min-height:30px;color:var(--danger);justify-content:center;align-items:center;margin:36px 0 17px;display:flex}.startup-wave{align-items:center;gap:4px;height:28px;display:flex}.startup-wave i{background:var(--gold);border-radius:3px;width:3px;height:25px;animation:1s ease-in-out infinite alternate startup-pulse;display:block}.startup-wave i:nth-child(2),.startup-wave i:nth-child(4){height:19px;animation-delay:-.3s}.startup-wave i:nth-child(3){height:28px;animation-delay:-.6s}.startup-card h2{color:var(--text);margin-bottom:24px;font-size:13px;font-weight:500}.startup-card progress{appearance:none;background:var(--border);border:0;border-radius:5px;width:100%;height:4px;display:block;overflow:hidden}.startup-card progress::-webkit-progress-bar{background:var(--border)}.startup-card progress::-webkit-progress-value{background:var(--gold)}.startup-card progress::-moz-progress-bar{background:var(--gold)}.startup-count{color:var(--muted);justify-content:space-between;margin-top:11px;font:11px Consolas,monospace;display:flex}.startup-card p{color:var(--muted);margin-top:24px;font-size:12px}.startup-card .startup-retry{color:var(--gold);border-color:#f0cd7340;margin:26px auto 0}.startup-details{text-align:left;color:var(--muted);margin-top:24px;font-size:11px}.startup-details summary{cursor:pointer}.startup-details ul{max-height:180px;margin-top:8px;overflow-y:auto}.startup-details li{border-top:1px solid var(--border);overflow-wrap:anywhere;padding:9px 0}.startup-details strong{color:var(--text);margin-bottom:3px;font-weight:500;display:block}@keyframes startup-pulse{0%{opacity:.4;transform:scaleY(.4)}to{opacity:1;transform:scaleY(1)}}button,input,select{font:inherit}button,a,input,select{transition:background-color .18s,color .18s,border-color .18s,box-shadow .18s,transform .18s}button:not(:disabled),select:not(:disabled),input[type=range]{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.35}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--gold);outline-offset:3px}button svg,a svg{flex-shrink:0;transition:transform .18s}button:disabled svg{transform:none}input,select{min-width:0}input[type=number]{appearance:textfield}input[type=number]::-webkit-inner-spin-button{appearance:none;margin:0}input[type=number]::-webkit-outer-spin-button{appearance:none;margin:0}input[type=range]{appearance:none;background:var(--border);height:4px;accent-color:var(--instrument-color);border-radius:8px}input[type=range]::-webkit-slider-thumb{appearance:none;background:var(--instrument-color);border:2px solid var(--surface);width:13px;height:13px;box-shadow:0 0 0 1px var(--instrument-color);border-radius:50%}input[type=range]::-moz-range-thumb{background:var(--instrument-color);border:2px solid var(--surface);width:10px;height:10px;box-shadow:0 0 0 1px var(--instrument-color);border-radius:50%}input[type=range]:hover{background:#40516b}::selection{background:#f0cd7333}::-webkit-scrollbar{width:7px;height:7px}::-webkit-scrollbar-track{background:var(--bg)}::-webkit-scrollbar-thumb{border:2px solid var(--bg);background:#344158;border-radius:8px}::-webkit-scrollbar-thumb:hover{background:#536581}kbd{border:1px solid var(--border);min-width:22px;color:var(--muted);background:#ffffff05;border-bottom-width:2px;border-radius:5px;justify-content:center;align-items:center;padding:2px 5px;font:10px Cascadia Code,Consolas,monospace;display:inline-flex}.studio-app{flex-direction:column;height:100dvh;display:flex;overflow:hidden}.studio-header{border-bottom:1px solid var(--border);background:#121925;flex-shrink:0;justify-content:space-between;align-items:center;gap:20px;min-height:82px;padding:16px 24px;display:flex}.studio-brand{align-items:center;gap:16px;display:flex}.brand-logo{align-items:center;width:100px;display:flex}.brand-logo img{width:100%;height:auto}.brand-logo:hover{filter:brightness(1.1);transform:translateY(-2px)}.brand-divider,.transport-divider{background:var(--border);width:1px;height:28px}.icon-button{width:34px;height:34px;color:var(--muted);background:0 0;border:1px solid #0000;border-radius:8px;flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.icon-button[aria-pressed=true]{color:var(--gold);background:var(--gold-soft)}.action-button{border:1px solid var(--border);background:var(--surface-raised);min-height:36px;color:var(--text);border-radius:8px;justify-content:center;align-items:center;gap:8px;padding:8px 12px;font-size:12px;font-weight:500;display:inline-flex}.primary-button{color:#282313;border-color:var(--gold);background:var(--gold);font-weight:650}.danger-button{color:var(--danger);background:#fb927c0b;border-color:#fb927c24}.transport-controls{border:1px solid var(--border);background:#0c111a;border-radius:12px;align-items:center;gap:5px;padding:5px 9px;display:flex}.play-button:not(:disabled){color:#66d9c4;background:#66d9c415}.record-button{min-height:32px;color:var(--danger);background:#fb927c10;border:1px solid #fb927c25;border-radius:7px;justify-content:center;align-items:center;gap:8px;margin:0 6px;padding:6px 10px;font-size:11px;font-weight:600;display:inline-flex}.record-button[data-recording=true]{color:#fff;background:#b84146}.record-button[data-recording=true] svg{animation:1.2s ease-in-out infinite recording-pulse}.bpm-control{align-items:center;gap:5px;padding:0 7px;display:flex}.bpm-control input{width:35px;color:var(--gold);text-align:right;background:0 0;font:600 17px Cascadia Code,Consolas,monospace}.bpm-control>span{color:var(--muted);letter-spacing:1px;font-size:9px}.header-options{align-items:center;gap:5px;display:flex}.header-export-button{color:var(--gold);background:var(--gold-soft)}.studio-body{flex:1;min-height:0;display:flex;position:relative;overflow:hidden}.navigation-content{flex-direction:column;height:100%;padding:24px 13px 12px;display:flex;overflow-y:auto}.nav-item{width:100%;color:var(--muted);text-align:left;border:1px solid #0000;border-radius:9px;align-items:center;gap:12px;padding:12px;font-size:12px;display:flex}.nav-item[aria-pressed=true]{background:var(--gold-soft);color:var(--gold);border-color:#f0cd7325}.nav-item span{flex:1}.nav-item[aria-pressed=true] .nav-chevron{opacity:.7}.nav-tools{gap:5px;display:grid}.switch-indicator{background:#455269;border-radius:10px;flex-shrink:0;width:26px;height:15px;transition:background-color .18s;position:relative}.switch-indicator:after{content:"";background:#fff;border-radius:50%;width:9px;height:9px;transition:transform .18s;position:absolute;top:3px;left:3px}[aria-pressed=true]>.switch-indicator{background:#a18137}[aria-pressed=true]>.switch-indicator:after{transform:translate(11px)}.studio-main{background:radial-gradient(ellipse at 90% 0, #25324427, transparent 60%), var(--bg);flex-direction:column;flex:1;min-width:0;display:flex;overflow:hidden}.timeline-container{flex:1;min-height:150px;padding:12px 24px 0;overflow:hidden}.keyboard-container{border-top:1px solid var(--border);background:#151d2a;flex-shrink:0;max-height:42vh;margin-top:12px;overflow-y:auto}.settings-panel{border-left:1px solid var(--border);z-index:30;background:#151d2a;flex-shrink:0;width:310px;max-width:86vw;padding:16px;animation:.2s both panel-enter;position:relative;overflow-y:auto}.panel-section{flex-direction:column;gap:17px;display:flex}.panel-heading{align-items:center;gap:12px;margin-bottom:7px;display:flex}.panel-heading-icon{background:var(--gold-soft);color:var(--gold);border:1px solid #f0cd7322;border-radius:11px;padding:11px;display:flex}.panel-heading h2{font-size:15px;font-weight:650}.panel-heading p{color:var(--muted);margin-top:4px;font-size:10px;line-height:1.6}.section-label,.field-label{color:var(--muted);letter-spacing:1px;font-size:9px;font-weight:500}.section-label{margin-top:8px}.text-input{border:1px solid var(--border);background:var(--bg);width:100%;min-height:39px;color:var(--text);border-radius:8px;padding:10px 12px;font-size:12px}.text-input::placeholder{color:#7e8da4}.panel-actions,.instrument-cards,.layout-options{gap:9px;display:grid}.control-label{color:var(--text);justify-content:space-between;gap:10px;margin-bottom:10px;font-size:11px;display:flex}.control-label output{color:var(--instrument-color);font:11px Consolas,monospace}.volume-control{border:1px solid var(--border);background:#0e152133;border-radius:9px;padding:14px 10px}.volume-slider{align-items:center;gap:7px;display:flex}.volume-slider input{flex:1;width:100%}.volume-slider button{width:24px;height:24px}.mixer-track .volume-control{border-left:2px solid var(--instrument-color)}.mixer-track[data-selected=true] .volume-control{background:var(--instrument-color)}@supports (color:color-mix(in lab, red, red)){.mixer-track[data-selected=true] .volume-control{background:color-mix(in srgb, var(--instrument-color) 6%, var(--bg))}}.instrument-card,.layout-option{text-align:left;border:1px solid var(--border);width:100%;color:var(--muted);background:#111823;border-radius:10px;align-items:center;gap:12px;padding:14px 12px;display:flex}.instrument-card>span:nth-child(2),.layout-option>span:first-of-type{flex:1;min-width:0}.instrument-card strong,.layout-option strong{color:var(--text);font-size:12px;font-weight:600;display:block}.instrument-card small,.layout-option small{color:var(--muted);margin-top:5px;font-size:9px;line-height:1.6;display:block}.instrument-card[aria-pressed=true]{border-color:var(--instrument-color)}@supports (color:color-mix(in lab, red, red)){.instrument-card[aria-pressed=true]{border-color:color-mix(in srgb, var(--instrument-color) 55%, transparent)}}.instrument-card[aria-pressed=true]{background:var(--instrument-color)}@supports (color:color-mix(in lab, red, red)){.instrument-card[aria-pressed=true]{background:color-mix(in srgb, var(--instrument-color) 8%, var(--bg))}}.instrument-card[aria-pressed=true]{color:var(--instrument-color)}.instrument-icon{width:42px;height:42px;color:var(--instrument-color);background:var(--instrument-color);border-radius:10px;justify-content:center;align-items:center;display:inline-flex}@supports (color:color-mix(in lab, red, red)){.instrument-icon{background:color-mix(in srgb, var(--instrument-color) 12%, transparent)}}.layout-option[aria-pressed=true]{color:var(--gold);background:var(--gold-soft);border-color:#f0cd7366}.project-stats{border:1px solid var(--border);border-radius:9px;justify-content:space-around;gap:10px;padding:17px 5px;display:flex}.project-stats>div{text-align:center;gap:5px;display:grid}.project-stats strong{color:var(--gold);font-size:17px;font-weight:500}.project-stats span{color:var(--muted);font-size:9px}.tempo-control{background:var(--bg);border:1px solid var(--border);border-radius:10px;gap:10px;padding:10px 15px;display:grid}.tempo-control>div{justify-content:space-between;align-items:center;display:flex}.tempo-control output{color:var(--gold);text-align:center;font:35px Consolas,monospace}.tempo-control output small{letter-spacing:2px;color:var(--muted);font:9px Segoe UI,sans-serif;display:block}.tempo-control input{width:100%;margin-top:6px}.range-labels{color:var(--muted);font-size:9px}.tempo-presets{grid-template-columns:repeat(3,1fr);gap:7px;display:grid}.tempo-presets [aria-pressed=true]{color:var(--gold);background:var(--gold-soft);border-color:#f0cd7366}.shortcut-list>div{border-bottom:1px solid var(--border);padding:10px 0}.shortcut-list dd{color:var(--muted);margin-top:7px;font-size:11px}.keyboard-instrument{padding:17px 26px 20px}.keyboard-topbar{justify-content:space-between;align-items:center;gap:12px;margin-bottom:15px;display:flex}.instrument-tabs{gap:6px;display:flex}.instrument-tab{color:var(--muted);border:1px solid #0000;border-radius:8px;align-items:center;gap:8px;padding:8px 11px;font-size:11px;display:flex}.instrument-tab[aria-pressed=true]{background:var(--instrument-color)}@supports (color:color-mix(in lab, red, red)){.instrument-tab[aria-pressed=true]{background:color-mix(in srgb, var(--instrument-color) 10%, transparent)}}.instrument-tab[aria-pressed=true]{border-color:var(--instrument-color)}@supports (color:color-mix(in lab, red, red)){.instrument-tab[aria-pressed=true]{border-color:color-mix(in srgb, var(--instrument-color) 35%, transparent)}}.instrument-tab[aria-pressed=true]{color:var(--instrument-color)}.instrument-tab kbd{min-width:16px;padding:0 3px;font-size:8px}.keyboard-layout-badge{color:var(--muted);text-transform:uppercase;letter-spacing:1px;align-items:center;gap:6px;font-size:9px;display:flex}.keyboard-pad-grid{grid-template-columns:repeat(auto-fit,minmax(55px,1fr));gap:9px;display:grid}.keyboard-pad{border:1px solid var(--border);border-bottom:3px solid var(--instrument-color);flex-direction:column;justify-content:center;align-items:flex-start;min-width:0;height:74px;padding:12px;display:flex;position:relative}@supports (color:color-mix(in lab, red, red)){.keyboard-pad{border-bottom:3px solid color-mix(in srgb, var(--instrument-color) 35%, var(--border))}}.keyboard-pad{color:var(--text);background:linear-gradient(135deg,#232f40,#1a2534);border-radius:9px;box-shadow:0 3px #0a101999}.keyboard-pad>span:first-child{font:600 21px Segoe UI,sans-serif}.keyboard-pad>span:nth-child(2){text-overflow:ellipsis;white-space:nowrap;max-width:100%;color:var(--muted);margin-top:4px;font-size:9px;overflow:hidden}.keyboard-pad:after{content:"";background:var(--instrument-color);opacity:.7;border-radius:50%;width:4px;height:4px;position:absolute;top:13px;right:12px}.keyboard-pad[aria-pressed=true]{color:var(--instrument-color);border-color:var(--instrument-color);background:var(--instrument-color)}@supports (color:color-mix(in lab, red, red)){.keyboard-pad[aria-pressed=true]{background:color-mix(in srgb, var(--instrument-color) 20%, var(--bg))}}.keyboard-pad[aria-pressed=true]{box-shadow:0 0 20px var(--instrument-color)}@supports (color:color-mix(in lab, red, red)){.keyboard-pad[aria-pressed=true]{box-shadow:0 0 20px color-mix(in srgb, var(--instrument-color) 18%, transparent)}}.keyboard-pad[aria-pressed=true]{transform:translateY(2px)}.keyboard-pad[aria-pressed=true]>span:nth-child(2){color:var(--text)}.timeline-toolbar{border-top:1px solid var(--border);border-bottom:1px solid var(--border);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;padding:11px 0;display:flex}.timeline-tools{flex-wrap:wrap;align-items:center;gap:12px;display:flex}.timeline-control-group{align-items:center;gap:3px;display:flex}.timeline-value{min-width:42px;color:var(--muted);white-space:nowrap;border:1px solid #0000;border-radius:6px;justify-content:center;align-items:center;padding:5px;font:10px Consolas,monospace;display:inline-flex}button.timeline-value:hover{color:var(--gold);border-color:var(--border);background:var(--gold-soft)}.timeline-control-group+.timeline-control-group{border-left:1px solid var(--border);padding-left:10px}.timeline-tool-symbol{color:var(--muted);margin-left:3px}.timeline-duration{align-items:center;gap:3px;display:flex}.timeline-duration>span{white-space:nowrap}.timeline-toolbar .icon-button{width:30px;height:30px}.timeline-readout{color:var(--muted);align-items:center;gap:15px;font-size:10px;display:flex}.timeline-readout output{color:var(--gold);font:16px Consolas,monospace}.timeline-scroll{flex:1;min-height:0;padding:9px 1px;overflow:auto}.time-ruler{cursor:crosshair;border-bottom:1px solid var(--border);height:28px;margin-bottom:10px;margin-left:var(--timeline-axis-left,0px);margin-right:var(--timeline-axis-right,0px);position:relative}.time-ruler span{color:#8b9db6;font:9px Consolas,monospace;top:1px}.time-ruler span:after{content:"";background:var(--border);width:1px;height:5px;margin-top:4px;display:block}.timeline-playhead{background:var(--gold);z-index:20;pointer-events:none;width:1px;position:absolute;top:21px;bottom:0;box-shadow:0 0 8px #f0cd7333}.timeline-playhead:before{content:"";background:var(--gold);border-radius:2px 2px 4px 4px;width:9px;height:9px;position:absolute;top:-3px;left:-4px}.timeline-track{border:1px solid var(--border);border-left:3px solid var(--instrument-color);background:var(--instrument-color);border-radius:9px;margin-bottom:10px;position:relative;overflow:visible}@supports (color:color-mix(in lab, red, red)){.timeline-track{background:color-mix(in srgb, var(--instrument-color) 3%, #141c29)}}.timeline-track{transition:background-color .18s,border-color .18s}.timeline-track[data-selected=true]{border-color:var(--instrument-color)}@supports (color:color-mix(in lab, red, red)){.timeline-track[data-selected=true]{border-color:color-mix(in srgb, var(--instrument-color) 45%, var(--border))}}.track-heading{background:var(--instrument-color);border-bottom:1px solid #ffffff08;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;padding:9px 12px;display:flex}@supports (color:color-mix(in lab, red, red)){.track-heading{background:color-mix(in srgb, var(--instrument-color) 4%, transparent)}}.track-heading{border-radius:8px 8px 0 0}.track-heading>div:first-child>svg{color:var(--instrument-color)}.track-heading>div:first-child>span:first-of-type{color:var(--text);font-size:11px;font-weight:600}.track-heading input[type=range]{width:70px}.track-heading button{border-radius:6px;justify-content:center;align-items:center;width:25px;height:25px;display:inline-flex}.track-editor-advanced{display:flex}.track-lane-labels{height:var(--track-height);background:var(--surface);border-right:1px solid var(--border);flex:0 0 80px;overflow:hidden}.track-lane-label{border-bottom:1px solid #ffffff0b;flex-direction:column;justify-content:center;padding:0 7px;font-size:9px;line-height:1.25;display:flex}.track-lane-label strong{color:var(--instrument-color);font-size:11px}.track-content{height:var(--track-height,87px);flex:1;min-width:0;position:relative}.track-editor-advanced .track-content{overflow:hidden scroll}.track-editor-advanced .track-content::-webkit-scrollbar{width:6px}.track-editor-advanced .track-content::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}.track-note-grid{background-image:linear-gradient(90deg,#ffffff10 1px,#0000 1px);position:relative}.track-note-lane{border-bottom:1px solid #ffffff0b}.track-note-lane:nth-of-type(2n){background:#ffffff02}.track-content[data-receiving=true]{outline:2px solid var(--instrument-color);outline-offset:-2px;background:var(--instrument-color)}@supports (color:color-mix(in lab, red, red)){.track-content[data-receiving=true]{background:color-mix(in srgb, var(--instrument-color) 15%, transparent)}}.track-content[data-receiving=true]:after{display:none}.timeline-note{width:calc(var(--note-size,32px) * 1.35);position:absolute}.track-editor:not(.track-editor-advanced) .timeline-note{height:100%;top:0}.timeline-note-button{width:100%;height:var(--note-size,32px);cursor:grab;background:var(--instrument-color);font-size:10px;font-weight:700;position:absolute;top:50%;transform:translateY(-50%)}@supports (color:color-mix(in lab, red, red)){.timeline-note-button{background:color-mix(in srgb, var(--instrument-color) 70%, #263041)}}.timeline-note-button{color:#0c1420;border:1px solid var(--instrument-color);border-radius:6px;box-shadow:0 2px 10px #0003}.timeline-note-button[aria-pressed=true]{outline:2px solid var(--text);outline-offset:2px}.timeline-note-button:active{cursor:grabbing}.note-drag-readout{background:var(--surface-raised);color:var(--text);white-space:nowrap;pointer-events:none;border-radius:4px;padding:3px 6px;font:10px Consolas,monospace;position:absolute;top:2px;left:calc(100% + 5px)}.note-size-control,.note-editor,.note-editor label{color:var(--muted);align-items:center;gap:7px;font-size:10px;display:flex}.note-size-control input{width:75px}.note-size-control output{min-width:28px}.note-editor{border-top:1px solid var(--border);flex-wrap:wrap;flex-shrink:0;min-height:44px;padding:7px 0}.note-editor input,.note-editor select{border:1px solid var(--border);min-height:28px;color:var(--text);background:var(--surface);border-radius:5px;padding:3px 6px;font-size:11px}.note-editor input{width:104px;font-family:Consolas,monospace}.simple-note-delete{padding:4px;position:absolute;top:0}.note-actions{background:var(--surface-raised);border:1px solid var(--border);border-radius:6px}.note-actions button{color:var(--text);border-radius:4px}.timeline-bottom{flex-wrap:wrap;justify-content:space-between;gap:10px;padding:10px 0;display:flex}.track-select{border:1px solid var(--border);background:var(--surface);min-height:34px;color:var(--muted);border-radius:8px;padding:6px 9px;font-size:11px}.timeline-empty{flex-direction:column;justify-content:center;align-items:center;gap:17px;min-height:250px;display:flex}.timeline-empty>svg{color:var(--gold)}.timeline-empty h2{color:var(--text);font-size:20px}.timeline-empty p{color:var(--muted);text-align:center;max-width:320px;font-size:12px}@media (hover:hover){.icon-button:hover:not(:disabled),.action-button:hover:not(:disabled){background:var(--surface-hover);color:#fff;border-color:#455673;transform:translateY(-1px)}.primary-button:hover:not(:disabled){color:#282313;background:#ffe09a;border-color:#ffe09a;box-shadow:0 4px 15px #f0cd731e}.record-button:hover{background:#fb927c24;border-color:#fb927c70;transform:translateY(-1px)}.nav-item:hover{color:var(--text);background:#ffffff05;transform:translate(3px)}.nav-item:hover svg:first-child{transform:scale(1.1)}.nav-item:hover .nav-chevron{opacity:.65;transform:translate(2px)}.nav-item[aria-pressed=true]:hover{color:var(--gold);background:#f0cd731c}.layout-option:hover{background:var(--surface-raised);border-color:#59657b}.instrument-card:hover{border-color:var(--instrument-color);transform:translateY(-2px);box-shadow:0 6px 20px #0002}.instrument-tab:hover{background:var(--instrument-color)}@supports (color:color-mix(in lab, red, red)){.instrument-tab:hover{background:color-mix(in srgb, var(--instrument-color) 8%, transparent)}}.instrument-tab:hover{color:var(--instrument-color)}.instrument-tab:hover svg{transform:rotate(-8deg)}.keyboard-pad:hover{border-color:var(--instrument-color);box-shadow:0 5px 18px var(--instrument-color);transform:translateY(-3px)}@supports (color:color-mix(in lab, red, red)){.keyboard-pad:hover{box-shadow:0 5px 18px color-mix(in srgb, var(--instrument-color) 13%, transparent)}}.keyboard-pad:hover{background:var(--instrument-color)}@supports (color:color-mix(in lab, red, red)){.keyboard-pad:hover{background:color-mix(in srgb, var(--instrument-color) 10%, var(--surface))}}.keyboard-pad:hover>span:first-child{color:var(--instrument-color)}.keyboard-pad[aria-pressed=true]:hover{transform:translateY(2px)}.track-heading button:hover,.note-actions button:hover{background:var(--surface-hover);color:var(--gold)}.timeline-note-button:hover{filter:brightness(1.15);box-shadow:0 3px 15px var(--instrument-color)}@supports (color:color-mix(in lab, red, red)){.timeline-note-button:hover{box-shadow:0 3px 15px color-mix(in srgb, var(--instrument-color) 25%, transparent)}}.timeline-track:hover{background:var(--instrument-color)}@supports (color:color-mix(in lab, red, red)){.timeline-track:hover{background:color-mix(in srgb, var(--instrument-color) 6%, #141c29)}}}button:active:not(:disabled),.action-button:active:not(:disabled){transform:translateY(1px)}@keyframes recording-pulse{0%,to{opacity:1}50%{opacity:.35}}@keyframes panel-enter{0%{opacity:0;transform:translate(10px)}to{opacity:1;transform:translate(0)}}@media (width<=1200px){.studio-header{gap:12px;padding:14px 18px}.brand-logo{width:80px}.studio-brand{gap:12px}.settings-panel{position:absolute;top:0;bottom:0;right:0;box-shadow:-20px 0 45px #0005}}@media (width<=950px){.navigation-content{padding:16px 8px 9px}.nav-item{justify-content:center;padding:13px 9px}.nav-item:hover{transform:none}.timeline-container{padding:12px 18px 0}.header-options{gap:0}}:where(.studio-navigation.is-collapsed) .navigation-content{padding:16px 8px 9px;overflow-x:hidden}:where(.studio-navigation.is-collapsed) .nav-item{justify-content:center;padding:13px 9px}:where(.studio-navigation.is-collapsed) .nav-item span,:where(.studio-navigation.is-collapsed) .nav-chevron{display:none}:where(.studio-navigation.is-collapsed) .nav-item:hover{transform:none}@media (width<=700px){.time-ruler span:nth-child(2n){display:none}.time-ruler span:last-child{transform:translate(-1px)}.time-ruler span:nth-child(7){transform:translate(-50%)}.studio-header{flex-wrap:wrap;gap:12px;min-height:0;padding:10px 12px}.studio-brand{flex:1;gap:10px}.brand-logo{width:65px}.brand-divider{height:23px}.navigation-toggle{width:25px}.transport-controls{border-radius:9px;order:3;justify-content:center;width:100%;padding:3px 7px}.record-button{min-width:120px}.header-options .icon-button{width:30px}.fullscreen-button{display:none}.navigation-content{padding:12px 5px 7px}.nav-item{padding:11px 7px}.nav-item svg{width:18px;height:18px}.nav-tools{gap:4px}.timeline-container{min-height:130px;padding:8px 10px 0}.timeline-toolbar{gap:7px;padding:6px 0}.timeline-readout{justify-content:space-between;gap:6px;width:100%;padding:0 4px;font-size:9px}.timeline-readout output{font-size:13px}.timeline-toolbar .icon-button{width:26px;height:27px}.timeline-toolbar .icon-button svg{width:14px}.timeline-track{margin-bottom:8px}.track-heading{gap:7px;padding:7px 9px}.track-heading>div:first-child>span:nth-of-type(2){display:none}.track-heading input[type=range]{width:60px}.keyboard-container{max-height:38vh;margin-top:7px}.keyboard-instrument{padding:10px 12px 12px}.keyboard-topbar{gap:6px;margin-bottom:10px}.instrument-tabs{gap:2px}.instrument-tab{gap:4px;padding:6px;font-size:9px}.instrument-tab svg{width:13px}.instrument-tab kbd,.keyboard-layout-badge{display:none}.keyboard-pad-grid{grid-template-columns:repeat(auto-fit,minmax(42px,1fr));gap:6px}.keyboard-pad{border-radius:7px;height:54px;padding:6px 8px}.keyboard-pad>span:first-child{font-size:17px}.keyboard-pad>span:nth-child(2){margin-top:2px;font-size:7px}.keyboard-pad:after{width:3px;height:3px;top:9px;right:7px}.settings-panel{padding:14px}}@media (height<=750px) and (width>=701px){.studio-header{min-height:65px;padding-top:10px;padding-bottom:10px}.keyboard-pad{height:57px}.keyboard-instrument{padding-top:12px;padding-bottom:12px}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:0s!important;animation:none!important}}.studio-app[data-mode=simple] .studio-main{flex:0 1000px;width:min(100%,1000px);margin:0 auto}.simple-controls{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:20px;padding:24px 24px 12px;display:flex}.simple-instrument-select{color:var(--muted);align-items:center;gap:13px;font-size:12px;display:flex}.simple-instrument-select select{border:1px solid var(--border);background:var(--surface);min-width:150px;color:var(--text);border-radius:8px;padding:9px 12px}.simple-volume{color:var(--muted);align-items:center;gap:9px;font-size:11px;display:flex}.simple-volume input{width:100px}.studio-app[data-mode=simple] .track-content,.studio-app[data-mode=simple] [data-testid=timeline-note]{height:var(--track-height,clamp(64px, 14vh, 148px))}.studio-app[data-mode=simple] .keyboard-container{border:0;margin-top:0}.studio-app[data-mode=simple] .keyboard-instrument{padding-bottom:30px}.studio-app[data-mode=simple] .keyboard-pad{height:80px}@media (width<=700px){.simple-controls{gap:12px;padding:16px 12px 8px}.simple-instrument-select{gap:8px;font-size:11px}.simple-instrument-select select{min-width:110px}.simple-volume>span{display:none}.simple-volume input{width:70px}.simple-mode-toggle{min-height:31px;padding:6px 8px;font-size:9px}.simple-mode-toggle svg{width:14px}.studio-app[data-mode=simple] .header-options{gap:2px}.studio-app[data-mode=simple] .studio-brand{gap:7px}.studio-app[data-mode=simple] .brand-logo{width:52px}.studio-app[data-mode=simple] .keyboard-pad{height:60px}.studio-app[data-mode=simple] .keyboard-instrument{padding-bottom:14px}.studio-app[data-mode=simple] .keyboard-container{max-height:40vh}}.simple-track-actions{align-items:center;gap:12px;display:flex}.simple-track-actions output{color:var(--gold);font:13px Consolas,monospace}.track-heading .simple-track-actions button{width:auto;height:30px;min-height:30px;padding:5px 8px;font-size:10px}.brand-name{color:var(--gold);letter-spacing:-.6px;font-size:21px;font-weight:650;line-height:1}.brand-logo{width:90px}.studio-header{min-height:66px;padding-top:12px;padding-bottom:12px}.record-button.icon-only{width:34px;min-width:34px;min-height:34px;margin:0 2px;padding:0}.mode-button{min-height:34px;padding:7px 10px;font-size:11px}.header-divider{background:var(--border);width:1px;height:22px;margin:0 5px}.navigation-content{padding:14px 10px}.studio-navigation{width:160px}.studio-navigation.is-collapsed{width:60px}.studio-navigation.is-collapsed .nav-item{padding:12px 9px}.close-settings{width:28px;height:28px;color:var(--muted);border-radius:7px;justify-content:center;align-items:center;display:inline-flex;position:absolute;top:12px;right:12px}.close-settings:hover{color:var(--text);background:var(--surface-hover)}.panel-heading{gap:9px;margin-bottom:3px;padding-right:30px}.panel-heading-icon{border-radius:8px;padding:8px}.panel-heading h2{flex:1;font-size:14px}.panel-info{width:25px;height:25px}.project-clear{align-self:flex-end}.project-stats{padding:12px}.metronome-toggle{border:1px solid var(--border);color:var(--muted);border-radius:9px;align-items:center;gap:10px;padding:12px;font-size:12px;display:flex}.metronome-toggle>span:first-of-type{text-align:left;flex:1}.metronome-toggle[aria-pressed=true]{color:var(--gold);background:var(--gold-soft);border-color:#f0cd7355}.keyboard-topbar{min-height:22px}.keyboard-layout-badge{margin-left:auto}.keyboard-pad{align-items:center;padding:10px}.keyboard-pad>span:first-child{font-size:22px}.shortcut-group{border-bottom:1px solid var(--border);padding-bottom:11px}.shortcut-group summary{color:var(--muted);cursor:pointer;padding:6px 0;font-size:11px}.shortcut-group[open] summary{color:var(--gold);margin-bottom:4px}.shortcut-list>div{border-bottom:0;align-items:center;gap:9px;padding:9px 0;display:flex}.shortcut-list dt{flex-shrink:0}.shortcut-list dd{white-space:nowrap;text-overflow:ellipsis;min-width:0;margin-top:0;font-size:10px;overflow:hidden}.note-editor{gap:7px;padding:8px 0}.note-editor label{gap:6px}.simple-instrument-select{color:var(--muted)}.project-notice{z-index:60;border:1px solid var(--border);max-width:min(400px,100vw - 24px);color:var(--text);background:#1c293b;border-radius:10px;align-items:center;gap:9px;padding:7px 9px 7px 12px;font-size:11px;display:flex;position:fixed;bottom:18px;right:18px;box-shadow:0 8px 25px #0005}.project-notice>svg{color:#66d9c4;flex-shrink:0}.project-notice[data-error=true]>svg{color:var(--danger)}.example-instruments{gap:4px;display:flex}.example-instruments button{min-height:36px;color:var(--muted);border:1px solid #0000;border-radius:7px;flex:1;justify-content:center;align-items:center;gap:5px;font-size:10px;display:inline-flex}.example-instruments button[aria-pressed=true]{color:var(--instrument-color);border-color:var(--instrument-color)}@supports (color:color-mix(in lab, red, red)){.example-instruments button[aria-pressed=true]{border-color:color-mix(in srgb, var(--instrument-color) 35%, transparent)}}.example-instruments button[aria-pressed=true]{background:var(--instrument-color)}@supports (color:color-mix(in lab, red, red)){.example-instruments button[aria-pressed=true]{background:color-mix(in srgb, var(--instrument-color) 10%, transparent)}}.example-list{flex-direction:column;gap:10px;display:flex}.example-card{text-align:left;border:1px solid var(--border);background:var(--surface);border-radius:10px;justify-content:space-between;align-items:center;gap:12px;padding:15px 12px;display:flex}.example-card>span{flex-direction:column;gap:7px;min-width:0;display:flex}.example-card strong{color:var(--text);font-size:12px;font-weight:600}.example-card small{color:var(--muted);font-size:10px}.example-card>svg{color:var(--instrument-color);flex-shrink:0}.example-card:hover:not(:disabled){border-color:var(--instrument-color);background:var(--instrument-color)}@supports (color:color-mix(in lab, red, red)){.example-card:hover:not(:disabled){background:color-mix(in srgb, var(--instrument-color) 7%, var(--surface))}}.studio-app[data-mode=simple] .settings-panel{position:absolute;top:0;bottom:0;right:0;box-shadow:-20px 0 45px #0005}.project-notice .icon-button{width:25px;height:25px}.studio-tooltip{z-index:1000;pointer-events:none;color:#f2f5fa;background:#26364d;border:1px solid #485a75;border-radius:8px;width:max-content;max-width:min(280px,100vw - 24px);padding:8px 11px;font:11px/1.6 Segoe UI,sans-serif;animation:.11s ease-out tooltip-appear;position:fixed;box-shadow:0 5px 20px #0005}@keyframes tooltip-appear{0%{opacity:0}to{opacity:1}}@media (width<=700px){.studio-header{min-height:0;padding:10px 12px}.studio-brand{gap:8px}.brand-logo{width:64px}.brand-name{font-size:18px}.header-options{gap:3px}.header-divider{margin:0 2px}.mode-button{gap:5px;min-height:30px;padding:6px 8px;font-size:10px}.studio-navigation.is-collapsed{width:48px}.studio-navigation.is-collapsed .navigation-content{padding:10px 4px}.studio-navigation.is-collapsed .nav-item{padding:11px 7px}.keyboard-layout-badge{font-size:8px;display:flex}.keyboard-pad>span:first-child{font-size:18px}}@media (width<=950px){.studio-navigation:not(.is-collapsed){z-index:25;width:168px;position:absolute;top:0;bottom:0;left:0;box-shadow:12px 0 30px #0005}.studio-navigation:not(.is-collapsed) .nav-item{justify-content:flex-start}.studio-navigation:not(.is-collapsed) .nav-item span{display:inline}}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}