:root{--bg: #1a1d23;--bg-2: #22262e;--bg-3: #2a2f38;--border: #353a44;--text: #e8eaed;--text-dim: #9aa0a6;--accent: #7cc4ff;--accent-2: #4a9fff;--good: #6fdc8c;--warn: #ffc16f;--bad: #ff7a7a;--shadow: 0 4px 14px rgba(0, 0, 0, .4);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;color-scheme:dark}*{box-sizing:border-box}html,body,#app{height:100%;margin:0;background:var(--bg);color:var(--text);font-size:14px;-webkit-font-smoothing:antialiased}button{font:inherit;color:var(--text);background:var(--bg-3);border:1px solid var(--border);padding:.5em 1em;border-radius:6px;cursor:pointer}button:hover{background:var(--border)}button:disabled{opacity:.4;cursor:not-allowed}button.primary{background:var(--accent-2);border-color:var(--accent-2);color:#08111a;font-weight:600}button.primary:hover{background:var(--accent)}input[type=text],input[type=search]{font:inherit;color:var(--text);background:var(--bg);border:1px solid var(--border);padding:.5em .75em;border-radius:6px;outline:none}input:focus{border-color:var(--accent-2)}.app-shell{display:grid;grid-template-rows:auto 1fr;height:100%}.topbar{display:flex;align-items:center;gap:1rem;padding:.75rem 1rem;background:var(--bg-2);border-bottom:1px solid var(--border)}.topbar h1{font-size:1rem;font-weight:600;margin:0;color:var(--accent);letter-spacing:.02em}.topbar .spacer{flex:1}.topbar .meta{color:var(--text-dim);font-size:.85rem}.workspace{display:grid;grid-template-columns:360px 1fr;overflow:hidden}.sidebar{border-right:1px solid var(--border);display:grid;grid-template-rows:auto 1fr;overflow:hidden;background:var(--bg-2)}.sidebar .search{padding:.75rem;border-bottom:1px solid var(--border)}.sidebar .search input{width:100%}.sidebar .list{overflow-y:auto}.item-row{display:grid;grid-template-columns:48px 1fr auto;align-items:center;gap:.75rem;padding:.5rem .75rem;border-bottom:1px solid var(--border);cursor:pointer}.item-row:hover{background:var(--bg-3)}.item-row.selected{background:var(--bg-3);border-left:3px solid var(--accent);padding-left:calc(.75rem - 3px)}.item-row .thumb{width:48px;height:48px;background:linear-gradient(45deg,#1d2128 25%,transparent 25%),linear-gradient(-45deg,#1d2128 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#1d2128 75%),linear-gradient(-45deg,transparent 75%,#1d2128 75%);background-size:10px 10px;background-position:0 0,0 5px,5px -5px,-5px 0;background-color:#2a2f38;display:grid;place-items:center;border-radius:4px;overflow:hidden}.item-row .thumb canvas{max-width:100%;max-height:100%;image-rendering:pixelated}.item-row .name{font-weight:500}.item-row .id{color:var(--text-dim);font-size:.8rem;font-family:ui-monospace,SFMono-Regular,monospace}.item-row .badge{font-size:.7rem;padding:2px 6px;border-radius:4px;color:var(--bg);font-weight:600}.item-row .badge.dirty{background:var(--warn)}.item-row .badge.new{background:var(--good)}.detail{display:grid;grid-template-rows:auto 1fr auto;overflow:hidden}.detail-header{padding:1rem 1.5rem;border-bottom:1px solid var(--border);display:flex;align-items:baseline;gap:1rem}.detail-header h2{margin:0;font-size:1.1rem}.detail-header .id-label{color:var(--text-dim);font-family:ui-monospace,SFMono-Regular,monospace;font-size:.85rem}.detail-body{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;padding:1.5rem;overflow-y:auto}.sprite-card{background:var(--bg-2);border:1px solid var(--border);border-radius:8px;padding:1rem;display:grid;grid-template-rows:auto 1fr auto;gap:.75rem}.sprite-card h3{margin:0;font-size:.95rem;color:var(--text-dim);text-transform:uppercase;letter-spacing:.08em}.sprite-card .canvas-wrap{display:grid;place-items:center;min-height:120px;border-radius:4px;background:linear-gradient(45deg,#1d2128 25%,transparent 25%),linear-gradient(-45deg,#1d2128 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#1d2128 75%),linear-gradient(-45deg,transparent 75%,#1d2128 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0;background-color:#2a2f38;position:relative;overflow:hidden;padding:.5rem}.detail-body:not([style*=grid-template-columns]) .canvas-wrap{min-height:240px;padding:1rem}.sprite-card .canvas-wrap canvas{image-rendering:pixelated}.sprite-card.drag-over .canvas-wrap{outline:2px dashed var(--accent);outline-offset:-4px}.sprite-card .meta{color:var(--text-dim);font-size:.8rem;font-family:ui-monospace,monospace}.sprite-card .actions{display:flex;gap:.5rem}.animation-player{display:grid;grid-template-columns:1fr 280px;gap:1rem;padding:1rem 1.5rem;border-bottom:1px solid var(--border);background:var(--bg);align-items:stretch}.animation-header{display:flex;flex-direction:column;gap:.5rem}.animation-header h3{margin:0;font-size:.85rem;color:var(--text-dim);text-transform:uppercase;letter-spacing:.08em}.anim-buttons{display:flex;flex-wrap:wrap;gap:.4rem}.anim-buttons button{padding:.35em .7em;font-size:.85rem}.animation-stage{display:grid;place-items:center;min-height:220px;border-radius:6px;background:linear-gradient(45deg,#1d2128 25%,transparent 25%),linear-gradient(-45deg,#1d2128 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#1d2128 75%),linear-gradient(-45deg,transparent 75%,#1d2128 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0;background-color:#2a2f38;overflow:hidden}.animation-stage canvas{image-rendering:pixelated}.animation-hint{color:var(--text-dim);font-size:.85rem;text-align:center;padding:1rem}.animation-footer{grid-column:1 / -1;color:var(--text-dim);font-size:.8rem;font-family:ui-monospace,SFMono-Regular,monospace}.character-preview{display:grid;grid-template-columns:auto 1fr;gap:1rem;padding:1rem 1.5rem;border-bottom:1px solid var(--border);background:var(--bg);align-items:center}.character-preview header{grid-column:2;display:flex;flex-direction:column;gap:.5rem}.character-preview .preview-controls{display:flex;flex-direction:column;gap:.5rem}.character-preview .preview-gender{display:flex;gap:.4rem}.character-preview .preview-gender button{padding:.3em .7em;font-size:.85rem}.character-preview .preview-anims{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.25rem}.character-preview .preview-anims button{padding:.3em .65em;font-size:.82rem}.character-preview header h3{margin:0;font-size:.85rem;color:var(--text-dim);text-transform:uppercase;letter-spacing:.08em}.character-preview .preview-hint{color:var(--text-dim);font-size:.78rem;font-style:italic}.character-preview .preview-stage{grid-row:1 / 3;display:grid;place-items:center;border-radius:6px;background:linear-gradient(45deg,#1d2128 25%,transparent 25%),linear-gradient(-45deg,#1d2128 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#1d2128 75%),linear-gradient(-45deg,transparent 75%,#1d2128 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0;background-color:#2a2f38;padding:.5rem}.metadata-panel{padding:1rem 1.5rem;border-bottom:1px solid var(--border);background:var(--bg);display:flex;flex-direction:column;gap:.75rem}.metadata-header{display:flex;align-items:center;justify-content:space-between}.metadata-header h3{margin:0;font-size:.85rem;color:var(--text-dim);text-transform:uppercase;letter-spacing:.08em}.metadata-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.5rem .75rem}.metadata-grid label{display:flex;flex-direction:column;gap:.25rem;font-size:.85rem;color:var(--text-dim)}.metadata-grid input,.metadata-grid select{font:inherit;color:var(--text);background:var(--bg);border:1px solid var(--border);padding:.35em .5em;border-radius:4px}.metadata-layers{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;font-size:.85rem}.metadata-layers span.on{color:var(--good);font-weight:500}.metadata-layers span.off{color:var(--text-dim);text-decoration:line-through;opacity:.6}.metadata-layers .meta-hint{color:var(--text-dim);font-style:italic;font-size:.78rem}.metadata-hint{color:var(--text-dim);font-size:.8rem;margin:0;line-height:1.4}.savebar{display:flex;gap:.75rem;padding:.75rem 1.5rem;background:var(--bg-2);border-top:1px solid var(--border);align-items:center}.savebar .status{flex:1;color:var(--text-dim)}.savebar .status .dirty{color:var(--warn);font-weight:500}.landing{display:grid;place-items:center;height:100%;background:var(--bg)}.landing .dropzone{display:grid;place-items:center;width:min(640px,90%);aspect-ratio:16 / 9;border:2px dashed var(--border);border-radius:16px;background:var(--bg-2);text-align:center;padding:2rem;cursor:pointer;transition:border-color .15s,background .15s}.landing .dropzone:hover,.landing .dropzone.drag-over{border-color:var(--accent);background:var(--bg-3)}.landing .dropzone h2{margin:0 0 .5rem;font-size:1.4rem}.landing .dropzone p{color:var(--text-dim);margin:.5rem 0;max-width:480px}.landing .dropzone .hint{font-size:.85rem;margin-top:1rem;color:var(--text-dim)}.error{color:var(--bad);background:#ff7a7a1a;border:1px solid var(--bad);padding:.75rem 1rem;border-radius:6px;margin:1rem}