:root {
  color-scheme: dark;
  --background: #10131d;
  --foreground: #f0f1f8;
  --surface: #1a1e2a;
  --border: #373d4f;
  --hover: #2b3244;
  --muted: #a9b0c2;
  --accent: #a6c3ff;
  font-family: system-ui, sans-serif;
  background: var(--background);
  color: var(--foreground);
}

body { margin: 0; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.atara-stage {
  position: relative;
  height: 100svh;
  height: 100dvh;
  overflow: clip;
}

.atara-stage::before {
  position: absolute;
  inset: 84% 0 auto;
  height: 1px;
  background: #252a37;
  content: '';
}

.atara-stage[data-shot="close"]::before { visibility: hidden; }

.atara-art-frame {
  position: absolute;
  inset: 0 auto auto 0;
  width: min(92vw, 57svh, 560px);
  display: grid;
  justify-items: center;
  container-type: inline-size;
  transform-origin: 50% 93%;
}

.atara-glyphs {
  margin: 0;
  white-space: pre;
  font-family: Consolas, 'Liberation Mono', monospace;
  font-variant-ligatures: none;
  font-size: calc(100cqi / 69);
  line-height: .87;
  -webkit-text-stroke: .063em currentColor;
}

.atara-stage[data-shot="close"] .atara-art-frame {
  width: min(98vw, 83svh, 760px);
  transform-origin: 50% 50%;
}

.atara-stage[data-shot="close"] .atara-glyphs { line-height: .74; }

.controls {
  position: fixed;
  inset-block-start: max(16px, env(safe-area-inset-top));
  inset-inline-end: max(16px, env(safe-area-inset-right));
  z-index: 1;
}

.controls summary, .controls button, .controls a {
  box-sizing: border-box;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--foreground);
  font: inherit;
  font-size: .875rem;
  text-decoration: none;
  cursor: pointer;
}

.controls summary { list-style: none; }
.controls summary::-webkit-details-marker { display: none; }

.controls summary:hover, .controls button:hover, .controls a:hover {
  background: var(--hover);
}

.controls :is(summary, button, a):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.controls button[aria-pressed="true"] {
  border-color: var(--accent);
  color: var(--accent);
}

.controls-panel {
  position: absolute;
  inset-block-start: calc(100% + 8px);
  inset-inline-end: 0;
  display: grid;
  gap: 16px;
  box-sizing: border-box;
  width: min(288px, calc(100vw - 32px));
  max-height: calc(100dvh - max(16px, env(safe-area-inset-top)) - 68px - env(safe-area-inset-bottom));
  overflow: auto;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
}

.controls:not([open]) .controls-panel { display: none; }

