@media (orientation: landscape) and (min-width: 721px) {
  :root.playbar-enabled .player[data-playback-mode] {
    inset: auto 0 0;
    transform: none;
    width: auto;
    --playbar-inset: max(12px, env(safe-area-inset-left), env(safe-area-inset-right));
    grid-template:
      "timeline timeline timeline timeline timeline timeline timeline timeline timeline" auto
      "identity identity identity back play forward mode settings close" auto
      "detail detail detail back play forward mode settings close" auto
      / minmax(0, 1fr) 44px 44px 44px 48px 44px minmax(0, 1fr) 44px 44px;
    gap: 2px clamp(4px, 1vw, 12px);
    padding: 4px var(--playbar-inset) max(8px, env(safe-area-inset-bottom));
    border-width: 1px 0 0;
    border-radius: 0;
    box-shadow: 0 -8px 30px var(--shadow, #10071d66);
  }

  .playbar-enabled .player::before,
  .playbar-enabled .player::after {
    display: none;
  }

  .playbar-enabled .player-header,
  .playbar-enabled .player-footer {
    display: contents;
  }

  .playbar-enabled .player-title {
    grid-area: identity;
    min-height: 0;
  }

  .playbar-enabled .player .player-owner-row {
    min-height: 0;
    flex-wrap: nowrap;
    gap: 4px;
  }

  .playbar-enabled .player-identity > .copyable-space-id {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .playbar-enabled .player-listening-info { grid-area: detail; }
  .playbar-enabled .player-mode-control { grid-area: mode; justify-self: end; }
  .playbar-enabled .player-settings-toggle { grid-area: settings; }
  .playbar-enabled .player-header .player-close { grid-area: close; }
  .playbar-enabled .player-skip-button[aria-label="Back 30 seconds"] { grid-area: back; }
  .playbar-enabled .player-skip-button[aria-label="Forward 30 seconds"] { grid-area: forward; }

  .playbar-enabled .player .player-play-button {
    grid-area: play;
    width: 48px;
    height: 48px;
    align-self: center;
    transform: none;
  }

  .playbar-enabled .player :is(.player-skip-button, .player-settings-toggle, .player-close) {
    width: 44px;
    height: 44px;
    min-height: 44px;
  }

  .playbar-enabled .player-timeline {
    grid-area: timeline;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
  }

  :root.playbar-enabled .player[data-playback-mode] .player-progress {
    grid-area: auto;
    height: 24px;
    -webkit-tap-highlight-color: transparent;
    background:
      repeating-linear-gradient(to right, transparent 0 calc(10% - 1px), var(--panel, #251442) calc(10% - 1px) 10%) center / 100% 8px no-repeat,
      linear-gradient(to right, var(--accent, #ddd6fe) var(--progress),
      var(--edge, #ffffff45) var(--progress)) center / 100% 8px no-repeat;
  }

  .playbar-enabled .player-progress:focus { outline: none; }
  .playbar-enabled .player-progress:focus-visible {
    outline: 1px solid var(--accent);
    outline-offset: 2px;
  }

  .playbar-enabled .player-progress[data-pointer-focus]:focus-visible {
    outline: none;
  }

  .playbar-enabled .player-time {
    grid-area: auto;
    width: auto;
    justify-self: end;
    font-size: .75rem;
    text-align: right;
  }

  .playbar-enabled .player-settings {
    left: auto;
    right: max(12px, env(safe-area-inset-right));
    bottom: calc(100% + 8px);
    width: min(480px, calc(100% - max(12px, env(safe-area-inset-left)) - max(12px, env(safe-area-inset-right))));
    max-height: calc(100dvh - var(--player-height, 110px) - max(16px, env(safe-area-inset-top)));
  }
}