:root {
  color-scheme: light;
  --pink: #f7b1cd;
  --wine: #571635;
  --cream: #fff4df;
  --rail: #dcc3c7;
  --player-bottom: max(16px, env(safe-area-inset-bottom));
  font-family: -apple-system, BlinkMacSystemFont, "Arial Black", "Segoe UI", Arial, sans-serif;
  color: var(--wine);
  background: var(--pink);
  font-synthesis: weight;
}
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; }
body { overflow: hidden; background: var(--pink); overscroll-behavior: none; -webkit-tap-highlight-color: transparent; }
button, input { font: inherit; }
button, a, summary, input { -webkit-tap-highlight-color: transparent; }
button { border: 0; cursor: pointer; }
button:disabled { cursor: wait; }
button:focus-visible, input:focus-visible, summary:focus-visible, a:focus-visible { outline: 2px solid var(--wine); outline-offset: 4px; }
#stage { position: absolute; top: 0; left: 0; width: 100%; height: 100vh; height: 100lvh; overflow: hidden; }
#stage canvas { display: block; width: 100%; height: 100%; }
.invitation { position: relative; width: 100%; height: 100vh; height: 100svh; pointer-events: none; }
.invitation-copy { position: absolute; left: 7vw; top: 27vh; top: 27svh; }
#headline { margin: 0; font-size: clamp(88px, 13.8vw, 216px); line-height: .79; font-weight: 900; letter-spacing: -.075em; }
#headline span { display: block; white-space: nowrap; }
.caption { margin: 27px 0 0 6px; font-size: clamp(13px, 1.08vw, 16px); line-height: 1.3; font-weight: 550; letter-spacing: -.025em; transform: rotate(-4deg); transform-origin: left center; white-space: nowrap; }
#danceFrame { position: absolute; left: 40%; right: 4%; top: 10%; bottom: 124px; pointer-events: none; }
#status { position: absolute; left: 40%; right: 4%; top: 48%; text-align: center; font-size: 14px; line-height: 1.4; font-weight: 550; }
body.ready #status:empty { display: none; }
#player {
  position: absolute; left: 50%; bottom: var(--player-bottom); transform: translateX(-50%);
  width: min(560px, calc(100% - 32px)); padding: 14px 18px;
  display: grid; grid-template-columns: 48px minmax(0, 1fr) auto 32px;
  grid-template-rows: minmax(20px, auto) 20px; column-gap: 12px; row-gap: 4px; align-items: center;
  border-radius: 24px; background: var(--cream); pointer-events: auto;
}
.play-button { grid-column: 1; grid-row: 1 / 3; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; padding: 0; background: var(--wine); color: var(--cream); }
.play-button:disabled { opacity: .4; }
.play-button svg { width: 24px; height: 24px; fill: currentColor; }
.play-button .i-play { margin-left: 1px; }
.play-button .i-pause, .play-button.playing .i-play { display: none; }
.play-button.playing .i-pause { display: block; }
.track-label { grid-column: 2; grid-row: 1; font-size: 13px; line-height: 1.2; font-weight: 650; letter-spacing: -.025em; }
.track-time { grid-column: 3; grid-row: 1; font-size: 11px; line-height: 1.2; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; opacity: .72; }
.time-divider { padding: 0 1px; }
#seek { grid-column: 2 / 4; grid-row: 2; width: 100%; min-width: 0; height: 24px; margin: 0; padding: 0; border: 0; border-radius: 2px; background: transparent; color: var(--wine); accent-color: var(--wine); -webkit-appearance: none; appearance: none; cursor: pointer; touch-action: none; }
#seek::-webkit-slider-runnable-track { height: 3px; border-radius: 3px; background: linear-gradient(to right, var(--wine) 0 var(--progress, 0%), var(--rail) var(--progress, 0%) 100%); }
#seek::-webkit-slider-thumb { width: 11px; height: 11px; margin-top: -4px; border: 0; border-radius: 50%; background: var(--wine); -webkit-appearance: none; appearance: none; }
#seek::-moz-range-track { height: 3px; border: 0; border-radius: 3px; background: var(--rail); }
#seek::-moz-range-progress { height: 3px; border-radius: 3px; background: var(--wine); }
#seek::-moz-range-thumb { width: 11px; height: 11px; border: 0; border-radius: 50%; background: var(--wine); }
.sound-button { grid-column: 4; grid-row: 1 / 3; width: 36px; height: 44px; margin-left: -2px; padding: 7px; display: grid; place-items: center; color: var(--wine); background: transparent; border-radius: 12px; }
.sound-button svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.sound-button .i-off, .sound-button.muted .i-on { display: none; }
.sound-button.muted .i-off { display: block; }
#credits { position: absolute; right: max(18px, env(safe-area-inset-right)); bottom: var(--player-bottom); pointer-events: auto; font-size: 11px; line-height: 1.5; }
#credits summary { padding: 5px 0; list-style: none; cursor: pointer; opacity: .65; }
#credits summary::-webkit-details-marker { display: none; }
#credits[open] summary { opacity: 1; }
.credits-panel { position: absolute; right: 0; bottom: 32px; width: max-content; max-width: calc(100vw - 40px); padding: 12px 15px; border-radius: 14px; background: var(--cream); color: var(--wine); font-size: 12px; line-height: 1.65; white-space: nowrap; }
.credits-panel a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 2px; }
@media (max-width: 900px) {
  #credits { bottom: calc(var(--player-bottom) + 91px); }
}
@media (max-width: 700px) {
  .invitation-copy { left: max(7vw, calc(env(safe-area-inset-left) + 12px)); top: max(24px, calc(env(safe-area-inset-top) + 14px)); }
  #headline { font-size: clamp(82px, 22vw, 112px); line-height: .78; letter-spacing: -.075em; }
  .caption { margin: 18px 0 0 3px; font-size: 12px; }
  #danceFrame { left: max(4vw, env(safe-area-inset-left)); right: max(4vw, env(safe-area-inset-right)); top: clamp(210px, 29svh, 260px); bottom: 136px; }
  #status { left: 8%; right: 8%; top: 48%; font-size: 13px; }
  #player { padding: 12px 14px; grid-template-columns: 44px minmax(0, 1fr) auto 28px; column-gap: 9px; border-radius: 22px; }
  .play-button { width: 44px; height: 44px; }
  .track-label { font-size: 12px; }
  .track-time { font-size: 10px; }
  .sound-button { width: 32px; padding: 5px; }
  #credits { left: max(20px, env(safe-area-inset-left)); right: auto; bottom: calc(var(--player-bottom) + 85px); font-size: 10px; }
  .credits-panel { left: 0; right: auto; }
}
@media (orientation: landscape) and (max-height: 500px) {
  :root { --player-bottom: max(12px, env(safe-area-inset-bottom)); }
  .invitation-copy { left: max(6vw, calc(env(safe-area-inset-left) + 12px)); top: max(16svh, env(safe-area-inset-top)); }
  #headline { font-size: clamp(60px, 11.5vw, 108px); line-height: .78; }
  .caption { margin-top: 16px; font-size: 11px; }
  #danceFrame { left: 42%; right: max(3%, env(safe-area-inset-right)); top: 5%; bottom: 98px; }
  #status { left: 42%; right: 3%; top: 40%; }
  #player { width: min(480px, calc(100% - 32px)); padding: 10px 14px; grid-template-columns: 44px minmax(0, 1fr) auto 28px; column-gap: 9px; }
  .play-button { width: 44px; height: 44px; }
  #credits { left: max(16px, env(safe-area-inset-left)); right: auto; bottom: calc(var(--player-bottom) + 76px); font-size: 10px; }
  .credits-panel { left: 0; right: auto; }
}