:root,[data-theme=grimoire]{--bg:#0c0907;--panel:#15100c;--panel-2:#1c1611;--panel-3:#251d16;--line:#342719;--line-strong:#5e4730;--text:#eadfc2;--dim:#9a876a;--accent:#c9a14a;--accent-hot:#e8c170;--blood:#a3261f;--ink:#120d09;--radius:3px;--font-ui:"Alegreya Sans SC", "Palatino Linotype", Georgia, serif;--font-title:"Pirata One", "Old English Text MT", Georgia, serif;--font-mono:"JetBrains Mono", Consolas, monospace;--ornament:"❦";--grain:radial-gradient(circle at 20% 10%, #c9a14a0f, transparent 40%), radial-gradient(circle at 80% 90%, #a3261f12, transparent 45%)}[data-theme=studio]{--bg:#0a0a0c;--panel:#111114;--panel-2:#17171b;--panel-3:#1f1f25;--line:#26262d;--line-strong:#3b3b45;--text:#ececef;--dim:#85858f;--accent:#c6ff3d;--accent-hot:#e2ff8a;--blood:#ff3d7f;--ink:#0a0a0c;--radius:6px;--font-ui:"Space Grotesk", "Segoe UI", sans-serif;--font-title:"Space Grotesk", "Segoe UI", sans-serif;--font-mono:"JetBrains Mono", Consolas, monospace;--ornament:"▦";--grain:none}*{box-sizing:border-box}html,body{height:100%}body{background:var(--bg);background-image:var(--grain);color:var(--text);font:14px/1.35 var(--font-ui);-webkit-font-smoothing:antialiased;margin:0;overflow:hidden}[hidden]{display:none!important}button,input,select{font:inherit;color:inherit}::selection{background:var(--accent);color:var(--ink)}#app{grid-template-rows:52px 1fr auto;height:100vh;display:grid}.topbar{border-bottom:1px solid var(--line);background:linear-gradient(var(--panel-2), var(--panel));justify-content:space-between;align-items:center;gap:12px;padding:0 14px;display:flex}[data-theme=grimoire] .topbar{box-shadow:inset 0 -3px 0 -2px var(--line-strong)}.brand{white-space:nowrap;align-items:baseline;gap:10px;display:flex}.brand-mark{color:var(--accent);font-size:22px;transform:translateY(2px)}.brand-name{font-family:var(--font-title);letter-spacing:.5px;color:var(--accent-hot);font-size:28px;line-height:1}[data-theme=studio] .brand-name{letter-spacing:-.5px;text-transform:uppercase;font-size:20px;font-weight:700}.brand-sub{color:var(--dim);letter-spacing:1px;font-size:13px}.top-actions{align-items:center;gap:6px;display:flex}.sep{background:var(--line);width:1px;height:22px;margin:0 4px}.btn{background:var(--panel-3);border:1px solid var(--line-strong);border-radius:var(--radius);cursor:pointer;white-space:nowrap;padding:5px 11px;transition:border-color .12s,background .12s,color .12s}.btn:hover{border-color:var(--accent);color:var(--accent-hot)}.btn:disabled{opacity:.5;cursor:default}.btn.accent{background:var(--accent);color:var(--ink);border-color:var(--accent);font-weight:700}.btn.accent:hover{background:var(--accent-hot);color:var(--ink)}.btn.on{border-color:var(--accent);color:var(--accent-hot);box-shadow:inset 0 0 0 1px var(--accent)}.btn.small{padding:3px 8px;font-size:12px}.btn.big{flex:1;padding:9px;font-size:16px}[data-theme=grimoire] .btn.big{font-family:var(--font-title);letter-spacing:.5px;font-size:20px;font-weight:400}.icon{border-radius:var(--radius);color:var(--dim);cursor:pointer;background:0 0;border:1px solid #0000;padding:1px 5px;font-size:12px;line-height:1.4}.icon:hover{color:var(--accent-hot);border-color:var(--line-strong)}.icon.danger:hover{color:#ff6b5e;border-color:var(--blood)}.btn-row{align-items:center;gap:6px;margin:8px 0;display:flex}.btn-row.wrap{flex-wrap:wrap}.btn-row.center{justify-content:center}.btn-group{gap:0;display:inline-flex}.btn-group .btn{border-top-right-radius:0;border-bottom-right-radius:0}.btn-group .num{border-left:none;border-top-left-radius:0;border-bottom-left-radius:0;width:44px}.select,.text,.num,.hex{background:var(--ink);border:1px solid var(--line-strong);border-radius:var(--radius);min-width:0;padding:4px 6px}.select{cursor:pointer;width:100%}.select.small{width:auto;padding:3px 6px;font-size:12px}.select:focus,.text:focus,.num:focus,.hex:focus{border-color:var(--accent);outline:none}.num{font-family:var(--font-mono);text-align:right;width:64px;font-size:12px}.num.small{width:60px}.text{width:100%}option,optgroup{background:var(--panel);color:var(--text)}.dim{color:var(--dim)}.small{font-size:12px}.workspace{grid-template-columns:340px minmax(0,1fr) 330px;min-height:0;display:grid}.panel{background:var(--panel);scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent;padding:0 0 40px;overflow:hidden auto}.panel.left{border-right:1px solid var(--line)}.panel.right{border-left:1px solid var(--line)}.source-info{border-bottom:1px solid var(--line);white-space:nowrap;align-items:baseline;gap:8px;padding:9px 14px;font-size:12px;display:flex;overflow:hidden}.src-kind{color:var(--ink);background:var(--accent);font-family:var(--font-mono);border-radius:2px;padding:0 5px;font-size:10px}.src-name{text-overflow:ellipsis;overflow:hidden}.sec{border-bottom:1px solid var(--line)}.sec-title{cursor:pointer;-webkit-user-select:none;user-select:none;z-index:3;background:var(--panel);align-items:center;gap:8px;padding:10px 14px 8px;list-style:none;display:flex;position:sticky;top:0}.sec-title::-webkit-details-marker{display:none}.sec-title:before{content:var(--ornament);color:var(--accent);font-size:14px;transition:transform .15s}.sec:not([open]) .sec-title:before{opacity:.6;transform:rotate(-90deg)}.sec-name{font-family:var(--font-title);color:var(--accent-hot);letter-spacing:.3px;font-size:21px;line-height:1}[data-theme=studio] .sec-name{text-transform:uppercase;letter-spacing:1.5px;color:var(--text);font-size:13px;font-weight:700}.sec-body{padding:2px 14px 14px}.sub-title{color:var(--dim);letter-spacing:1.2px;text-transform:uppercase;justify-content:space-between;margin:12px 0 6px;font-size:12px;display:flex}[data-theme=grimoire] .sub-title{text-transform:none;color:var(--accent);font-size:13px}.hint-box{border:1px dashed var(--line-strong);border-radius:var(--radius);color:var(--dim);margin:8px 0;padding:8px 10px;font-size:12px}.mode-panel{border-bottom:1px solid var(--line)}.mode-tabs{grid-template-columns:repeat(4,1fr);gap:4px;padding:10px 10px 6px;display:grid}.mode-tab{background:var(--panel-2);border:1px solid var(--line);border-radius:var(--radius);cursor:pointer;color:var(--dim);flex-direction:column;align-items:center;gap:1px;padding:6px 2px;display:flex}.mode-tab:hover{border-color:var(--line-strong);color:var(--text)}.mode-tab.active{border-color:var(--accent);color:var(--accent-hot);background:linear-gradient(var(--panel-3), var(--panel-2));box-shadow:0 0 0 1px var(--accent) inset}.mode-label{font-size:13px;font-weight:700;line-height:1.1}[data-theme=grimoire] .mode-label{font-family:var(--font-title);font-size:16px;font-weight:400}.mode-sub{font-size:10px;font-family:var(--font-mono);opacity:.75}.mode-panel>.hint-box{margin:8px 14px 14px}.ctls{flex-direction:column;gap:7px;margin-top:6px;display:flex}.ctl-label{color:var(--text);cursor:default;font-size:13px}.ctl-range .ctl-head{align-items:center;gap:5px;display:flex}.ctl-range .ctl-label{text-overflow:ellipsis;white-space:nowrap;flex:1;overflow:hidden}.num-wrap{align-items:baseline;gap:2px;display:inline-flex}.num-wrap .num{width:58px;color:var(--accent-hot);background:0 0;border-color:#0000;padding:1px 4px}.num-wrap .num:hover,.num-wrap .num:focus{border-color:var(--line-strong);background:var(--ink)}.unit{color:var(--dim);font-size:10px;font-family:var(--font-mono);width:20px}.kf{color:var(--line-strong);cursor:pointer;background:0 0;border:none;padding:0 2px;font-size:10px;line-height:1}.kf:hover,.kf.animated{color:var(--accent)}.kf.onkey{color:var(--blood);text-shadow:0 0 6px var(--blood)}.slider{appearance:none;cursor:pointer;--fill:50%;background:0 0;width:100%;height:14px;margin:0}.slider::-webkit-slider-runnable-track{background:linear-gradient(90deg, var(--accent) var(--fill), var(--line-strong) var(--fill));border-radius:2px;height:4px}.slider::-moz-range-track{background:var(--line-strong);border-radius:2px;height:4px}.slider::-moz-range-progress{background:var(--accent);border-radius:2px;height:4px}.slider::-webkit-slider-thumb{-webkit-appearance:none;background:var(--text);border:2px solid var(--ink);width:12px;height:12px;box-shadow:0 0 0 1px var(--accent);border-radius:50%;margin-top:-4px}[data-theme=grimoire] .slider::-webkit-slider-thumb{border-radius:1px;transform:rotate(45deg)}.slider::-moz-range-thumb{background:var(--text);border:2px solid var(--ink);border-radius:50%;width:10px;height:10px}.slider:hover::-webkit-slider-thumb{background:var(--accent-hot)}.ctl-select,.ctl-text,.ctl-color{grid-template-columns:42% 1fr;align-items:center;gap:8px;display:grid}.color-wrap{align-items:center;gap:4px;display:flex}.color{border:1px solid var(--line-strong);border-radius:var(--radius);cursor:pointer;background:0 0;width:30px;height:26px;padding:0}.color::-webkit-color-swatch-wrapper{padding:2px}.color::-webkit-color-swatch{border:none;border-radius:2px}.hex{font-family:var(--font-mono);width:100%;font-size:12px}.ctl-toggle{cursor:pointer;align-items:center;gap:8px;display:flex}.toggle{opacity:0;pointer-events:none;position:absolute}.switch{background:var(--line-strong);border-radius:8px;flex:none;width:28px;height:15px;transition:background .15s;position:relative}.switch:after{content:"";background:var(--dim);border-radius:50%;width:11px;height:11px;transition:transform .15s,background .15s;position:absolute;top:2px;left:2px}.toggle:checked+.switch{background:var(--accent)}.toggle:checked+.switch:after{background:var(--ink);transform:translate(13px)}.toggle:focus-visible+.switch{outline:1px solid var(--accent-hot)}.ctl-grid{grid-template-columns:38% 1fr;align-items:center;gap:6px 8px;margin:6px 0;display:grid}.ctl-grid .num{width:100%}.chips{flex-wrap:wrap;gap:4px;display:flex}.chip{background:var(--panel-2);border:1px solid var(--line);cursor:pointer;color:var(--dim);border-radius:999px;padding:1px 8px;font-size:12px}.chip:hover{color:var(--text);border-color:var(--line-strong)}.chip.active{color:var(--ink);background:var(--accent);border-color:var(--accent)}.chip-n{font-family:var(--font-mono);opacity:.7;margin-left:4px;font-size:9px}.cs-grid{scrollbar-width:thin;grid-template-columns:repeat(2,1fr);gap:5px;max-height:250px;margin-top:8px;padding-right:2px;display:grid;overflow-y:auto}.cs-card{background:var(--ink);border:1px solid var(--line);border-radius:var(--radius);cursor:pointer;text-align:left;flex-direction:column;align-items:stretch;gap:2px;min-width:0;padding:5px 7px;display:flex}.cs-card:hover{border-color:var(--line-strong)}.cs-card.active{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset;background:var(--panel-3)}.cs-glyphs{color:var(--accent-hot);white-space:nowrap;letter-spacing:1px;height:22px;font-size:17px;line-height:1.2;overflow:hidden}.cs-meta{color:var(--dim);justify-content:space-between;gap:4px;font-size:11px;display:flex}.cs-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.cs-count{font-family:var(--font-mono);font-size:10px}.ramp{background:var(--ink);border:1px solid var(--line);border-radius:var(--radius);flex-wrap:wrap;gap:1px;max-height:96px;padding:5px;display:flex;overflow-y:auto}.ramp-g{width:18px;height:20px;color:var(--text);background:var(--panel-2);border-radius:2px;justify-content:center;align-items:center;font-size:15px;display:inline-flex}.ramp-info{font-family:var(--font-mono);text-transform:none;letter-spacing:0;font-size:10px}.pal-name{color:var(--dim);margin-bottom:6px;font-size:13px}.swatches{flex-wrap:wrap;gap:3px;display:flex}.swatch{border:1px solid var(--line-strong);border-radius:var(--radius);cursor:pointer;width:26px;height:26px;padding:0}.swatch:hover{border-color:var(--accent-hot);transform:translateY(-1px)}.hidden-picker{opacity:0;pointer-events:none;width:0;height:0;position:absolute}.pal-lib{scrollbar-width:thin;flex-direction:column;gap:2px;max-height:260px;display:flex;overflow-y:auto}.pal-group{color:var(--dim);letter-spacing:1px;text-transform:uppercase;margin:8px 0 2px;font-size:11px}.pal-row{border-radius:var(--radius);cursor:pointer;text-align:left;background:0 0;border:1px solid #0000;grid-template-columns:44% 1fr;align-items:center;gap:6px;padding:3px 5px;display:grid}.pal-row:hover{background:var(--panel-2);border-color:var(--line)}.pal-row.active{border-color:var(--accent);background:var(--panel-3)}.pal-row-name{white-space:nowrap;text-overflow:ellipsis;font-size:12px;overflow:hidden}.pal-strip{border:1px solid var(--line);border-radius:2px;height:14px;display:flex;overflow:hidden}.pal-strip i{flex:1}.fx-list{flex-direction:column;gap:6px;display:flex}.fx-card{border:1px solid var(--line-strong);border-radius:var(--radius);background:var(--panel-2)}.fx-card.disabled{opacity:.55}.fx-card.dragging{opacity:.35}.fx-card.drop{box-shadow:0 -2px 0 var(--accent)}.fx-head{border-bottom:1px solid var(--line);cursor:grab;align-items:center;gap:4px;padding:5px 6px;display:flex}.fx-card.collapsed .fx-head{border-bottom:none}.grip{color:var(--dim);padding:0 2px;font-size:12px}.fx-enable{cursor:pointer;display:inline-flex}.fx-name{cursor:pointer;white-space:nowrap;text-overflow:ellipsis;flex:1;font-size:13px;font-weight:700;overflow:hidden}[data-theme=grimoire] .fx-name{font-family:var(--font-title);color:var(--accent-hot);font-size:17px;font-weight:400}.fx-body{padding:4px 9px 10px}.preset-grid{grid-template-columns:1fr 1fr;gap:4px;display:grid}.preset-grid .pal-group{grid-column:1/-1}.preset{background:var(--panel-2);border:1px solid var(--line);border-radius:var(--radius);cursor:pointer;text-align:left;white-space:nowrap;text-overflow:ellipsis;padding:5px 8px;font-size:12.5px;overflow:hidden}.preset:hover{border-color:var(--accent);color:var(--accent-hot)}.user-presets{flex-direction:column;gap:3px;display:flex}.user-row{align-items:center;gap:3px;display:flex}.user-row .preset{flex:1}.progress{background:var(--ink);border:1px solid var(--line);border-radius:3px;height:5px;overflow:hidden}.progress i{background:linear-gradient(90deg, var(--blood), var(--accent));width:0;height:100%;transition:width .1s;display:block}.export-status{min-height:16px;font-family:var(--font-mono);margin-top:4px;font-size:11px}.viewport{cursor:grab;touch-action:none;background-color:#080605;background-image:linear-gradient(45deg,#ffffff06 25%,#0000 25% 75%,#ffffff06 75%),linear-gradient(45deg,#ffffff06 25%,#0000 25% 75%,#ffffff06 75%);background-position:0 0,12px 12px;background-size:24px 24px;position:relative;overflow:hidden}.viewport:active{cursor:grabbing}.stage{box-shadow:0 10px 50px #000000b3, 0 0 0 1px var(--line);position:absolute;top:50%;left:50%}[data-theme=grimoire] .stage{box-shadow:0 10px 60px #000c, 0 0 0 1px #000, 0 0 0 5px var(--panel-2), 0 0 0 6px var(--line-strong)}.stage canvas{width:100%;height:100%;display:block;position:absolute;inset:0}.stage canvas.pixelated{image-rendering:pixelated}.cmp-handle{background:var(--accent);cursor:ew-resize;z-index:2;width:2px;margin-left:-1px;position:absolute;top:0;bottom:0}.cmp-handle:before{content:"";position:absolute;inset:0 -10px}.cmp-handle span{font:10px var(--font-mono);background:var(--accent);color:var(--ink);white-space:nowrap;pointer-events:none;padding:1px 5px;position:absolute;top:8px}.cmp-handle span:first-child{right:6px}.cmp-handle span:last-child{left:6px}.empty{pointer-events:none;place-items:center;display:grid;position:absolute;inset:0}.empty-inner{text-align:center;pointer-events:auto;border:1px dashed var(--line-strong);background:#00000059;border-radius:6px;padding:30px 40px}.empty-inner h2{font-family:var(--font-title);color:var(--accent-hot);margin:4px 0;font-size:32px;font-weight:400}.empty-inner p{color:var(--dim);margin:0 0 12px}.sigil{color:var(--accent);font-size:44px}body.dropping .viewport{box-shadow:inset 0 0 0 3px var(--accent)}.status{font:11px var(--font-mono);color:var(--dim);pointer-events:none;white-space:nowrap;background:#0009;border-radius:3px;padding:3px 7px;position:absolute;bottom:10px;left:10px}.view-tools{align-items:center;gap:4px;display:flex;position:absolute;bottom:10px;right:10px}.view-tools .btn,.view-tools .select{background:#0a0806cc}.timeline{border-top:1px solid var(--line);background:linear-gradient(var(--panel), var(--panel-2));grid-template-columns:auto 1fr auto;align-items:center;gap:14px;padding:8px 14px;display:grid}.transport{align-items:center;gap:4px;display:flex}.play{width:38px;font-size:13px}.time{font:12px var(--font-mono);color:var(--accent-hot);min-width:150px;margin-left:8px}.track{background:var(--ink);border:1px solid var(--line-strong);border-radius:var(--radius);cursor:pointer;height:30px;position:relative}.track-fill{pointer-events:none;background:linear-gradient(90deg,#0000,#c9a14a1f);position:absolute;top:0;bottom:0;left:0}[data-theme=studio] .track-fill{background:linear-gradient(90deg,#0000,#c6ff3d1a)}.playhead{background:var(--accent-hot);pointer-events:none;width:2px;box-shadow:0 0 6px var(--accent);margin-left:-1px;position:absolute;top:-3px;bottom:-3px}.keys{position:absolute;inset:0}.key{background:var(--blood);border:1px solid var(--accent-hot);cursor:pointer;width:10px;height:10px;margin:-5px 0 0 -5px;padding:0;position:absolute;top:50%;transform:rotate(45deg)}.key:hover{background:var(--accent-hot)}.tl-opts{align-items:center;gap:8px;display:flex}#toast{opacity:0;pointer-events:none;background:var(--panel-3);border:1px solid var(--accent);color:var(--text);border-radius:var(--radius);z-index:100;max-width:80vw;padding:8px 16px;transition:opacity .2s,transform .2s;position:fixed;bottom:80px;left:50%;transform:translate(-50%,20px)}#toast.show{opacity:1;transform:translate(-50%)}#toast.error{border-color:var(--blood)}@media (max-width:1100px){.workspace{grid-template-columns:300px minmax(0,1fr) 280px}.brand-sub{display:none}}