/* Sprite Puppeteer styles. Tokens first (light, then dark), then layout and components. */
:root{
  --bg:#E3E5E8; --panel:#F3F4F6; --panel-2:#E8EAED; --ink:#1B1E23; --muted:#5C636E; --faint:#8A919B;
  --line:#C9CED5; --line-2:#DADDE2;
  --accent:#B0580F; --accent-ink:#FFFFFF; --accent-soft:rgba(176,88,15,.11); --accent-line:rgba(176,88,15,.45);
  --rune:#7C5CC9; --stage-frame:#15171B; --stage-ink:#C9CCD2;
  --ok:#2F7D4F; --warn:#A5631A; --danger:#B3261E;
  --shadow:0 1px 0 rgba(0,0,0,.04),0 6px 18px -10px rgba(20,24,30,.25);
  --f-display:"Silkscreen","Courier New",monospace;
  --f-body:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#101216; --panel:#171A1F; --panel-2:#1E2228; --ink:#E2E4E8; --muted:#8C939E; --faint:#666D78;
    --line:#2A2F37; --line-2:#23272E;
    --accent:#E5893A; --accent-ink:#1A1105; --accent-soft:rgba(229,137,58,.13); --accent-line:rgba(229,137,58,.5);
    --rune:#A68BEA; --stage-frame:#0B0C0F; --stage-ink:#AEB3BB;
    --ok:#5FB884; --warn:#E0A052; --danger:#F2786F;
    --shadow:0 1px 0 rgba(0,0,0,.3),0 8px 22px -12px rgba(0,0,0,.7);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#101216; --panel:#171A1F; --panel-2:#1E2228; --ink:#E2E4E8; --muted:#8C939E; --faint:#666D78;
  --line:#2A2F37; --line-2:#23272E;
  --accent:#E5893A; --accent-ink:#1A1105; --accent-soft:rgba(229,137,58,.13); --accent-line:rgba(229,137,58,.5);
  --rune:#A68BEA; --stage-frame:#0B0C0F; --stage-ink:#AEB3BB;
  --ok:#5FB884; --warn:#E0A052; --danger:#F2786F;
  --shadow:0 1px 0 rgba(0,0,0,.3),0 8px 22px -12px rgba(0,0,0,.7);
}
html,body{height:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:14px;line-height:1.45;-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}
button,select,input{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

[hidden]{display:none!important}
.shell{display:flex;flex-direction:column;height:100%;padding-inline:16px;padding-block:0 16px}
.bar{display:flex;align-items:center;gap:20px;flex-wrap:wrap;padding-block:12px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--f-display);font-size:17px;letter-spacing:.02em;white-space:nowrap}
.brand canvas{width:24px;height:24px;image-rendering:pixelated}
.modes{display:flex;gap:2px;background:var(--panel-2);border:1px solid var(--line);border-radius:8px;padding:3px}
.modes button{border:0;background:transparent;padding:6px 14px;border-radius:5px;cursor:pointer;font-weight:500;color:var(--muted)}
.modes button[aria-selected="true"]{background:var(--panel);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.12)}
.hist{display:flex;gap:6px}
.hist .tbtn{width:32px;height:32px}
.hist .tbtn:disabled{opacity:.4;cursor:default}
.meta{margin-left:auto;font-family:var(--f-mono);font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}

