Style.css

body { font-family: sans-serif; margin: 0; display: flex; flex-direction: column; align-items: center; }
header { text-align: center; margin: 10px; }
main { display: flex; gap: 10px; padding: 10px; width: 100%; max-width: 1200px; }
.left-panel, .right-panel { width: 220px; display: flex; flex-direction: column; gap: 10px; }
.center-panel { flex: 1; display: flex; justify-content: center; align-items: center; }
.card { border: 1px solid #ccc; padding: 10px; border-radius: 6px; background: #f9f9f9; }
canvas { border: 1px solid #000; background: #fff; }
#layersList div, #framesList div { margin: 3px 0; cursor: pointer; padding: 2px; border: 1px solid transparent; }
#layersList div.selected { border-color: blue; }
#frameThumbs img { width: 50px; height: 50px; margin: 2px; border: 1px solid #ccc; cursor: pointer; }