body
{
   background-color: #FFFFFF;
   color: #000000;
   font-family: Arial;
   font-weight: normal;
   font-size: 13px;
   line-height: 1.1875;
   margin: 0;
   padding: 0;
}
:root {
  --bg:#0b0b0b;
  --panel:#111;
  --accent:#00ffc8;
  --text:#ddd;
}

* { box-sizing:border-box; }

body {
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:'IBM Plex Sans', system-ui, sans-serif;
}

.workspace {
  display:grid;
  grid-template-columns:320px 1fr;
  height:100vh;
}

aside {
  background:var(--panel);
  padding:16px;
  overflow:auto;
}

.section { margin-bottom:18px; }
.section-title { color:var(--accent); margin-bottom:6px; }

.file-drop {
  border:2px dashed #333;
  padding:18px;
  text-align:center;
  cursor:pointer;
}

.file-drop input {
  display:none;
}

.file-list {
  max-height:140px;
  overflow:auto;
  font-size:12px;
  background:#0a0a0a;
  padding:6px;
  border:1px solid #222;
}

button {
  width:100%;
  margin-top:6px;
  padding:8px;
  background:#111;
  border:1px solid #222;
  color:#eee;
  cursor:pointer;
}

button.active { background:#0f332d; border-color:var(--accent); }

main {
  padding:20px;
  display:flex;
  flex-direction:column;
}

.preview-area {
  flex:1;
  background:#050505;
  border:1px solid #222;
  display:flex;
  justify-content:center;
  align-items:center;
}

canvas {
  image-rendering:pixelated;
}

.anim-preview {
  margin-top:12px;
  padding:12px;
  background:#0c0c0c;
  border:1px solid #222;
}

.anim-header {
  display:flex;
  justify-content:space-between;
  font-size:12px;
  color:#aaa;
  margin-bottom:6px;
}

.statusbar {
  margin-top:6px;
  font-size:12px;
  color:#aaa;
}