/* animate.html — the character on the right, the three steps on the left. */
.an-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  grid-template-areas: "model view" "clips view" "take view";
  grid-template-rows: auto auto 1fr;
  gap: 12px;
  margin-top: 18px;
}
.an-grid > .panel + .panel { margin-top: 0; }
#an-model { grid-area: model; }
#an-clips { grid-area: clips; }
.an-step[aria-label="take it"] { grid-area: take; }
.an-view { grid-area: view; align-self: start; position: sticky; top: 12px; }
.an-step h3 { margin-bottom: 8px; }
.an-step .dim { font-size: .86rem; }
.an-step.an-over { border-color: var(--g-live); background: rgba(184, 255, 56, .06); }

#an-canvas {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  max-height: 72vh;
  border-radius: 4px;
  background: radial-gradient(ellipse at 50% 35%, #263024 0%, #121611 75%);
  touch-action: none;
  cursor: grab;
}
#an-canvas:active { cursor: grabbing; }

.an-file { position: relative; overflow: hidden; margin-top: 10px; }
.an-file input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.an-packs { display: flex; flex-wrap: wrap; gap: 8px; }
.an-packs .an-file { margin-top: 0; }
.an-packs [aria-pressed="true"] { border-color: var(--g-live); color: #fff; }
.an-check { display: flex; gap: 8px; align-items: center; margin-top: 12px; font-size: .86rem; color: var(--store-muted); }

.an-clip-list {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  max-height: 340px;
  overflow-y: auto;
  border-top: 1px solid rgba(255, 255, 255, .06);
}
.an-clip-list:empty { display: none; }
.an-clip-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 2px;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.an-clip {
  flex: 1;
  min-width: 0;
  text-align: left;
  background: none;
  border: 0;
  padding: 4px 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.an-clip:hover, .an-clip.on { color: var(--g-live); }
.an-clip-list .dim { font-size: .78rem; }

.an-acts { display: flex; flex-direction: column; gap: 8px; }
.an-acts .btn { justify-content: center; }
.an-readme-text {
  width: 100%;
  margin-top: 10px;
  font-size: .72rem;
  background: rgba(0, 0, 0, .3);
  color: inherit;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 4px;
  padding: 8px;
}
.note.an-bad { color: #ff8a7a; }

@media (max-width: 760px) {
  .an-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "model" "view" "clips" "take";
    grid-template-rows: auto;
  }
  .an-view { position: static; }
  #an-canvas { aspect-ratio: 1 / 1; }
}