/*
! tailwindcss v3.4.4 | MIT License | https://tailwindcss.com
*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}:root{color-scheme:dark;--page:#151716;--surface:#222523;--line:#363a36;--text:#eeeee6;--muted:#a1a69d;--accent:#e9a36b}body{background:var(--page);color:var(--text)}button,input,select{font:inherit}button{-webkit-tap-highlight-color:transparent}button:disabled{cursor:not-allowed;opacity:.35}:focus-visible{outline:2px solid var(--accent);outline-offset:4px}input[type=checkbox],input[type=range]{accent-color:var(--accent)}*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.h-full{height:100%}.min-h-screen{min-height:100vh}.font-sans{font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.filter{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)}.studio{width:min(100% - 80px,1120px);margin:0 auto;padding:28px 0}.studio-heading{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:26px}.studio-heading h1{font-size:24px;font-weight:650;letter-spacing:-1.2px}.studio-heading h1 span{color:var(--accent)}.studio-signature{font-size:11px;color:var(--muted)}.instrument{border:1px solid var(--line);border-radius:8px;background:var(--surface);overflow:clip}.project-toolbar{display:flex;justify-content:space-between;align-items:center;gap:16px;border-bottom:1px solid var(--line);padding:14px 24px}.project-title{display:flex;align-items:center;min-width:0;gap:12px}.project-title input{background:transparent;width:180px;min-width:0;font-size:13px;padding:6px 0;color:var(--text)}.project-save-state{font-size:10px;white-space:nowrap;color:var(--muted)}.project-actions{display:flex;align-items:center;gap:18px;flex-shrink:0}.text-button{font-size:12px;color:var(--muted);min-height:44px}.text-button:hover{color:var(--text)}.save-button{border:1px solid #6d7369;border-radius:3px;padding:0 16px;min-height:36px;font-size:12px}.performance{padding:0 32px}.performance-heading{display:flex;align-items:center;justify-content:space-between;gap:16px}.instrument-tabs{display:flex;gap:24px}.instrument-tab{position:relative;min-height:58px;font-size:13px;color:var(--muted)}.instrument-tab.selected{color:var(--text)}.instrument-tab.selected:after{content:"";position:absolute;height:2px;bottom:0;left:0;right:0;background:var(--accent)}.audio-status{display:flex;gap:8px;align-items:center;font-size:10px;color:var(--muted)}.status-light{display:inline-block;width:5px;height:5px;border-radius:50%;background:#70766d;flex-shrink:0}.status-light.ready{background:#bbcf99}.status-light.recording{background:#de765b}.pad-stage{container-type:inline-size;display:flex;align-items:center;justify-content:center;padding:24px 0 28px}.drum-grid{width:100%;max-width:360px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.pad{position:relative;display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:1;min-height:44px;touch-action:none;user-select:none;border:1px solid #e5e4d8;border-bottom:3px solid #b5b8ac;border-radius:4px;background:#d8dacd;color:#333931;transition:background-color 70ms,border-color 70ms}.pad-name{font-size:13px;font-weight:500}.pad-shortcut{position:absolute;right:10px;bottom:7px;font-size:10px;opacity:.6;font-family:ui-monospace,monospace}.pad-dark{background:#3b423b;color:#e4e6db;border-color:#4d544b #4d544b #151a15}.pad-active{background:var(--accent);color:#30291f;border-color:#f0b686 #f0b686 #b77845}.pad:disabled{opacity:.5}.piano-groups{width:100%;display:flex;flex-direction:column;gap:18px}.octave-label{font-size:10px;color:var(--muted);font-family:ui-monospace,monospace;margin-bottom:8px}.piano-octave-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}.piano-stage .pad-name{font-size:11px}.piano-stage .pad-shortcut{right:5px;bottom:3px;font-size:9px}.performance-settings{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px;padding:12px 0 18px;font-size:11px;color:var(--muted)}.setting-options,.transport-settings{display:flex;gap:18px;align-items:center;flex-wrap:wrap}.setting-label{display:flex;gap:7px;align-items:center;cursor:pointer}.setting-checkbox{width:12px;height:12px}.volume-control{display:flex;gap:10px;align-items:center}.volume-slider{width:78px;height:14px}.volume-value{width:30px;font-family:ui-monospace,monospace;font-size:10px}.transport{background:#1c1f1d;border-top:1px solid var(--line);padding:18px 32px 22px}.transport-readout{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-bottom:12px;font-size:11px;color:var(--muted)}.transport-status{display:flex;gap:8px;align-items:center}.note-count{margin-left:6px;color:#8c9387;font-size:10px}.transport-position{font-family:ui-monospace,monospace;font-size:10px;font-variant-numeric:tabular-nums}.beat-track{display:grid;gap:4px;margin-bottom:16px}.beat-step{height:3px;background:#383e36}.beat-step.bar-start:not(:first-child){margin-left:7px}.beat-current{background:var(--accent)}.transport-controls{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap}.transport-buttons{display:flex;gap:6px}.transport-button{min-height:42px;padding:0 17px;font-size:12px;border:1px solid #474e43;border-radius:3px;background:#292e28}.record-button{display:flex;align-items:center;gap:8px}.record-button span{color:#df8166;font-size:10px}.transport-settings{font-size:11px;color:var(--muted);gap:14px}.tempo-input{width:48px;background:transparent;border-bottom:1px solid #626b5b;text-align:center;min-height:36px;color:var(--text);font-family:ui-monospace,monospace;font-size:14px;border-radius:0}.transport-notice{margin-top:14px;font-size:11px;color:var(--muted)}.transport-notice:empty{display:none}.library{border-top:1px solid var(--line)}.library-toggle{display:flex;align-items:center;justify-content:space-between;min-height:48px;padding:0 24px;font-size:11px;cursor:pointer;color:var(--muted);list-style:none}.library-toggle::-webkit-details-marker{display:none}.library-count{margin-left:8px;font-family:ui-monospace,monospace;font-size:10px}.library-chevron{font-size:16px}.library[open] .library-chevron{transform:rotate(180deg)}.library-content{padding:0 24px 18px}.library-storage-note{font-size:10px;color:var(--muted);margin-bottom:10px}.library-empty{padding:14px 0;font-size:12px;color:var(--muted)}.library-error{font-size:12px;color:var(--accent)}.library-row{display:flex;gap:14px;align-items:center;border-top:1px solid var(--line);padding:8px 0}.library-row.current .library-name{color:var(--accent)}.library-open{display:flex;flex:1;min-width:0;gap:20px;align-items:baseline;text-align:left;min-height:44px}.library-name{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:240px}.library-date,.library-meta{font-size:10px;color:var(--muted)}.library-date{font-family:ui-monospace,monospace}.library-delete{font-size:10px}.studio-footer{display:flex;justify-content:space-between;margin-top:16px;font-size:10px;color:#91978b}@container (min-width: 304px){.piano-octave-grid{grid-template-columns:repeat(6,minmax(0,1fr))}}@container (min-width: 640px){.piano-octave-grid{grid-template-columns:repeat(12,minmax(0,1fr))}.piano-stage .pad{min-height:88px}.piano-stage .pad-name{font-size:13px}.piano-stage .pad-shortcut{right:8px;bottom:6px;font-size:11px}}@media (max-width:639px){.studio{width:calc(100% - 24px);padding:18px 0}.studio-heading{margin-bottom:16px}.studio-heading h1{font-size:21px}.project-toolbar{padding:8px 16px;gap:10px}.project-title{flex-direction:column;align-items:flex-start;gap:0;flex:1}.project-title input{width:100%}.project-save-state{font-size:9px}.project-actions{gap:12px}.save-button{min-height:44px;padding:0 12px}.performance{padding:0 16px}.instrument-tab{min-height:48px}.pad-stage{padding:18px 0}.drum-grid{max-width:300px;gap:8px}.performance-settings{font-size:10px;gap:12px;padding-bottom:16px}.setting-options{gap:12px}.volume-control{gap:6px}.volume-slider{width:60px}.transport{padding:16px}.transport-controls{gap:14px}.transport-buttons{width:100%}.transport-button{flex:1;min-height:44px;padding:0 12px}.record-button{justify-content:center}.transport-settings{width:100%;justify-content:space-between;gap:8px;font-size:10px}.library-toggle{padding:0 16px}.library-content{padding:0 16px 14px}.library-open{flex-direction:column;gap:4px;justify-content:center}.library-name{max-width:190px}.studio-footer{font-size:9px}}@media (prefers-reduced-motion:reduce){*,:after,:before{transition-duration:.01ms!important;animation-duration:.01ms!important}}.layer-note,.loop-tools label span,.loop-tools p{font-size:11px;color:var(--muted);margin:10px 0 16px}.loop-tools{border-top:1px solid var(--line);padding:18px 24px}.tool-buttons{display:flex;flex-wrap:wrap;gap:12px;align-items:center}.loop-tools .save-button{min-height:44px}.loop-tools input{display:block;width:100%;padding:12px;margin:8px 0;background:var(--page);border:1px solid var(--line);font-size:12px}.loop-editor summary{cursor:pointer;padding:14px 0;min-height:44px}.loop-editor select{background:var(--page);padding:10px;max-width:100%}.editor-bar{margin-top:14px;font-size:11px}.editor-steps{display:grid;grid-template-columns:repeat(16,minmax(0,1fr));gap:4px;margin-top:6px}.editor-steps button{border:1px solid var(--line);min-height:44px;border-radius:3px}.editor-steps button[aria-pressed=true]{background:var(--accent);color:var(--page)}.share-incoming{padding:16px;border:1px solid var(--accent);margin-bottom:16px;display:flex;flex-wrap:wrap;align-items:center;gap:12px}.studio-notification{color:var(--accent);font-size:12px;margin-top:12px}@media (max-width:639px){.loop-tools{padding:16px}.editor-steps{grid-template-columns:repeat(4,minmax(0,1fr))}}