:root{color-scheme:dark;--bg:#090810;--panel:#11101a;--panel2:#15131f;--line:#272432;--muted:#777486;--text:#eeeaf5;--purple:#a477f5;--pink:#dc82df;--gold:#d8b97a;--mint:#83d8c5;--mono:'Cascadia Code','Consolas',monospace;--sans:'Segoe UI',Arial,sans-serif}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:12px var(--sans);overflow:hidden}[hidden]{display:none!important}.app-shell{height:100dvh;min-height:650px;display:flex;flex-direction:column;background:radial-gradient(ellipse at 78% 0%,#29203a66,transparent 37%),linear-gradient(135deg,#0b0912,#0b0a11 65%,#0e0b16)}button,input,select,textarea{font:inherit;color:inherit}button{cursor:pointer;border:0}.topbar{height:64px;flex:none;display:flex;align-items:center;padding:0 23px;gap:32px;border-bottom:1px solid var(--line);background:#0c0a13e8}.brand{display:flex;align-items:center;gap:11px;min-width:280px}.brand-mark{width:35px;height:35px;border-radius:50%;border:1px solid #8568b3;color:#d4b9fa;display:grid;place-items:center;font-size:20px;background:radial-gradient(circle,#452b6955,transparent 68%);box-shadow:0 0 19px #8a57cf32}.brand-name{font-weight:800;font-size:12px;letter-spacing:1.3px}.brand-name span{color:#c3a4f3}.brand-sub,.eyebrow,.tiny-label{font:9px var(--mono);letter-spacing:1.1px;color:#807b91}.brand-sub{margin-top:4px;font-size:8px}.project-name{display:flex;align-items:center;gap:8px;color:#aaa6b7;flex:1}.project-name input{background:transparent;border:0;outline:0;width:175px;font-size:12px;color:#e6e0ef}.live-dot{width:6px;height:6px;border-radius:50%;background:var(--mint);box-shadow:0 0 8px #64d4b7}.saved-state{font:8px var(--mono);color:#727080;border:1px solid #35313e;border-radius:3px;padding:3px 5px}.top-actions{display:flex;gap:8px;align-items:center}.quiet-btn,.export-btn{padding:8px 12px;border-radius:5px;background:transparent;color:#bcb7c8;border:1px solid #322e3c;font-size:10px}.quiet-btn:hover,.tool-btn:hover,.small-action:hover{background:#282336}.export-btn{background:#8e65cd;border:1px solid #a178df;color:white;font-weight:700}.export-btn:hover,.primary-action:hover{background:#a078e6}.export-btn span{margin-left:8px}.transport{height:62px;flex:none;display:flex;align-items:center;padding:0 24px;gap:24px;background:#100e17;border-bottom:1px solid var(--line)}.transport-controls{display:flex;align-items:center;gap:8px;min-width:270px}.transport-icon,.play-button{width:28px;height:28px;background:transparent;color:#9893a5;border-radius:50%;display:grid;place-items:center}.transport-icon{font-size:11px}.transport-icon:hover{background:#282432}.play-button{width:34px;height:34px;background:#b58cf0;color:#1b1327;font-size:12px;box-shadow:0 0 18px #9e72df4d}.loop-button.active{color:#bc92f3}.position{display:flex;align-items:center;gap:6px;margin-left:11px;font:10px var(--mono);color:#a6a1b1}.position strong{font-weight:500;color:#f1eaf9}.position-separator{color:#514b60}.transport-line{height:2px;background:#2a2634;flex:1;position:relative;max-width:460px}.line-glow{height:100%;width:0;background:#aa7ee7;box-shadow:0 0 8px #a26be6}.playhead-mark{position:absolute;top:-4px;width:9px;height:9px;left:0;background:#d2b7ff;border:2px solid #110e18;border-radius:50%}.tempo-wrap{display:flex;align-items:center;gap:7px;margin-left:auto}.tempo-wrap input{width:48px;background:#191622;border:1px solid #35313f;border-radius:4px;padding:6px 3px;text-align:center;font:14px var(--mono);color:#eee}.bpm-unit{font:9px var(--mono);color:#777386}.tap-btn{background:none;border:1px solid #373241;border-radius:3px;font:8px var(--mono);padding:5px;color:#aaa3b8}.master-wrap{display:flex;align-items:center;gap:9px;margin-left:12px}.master-wrap input{width:75px;accent-color:#b38aec}.master-value{font:9px var(--mono);width:25px;color:#a8a2b2}.workspace{flex:1;min-height:0;display:grid;grid-template-columns:224px minmax(400px,1fr) 292px}.track-panel{border-right:1px solid var(--line);background:#0e0c15;display:flex;flex-direction:column;min-height:0}.panel-heading{height:68px;padding:16px 15px 10px 18px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #24212e}.panel-heading h2{font-size:14px;margin:3px 0 0;font-weight:600}.panel-heading h2 span{font:9px var(--mono);color:#7b768a;margin-left:5px}.add-btn{width:25px;height:25px;border-radius:4px;background:#221b30;color:#c5a0f3;font-size:17px;border:1px solid #443458}.track-list{padding:9px 7px;overflow:auto;flex:1}.track-row{height:56px;border:1px solid transparent;border-radius:5px;display:flex;align-items:center;padding:0 8px;gap:8px;position:relative;cursor:pointer;margin-bottom:3px}.track-row:hover{background:#171420}.track-row.selected{background:linear-gradient(90deg,#2a2039,#191521);border-color:#45345b}.track-color{width:3px;height:34px;border-radius:3px;background:var(--track);box-shadow:0 0 8px color-mix(in srgb,var(--track),transparent 55%)}.track-icon{width:23px;height:23px;border:1px solid #393443;border-radius:5px;display:grid;place-items:center;color:var(--track);font:11px var(--mono);background:#181520}.track-info{min-width:0;flex:1}.track-info strong{display:block;font-weight:600;font-size:10px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.track-info small{display:block;font:8px var(--mono);color:#777284;margin-top:4px;text-transform:uppercase}.track-volume{width:39px;height:3px;accent-color:#a87bdb;opacity:.72}.track-volume:hover{opacity:1}.track-actions{display:flex;gap:3px}.track-actions button{width:18px;height:20px;background:transparent;color:#777183;font:9px var(--mono);border-radius:3px}.track-actions button.active{color:#d3b2ff;background:#352644}.track-actions button:hover{background:#312a3a}.track-footer{height:38px;display:flex;align-items:center;justify-content:space-around;border-top:1px solid #24212e}.text-action{background:transparent;color:#858093;font-size:9px;padding:5px}.text-action:hover{color:#d3c5ea}.text-action.danger:hover{color:#ef9ba8}.mini-card{margin:8px;padding:9px;background:#15121d;border:1px solid #302a3a;border-radius:6px;display:flex;align-items:center;gap:9px;min-height:65px}.mini-card img{width:40px;height:40px;object-fit:cover;border-radius:4px;opacity:.8}.mini-card div{min-width:0;flex:1}.mini-card strong,.mini-card small{display:block}.mini-card strong{font-size:10px;margin:4px 0 3px}.mini-card small{font:8px var(--mono);color:#898396}.mini-play{background:#332743;color:#c8a3fb;border-radius:50%;width:22px;height:22px;font-size:9px}.editor-column{position:relative;display:flex;flex-direction:column;min-width:0;overflow:hidden;background:linear-gradient(180deg,#100e17e8,#0d0c13f0),url('assets/astral-console.jpg') center/cover}.section-tabs{height:43px;flex:none;border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 14px;gap:18px}.section-tab{height:100%;background:none;color:#797586;font-size:10px;position:relative;padding:0 4px}.section-tab.active{color:#e5d7f9}.section-tab.active:after{content:"";position:absolute;bottom:-1px;left:0;right:0;height:2px;background:#bd90f0;box-shadow:0 0 8px #b380eb}.section-spacer{flex:1}.tool-btn{background:transparent;color:#898395;padding:5px 7px;border-radius:4px;font-size:11px}.tool-btn span{font-size:9px;margin-left:4px}.editor-view{display:flex;flex:1;min-height:0;flex-direction:column}.timeline-top{height:33px;display:flex;flex:none;border-bottom:1px solid #282432;background:#11101a}.timeline-label{width:126px;flex:none;padding:10px 10px;font:8px var(--mono);letter-spacing:.8px;color:#706b7c;border-right:1px solid #282432}.ruler-scroll{overflow:hidden;flex:1}.ruler{height:100%;display:flex;min-width:max-content}.ruler span{width:88px;flex:none;border-left:1px solid #383342;padding:9px 7px;font:9px var(--mono);color:#827b91}.ruler span:first-child{border:0}.timeline-body{flex:1;min-height:0;display:flex;overflow:hidden}.timeline-track-labels{width:126px;flex:none;background:#100e17;border-right:1px solid #292633;overflow:hidden}.timeline-label-row{height:58px;border-bottom:1px solid #24212d;display:flex;align-items:center;padding:0 9px;gap:7px;color:#aaa4b4;font-size:9px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.timeline-label-row i{width:4px;height:26px;border-radius:3px;background:var(--track);flex:none}.timeline-scroll{flex:1;overflow:auto;position:relative}.timeline-grid{position:relative;min-width:max-content}.timeline-grid-row{height:58px;border-bottom:1px solid #24212d;position:relative;background-image:linear-gradient(90deg,transparent 87px,#292633 88px);background-size:88px 100%}.timeline-grid-row:nth-child(even){background-color:#ffffff02}.bar-line{position:absolute;top:0;bottom:0;width:1px;background:#3c3747;pointer-events:none}.clip{position:absolute;height:36px;top:10px;border-radius:4px;border:1px solid color-mix(in srgb,var(--track),white 5%);background:color-mix(in srgb,var(--track),#17131e 72%);color:#e9ddf7;display:flex;align-items:center;padding:0 9px;font:9px var(--mono);white-space:nowrap;overflow:hidden;cursor:grab;box-shadow:inset 3px 0 0 var(--track)}.clip.audio{background:linear-gradient(90deg,#16483eaa,#153a36aa);border-color:#458b78}.clip.selected{outline:1px solid #e6cbff;box-shadow:0 0 9px #bf9df344,inset 3px 0 0 var(--track)}.clip:active{cursor:grabbing}.arrangement-playhead{position:absolute;z-index:3;top:0;bottom:0;left:0;width:1px;background:#e4baff;box-shadow:0 0 7px #d491f4;pointer-events:none}.arrangement-playhead:before{content:"";position:absolute;left:-4px;top:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:6px solid #e4baff}.timeline-bottom{height:31px;flex:none;display:flex;align-items:center;gap:13px;padding:0 11px;color:#888294;font:8px var(--mono);border-top:1px solid #272431}.timeline-bottom i{display:inline-block;width:7px;height:7px;margin-right:4px;border-radius:2px;background:#af7fe0}.timeline-bottom .legend-audio{background:#51a58d}.timeline-bottom .hint{margin-left:auto;color:#666274}.piano-view{min-height:0}.piano-toolbar{height:43px;display:flex;align-items:center;justify-content:space-between;padding:0 12px;border-bottom:1px solid #272431;gap:8px}.piano-track-title{display:flex;align-items:center;gap:7px;min-width:0}.track-color-dot{width:7px;height:7px;background:#bd88ed;border-radius:50%}.piano-track-title strong{font-size:10px}.piano-meta{font:8px var(--mono);color:#777183;margin-left:5px}.piano-tools{display:flex;align-items:center;gap:4px}.piano-tools label{font:8px var(--mono);color:#827c8e;margin-right:4px}.piano-tools select{background:#191622;border:1px solid #36313f;border-radius:3px;padding:4px;color:#c7bfce;font:9px var(--mono)}.small-action{background:transparent;border:1px solid #322e3b;border-radius:3px;padding:5px 7px;font-size:9px;color:#aaa4b5}.piano-scroller{display:flex;overflow:auto;flex:1;min-height:0}.keyboard{width:49px;flex:none;background:#14121b;border-right:1px solid #393542}.key-label{height:22px;border-bottom:1px solid #282531;display:flex;align-items:center;justify-content:center;font:8px var(--mono);color:#9a94a5;position:relative}.key-label.black{background:#1c1924;color:#777181}.key-label.c-key{color:#d3b8fa;border-bottom-color:#514060}.piano-canvas-wrap{min-width:0;flex:1;overflow:auto;background:#0f0e16}.piano-canvas-wrap canvas{display:block;width:100%;min-width:790px;height:auto;touch-action:none}.piano-footer{height:29px;flex:none;border-top:1px solid #292633;display:flex;align-items:center;justify-content:space-between;padding:0 10px;font:8px var(--mono);color:#777283}.drop-overlay{display:none;position:absolute;inset:43px 0 0;background:#0b0912e9;z-index:10;align-items:center;justify-content:center;flex-direction:column;gap:9px;pointer-events:none}.drop-overlay.show{display:flex}.drop-ring{width:54px;height:54px;border:1px solid #b990ea;border-radius:50%;display:grid;place-items:center;color:#d1aff9;font-size:23px;box-shadow:0 0 30px #9b6bc733}.drop-overlay strong{font-size:14px}.drop-overlay span{font:9px var(--mono);color:#8d879a}.right-panel{border-left:1px solid var(--line);background:#100e17;display:flex;flex-direction:column;min-height:0}.right-tabs{height:43px;flex:none;border-bottom:1px solid var(--line);display:flex;padding:0 16px;gap:20px}.right-tab{position:relative;background:none;color:#7d788b;font-size:10px}.right-tab.active{color:#e2d9ee}.right-tab.active:after{content:"";position:absolute;bottom:-1px;height:2px;left:0;right:0;background:#bd90f0}.right-content{overflow:auto;padding:15px 15px 20px}.feature-head{display:flex;gap:9px;align-items:center;margin-bottom:15px}.feature-icon{width:27px;height:27px;border:1px solid #61467c;background:#30223d;border-radius:6px;color:#d2b0fb;display:grid;place-items:center;font-size:17px}.feature-icon.small{font-size:13px}.feature-head h3{font-size:12px;margin:3px 0 0;font-weight:600}.field-label{display:block;font:8px var(--mono);letter-spacing:.7px;color:#898396}.right-content textarea{width:100%;resize:vertical;min-height:65px;margin:7px 0 12px;background:#17151f;border:1px solid #34303d;border-radius:4px;padding:9px;color:#e8e1f1;outline:none;font:10px var(--sans);line-height:1.5}.right-content textarea:focus,.right-content select:focus{border-color:#755b94}.right-content textarea::placeholder{color:#676273}.field-row{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:11px}.field-row select{display:block;width:100%;margin-top:6px;padding:6px;background:#17151f;border:1px solid #34303d;border-radius:3px;font:9px var(--mono);color:#cfc8d9}.range-field{margin:10px 0}.range-field>div{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}.range-field span{font:8px var(--mono);color:#afa5bd}.range-field input{width:100%;height:3px;accent-color:#aa80dd}.primary-action,.secondary-action{width:100%;margin-top:9px;padding:10px 8px;border-radius:4px;background:#8e66c6;color:white;font-weight:700;font-size:10px;border:1px solid #9f79d4}.primary-action:disabled{opacity:.35;cursor:not-allowed}.privacy-note{font:8px var(--mono);color:#716c7d;line-height:1.5;margin:7px 0 0}.divider{height:1px;background:#292633;margin:15px 0}.arranger-head{margin-bottom:9px}.right-content textarea.arrange-prompt{min-height:52px;margin:3px 0 4px}.secondary-action{background:#201a2b;border-color:#49395d;color:#c9b5df}.secondary-action:hover{background:#30243e}.sample-panel .feature-head{margin-bottom:18px}.import-card{width:100%;display:flex;align-items:center;gap:10px;text-align:left;background:#181620;border:1px dashed #555064;border-radius:5px;padding:11px;margin-bottom:16px}.import-card>span{width:25px;height:25px;border-radius:4px;background:#342641;color:#d4b0fa;display:grid;place-items:center;font-size:17px}.import-card strong,.import-card small{display:block}.import-card strong{font-size:10px}.import-card small{font:8px var(--mono);color:#847d91;margin-top:3px}.sample-list-head{display:flex;justify-content:space-between;align-items:center;font:8px var(--mono);color:#858093;border-bottom:1px solid #2c2936;padding-bottom:7px}.sample-list-head button{background:none;color:#91899b;font:8px var(--mono)}.sample-list{min-height:115px}.empty-samples{font:9px var(--sans);line-height:1.5;color:#777283;padding:18px 5px}.sample-item{padding:9px 2px;border-bottom:1px solid #25222e;display:flex;align-items:center;gap:8px}.sample-wave{width:24px;height:24px;background:#192c29;border-radius:4px;color:#69bea4;display:grid;place-items:center}.sample-item>div{flex:1;min-width:0}.sample-item strong{display:block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;font-size:9px}.sample-item small{display:block;font:8px var(--mono);color:#777283;margin-top:3px}.sample-item button{background:none;color:#a896be}.analysis-card{margin-top:16px;background:#191620;border:1px solid #302b38;border-radius:5px;overflow:hidden}.analysis-card img{width:100%;height:84px;object-fit:cover;opacity:.76;display:block}.analysis-card div{padding:9px}.analysis-card strong{font-size:9px}.analysis-card p{font-size:8px;line-height:1.5;color:#888294;margin:5px 0 1px}.wav-action{margin-top:17px}.offline-note{margin-top:10px;text-align:center;font:8px var(--mono);color:#7e798a}.offline-note span{color:#71cdb5;margin-right:4px}.statusbar{height:24px;flex:none;background:#0b0a11;border-top:1px solid #26232f;display:flex;align-items:center;justify-content:space-between;padding:0 12px;font:8px var(--mono);color:#6e6a7a}.statusbar>span:first-child{color:#8b8597}.status-led{display:inline-block;width:5px;height:5px;border-radius:50%;background:#64c6a8;margin-right:5px;box-shadow:0 0 6px #64c6a8}.statusbar b{color:#c6a0ed;font-weight:400}.hidden{display:none!important}
@media(max-width:1050px){.workspace{grid-template-columns:190px minmax(360px,1fr) 260px}.transport-controls{min-width:225px}.timeline-label,.timeline-track-labels{width:105px}.piano-meta{display:none}.topbar{gap:15px;padding:0 14px}.brand{min-width:250px}}@media(max-width:800px){body{overflow:auto}.app-shell{min-height:100dvh;height:auto}.topbar{height:auto;min-height:60px;flex-wrap:wrap;padding:10px}.brand{min-width:0;flex:1}.project-name{order:3;flex-basis:100%}.top-actions .quiet-btn{padding:7px}.transport{padding:0 10px;gap:10px}.transport-controls{min-width:168px}.transport-line{display:none}.master-wrap{display:none}.tempo-wrap{margin-left:auto}.workspace{flex:1;min-height:calc(100dvh - 146px);grid-template-columns:1fr;grid-template-rows:auto minmax(470px,1fr) auto}.track-panel{border-right:0;border-bottom:1px solid var(--line);max-height:174px}.panel-heading{height:45px;padding:8px 12px}.track-list{display:flex;overflow-x:auto;overflow-y:hidden;padding:5px 7px}.track-row{min-width:150px;height:51px}.track-footer,.mini-card{display:none}.right-panel{border-left:0;border-top:1px solid var(--line);max-height:380px}.editor-column{min-height:490px}.section-tabs{gap:9px;padding:0 8px}.tool-btn{padding:4px}.tool-btn span{display:none}.timeline-label,.timeline-track-labels{width:88px}.timeline-grid-row{background-size:66px 100%}.ruler span{width:66px}.timeline-label-row{font-size:8px;padding:0 5px}.right-content{padding:12px}.statusbar{position:sticky;bottom:0}.top-actions .export-btn{font-size:9px;padding:7px}}@media(max-width:430px){.brand-name{font-size:10px}.brand-sub{font-size:7px}.brand-mark{width:30px;height:30px}.top-actions{gap:4px}.quiet-btn{font-size:9px!important}.export-btn{font-size:8px!important}.transport-controls{min-width:145px}.position{margin-left:2px}.tempo-wrap input{width:42px}.piano-tools .small-action{padding:4px;font-size:8px}.piano-toolbar{padding:0 6px}.piano-meta{display:none}}