.app{flex:1;display:grid;grid-template-columns:minmax(0,1fr) 340px;grid-template-rows:minmax(0,1fr);gap:16px;min-height:0}
.stage-col{display:flex;flex-direction:column;gap:10px;min-width:0;min-height:0}
.stage{position:relative;flex:1;min-height:420px;background:var(--stage-frame);border-radius:10px;overflow:hidden;touch-action:none}
.stage canvas#view{position:absolute;image-rendering:pixelated;image-rendering:crisp-edges}
.stage.rigging canvas#view{cursor:crosshair}
.hud{position:absolute;left:12px;top:12px;max-width:calc(100% - 150px);display:flex;gap:6px;flex-wrap:wrap;pointer-events:none}
.chip{font-family:var(--f-mono);font-size:11px;color:var(--stage-ink);background:rgba(10,11,14,.72);border:1px solid rgba(255,255,255,.08);padding:4px 8px;border-radius:5px;backdrop-filter:blur(4px)}
.chip b{color:#fff;font-weight:500}
.chip.hot{color:#FFD9B5;border-color:rgba(229,137,58,.45)}
.drop{position:absolute;inset:10px;border:2px dashed rgba(229,137,58,.8);border-radius:8px;display:grid;place-items:center;color:#FFD9B5;font-family:var(--f-display);font-size:14px;background:rgba(10,11,14,.6);pointer-events:none}
.toast{position:absolute;right:12px;bottom:12px;max-width:min(360px,calc(100% - 24px));font-size:13px;background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:8px 12px;box-shadow:var(--shadow)}

.transport{display:flex;align-items:center;gap:8px;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:8px 10px}
.tbtn{width:34px;height:34px;flex:none;display:grid;place-items:center;border:1px solid var(--line);background:var(--panel-2);border-radius:7px;cursor:pointer}
.tbtn:hover{border-color:var(--faint)}
.tbtn svg{width:14px;height:14px;fill:currentColor}
.timeline{position:relative;flex:1;height:34px;min-width:0;cursor:pointer;touch-action:none}
.timeline canvas{position:absolute;inset:0;width:100%;height:100%}
.fcount{font-family:var(--f-mono);font-size:12px;color:var(--muted);min-width:78px;text-align:right;font-variant-numeric:tabular-nums}

.pad{display:none;gap:8px;flex-wrap:wrap;justify-content:center}
.pad button{min-width:64px;height:44px;padding:0 12px;border:1px solid var(--line);border-bottom-width:3px;background:var(--panel);border-radius:8px;font-family:var(--f-display);font-size:12px;cursor:pointer;user-select:none;-webkit-user-select:none;touch-action:none}
.pad button.on{background:var(--accent-soft);border-color:var(--accent-line)}
body[data-mode="play"] .pad{display:flex}
body[data-mode="play"] .transport,body[data-mode="rig"] .transport{display:none}

.inspector{display:flex;flex-direction:column;gap:12px;min-height:0;overflow:auto;padding-bottom:4px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:14px;display:flex;flex-direction:column;gap:12px}
.card h2{margin:0;font-family:var(--f-display);font-weight:400;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;justify-content:space-between;gap:8px}
.card h2 small{font-family:var(--f-mono);font-size:11px;letter-spacing:0;text-transform:none;color:var(--faint)}
.hint{margin:0;color:var(--muted);font-size:13px;text-wrap:pretty}
.panel[hidden]{display:none!important}
.panel{display:flex;flex-direction:column;gap:12px}

.anims{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.agroup{grid-column:1/-1;font-family:var(--f-display);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);padding-top:6px}
.agroup:first-child{padding-top:0}
.anim{display:flex;align-items:center;gap:8px;text-align:left;padding:8px 9px;border:1px solid var(--line);background:var(--panel-2);border-radius:7px;cursor:pointer;min-width:0}
.anim:hover{border-color:var(--faint)}
.anim .nm{flex:1;min-width:0;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.anim .dur{font-family:var(--f-mono);font-size:10px;color:var(--faint)}
.anim[aria-pressed="true"]{border-color:var(--accent-line);background:var(--accent-soft)}
.anim[aria-pressed="true"] .nm{color:var(--accent)}
.anim .vc{font-family:var(--f-mono);font-size:10px;color:var(--faint);display:flex;align-items:center;gap:2px}
.anim .vc svg{width:10px;height:10px;fill:currentColor}
.stylebar{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:9px 10px}
.sthead{display:flex;align-items:baseline;gap:10px;min-width:0}
.sl{font-family:var(--f-display);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);white-space:nowrap}
.sl b{color:var(--muted);font-weight:400}
.sdesc{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.feel{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);grid-row:1/3;grid-column:2;align-self:end}
.feel select{padding:5px 8px;font-size:12.5px}
.stylebar .styles{grid-column:1}
body[data-mode="play"] .stylebar,body[data-mode="rig"] .stylebar{display:none}
@media (max-width: 640px){.stylebar{grid-template-columns:minmax(0,1fr)}.feel{grid-row:auto;grid-column:1}.sdesc{white-space:normal}}
.styles{display:flex;flex-wrap:wrap;gap:6px}
.sty{padding:4px 10px;border:1px solid var(--line);background:var(--panel-2);border-radius:999px;font-size:12.5px;cursor:pointer;color:var(--ink)}
.sty:hover{border-color:var(--faint)}
.sty[aria-checked="true"]{border-color:var(--accent-line);background:var(--accent-soft);color:var(--accent);font-weight:600}
.kbd{font-family:var(--f-mono);font-size:10.5px;line-height:1;min-width:20px;text-align:center;padding:3px 5px 2px;border:1px solid var(--line);border-bottom-width:2px;border-radius:4px;background:var(--panel);color:var(--muted)}

.row{display:flex;align-items:center;gap:10px}
.row label,.lbl{font-size:13px;color:var(--ink)}
.slider{display:grid;grid-template-columns:104px 1fr 52px;align-items:center;gap:10px}
.slider output{font-family:var(--f-mono);font-size:12px;color:var(--muted);text-align:right;font-variant-numeric:tabular-nums}
input[type=range]{width:100%;accent-color:var(--accent);height:18px}
.toggles{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px}
.check{display:flex;align-items:center;gap:8px;font-size:13px;cursor:pointer}
.check input{accent-color:var(--accent);width:15px;height:15px;margin:0}
.seg{display:flex;border:1px solid var(--line);border-radius:7px;overflow:hidden;background:var(--panel-2)}
.seg button{flex:1;border:0;background:transparent;padding:6px 8px;cursor:pointer;font-size:12.5px;color:var(--muted);white-space:nowrap}
.seg button+button{border-left:1px solid var(--line)}
.seg button[aria-pressed="true"]{background:var(--panel);color:var(--ink);font-weight:600}
select{background:var(--panel-2);border:1px solid var(--line);border-radius:7px;padding:6px 8px;font-size:13px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.field{display:flex;flex-direction:column;gap:5px;min-width:0}
.field>span{font-size:12px;color:var(--muted)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:9px 12px;border-radius:8px;border:1px solid var(--line);background:var(--panel-2);cursor:pointer;font-weight:500;font-size:13px;white-space:nowrap}
.btn:hover{border-color:var(--faint)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.primary:hover{filter:brightness(1.06)}
.btn:disabled{opacity:.55;cursor:progress}
.btns{display:flex;gap:8px;flex-wrap:wrap}
.btns .btn{flex:1}
.note{font-family:var(--f-mono);font-size:11.5px;color:var(--muted);min-height:1em;overflow-wrap:anywhere}
.legend{display:grid;grid-template-columns:1fr 1fr;gap:4px 10px}
.legend span{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted)}
.legend i{width:10px;height:10px;border-radius:2px;flex:none}
.keys{display:grid;grid-template-columns:auto 1fr;gap:7px 12px;align-items:center;font-size:13px}
.keys .ks{display:flex;gap:4px;align-items:center;flex-wrap:wrap}
.keys .ks small{font-size:11px;color:var(--faint)}
.layers{display:flex;flex-direction:column;gap:6px}
.lrow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px;align-items:center;padding:8px;border:1px solid var(--line);border-radius:7px;background:var(--panel-2)}
.lrow .ln{font-family:var(--f-mono);font-size:11.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lrow .lsel{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px}
.lrow select{padding:4px 6px;font-size:12px;min-width:0}
.lrow .x{border:0;background:transparent;cursor:pointer;color:var(--muted);font-size:15px;padding:0 4px}
.lrow .lbtns{display:flex;gap:2px;align-items:center}
.lrow.off .ln{color:var(--faint);text-decoration:line-through}
.lrow [data-act="vis"]{font-size:12px}
.stats{display:flex;gap:16px;font-family:var(--f-mono);font-size:12px;color:var(--muted)}
.stats b{color:var(--ink);font-weight:500}
.swatch{width:22px;height:22px;border-radius:5px;border:1px solid var(--line);flex:none}
input[type=file]{display:none}

@media (max-width: 900px){
  .shell{height:auto;min-height:100%}
  .app{grid-template-columns:minmax(0,1fr);grid-template-rows:auto}
  .stage{flex:none;min-height:0;aspect-ratio:var(--ar,1)}
  .inspector{overflow:visible}
  .meta{margin-left:0}
}
@media (prefers-reduced-motion: reduce){
  *{scroll-behavior:auto}
}
/* edit tab */
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip2{display:inline-flex;align-items:center;gap:4px;padding:3px 4px 3px 9px;border:1px solid var(--line);background:var(--panel-2);border-radius:999px;font-family:var(--f-mono);font-size:11.5px;color:var(--ink);cursor:pointer}
.chip2.solo{padding-right:9px}
.chip2[aria-current="true"]{border-color:var(--accent-line);background:var(--accent-soft);color:var(--accent)}
.chip2 .x{border:0;background:transparent;color:var(--muted);cursor:pointer;font-size:12px;padding:0 3px;line-height:1}
.chip2 .x:hover{color:var(--ink)}
.evrow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}
.btn.danger{color:var(--danger);border-color:var(--line)}
input[type=text],textarea{background:var(--panel-2);border:1px solid var(--line);border-radius:7px;padding:7px 9px;font:inherit;font-size:13px;color:var(--ink);width:100%;box-sizing:border-box}
textarea{resize:vertical;min-height:64px}
.chans summary{cursor:pointer;font-size:13px;color:var(--muted)}
.chans[open] summary{margin-bottom:8px}
.chans .slider{grid-template-columns:128px 1fr 52px;margin-bottom:4px}
.chans .slider label{font-size:11.5px;color:var(--muted);line-height:1.25}
body[data-mode="edit"] .stylebar{display:none}
.swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(42px,1fr));gap:6px}
.sw{display:flex;flex-direction:column;gap:3px}
.sw0{height:8px;border-radius:3px;border:1px solid var(--line)}
.sw input[type=color]{width:100%;height:28px;border:1px solid var(--line);border-radius:6px;padding:0 2px;background:var(--panel-2);cursor:pointer}
.sw input[type=color]:disabled{opacity:.45;cursor:default}

.pixrow{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.pixrow input[type=color]{width:44px;height:30px;border:1px solid var(--line);border-radius:6px;padding:0 2px;background:var(--panel-2);cursor:pointer}
.pixpal{display:flex;flex-wrap:wrap;gap:4px;flex:1;min-width:0}
.pixsw{width:20px;height:20px;border-radius:4px;border:1px solid var(--line);cursor:pointer;padding:0}
.pixsw:hover{outline:2px solid var(--accent-line);outline-offset:1px}

/* projects */
.pbtn{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 11px;border:1px solid var(--line);background:var(--panel-2);border-radius:7px;cursor:pointer;color:var(--ink);font-size:12.5px;max-width:200px}
.pbtn:hover{border-color:var(--faint)}
.pbtn svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.4;flex:none}
.pbtn span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dlg{border:1px solid var(--line);border-radius:12px;background:var(--panel);color:var(--ink);padding:18px;width:min(640px,calc(100vw - 32px));max-height:calc(100vh - 48px)}
.dlg::backdrop{background:rgba(10,10,14,.5)}
.dlg-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px}
.dlg-head h2{margin:0;font-size:15px}
.projlist{display:flex;flex-direction:column;gap:8px;margin:12px 0;max-height:52vh;overflow:auto}
.pcard{display:grid;grid-template-columns:56px 1fr auto;gap:12px;align-items:center;padding:8px;border:1px solid var(--line);border-radius:9px;background:var(--panel-2)}
.pcard.cur{border-color:var(--accent-line);background:var(--accent-soft)}
.pcard img{width:56px;height:56px;object-fit:contain;image-rendering:pixelated;background:var(--panel);border-radius:6px}
.pinfo{min-width:0;display:flex;flex-direction:column;gap:3px}
.pinfo input{font:inherit;font-weight:600;border:1px solid transparent;background:transparent;color:var(--ink);padding:3px 5px;border-radius:5px;width:100%}
.pinfo input:hover,.pinfo input:focus{border-color:var(--line);background:var(--panel)}
.pinfo small{color:var(--muted);font-size:11.5px;padding-left:6px}
.pbtns{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.pbtns .btn{padding:6px 10px;font-size:12px}
@media (max-width:560px){.pcard{grid-template-columns:48px 1fr}.pbtns{grid-column:1/-1;justify-content:flex-start}}

/* pre-rendered sprite-sheet characters: rig and paint tools step aside */
.flip-only{display:none}
.itabs{position:sticky;top:0;z-index:3;flex:none;display:flex;gap:2px;background:var(--panel-2);border:1px solid var(--line);border-radius:9px;padding:3px;box-shadow:0 8px 12px -10px rgba(0,0,0,.35)}
.itabs[hidden]{display:none}
.itabs button{flex:1 1 auto;min-width:0;border:0;background:transparent;padding:7px 6px;border-radius:6px;cursor:pointer;font-weight:500;font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.itabs button:hover{color:var(--ink)}
.itabs button[aria-selected="true"]{background:var(--panel);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.12)}
.card.itab-off{display:none!important}
.zoombar{position:absolute;right:12px;top:12px;z-index:2;display:flex;align-items:center;gap:2px;padding:3px;background:rgba(14,15,19,.74);border:1px solid rgba(255,255,255,.12);border-radius:8px}
.zoombar button{height:26px;min-width:26px;display:grid;place-items:center;border:0;border-radius:5px;background:transparent;color:#E8E6EE;cursor:pointer;font-family:var(--f-mono);font-size:11.5px;padding:0 6px;font-variant-numeric:tabular-nums}
.zoombar button:hover:not(:disabled){background:rgba(255,255,255,.14)}
.zoombar button:disabled{opacity:.35;cursor:default}
.zoombar svg{width:12px;height:12px;fill:currentColor}
.zoombar .zl{min-width:50px}
.stage.pannable canvas#view{cursor:grab}
.stage.panning canvas#view{cursor:grabbing}
.chips.compass{display:grid;grid-template-columns:repeat(3,max-content);gap:5px}
.chips.compass .chip2{justify-content:flex-start}
body[data-flip="1"] .flip-only{display:block}
body[data-flip="1"] #flipBox{display:grid;gap:10px;margin-bottom:12px}
body[data-flip="1"] .rig-only{display:none!important}