@font-face{font-family:StarrLCD;src:url('assets/StarrLCD.woff2') format('woff2');font-display:swap}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#101419;color:#d9dee2;font:13px system-ui,-apple-system,sans-serif}button,input,select{font:inherit}button{cursor:pointer;color:#d8dfe2;background:linear-gradient(#414951,#282f36);border:1px solid #76818a;border-radius:5px;box-shadow:inset 0 1px 1px #ffffff18,0 2px 3px #0005;min-height:28px;padding:5px 10px;font-family:StarrLCD}button:hover{border-color:#ffb347}button:active{transform:translateY(1px);background:#171e24;box-shadow:inset 0 2px 5px #0009}button.on,button.active{border-color:#ffb347;color:#ffc16a;background:linear-gradient(#4e3e2d,#302d29);box-shadow:0 0 8px #ff9e3220}button:disabled{opacity:.28;cursor:default}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #ffb347;outline-offset:3px}input[type=range]{accent-color:var(--layer,#ffb347);cursor:ew-resize}input[type=number],input[type=text],input[type=email],select{color:#ffbb63;background:#101419;border:1px solid #58636b;border-radius:2px;font-family:StarrLCD;padding:5px}input[type=number]{appearance:textfield;-moz-appearance:textfield}input::-webkit-inner-spin-button{appearance:none}#space,#solar{position:fixed;inset:0;width:100%;height:100%;pointer-events:none}#space{z-index:0}#solar{z-index:1}#viewport{position:fixed;inset:0;display:grid;place-items:center;z-index:2}#app{width:1440px;height:920px;position:absolute;transform-origin:0 0;isolation:isolate;--layer:#ffb347}#browser{position:absolute;left:0;top:0;width:260px;height:100%;border-right:1px solid #69727b55;background:#1014190a;padding:18px 10px;overflow:hidden}#browser h1{font:39px/1 StarrLCD;color:#ffb347;letter-spacing:2px;text-align:center;margin:8px 0 18px}#browser h1 span{display:block;font:14px/1.5 StarrLCD;letter-spacing:0;margin-top:8px;color:#d4b67c}.browser-tabs{display:flex;gap:8px}.browser-tabs button{width:50%;font-size:12px}.browser-tabs button:not(.active){opacity:.65}#browser-path{margin:18px 0 10px;font:13px StarrLCD;color:#ddd}#browser-tree,#file-tree{overflow:auto;height:calc(100% - 230px);touch-action:pan-y;scrollbar-color:#6c5943 transparent;scrollbar-width:thin}details>summary{list-style:none;cursor:pointer;line-height:29px;user-select:none;font-weight:600;font-size:13px}details>summary:before{content:'▸';color:#a4aeb5;font-size:10px;margin:0 6px 0 4px}details[open]>summary:before{content:'▾'}details>summary .folder{color:#ffc15b;margin-right:6px}.bank-category{margin-left:12px}.preset-item,.file-item{display:flex;align-items:center;gap:6px;width:100%;min-height:26px;font:11px/1.4 StarrLCD;text-align:left;color:#b6c3cd;padding:5px 8px;border:0;box-shadow:none;background:transparent;border-radius:2px}.preset-item img{width:18px;height:18px;object-fit:contain;mix-blend-mode:screen}.preset-item.selected,.file-item.selected{background:#e9b260;color:#161b20}.preset-item:hover,.file-item:hover{background:#59606a55}.preset-item.selected:hover{background:#e9b260}.browser-bottom{position:absolute;bottom:24px;left:15px;width:230px;font-size:10px;background:#151d2480}#files-panel{height:calc(100% - 170px)}.file-choice{display:block;text-align:center;border:1px solid #617078;border-radius:4px;margin:12px 0;padding:7px;font:11px StarrLCD;cursor:pointer}.file-choice input{display:none}.file-note{font-size:10px;color:#8995a0}.file-item{overflow-wrap:anywhere}.creator{position:absolute;left:385px;top:75px;font-size:9px;color:#9aa7b1}#logo{position:absolute;left:292px;top:14px;width:78px;height:78px;opacity:0;background:transparent;border:0;box-shadow:none;z-index:5;cursor:pointer}.transport{position:absolute;top:38px;left:calc(260px + (100% - 260px)/2 - 174px);display:flex;align-items:center;gap:3px;height:30px}.transport button{width:40px;height:29px;min-height:29px;font:18px system-ui;padding:0}.transport #play{width:44px}.transport #play.on{color:#ffb347}.transport #cycle{font-size:23px}.transport #bpm{width:79px;height:28px;margin-left:8px;font:13px StarrLCD;text-align:center}.transport input[type=range]{width:105px;margin:0 0 0 7px;height:15px}.history{position:absolute;right:32px;top:38px;display:flex;gap:6px}.history button{width:40px;min-height:30px;font:27px/20px system-ui;padding:2px}.preset-bar{position:absolute;top:103px;left:292px;right:32px;height:31px;display:flex;gap:5px;align-items:center}.preset-bar>button{height:30px;font:13px StarrLCD}.preset-bar #previous,.preset-bar #next{width:28px;padding:0;font:23px system-ui}.preset-bar #preset-name{flex:1;min-width:30px;font:15px/1.5 StarrLCD;color:#eee;padding:0 10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.preset-bar #random{width:112px;margin-left:10px}.preset-bar #piano-tab{width:120px;margin-left:10px}.preset-bar #mixer-tab{width:112px;margin-left:10px}.page{position:absolute;left:292px;right:32px;top:142px;bottom:210px}.page[hidden],*[hidden]{display:none!important}#layer-heads{height:47px;display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.layer-head{text-align:center;min-width:0}.layer-head .layer-label{font-size:10px;color:#929fa9;display:block;height:19px}.layer-head button{width:100%;height:28px;font:13px StarrLCD;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--layer);padding:4px 8px}.layer-head button.selected{color:#222a30;background:#fff0d7;border-color:var(--layer)}#viewers{margin-top:12px;display:grid;grid-template-columns:repeat(4,1fr);gap:7px;height:185px}.viewer{position:relative;border:1px solid #67758155;background:color-mix(in srgb,var(--layer) 4%,transparent);border-radius:8px;overflow:hidden}.viewer.selected{border-color:var(--layer);box-shadow:inset 0 0 0 2px #111a}.viewer canvas{width:100%;height:160px;display:block;cursor:ew-resize}.viewer .channel{position:absolute;left:8px;right:8px;text-align:center;bottom:5px;font:9px StarrLCD;color:var(--layer);opacity:.55}.viewer button{position:absolute;bottom:2px;width:22px;min-height:21px;padding:1px;font:11px StarrLCD;background:#11192299;border-color:#8f9ba5aa;border-radius:6px;box-shadow:none}.viewer .loop{left:3px}.viewer .reverse{right:3px}.viewer button.on{background:#66401f;color:#ffb347;border-color:#ffb347;box-shadow:0 0 7px #ffb34766}.viewer.drop-target{background:#ffb34744}#effects-title{position:absolute;left:0;top:253px;font-size:10px;color:#9aa6b0}#effects{position:absolute;top:274px;bottom:0;left:0;right:0;display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(2,1fr);column-gap:7px;row-gap:9px}.knob-unit{display:flex;flex-direction:column;align-items:center;justify-content:start;min-width:0;position:relative}.knob-label{font:9px/18px system-ui;color:#94a3ad;white-space:nowrap;text-align:center;width:100%;letter-spacing:.1px}.knob{width:108px;height:108px;max-width:calc(100% - 5px);aspect-ratio:1;border-radius:50%;position:relative;background:linear-gradient(145deg,#4c4d49,#202326 55%,#11161b);border:4px solid #3c4349;box-shadow:inset 1px 2px 2px #fffff025,inset -2px -3px 4px #0007,1px 3px 4px #000a;display:grid;place-items:center;cursor:ns-resize;touch-action:none;user-select:none}.knob:before{content:'';position:absolute;inset:-5px;border-radius:50%;background:conic-gradient(from 225deg,var(--layer) 0deg,var(--layer) var(--angle,0deg),transparent var(--angle,0deg),transparent 270deg);mask:radial-gradient(transparent 66%,#000 68%,#000 72%,transparent 74%);pointer-events:none}.knob output{font:15px StarrLCD;color:#ffb347;pointer-events:none;text-align:center;max-width:100%;white-space:nowrap}.knob.bypassed{opacity:.28}.knob.bypassed output{text-decoration:line-through}.knob.editing output{animation:blink .65s steps(1) infinite}.knob-unit input.value-entry{position:absolute;width:100px;top:58px;left:50%;transform:translateX(-50%);font:15px StarrLCD;z-index:20;text-align:center;animation:blink .7s steps(1) infinite}.mini-knob .knob{width:53px;height:53px;border-width:3px}.mini-knob .knob output{font-size:11px}.mini-knob .knob-label{font-size:9px}#sample-path{position:absolute;left:292px;right:122px;bottom:173px;height:35px;font-size:9px;line-height:1.5;color:#b1bac1;white-space:pre;overflow:hidden;text-overflow:ellipsis}#status{position:absolute;left:292px;bottom:163px;font:9px StarrLCD;color:#c9ab7e;max-width:80%;pointer-events:none}#panic{position:absolute;right:32px;bottom:175px;min-height:28px;width:28px;height:28px;border:1px solid #e8b1a3;border-radius:0;background:#a42a2b;clip-path:polygon(28% 0,72% 0,100% 28%,100% 72%,72% 100%,28% 100%,0 72%,0 28%);font:7px StarrLCD;padding:0}#keys-area{position:absolute;left:292px;right:32px;bottom:0;height:166px}#wheels{position:absolute;left:0;top:0;width:98px;height:85px;display:flex;gap:6px}#wheels label{font:13px system-ui;position:relative;text-align:center;width:42px}#wheels input{position:absolute;top:27px;left:7px;writing-mode:vertical-lr;direction:rtl;appearance:slider-vertical;width:28px;height:50px;accent-color:#ffb347}#keyboard{position:absolute;left:122px;right:23px;top:3px;height:68px;display:flex;touch-action:none;user-select:none;border:1px solid #84929c;border-radius:2px;overflow:hidden}.key{position:relative;flex:1;min-width:0;height:100%;padding:0 0 5px;display:flex;align-items:end;justify-content:center;background:linear-gradient(90deg,#bbb9ae,#fbf5e4 30%,#e0dbce);border:1px solid #8d8c86;border-radius:0 0 3px 3px;box-shadow:inset 0 -6px 0 #bcb6a8,inset 2px 0 2px #fff8;cursor:pointer;font:7px system-ui;color:#8d867a}.key.black{position:absolute;top:0;height:73%;z-index:2;background:linear-gradient(90deg,#080b0f,#3f4343,#11141a);border:1px solid #080b10;box-shadow:inset 0 -5px 0 #0b1017,1px 2px 3px #0008}.key.active{background:linear-gradient(#d3ac71,#f6ce7b);box-shadow:inset 0 -3px 0 #735536}.key .key-color{position:absolute;left:0;right:0;bottom:9px;height:2px;opacity:.9;pointer-events:none}.key.black .key-color{bottom:7px}.octave{position:absolute;top:3px;width:23px;height:68px;padding:0;color:#ffb347;border-radius:0;background:#202933;font:13px system-ui}.octave#octave-down{left:100px}.octave#octave-up{right:0}#ranges{position:absolute;top:96px;left:0;right:12px;display:grid;gap:2px}.range-row{display:flex;gap:7px;align-items:center;height:15px}.range-row button{font:9px StarrLCD;width:87px;height:15px;min-height:15px;border:0;box-shadow:none;background:var(--layer);color:#25303a;border-radius:2px;padding:0}.range-row.bypassed{opacity:.3}.range-track{position:relative;flex:1;height:5px;border-radius:5px;background:#36414b;touch-action:none;cursor:ew-resize}.range-fill{position:absolute;height:3px;top:1px;background:var(--layer)}.range-handle{position:absolute;top:-4px;width:9px;height:13px;background:var(--layer);clip-path:polygon(0 0,100% 0,50% 100%);cursor:ew-resize}#mixer-page{top:201px}#mixer-tracks{height:calc(100% - 105px);display:grid;grid-template-rows:repeat(4,1fr);gap:10px}.mixer-track{display:grid;grid-template-columns:145px minmax(230px,1fr) 290px 66px 75px;gap:13px;align-items:center;min-height:80px;border-bottom:1px solid #4b596333;padding:0 4px}.mixer-track h3{font:13px StarrLCD;color:var(--layer);margin:0;cursor:pointer}.mixer-track h3.selected{background:#f8e6cd;color:#15202a;padding:5px}.mixer-track small{display:block;font-size:8px;color:#7e8d98;margin-top:7px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mixer-wave{width:100%;height:75px;border:1px solid #46505a44;border-radius:7px;background:#10141944}.fader{position:relative;height:42px;display:flex;align-items:center}.fader input{position:absolute;width:100%;z-index:3;appearance:none;background:transparent;margin:0;height:25px}.fader input::-webkit-slider-runnable-track{height:12px;background:transparent;border:1px solid #6b7178;border-radius:2px}.fader input::-webkit-slider-thumb{appearance:none;width:15px;height:25px;background:linear-gradient(90deg,#67727c,#e5e9e6,#5c6872);border:1px solid #ced3d2;border-radius:2px;margin-top:-7px;box-shadow:1px 1px 4px #000c}.fader .led{position:absolute;left:1px;height:6px;background:repeating-linear-gradient(90deg,var(--layer) 0 4px,#1b232b 4px 6px);max-width:100%;width:0;top:13px;opacity:.8}.fader .led.right{top:21px}.fader .ruler{position:absolute;top:34px;left:0;right:0;display:flex;justify-content:space-between;color:#8e9ba6;font:7px system-ui}.track-buttons{display:flex;gap:4px;align-items:center;flex-wrap:wrap}.track-buttons button{width:34px;min-height:27px;padding:2px;font:12px StarrLCD}.track-buttons button.muted{background:#a82e35;border-color:#fa7376;color:#fff;box-shadow:0 0 7px #f4433655}.track-buttons button.soloed{background:#8c5a17;color:#ffe1a4;box-shadow:0 0 7px #ffb34766}.track-buttons output{font:10px StarrLCD;color:#e4bd7c;width:100%;text-align:center}#master-strip{height:95px;margin-top:12px;display:grid;grid-template-columns:75px 280px 90px 75px 1fr;gap:15px;align-items:center;background:linear-gradient(90deg,#5e242c44,transparent);border:1px solid #713e4344;border-radius:6px;padding:7px 12px}#master-strip>span{font:13px StarrLCD;color:#ec9290}#master-level{width:100%;accent-color:#ef817b}#master-db{font:12px StarrLCD;color:#e5a39d}#master-strip>label{text-align:center;font-size:9px;color:#9c8e90}#master-strip .knob{width:57px;height:57px;margin:auto;--layer:#ed8f87}#master-strip .knob output{font-size:9px}#master-scope{width:100%;height:75px}#piano-page{top:151px;bottom:56px}.roll-header{display:flex;align-items:center;gap:18px;height:42px;font:12px StarrLCD;color:#e9b878}.roll-header label{display:flex;gap:8px;align-items:center;font-size:9px;color:#9caab5}.roll-header input[type=number]{width:50px}.roll-header input[type=range]{width:90px}.roll-header select{font-size:10px}.roll-header button{font-size:10px}#roll-scroll{position:absolute;left:0;right:0;top:48px;bottom:0;overflow:auto;border:1px solid #63717d66;border-radius:5px;background:#0c152050;touch-action:none;scrollbar-color:#a87842 #15202b55}#roll{display:block;touch-action:none;cursor:crosshair}.roll-tools{position:absolute;right:12px;top:70px;display:flex;flex-direction:column;gap:9px;z-index:3}.roll-tools button{border-radius:50%;width:40px;height:40px;font:23px system-ui;padding:0;background:#27313ac9;box-shadow:0 2px 6px #000b}.roll-tools .selected{color:#ffb347;border-color:#ffb347}.audio-enable{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:30;background:#202a32f2;color:#ffbe68;font:18px StarrLCD;padding:18px 30px;border:1px solid #ffb347;box-shadow:0 5px 50px #000c}.audio-enable:active{transform:translate(-50%,-50%)}#boot-shield{position:absolute;inset:0;z-index:20;pointer-events:all}.reveal{will-change:opacity}.flicker{animation:object-flicker var(--duration,1.75s) steps(1) var(--delay,0s) both}@keyframes object-flicker{0%,7%,18%,26%,43%{opacity:0}10%,21%,32%{opacity:.65}38%{opacity:.15}51%,61%,76%,90%,100%{opacity:1}56%,69%,83%{opacity:.18}}@keyframes blink{50%{opacity:.2}}dialog{background:#151d25f5;color:#cbd5dc;border:1px solid #967146;border-radius:8px;padding:30px;max-width:600px;width:90%;box-shadow:0 20px 100px #000c;font:15px/1.6 system-ui;z-index:100}dialog::backdrop{background:#02070dc9}dialog h2{font:21px StarrLCD;color:#ffb347;margin:0 0 20px}dialog label{display:block;margin:15px 0}dialog input:not([type=range]){width:100%;margin:8px 0;font:16px system-ui;padding:10px}dialog input[type=range]{display:block;width:100%}dialog button{margin:6px 10px 8px 0;padding:10px 15px}dialog .dialog-close{position:absolute;right:10px;top:5px;font:25px system-ui;background:transparent;border:0;box-shadow:none}dialog .fine{font-size:12px;line-height:1.7;color:#8e9da8}dialog a{color:#e8b36c}dialog form button{width:100%;color:#19222b;background:#e8ab60}.drag-marquee{stroke:#ffb347;fill:#ffb34722}@media(prefers-reduced-motion:reduce){.flicker{animation-duration:.01s!important;animation-delay:0s!important}.reveal{will-change:auto}}
.audio-enable{left:385px;top:33px;transform:none;font-size:11px;padding:5px 12px;min-height:28px;background:#202a32e0;box-shadow:none}.audio-enable:active{transform:translateY(1px)}.layer-head button:disabled{opacity:1}
.folder{display:inline-block;width:19px;height:14px;background:linear-gradient(#ffd072,#eaaa3c);clip-path:polygon(0 0,40% 0,51% 18%,100% 18%,100% 100%,0 100%);color:transparent!important;vertical-align:middle}.browser-tabs button{font-size:12px}#wheels input{appearance:none;writing-mode:vertical-lr;direction:rtl;background:repeating-linear-gradient(0deg,#29313a 0 3px,#777b77 3px 4px,#28323a 4px 6px);border:1px solid #88919b;border-radius:3px;box-shadow:inset 2px 1px 4px #000a}#wheels input::-webkit-slider-thumb{appearance:none;width:25px;height:6px;background:#ffb347;border:1px solid #e5c493;border-radius:0}
.knob.bypassed{filter:brightness(.32)}
.track-buttons output{font-size:12px}button{touch-action:manipulation}
/* Match the native four-column mixer and bottom piano-roll controls. */
#mixer-page{top:142px}
#mixer-tracks{height:calc(100% - 140px);grid-template-rows:none;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.mixer-track{position:relative;min-height:0;display:grid;grid-template-columns:44% 56%;grid-template-rows:48px 94px minmax(90px,1fr) 56px;gap:0;padding:0;border:0;align-items:center}
.mixer-track>div:first-child{grid-column:1/3;grid-row:1;display:flex;flex-direction:column-reverse;text-align:center;min-width:0}
.mixer-track h3{font:12px StarrLCD;text-transform:uppercase;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding:7px 3px;border:1px solid #64717c;border-radius:4px;background:#27313acc}
.mixer-track h3.selected{padding:7px 3px;background:#f8e6cd;color:#15202a}
.mixer-track small{font:8px system-ui;margin:0 0 6px;color:#8a969f}
.mixer-wave{grid-column:1/3;grid-row:2;height:90px}
.mixer-track .fader{grid-column:1;grid-row:3/5;width:140px;justify-self:center;transform:rotate(-90deg);margin-top:-18px}
.mixer-track .fader .ruler span{transform:rotate(90deg);font-size:7px}
.mixer-track .pan{grid-column:2;grid-row:3;justify-self:center;align-self:center}
.mixer-track .track-buttons{grid-column:2;grid-row:4;display:flex;flex-direction:column;gap:5px;padding:0 6px 0 2px;align-self:start}
.mixer-track .track-buttons button{width:100%;min-height:22px;font:11px StarrLCD}
.mixer-track .track-buttons output{position:absolute;bottom:0;left:0;width:44%;font-size:12px}
#master-strip{height:126px;position:relative;display:block;margin-top:10px;padding:0;border:0;background:linear-gradient(90deg,#5e242c44,#5e242c22);border-radius:6px}
#master-strip>span{position:absolute;top:9px;left:20%;font-size:12px}
#master-level{position:absolute;left:8%;top:52px;width:39%}
#master-db{position:absolute;left:10px;top:56px;font-size:12px}
#master-strip>label{position:absolute;right:10px;top:9px;width:65px;font-size:9px}
#master-scope{position:absolute;left:51%;top:9px;width:calc(49% - 90px);height:108px;background:#0c121940;border:1px solid #53606c44;border-radius:6px}
#piano-page{top:142px;bottom:56px}
#roll-scroll{top:0;bottom:32px}
.roll-header{position:absolute;bottom:0;left:0;right:0;height:30px;gap:12px;font-size:10px}
.roll-header>span{display:none}
.roll-header label{font-size:9px}
.roll-header input[type=range]{width:80px}
.roll-tools{top:38px;right:12px;gap:10px}
.roll-tools button{width:50px;height:50px;font-size:27px}
.roll-tools>label{position:relative;display:grid;place-items:center;width:50px;height:50px;border:1px solid #8f9ba6;border-radius:50%;background:#27313ac9;color:#d2dce1;font:30px system-ui;box-shadow:0 2px 6px #000b}
.roll-tools>label select{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}