.control-group {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.control-group h2 {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--muted);
  font-size: .8125rem;
  font-weight: 500;
}

  #atara-text-motion-expanded .c0 { color: light-dark(color-mix(in srgb, rgb(255 254 251) 64%, var(--foreground)), color-mix(in srgb, rgb(255 254 251) 94%, var(--foreground))); }
  #atara-text-motion-expanded .c1 { color: light-dark(color-mix(in srgb, rgb(255 248 245) 66%, var(--foreground)), color-mix(in srgb, rgb(255 248 245) 93%, var(--foreground))); }
  #atara-text-motion-expanded .c2 { color: light-dark(color-mix(in srgb, rgb(253 246 244) 66%, var(--foreground)), color-mix(in srgb, rgb(253 246 244) 93%, var(--foreground))); }
  #atara-text-motion-expanded .c3 { color: light-dark(color-mix(in srgb, rgb(244 243 247) 67%, var(--foreground)), color-mix(in srgb, rgb(244 243 247) 92%, var(--foreground))); }
  #atara-text-motion-expanded .c4 { color: light-dark(color-mix(in srgb, rgb(252 246 238) 66%, var(--foreground)), color-mix(in srgb, rgb(252 246 238) 93%, var(--foreground))); }
  #atara-text-motion-expanded .c5 { color: light-dark(color-mix(in srgb, rgb(247 239 239) 68%, var(--foreground)), color-mix(in srgb, rgb(247 239 239) 92%, var(--foreground))); }
  #atara-text-motion-expanded .c6 { color: light-dark(color-mix(in srgb, rgb(245 236 236) 68%, var(--foreground)), color-mix(in srgb, rgb(245 236 236) 92%, var(--foreground))); }
  #atara-text-motion-expanded .c7 { color: light-dark(color-mix(in srgb, rgb(255 236 215) 68%, var(--foreground)), color-mix(in srgb, rgb(255 236 215) 92%, var(--foreground))); }
  #atara-text-motion-expanded .c8 { color: light-dark(color-mix(in srgb, rgb(253 229 217) 70%, var(--foreground)), color-mix(in srgb, rgb(253 229 217) 91%, var(--foreground))); }
  #atara-text-motion-expanded .c9 { color: light-dark(color-mix(in srgb, rgb(244 225 225) 71%, var(--foreground)), color-mix(in srgb, rgb(244 225 225) 90%, var(--foreground))); }
  #atara-text-motion-expanded .c10 { color: light-dark(color-mix(in srgb, rgb(255 224 197) 70%, var(--foreground)), color-mix(in srgb, rgb(255 224 197) 90%, var(--foreground))); }
  #atara-text-motion-expanded .c11 { color: light-dark(color-mix(in srgb, rgb(255 216 186) 72%, var(--foreground)), color-mix(in srgb, rgb(255 216 186) 90%, var(--foreground))); }
  #atara-text-motion-expanded .c12 { color: light-dark(color-mix(in srgb, rgb(227 221 230) 72%, var(--foreground)), color-mix(in srgb, rgb(227 221 230) 89%, var(--foreground))); }
  #atara-text-motion-expanded .c13 { color: light-dark(color-mix(in srgb, rgb(224 213 224) 74%, var(--foreground)), color-mix(in srgb, rgb(224 213 224) 88%, var(--foreground))); }
  #atara-text-motion-expanded .c14 { color: light-dark(color-mix(in srgb, rgb(187 220 255) 73%, var(--foreground)), color-mix(in srgb, rgb(187 220 255) 88%, var(--foreground))); }
  #atara-text-motion-expanded .c15 { color: light-dark(color-mix(in srgb, rgb(179 213 255) 75%, var(--foreground)), color-mix(in srgb, rgb(179 213 255) 87%, var(--foreground))); }
  #atara-text-motion-expanded .c16 { color: light-dark(color-mix(in srgb, rgb(197 208 247) 75%, var(--foreground)), color-mix(in srgb, rgb(197 208 247) 87%, var(--foreground))); }
  #atara-text-motion-expanded .c17 { color: light-dark(color-mix(in srgb, rgb(200 200 230) 77%, var(--foreground)), color-mix(in srgb, rgb(200 200 230) 86%, var(--foreground))); }
  #atara-text-motion-expanded .c18 { color: light-dark(color-mix(in srgb, rgb(217 193 190) 77%, var(--foreground)), color-mix(in srgb, rgb(217 193 190) 86%, var(--foreground))); }
  #atara-text-motion-expanded .c19 { color: light-dark(color-mix(in srgb, rgb(250 182 143) 78%, var(--foreground)), color-mix(in srgb, rgb(250 182 143) 85%, var(--foreground))); }
  #atara-text-motion-expanded .c20 { color: light-dark(color-mix(in srgb, rgb(168 203 255) 77%, var(--foreground)), color-mix(in srgb, rgb(168 203 255) 86%, var(--foreground))); }
  #atara-text-motion-expanded .c21 { color: light-dark(color-mix(in srgb, rgb(164 197 255) 78%, var(--foreground)), color-mix(in srgb, rgb(164 197 255) 85%, var(--foreground))); }
  #atara-text-motion-expanded .c22 { color: light-dark(color-mix(in srgb, rgb(163 185 242) 80%, var(--foreground)), color-mix(in srgb, rgb(163 185 242) 84%, var(--foreground))); }
  #atara-text-motion-expanded .c23 { color: light-dark(color-mix(in srgb, rgb(141 180 255) 82%, var(--foreground)), color-mix(in srgb, rgb(141 180 255) 83%, var(--foreground))); }
  #atara-text-motion-expanded .c24 { color: light-dark(color-mix(in srgb, rgb(203 159 138) 83%, var(--foreground)), color-mix(in srgb, rgb(203 159 138) 81%, var(--foreground))); }
  #atara-text-motion-expanded .c25 { color: light-dark(color-mix(in srgb, rgb(138 162 222) 84%, var(--foreground)), color-mix(in srgb, rgb(138 162 222) 80%, var(--foreground))); }
  #atara-text-motion-expanded .c26 { color: light-dark(color-mix(in srgb, rgb(188 131 82) 88%, var(--foreground)), color-mix(in srgb, rgb(188 131 82) 77%, var(--foreground))); }
  #atara-text-motion-expanded .c27 { color: light-dark(color-mix(in srgb, rgb(148 126 121) 89%, var(--foreground)), color-mix(in srgb, rgb(148 126 121) 76%, var(--foreground))); }
  #atara-text-motion-expanded .c28 { color: light-dark(color-mix(in srgb, rgb(113 151 233) 86%, var(--foreground)), color-mix(in srgb, rgb(113 151 233) 79%, var(--foreground))); }
  #atara-text-motion-expanded .c29 { color: light-dark(color-mix(in srgb, rgb(106 130 193) 89%, var(--foreground)), color-mix(in srgb, rgb(106 130 193) 76%, var(--foreground))); }
  #atara-text-motion-expanded .c30 { color: light-dark(color-mix(in srgb, rgb(88 112 181) 91%, var(--foreground)), color-mix(in srgb, rgb(88 112 181) 73%, var(--foreground))); }
  #atara-text-motion-expanded .c31 { color: light-dark(color-mix(in srgb, rgb(123 108 108) 92%, var(--foreground)), color-mix(in srgb, rgb(123 108 108) 73%, var(--foreground))); }
  #atara-text-motion-expanded .c32 { color: light-dark(color-mix(in srgb, rgb(125 88 67) 93%, var(--foreground)), color-mix(in srgb, rgb(125 88 67) 71%, var(--foreground))); }
  #atara-text-motion-expanded .c33 { color: light-dark(color-mix(in srgb, rgb(106 84 79) 94%, var(--foreground)), color-mix(in srgb, rgb(106 84 79) 70%, var(--foreground))); }
  #atara-text-motion-expanded .c34 { color: light-dark(color-mix(in srgb, rgb(98 83 89) 94%, var(--foreground)), color-mix(in srgb, rgb(98 83 89) 70%, var(--foreground))); }
  #atara-text-motion-expanded .c35 { color: light-dark(color-mix(in srgb, rgb(100 71 58) 95%, var(--foreground)), color-mix(in srgb, rgb(100 71 58) 68%, var(--foreground))); }
  #atara-text-motion-expanded .c36 { color: light-dark(color-mix(in srgb, rgb(73 87 135) 94%, var(--foreground)), color-mix(in srgb, rgb(73 87 135) 70%, var(--foreground))); }
  #atara-text-motion-expanded .c37 { color: light-dark(color-mix(in srgb, rgb(81 72 86) 95%, var(--foreground)), color-mix(in srgb, rgb(81 72 86) 68%, var(--foreground))); }
  #atara-text-motion-expanded .c38 { color: light-dark(color-mix(in srgb, rgb(76 67 81) 95%, var(--foreground)), color-mix(in srgb, rgb(76 67 81) 67%, var(--foreground))); }
  #atara-text-motion-expanded .c39 { color: light-dark(color-mix(in srgb, rgb(91 67 53) 95%, var(--foreground)), color-mix(in srgb, rgb(91 67 53) 67%, var(--foreground))); }
  #atara-text-motion-expanded .c40 { color: light-dark(color-mix(in srgb, rgb(87 60 50) 96%, var(--foreground)), color-mix(in srgb, rgb(87 60 50) 66%, var(--foreground))); }
  #atara-text-motion-expanded .c41 { color: light-dark(color-mix(in srgb, rgb(78 59 51) 96%, var(--foreground)), color-mix(in srgb, rgb(78 59 51) 66%, var(--foreground))); }
  #atara-text-motion-expanded .c42 { color: light-dark(color-mix(in srgb, rgb(63 60 81) 96%, var(--foreground)), color-mix(in srgb, rgb(63 60 81) 66%, var(--foreground))); }
  #atara-text-motion-expanded .c43 { color: light-dark(color-mix(in srgb, rgb(71 57 51) 96%, var(--foreground)), color-mix(in srgb, rgb(71 57 51) 66%, var(--foreground))); }
  #atara-text-motion-expanded .c44 { color: light-dark(color-mix(in srgb, rgb(75 51 44) 96%, var(--foreground)), color-mix(in srgb, rgb(75 51 44) 65%, var(--foreground))); }
  #atara-text-motion-expanded .c45 { color: light-dark(color-mix(in srgb, rgb(65 51 53) 96%, var(--foreground)), color-mix(in srgb, rgb(65 51 53) 65%, var(--foreground))); }
  #atara-text-motion-expanded .c46 { color: light-dark(color-mix(in srgb, rgb(68 47 41) 97%, var(--foreground)), color-mix(in srgb, rgb(68 47 41) 64%, var(--foreground))); }
  #atara-text-motion-expanded .c47 { color: light-dark(color-mix(in srgb, rgb(67 41 38) 97%, var(--foreground)), color-mix(in srgb, rgb(67 41 38) 64%, var(--foreground))); }
  #atara-text-motion-expanded .c48 { color: light-dark(color-mix(in srgb, rgb(48 56 90) 96%, var(--foreground)), color-mix(in srgb, rgb(48 56 90) 65%, var(--foreground))); }
  #atara-text-motion-expanded .c49 { color: light-dark(color-mix(in srgb, rgb(50 45 59) 97%, var(--foreground)), color-mix(in srgb, rgb(50 45 59) 64%, var(--foreground))); }
  #atara-text-motion-expanded .c50 { color: light-dark(color-mix(in srgb, rgb(48 40 54) 97%, var(--foreground)), color-mix(in srgb, rgb(48 40 54) 63%, var(--foreground))); }
  #atara-text-motion-expanded .c51 { color: light-dark(color-mix(in srgb, rgb(57 39 34) 97%, var(--foreground)), color-mix(in srgb, rgb(57 39 34) 63%, var(--foreground))); }
  #atara-text-motion-expanded .c52 { color: light-dark(color-mix(in srgb, rgb(52 32 38) 97%, var(--foreground)), color-mix(in srgb, rgb(52 32 38) 62%, var(--foreground))); }
  #atara-text-motion-expanded .c53 { color: light-dark(color-mix(in srgb, rgb(50 31 29) 97%, var(--foreground)), color-mix(in srgb, rgb(50 31 29) 62%, var(--foreground))); }
  #atara-text-motion-expanded .c54 { color: light-dark(color-mix(in srgb, rgb(34 31 51) 97%, var(--foreground)), color-mix(in srgb, rgb(34 31 51) 62%, var(--foreground))); }
  #atara-text-motion-expanded .c55 { color: light-dark(color-mix(in srgb, rgb(40 28 31) 98%, var(--foreground)), color-mix(in srgb, rgb(40 28 31) 61%, var(--foreground))); }
  #atara-text-motion-expanded .c56 { color: light-dark(color-mix(in srgb, rgb(42 22 30) 98%, var(--foreground)), color-mix(in srgb, rgb(42 22 30) 61%, var(--foreground))); }
  #atara-text-motion-expanded .c57 { color: light-dark(color-mix(in srgb, rgb(30 22 31) 98%, var(--foreground)), color-mix(in srgb, rgb(30 22 31) 61%, var(--foreground))); }
  #atara-text-motion-expanded .c58 { color: light-dark(color-mix(in srgb, rgb(33 15 26) 98%, var(--foreground)), color-mix(in srgb, rgb(33 15 26) 60%, var(--foreground))); }
  #atara-text-motion-expanded .c59 { color: light-dark(color-mix(in srgb, rgb(34 7 31) 98%, var(--foreground)), color-mix(in srgb, rgb(34 7 31) 59%, var(--foreground))); }
  #atara-text-motion-expanded .c60 { color: light-dark(color-mix(in srgb, rgb(18 17 26) 98%, var(--foreground)), color-mix(in srgb, rgb(18 17 26) 60%, var(--foreground))); }
  #atara-text-motion-expanded .c61 { color: light-dark(color-mix(in srgb, rgb(17 9 18) 98%, var(--foreground)), color-mix(in srgb, rgb(17 9 18) 59%, var(--foreground))); }
  #atara-text-motion-expanded .c62 { color: light-dark(color-mix(in srgb, rgb(18 1 19) 98%, var(--foreground)), color-mix(in srgb, rgb(18 1 19) 58%, var(--foreground))); }
  #atara-text-motion-expanded .c63 { color: light-dark(color-mix(in srgb, rgb(3 2 5) 98%, var(--foreground)), color-mix(in srgb, rgb(3 2 5) 57%, var(--foreground))); }