html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: #fff; font: 14px system-ui, sans-serif; }
#player { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
#fullscreen { position: absolute; top: max(16px, env(safe-area-inset-top)); right: calc(max(16px, env(safe-area-inset-right)) + 48px); width: 40px; height: 40px; border: 1px solid #ffffffcc; display: inline-flex; align-items: center; justify-content: center; padding: 0; border-radius: 50%; background: #fffffff2; color: #082c5c; box-shadow: 0 1px 2px #0000000d; backdrop-filter: blur(4px); cursor: pointer; transition: filter 150ms; }
#fullscreen svg { width: 16px; height: 16px; pointer-events: none; }
#fullscreen:hover { filter: brightness(0.96); } #fullscreen:active { filter: brightness(0.92); }
@media (prefers-reduced-motion: reduce) { #fullscreen { transition: none; } }
#fullscreen:focus-visible, #open-jig:focus-visible { outline: 2px solid #082c5c; outline-offset: 2px; }
#open-jig { position: absolute; bottom: 10px; left: 10px; border-radius: 8px; padding: 6px 9px; background: #ffffffe6; color: #082c5c; text-decoration: none; font-size: 12px; }
#embed-error { position: absolute; inset: 0; margin: 0; padding: 24px; display: grid; place-items: center; background: #fff; color: #082c5c; }
[hidden] { display: none !important; }