/* Task-oriented shell around the existing animation controls. */
body.studio-ready {
  --studio-bg:#101b1e; --studio-panel:#172529; --studio-line:#34494d;
  --studio-muted:#a5b9ba; --studio-accent:#e5c18a; --studio-focus:#91d7cd;
  height:100dvh; display:flex; flex-direction:column; overflow:hidden;
  background:var(--studio-bg); color:#ecf1e9; font:14px/1.45 'Segoe UI',system-ui,sans-serif;
}
.studio-ready [hidden] { display:none !important; }
.studio-ready * { scrollbar-width:thin; scrollbar-color:#52666a transparent; }
.studio-ready button,.studio-ready select,.studio-ready input { font:inherit; }
.studio-ready button,.studio-ready select,.studio-ready input[type=number] {
  border:1px solid var(--studio-line); border-radius:7px; background:#203237; color:inherit;
  min-height:36px; padding:7px 10px;
}
.studio-ready button { transition:background .12s,border-color .12s; }
.studio-ready button:hover { background:#2c454a; border-color:#718983; }
.studio-ready button:disabled { opacity:.42; cursor:default; }
.studio-ready :is(button,input,select,summary):focus-visible { outline:2px solid var(--studio-focus); outline-offset:3px; }
.studio-ready label { font-size:13px; margin:10px 0; color:#c1d0ce; }
.studio-ready label input,.studio-ready label select { color:#ecf1e9; }
.studio-ready select { min-width:0; width:100%; text-overflow:ellipsis; }
.studio-ready input[type=range] { padding:0; accent-color:var(--studio-focus); height:24px; cursor:pointer; min-width:0; }
.studio-ready input[type=checkbox] { accent-color:var(--studio-focus); margin-right:7px; }
.studio-ready h2,.studio-ready h3,.studio-ready p { margin-top:0; }
.studio-ready p { color:var(--studio-muted); font-size:12px; line-height:1.5; }
.studio-ready h3 { font-size:15px; font-weight:600; margin-bottom:6px; color:#eef3e9; }
.studio-ready > header {
  flex:none; display:grid; grid-template-columns:auto 1fr auto auto; align-items:center;
  gap:8px 20px; padding:14px 22px 10px; background:#111d20; border-bottom:1px solid var(--studio-line);
}
.studio-brand { display:flex; align-items:center; gap:14px; }
.studio-wordmark { font-size:12px; font-weight:700; letter-spacing:.13em; color:var(--studio-accent); }
.studio-brand strong { font-size:16px; font-weight:600; }
.studio-links { display:flex; gap:14px; flex-wrap:wrap; }
.studio-links a { font-size:12px; color:var(--studio-muted); text-underline-offset:3px; }
.studio-history { display:flex; gap:5px; }
.studio-history button { font-size:12px; background:transparent; }
.studio-ready .studio-save { background:var(--studio-accent); color:#1e2823; border-color:var(--studio-accent); font-weight:650; padding-inline:18px; }
.studio-ready .studio-save:hover { background:#f0d4a7; }
.studio-statusbar { grid-column:1/-1; min-height:20px; display:flex; justify-content:space-between; gap:12px; color:var(--studio-muted); font-size:11px; }
.studio-ready #status { font-size:12px; color:#a6d6c5; }
.studio-ready #game-connection { font-size:11px; }
.studio-ready main { flex:1; min-height:0; height:auto; grid-template-columns:222px minmax(300px,1fr) 366px; overflow:hidden; }
.studio-ready main > aside { max-height:none; padding:18px; min-width:0; background:var(--studio-panel); overflow:auto; }
.studio-ready .studio-library { border-right:1px solid var(--studio-line); }
.studio-ready .studio-inspector { border-left:1px solid var(--studio-line); border-right:0; display:flex; flex-direction:column; overflow:hidden; }
.studio-section-title { font-size:11px !important; font-weight:600; text-transform:uppercase; letter-spacing:.09em; color:#a6bab8; margin:0 0 13px; }
.studio-ready .viewport { min-height:0; height:auto; overflow:hidden; }
.studio-ready #stage { min-height:240px; flex:1; border-block:1px solid #263c40; }
.studio-preview-header { padding:14px 18px; display:grid; gap:9px; background:#132024; }
.studio-preview-row { display:flex; gap:12px; align-items:center; }
.studio-row-label { width:65px; flex:none; font-size:11px; color:var(--studio-muted); }
.studio-segments { display:flex; gap:4px; min-width:0; }
.studio-segments button { flex:1; min-width:0; font-size:12px; padding:7px 9px; line-height:1.3; }
.studio-preview-row .studio-segments { flex:1; }
.studio-ready button[aria-pressed=true],.studio-ready button[aria-selected=true] { color:#b3ecdc; background:#25423f; border-color:#75a397; }
.studio-preview-row button[aria-pressed=true] { background:#3a3b2d; border-color:#a78f64; color:#f1d5a2; }
.studio-ready footer { flex:none; display:grid; grid-template-columns:94px 67px 67px minmax(60px,1fr) 55px; gap:7px; padding:12px 16px 4px; align-items:center; }
.studio-ready footer button { font-size:12px; }
.studio-ready footer #play { background:#2e4b46; border-color:#547e71; }
.studio-ready #time { padding:0; font-size:11px; color:var(--studio-muted); white-space:nowrap; text-align:right; }
.studio-view-tools { display:grid; grid-template-columns:minmax(130px,1.7fr) 85px 100px auto; gap:12px; padding:0 16px; align-items:end; }
.studio-view-tools label { font-size:10px; margin:8px 0; }
.studio-view-tools select { min-height:30px; font-size:11px; padding:5px; margin-top:3px; }
.studio-view-tools input[type=range] { margin:5px 0 3px; }
.studio-view-tools label:last-child { align-self:end; margin-bottom:13px; white-space:nowrap; }
.studio-stage-hint { flex:none; padding:2px 16px 11px; font-size:11px !important; margin-bottom:0; }
.studio-tabs { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.studio-tabs button { font-size:13px; min-height:39px; background:#1b2d30; text-align:left; padding-left:12px; }
.studio-scope { color:var(--studio-accent); font-size:11px; line-height:1.5; margin:12px 0 16px; padding-bottom:12px; border-bottom:1px solid var(--studio-line); }
.studio-panel { min-width:0; min-height:0; flex:1; overflow:auto; padding-right:5px; margin-right:-5px; }
.studio-inspector > :is(.studio-section-title,.studio-tabs,.studio-scope) { flex:none; }
.studio-card { padding:14px; margin-bottom:12px; border:1px solid var(--studio-line); border-radius:9px; background:#132226; }
.studio-card > :last-child { margin-bottom:0; }
.studio-help { font-size:11px !important; margin:5px 0 10px; }
.studio-ready .studio-flip { width:100%; background:#354436; border-color:#83936c; color:#e1eacb; margin:5px 0; font-size:13px; font-weight:600; min-height:42px; }
.studio-flip::before { content:'↕'; display:inline-block; margin-right:9px; font-size:19px; vertical-align:-1px; }
.studio-ready .studio-reset-pitch { min-height:26px; font-size:10px; padding:3px 8px; background:transparent; color:var(--studio-muted); }
.studio-ready .studio-control { display:grid; grid-template-columns:minmax(0,1fr) 74px; gap:4px 10px; align-items:center; margin:12px 0 3px; }
.studio-control > .studio-label { grid-column:1/-1; }
.studio-control input[type=number] { grid-column:2; width:100%; min-width:0; margin:0; padding:5px 7px; min-height:32px; }
.studio-control input[type=range] { grid-column:1; grid-row:2; width:100%; margin:0; }
.studio-control:has(> input[type=range]):not(:has(> .studio-label)) { display:block; }
.studio-control:has(> input[type=range]):not(:has(> .studio-label)) input[type=range] { display:inline-block; width:calc(100% - 85px); vertical-align:middle; margin-top:4px; }
.studio-control:has(> input[type=range]):not(:has(> .studio-label)) input[type=number] { display:inline-block; width:74px; margin:4px 0 0 7px; vertical-align:middle; }
.studio-details { border:1px solid var(--studio-line); border-radius:8px; padding:0 12px; margin:10px 0; min-width:0; background:#17282c; }
.studio-details > summary { cursor:pointer; padding:12px 0; font-size:12px; font-weight:600; color:#dce7dc; line-height:1.5; }
.studio-details > summary::marker { color:#82bfb1; }
.studio-details[open] { padding-bottom:12px; }
.studio-details[open] > summary { margin-bottom:5px; border-bottom:1px solid #31494a; }
.studio-details .studio-details { background:#142125; }
.studio-details > button { width:100%; margin:5px 0; }
.studio-details input[type=file] { max-width:100%; font-size:11px; margin-top:6px; }
.studio-details .coordinate-pair { margin:9px 0; }
.studio-ready .coordinate-pair { border-color:var(--studio-line); border-radius:8px; padding:10px; }
.studio-ready .coordinate-pair legend { color:#c3d4c9; font-size:12px; }
.studio-ready .coordinate-pair > small { font-size:10px; line-height:1.45; margin-top:6px; }
.studio-ready .coordinate-pad { grid-template-columns:repeat(3,40px); grid-template-rows:repeat(2,35px); }
.studio-ready .coordinate-pad button { padding:0; min-height:35px; }
.studio-ready .coordinate-readout { font-size:11px; color:var(--studio-muted); padding:4px; }
.studio-ready .coordinate-values label { font-size:11px; margin:6px 0; }
.studio-ready #outfit-preview { border:0; padding:0; margin:0; }
.studio-ready #outfit-rules { font-size:10px; line-height:1.5; }
.studio-ready #outfit-directions { font-size:11px; }
.studio-ready .studio-timing { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.studio-timing label { font-size:10px; margin:4px 0; }
.studio-timing input { padding-inline:6px; }
.studio-animation-attack > .studio-segments { margin:12px 0; }
.studio-ready .studio-wide { width:100%; margin:8px 0; }
.studio-ready .effect-presets { display:flex; gap:5px; flex-wrap:wrap; }
.studio-ready .effect-presets button { flex:1; width:auto; font-size:11px; min-width:70px; }
.studio-ready #metrics,.studio-ready #dummy-metrics,.studio-ready #battle-metrics { display:block; font-size:11px; color:var(--studio-muted); padding:10px 0; overflow-wrap:anywhere; }
.studio-ready .studio-hud { flex:none; max-height:65vh; overflow:auto; margin:0; border-radius:0; }
.studio-ready .studio-hud #hud-editor { border:0; }
@media (max-width:1150px) and (min-width:851px) {
  .studio-ready main { grid-template-columns:185px minmax(300px,1fr) 310px; }
  .studio-ready main > aside { padding:12px; }
  .studio-ready > header { gap:7px 12px; padding-inline:14px; }
  .studio-brand { gap:8px; flex-direction:column; align-items:flex-start; }
  .studio-brand strong { font-size:14px; }
  .studio-view-tools { grid-template-columns:1fr 75px; gap:0 10px; }
  .studio-preview-row { flex-direction:column; gap:4px; align-items:stretch; }
  .studio-row-label { width:auto; }
  .studio-preview-header { padding:10px; }
  .studio-preview-row button { font-size:11px; padding:6px 4px; }
  .studio-ready footer { grid-template-columns:80px 55px 55px minmax(30px,1fr) 45px; padding-inline:10px; gap:4px; }
}
@media (max-width:850px) {
  body.studio-ready { height:auto; min-height:100dvh; overflow:auto; }
  .studio-ready > header { grid-template-columns:1fr auto; padding:12px; gap:10px; }
  .studio-brand { display:block; }
  .studio-brand strong { display:block; font-size:14px; }
  .studio-links { grid-row:2; grid-column:1; }
  .studio-history { grid-row:2; grid-column:2; }
  .studio-ready .studio-save { grid-row:1; grid-column:2; padding-inline:10px; font-size:12px; }
  .studio-statusbar { align-items:flex-start; }
  .studio-ready main { display:flex; flex-direction:column; overflow:visible; }
  .studio-ready main > aside { width:auto; overflow:visible; padding:14px; border:0; }
  .studio-ready .studio-library { display:grid; grid-template-columns:1fr 1fr; gap:8px 14px; }
  .studio-library .studio-section-title { grid-column:1/-1; margin-bottom:0; }
  .studio-library > label { grid-column:1/-1; }
  .studio-library > .studio-details { margin:0; }
  .studio-library > .studio-details[open] { grid-column:1/-1; }
  .studio-library > .studio-details:last-of-type { grid-column:1/-1; }
  .studio-ready .viewport { height:650px; min-height:560px; }
  .studio-ready #stage { min-height:220px; }
  .studio-preview-header { padding:10px; }
  .studio-preview-row { display:block; }
  .studio-row-label { display:block; width:auto; margin-bottom:5px; }
  .studio-preview-row button { font-size:11px; padding:7px 4px; }
  .studio-ready footer { grid-template-columns:78px 62px 62px 1fr; gap:5px; padding:10px; }
  .studio-ready #timeline { grid-column:1/4; grid-row:2; }
  .studio-ready #time { grid-column:4; grid-row:2; }
  .studio-view-tools { grid-template-columns:1fr 80px; gap:0 10px; padding-inline:10px; }
  .studio-stage-hint { padding-inline:10px; }
  .studio-tabs { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .studio-tabs button { text-align:center; padding:7px 3px; font-size:12px; }
  .studio-ready .studio-scope { margin-bottom:12px; }
  .studio-ready .studio-inspector { overflow:visible; }
  .studio-ready .studio-panel { overflow:visible; flex:none; }
}
@media (prefers-reduced-motion:reduce) { .studio-ready button { transition:none; } }
/* The contact sheet fits all frames into one view; full-size pixels export to PNG. */
#storyboard { box-sizing:border-box; width:calc(100vw - 24px); max-width:1800px; height:calc(100vh - 24px); max-height:none; padding:12px; border:1px solid #4d6463; border-radius:12px; color:#e4ede4; background:#122124; overflow:hidden; }
#storyboard[open] { display:flex; flex-direction:column; gap:7px; }
#storyboard::backdrop { background:#071115d9; }
.sb-heading,.sb-toolbar,.sb-caption,.sb-bottom { display:flex; align-items:center; gap:12px; flex:none; }
.sb-heading>div,.sb-bottom>div { flex:1; min-width:0; }
#storyboard h2 { font-size:18px; margin:0 0 2px; line-height:1.2; }
#storyboard p { margin:0; font-size:12px; color:#a5b9b6; }
#storyboard button { font-size:12px; padding:6px 10px; min-height:30px; }
#storyboard .sb-download { display:inline-flex; align-items:center; color:#e4ede4; background:#22383c; border:1px solid #3a5559; border-radius:7px; padding:6px 10px; min-height:30px; box-sizing:border-box; font-size:12px; text-decoration:none; white-space:nowrap; }
#storyboard .sb-download[aria-disabled=true] { opacity:.4; pointer-events:none; }
#storyboard label { display:flex; flex-direction:row; align-items:center; gap:8px; margin:0; white-space:nowrap; font-size:12px; }
#storyboard select { width:auto; max-width:160px; padding:4px; font-size:12px; min-height:30px; }
#storyboard input[type=checkbox] { width:auto; height:auto; margin:0; }
.sb-toolbar { flex-wrap:wrap; padding:5px 0; border-block:1px solid #2c4243; }
.sb-caption { justify-content:space-between; color:#a5b9b6; font-size:11px; }
.sb-caption i { display:inline-block; width:7px; height:7px; border-radius:50%; margin:0 3px 0 10px; }
.sb-hand { background:#7cd8df; }.sb-tip { background:#dfbf7d; }
.sb-pommel { background:#c49fdb; }.sb-edge { background:#9ccc92; }
#sb-progress { margin:0; padding:0; font-size:12px; white-space:nowrap; line-height:1.3; }
#sb-grid { flex:1; min-height:0; display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); grid-template-rows:repeat(var(--sb-rows,4),minmax(0,1fr)); gap:7px; }
#storyboard .sb-card { display:flex; flex-direction:column; align-items:stretch; min-height:0; padding:4px; border:1px solid #304648; border-top:2px solid var(--phase-color); border-radius:5px; background:#18272a; overflow:hidden; }
.sb-card span { color:#c1cfca; font-size:11px; text-align:left; flex:none; }
.sb-card canvas { min-height:0; width:100%; flex:1; object-fit:contain; image-rendering:pixelated; }
.sb-card small { display:none; }
#storyboard .sb-card[aria-pressed=true] { outline:2px solid #9bd4c5; outline-offset:-2px; }
#storyboard .sb-card.sb-transition { border-color:#dfbf7d; }
.sb-bottom { padding-top:8px; border-top:1px solid #2c4243; }
#sb-selection { display:block; font-size:13px; margin-bottom:4px; }
#storyboard #sb-edit { background:#40574b; border-color:#789782; }
#landmark-art { display:block; width:100%; max-width:320px; aspect-ratio:1; height:auto; image-rendering:pixelated; cursor:crosshair; border:1px solid #3c5559; border-radius:5px; margin:10px 0; }
#landmark-choices { flex-wrap:wrap; }
#landmark-position,#landmark-face { display:block; font-size:12px; padding:5px 0; color:#cbded2; }
#landmark-notice { min-height:16px; margin:3px 0; color:#d5c499; }
@media(max-width:760px) { #storyboard { padding:10px; width:calc(100vw - 12px); height:calc(100vh - 12px); } .sb-caption>span { display:none; } #storyboard label { font-size:11px; gap:4px; } .sb-toolbar { gap:8px; } #storyboard button { padding:6px; font-size:11px; } #storyboard h2 { font-size:16px; } #sb-summary { display:none; } .sb-card small { font-size:8px; } }
#community-proposal{max-width:520px;width:calc(100vw - 40px);box-sizing:border-box;border:1px solid #58716a;border-radius:10px;background:#172529;color:#e4ede4;padding:24px}#community-proposal::backdrop{background:#071115bb}#community-proposal h2{font-size:20px}#community-proposal textarea{display:block;width:100%;box-sizing:border-box;background:#102024;color:#e4ede4;border:1px solid #526b65;padding:10px;resize:vertical}#community-proposal form>div{display:flex;gap:8px;flex-wrap:wrap}#community-propose{font-size:12px;min-height:30px;padding:4px 8px}