:root {
  color-scheme: light;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #292c2e;
  background: #fff;
}

* { box-sizing: border-box; }

html, body { margin: 0; min-width: 240px; min-height: 100%; }

main { min-height: 100vh; min-height: 100svh; }

.logo-background {
  position: fixed;
  inset: 72px clamp(16px, 4vw, 80px);
  background-image: url("assets/logo.png");
  background-image: image-set(url("assets/logo.webp") type("image/webp"), url("assets/logo.png") type("image/png"));
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.sound-toggle {
  position: fixed;
  right: max(24px, env(safe-area-inset-right));
  bottom: max(24px, env(safe-area-inset-bottom));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 46px;
  padding: 11px 17px;
  border: 1px solid #d6d8d9;
  border-radius: 24px;
  background: #fff;
  color: inherit;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  touch-action: manipulation;
}

.sound-toggle:hover { background: #f4f4f4; border-color: #9b9ea0; }
.sound-toggle:focus-visible { outline: 2px solid #292c2e; outline-offset: 4px; }
.sound-on { display: none; }
.sound-toggle[aria-pressed="true"] .sound-on { display: inline; }
.sound-toggle[aria-pressed="true"] .sound-off { display: none; }
.fallback-player { position: fixed; bottom: 24px; right: 24px; max-width: calc(100% - 48px); }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 600px) {
  .sound-toggle {
    right: max(16px, env(safe-area-inset-right));
    bottom: max(16px, env(safe-area-inset-bottom));
  }
}