:root {
  --mvp-ink: #f4f1ea;
  --mvp-dim: #a8a39a;
  --mvp-bg: #0e0d0c;
  --mvp-panel: #1b1a18;
  --mvp-hot: #ff5d3a;
  --mvp-radius: 10px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--mvp-bg);
  color: var(--mvp-ink);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

a { color: var(--mvp-hot); }

.mvp-doc {
  max-width: 46rem;
  margin: 0 auto;
  padding: 3.5rem 1.25rem 4rem;
}

.mvp-doc h1 { font-size: 1.6rem; margin: 0 0 .25rem; letter-spacing: -.01em; }
.mvp-doc h2 { font-size: 1.05rem; margin: 2.2rem 0 .5rem; color: var(--mvp-dim); text-transform: uppercase; letter-spacing: .06em; }

.mvp-lede { color: var(--mvp-dim); margin: 0 0 1.5rem; }

.mvp-snippet {
  background: var(--mvp-panel);
  border-radius: var(--mvp-radius);
  padding: 1rem 1.1rem;
  overflow-x: auto;
  font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: pre;
}

.mvp-params { width: 100%; border-collapse: collapse; font-size: .92rem; }
.mvp-params th, .mvp-params td { text-align: left; padding: .45rem .5rem; border-bottom: 1px solid #2c2a27; vertical-align: top; }
.mvp-params code { color: var(--mvp-hot); }

.mvp-foot { margin-top: 3rem; color: var(--mvp-dim); font-size: .85rem; }

/* player */
.mvp-frame {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: radial-gradient(120% 90% at 30% 20%, hsl(var(--mvp-hue) 55% 28%), var(--mvp-bg) 70%);
  overflow: hidden;
}

.mvp-art {
  width: min(62vw, 62vh);
  aspect-ratio: 1;
  border-radius: 22%;
  background:
    conic-gradient(from calc(var(--mvp-hue) * 1deg), hsl(var(--mvp-hue) 80% 62%), hsl(calc(var(--mvp-hue) + 120) 80% 66%), hsl(var(--mvp-hue) 80% 62%));
  opacity: .35;
  filter: blur(2px);
}

.mvp-play {
  position: absolute;
  width: 76px;
  height: 76px;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, .55);
  cursor: pointer;
}

.mvp-play::after {
  content: "";
  position: absolute;
  left: 31px;
  top: 24px;
  border-style: solid;
  border-width: 14px 0 14px 22px;
  border-color: transparent transparent transparent var(--mvp-ink);
}

.mvp-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .7rem 1rem;
  background: linear-gradient(transparent, rgba(0, 0, 0, .7));
  font-size: .9rem;
}

.mvp-bar a { color: var(--mvp-ink); text-decoration: none; opacity: .85; }

.mvp-note {
  position: absolute;
  max-width: 22rem;
  padding: 1rem 1.2rem;
  border-radius: var(--mvp-radius);
  background: rgba(14, 13, 12, .88);
  text-align: center;
  display: none;
}

.mvp-frame[data-mvp-state="wait"] .mvp-play { animation: mvp-spin 1s linear infinite; }
.mvp-frame[data-mvp-state="err"] .mvp-play { display: none; }
.mvp-frame[data-mvp-state="err"] .mvp-note { display: block; }

@keyframes mvp-spin { to { transform: rotate(1turn); } }

@media (max-width: 30em) {
  .mvp-doc { padding-top: 2rem; }
  .mvp-play { width: 60px; height: 60px; }
  .mvp-play::after { left: 24px; top: 18px; border-width: 12px 0 12px 18px; }
}