:root{color-scheme:dark;
--bg:#0e0d15;--bg-2:#1a1830;--chrome:#12111b;--chrome-2:#1b1825;--canvas:#11101a;--console:#0d0c14ee;
--panel:#171622;--panel2:#201f2d;--panel-3:#252333;--panel-4:#1d1c2b;
--panel-g1:#171622f2;--panel-g2:#171622e6;--panel-g3:#171622e0;--panel-g4:#171622c9;
--ink:#e9e7f5;--ink-2:#d8d5e7;--ink-3:#bab6cf;--ink-ghost:#e6e2f01c;
--muted:#9290aa;--muted-2:#77738c;--muted-3:#5c596d;
--lav:#c8bfff;--lav-2:#b2a8ff;
--line:#2c2a3e;--line-2:#3a374c;--line-3:#45405e;--line-p:#4a4079;
--sel:#302b50;--sel-2:#343052;--on-sel:#fff;--on-bright:#191721;
--paper:#faf9ff;--grid-line:#e6e2f01c;--canvas-dot:#232134;--art-shadow:0 18px 50px #0008;
--purple:#8b75ff;--purple-2:#7b6cf2;--purple-a:#7965e488;--purple-b:#7965e466;--purple-c:#8b75ff33;--purple-d:#8b75ff22;
--mint:#62e0bb;--mint-2:#7ee0c3;--mint-a:#62e0bb55;--mint-b:#62e0bb44;--mint-c:#62e0bb33;--mint-ink:#d8fff0;--mint-dim:#2e5a4b;--mint-bg:#1c2b26;--on-mint:#10131a;
--gold:#ffd36e;--gold-2:#f0c98a;--gold-3:#e5a552;--gold-a:#ffd36e44;--gold-b:#ffd36e33;--gold-3a:#e5a55255;--gold-dim:#6d5b2e;--on-gold:#3a2a00;
--red:#ff9a8a;--red-ink:#ffd7d7;--red-2:#ff765c;--red-2a:#ff765c22;--red-dim:#5a3a44}
[data-theme="light"]{color-scheme:light;
--bg:#f2f1f8;--bg-2:#e4e1f2;--chrome:#e8e6f2;--chrome-2:#dfdcea;--canvas:#e3e1ee;--console:#fbfafeee;
--panel:#fbfaff;--panel2:#f0eef8;--panel-3:#e7e4f2;--panel-4:#f4f2fb;
--panel-g1:#fbfafff2;--panel-g2:#fbfaffe6;--panel-g3:#fbfaffe0;--panel-g4:#fbfaffc9;
--ink:#1c1a2e;--ink-2:#2f2c4a;--ink-3:#524e70;--ink-ghost:#1c1a2e14;
--muted:#5d5980;--muted-2:#706c8e;--muted-3:#8e8aa6;
--lav:#5a45cf;--lav-2:#6d58e8;
--line:#d8d5e6;--line-2:#c6c2d9;--line-3:#aaa5c4;--line-p:#a99aee;
--sel:#d9d0fb;--sel-2:#cabdf7;--on-sel:#241d5e;--on-bright:#f7f6fd;
--paper:#ffffff;--grid-line:#1c1a2e14;--canvas-dot:#d2cede;--art-shadow:0 14px 40px #1c1a2e20;
--purple:#6a4fe8;--purple-2:#7d63f2;--purple-a:#6a4fe888;--purple-b:#6a4fe866;--purple-c:#6a4fe833;--purple-d:#6a4fe822;
--mint:#0c9d77;--mint-2:#0fae84;--mint-a:#0c9d7755;--mint-b:#0c9d7744;--mint-c:#0c9d7733;--mint-ink:#0a6f55;--mint-dim:#9adbc8;--mint-bg:#d8f2ea;--on-mint:#fff;
--gold:#a5760a;--gold-2:#8f6a12;--gold-3:#b07c1e;--gold-a:#a5760a44;--gold-b:#a5760a33;--gold-3a:#b07c1e55;--gold-dim:#e6d3a3;--on-gold:#fff;
--red:#d1503f;--red-ink:#b03327;--red-2:#e0684f;--red-2a:#e0684f22;--red-dim:#f0d4cd}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:14px 'DM Sans',sans-serif;overflow:hidden}.app-shell{height:100vh;display:grid;grid-template-columns:64px 230px minmax(450px,1fr) 260px;grid-template-rows:54px minmax(0,1fr) 128px;grid-template-areas:'top top top top' 'rail side work inspect' 'rail ai ai ai';background:radial-gradient(circle at 55% 35%,var(--bg-2) 0,var(--bg) 45%)}button,input{font:inherit}button{cursor:pointer;color:inherit}.topbar{grid-area:top;border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 18px;gap:24px;background:var(--chrome)}.brand{font-weight:700;font-size:17px;letter-spacing:-.4px}.brand-mark{color:var(--lav);font-size:21px}.badge{font:10px 'DM Mono';letter-spacing:.4px;color:var(--purple);border:1px solid var(--line-p);border-radius:20px;padding:3px 6px;margin-left:8px}.project-name{color:var(--muted);margin:auto;font-size:13px}.dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--mint);margin-right:6px}.top-actions{display:flex;align-items:center;gap:8px}.icon-button{background:none;border:0;color:var(--muted);font-size:22px}.export,.generate{border:0;border-radius:7px;background:var(--ink);color:var(--on-bright);font-weight:600;padding:9px 13px}.left-rail{grid-area:rail;border-right:1px solid var(--line);display:flex;flex-direction:column;align-items:center;padding:12px 0;background:var(--chrome)}.rail-item{width:50px;height:55px;border:0;background:transparent;color:var(--muted);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border-radius:8px}.rail-item span{font-size:18px}.rail-item small{font-size:9px}.rail-item.active{background:var(--sel);color:var(--lav)}.rail-spacer{flex:1}.sidebar,.inspector{background:var(--panel);overflow:auto}.sidebar{grid-area:side;border-right:1px solid var(--line);padding:17px 11px}.inspector{grid-area:inspect;border-left:1px solid var(--line);padding:17px 13px}.panel-title{display:flex;justify-content:space-between;align-items:center;text-transform:uppercase;letter-spacing:1px;font:11px 'DM Mono';color:var(--muted);padding:0 5px 10px}.panel-title.lower{margin-top:22px}.add,.edit{border:0;background:none;color:var(--lav);font-size:18px}.edit{font:11px 'DM Sans';color:var(--purple)}.layer-row,.action-row{height:34px;display:flex;align-items:center;gap:9px;padding:0 8px;border-radius:6px;color:var(--ink-3);font-size:13px;cursor:pointer}.layer-row:hover,.action-row:hover{background:var(--panel2)}.layer-row.active,.action-row.active{background:var(--sel-2);color:var(--on-sel)}.layer-icon{color:var(--muted-2);width:13px}.eye{margin-left:auto;color:var(--muted-2);font-size:12px}.action-row i{width:8px;height:8px;border-radius:50%;background:var(--purple-2)}.action-row:nth-child(2) i{background:var(--mint)}.action-row:nth-child(3) i{background:var(--gold)}.action-row:nth-child(4) i{background:var(--red)}.workspace{grid-area:work;display:grid;grid-template-rows:44px 1fr 135px;min-width:0}.canvas-toolbar{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);padding:0 16px;background:var(--chrome)}.crumbs{font:12px 'DM Mono';color:var(--muted)}.crumbs b{padding:0 6px;color:var(--muted-3)}.zoom{display:flex;align-items:center;gap:9px;color:var(--muted);font:12px 'DM Mono'}.zoom button{background:transparent;border:0;color:var(--ink);font-size:18px}.artboard-stage{position:relative;overflow:hidden;display:grid;place-items:center;background-color:var(--canvas);background-image:radial-gradient(var(--canvas-dot) 1px,transparent 1px);background-size:20px 20px}.artboard{position:relative;width:min(70vw,620px);aspect-ratio:5/4;background:var(--paper);box-shadow:var(--art-shadow);overflow:hidden;transform-origin:center}.grid{position:absolute;inset:0;background:linear-gradient(var(--grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);background-size:40px 40px;pointer-events:none}#rocketSvg{width:100%;height:100%;overflow:visible}.selection-box{position:absolute;left:31%;top:17%;width:38%;height:58%;border:1px solid var(--purple-2);pointer-events:none}.handle{position:absolute;width:7px;height:7px;background:var(--paper);border:1px solid var(--purple-2)}.tl{left:-4px;top:-4px}.tr{right:-4px;top:-4px}.bl{left:-4px;bottom:-4px}.br{right:-4px;bottom:-4px}.timeline{border-top:1px solid var(--line);background:var(--chrome);padding:10px 14px}.timeline-head{display:flex;align-items:center;gap:12px;color:var(--muted);font:11px 'DM Mono';text-transform:uppercase}.time-readout{margin-left:auto;color:var(--ink-3)}.play{font:11px 'DM Sans';background:var(--line-2);border:1px solid var(--line-3);border-radius:5px;padding:5px 8px}.tracks{display:grid;grid-template-columns:88px 1fr;height:33px;align-items:center}.track-label{color:var(--muted);font:11px 'DM Mono'}.track-line{height:1px;background:var(--line-2);position:relative}.clip{position:absolute;left:4%;right:42%;top:-5px;height:10px;background:var(--purple-b);border-radius:3px}.clip.warm{left:4%;right:26%;background:var(--gold-3a)}.key{position:absolute;width:7px;height:7px;background:var(--lav-2);transform:rotate(45deg);top:-3px}.k1{left:4%}.k2{left:56%}.k3{left:72%;background:var(--gold)}.playhead{position:absolute;height:24px;width:1px;background:var(--red);left:4%;top:-12px}.status{font:10px 'DM Mono';text-transform:none;letter-spacing:0;color:var(--mint)}.status i{display:inline-block;width:6px;height:6px;background:var(--mint);border-radius:50%;margin-right:4px}.inspector-card,.transition-card{background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:12px}.inspector-card label,.transition-card small{display:block;color:var(--muted);font:10px 'DM Mono';text-transform:uppercase;letter-spacing:.5px}.inspector-card strong{display:block;margin:5px 0 11px;font:13px 'DM Mono';color:var(--ink)}.property-row{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);padding:9px 0;color:var(--ink-3);font-size:12px}.property-row input{width:49px;background:var(--panel);border:1px solid var(--line-2);color:var(--ink-2);border-radius:4px;padding:4px;text-align:center;font:10px 'DM Mono'}.property-row>input{width:64px}.transition-route{display:flex;justify-content:center;gap:10px;align-items:center;font:12px 'DM Mono';color:var(--lav);padding:4px}.transition-route b{color:var(--purple)}.transition-spec{display:flex;gap:25px;border-top:1px solid var(--line);margin-top:10px;padding-top:10px}.transition-spec strong{display:block;margin-top:3px;font-size:12px}.transition-card p{font-size:11px;line-height:1.4;color:var(--muted);margin:12px 0 0}.ai-dock{grid-area:ai;border-top:1px solid var(--line);background:var(--panel);display:grid;grid-template-columns:36px 1fr auto auto auto;align-content:center;gap:11px;padding:16px 24px 5px}.ai-orb{width:34px;height:34px;border-radius:10px;background:linear-gradient(145deg,var(--lav-2),var(--purple-2));display:grid;place-items:center;color:white}.prompt-wrap{background:var(--panel-3);border:1px solid var(--line-2);border-radius:8px;padding:4px 10px}.prompt-wrap label{display:block;font:9px 'DM Mono';text-transform:uppercase;color:var(--muted)}.prompt-wrap input{border:0;background:transparent;outline:0;width:100%;color:var(--ink);font-size:13px}.generate{background:var(--purple-2);color:var(--chrome-2);align-self:stretch}.generate span{opacity:.6}.command{align-self:stretch;width:44px;border:1px solid var(--line-2);border-radius:7px;background:var(--panel-3);color:var(--gold);font-size:17px}
.command:hover:not(:disabled){border-color:var(--gold);background:var(--line-2)}
.command:disabled{opacity:.5}
.command.enhance{color:var(--lav)}
.command.enhance:hover:not(:disabled){border-color:var(--purple)}
.suggestions{grid-column:2/-1;display:flex;gap:7px;flex-wrap:wrap}.suggestions button{background:var(--panel2);border:1px solid var(--line-2);border-radius:16px;padding:4px 9px;color:var(--ink-3);font-size:11px}
.suggestions.recents{grid-column:2/-1}
.suggestions.recents .recent-chip{background:var(--mint-bg);border:1px solid var(--mint-dim);color:var(--mint);display:inline-flex;align-items:center;gap:6px}
.suggestions.recents .recent-chip:hover{border-color:var(--mint);color:var(--mint-ink)}
.recent-chip .x{color:var(--mint-dim);font-size:10px;padding:0 2px;border-radius:4px}
.recent-chip .x:hover{color:var(--red-ink)}
.suggestions .edit-chip{background:var(--sel-2);border-color:var(--line-p);color:var(--lav)}
.suggestions .edit-chip:hover{border-color:var(--purple);color:var(--on-sel)}

/* action row edit/delete affordances */
.action-row .row-acts{margin-left:auto;display:none;gap:4px}
.action-row:hover .row-acts{display:inline-flex}
.action-row .row-acts b{color:var(--muted-2);font-size:11px;font-weight:400;padding:1px 5px;border-radius:4px}
.action-row .row-acts b:hover{color:var(--on-sel);background:var(--line-2)}

/* action editor — inspector card (draft: Save commits, ✕ discards) */
.ae-card-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}
.ae-card-head strong{margin:0;font:12px 'DM Mono';color:var(--ink)}
.ae-card-head button{background:none;border:0;color:var(--muted-2);font-size:12px;padding:2px 4px}
.ae-card-head button:hover{color:var(--red)}
.ae-head,.ae-pose-row{display:grid;grid-template-columns:minmax(46px,1.3fr) repeat(5,minmax(0,1fr)) 14px;gap:3px;align-items:center}
.ae-head{color:var(--muted);font:9px 'DM Mono';text-transform:uppercase;letter-spacing:.5px;padding:8px 0 4px}
.ae-head span:not(:first-child){text-align:center}
.ae-poses{max-height:38vh;overflow:auto;margin-bottom:8px}
.ae-actions{display:flex;gap:8px}
.ae-actions .generate{flex:1;padding:7px 10px}
.ae-actions .export{padding:7px 10px}
.ae-pose-row{border-top:1px solid var(--line);padding:4px 0}
.ae-pose-row .lname{color:var(--muted);font:11px 'DM Mono';overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ae-pose-row input{width:100%;background:var(--panel);border:1px solid var(--line-2);color:var(--ink-2);border-radius:4px;padding:3px 2px;font:10px 'DM Mono';text-align:center}
.ae-pose-row .rm{background:none;border:0;color:var(--muted-2);font-size:11px;padding:0}
.ae-pose-row .rm:hover{color:var(--red)}
.ae-add{display:flex;gap:8px;margin-bottom:8px}
.ae-add select{flex:1;background:var(--panel);border:1px solid var(--line-2);color:var(--ink-2);border-radius:5px;padding:5px;font:11px 'DM Sans'}.toast{position:fixed;left:50%;bottom:145px;transform:translate(-50%,20px);background:var(--ink);color:var(--chrome-2);border-radius:7px;padding:9px 13px;font-size:12px;font-weight:600;opacity:0;transition:.25s;pointer-events:none}.toast.show{opacity:1;transform:translate(-50%,0)}

.transition-spec{flex-wrap:wrap;gap:10px 14px}.transition-spec>div{min-width:70px}.sm-node circle{transition:fill .15s,stroke .15s}.state-graph-info{color:var(--muted);font-size:11px;text-align:center;padding:8px}

/* layer tools (reorder / delete) */
.layer-tools{display:flex;gap:6px;margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
.layer-tools button{flex:1;background:var(--panel2);border:1px solid var(--line);border-radius:6px;color:var(--ink);padding:6px 0;font-size:14px}
.layer-tools button:hover{border-color:var(--purple);color:var(--lav)}
.layer-tools .danger:hover{border-color:var(--red-2);color:var(--red)}

/* "recorded in <action>" — where canvas drags/field edits land while posing */
.pose-rec{margin-top:10px;padding-top:9px;border-top:1px solid var(--line)}
.pose-rec>label{display:block;font:10px 'DM Mono';color:var(--gold);letter-spacing:.3px;margin-bottom:5px}
.pose-rec>label b{color:var(--gold)}
.pose-rec .rec-row{display:flex;align-items:baseline;gap:8px;padding:3px 6px;border-radius:5px;cursor:pointer}
.pose-rec .rec-row:hover{background:var(--panel2)}
.pose-rec .rec-row.on{background:var(--sel)}
.pose-rec .rec-row b{font:11px 'DM Sans';font-weight:600;color:var(--lav);min-width:52px}
.pose-rec .rec-row.shape b{color:var(--mint);font-weight:500;padding-left:8px;font-size:10.5px}
.pose-rec .rec-row span{font:10.5px 'DM Mono';color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pose-rec .rec-row.on span{color:var(--ink)}
.pose-rec .rec-empty{font:10.5px 'DM Mono';color:var(--muted);opacity:.7;padding:2px 6px}

/* shape pose hint — shown in the shape fields while a non-idle action is up */
.shape-pose-hint{font:10px 'DM Mono';color:var(--gold);margin:2px 0 7px;letter-spacing:.2px}

/* physics card — ⚛ recipe + params + simulate, while posing an action */
.phys-card{background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:12px}
.phys-row{display:flex;gap:6px;align-items:center}
.phys-row select{flex:1;background:var(--panel);border:1px solid var(--line-2);color:var(--ink-2);border-radius:5px;padding:4px 6px;font:11px 'DM Sans'}
#physBake{background:var(--mint);border:0;border-radius:5px;color:#06352a;font:600 10.5px 'DM Sans';padding:5px 10px}
#physClear{background:none;border:1px solid var(--line-2);border-radius:5px;color:var(--muted);font-size:11px;padding:4px 7px}
#physClear:hover{border-color:var(--red-2);color:var(--red)}
.phys-params{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-top:7px}
.phys-field{display:flex;align-items:center;gap:6px}
.phys-field span{font:9px 'DM Mono';color:var(--muted);text-transform:uppercase;letter-spacing:.3px;min-width:44px}
.phys-field input,.phys-field select{width:100%;min-width:0;background:var(--panel);border:1px solid var(--line-2);color:var(--ink-2);border-radius:4px;padding:3px 5px;font:10px 'DM Mono'}
.phys-range{grid-column:1 / -1}
.phys-range input[type=range]{padding:0;accent-color:var(--mint);border:0;background:none}
.phys-range .pv{font:10px 'DM Mono';color:var(--mint);min-width:30px;text-align:right}
.phys-card .aph,.aph{font:10px 'DM Mono';color:var(--mint);margin-left:5px}
.tl-btn.on{color:var(--mint);border-color:var(--mint)}
.phys-hint{font:10px 'DM Mono';color:var(--muted);margin-top:7px;line-height:1.4}
.phys-card button:disabled,.phys-card select:disabled{opacity:.45;cursor:default}
.phys-card input:disabled{opacity:.5}
@keyframes physFlash{0%{box-shadow:0 0 0 2px var(--mint);background:rgba(85,230,180,.12)}100%{box-shadow:none}}
.phys-card.flash{animation:physFlash .9s ease-out;border-radius:6px}
.shape-pose-hint b{color:var(--gold)}

/* eye toggle cursor */
.layer-row .eye{cursor:pointer;opacity:.7}
.layer-row .eye:hover{opacity:1;color:var(--purple)}
.layer-row.dim{opacity:.45}
.layer-row.dim:hover{opacity:.8}
.layer-row .row-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.layer-row .row-acts{display:none;gap:4px;margin-left:auto}
.layer-row:hover .row-acts{display:inline-flex}
.layer-row .row-acts b{color:var(--muted-2);font-size:11px;font-weight:400;padding:1px 5px;border-radius:4px}
.layer-row .row-acts b:hover{color:var(--red);background:var(--red-2a)}
.layer-row .eye{margin-left:0}

/* expanded timeline (animate view) */
.timeline.expanded{height:240px}
.timeline.expanded .tracks{height:34px}

/* overlays (help + transition editor) */
.overlay{position:fixed;inset:0;background:rgba(8,7,14,.72);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:50}
.overlay[hidden]{display:none}
.overlay-card{background:var(--panel);border:1px solid var(--line);border-radius:14px;width:min(440px,92vw);padding:18px 20px;box-shadow:0 24px 60px rgba(0,0,0,.5)}
.overlay-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.overlay-head strong{font-size:15px}
.overlay-close{background:none;border:0;color:var(--muted);font-size:18px;cursor:pointer}
.overlay-close:hover{color:var(--ink)}
.shortcut-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 16px;margin-bottom:14px}
.shortcut-grid>div{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--muted)}
kbd{font:11px 'DM Mono';background:var(--panel2);border:1px solid var(--line);border-bottom-width:2px;border-radius:5px;padding:2px 7px;color:var(--ink)}
.overlay-note{font-size:12px;color:var(--muted);line-height:1.5}
.overlay-note code{font:11px 'DM Mono';background:var(--panel2);padding:1px 5px;border-radius:4px;color:var(--lav)}
/* help — a proper window hosting the searchable help/shortcuts pages */
.help-win{width:min(1060px,92vw);height:min(84vh,860px);display:flex;flex-direction:column;padding:0;overflow:hidden}
.help-head{margin:0;padding:10px 12px 10px 18px;border-bottom:1px solid var(--line);background:var(--chrome);gap:14px}
.help-head strong{display:flex;align-items:center;gap:7px}
.help-tabs{flex:0 1 auto}
.help-head-r{display:flex;align-items:center;gap:10px}
.help-head-r .generate{padding:5px 12px;font-size:12px}
.help-frame{flex:1;width:100%;border:0;background:var(--bg)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px}
.form-grid label{display:flex;flex-direction:column;gap:5px;font-size:11px;color:var(--muted)}
.form-grid label code{color:var(--lav);font:10px 'DM Mono';text-transform:none}
.form-grid select,.form-grid input{background:var(--panel2);border:1px solid var(--line);border-radius:6px;color:var(--ink);padding:7px 8px;font:13px 'DM Sans'}
.form-grid select:focus,.form-grid input:focus{outline:none;border-color:var(--purple)}
.overlay-actions{display:flex;gap:10px;justify-content:flex-end}
.overlay-actions .export{background:transparent;border:1px solid var(--line);color:var(--muted)}
.overlay-actions .export:hover{border-color:var(--red-2);color:var(--red)}
.name-card{width:min(320px,92vw)}
.name-input{width:100%;background:var(--panel2);border:1px solid var(--line);border-radius:7px;color:var(--ink);padding:9px 10px;font:14px 'DM Sans';margin-bottom:14px}
.name-input:focus{outline:none;border-color:var(--purple)}
.project-list{max-height:240px;overflow:auto;margin-bottom:12px}
.proj-row{display:flex;align-items:center;gap:8px;padding:7px 9px;border:1px solid var(--line);border-radius:8px;margin-bottom:6px;background:var(--panel2)}
.proj-name{flex:1;font-size:13px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.proj-name:hover{color:var(--purple)}
.proj-del{background:none;border:none;color:var(--muted);cursor:pointer;font-size:11px;padding:2px 5px;border-radius:4px}
.proj-del:hover{color:var(--red-2);background:var(--red-2a)}

.sel-box{position:absolute;border:1.5px dashed var(--purple);border-radius:4px;box-shadow:0 0 0 1px var(--purple-c),0 0 10px var(--purple-b);pointer-events:none;z-index:5}
.sel-box .h{position:absolute;width:9px;height:9px;background:var(--paper);border:1.5px solid var(--purple);border-radius:2px;pointer-events:auto}
.sel-box .h.tl{left:-5px;top:-5px;cursor:nwse-resize}
.sel-box .h.tr{right:-5px;top:-5px;cursor:nesw-resize}
.sel-box .h.bl{left:-5px;bottom:-5px;cursor:nesw-resize}
.sel-box .h.br{right:-5px;bottom:-5px;cursor:nwse-resize}
.sel-box .h.rot{left:50%;top:-26px;transform:translateX(-50%);cursor:grab;border-radius:50%;background:var(--purple)}.sel-box .h.rot::before{content:'';position:absolute;left:50%;top:100%;width:1.5px;height:12px;background:var(--purple);transform:translateX(-50%);pointer-events:none}.sel-box .h.rot::after{content:'';position:absolute;inset:-7px;border-radius:50%}
/* pivot/origin handle — crosshair, positioned per-frame at the rotation origin */
.h.piv{position:absolute;width:13px;height:13px;border-radius:50%;border:2px solid var(--mint);background:transparent;transform:translate(-50%,-50%);cursor:crosshair;pointer-events:auto;box-shadow:0 0 4px rgba(0,0,0,.35)}
.vtx-dots{position:absolute;inset:0;pointer-events:none;z-index:4}
.vtx-dots i{position:absolute;width:7px;height:7px;border-radius:50%;background:var(--mint);border:1.5px solid #0e0d16;transform:translate(-50%,-50%);opacity:.75}
/* vertex-edit overlay (pathedit.js): interactive anchors/handles/midpoints */
.vert-overlay{position:absolute;inset:0;pointer-events:none;z-index:7}
.vert-overlay .v-dot{position:absolute;width:9px;height:9px;border-radius:2px;background:#fff;border:1.5px solid var(--purple);transform:translate(-50%,-50%);pointer-events:auto;cursor:move}
.vert-overlay .v-dot.smooth{border-radius:50%}
.vert-overlay .v-dot.sel{background:var(--purple)}
.vert-overlay .v-mid{position:absolute;width:7px;height:7px;border-radius:50%;background:transparent;border:1px dashed var(--mint);transform:translate(-50%,-50%);pointer-events:auto;cursor:copy;opacity:.55}
.vert-overlay .v-mid:hover{opacity:1;background:var(--mint)}
.vert-overlay .v-hnd{position:absolute;width:7px;height:7px;border-radius:50%;background:var(--gold);border:1px solid #0e0d16;transform:translate(-50%,-50%);pointer-events:auto;cursor:move}
.vert-overlay .v-spoke{position:absolute;height:1px;background:var(--gold);opacity:.55;transform-origin:0 0;pointer-events:none}
.text-edit{position:absolute;z-index:9;min-width:120px;background:var(--panel);border:1px solid var(--purple);border-radius:6px;color:var(--ink);font:16px 'DM Sans';padding:5px 8px;box-shadow:0 6px 22px #000a}
.geo-f.wide{flex:1 1 100%}
.geo-f.wide input{width:100%}
.geo-f select{width:52px;background:var(--panel);border:1px solid var(--line-2);color:var(--ink-2);border-radius:4px;font:10px 'DM Mono';padding:3px 2px}
.h.piv::before{content:'';position:absolute;left:50%;top:50%;width:5px;height:5px;border-radius:50%;background:var(--mint);transform:translate(-50%,-50%);pointer-events:none}
.h.piv::after{content:'';position:absolute;inset:-8px;border-radius:50%}

/* posing-mode badge — shown when a non-idle action is selected */
.pose-badge{margin-left:8px;background:var(--sel-2);border:1px solid var(--purple);border-radius:10px;color:var(--lav);font:10px 'DM Mono';padding:2px 8px}

/* shape inspector */
.shape-props{background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:12px;margin-top:10px}
.shape-props>label{display:block;color:var(--muted);font:10px 'DM Mono';text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px}
.shape-chips{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:4px}
.shape-chips .chip{background:var(--panel2);border:1px solid var(--line);border-radius:5px;color:var(--muted);font:10px 'DM Mono';padding:3px 7px}
.shape-chips .chip:hover{border-color:var(--purple);color:var(--ink)}
.shape-chips .chip.active{background:var(--sel-2);color:var(--on-sel);border-color:var(--purple)}
.prop-fill{display:flex;align-items:center;gap:6px}
.prop-fill input[type=color]{width:26px;height:24px;border:1px solid var(--line);border-radius:5px;background:none;padding:0;cursor:pointer}
.prop-fill input:not([type=color]){width:44px}
.prop-fill button{background:var(--panel2);border:1px solid var(--line);border-radius:5px;color:var(--muted);font-size:11px;padding:3px 6px}
.prop-fill button:hover{border-color:var(--purple);color:var(--ink)}
.prop-fill button.active{border-color:var(--purple);color:var(--on-sel);background:var(--sel-2)}

/* collapsible timeline — height lives on .timeline so workspace row is auto */
.workspace{grid-template-rows:44px 1fr auto}
.timeline{height:135px;display:flex;flex-direction:column;overflow:hidden;transition:height .18s ease}
.timeline.expanded{height:240px}
.timeline.collapsed{height:34px}
.timeline.collapsed #tlScroll{display:none}
.tl-scroll{flex:1;overflow:auto;position:relative;min-height:0}
.tl-toggle{margin-left:auto;background:transparent;border:0;color:var(--muted);font-size:13px;padding:2px 6px}
.tl-toggle:hover{color:var(--ink)}

/* collapsible sidebar panels + whole-sidebar minimize */
.p-toggle{background:none;border:0;color:var(--muted);font-size:13px;line-height:1;padding:0;width:16px;flex:none;text-align:center;transition:transform .15s}
.p-toggle.collapsed{transform:rotate(-90deg)}
.pt-label{display:flex;align-items:center;gap:6px}
.sec-head{display:flex;align-items:center;gap:7px;margin-bottom:6px}
.sec-head label{margin:0}
.sec-head strong{margin:0 0 0 auto;font:11px 'DM Mono';color:var(--ink)}
.sec-sub{font:10px 'DM Mono';color:var(--muted);text-transform:none;letter-spacing:0}
.app-shell.side-min{grid-template-columns:64px 0 minmax(450px,1fr) 260px}
.app-shell.side-min .sidebar{display:none}

/* canvas draw tools */
.tools{display:flex;align-items:center;gap:3px;margin:0 12px}
.tool{background:transparent;border:1px solid transparent;border-radius:6px;color:var(--muted);font-size:14px;padding:4px 8px;line-height:1}
.tool:hover{color:var(--ink);border-color:var(--line)}
.tool.active{background:var(--sel);color:var(--lav);border-color:var(--line-p)}
#drawColor{width:24px;height:24px;border:1px solid var(--line);border-radius:6px;background:none;padding:0;margin-left:6px;cursor:pointer}
#stage.draw-cursor .artboard,#stage.draw-cursor .artboard *{cursor:crosshair}
#stage:not(.draw-cursor) #scene-root>g{cursor:move}

/* topbar overflow menu */
.menu-wrap{position:relative}
.menu-pop{position:absolute;right:0;top:calc(100% + 8px);background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:5px;display:flex;flex-direction:column;gap:1px;min-width:176px;box-shadow:0 14px 40px #000a;z-index:60}
.menu-pop[hidden]{display:none}
.menu-pop button{display:flex;justify-content:space-between;align-items:center;gap:16px;background:transparent;border:0;color:var(--ink);padding:7px 10px;border-radius:6px;font-size:13px;text-align:left;white-space:nowrap}
.menu-pop button:hover{background:var(--line)}
.menu-pop button:disabled{color:var(--muted-2);cursor:default}
.menu-pop button:disabled:hover{background:transparent}
.menu-pop kbd{font:10px 'DM Mono';color:var(--muted)}
.menu-pop .menu-sep{height:1px;background:var(--line);margin:3px 4px}
/* flyout submenus — hover or tap the ▸ row; .menu-subwrap keeps the panel
   open while the pointer crosses the gap */
.menu-subwrap{position:relative}
.menu-subwrap>.menu-sub{position:absolute;left:calc(100% - 2px);top:-5px;min-width:190px;background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:5px;display:none;flex-direction:column;gap:1px;box-shadow:0 14px 40px #000a}
.menu-subwrap:hover>.menu-sub,.menu-subwrap.open>.menu-sub{display:flex}
.menu-subwrap:hover>button,.menu-subwrap.open>button{background:var(--line)}
.sub-caret{color:var(--muted);font-size:10px}
.menu-sub .menu-recent{font-size:12.5px;color:var(--ink-dim,#c9c6dd)}
.menu-sub .menu-recent:hover:not(:disabled){color:var(--ink)}
.menu-pop .share-h{font:10px 'DM Mono';text-transform:uppercase;letter-spacing:1.1px;color:var(--muted-2);padding:7px 10px 3px}
.menu-pop .share-calls{display:flex;flex-wrap:wrap;gap:4px;padding:2px 6px 6px}
.menu-pop .share-calls button{padding:4px 9px;font:11px 'DM Mono';border:1px solid var(--line);border-radius:6px;justify-content:center}
.menu-pop .share-calls button:hover{border-color:var(--mint)}
#shareCopy[disabled]{opacity:.55;pointer-events:none}

/* canvas maximize / focus mode */
.app-shell.canvas-max{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);grid-template-areas:'work'}
.app-shell.canvas-max>.topbar,.app-shell.canvas-max>.left-rail,.app-shell.canvas-max>.sidebar,.app-shell.canvas-max>.inspector,.app-shell.canvas-max>.ai-dock{display:none}
#maxBtn{border:1px solid var(--line);border-radius:5px;padding:1px 7px;margin-left:6px;font-size:13px;line-height:1.4}
.app-shell.canvas-max #maxBtn{color:var(--purple);border-color:var(--purple)}

/* Animate view — keyframe timeline */
.timeline.expanded{height:320px}
#timelineTracks{position:relative;--t:1}
.tl-ruler{position:relative;height:18px;margin-left:88px;border-bottom:1px solid var(--line);flex:none;width:calc((100% - 88px) * var(--tl-zoom,1));cursor:pointer}
.tl-ruler .tick{position:absolute;top:1px;transform:translateX(-50%);font:9px 'DM Mono';color:var(--muted-3)}
.tl-ruler .tick i{display:block;width:1px;height:4px;background:var(--line-2);margin:0 auto 1px}
/* timeline zoom: track lines widen past the viewport; labels stick left */
.tracks{min-width:calc(88px + (100% - 88px) * var(--tl-zoom,1))}
.tl-zoom{display:inline-flex;align-items:center;gap:2px;color:var(--muted-3);font:9px 'DM Mono'}
#tlZoomVal{min-width:26px;text-align:center}
.tl-snap{position:absolute;top:0;width:2px;height:18px;background:var(--mint);transform:translateX(-50%);pointer-events:none;z-index:3}
.tl-action{color:var(--lav);border:1px solid var(--line-p);border-radius:12px;padding:2px 8px;text-transform:none}
.tl-btn{background:var(--panel-3);border:1px solid var(--line-2);border-radius:5px;color:var(--ink-3);font:11px 'DM Sans';padding:4px 7px}
.tl-btn.active{color:var(--gold);border-color:var(--gold-dim)}
.tl-sel{background:var(--panel);border:1px solid var(--line-2);color:var(--ink-2);border-radius:4px;font:10px 'DM Mono';padding:3px 4px}
.tl-sel:disabled{opacity:.4}
.tl-field{color:var(--muted);font:10px 'DM Mono'}
.tl-field input{width:56px;background:var(--panel);border:1px solid var(--line-2);color:var(--ink-2);border-radius:4px;padding:3px 4px;text-align:center;font:10px 'DM Mono'}
.tracks.active{background:var(--panel2);border-radius:4px}
.tracks.active .track-label{color:var(--on-sel)}
.track-label{cursor:pointer;position:sticky;left:0;z-index:3;background:var(--chrome);padding-right:4px}
.clip{left:0;right:0;top:-5px;height:10px;background:var(--line-2);border-radius:3px}
.clip.posed{background:var(--purple-a)}
.tl-key{position:absolute;width:8px;height:8px;background:var(--lav-2);transform:translateX(-50%) rotate(45deg);top:-4px;cursor:ew-resize;border-radius:1px;z-index:1}
.tl-key:hover{background:var(--paper)}
.tl-key.kf{background:var(--gold)}
.tl-key.sel{background:var(--mint);box-shadow:0 0 0 2px var(--mint-3, #8ff0d088);z-index:2}
.tl-key.sel-multi{background:var(--lav-2);box-shadow:0 0 0 2px var(--mint-3, #8ff0d088),0 0 0 4px var(--lav-3a, #b9a7ff44);z-index:2}
.tl-key.hold{border-radius:50%}
/* key context menu — small popover opened by right-clicking a diamond */
.tl-menu{position:fixed;min-width:170px;background:var(--panel);border:1px solid var(--line-2);border-radius:8px;padding:5px;z-index:60;box-shadow:0 10px 34px #000a;display:flex;flex-direction:column;gap:1px}
.tl-menu[hidden]{display:none}
.tl-menu button{display:block;width:100%;text-align:left;background:none;border:0;border-radius:5px;padding:6px 9px;font:12px 'DM Sans';color:var(--ink-3)}
.tl-menu button:hover:not(:disabled){background:var(--sel-2)}
.tl-menu button:disabled{opacity:.4;cursor:default}
.tl-menu button.danger{color:var(--red-2)}
.tl-menu button kbd{font:9px 'DM Mono';color:var(--muted-3);float:right;margin-top:2px}
.tl-menu-sep{height:1px;background:var(--line);margin:3px 4px}
.tl-menu-ease{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:4px 9px 6px;font:10px 'DM Mono';color:var(--muted);text-transform:uppercase;letter-spacing:.5px}
.tl-menu-ease select{background:var(--panel-3);border:1px solid var(--line-2);color:var(--ink-2);border-radius:5px;padding:3px 5px;font:11px 'DM Sans';max-width:110px}
/* Keyframe inspector section */
.key-time-wrap{display:flex;align-items:center;gap:6px}
.key-tools button{font-size:12px}
.playhead{top:0;bottom:0;height:auto;left:calc(88px + var(--t,1) * (100% - 88px) * var(--tl-zoom,1));z-index:2;pointer-events:none}
.tl-toggle{margin-left:0}
.timeline.collapsed .tl-ruler{display:none}
/* onion skin + motion path (inside #scene-root) */
#mf-onion{pointer-events:none}
.mf-mpath{fill:none;stroke:var(--mint);stroke-width:1.2;stroke-dasharray:5 4;opacity:.75}
.mf-mdot{fill:var(--mint);opacity:.8}
.mf-mdot.now{fill:var(--lav);stroke:var(--ink);stroke-width:.6;opacity:1}
.mf-ghost{mix-blend-mode:normal}
.kf-flag{color:var(--gold);font:9px 'DM Mono';margin-left:4px}
.tool-sep{width:1px;height:18px;background:var(--line);margin:0 5px}
/* per-layer timing window fields (delay/span) on track labels */
.tl-win{margin-left:6px;display:inline-flex;gap:2px;vertical-align:middle}
.tl-win input{width:30px;background:var(--panel);border:1px solid var(--line-2);color:var(--ink-2);border-radius:3px;padding:1px 2px;font:9px 'DM Mono';text-align:center}
.tl-win input:focus{border-color:var(--purple);outline:none}
.clip{position:absolute}
/* geometry attribute fields + stroke fx buttons in the shape inspector */
.geo-fields{display:flex;flex-wrap:wrap;gap:5px}
.geo-f{display:flex;align-items:center;gap:4px}
.geo-f span{font:9px 'DM Mono';color:var(--muted);min-width:14px;text-align:right}
.geo-f input{width:52px;background:var(--panel);border:1px solid var(--line-2);color:var(--ink-2);border-radius:4px;padding:3px 4px;font:10px 'DM Mono'}
.geo-f input:focus{border-color:var(--purple);outline:none}
.mini-btn{background:var(--panel2);border:1px solid var(--line);border-radius:5px;color:var(--muted);font-size:11px;padding:3px 8px}
.mini-btn:hover{border-color:var(--purple);color:var(--ink)}

/* preview mode — canvas behaves like the runtime */
#stage.previewing .sel-box,#stage.previewing .shape-box,#stage.previewing .multi-box,#stage.previewing .vtx-dots,#stage.previewing .vert-overlay{display:none}
/* click-draw sessions (⬠ pts / ∿ path): selection chrome hides so its
   handles can't swallow taps meant for vertices; a mint ring marks v0 —
   tap it to close the shape */
#stage.drawing-live .sel-box,#stage.drawing-live .shape-box{display:none}
#stage{touch-action:manipulation} /* no browser double-tap zoom — dbl-tap finishes */
.pts-close{fill:none;stroke:var(--mint);stroke-width:1.5px;r:5px;pointer-events:none}
#stage.previewing #scene-root>g{cursor:pointer}

/* shape-level selection (inspector shape chips) */
.shape-box{position:absolute;border:1.5px solid var(--gold);border-radius:3px;box-shadow:0 0 0 1px var(--gold-b),0 0 8px var(--gold-a);pointer-events:none;z-index:6}
.shape-box .h{position:absolute;width:9px;height:9px;background:var(--paper);border:1.5px solid var(--gold);border-radius:2px;pointer-events:auto}
.shape-box .h.tl{left:-5px;top:-5px;cursor:nwse-resize}
.shape-box .h.tr{right:-5px;top:-5px;cursor:nesw-resize}
.shape-box .h.bl{left:-5px;bottom:-5px;cursor:nesw-resize}
.shape-box .h.br{right:-5px;bottom:-5px;cursor:nwse-resize}
.shape-box .h.rot{left:50%;top:-26px;transform:translateX(-50%);cursor:grab;border-radius:50%;background:var(--gold)}.shape-box .h.rot::before{content:'';position:absolute;left:50%;top:100%;width:1.5px;height:12px;background:var(--gold);transform:translateX(-50%);pointer-events:none}.shape-box .h.rot::after{content:'';position:absolute;inset:-7px;border-radius:50%}
.shape-box .h.piv{border-color:var(--mint)}
.multi-boxes{position:absolute;inset:0;pointer-events:none;z-index:6}
.multi-box{position:absolute;border:1.5px dashed var(--gold);border-radius:3px;opacity:.8;pointer-events:none}

.shape-actions{display:flex;gap:6px;margin:6px 0}
.shape-actions button{flex:1;padding:4px 8px;font-size:11px;border:1px solid var(--line);background:var(--panel2);color:var(--text);border-radius:6px;cursor:pointer}
.shape-actions button:hover:not(:disabled){border-color:var(--purple);color:var(--on-sel)}
.shape-actions button:disabled{opacity:.4;cursor:default}
.chip.layer-chip{font-style:italic;border-style:dashed}
.chip.multi{border-color:var(--gold);color:var(--gold)}
#shapeDelete:disabled{opacity:.4;cursor:default}
.shape-head{display:flex;align-items:center;justify-content:space-between}
.shape-head .danger{background:none;border:1px solid var(--red-dim);color:var(--red);border-radius:5px;font-size:11px;padding:2px 6px;cursor:pointer}
.shape-head .danger:hover{background:var(--red-dim)}

/* ambient CSS editor */
.mf-css-field{width:100%;resize:vertical;background:var(--panel);border:1px solid var(--line-2);color:var(--ink-2);border-radius:6px;padding:7px 8px;font:10.5px 'DM Mono',monospace;line-height:1.45;outline:none}
.mf-css-field:focus{border-color:var(--purple)}
.css-hint{color:var(--muted-3);font:9px 'DM Mono';text-transform:none;letter-spacing:0;margin-bottom:6px}

/* guided tour overlay */
.tour-hole{position:fixed;z-index:900;border-radius:8px;pointer-events:none;box-shadow:0 0 0 9999px rgba(6,9,16,.68);transition:all .22s ease}
.tour-card{position:fixed;z-index:910;background:var(--panel-4);border:1px solid var(--line-2);border-radius:12px;padding:14px 16px 12px;box-shadow:0 16px 48px rgba(0,0,0,.6);color:var(--ink-2);font:12.5px 'DM Sans';line-height:1.55}
.tour-card h3{margin:0 0 6px;font-size:14px;color:var(--on-sel)}
.tour-card p{margin:0 0 12px}
.tour-card code,.tour-card kbd{background:var(--panel);border:1px solid var(--line-2);border-radius:4px;padding:0 4px;font:10.5px 'DM Mono',monospace;color:var(--lav)}
.tour-step-label{font-size:10px;color:var(--muted-2);letter-spacing:.6px;text-transform:uppercase;margin-bottom:4px}
.tour-foot{display:flex;align-items:center;gap:8px}
.tour-dots{display:flex;gap:4px;flex:1;justify-content:center;flex-wrap:wrap}
.tour-dots i{width:5px;height:5px;border-radius:50%;background:var(--line-2)}
.tour-dots i.on{background:var(--purple)}
.tour-prev,.tour-next{background:var(--panel-3);border:1px solid var(--line-2);border-radius:6px;color:var(--ink-2);font:11px 'DM Sans';padding:5px 10px;cursor:pointer}
.tour-next{background:var(--purple);border-color:var(--purple);color:var(--on-sel)}
.tour-prev:disabled{opacity:.35;cursor:default}
.tour-skip{background:none;border:none;color:var(--muted-2);font:11px 'DM Sans';cursor:pointer;padding:0}
.tour-skip:hover{color:var(--ink-2)}
/* element the step is pointing at — pulsing outline (HTML) + glow (SVG) */
.tour-hi{outline:2px solid var(--mint);outline-offset:2px;border-radius:3px;filter:drop-shadow(0 0 7px var(--mint));animation:tourHi 1.1s ease-in-out infinite}
@keyframes tourHi{50%{outline-offset:5px;filter:drop-shadow(0 0 2px var(--mint))}}

/* settings overlay */
.set-form{display:flex;flex-direction:column;gap:10px}
.set-row{display:grid;grid-template-columns:86px 1fr;align-items:center;gap:10px}
.set-row span{color:var(--muted);font-size:11px}
.set-row input,.set-row select{background:var(--panel);border:1px solid var(--line-2);color:var(--ink-2);border-radius:6px;padding:7px 9px;font:12px 'DM Sans';outline:none;width:100%}
.set-row input:focus,.set-row select:focus{border-color:var(--purple)}
.set-modelfield{display:flex;gap:8px}
.set-modelfield input{flex:1.5;min-width:0}
.set-modelfield select{flex:1;min-width:0}
.set-hint{color:var(--muted-3);font-size:10.5px;margin:2px 0 0;line-height:1.5}
.set-hint code{font-size:9.5px}
.set-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:4px}
#setTest{background:var(--panel-3);border:1px solid var(--line-2);border-radius:6px;color:var(--ink-2);font:11.5px 'DM Sans';padding:7px 12px;cursor:pointer}
#setTest:hover{border-color:var(--purple)}
#setTest:disabled,#setSave:disabled{opacity:.5;cursor:default}
.set-status{min-height:16px;font-size:11px;color:var(--muted)}
.set-status.ok{color:var(--mint-2)}
.set-status.bad{color:var(--red)}
/* local engine block — the in-browser model tier */
.set-local{display:flex;flex-direction:column;gap:10px}
.set-check{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ink-2);cursor:pointer}
.set-check input{width:auto}
.set-local-ctl{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.set-local-ctl button{background:var(--panel);border:1px solid var(--line-2);color:var(--ink-2);border-radius:6px;padding:5px 10px;font:11px 'DM Sans';cursor:pointer}
.set-local-ctl button:hover{border-color:var(--purple)}
.set-local-ctl button:disabled{opacity:.5;cursor:default}
.set-local-ctl progress{width:110px;height:8px}
#setLocalStat{color:var(--muted);font-size:10.5px}

/* AI state indicator — a quiet dot on the rail button, the fab, and the
   Asset Studio header pill. gold = not configured · lavender = local engine
   only (⚡/✨ work, Generate needs a provider) · mint = fully ready */
.ai-state{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--gold)}
.ai-state.on{background:var(--mint)}
.ai-state.part{background:var(--lav-2)}
.rail-item{position:relative}
.rail-item .ai-state{position:absolute;top:7px;right:7px;box-shadow:0 0 0 2px var(--chrome)}
.fab .ai-state{position:absolute;top:6px;right:9px}
.fab kbd,.ai-pill kbd{font:9px 'DM Mono';border:1px solid var(--line-p);border-radius:4px;padding:1px 4px;opacity:.75}
.ai-pill{display:inline-flex;align-items:center;gap:6px;font:11px 'DM Mono';letter-spacing:.3px;color:var(--muted);background:transparent;border:1px solid var(--line-2);border-radius:20px;padding:4px 10px;cursor:pointer}
.ai-pill:hover{border-color:var(--line-p);color:var(--ink-2)}
/* inspector mini-sliders — scrub next to the numeric field */
.prop-slider{flex:1;min-width:40px;accent-color:var(--purple-2);cursor:ew-resize}
.slider-wrap{display:flex;align-items:center;gap:7px;flex:1;justify-content:flex-end;min-width:0}
.slider-wrap .prop-slider{flex:1;max-width:110px}
.rot-wrap .prop-slider{flex:1;min-width:40px}
.rot-wrap input:not(.prop-slider){flex:0 0 54px}
/* panel titles carry the hidden attr for context gating — display:flex on
   .panel-title would otherwise override [hidden] and leave orphan headers */
.panel-title[hidden]{display:none}
/* micro-onboarding — reuses .tour-hole/.tour-card chrome; card chrome only */
.ob-card{z-index:920}
.ob-card .ob-foot{display:flex;align-items:center;justify-content:space-between;margin-top:4px}
.ob-dots{display:flex;gap:5px}
.ob-dots i{width:5px;height:5px;border-radius:50%;background:var(--line-3)}
.ob-dots i.on{background:var(--lav)}
.ob-btns{display:flex;gap:8px}
.ob-skip{background:none;border:0;color:var(--muted);font-size:11px;cursor:pointer}
.ob-skip:hover{color:var(--ink-2)}
.ob-next{background:var(--purple-2);border:0;border-radius:6px;color:#fff;font-size:11.5px;font-weight:600;padding:5px 11px;cursor:pointer}
/* "working locally" pill — centered in the stage chrome; truncates on narrow
   windows instead of colliding with the tools/HUD */
.local-pill,.file-chip{font:9px 'DM Mono';letter-spacing:.5px;text-transform:uppercase;color:var(--muted-2);
  border:1px solid var(--line);border-radius:10px;padding:1px 7px;pointer-events:auto;white-space:nowrap;
  max-width:100%;overflow:hidden;text-overflow:ellipsis}
/* the filename pill — same look, but it's the rename/save affordance */
.file-chip{background:transparent;cursor:pointer;color:var(--ink-dim,#c9c6dd);text-transform:none;font-size:10px}
.file-chip:hover{color:var(--mint);border-color:var(--mint)}
/* canvas/drag UX — editor chrome is an app surface, not a document: block
   native text selection (resize drags were highlighting panels/menus) and
   the SVG/element drag ghost (WebKit renders one on shape drags) */
body{user-select:none;-webkit-user-select:none;-moz-user-select:none}
input,textarea,select,[contenteditable="true"]{user-select:text;-webkit-user-select:text;-moz-user-select:text}
.artboard-stage,.artboard-stage svg,.artboard-stage svg *,.a-stage,.a-stage svg,.a-stage svg *{-webkit-user-drag:none}

/* guided empty states — esRow() inline in lists, guideHint() anchored card */
.es-row{padding:9px 10px;font-size:11.5px;line-height:1.5;color:var(--muted);display:flex;flex-direction:column;gap:7px}
.es-row kbd{font:9.5px 'DM Mono';border:1px solid var(--line-2);border-bottom-width:2px;border-radius:4px;padding:0 4px;color:var(--ink-3)}
.es-chips{display:flex;gap:6px;flex-wrap:wrap}
.es-chips button,.gh-chips button{background:var(--panel-3);border:1px solid var(--line-2);border-radius:12px;color:var(--ink-3);font-size:11px;padding:3px 10px;cursor:pointer}
.es-chips button:hover,.gh-chips button:hover{border-color:var(--purple);color:var(--ink)}
.ghint{position:fixed;z-index:960;max-width:264px;background:var(--panel);border:1px solid var(--line-2);border-radius:12px;padding:13px 15px;box-shadow:0 18px 50px #0009}
.ghint b{color:var(--ink);font-size:13px}
.ghint p{margin:5px 0 0;color:var(--muted);font-size:12px;line-height:1.55}
.ghint p kbd{font:9.5px 'DM Mono';border:1px solid var(--line-2);border-bottom-width:2px;border-radius:4px;padding:0 4px;color:var(--ink-3)}
.gh-chips{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap}
.gh-chips button.on{background:var(--purple-2);border-color:var(--purple-2);color:#fff;font-weight:600}

/* solid-surface colliders — Physics card role row + canvas/layer markers */
.phys-solid{display:flex;align-items:center;gap:7px;font:10px 'DM Mono';color:var(--ink-2);cursor:pointer;margin-bottom:8px;user-select:none}
.phys-solid input{accent-color:var(--mint);margin:0}
.phys-solid>span{text-transform:uppercase;letter-spacing:.4px}
.phys-solid-note{color:var(--muted);font-style:normal}
/* ● Record — labeled record mode in the transport. The cluster wraps the pill
   with the posed action's name + ✕ (disarm / back-to-idle): solid red pill +
   red stage edge while recording, grey "edits won't save" while posed-but-
   disarmed, dimmed outline button when idle. */
.rec-cluster{display:inline-flex;align-items:center;gap:4px;border:1px solid transparent;border-radius:10px;padding:1px 4px 1px 1px;transition:border-color .2s,box-shadow .2s}
.rec-cluster.scratch{border-color:var(--line-2)}
.rec-cluster.recording{border-color:var(--red-2);box-shadow:0 0 10px var(--red-2a)}
.rec-target{font:600 10px 'DM Mono';color:var(--muted);white-space:nowrap;max-width:180px;overflow:hidden;text-overflow:ellipsis}
.rec-cluster.recording .rec-target{color:var(--red-2)}
.rec-cluster.scratch .rec-target{color:var(--ink-3)}
#recBtn{font-weight:700;white-space:nowrap}
#recBtn.on{color:#fff;border-color:var(--red-2);background:var(--red-2);animation:recPulse 1.2s ease-in-out infinite}
#recBtn.idle{opacity:.45}
#recBtn:disabled{opacity:.4}
.rec-x{font-size:10px;padding:2px 4px}
@keyframes recPulse{0%,100%{box-shadow:0 0 0 0 var(--red-2a)}50%{box-shadow:0 0 0 4px transparent}}
#stage.recording{box-shadow:inset 0 0 0 2px var(--red-2);border-radius:6px}
#stage.recording .artboard{box-shadow:0 0 0 1px var(--red-2a),0 2px 20px rgba(0,0,0,.10)}
/* phys "also recorded in" chips — jump to an action holding this recipe */
.phys-uses{display:flex;flex-wrap:wrap;gap:4px;margin-top:7px}
.phys-uses .pu-chip{font:9px 'DM Mono';color:var(--mint);background:var(--mint-a,transparent);border:1px solid var(--mint-2,var(--line-2));border-radius:8px;padding:2px 6px;cursor:pointer}
.phys-uses .pu-chip:hover{background:var(--mint-2)}
/* "recipes on this layer" context row in the physics card */
.phys-uses{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px;font:10px 'DM Mono';color:var(--muted)}
.phys-uses b{color:var(--ink-3);font-weight:400}
.phys-uses .pu-chip{background:var(--panel-3);border:1px solid var(--line-2);border-radius:5px;color:var(--lav);padding:1px 6px;cursor:pointer;font:10px 'DM Mono'}
.phys-uses .pu-chip:hover{border-color:var(--lav)}
#rocketSvg [data-mf-collider]{filter:drop-shadow(0 0 3px var(--mint))}
.sol-badge{font:9px 'DM Mono';color:var(--mint);margin-left:5px}
/* Sidekick — the single AI surface, floating over the stage (bottom-center).
   .pos = dragged to explicit left/top; .open expands the drawer (suggestion
   chips, recents, command log). The old separate dock/fab is gone — one
   input routes internally. */
.sidekick{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);z-index:45;display:flex;flex-direction:column;gap:8px;padding:8px 10px;background:var(--panel-g2);border:1px solid var(--line);border-radius:18px;box-shadow:0 14px 40px #000a;backdrop-filter:blur(10px)}
/* phone widths — the floating bar and menu flyouts can't run off-screen */
@media(max-width:600px){
  .sidekick{max-width:calc(100vw - 96px)}
  .menu-subwrap>.menu-sub{position:static;margin:2px 0 4px 14px;box-shadow:none;border-left:1px solid var(--line-2);border-radius:0 8px 8px 0}
}
.sidekick.pos{transform:none;bottom:auto}
.sk-bar{display:flex;align-items:center;gap:6px;position:relative}
/* inline run-undo — each scene-changing reply row carries ↶ undo, which
   reverts every history push that run made (multi-step runs roll back whole) */
.sk-undo{flex:none;border:1px solid var(--line-2);background:none;color:var(--lav);font-size:10.5px;font-weight:600;border-radius:7px;padding:2px 7px;cursor:pointer;margin-left:6px}
.sk-undo:hover{border-color:var(--line-p);background:var(--panel2)}
.sk-undo:disabled{color:var(--muted);border-color:var(--line);cursor:default;background:none}
.sk-field{position:relative;flex:1;display:flex;min-width:0}
.sidekick #skInput{flex:1;width:min(380px,46vw);border:1px solid var(--line);background:var(--panel2);color:var(--ink);font-size:12.5px;outline:none;border-radius:12px;padding:8px 92px 8px 12px}
.sidekick #skInput:focus{border-color:var(--purple)}
.sidekick #skInput::placeholder{color:var(--muted)}
.sidekick #skInput:disabled{opacity:.45}
.sidekick #skGo{position:absolute;right:5px;top:50%;transform:translateY(-50%);border:0;background:var(--purple);color:var(--on-sel);border-radius:9px;width:26px;height:26px;font-size:14px;display:grid;place-items:center;transition:background .15s}
.sidekick #skGo:hover{background:var(--purple-2)}
.sidekick #skGo:disabled{opacity:.6}
.sidekick #skGo.stop{background:var(--red-2a);color:var(--red-2);animation:sk-pulse .9s ease-in-out infinite}
.sk-icon{position:absolute;right:34px;top:50%;transform:translateY(-50%);border:0;background:transparent;color:var(--muted);border-radius:7px;width:24px;height:24px;font-size:12px;display:grid;place-items:center;transition:color .15s}
.sk-icon:hover{color:var(--lav)}
.sk-icon:disabled{opacity:.6}
.sk-icon.stop{color:var(--red-2);animation:sk-pulse .9s ease-in-out infinite}
/* single ✦ AI icon before Enhance — color-coded by the tier answering;
   tap → .sk-ai-pop pops up to pick the routing mode or open settings */
#skAi{right:60px;font-size:13px}
#skAi.local{color:var(--mint)}
#skAi.provider{color:var(--lav)}
#skAi.setup{color:var(--orange,#ff9a3d)}
.sidekick.busy #skAi{animation:sk-pulse 1.2s ease-in-out infinite}
.sk-ai-pop{position:absolute;bottom:calc(100% + 10px);right:0;min-width:238px;background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:7px;box-shadow:0 14px 40px #000a;z-index:35;display:flex;flex-direction:column;gap:2px}
.sk-ai-pop[hidden]{display:none}
.sk-ai-status{font:10px 'DM Mono';color:var(--muted);padding:3px 8px 7px;border-bottom:1px solid var(--line);margin-bottom:4px}
.sk-ai-pop button[data-mode]{display:flex;flex-direction:column;align-items:flex-start;gap:2px;background:none;border:1px solid transparent;border-radius:8px;padding:6px 9px;text-align:left;color:var(--ink-3);cursor:pointer}
.sk-ai-pop button[data-mode]:hover{background:var(--sel-2)}
.sk-ai-pop button[data-mode].on{border-color:var(--line-p);background:var(--sel)}
.sk-ai-pop button[data-mode] b{font-size:12px;font-weight:600;color:var(--ink)}
.sk-ai-pop button[data-mode].on b::after{content:' ✓';color:var(--mint)}
.sk-ai-pop button[data-mode] span{font-size:10px;color:var(--muted);line-height:1.4}
.sk-ai-foot{display:flex;gap:6px;border-top:1px solid var(--line);margin-top:5px;padding-top:7px}
.sk-ai-foot button{flex:1;background:none;border:1px solid var(--line-2);border-radius:7px;color:var(--muted);font-size:10.5px;padding:4px 6px;cursor:pointer}
.sk-ai-foot button:hover{color:var(--lav);border-color:var(--line-p)}
.sk-status{flex:none;font:10px 'DM Mono';color:var(--muted);white-space:nowrap}
.sk-status.working{color:var(--lav);animation:sk-pulse 1s ease-in-out infinite}
.sk-status.ok{color:var(--mint)}
.sk-status.err{color:var(--red-2)}
.sk-status.stopped{color:var(--orange,#ff9a3d)}
@keyframes sk-pulse{0%,100%{opacity:1}50%{opacity:.35}}
.sk-grip{position:absolute;top:0;left:14px;transform:translateY(-50%);z-index:2;color:var(--muted);cursor:grab;font-size:10px;padding:2px 8px;user-select:none;touch-action:none;font-style:normal;border:1px solid var(--line);background:var(--panel-g2);border-radius:10px;box-shadow:0 2px 8px #0006}
.sk-grip:hover{color:var(--ink);border-color:var(--line-p)}
.sk-grip:active{cursor:grabbing}

.sk-toggle{position:absolute;top:0;right:14px;transform:translateY(-50%);z-index:2;border:1px solid var(--line);background:var(--panel-g2);color:var(--muted);border-radius:10px;min-width:26px;height:16px;font-size:10px;display:grid;place-items:center;box-shadow:0 2px 8px #0006}
.sk-toggle:hover{color:var(--ink);border-color:var(--line-p)}
.sk-badge{flex:none;font:600 10px 'DM Mono';color:var(--mint);background:var(--mint-a);border:1px solid var(--mint-a);border-radius:12px;padding:3px 7px;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}
.sidekick.busy #skInput{border-color:var(--line-p);box-shadow:0 0 0 2px var(--sel),0 0 14px -2px var(--lav);animation:sk-shimmer 1.4s ease-in-out infinite}
@keyframes sk-shimmer{50%{box-shadow:0 0 0 2px var(--sel),0 0 20px -2px var(--lav)}}
.sk-open{display:none;flex-direction:column;gap:8px;width:min(460px,64vw);padding:4px}
.sidekick.open .sk-open{display:flex}
.sk-sect{display:flex;flex-direction:column;gap:4px}
.sk-sect>b{font:600 9px 'DM Mono';letter-spacing:.7px;text-transform:uppercase;color:var(--muted);padding:0 2px}
.sk-sect[hidden]{display:none}
.sk-open .suggestions{display:flex}
.sk-open .suggestions button{padding:3px 8px}
/* autosuggest strip — plain text hints above the input while it's empty */
.sk-suggest{display:flex;flex-wrap:wrap;align-items:baseline;gap:3px 12px;padding:0 6px}
.sk-suggest[hidden]{display:none}
.sk-suggest .sk-try{font:9px 'DM Mono';letter-spacing:.6px;color:var(--muted)}
.sk-suggest button{background:none;border:0;border-radius:0;padding:1px 0;color:var(--muted);font-size:11px;cursor:pointer}
.sk-suggest button:hover{background:none;color:var(--lav);text-decoration:underline;text-underline-offset:3px}
.sk-nope{display:flex;align-items:center;gap:10px;font-size:11.5px;color:var(--ink-3);background:var(--panel2);border:1px solid var(--line-2);border-radius:8px;padding:6px 10px}
.sk-nope[hidden]{display:none}
.sk-nope button{background:none;border:1px solid var(--line-p);border-radius:6px;color:var(--lav);font-size:11px;padding:3px 8px;white-space:nowrap}
/* chat transcript — your command bubbles right, Sidekick's result replies left */
.sk-log{display:flex;flex-direction:column;gap:10px;max-height:190px;overflow-y:auto;padding:2px 2px 4px}
.sk-row{display:flex;flex-direction:column;gap:4px;font-size:11.5px}
.sk-you{align-self:flex-end;max-width:82%;background:var(--sel);border:1px solid var(--line-p);color:var(--ink);border-radius:12px 12px 4px 12px;padding:5px 10px;cursor:pointer;word-break:break-word}
.sk-you:hover{border-color:var(--purple)}
.sk-reply{align-self:flex-start;display:flex;align-items:baseline;gap:6px;max-width:94%;font-style:normal;color:var(--muted);font-size:11px}
.sk-reply>b{flex:none}
.sk-row.ok .sk-reply>b{color:var(--mint)}
.sk-row.err .sk-reply>b{color:var(--red-2)}
.sk-reply>span{overflow:hidden;text-overflow:ellipsis}
.sk-reply em{flex:none;font:9px 'DM Mono';font-style:normal;color:var(--muted);border:1px solid var(--line);border-radius:8px;padding:1px 5px}
.sk-reply em:empty{display:none}
.sk-typing{display:inline-flex;gap:3px;padding:2px 0}
.sk-typing i{width:4px;height:4px;border-radius:50%;background:var(--lav);animation:sk-pulse 1.1s ease-in-out infinite}
.sk-typing i:nth-child(2){animation-delay:.15s}
.sk-typing i:nth-child(3){animation-delay:.3s}
.sk-empty{color:var(--muted);font-size:11px;padding:4px 6px}
#skHistSect>b{cursor:pointer}
#skHistSect>b:hover{color:var(--lav)}

/* drag-resize handles — panel edges in every studio (persisted via
   mf.layout prefs; editors attach their own pointer logic) */
.rz{position:absolute;z-index:14;background:transparent;transition:background .15s;touch-action:none;user-select:none}
.rz:hover,.rz.drag{background:var(--purple-a)}
.rz-r{top:0;bottom:0;right:-3px;width:7px;cursor:col-resize}
.rz-l{top:0;bottom:0;left:-3px;width:7px;cursor:col-resize}
.rz-t{left:0;right:0;top:0;height:9px;cursor:row-resize}