:root{color-scheme:dark;--bg:#101014;--panel:#19191f;--border:#2c2c34;--muted:#a5a3b3;--mint:#a6f6d7;--lav:#c0a4ff;--rail:170px;font:14px Inter,Arial,sans-serif}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:#f6f5fa}button,select,input,textarea{font:inherit;color:inherit}button,a,input,select,textarea{outline-offset:4px}button{border:0;cursor:pointer;background:none}button:hover{filter:brightness(1.15);background-color:#ffffff0b}button:disabled{opacity:.5;cursor:wait}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--mint)}button svg,i svg{display:block;width:17px;height:17px}i{display:inline-flex;font-style:normal}.accent{color:var(--lav)}header{height:65px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:18px;padding-right:30px;background:#141418}.brand{width:var(--rail);padding-left:18px;display:flex;align-items:center;gap:7px;font-size:23px;font-weight:740;letter-spacing:-1.6px;text-decoration:none;color:white;flex-shrink:0}.crumb,.panelhead span,.panelhead,.quiet,.primary,.navitem,.eyeline,.saved,.textbutton,.scenechip,.seqfoot,.seqfoot label,.dialogheader{display:flex;align-items:center}.crumb{color:var(--muted);gap:12px;font-size:12px}.crumb b{color:#55535f}.crumb strong{color:#dedde6;font-weight:500}.spacer{flex:1}.quiet,.primary{gap:8px;font-size:13px;font-weight:620;border-radius:7px;padding:10px 14px}.quiet{color:#d2d0dc}.primary{background:var(--mint);color:#152b24}.primary:hover{background:#b4ffe1}.nav{width:var(--rail);position:fixed;inset:65px auto 0 0;background:#141418;border-right:1px solid var(--border);padding:32px 12px;display:flex;flex-direction:column}.kicker,.eyeline,.sectionlabel,.scenechip,.timecode{font-size:10px;letter-spacing:1.5px;text-transform:uppercase;font-weight:700}.kicker{color:#898693;margin:0 12px 14px}.navitem{padding:11px 10px;gap:10px;text-align:left;border-radius:7px;color:#aeacba;font-size:13px;margin-bottom:4px}.navitem.active{background:#27242f;color:#dbc8ff}.navbottom{margin-top:auto;border-top:1px solid var(--border);padding-top:15px}main{margin-left:var(--rail);padding:29px clamp(18px,2.2vw,40px) 40px;max-width:2000px}.titlebar,.transport,.tabs,.ratio,.swatches,.vline,.seqfoot,.dialogheader,.dialogactions{display:flex;align-items:center}.titlebar{justify-content:space-between;margin-bottom:22px}.eyeline{gap:8px;color:#a5d2bd;letter-spacing:1.9px}.mintdot,.saved:before{width:6px;height:6px;background:var(--mint);border-radius:50%;display:inline-block}.saved{font-size:11px;color:var(--muted);gap:7px}.saved:before{content:'';width:5px;height:5px;background:#78ad98}h1{margin:6px 0 0;display:flex;align-items:center;gap:9px}h1 input{font:650 clamp(27px,2.6vw,42px)/1.1 Inter,Arial,sans-serif;letter-spacing:-1.7px;background:none;border:0;padding:0;max-width:65vw;width:13ch}h1 i{color:#777581}h1 i svg{width:13px}.workspace{display:grid;grid-template-columns:minmax(0,1fr) clamp(245px,22vw,365px);gap:16px;align-items:start}.stagepanel,.sequence,.inspector{border:1px solid var(--border);border-radius:12px;overflow:hidden;background:var(--panel)}.inspector{grid-row:1 / span 2;grid-column:2}.panelhead{height:52px;padding:0 17px;justify-content:space-between;gap:9px}.panelhead span{gap:9px}.panelhead b{font-size:14px;font-weight:620}.ratio,.tabs{gap:2px;background:#101014;padding:3px;border:1px solid #2d2b33;border-radius:7px}.ratio button,.tabs button{color:var(--muted);font-size:11px;padding:4px 9px;border-radius:4px}.chosen{background:#383440!important;color:#f6f5fa!important}.tabs{margin:0 16px 4px}.tabs button{flex:1;padding:7px}.sectionlabel{color:#b4b1c1;letter-spacing:1.15px}.labelrow{display:flex;align-items:center;justify-content:space-between;margin:0 0 10px}.controlblock{padding:16px;border-bottom:1px solid var(--border)}.controlblock:last-child{border:0}.labelrow button,.textbutton{font-size:11px;color:var(--lav);gap:6px}.textbutton svg{width:13px}.thumbgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.thumb{padding:0;text-align:left;min-width:0}.thumb img{display:block;width:100%;aspect-ratio:1.65;object-fit:cover;border-radius:5px;border:2px solid transparent}.thumb.on img{border-color:var(--mint)}.thumb span{font-size:10px;display:block;margin:4px 2px;color:#d1cfd8;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.swatches{gap:8px;flex-wrap:wrap}.swatch{height:28px;width:28px;border:3px solid var(--panel);outline:1px solid #43414e;border-radius:50%}.swatch.on{outline:2px solid #dad0ed}.vline{justify-content:space-between;gap:10px;margin:11px 0 0;font-size:12px;color:#c4c1ce}.vline output{font:11px monospace;color:var(--lav)}input[type=range]{accent-color:#b29ae6;height:4px;cursor:pointer}.controlblock input[type=range]{width:100%;margin:13px 0 4px}.field{width:100%;border-radius:6px;border:1px solid #3d3a47;background:#222128;padding:9px;font-size:13px}.transport{gap:12px;padding:12px 15px}.play{border-radius:50%;background:var(--mint);color:#172e26;width:34px;height:34px;display:grid;place-items:center;flex-shrink:0}.play:hover{background:#b3ffe0}.play svg{fill:currentColor;width:15px}.bare{padding:5px;color:#bcb9c8}.bare.accent{color:var(--mint)}#seek{flex:1;min-width:25px}#timer,#length,.seqfoot{font:11px ui-monospace,monospace;color:var(--muted)}#stage{background:#090910;position:relative;aspect-ratio:16/9;overflow:hidden}
#stage[data-ratio="port"]{height:min(64vh,640px);aspect-ratio:auto}
#stageFrame{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);overflow:hidden}
#canvas{position:absolute;inset:0;display:block;width:100%;height:100%}.scenechip,#full{position:absolute;background:#14121c8c;color:white;backdrop-filter:blur(8px);border:1px solid #ffffff33;border-radius:5px}.scenechip{top:14px;left:14px;padding:5px 8px;gap:5px;letter-spacing:1px;font-size:9px}.scenechip svg{width:12px;height:12px}#full{right:12px;bottom:12px;padding:5px}#stage:fullscreen{height:100vh;width:100vw;aspect-ratio:auto}#chords{display:flex;overflow:auto;gap:8px;padding:0 16px 13px}.chord{min-width:84px;flex:1;border:1px solid #3b3740;border-radius:6px;text-align:left;padding:9px 10px 8px;background:#25242b;position:relative}.chord.on{border-color:#86719f;background:#302a3a}.chord small{display:block;font:9px monospace;color:#afabba;margin-bottom:6px}.chord strong{font-size:18px;letter-spacing:-.7px}.chord:after{content:'';position:absolute;bottom:10px;right:8px;width:4px;height:9px;border-radius:2px;background:var(--c)}.seqfoot{gap:12px;padding:9px 16px;border-top:1px solid var(--border)}.seqfoot label{gap:4px}.seqfoot input,.seqfoot select{border:0;background:var(--panel);width:44px;font:inherit}.seqfoot select{width:auto}.seqfoot svg{width:13px}.seqfoot span{margin-left:auto}dialog{background:#1c1b23;color:#f5f4fa;border:1px solid #423d50;border-radius:12px;padding:0;width:min(570px,92vw);max-height:86vh;box-shadow:0 25px 100px #0009}dialog::backdrop{background:#07070bbb;backdrop-filter:blur(5px)}.dialogheader{position:sticky;top:0;background:#1c1b23;z-index:2;justify-content:space-between;padding:18px 22px;border-bottom:1px solid var(--border)}h2{font-size:19px;margin:0}#dialogbody{padding:20px}.catalog{grid-template-columns:repeat(4,minmax(0,1fr))}.catalog .thumb{margin-bottom:8px}.dialogactions{justify-content:flex-end;margin-top:16px;gap:10px}.option{display:block;width:100%;text-align:left;padding:10px;border-bottom:1px solid #34313c}.option.on{color:var(--mint);background:#a6f6d70a}textarea{resize:vertical;width:100%;min-height:80px}dialog p,.helper{font-size:13px;color:#b3afc0;line-height:1.6}dialog label{display:block;margin:12px 0 6px;font-size:12px}#toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);border-radius:6px;background:#3a3448;padding:10px 16px;display:none;z-index:8}.alert{color:#ffbdaf}.brand svg{flex-shrink:0}progress{width:100%;accent-color:var(--mint)}@media(min-width:1550px){:root{--rail:204px}.panelhead{height:58px}.controlblock{padding:20px}.navitem{font-size:14px}.thumb span{font-size:12px}}
@media(max-width:1150px){:root{--rail:62px}.brand{width:180px}.navitem span,.nav .kicker{display:none}.navitem{justify-content:center;padding:13px 7px}.nav{padding:20px 7px}.workspace{grid-template-columns:minmax(0,1fr) 245px}}
@media(max-width:790px){.nav{display:none}main{margin:0;padding:19px 12px}.workspace{grid-template-columns:minmax(0,1fr)}.inspector{grid-column:1;grid-row:3}.sequence{grid-row:2}.thumbgrid{grid-template-columns:repeat(3,1fr)}.thumb img{max-height:85px}.crumb{display:none}header{padding:0 12px;height:56px;gap:6px}.brand{padding:0;font-size:22px;width:auto}.brand svg{width:33px}.titlebar{margin-bottom:16px}.transport{gap:6px}.saved{font-size:10px}h1 input{max-width:54vw}.quiet,.primary{padding:9px}.catalog{grid-template-columns:repeat(3,1fr)}}
#mobileMenu{display:none}input[type=checkbox]{appearance:none;cursor:pointer;width:26px;height:15px;background:#494550;border-radius:20px;position:relative}input[type=checkbox]:before{content:'';display:block;width:9px;height:9px;border-radius:50%;background:#efeaf5;position:absolute;top:3px;left:3px}input[type=checkbox]:checked{background:#91d6b9}input[type=checkbox]:checked:before{left:14px;background:#20392d}@media(max-width:790px){#mobileMenu{display:block}}