/* Demo page: the canvas full screen and a floating play / restart dock. */

:root {
  --dock-bg: rgba(255, 255, 255, .72);
  --dock-line: rgba(0, 0, 0, .08);
  --dock-ink: #1d1c1a;
  --dock-hover: rgba(0, 0, 0, .06);
  --dock-play: #1d1c1a;
  --dock-play-ink: #fff;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --dock-bg: rgba(40, 40, 44, .72); --dock-line: rgba(255, 255, 255, .1); --dock-ink: #ecebe8;
    --dock-hover: rgba(255, 255, 255, .08); --dock-play: #ecebe8; --dock-play-ink: #1b1b1d;
  }
}
:root[data-theme="dark"] {
  --dock-bg: rgba(40, 40, 44, .72); --dock-line: rgba(255, 255, 255, .1); --dock-ink: #ecebe8;
  --dock-hover: rgba(255, 255, 255, .08); --dock-play: #ecebe8; --dock-play-ink: #1b1b1d;
}

.demo { position: relative; height: 100vh; height: 100dvh; }
.demo .viewport { position: absolute; inset: 0; }

.dock {
  position: fixed; left: 50%; bottom: max(24px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 6px; padding: 6px;
  border-radius: 999px; background: var(--dock-bg); color: var(--dock-ink);
  border: 1px solid var(--dock-line);
  box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 10px 30px -6px rgba(0,0,0,.22);
  backdrop-filter: blur(18px) saturate(1.6); -webkit-backdrop-filter: blur(18px) saturate(1.6);
  z-index: 10; user-select: none;
  animation: dock-in .5s cubic-bezier(.2, .9, .3, 1.2) both .15s;
}
@keyframes dock-in { from { opacity: 0; transform: translate(-50%, 14px) scale(.96); } }

.dock-btn {
  all: unset; box-sizing: border-box; display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 50%; cursor: pointer; color: inherit;
  transition: background .15s, transform .15s, opacity .2s;
}
.dock-btn svg { width: 20px; height: 20px; }
.dock-btn:hover { background: var(--dock-hover); }
.dock-btn:active { transform: scale(.92); }
.dock-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.dock-btn:disabled { opacity: .35; cursor: default; pointer-events: none; }

.dock-btn.play { width: 48px; height: 48px; background: var(--dock-play); color: var(--dock-play-ink); }
.dock-btn.play:hover { background: var(--dock-play); transform: scale(1.05); }
.dock-btn.play:active { transform: scale(.94); }
.dock-btn.play svg { width: 22px; height: 22px; fill: currentColor; }
.dock-btn.play .i-play { transform: translateX(1px); }
.dock-btn.play .i-pause, .dock-btn.play.playing .i-play { display: none; }
.dock-btn.play.playing .i-pause { display: block; }

.dock-sep { width: 1px; height: 22px; background: var(--dock-line); margin: 0 2px; }

.loading {
  position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0;
  color: var(--muted); font-size: 14px; pointer-events: none; transition: opacity .3s;
}
.loading.gone { opacity: 0; }