:root{--sidebar-w:380px;--sidebar-left-w:300px;font-family:var(--font-mono);color:var(--text);background:var(--bg);font-size:13px}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body,#app{height:100%;margin:0}body{background:var(--bg);overflow:hidden}:focus{outline:none}:focus-visible{outline:1px solid var(--accent);outline-offset:1px}::-webkit-scrollbar{width:14px;height:14px}::-webkit-scrollbar-track{background:0 0;margin:8px 0}::-webkit-scrollbar-thumb{background:#3a362e padding-box padding-box;border:4px solid #0000;border-radius:999px}::-webkit-scrollbar-thumb:hover{background:#ffb00073 padding-box padding-box}@supports not selector(::-webkit-scrollbar){*{scrollbar-width:thin;scrollbar-color:#3a362e transparent}}.shell{background:var(--panel);flex-direction:column;height:100%;display:flex;overflow:hidden}.topbar{border-bottom:1px solid var(--border);flex-shrink:0;align-items:center;gap:12px;padding:10px 14px;display:flex}.topbar h1{font-family:var(--font-pixel);letter-spacing:-.5px;color:var(--accent);text-shadow:0 0 14px #ffb00080;margin:0;font-size:15px}.tagline{color:var(--muted);text-transform:uppercase;letter-spacing:.08em;font-size:11px}.spacer{flex:1}.top-actions{align-items:center;gap:8px;display:flex}.main{flex:1;min-height:0;display:flex}.slot{scrollbar-gutter:stable;background:var(--panel);flex-shrink:0;overflow:hidden auto}.slot-left{width:var(--sidebar-left-w);border-right:1px solid var(--border)}.slot-right{width:var(--sidebar-w);border-left:1px solid var(--border)}.resizer{cursor:col-resize;background:var(--panel);flex-shrink:0;justify-content:center;align-items:center;width:9px;display:flex}.resizer:before{content:"";background:var(--border);border-radius:999px;width:3px;height:34px;transition:background .12s}.resizer:hover:before{background:var(--accent-dim)}body.resizing{cursor:col-resize;-webkit-user-select:none;user-select:none}body.resizing .stage{pointer-events:none}.stage{flex:1;min-width:0;min-height:0;padding:14px;overflow:hidden}.frame{background:var(--bg);border:1px solid var(--border);border-radius:16px;justify-content:center;align-items:center;width:100%;height:100%;transition:border-color .12s;display:flex;position:relative;overflow:hidden}.frame.over{border-color:var(--accent)}.preview{cursor:grab;touch-action:none;image-rendering:auto;max-width:100%;max-height:100%;display:block}.frame.panning .preview{cursor:grabbing}.busy{border:1px solid var(--border);color:var(--accent);letter-spacing:.1em;opacity:0;pointer-events:none;background:#000c;border-radius:999px;padding:4px 10px;font-size:11px;transition:opacity .15s;position:absolute;top:12px;left:12px}.busy.show{opacity:1}.empty{text-align:center;flex-direction:column;align-items:center;gap:12px;padding:24px;display:none}.frame.is-empty .empty{display:flex}.frame.is-empty .preview{display:none}.empty-title{font-family:var(--font-pixel);letter-spacing:-.5px;color:var(--accent);text-shadow:0 0 14px #ffb00080;font-size:16px}.empty-sub{color:var(--muted);font-size:12px}.empty-actions{flex-direction:column;align-items:center;gap:10px;margin-top:4px;display:flex}.sidebar{padding:4px 0 24px;display:block}.panel{border-bottom:1px solid var(--border)}.panel-head{text-transform:uppercase;letter-spacing:.08em;color:var(--muted);cursor:pointer;-webkit-user-select:none;user-select:none;margin:0;padding:11px 14px;font-size:12px;font-weight:700}.panel-head:before{content:">";color:var(--accent);margin-right:8px;transition:transform .15s;display:inline-block}.panel.collapsed .panel-head:before{transform:rotate(90deg)}.panel.collapsed .panel-body{display:none}.panel-body{flex-direction:column;gap:9px;padding:0 14px 14px;display:flex}.row{align-items:center;gap:10px;min-height:26px;display:flex}.row-label{text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-size:11px;line-height:1.3}.row>.row-label{flex:0 0 116px}.row>:not(.row-label){flex:1;min-width:0}.slider{align-items:center;gap:8px;display:flex}.num{text-align:right;font-variant-numeric:tabular-nums;color:var(--text);flex:0 0 46px;font-size:12px}select,textarea,input[type=text],input[type=number]{background:var(--panel-2);color:var(--text);border:1px solid var(--border);font-family:var(--font-mono);border-radius:4px;width:100%;padding:6px 8px;font-size:13px}textarea{resize:vertical;line-height:1.5}select:focus,textarea:focus,input[type=text]:focus,input[type=number]:focus{border-color:var(--accent)}input[type=range]{appearance:none;accent-color:var(--accent);cursor:pointer;background:0 0;width:100%;height:18px;margin:0}input[type=range]::-webkit-slider-runnable-track{background:var(--border);border-radius:999px;height:3px}input[type=range]::-webkit-slider-thumb{appearance:none;background:var(--accent);border-radius:999px;width:12px;height:12px;margin-top:-4.5px}input[type=range]::-moz-range-track{background:var(--border);border-radius:999px;height:3px}input[type=range]::-moz-range-thumb{background:var(--accent);border:none;border-radius:999px;width:12px;height:12px}input[type=color]{appearance:none;border:1px solid var(--border);background:var(--panel-2);cursor:pointer;border-radius:4px;width:100%;height:26px;padding:0}input[type=color]::-webkit-color-swatch-wrapper{padding:2px}input[type=color]::-webkit-color-swatch{border:none;border-radius:2px}input[type=color]:disabled{opacity:.35;cursor:not-allowed}.color-row{align-items:center;gap:6px;display:flex}.color-row input[type=color]{flex:1}.btn{background:var(--panel-2);color:var(--text);border:1px solid var(--border);font-family:var(--font-mono);cursor:pointer;border-radius:8px;padding:7px 12px;font-size:13px;transition:background .12s,border-color .12s,color .12s}.btn:hover{border-color:var(--accent-dim)}.btn.primary{background:var(--accent);border-color:var(--accent);color:#000;font-weight:600}.btn.primary:hover{background:var(--accent-dim);border-color:var(--accent-dim)}.btn-icon{text-align:center;width:30px;color:var(--muted);padding:7px 0}.btn-icon:hover{color:var(--accent)}.btn-row{gap:8px;display:flex}.btn-row>.btn{flex:1}.add-rule{border:1px dashed var(--border);color:var(--muted);width:100%;font-family:var(--font-mono);cursor:pointer;background:0 0;border-radius:6px;padding:7px 12px;font-size:12px;transition:color .12s,border-color .12s}.add-rule:hover{color:var(--text);border-color:var(--accent)}.icon-btn{border:1px solid var(--border);background:var(--panel-2);width:26px;height:26px;color:var(--muted);cursor:pointer;border-radius:5px;flex:0 0 26px;font-size:14px;line-height:1;transition:color .12s,border-color .12s}.icon-btn:hover{color:var(--text);border-color:var(--accent-dim)}.icon-btn.danger:hover{color:var(--danger);border-color:var(--danger)}.viewer-bar{border:1px solid var(--border);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:.55;background:#000000db;border-radius:999px;align-items:center;gap:2px;padding:3px;transition:opacity .15s;display:flex;position:absolute;bottom:12px;left:50%;transform:translate(-50%)}.frame:hover .viewer-bar,.viewer-bar:focus-within{opacity:1}.frame.is-empty .viewer-bar{display:none}.btn.btn-mini{min-width:30px;color:var(--muted);background:0 0;border-color:#0000;border-radius:999px;padding:4px 10px;font-size:11px;line-height:1}.btn.btn-mini:hover{color:var(--accent);background:#ffb0001a;border-color:#0000}.btn.btn-mini.on{color:var(--accent);background:#ffb00024;border-color:#0000;font-weight:700}.viewer-sep{background:var(--border);width:1px;height:14px;margin:0 3px}.zoom-label{text-align:center;min-width:46px;color:var(--text);font-variant-numeric:tabular-nums;-webkit-user-select:none;user-select:none;font-size:11px}.chips{flex-wrap:wrap;gap:6px;display:flex}.chip{background:var(--bg);border:1px solid var(--border);color:var(--muted);font-size:11px;font-family:var(--font-mono);cursor:pointer;border-radius:999px;padding:3px 9px;transition:color .12s,border-color .12s}.chip:hover{color:var(--text);border-color:var(--accent-dim)}.chip.on{border-color:var(--accent);color:var(--accent);font-weight:700}.chip.toggle{text-align:center;cursor:pointer;flex:none;min-width:52px;display:inline-block;position:relative}.toggle-input{opacity:0;cursor:pointer;width:100%;height:100%;margin:0;padding:0;position:absolute;inset:0}.chip.toggle:has(.toggle-input:focus-visible){outline:1px solid var(--accent);outline-offset:1px}.card{background:var(--panel-2);border:1px solid var(--border);border-radius:9px;flex-direction:column;gap:8px;padding:10px;transition:border-color .12s;display:flex}.card.card-on{border-color:var(--accent-dim)}.card-head{justify-content:space-between;align-items:baseline;gap:8px;display:flex}.card-title{text-transform:uppercase;letter-spacing:.06em;color:var(--text);font-size:12px;font-weight:700}.card-units{color:var(--muted);font-size:11px}.card-body{flex-direction:column;gap:8px;display:flex}.card-note{color:#6f8f73;margin:0;font-size:11px;line-height:1.5}.ease-grid{grid-template-columns:1fr 1fr;gap:6px 10px;display:grid}.ease-grid .row>.row-label{flex-basis:44px}.shape-set{flex-direction:column;gap:7px;display:flex}.seq{flex-wrap:wrap;align-items:center;gap:5px;font-size:11px;display:flex}.seq-item{color:var(--accent)}.seq-arrow,.seq-empty{color:var(--muted)}.palette,.derived{flex-direction:column;gap:7px;display:flex}.swatches{grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:6px;display:grid}.swatch{align-items:center;gap:4px;display:flex}.swatch input[type=color]{flex:1;min-width:0}.strip{border:1px solid var(--border);border-radius:4px;height:22px;display:flex;overflow:hidden}.strip-cell{flex:1}.preset{text-align:left;color:var(--text);font-family:var(--font-mono);cursor:pointer;background:0 0;border:1px solid #0000;border-radius:8px;flex-direction:column;gap:2px;padding:8px 10px;transition:background .12s,border-color .12s;display:flex}.preset:hover{background:var(--panel-2)}.preset:hover,.preset:focus-visible{border-color:var(--accent)}.preset-name{font-size:12px}.preset-blurb{color:var(--muted);font-size:11px;line-height:1.4}.dropzone{border:1px dashed var(--border);border-radius:9px;flex-direction:column;align-items:center;gap:8px;padding:18px 12px;transition:border-color .12s,background .12s;display:flex}.dropzone.over{border-color:var(--accent);background:#ffb0000d}.dropzone-title{font-family:var(--font-pixel);color:var(--accent);letter-spacing:-.5px;text-shadow:0 0 10px #ffb00066;font-size:11px}.dropzone-sub{color:var(--muted);font-size:11px}.svg-input{font-size:11px}.notice{border:1px solid var(--warn);color:#ffae85;background:#ff6a2b17;border-radius:6px;padding:7px 9px;font-size:11px;line-height:1.5;display:none}.notice.show{display:block}.notice.error{border-color:var(--danger);color:#ff9b9b;background:#ff6b6b17}.bottombar{border-top:1px solid var(--border);flex-wrap:wrap;flex-shrink:0;align-items:center;gap:10px;padding:8px 14px;display:flex}.bottom-controls{flex-wrap:wrap;align-items:center;gap:16px;display:flex}.bottom-controls .row{width:260px}.bottom-controls .row>.row-label{flex-basis:60px}.stats{gap:14px;margin-left:auto;font-size:11px;display:flex}.stat{align-items:baseline;gap:5px;display:flex}.stat-key{color:var(--muted);text-transform:uppercase;letter-spacing:.08em}.stat-val{color:var(--accent);font-variant-numeric:tabular-nums}.toast{border:1px solid var(--border);background:var(--panel);color:var(--text);opacity:0;pointer-events:none;z-index:40;border-radius:8px;padding:8px 14px;font-size:12px;transition:opacity .16s ease-out,transform .16s ease-out;position:fixed;bottom:62px;left:50%;transform:translate(-50%,8px);box-shadow:0 18px 60px #0000008c}.toast.show{opacity:1;transform:translate(-50%)}.toast.warn{border-color:var(--warn);color:#ffae85}.toast.error{border-color:var(--danger);color:#ff9b9b}.modal{z-index:50;background:#020408a8;justify-content:center;align-items:center;display:none;position:fixed;inset:0}.modal.show{display:flex}.modal-panel{background:var(--panel);border:1px solid var(--border);border-radius:8px;width:min(560px,100vw - 40px);padding:18px;animation:.19s cubic-bezier(.2,.8,.2,1) modalPop;box-shadow:0 18px 60px #0000008c}.modal-panel h3{font-family:var(--font-pixel);letter-spacing:-.5px;color:var(--accent);text-shadow:0 0 10px #ffb00066;margin:0 0 12px;font-size:12px}.modal-body{color:var(--text);margin-bottom:14px;font-size:12px;line-height:1.65}.modal-body p{margin:0 0 10px}@keyframes modalPop{0%{opacity:0;transform:translateY(10px)scale(.97)}to{opacity:1;transform:none}}.intro{z-index:90;background:var(--bg);justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.intro.booting .intro-title{opacity:0}.intro-title{font-family:var(--font-pixel);letter-spacing:-.5px;color:var(--accent);font-size:22px}.intro.booted{animation:.5s 1.5s both introFade}.intro.booted .intro-title{animation:.45s ease-out both titleIn,.5s ease-in-out .45s 2 alternate titleGlow,.55s cubic-bezier(.2,.8,.2,1) 1.1s both titleFly}@keyframes titleIn{0%{opacity:0;transform:scale(.92)}to{opacity:1;transform:none}}@keyframes titleGlow{0%{text-shadow:0 0 8px #ffb00059}to{text-shadow:0 0 26px #ffb000d9}}@keyframes titleFly{to{opacity:.6;transform:translateY(-40vh)scale(.42)}}@keyframes introFade{to{opacity:0;visibility:hidden}}body.booted .slot-right{animation:.5s cubic-bezier(.2,.9,.2,1) 1.35s both slideRight}body.booted .bottombar{animation:.45s cubic-bezier(.2,.9,.2,1) 1.5s both riseUp}@keyframes slideRight{0%{opacity:0;transform:translate(40px)}to{opacity:1;transform:none}}@keyframes riseUp{0%{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}@media (prefers-reduced-motion:reduce){.intro{display:none}*,:before,:after{transition-duration:.01ms!important;animation:none!important}.slot-right,.bottombar,.modal-panel,.intro-title{opacity:1;transform:none}}@media (max-width:1100px){.slot-left{width:250px}.bottom-controls .row{width:200px}}@media (max-width:860px){.main{flex-direction:column;overflow-y:auto}.resizer{display:none}.stage{flex:none;order:1;height:56vh}.slot-left,.slot-right{border:none;border-top:1px solid var(--border);flex:none;width:100%;overflow:visible}.slot-left{order:2}.slot-right{order:3}.bottom-controls .row{width:100%}.bottombar{gap:6px}}