* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #000; }
body { overscroll-behavior: none; }
#canvas { position: fixed; inset: 0; overflow: hidden; touch-action: none; }
.piece { position: absolute; margin: 0; padding: 0; border: 0; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-user-drag: none; }
.piece.is-dragging { cursor: grabbing; }
.piece:focus { outline: none; }
.piece:focus-visible { outline: 1px solid #fff; outline-offset: 3px; }
.piece img, .piece video { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; -webkit-user-drag: none; }

 .piece audio { display: none; }
.audio-player { display: flex; align-items: center; gap: 8px; width: 100%; height: 100%; padding: 0 10px; background: #171717; color: #fff; }
.audio-button { display: flex; align-items: center; justify-content: center; flex: 0 0 22px; width: 22px; height: 28px; padding: 0; border: 0; border-radius: 0; background: transparent; color: inherit; cursor: pointer; touch-action: manipulation; }
.audio-button svg { display: block; width: 17px; height: 17px; }
.audio-button:focus-visible, .audio-seek:focus-visible { outline: 1px solid #fff; outline-offset: 3px; }
.audio-time { flex: 0 0 auto; font: 9px/1 Arial, sans-serif; color: #ddd; white-space: nowrap; font-variant-numeric: tabular-nums; }
.audio-seek { appearance: none; -webkit-appearance: none; flex: 1 1 auto; min-width: 0; width: 40px; height: 18px; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; color: #fff; cursor: pointer; touch-action: pan-y; }
.audio-seek::-webkit-slider-runnable-track { height: 2px; background: linear-gradient(to right, #fff var(--progress, 0%), #606060 var(--progress, 0%)); }
.audio-seek::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 7px; height: 7px; margin-top: -2.5px; border: 0; border-radius: 50%; background: #fff; }
.audio-seek::-moz-range-track { height: 2px; background: #606060; }
.audio-seek::-moz-range-progress { height: 2px; background: #fff; }
.audio-seek::-moz-range-thumb { width: 7px; height: 7px; border: 0; border-radius: 50%; background: #fff; }
.audio-seek:disabled { opacity: .4; cursor: default; }

.fullscreen-overlay { position: fixed; inset: 0; z-index: 2147483647; display: flex; align-items: center; justify-content: center; background: #000; }
.fullscreen-overlay[hidden] { display: none; }
.fullscreen-overlay:fullscreen { width: 100vw; height: 100vh; }
.fullscreen-overlay .piece.is-expanded { position: relative; width: 100% !important; height: 100% !important; transform: none !important; cursor: default; outline: none; }
.fullscreen-overlay .piece.is-expanded img, .fullscreen-overlay .piece.is-expanded video { width: 100%; height: 100%; object-fit: contain; }
.fullscreen-overlay .piece.audio-piece.is-expanded { width: min(640px, calc(100vw - 40px)) !important; height: 48px !important; }
.fullscreen-close { position: absolute; top: max(12px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right)); z-index: 2147483647; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 10px; border: 0; border-radius: 0; background: #0008; color: #fff; cursor: pointer; }
.fullscreen-close svg { width: 24px; height: 24px; }
.fullscreen-close:focus-visible { outline: 1px solid #fff; outline-offset: 2px; }