:root {
  --animation-panel-bg: linear-gradient(
    155deg,
    color-mix(in srgb, var(--color-primary) 18%, var(--color-surface) 82%) 0%,
    color-mix(in srgb, var(--color-primary) 8%, var(--color-surface-muted) 92%) 100%
  );
  --animation-panel-border: color-mix(in srgb, var(--color-primary) 42%, var(--color-border) 58%);
  --animation-canvas-bg: radial-gradient(
    circle at 50% 35%,
    color-mix(in srgb, var(--color-primary) 22%, var(--color-surface) 78%) 0%,
    color-mix(in srgb, var(--color-primary) 12%, var(--color-surface-muted) 88%) 62%,
    var(--color-bg) 100%
  );
  --animation-canvas-border: color-mix(in srgb, var(--color-primary) 30%, var(--color-border) 70%);
  --animation-status-color: var(--color-text);
  --animation-sphere-color: color-mix(in srgb, var(--color-primary) 18%, #b8c7dd 82%);
  --animation-sphere-grid-color: color-mix(in srgb, var(--color-primary) 10%, #3a4963 90%);
  --animation-sphere-front-opacity: 0.2;
  --animation-sphere-back-opacity: 0.38;
}

[data-theme="dark"],
[data-theme$="-dark"] {
  --animation-panel-bg: radial-gradient(
    circle at 20% 12%,
    color-mix(in srgb, var(--color-primary) 42%, var(--color-surface) 58%) 0%,
    color-mix(in srgb, var(--color-primary) 24%, var(--color-surface-muted) 76%) 52%,
    color-mix(in srgb, var(--color-primary) 9%, var(--color-bg) 91%) 100%
  );
  --animation-panel-border: color-mix(in srgb, var(--color-primary) 58%, var(--color-border) 42%);
  --animation-canvas-bg: radial-gradient(
    circle at 50% 35%,
    color-mix(in srgb, var(--color-primary) 58%, var(--color-surface) 42%) 0%,
    color-mix(in srgb, var(--color-primary) 30%, var(--color-surface-muted) 70%) 56%,
    color-mix(in srgb, var(--color-primary) 14%, var(--color-bg) 86%) 100%
  );
  --animation-canvas-border: color-mix(in srgb, var(--color-primary) 55%, var(--color-border) 45%);
  --animation-status-color: #e6f0ff;
  --animation-sphere-color: color-mix(in srgb, var(--color-primary) 72%, #cfe1ff 28%);
  --animation-sphere-grid-color: color-mix(in srgb, var(--color-border) 88%, #dce8ff 12%);
  --animation-sphere-front-opacity: 0.11;
  --animation-sphere-back-opacity: 0.24;
}

.animation-page {
  width: min(96%, 980px);
  padding: 1.35rem;
  display: grid;
  gap: 1rem;
}

.animation-copy h2 {
  margin: 0 0 0.5rem;
}

.animation-copy p {
  margin: 0;
}

.animation-visual-card {
  border-radius: 14px;
  border: 1px solid var(--animation-panel-border);
  background: var(--animation-panel-bg);
  box-shadow: var(--shadow-md);
  padding: 1rem;
  display: grid;
  gap: 0.9rem;
}

.bloch-canvas {
  width: 100%;
  aspect-ratio: 16 / 10;
  min-height: 320px;
  border-radius: 10px;
  border: 1px solid var(--animation-canvas-border);
  background: var(--animation-canvas-bg);
  overflow: hidden;
}

.bloch-canvas canvas {
  width: 100%;
  height: 100%;
  display: block;
}

.animation-controls {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.animation-controls .btn {
  min-width: 148px;
}

.animation-status {
  margin: 0;
  text-align: center;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--animation-status-color);
}

@media (max-width: 640px) {
  .animation-page {
    padding: 1rem;
  }

  .bloch-canvas {
    min-height: 260px;
  }

  .animation-controls .btn {
    width: 100%;
  }
}