:root{color-scheme:dark;--md-sys-color-primary: #a9c7ff;--md-sys-color-on-primary: #002e68;--md-sys-color-secondary: #cbc2dd;--md-sys-color-on-secondary: #2f2844;--md-sys-color-tertiary: #f5b8d0;--md-sys-color-on-tertiary: #482537;--md-sys-color-surface: #14121f;--md-sys-color-surface-container: #1c1a2a;--md-sys-color-surface-container-high: #211f32;--md-sys-color-surface-container-highest: #27253a;--md-sys-color-outline: rgba(201, 198, 208, .18);--md-sys-color-outline-variant: rgba(201, 198, 208, .4);--md-sys-color-on-surface: #ebe7f5;--md-sys-color-on-surface-variant: rgba(235, 231, 245, .72);--md-sys-color-shadow: rgba(8, 6, 16, .25);--md-sys-shape-corner-large: 28px;--md-sys-shape-corner-medium: 20px;--md-sys-shape-corner-small: 16px;--md3-transition-duration: .18s;--md3-transition-easing: cubic-bezier(.2, 0, 0, 1);font-family:Roboto Flex,Inter,system-ui,sans-serif}*,*:before,*:after{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at top right,rgba(79,70,229,.25),transparent 55%),radial-gradient(circle at bottom left,rgba(236,72,153,.2),transparent 45%),var(--md-sys-color-surface);color:var(--md-sys-color-on-surface);font-family:inherit;overscroll-behavior-y:contain;min-height:100vh}button,select,input,textarea{font-family:inherit}.md3-app{display:flex;height:100vh;max-height:100vh;overflow:hidden}#sidebarBackdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#0806108c;z-index:30;opacity:0;pointer-events:none;transition:opacity var(--md3-transition-duration) var(--md3-transition-easing)}#sidebarBackdrop.block{pointer-events:auto}.opacity-0{opacity:0!important}.opacity-100{opacity:1!important}.hidden{display:none!important}.block{display:block!important}.-translate-x-full{transform:translate(-110%)}.translate-x-0{transform:translate(0)}.lg\:hidden{display:none}@media (min-width: 1024px){.lg\:hidden{display:none!important}.lg\:translate-x-0{transform:translate(0)!important}.lg\:static{position:static!important}.lg\:inset-auto{inset:auto!important}.lg\:z-auto{z-index:auto!important}.lg\:transform-none{transform:none!important}.lg\:ml-0{margin-left:0!important}}#sidebar{position:fixed;inset:0 auto 0 0;width:320px;max-width:90vw;padding:28px 24px 32px;background:#1c1a2ae6;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border-right:1px solid var(--md-sys-color-outline-variant);box-shadow:0 24px 48px #08061073;z-index:40;display:flex;flex-direction:column;gap:24px;transition:transform var(--md3-transition-duration) var(--md3-transition-easing)}@media (min-width: 1024px){#sidebar{position:relative;transform:none!important;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;border-right:1px solid rgba(235,231,245,.08)}#sidebarBackdrop{display:none!important}}.sidebar-header{display:flex;align-items:center;gap:12px;justify-content:center;text-align:center}.sidebar-header .material-icons-round{font-size:28px;color:var(--md-sys-color-primary)}.sidebar-title{font-size:1.5rem;font-weight:600;letter-spacing:.01em}.sidebar-section{background:var(--md-sys-color-surface-container);border-radius:var(--md-sys-shape-corner-large);padding:20px;display:flex;flex-direction:column;gap:12px;border:1px solid transparent;transition:border-color var(--md3-transition-duration) var(--md3-transition-easing),box-shadow var(--md3-transition-duration) var(--md3-transition-easing)}.sidebar-section:hover{border-color:var(--md-sys-color-outline-variant);box-shadow:0 12px 30px #08061040}.sidebar-section h2{margin:0;font-size:.95rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--md-sys-color-on-surface-variant)}.file-chip{min-height:48px;border-radius:var(--md-sys-shape-corner-medium);border:1px dashed rgba(235,231,245,.18);background:#a7a2d014;display:flex;align-items:center;justify-content:center;gap:10px;color:var(--md-sys-color-on-surface-variant);cursor:pointer;transition:border-color var(--md3-transition-duration) var(--md3-transition-easing),background var(--md3-transition-duration) var(--md3-transition-easing)}.file-chip:hover{border-color:var(--md-sys-color-primary);background:#a9c7ff1a}.file-chip--active{border-style:solid;border-color:#a9c7ff99;background:#a9c7ff29;color:var(--md-sys-color-on-surface)}#loadedFileNameDisplay{min-height:18px;font-size:.75rem;color:var(--md-sys-color-on-surface-variant);text-align:center}.md3-textfield,.md3-select{width:100%;display:flex;flex-direction:column;gap:6px}.md3-textfield label,.md3-select label{font-size:.8rem;color:var(--md-sys-color-on-surface-variant)}.md3-textfield input,.md3-textfield textarea,.md3-select select{background:var(--md-sys-color-surface-container-highest);border:1px solid rgba(235,231,245,.12);border-radius:var(--md-sys-shape-corner-medium);padding:12px 14px;color:var(--md-sys-color-on-surface);font-size:.95rem;transition:border-color var(--md3-transition-duration) var(--md3-transition-easing),box-shadow var(--md3-transition-duration) var(--md3-transition-easing)}.md3-textfield input[type=range]{width:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none;height:6px;border-radius:999px;background:#ebe7f52e;outline:none;margin-top:8px;margin-bottom:4px}.md3-textfield input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:var(--md-sys-color-primary);box-shadow:0 4px 12px #08061066;cursor:pointer;border:none}.md3-textfield input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--md-sys-color-primary);border:none;box-shadow:0 4px 12px #08061066;cursor:pointer}.md3-textfield input:focus,.md3-textfield textarea:focus,.md3-select select:focus{outline:none;border-color:#a9c7ffe6;box-shadow:0 0 0 3px #a9c7ff40}select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:linear-gradient(45deg,transparent 50%,rgba(235,231,245,.4) 50%),linear-gradient(135deg,rgba(235,231,245,.4) 50%,transparent 50%);background-position:calc(100% - 18px) calc(1em + 2px),calc(100% - 13px) calc(1em + 2px);background-size:6px 6px;background-repeat:no-repeat}.md3-switch{display:flex;align-items:center;justify-content:space-between;gap:12px}.md3-switch label{font-size:.85rem;color:var(--md-sys-color-on-surface-variant)}.md3-switch input[type=checkbox]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:52px;height:28px;border-radius:999px;background:#ebe7f51f;position:relative;transition:background var(--md3-transition-duration) var(--md3-transition-easing);cursor:pointer}.md3-switch input[type=checkbox]:after{content:"";position:absolute;top:4px;left:4px;width:20px;height:20px;border-radius:50%;background:var(--md-sys-color-on-surface);transition:transform var(--md3-transition-duration) var(--md3-transition-easing),background var(--md3-transition-duration) var(--md3-transition-easing)}.md3-switch input[type=checkbox]:checked{background:#a9c7ff52}.md3-switch input[type=checkbox]:checked:after{background:var(--md-sys-color-primary);transform:translate(24px)}.md3-button{border:none;border-radius:var(--md-sys-shape-corner-small);padding:12px 18px;font-weight:600;letter-spacing:.02em;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:10px;transition:transform .14s var(--md3-transition-easing),box-shadow var(--md3-transition-duration) var(--md3-transition-easing),background var(--md3-transition-duration) var(--md3-transition-easing);color:var(--md-sys-color-on-primary);background:var(--md-sys-color-primary);box-shadow:0 12px 24px #08061059}.md3-button:disabled{opacity:.45;cursor:not-allowed;box-shadow:none;transform:none}.md3-button:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 16px 32px #08061073}.md3-button.md3-button--tonal{background:#a9c7ff2e;color:var(--md-sys-color-on-surface);box-shadow:none}.md3-button.md3-button--outline{background:transparent;color:var(--md-sys-color-on-surface);border:1px solid rgba(235,231,245,.24);box-shadow:none}.md3-button.md3-button--danger{background:#ff638433;color:#ff99af}.md3-icon-button{border:none;border-radius:999px;background:#a9c7ff24;color:var(--md-sys-color-on-surface);width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:background var(--md3-transition-duration) var(--md3-transition-easing)}.md3-icon-button:hover{background:#a9c7ff3d}#mainContent{flex:1;position:relative;overflow-y:auto;background:linear-gradient(135deg,#1f1c30d9,#121120f2)}.app-shell{display:flex;flex-direction:column;height:100%}.app-bar{position:sticky;top:0;z-index:10;background:#14121ff2;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-bottom:1px solid rgba(235,231,245,.08);padding:16px 24px;display:flex;align-items:center;gap:16px}.app-bar h1{font-size:1.25rem;font-weight:600;margin:0}.status-pill{margin-left:auto;padding:10px 16px;border-radius:999px;background:#a9c7ff1f;color:var(--md-sys-color-on-surface-variant);font-size:.85rem;min-width:140px;text-align:center;transition:background var(--md3-transition-duration) var(--md3-transition-easing),color var(--md3-transition-duration) var(--md3-transition-easing),box-shadow var(--md3-transition-duration) var(--md3-transition-easing)}.status-pill--ok{background:#a5ffd61f;color:#89f5d7;box-shadow:0 4px 14px #89f5d72e}.status-pill--busy{background:linear-gradient(90deg,#a9c7ff3d,#f5b8d03d);color:#cfd8ff;box-shadow:0 0 0 1px #a9c7ff3d;animation:statusPulse 1.6s ease-in-out infinite}.status-pill--error{background:#f5b8d033;color:#ffccd8;box-shadow:0 6px 16px #f5b8d04d}@keyframes statusPulse{0%,to{box-shadow:0 0 #a9c7ff38}50%{box-shadow:0 0 0 6px #a9c7ff0f}}.main-content-inner{padding:28px min(6vw,48px) 40px;display:flex;flex-direction:column;gap:28px}.card-grid{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}.md3-card{background:var(--md-sys-color-surface-container-high);border-radius:var(--md-sys-shape-corner-large);padding:24px;box-shadow:0 18px 36px #08061059;border:1px solid rgba(235,231,245,.05);display:flex;flex-direction:column;gap:16px}.md3-card h2{margin:0;font-size:1rem;font-weight:600;color:var(--md-sys-color-on-surface-variant);text-transform:uppercase;letter-spacing:.08em}.control-buttons{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}.progress-container{background:#ebe7f51f;border-radius:999px;height:12px;width:100%;overflow:hidden;position:relative;cursor:pointer}#progressContainer:hover,#progressContainer:focus-visible{box-shadow:0 0 0 2px #a9c7ff3d}#progressBar{background:linear-gradient(90deg,#a9c7ff,#f5b8d0);height:100%;border-radius:inherit;width:0;transition:width 80ms linear}.transport-timestamps{display:flex;justify-content:space-between;font-size:.78rem;letter-spacing:.06em;color:var(--md-sys-color-on-surface-variant);opacity:.9;font-variant-numeric:tabular-nums}.transport-timestamps span{padding:4px 10px;border-radius:999px;background:#ebe7f514}.visualizers{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}.visualizers canvas{width:100%;height:220px;border-radius:var(--md-sys-shape-corner-medium);background:#0e0c18e6;border:1px solid rgba(235,231,245,.08)}.visualizers h3{margin:0 0 8px;font-size:.95rem;font-weight:600;color:var(--md-sys-color-on-surface-variant);letter-spacing:.04em;text-transform:uppercase}.piano-roll-wrapper{display:flex;flex-direction:column;gap:12px}#pianoRollCanvas{width:100%;height:260px;border-radius:var(--md-sys-shape-corner-large);background:linear-gradient(180deg,#0c0a18e6,#121120fa);border:1px solid rgba(235,231,245,.08);box-shadow:inset 0 20px 30px #0806108c;overflow:hidden}.track-info-grid{display:flex;flex-direction:column;gap:20px}.meta-info-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}.meta-info-card{background:#ebe7f514;border-radius:var(--md-sys-shape-corner-medium);padding:14px 16px;display:flex;flex-direction:column;gap:6px}.meta-info-card span:first-child{font-size:.75rem;letter-spacing:.08em;color:var(--md-sys-color-on-surface-variant);text-transform:uppercase}.meta-info-card span:last-child{font-weight:600;font-size:1rem}.track-cards{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}.track-card{background:var(--md-sys-color-surface-container-highest);border-radius:var(--md-sys-shape-corner-large);padding:18px;display:flex;flex-direction:column;gap:12px;border:1px solid rgba(235,231,245,.08);transition:border-color var(--md3-transition-duration) var(--md3-transition-easing)}.track-card:hover{border-color:#a9c7ff66}.track-card-header{display:flex;align-items:center;gap:12px}.track-card-header .material-icons-round{color:var(--md-sys-color-tertiary)}.track-card-title{font-weight:600}.track-card-meta{font-size:.85rem;color:var(--md-sys-color-on-surface-variant)}.active-notes-display{min-height:40px;border-radius:var(--md-sys-shape-corner-medium);padding:12px 16px;background:#ebe7f514;font-size:.9rem}.dirt-panel{display:flex;flex-direction:column;gap:18px}.dirt-panel textarea{min-height:120px;resize:vertical}.dirt-actions{display:flex;flex-wrap:wrap;gap:12px}.drag-over-active{outline:2px dashed rgba(169,199,255,.55);outline-offset:0;border-radius:var(--md-sys-shape-corner-large)}@media (max-width: 720px){.app-bar{flex-wrap:wrap}.status-pill{order:3;width:100%;margin-left:0}.main-content-inner{padding:24px 20px 36px}}::-webkit-scrollbar{width:10px}::-webkit-scrollbar-track{background:#14121fd9}::-webkit-scrollbar-thumb{background:#a9c7ff3d;border-radius:999px}::-webkit-scrollbar-thumb:hover{background:#a9c7ff61}