:root { color-scheme: dark; font-family: system-ui,"Microsoft YaHei",sans-serif; background: #061d17; }
* { box-sizing: border-box; }
body { margin: 0; }
.page { position: relative; width: min(100%, 941px); margin: 0 auto; }
.artwork { display: block; width: 100%; height: auto; }
button { cursor: pointer; font: inherit; }
button:focus-visible,input:focus-visible { outline: 2px solid #ffe5ab; outline-offset: -2px; }
.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; }
.player { position: absolute; left: 4.5696%; top: 33.97%; width: 91.39%; height: 34.21%; overflow: visible; }
.media-stage { position: absolute; inset: 1.3%; overflow: hidden; border-radius: clamp(10px,1.8vw,22px); background: #000; }
.player video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; pointer-events: none; border-radius: inherit; }
.media-poster { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: inherit; object-fit: cover; pointer-events: none; }
.player-frame { position: absolute; inset: 6px;width: calc(100% - 12px); height: calc(100% - 12px); pointer-events: none; }
@media (max-width: 768px) {
  .player-frame {
    inset: 3px;
    width: calc(100% - 6px);
    height: calc(100% - 6px);
  }
}
[hidden] { display: none !important; }
.center-play { position: absolute; left: 50%; top: 47%; transform: translate(-50%,-50%); width: 14%; aspect-ratio: 1; border: 2px solid #f7e7cb; border-radius: 50%; background: #241708f5; color: #fff6e4; display: grid; place-items: center; padding: 3%; }
.center-play svg { width: 100%; fill: currentColor; }
.controls { position: absolute; bottom: 9px; left: 15px; right: 15px; display: flex; align-items: center; gap: clamp(4px,1vw,12px); min-height: 14%; padding: 18px 8px 4px; border-radius: 0 0 12px 12px; background: linear-gradient(to bottom,transparent,rgba(0,0,0,.18) 20%,rgba(0,0,0,.6)); color: #fff; z-index: 2; }
.controls button { border: 0; background: transparent; color: white; min-width: 28px; height: 32px; padding: 4px; font-size: 19px; display: grid; place-items: center; }
.toggle-play svg { grid-area: 1 / 1; width: 24px; height: 24px; fill: currentColor; }
.toggle-play .pause-icon { display: none; }
.toggle-play.is-playing .play-icon { display: none; }
.toggle-play.is-playing .pause-icon { display: block; }
.controls .fullscreen svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.seek { flex: 1; width: 0; min-width: 20px; accent-color: #f5dca6; cursor: pointer; }
.time { white-space: nowrap; font-size: clamp(10px,1.6vw,15px); font-variant-numeric: tabular-nums; }
.player.expanded,.player:fullscreen { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 20; border-radius: 0; overflow: hidden; background: #000; }
.player.expanded .media-stage,.player:fullscreen .media-stage { inset: 0; border-radius: 0; }
.player.expanded video,.player:fullscreen video { object-fit: contain; }
.player.expanded .center-play,.player:fullscreen .center-play { width: 88px; padding: 20px; top: 50%; }
.player.expanded .controls,.player:fullscreen .controls { min-height: 68px; padding: 24px 16px max(12px,env(safe-area-inset-bottom)); }
.player.expanded .player-frame,.player:fullscreen .player-frame { display: none; }
.player-error { position: absolute; left: 5%; right: 5%; bottom: 14%; margin: 0; padding: 10px; font-size: 13px; color: white; background: #222e; border-radius: 8px; z-index: 2; }
@media(max-width:480px) { .controls { left: 10px; right: 10px; bottom: 8px; gap: 2px; padding: 12px 4px 3px; } .controls button { min-width: 26px; } .time { font-size: 10px; } }
.notice { max-width: min(88vw,380px); padding: 24px; border: 1px solid #b79856; border-radius: 14px; background: #10271f; color: #f5e6c5; }
.notice::backdrop { background: #0009; }
.notice p { line-height: 1.7; margin-top: 0; }
.notice-close,.file-label { display: inline-block; border: 0; border-radius: 8px; background: #eac987; color: #18261e; padding: 10px 18px; }
.preview { width: min(100%,941px); margin: 0 auto; padding: 18px; border-top: 1px solid #b79856; color: #eee1c3; background: #10271f; line-height: 1.7; }
.preview:not([hidden]) { display: grid; gap: 10px; }
.file-label { width: fit-content; cursor: pointer; }
.file-label input { display: block; max-width: 100%; margin-top: 8px; }
.preview small { color: #c6c8bf; }