/* Phosphor glass: one working surface, three purposeful panes. */
:root{--bg:#030b07;--panel:#07120c;--panel-2:#0b1d12;--edge:#24442d;--edge-soft:#183322;--text:#d2f4d7;--muted:#a2c4aa;--dim:#759b7e;--lime:#86ff8a;--green:#62e98b;--amber:#b7ee80;--selected:#82ff96;--analysis-height:29%;--track-label:160px}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
html,body{background:#030b07;color:var(--text)}
.app{position:relative;isolation:isolate;grid-template-rows:65px 1fr 25px;background:#030b07 url('./glass-tiles.svg') 0 0/384px 384px}
.app:before{content:'';position:absolute;inset:0;pointer-events:none;z-index:-1;background:radial-gradient(ellipse at 35% 110%,#2eff7629,transparent 65%),linear-gradient(120deg,#010905b3,#030b0766 60%,#010905bb)}
.topbar{background:#040d08eF;border-bottom-color:#2b5436;padding:0 21px;box-shadow:0 5px 22px #0005}
.brand{color:#9bff83;font-family:var(--mono);font-size:19px;letter-spacing:3.5px;min-width:132px;gap:12px}
.brand .brand-mark{filter:drop-shadow(0 0 7px #66ff7333);width:28px}
.project-heading{gap:5px;border-color:#23402c}.project-heading input{font-size:13px;font-weight:500;color:#bde1c4}.saved-indicator{font-size:8px;color:#92c49c}.saved-indicator i{background:#60ee89}
.play-button{width:39px;height:37px;background:#8dff8e;border:1px solid #b1ffab;border-radius:2px;box-shadow:0 0 22px #47ff6921}.play-button:hover{background:#b0ff9f}.icon-button{color:#a3c8ab}.icon-button[aria-pressed=true]{color:#8cff91}.share-button{background:#9dff7c0a;border-color:#436c47;border-radius:2px;color:#b1fca5}.share-button:hover{background:#87ff881a}.text-button{color:#a6c1ac}.position,.tempo{border-color:#24422c}.position{color:#c7f8cf}.position small,.tempo span{color:#97b89d}
.workspace{grid-template-columns:var(--left) 12px minmax(0,1fr);padding:12px 13px 10px;overflow:hidden}
.code-pane,.arrangement,.analysis{border:1px solid #2d5438;border-radius:4px;box-shadow:0 8px 22px #0003,inset 0 1px #b0ff9c08}
.code-pane{background:linear-gradient(180deg,#031008fC 0%,#031008f5 43%,#03100845 100%),url('./glass-tiles.svg') 0 0/288px 288px;position:relative}
.code-pane:after{content:'';position:absolute;left:-1px;top:38px;width:1px;height:104px;background:linear-gradient(transparent,#91ff75,transparent);pointer-events:none}
.panel-heading{height:44px;padding:0 18px;background:#06150bf2;border-color:#213d29}.panel-tabs{gap:23px}.panel-tabs button{font:11px var(--mono);color:#a0c0a7}.panel-tabs button.active{color:#cfffce}.panel-tabs button.active:after{background:#83ff8b;height:2px;box-shadow:0 0 9px #76ff7744}
.code-help-button{width:25px;height:25px;border:1px solid #284831;font:11px var(--mono);color:#95c79e;border-radius:2px}.code-help-button:hover{border-color:#7cce88;background:#7cff8210}
.scope-heading{height:39px;padding:3px 17px 0 12px;gap:7px;margin-bottom:9px;color:#9ecaaa}.scope-heading>.icon-button{width:26px;height:26px;min-width:26px;color:#75b58b}.scope-heading>.icon-button svg{width:13px;height:13px}.scope-heading strong{font:10px var(--mono);color:#a4e9ac}.scope-dot{display:none}.apply-button{margin-left:auto;display:inline-flex;align-items:center;gap:5px;border:1px solid #6ed486;color:#a7ffac;padding:3px 8px;min-height:25px;border-radius:2px;font:9px var(--mono)}.apply-button svg{width:11px;height:11px}.apply-button:disabled{visibility:hidden}
.code-view{min-height:120px}.editor-wrap{margin-top:0;background:none}.editor-wrap pre,.editor-wrap textarea{font-size:12px;line-height:25px;padding:0 14px 22px 46px}.editor-wrap pre{color:#aff5be;text-shadow:0 0 9px #50ff7133}.editor-wrap textarea{caret-color:#a5ff9b}.editor-wrap textarea::selection{background:#65ff6a33}.line-gutter{width:32px;padding-right:0;font:9px/25px var(--mono);color:#729d7e}.line-gutter.active-line{color:#bbffa3}.code-name{color:#83ff84}.code-string{color:#b9ff9c}.code-method{color:#62e99a}.code-number{color:#def4a3}.code-comment{color:#80b78e}.editor-wrap.note-active{background:linear-gradient(90deg,#52ff6b07,transparent 65%)}
.assistant{background:linear-gradient(180deg,#04130ae0,#04100a);border:0;border-top:1px solid #24472e;padding:12px 14px 14px}
.assistant-result:empty{display:none}.assistant-result{color:#a4c9ab;font-size:11px;margin-bottom:9px;max-height:90px}.assistant-result strong{color:#c3f8c9}.assistant-result ul{margin-top:5px}
.prompt-box{background:#081c0ff2;border:1px solid #366d42;border-radius:3px;box-shadow:0 0 0 3px #020c06,inset 0 1px #96ff9a08}.prompt-box:focus-within{border-color:#8fff98;box-shadow:0 0 0 3px #020c06,0 0 15px #67ff7a0d}.prompt-scope{font:9px var(--mono);margin:10px 11px 8px;color:#b1d8b8;gap:6px}.prompt-scope i{background:#7bff8c}.local-label{margin-left:auto;color:#82a98b;letter-spacing:.8px;font-size:7px}.prompt-box>textarea{font-size:12px;min-height:35px;line-height:1.6;padding:0 11px;color:#d2f4d7}.prompt-box textarea::placeholder{color:#8bb695}.prompt-bottom{padding:3px 7px 7px}.prompt-bottom>button:first-child{font-size:10px;color:#9fc6a7}.send-button{height:26px;width:30px;background:#8bff8d;color:#09230d!important;border-radius:2px}.proposal-actions{margin-bottom:10px}.proposal-actions button{font-size:10px;border-color:#385d3e;border-radius:2px}.proposal-actions .keep-button{background:#8bff8d;color:#0b260d}
.vertical-splitter,.horizontal-splitter{border:0;background:transparent;position:relative}.vertical-splitter:after{content:'';position:absolute;left:5px;top:40%;height:52px;width:2px;border-radius:2px;background:#60896788}.horizontal-splitter{height:12px}.horizontal-splitter:after{content:'';position:absolute;left:46%;top:5px;width:55px;height:2px;border-radius:2px;background:#60896788}.vertical-splitter:hover,.horizontal-splitter:hover,.vertical-splitter:focus,.horizontal-splitter:focus{background:#8cff8508}.vertical-splitter:hover:after,.horizontal-splitter:hover:after{background:#8cff85}
.music-pane{grid-template-rows:minmax(0,1fr) 12px minmax(190px,var(--analysis-height))}
.arrangement{background:linear-gradient(120deg,#06120cf7,#06110aef),url('./glass-tiles.svg') 0 0/288px 288px}.arrangement-toolbar{height:47px;padding:0 16px;border-color:#223e2a;background:#07170dd9}.arrangement-title h1{font:12px var(--mono);font-weight:500;letter-spacing:.1px;color:#c1e8c9}.arrangement-tools .text-button{font-size:10px;margin-right:10px}.arrangement-tools .icon-button{color:#9cc0a4}.arrangement-tools .text-button span{color:#9fc8a7}.timeline-scroll{scrollbar-color:#3e7950 #06120b}.timeline-content{background:#06100ad9}.timeline-ruler{height:29px;background:#07170d;border-color:#25412d}.ruler-label{padding-top:10px;background:#07170d;border-color:#284632;color:#9dc4a5;font:9px var(--mono)}.bar-tick{border-color:#315b3c;color:#a1c9a9;font-size:9px;padding-top:8px}.section-strip{height:25px;border-color:#24422d;background:#06130b}.track-count{background:#06130b;border-color:#294b34;padding-top:9px}.quiet-count{color:transparent!important;font-size:0!important;user-select:none}.section-marker{padding-top:8px;font:8px var(--mono);letter-spacing:.6px;color:#92b69b;border-color:#254b31;background:#76ff7904}.section-marker:nth-child(2n){background:#76ff7906;color:#acc4a1}.track-row{height:63px;border-color:#24472d80}.track-row.selected{background:#72ff7905}.track-header{padding:9px 11px 8px 14px;border-color:#294d33;background:#08170eeF}.track-row.selected .track-header{background:#0c2113}.track-header:before{left:0;top:11px;bottom:11px;width:2px;opacity:.7}.track-name{font-size:11px;font-weight:500;color:#c7e0cb}.track-row.selected .track-name{color:#a4ffa6}.track-number{color:#7aa285;font-size:8px}.track-type{color:#95ba9e;font:7px var(--mono);letter-spacing:.25px}.track-state{gap:4px}.track-state button{width:24px;height:24px;border-color:#36553e;color:#a5c5ab;border-radius:2px;font-size:9px}.track-state button.active{border-color:#8bff8f;color:#b2ffb1;background:#6dff7a25}.track-lane{background:repeating-linear-gradient(90deg,transparent 0 calc(12.5% - 1px),#76b68324 calc(12.5% - 1px) 12.5%)}.track-lane:after{background:repeating-linear-gradient(90deg,transparent 0 calc(1.5625% - 1px),#65b37907 calc(1.5625% - 1px) 1.5625%)}
.clip{top:8px;height:46px;border-radius:2px;border-color:color-mix(in srgb,var(--track-color) 53%,#12321b);background:linear-gradient(180deg,color-mix(in srgb,var(--track-color) 15%,#07140c),color-mix(in srgb,var(--track-color) 8%,#07140c));box-shadow:inset 0 1px #b4ffad08}.clip:before{opacity:.35}.clip.selected{background:linear-gradient(180deg,color-mix(in srgb,var(--track-color) 26%,#07140c),color-mix(in srgb,var(--track-color) 14%,#07140c));border-color:#afff83;box-shadow:0 0 13px #67ff7812,inset 0 0 15px #9aff7007}.clip-label{font-size:8px;top:5px;left:7px;color:#adebbb;opacity:.95}.clip.selected .clip-label{color:#d8ffbd}.clip canvas{height:27px;opacity:.9}.timeline-playhead{top:29px;background:#b1ff8e;box-shadow:0 0 7px #75ff9144}.timeline-playhead span{background:#b1ff8e}.empty-track{height:36px;font-size:10px;color:#91ba9a;background:#07160b80}.empty-track>span{font:10px var(--sans);margin-left:0;margin-right:0;color:inherit}.empty-track:hover{background:#70ff7907}.timeline-bottom{height:27px;padding:0 13px;background:#06140bcf;border-color:#25432c;color:#a0c6a8;font-size:8px}.timeline-bottom button{color:#a0c6a8;font-size:9px}.timeline-bottom>div{gap:15px}.timeline-bottom i{background:#8aff88}
.analysis{background:#04120bed}.analysis-heading{height:40px;padding:0 17px;gap:0;background:#07170cde;border-color:#23492e}.analysis-tabs{gap:25px}.analysis-tabs button{font:10px var(--mono)}.analysis-actions{gap:10px}.analysis-actions select{font:9px var(--mono);color:#b0d0b7;background:transparent}.analysis-actions select option{background:#06120b}.analysis-content{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) 31px;min-height:0;position:relative}.chart-area{margin:12px 16px 0 12px;padding-left:34px;padding-bottom:21px;min-height:0}.chart-area canvas{border:0;border-radius:1px;background:#041009}.frequency-axis{font:8px var(--mono);color:#a7c6a6;bottom:24px}.chart-caption{font:8px var(--mono);color:#a2c5aa;bottom:2px}.chart-overlay{background:#04130aec;color:#a8e8b1;font-size:10px}.analysis-stats{display:flex;flex-direction:row;align-items:center;justify-content:flex-end;gap:27px;border:0;padding:0 17px 4px 46px;min-height:0;background:none}.analysis-stats>div{display:flex;align-items:baseline;gap:9px}.analysis-stats>div>span{font:9px var(--mono);color:#8bbf98}.analysis-stats strong{font:11px var(--mono);color:#b8efc2}.analysis-stats small{font-size:8px;color:#a3bfa8}.ref-indicator{background:#94ff8e}
.reference-view{display:flex;flex-direction:column}.reference-main{padding:12px 17px;flex:1;min-height:0}.reference-drop{height:76px;border:1px dashed #3b6848;background:#79ff8604;padding:14px;border-radius:2px}.reference-drop>svg{color:#88e5a1}.reference-drop strong{font-size:12px;color:#c3e8cc;margin-bottom:5px}.reference-drop span{font-size:10px;color:#96bca0}.reference-drop button{font:10px var(--mono);color:#b9f1b0}.reference-aside{display:flex;flex-direction:row;border:0;border-top:1px solid #203e29;padding:7px 17px;min-height:32px;align-items:center;justify-content:flex-end}.reference-aside button{font:10px var(--mono);margin:0;color:#a8efb4}.reference-controls button{border-color:#3c6747;color:#b9e6c2}.reference-controls input{background:#081b0e;border-color:#355c3e}.reference-file{color:#baebc5}.reference-file>svg{color:#9fffaa}.comparison-metrics{margin-top:10px;gap:25px}.comparison-metric>span{color:#a1c5a9;font-size:9px}.comparison-metric strong{color:#b8eec3}.comparison-metric small{color:#93b99a}.reference-controls>span{color:#95b89e}
.statusbar{background:#030d07d9;border-color:#294b33;font:8px var(--mono);color:#94bc9e;padding:0 20px}.statusbar>div{gap:10px}.statusbar button{border-color:#365b40;color:#abcfb2}.master-volume svg{color:#a6d1af}.master-volume input{accent-color:#88f694}.statusbar i{background:#60e78b}.statusbar>span{font-size:8px}.mobile-view-switch{background:#06130a;border-color:#264d33}.mobile-view-switch button{font-family:var(--mono);color:#9bc5a5}.mobile-view-switch button.active{border-color:#83ff8b;color:#ceffd2}.sound-orb{filter:saturate(1.3);box-shadow:inset 0 0 19px #04140ae0}.controls-view{background:#05130bea}.sound-identity h2{color:#b9f5c2}.sound-identity p{color:#97bca1}.control-row .control-label{color:#afd8b8}.control-row output{color:#c3f4c9}.control-row .control-extremes{color:#92b99b}.control-row input[type=range]{accent-color:#80f59a}.instrument-select,.clip-settings input{background:#0a1f11;border-color:#34573e;color:#c1e6c9}.clip-settings{border-color:#294d35}.clip-settings h3{color:#a4c9ad}.prompt-scope .local-label{font-size:7px}
dialog{background:#07180efb;border-color:#477b52;border-radius:3px;box-shadow:0 25px 100px #0009}.modal-top{border-color:#294c34}dialog::backdrop{background:#010804c0;backdrop-filter:blur(6px)}#modal-body p{color:#accab4}#modal-body .modal-option{border-color:#325c3e;border-radius:2px}#modal-body .modal-option:hover{border-color:#82da91;background:#62ff7a08}#modal-body .modal-option small{color:#9fc2a7}#modal-body code{color:#9cf1ac;background:#031008}.modal-field input,.modal-select{background:#04130a;border-color:#375d42}.modal-primary,.modal-field button{background:#8aff8b;border-color:#acffa5;color:#0a250c}.toast{background:#0a2412f5;border-color:#5d9d68;color:#d1f8d7}.drop-overlay{background:#031109eF;border-color:#7aff91}::selection{background:#7cff772b}::-webkit-scrollbar-thumb{background:#416b49}::-webkit-scrollbar-track{background:#041008}
@media(min-width:1650px){.track-row{height:69px}.clip{height:51px}.clip canvas{height:31px}.editor-wrap pre,.editor-wrap textarea{font-size:13px;line-height:27px}.line-gutter{line-height:27px}.analysis-heading{height:43px}}
@media(max-width:1200px){.topbar{padding:0 15px;gap:15px}.brand{min-width:120px;font-size:17px;letter-spacing:2.5px}.workspace{padding:10px}.analysis-stats{gap:20px}.arrangement-toolbar{padding:0 13px}.track-name{font-size:11px}}
@media(max-width:960px){:root{--left:34%;--track-label:137px}.app{grid-template-rows:61px 1fr 24px}.topbar{height:61px;gap:10px}.brand{min-width:107px;font-size:15px;letter-spacing:2px;gap:7px}.brand .brand-mark{width:23px}.workspace{padding:9px;grid-template-columns:var(--left) 10px minmax(0,1fr)}.scope-heading{padding-left:9px;padding-right:12px}.editor-wrap pre,.editor-wrap textarea{font-size:11px;padding-left:40px;line-height:24px}.line-gutter{line-height:24px;width:28px;font-size:8px}.assistant{padding:10px}.prompt-box>textarea{font-size:11px}.prompt-scope{font-size:8px}.local-label{display:none}.track-header{padding-left:10px;padding-right:8px}.track-state button{width:24px;height:24px}.track-type{font-size:6px}.track-name{font-size:10px}.arrangement-tools .text-button{margin-right:3px}.analysis-heading{padding:0 12px}.analysis-tabs{gap:18px}.analysis-actions select{max-width:115px;font-size:8px}.analysis-stats{padding-left:40px;padding-right:12px;gap:17px;justify-content:space-between}.analysis-stats>div{gap:5px;flex-direction:row}.analysis-stats>div>span{font-size:8px}.analysis-stats strong{font-size:10px}.comparison-metrics{gap:15px}.reference-aside{display:flex}}
@media(max-width:720px){:root{--track-label:137px}.app{grid-template-rows:59px 39px minmax(0,1fr) 25px}.topbar{height:59px;padding:0 11px;gap:7px}.brand{min-width:auto;font-size:13px;letter-spacing:1px;gap:5px}.brand .brand-mark{width:22px;height:27px}.project-heading{padding-left:4px}.project-heading input{font-size:11px}.saved-indicator{font-size:7px}.position{font-size:10px}.position small{font-size:7px}.play-button{width:34px;height:33px}.share-button{margin-left:2px;padding:7px}.mobile-view-switch{height:39px;gap:27px}.mobile-view-switch button{font:10px var(--mono);height:39px;min-width:65px}.workspace{display:block;padding:8px}.code-pane,.arrangement,.analysis{height:100%;border-radius:3px}.code-pane:after{top:30px;height:85px}.code-pane{background:linear-gradient(180deg,#041109fc,#041109ef 44%,#04110978),url('./glass-tiles.svg') 0 0/288px 288px}.music-pane{display:block}.panel-heading{height:41px;padding:0 15px}.scope-heading{height:38px;padding:3px 15px 0 11px;margin-bottom:10px}.scope-heading strong{font-size:10px}.editor-wrap pre,.editor-wrap textarea{font-size:12px;line-height:25px;padding-left:43px;padding-right:12px}.line-gutter{font-size:9px;width:29px;line-height:25px}.assistant{padding:11px 12px 12px}.assistant-result{font-size:11px;max-height:85px}.prompt-box>textarea{font-size:12px;min-height:34px}.prompt-scope{font-size:9px}.local-label{display:block}.prompt-bottom{padding-bottom:7px}.send-button{height:29px;width:32px}.prompt-bottom>button:first-child{min-height:29px}.code-help-button{width:28px;height:28px}.arrangement-toolbar{height:43px;padding:0 11px}.arrangement-title h1{font-size:11px}.arrangement-tools .text-button{font-size:10px}.arrangement-tools .text-button svg{height:12px;width:12px}.track-row{height:68px}.clip{height:50px;top:9px}.clip canvas{height:30px}.track-name{font-size:11px}.track-header{padding:10px 9px 9px 11px}.track-type{font-size:7px}.track-state button{width:24px;height:24px;min-width:24px}.section-strip{height:25px}.section-marker{font-size:6px;padding-top:9px;letter-spacing:.25px}.ruler-label{font-size:8px}.timeline-ruler{height:29px}.empty-track{height:35px;font-size:9px;padding-left:calc(var(--track-label) + 9px)}.empty-track>span{font-size:9px;display:inline}.timeline-bottom{height:28px;padding:0 10px;font-size:8px}.timeline-bottom>div{gap:12px}.timeline-bottom button{font-size:9px}.analysis-heading{height:44px;padding:0 12px;gap:10px}.analysis-tabs{gap:16px}.analysis-tabs button{font-size:9px;min-width:42px}.analysis-actions{gap:3px}.analysis-actions select{font-size:8px;max-width:109px}.analysis-actions .icon-button{min-width:25px;min-height:30px}.analysis-content{display:grid;grid-template-rows:minmax(0,1fr) 52px;grid-template-columns:1fr;min-height:0}.chart-area{height:auto;min-height:0;flex:initial;margin:16px 12px 0 9px;padding-left:29px;padding-bottom:24px}.frequency-axis{font-size:8px;width:26px}.chart-caption{left:29px;font-size:8px;bottom:5px}.analysis-stats{display:flex;flex-direction:row;padding:0 14px 10px 38px;gap:12px;border:0;align-items:center;justify-content:space-between}.analysis-stats>div{display:flex;flex-direction:column;gap:6px;align-items:flex-start}.analysis-stats>div>span{font-size:8px}.analysis-stats strong{font-size:13px}.analysis-stats strong small{font-size:8px}.reference-main{padding:15px 13px}.reference-drop{height:112px;gap:10px;padding:15px;flex-wrap:wrap}.reference-drop>svg{height:24px;width:24px}.reference-drop button{margin-left:34px;font-size:10px}.reference-drop button span{font-size:11px}.reference-file{font-size:10px;margin:0}.reference-controls{gap:8px;font-size:9px}.reference-controls button{font-size:9px;padding:7px}.reference-controls>span{font-size:8px}.reference-aside{border:0;border-top:1px solid #244b30;padding:10px 14px;min-height:40px;flex:0 0 auto}.reference-aside button{font-size:10px}.comparison-metrics{margin-top:20px;gap:19px;flex-direction:column}.comparison-metric>span{font-size:10px}.comparison-metric strong{font-size:17px}.comparison-metric small{font-size:9px}.controls-view{padding:12px 21px}.sound-identity{margin-bottom:21px}.control-row{margin-bottom:21px}.statusbar{padding:0 12px;font-size:7px}.statusbar>span{font-size:7px}.master-volume input{width:48px}.drop-overlay{inset:105px 9px 32px}.modal-top{padding:13px 16px}}
@media(max-width:390px){.topbar{gap:4px}.brand span{display:none}.project-heading{max-width:105px}.position{font-size:9px}.position small{font-size:6px}.project-actions .text-button{min-width:26px;padding:5px}.project-actions .share-button{min-width:27px;padding:5px}.analysis-heading{gap:5px;padding:0 10px}.analysis-tabs{gap:10px}.analysis-tabs button{font-size:8px;min-width:40px}.analysis-actions select{max-width:100px;font-size:7px}.analysis-actions .icon-button{min-width:24px}.timeline-bottom>div{gap:9px}.scope-heading{padding-right:12px}.chart-caption{font-size:7px}}
@media(prefers-reduced-motion:reduce){.brand .brand-mark{filter:none}.editor-wrap pre{text-shadow:none}.play-button{box-shadow:none}}
/* Track names and patterns carry identity; secondary classifications stay in tooltips. */
.track-type{display:none}.track-state{justify-content:flex-end}.local-label{display:none}.reference-view:has(#reference-loaded[hidden]) .reference-aside{display:none}