:root{--color-page-bg:#16130f;--color-panel-bg:#211b15;--color-card-bg:#2a231c;--color-field-bg:#17130f;--color-dialog-bg:#211b15;--color-code-bg:#120f0c;--color-text:#f4f1e8;--color-text-muted:#b9ac9d;--color-label:#d7cbbb;--color-border:#3b3127;--color-border-strong:#4d4034;--color-accent:#ffb454;--color-accent-dim:#513719;--color-hover:#d79845;--color-canvas-bg:#fff;--color-checker-a:#fff;--color-checker-b:#e7e7e7;--color-grid:#0000001f;--color-backdrop:#000000a6;--color-shadow:#00000073}*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0}body{color:var(--color-text);background:var(--color-page-bg);font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;overflow:hidden}button,input,select,textarea{font:inherit}.app{grid-template-columns:248px minmax(0,1fr) 220px;width:100vw;height:100vh;display:grid;overflow:hidden}.primitives-panel{color:#f7e7c6;background:#0c0a08eb;border-left:1px solid #ffffff14;width:100%;min-width:0;height:100%;padding:12px;overflow-y:auto}.primitives-panel-header{justify-content:space-between;align-items:center;margin-bottom:8px;display:flex}.primitives-panel-header h2{letter-spacing:.04em;text-transform:uppercase;color:#f5c76b;margin:0;font-size:13px;font-weight:700}.primitive-list{flex-direction:column;gap:4px;margin:0;padding:0;list-style:none;display:flex}.primitive-list-item{cursor:pointer;-webkit-user-select:none;user-select:none;color:#f7e7c6;background:#ffffff08;border:1px solid #0000;border-radius:8px;grid-template-columns:28px 22px 18px 1fr;align-items:center;gap:6px;min-height:28px;padding:4px 6px;font-size:12px;display:grid}.primitive-list-item:hover{background:#ffc75b1a;border-color:#ffc75b33}.primitive-list-item:focus-visible{outline-offset:2px;outline:2px solid #ffc75bd9}.primitive-list-item.is-selected{background:#ffc75b2e;border-color:#ffc75bbf}.primitive-list-index{color:#f7e7c6a6;font-variant-numeric:tabular-nums}.primitive-list-kind{color:#f5c76b;justify-content:center;align-items:center;font-size:13px;line-height:1;display:inline-flex}.primitive-list-color{border:1px solid #ffffff73;border-radius:3px;width:12px;height:12px;box-shadow:0 0 0 1px #00000059}.primitive-list-size{text-overflow:ellipsis;white-space:nowrap;color:#f7e7c6e6;font-variant-numeric:tabular-nums;overflow:hidden}.primitive-list-empty{color:#f7e7c68c;padding:8px 6px;font-size:12px;font-style:italic}@media (width<=900px){.app{grid-template-rows:minmax(0,1fr) 180px;grid-template-columns:220px minmax(0,1fr)}.toolbar{grid-row:1/3}.workspace{grid-area:1/2}.primitives-panel{border-top:1px solid #ffffff14;border-left:0;grid-area:2/2;width:auto;height:auto}}.toolbar{background:var(--color-panel-bg);border-right:1px solid var(--color-border);flex-direction:column;gap:8px;padding:10px;display:flex;overflow-y:auto}.toolbar-header h1{letter-spacing:0;margin:0;font-size:15px}.toolbar-header p{color:var(--color-text-muted);margin:4px 0 0;font-size:13px}.toolbar-group{background:var(--color-card-bg);border:1px solid var(--color-border);border-radius:8px;gap:7px;padding:8px;display:grid}.toolbar-group label{color:var(--color-label);gap:4px;font-size:11px;display:grid}.toolbar-group h2{color:var(--color-label);margin:0;font-size:11px;font-weight:700}.toolbar-group input,.toolbar-group select,.toolbar-group button{width:100%}input,select,button{border:1px solid var(--color-border-strong);min-height:30px;color:var(--color-text);background:var(--color-field-bg);border-radius:7px}input[type=color]{padding:2px}button{cursor:pointer;transition:transform .12s,border-color .12s,background .12s}button:hover{border-color:var(--color-hover);transform:translateY(-1px)}.tool-button.is-active{border-color:var(--color-accent);background:var(--color-accent-dim)}.primitive-toolbar{grid-template-columns:repeat(3,1fr)}.edit-tool-toolbar{grid-template-columns:repeat(5,1fr)}.primitive-toolbar .tool-button,.edit-tool-toolbar button,.action-toolbar button{font-size:19px;line-height:1}.action-toolbar{grid-template-columns:repeat(3,1fr)}.export-actions{grid-template-columns:repeat(4,1fr)}.button-row{grid-template-columns:repeat(2,1fr);gap:6px;display:grid}.button-row:has(>:nth-child(3)){grid-template-columns:repeat(3,1fr)}.button-row:has(>:nth-child(4)){grid-template-columns:repeat(4,1fr)}.button-row:has(>:nth-child(5)){grid-template-columns:repeat(5,1fr)}.compact-row{grid-template-columns:1fr 1fr;gap:6px;display:grid}.color-field{grid-template-columns:auto 34px 1fr;align-items:center}.color-field input[type=color]{width:34px}.is-invalid{border-color:#ef4444;box-shadow:0 0 0 1px #ef4444}button:disabled,input:disabled{cursor:not-allowed;opacity:.45}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--color-accent);outline-offset:1px}.workspace{background:radial-gradient(circle at center, var(--color-card-bg) 0, var(--color-page-bg) 70%);place-items:center;width:100%;height:100%;display:grid;overflow:hidden}#sprite-canvas{image-rendering:pixelated;background:var(--color-canvas-bg);box-shadow:0 24px 80px var(--color-shadow);display:block}.export-dialog,.import-dialog,.confirm-dialog{width:min(900px,92vw);color:var(--color-text);background:var(--color-dialog-bg);border:0;border-radius:16px;padding:0}.export-dialog::backdrop,.import-dialog::backdrop,.confirm-dialog::backdrop{background:var(--color-backdrop)}.export-dialog-panel,.import-dialog-panel,.confirm-dialog-panel{gap:12px;margin:0;padding:16px;display:grid}.export-dialog-header,.import-dialog-header{justify-content:space-between;align-items:center;display:flex}.export-dialog-header h2,.import-dialog-header h2{margin:0;font-size:20px}.export-dialog-header button{width:40px;min-height:40px;font-size:24px}.export-dialog textarea,.import-dialog textarea{resize:none;border:1px solid var(--color-border-strong);width:100%;height:60vh;color:var(--color-text);background:var(--color-code-bg);border-radius:12px;padding:12px;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:13px}.import-error{color:#ffb4a8;margin:0;line-height:1.4}.import-dialog-actions{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;display:grid}.confirm-dialog{width:min(420px,92vw)}.confirm-dialog h2,.confirm-dialog p{margin:0}.confirm-dialog p{color:var(--color-text-muted);line-height:1.5}.confirm-dialog-actions{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;display:grid}.destructive-button{color:#fff;background:#8f2d2d;border-color:#a33a3a}