:root{
  --bg:#f6f7f9;--surface:#fff;--surface-2:#f0f2f5;--text:#1b1f24;--muted:#5b6470;--border:#dde1e6;
  --accent:#be185d;--accent-text:#fff;--accent-soft:#fce7f1;--ok:#1f7a3a;--warn:#8a5a00;--danger:#b42318;
  --radius:12px;--radius-sm:8px;--shadow:0 1px 2px rgb(0 0 0/.05),0 8px 24px rgb(0 0 0/.06);
  --font:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  --check:#e3e6ea;
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#0f1115;--surface:#171a21;--surface-2:#1f232c;--text:#e8eaef;--muted:#9aa3af;--border:#2a2f3a;
  --accent:#f472b6;--accent-text:#2b0717;--accent-soft:#3a1528;--ok:#4ade80;--warn:#fbbf24;--danger:#f87171;--shadow:none;
  --check:#262b35}}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;font-family:var(--font);background:var(--bg);color:var(--text);line-height:1.55}
.site-header,main,.site-footer{max-width:960px;margin-inline:auto;padding-inline:16px}
.site-header{padding-block:32px 8px}
h1{font-size:clamp(1.6rem,4vw,2.2rem);margin:0 0 4px;letter-spacing:-.01em}
h2{font-size:1.15rem;margin:0 0 14px}
.lead{color:var(--muted);margin:0}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow);margin-block:16px}
label{display:block;font-weight:600;margin-bottom:6px}
input,select,textarea,button{font:inherit;color:inherit}
input,select,textarea{width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface)}
input[type=range]{padding:0;border:0;accent-color:var(--accent)}
:focus-visible{outline:3px solid color-mix(in srgb,var(--accent) 50%,transparent);outline-offset:2px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 16px;border-radius:var(--radius-sm);border:1px solid transparent;background:var(--accent);color:var(--accent-text);font-weight:600;cursor:pointer;white-space:nowrap}
.btn.secondary{background:transparent;color:var(--text);border-color:var(--border)}
.btn.secondary:hover{background:var(--surface-2)}
.btn.small{padding:6px 10px;font-size:.88rem}
.btn.big{padding:12px 22px;font-size:1.05rem}
.btn:disabled{opacity:.55;cursor:not-allowed}
.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.muted{color:var(--muted)}
.small{font-size:.88rem}
.site-footer{padding-block:24px 40px;color:var(--muted);font-size:.9rem}
a{color:var(--accent)}
code{font-family:var(--mono);font-size:.92em;background:var(--surface-2);padding:1px 5px;border-radius:5px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
fieldset{border:0;padding:0;margin:0;min-width:0}
legend{font-weight:600;margin-bottom:6px;padding:0}
.check{display:flex;gap:8px;align-items:flex-start;font-weight:400;margin:8px 0}
.check input{width:auto;margin:.3em 0 0;accent-color:var(--accent)}
.actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;align-items:center}

/* imagem */
.dropzone{border:2px dashed var(--border);border-radius:var(--radius);padding:24px 16px;text-align:center;transition:border-color .15s,background .15s}
.dropzone.dragover{border-color:var(--accent);background:var(--accent-soft)}
.drop-title{font-weight:700;margin:0 0 10px}
.file-btn{position:relative;margin:0}
.file-btn:focus-within{outline:3px solid color-mix(in srgb,var(--accent) 50%,transparent);outline-offset:2px}
.file-input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;padding:0;border:0}
.image-info{margin:12px 0 0}
.image-info:empty{display:none}
.colorkey{margin-top:8px}
.swatch{display:inline-block;width:1em;height:1em;border:1px solid var(--border);border-radius:3px;vertical-align:-.15em;background:transparent}
.swatch.clear{background:repeating-conic-gradient(var(--check) 0 25%,var(--surface) 0 50%) 0 0/6px 6px}
.key-tol{max-width:320px;margin-left:24px}

/* fatiar */
.segmented{display:inline-flex;border:1px solid var(--border);border-radius:999px;padding:4px;margin-bottom:16px;background:var(--surface-2)}
.segmented input{position:absolute;opacity:0;pointer-events:none}
.segmented label{margin:0;padding:8px 14px;border-radius:999px;cursor:pointer;font-weight:600;white-space:nowrap}
.segmented input:checked+label{background:var(--accent);color:var(--accent-text)}
.segmented input:focus-visible+label{outline:3px solid color-mix(in srgb,var(--accent) 50%,transparent);outline-offset:2px}
.inline-radios{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;margin-bottom:12px}
.inline-radios legend{width:100%}
.radio{display:inline-flex;gap:6px;align-items:center;font-weight:400;margin:0}
.radio input{width:auto;accent-color:var(--accent)}
.fields{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
.fields.wide{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.fields p{margin:6px 0 0}
.messages{margin-top:12px}
.messages:empty{display:none}
.messages p{margin:4px 0;padding:8px 12px;border-radius:var(--radius-sm)}
.messages .ok{background:color-mix(in srgb,var(--ok) 10%,var(--surface));border:1px solid color-mix(in srgb,var(--ok) 40%,var(--border))}
.messages .warn{background:color-mix(in srgb,var(--warn) 12%,var(--surface));border:1px solid color-mix(in srgb,var(--warn) 45%,var(--border))}
.messages .error{background:color-mix(in srgb,var(--danger) 10%,var(--surface));border:1px solid color-mix(in srgb,var(--danger) 45%,var(--border))}

/* quadros */
.toolbar{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;margin-bottom:8px}
.toolbar .check{margin:0}
.zoom{display:flex;align-items:center;gap:8px}
.zoom label{margin:0}
.zoom select{width:auto;padding:6px 10px}
.stage-wrap{overflow:auto;max-height:70vh;border:1px solid var(--border);border-radius:var(--radius-sm);background:repeating-conic-gradient(var(--check) 0 25%,transparent 0 50%) 0 0/16px 16px}
#stage{display:block;cursor:pointer}
.frame-list{display:grid;gap:6px;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));margin-top:12px}
.frame-btn{display:flex;flex-direction:column;align-items:center;gap:2px;padding:4px;border:2px solid var(--accent);border-radius:var(--radius-sm);background:var(--surface);cursor:pointer;font-size:.75rem;font-variant-numeric:tabular-nums}
.frame-btn[aria-pressed="false"]{border-color:var(--border);border-style:dashed;opacity:.55}
.frame-btn canvas{width:48px;height:48px;image-rendering:pixelated;background:repeating-conic-gradient(var(--check) 0 25%,transparent 0 50%) 0 0/8px 8px}
.list-note{grid-column:1/-1;margin:4px 0 0}

/* animação */
.anim{display:flex;flex-wrap:wrap;gap:20px;align-items:flex-start}
#anim{width:256px;height:256px;max-width:100%;image-rendering:pixelated;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface-2)}
.anim-controls{flex:1 1 240px;display:grid;gap:12px;align-content:start}
.anim-controls p{margin:0}
#play{justify-self:start;min-width:140px}

.tips{margin:12px 0 0;padding-left:1.2em;color:var(--muted);display:grid;gap:4px;font-size:.92rem}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}