:root {
  color-scheme: light;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #f2eee6;
  color: #535d47;
  font-synthesis: none;
}
* { box-sizing: border-box; }
body {
  display: grid;
  place-items: center;
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  background: #f2eee6;
}
.shell {
  width: min(1800px, calc(100% - clamp(24px, 4vw, 80px)));
  min-width: 0;
  margin-inline: auto;
  padding: clamp(12px, 2vw, 28px) 0;
}
.recreation-stage { width: 100%; }
.viewport {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  max-height: min(calc(100vh - 120px), 1080px);
  max-height: min(calc(100svh - 120px), 1080px);
  overflow: hidden;
  border-radius: 8px;
  background: #e8e8e3;
}
/* The frame owns the size, independently of the canvas's rendering resolution. */
canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; touch-action: none; }
#recreation[data-orbit-dragging="true"] { cursor: grabbing; }
.timeline {
  --progress: 0%;
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: 8px;
  transform: translateX(-50%);
  appearance: none;
  -webkit-appearance: none;
  width: min(360px, calc(100% - 48px));
  height: 32px;
  margin: 0;
  padding: 0;
  background: transparent;
  opacity: .3;
  cursor: pointer;
  touch-action: none;
  transition: opacity .18s;
}
.timeline:hover, .timeline:focus-visible, .timeline:active { opacity: .8; }
.timeline:focus-visible { outline: 1px solid #788567; outline-offset: 1px; border-radius: 8px; }
.timeline:disabled { opacity: 0; pointer-events: none; }
.timeline::-webkit-slider-runnable-track {
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(to right, #535d47 var(--progress), #535d473d var(--progress));
}
.timeline::-moz-range-track {
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(to right, #535d47 var(--progress), #535d473d var(--progress));
}
.timeline::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 8px;
  height: 8px;
  margin-top: -3px;
  border: 0;
  border-radius: 50%;
  background: #535d47;
}
.timeline::-moz-range-thumb { width: 8px; height: 8px; border: 0; border-radius: 50%; background: #535d47; }
.controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 16px auto 0;
}
button {
  appearance: none;
  min-height: 44px;
  border: 1px solid transparent;
  font: inherit;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
  -webkit-tap-highlight-color: transparent;
}
button:disabled { cursor: wait; opacity: .4; }
button:focus-visible { outline: 2px solid #788567; outline-offset: 3px; }
#toggle {
  display: grid;
  place-items: center;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
  background: #657052;
  color: #fbf8ef;
}
#toggle:hover:not(:disabled) { background: #515e42; }
#toggle svg { grid-area: 1 / 1; width: 21px; height: 21px; fill: currentColor; }
#toggle[data-playing="true"] .icon-play,
#toggle[data-playing="false"] .icon-pause { display: none; }
.stage-nav { min-width: 0; }
.stage-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.stage-button {
  padding: 9px 14px;
  border-radius: 22px;
  background: transparent;
  color: #888a7b;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.3;
}
.stage-button:hover:not(:disabled) { background: #e7e8de; color: #606c50; }
.stage-button.is-active { border-color: #c9d0bb; background: #e3e8d8; color: #4e5b3e; }
.render-error {
  position: absolute;
  inset: 0;
  align-content: center;
  margin: 0;
  padding: 24px;
  text-align: center;
  color: #777768;
  font-size: 13px;
}
@media (max-width: 800px) {
  .viewport { aspect-ratio: 1; }
  .controls { gap: 10px; }
  .stage-button { padding-inline: 10px; }
}
@media (max-width: 600px) {
  .controls { flex-direction: column; gap: 8px; margin-top: 12px; }
  .stage-list { column-gap: 4px; row-gap: 2px; }
}
@media (max-height: 540px) and (orientation: landscape) {
  .shell { padding-block: 12px; }
  .viewport { max-height: calc(100svh - 104px); }
  .controls { margin-top: 10px; }
}