.player { position: relative; width: min(100%, calc(72vh * 16 / 9)); margin-top: 24px; scroll-margin-top: 80px; }
.player [hidden] { display: none; }
.player-anchor { position: absolute; inset: 0 0 auto; aspect-ratio: 16 / 9; pointer-events: none; }
.player-mini-actions { display: flex; gap: 4px; margin-left: auto; }
.player.is-floating .player-surface { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 5; width: min(320px, calc(100vw - 32px)); background: var(--surface); border: 1px solid var(--line); }
.player.is-floating .player-controls { padding: 0 8px 4px; }
.player.is-floating .player-bar { gap: 0 8px; flex-wrap: nowrap; }
.player.is-floating .player-volume, .player.is-floating .player-settings, .player.is-floating .player-view-controls { display: none; }
.player .wframe { position: relative; width: 100%; margin-top: 0; cursor: pointer; }
.player video { display: block; width: 100%; height: 100%; object-fit: contain; }
.player-pip-notice { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; padding: 24px; background: var(--frame); color: #ebebe8; font-size: 14px; text-align: center; pointer-events: none; }
.player-view-controls { display: flex; align-items: center; gap: 8px; }
.player-cover { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #ebebe8; background: rgba(0, 0, 0, 0.22); }
.player-cover svg { width: 52px; height: 52px; padding: 12px; border: 1px solid rgba(235, 235, 232, 0.6); }
.player-feedback { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 64px; height: 64px; color: #ebebe8; background: rgba(0, 0, 0, 0.65); pointer-events: none; animation: player-feedback 0.6s var(--ease) both; }
.player-feedback svg { width: 28px; height: 28px; }
.player-feedback.has-label { width: auto; min-width: 120px; grid-auto-flow: column; gap: 8px; padding: 12px 16px; font: 12px/1.4 var(--mono); white-space: nowrap; }
@keyframes player-feedback {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
  20%, 75% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  to { opacity: 0; transform: translate(-50%, -50%) scale(1.1); }
}
.player button:disabled { cursor: wait; opacity: 0.5; }
.player-controls { padding-top: 8px; }
.player-bar { position: relative; display: flex; flex-wrap: nowrap; align-items: center; gap: 0 16px; }
.player-bar button { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }
.player-bar button svg { width: 22px; height: 22px; }
.player-play[data-icon="pause"], .player-settings-toggle[aria-expanded="true"], .player-pip[aria-pressed="true"] { color: var(--accent); }
.player [data-icon="loading"] svg { animation: player-spin 1s linear infinite; }
@keyframes player-spin { to { transform: rotate(360deg); } }
.player-time { font: 12px/1 var(--mono); color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.player-volume { position: relative; display: flex; align-items: center; gap: 8px; margin-left: auto; }
.player-volume input { width: 80px; }
.player-volume-panel { position: fixed; z-index: 3; display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; width: 24px; height: 76px; padding: 6px 0; }
.player .player-volume-panel input[type="range"] { width: 44px; height: 64px; writing-mode: vertical-lr; direction: rtl; touch-action: none; }
.player .player-volume-panel input[type="range"]:focus-visible { outline: none; }
.player .player-volume-panel input[type="range"]::-webkit-slider-runnable-track { width: 2px; height: 100%; background: linear-gradient(to top, var(--fg) var(--progress, 0%), var(--muted) var(--progress, 0%)); }
.player .player-volume-panel input[type="range"]::-webkit-slider-thumb { margin-top: 0; margin-left: -4px; }
.player .player-volume-panel input[type="range"]:focus-visible::-webkit-slider-thumb { outline: 1.5px solid var(--accent); outline-offset: 3px; }
.player .player-volume-panel input[type="range"]::-moz-range-track { width: 2px; height: 100%; background: var(--muted); }
.player .player-volume-panel input[type="range"]::-moz-range-progress { width: 2px; background: var(--fg); }
.player .player-volume-panel input[type="range"]:focus-visible::-moz-range-thumb { outline: 1.5px solid var(--accent); outline-offset: 3px; }
.player-settings-panel { position: absolute; right: 0; bottom: calc(100% + 8px); z-index: 3; width: min(264px, calc(100vw - 32px)); max-height: calc(100dvh - 96px); overflow-y: auto; padding: 8px 16px; border: 1px solid var(--line); background: var(--surface); }
.player-settings-panel.opens-below { top: calc(100% + 8px); bottom: auto; }
.player.is-compact .player-bar { gap: 0 8px; }
.player-setting { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 52px; font-size: 14px; cursor: pointer; }
.player-rate { min-height: 44px; padding: 0 8px; border: 1px solid var(--line); border-radius: 0; background: var(--surface); color: var(--fg); font: inherit; cursor: pointer; }
.player-loop { position: relative; width: 34px; height: 20px; margin: 0; border: 1px solid var(--muted); border-radius: 10px; appearance: none; -webkit-appearance: none; background: var(--bg); cursor: pointer; }
.player-loop::before { content: ""; position: absolute; left: 3px; top: 3px; width: 12px; height: 12px; border-radius: 50%; background: var(--muted); }
.player-loop:checked { border-color: var(--accent); background: var(--accent); }
.player-loop:checked::before { transform: translateX(14px); background: var(--bg); }
.player-shortcuts { position: fixed; top: 80px; right: max(16px, env(safe-area-inset-right)); z-index: 4; width: min(360px, calc(100vw - 32px)); max-height: calc(100dvh - 96px); overflow-y: auto; padding: 12px 16px 16px; border: 1px solid var(--line); background: var(--surface); }
.player-shortcuts-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.player-shortcuts h2 { font-size: 15px; font-weight: 500; }
.player-shortcuts-close { display: grid; place-items: center; min-width: 44px; min-height: 44px; }
.player-shortcuts-close svg { width: 22px; height: 22px; }
.player-shortcuts dl { margin: 8px 0 0; }
.player-shortcuts dl > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 32px; }
.player-shortcuts dt, .player-shortcuts dd { font-size: 12px; }
.player-shortcuts dd { margin: 0; white-space: nowrap; }
.player-shortcuts kbd { font: 11px/1.6 var(--mono); }
.player-shortcuts p { margin-top: 12px; font-size: 12px; line-height: 1.5; color: var(--muted); }
.player-note, .player-status { font-size: 12px; line-height: 1.6; color: var(--muted); }
.player-note { margin-top: 4px; }
.player-status:empty { display: none; }
.player input[type="range"] { display: block; height: 32px; margin: 0; padding: 0; appearance: none; -webkit-appearance: none; background: transparent; cursor: pointer; accent-color: var(--fg); }
.player-seek { width: 100%; }
.player-timeline { position: relative; }
.player-seek-preview { position: absolute; bottom: calc(50% + 14px); z-index: 1; transform: translateX(-50%); color: var(--bg); background: var(--fg); font: 12px/1.4 var(--mono); white-space: nowrap; pointer-events: none; }
.player-seek-preview-time { display: block; padding: 4px 6px; text-align: center; }
.player-seek-thumbnail { display: block; width: 160px; height: 90px; background-color: var(--frame); background-repeat: no-repeat; }
.player-seek-preview.has-thumbnail { border: 1px solid var(--line); background: var(--surface); color: var(--fg); }
.player input[type="range"]:disabled { cursor: wait; opacity: 0.5; }
.player input[type="range"]::-webkit-slider-runnable-track { height: 2px; background: linear-gradient(to right, var(--fg) var(--progress, 0%), transparent var(--progress, 0%)), var(--buffered, linear-gradient(var(--line), var(--line))); }
.player input[type="range"]::-webkit-slider-thumb { width: 10px; height: 10px; margin-top: -4px; appearance: none; -webkit-appearance: none; border: 0; border-radius: 50%; background: var(--fg); }
.player input[type="range"]::-moz-range-track { height: 2px; background: var(--buffered, var(--line)); }
.player input[type="range"]::-moz-range-progress { height: 2px; background: var(--fg); }
.player input[type="range"]::-moz-range-thumb { width: 10px; height: 10px; border: 0; border-radius: 50%; background: var(--fg); }
.player input.player-seek[type="range"]::-webkit-slider-runnable-track { background: linear-gradient(to right, var(--accent) var(--progress, 0%), transparent var(--progress, 0%)), var(--buffered, linear-gradient(var(--line), var(--line))); }
.player input.player-seek[type="range"]::-webkit-slider-thumb { background: var(--accent); }
.player input.player-seek[type="range"]::-moz-range-thumb { background: var(--accent); }
.player input.player-seek[type="range"]::-moz-range-progress { background: var(--accent); }
.player:fullscreen { display: flex; flex-direction: column; justify-content: center; width: 100%; height: 100%; margin: 0; padding: 24px; background: var(--bg); }
.player:fullscreen .player-surface { display: flex; flex: 1; flex-direction: column; min-height: 0; }
.player:fullscreen .wframe { flex: 1; min-height: 0; aspect-ratio: auto; }
.player:fullscreen .player-controls, .player:fullscreen .player-note { transition: opacity 0.2s; }
.player:fullscreen.is-idle, .player:fullscreen.is-idle .wframe { cursor: none; }
.player:fullscreen.is-idle .player-controls, .player:fullscreen.is-idle .player-note { opacity: 0; pointer-events: none; }
@media (max-width: 720px) {
  .player-bar { gap: 0 10px; }
  .player-volume input { width: 48px; }
  .player input[type="range"] { height: 44px; }
}
@media (max-width: 380px) {
  .player-bar { gap: 0 8px; }
  .player-volume { gap: 4px; }
  .player-volume input { width: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .player [data-icon="loading"] svg, .player-feedback { animation: none; }
  .player-feedback { transform: translate(-50%, -50%); }
  .player:fullscreen .player-controls, .player:fullscreen .player-note { transition: none; }
}