.occasion-listen-dialog{width:min(780px,calc(100% - 32px));max-height:calc(100dvh - 32px);padding:28px;border:0;border-radius:16px;background:#fff;color:#191b30;box-shadow:0 24px 80px #171b3040;overflow-y:auto;overscroll-behavior:contain}
.occasion-listen-dialog::backdrop{background:#171b306b}
.occasion-listen-header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:24px}
.occasion-listen-header h2{margin:0;padding:0;font-size:22px;line-height:1.3}
.occasion-listen-close{display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;min-height:44px;padding:0;border:0;border-radius:6px;background:#f4f2fb;color:#4d4567}
.occasion-listen-close svg{width:20px;height:20px}
.occasion-listen-layout{display:grid;grid-template-columns:minmax(0,240px) minmax(0,1fr);gap:28px;align-items:center}
.occasion-listen-art{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:12px;background:#f3f1fa}
.occasion-listen-content{min-width:0}
.occasion-listen-title{font-size:28px;line-height:1.25;margin:0;overflow-wrap:anywhere;text-wrap:balance}
.occasion-listen-dialog .occasion-listen-context{font-size:14px;line-height:1.4;margin:8px 0 18px;color:#596174}
.occasion-listen-versions{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0}
.occasion-listen-versions button{min-height:44px;padding:8px 18px;border:1px solid #d9d2ed;border-radius:6px;background:white;color:#4d4567;font-size:14px;font-weight:600}
.occasion-listen-versions button[aria-pressed=true]{border-color:#6046dc;background:#f1edff;color:#5138c2}
.occasion-listen-dialog .occasion-listen-kind{font-size:13px;color:#596174;margin:12px 0}
.occasion-listen-player{display:flex;align-items:center;gap:14px;margin:14px 0 8px}
.occasion-listen-play{display:grid;place-items:center;flex:0 0 52px;width:52px;height:52px;min-height:52px;padding:0;border:0;border-radius:50%;background:#6046dc;color:white}
.occasion-listen-play svg{width:23px;height:23px}
.occasion-listen-timeline{flex:1;min-width:0}
.occasion-listen-timeline input[type=range]{display:block;width:100%;min-height:24px;height:24px;padding:0;border:0;background:transparent;accent-color:#6046dc;cursor:pointer}
.occasion-listen-dialog .occasion-listen-times{display:flex;justify-content:space-between;gap:12px;font-size:12px;font-variant-numeric:tabular-nums;line-height:1.3;color:#596174;margin:2px 0 0}
.occasion-listen-dialog .occasion-listen-status{font-size:13px;line-height:1.45;color:#596174;margin:12px 0 0;overflow-wrap:anywhere}
.occasion-listen-status:empty{display:none}
.occasion-listen-dialog .occasion-listen-action{min-height:48px;margin-top:20px;background:#6046dc;color:white;border-color:#6046dc;font-size:14px}
.occasion-listen-dialog button:focus-visible,.occasion-listen-dialog input:focus-visible{outline:3px solid #087e8c;outline-offset:3px}
@media(max-width:680px){
  .occasion-listen-dialog{width:calc(100% - 24px);padding:20px;max-height:calc(100dvh - 24px)}
  .occasion-listen-header{margin-bottom:16px;gap:8px}
  .occasion-listen-header h2{font-size:20px}
  .occasion-listen-layout{grid-template-columns:minmax(0,1fr);gap:18px}
  .occasion-listen-art{width:150px;height:150px;justify-self:center}
  .occasion-listen-title{font-size:24px;text-align:center}
  .occasion-listen-dialog .occasion-listen-context{text-align:center;margin:6px 0 12px}
  .occasion-listen-versions{justify-content:center;margin:12px 0}
  .occasion-listen-dialog .occasion-listen-kind{text-align:center;margin:8px 0}
  .occasion-listen-dialog .occasion-listen-action{margin-top:16px}
  .occasion-listen-dialog[open]{animation:occasion-listen-enter 180ms cubic-bezier(.16,1,.3,1)}
  .occasion-listen-dialog[open][data-closing=true]{animation:occasion-listen-exit 180ms cubic-bezier(.7,0,.84,0) forwards}
}
@media(max-width:680px) and (max-height:700px){.occasion-listen-art{width:110px;height:110px}.occasion-listen-layout{gap:12px}.occasion-listen-dialog{padding:16px}}
@keyframes occasion-listen-enter{from{transform:translateY(32px)}to{transform:translateY(0)}}
@keyframes occasion-listen-exit{from{transform:translateY(0)}to{transform:translateY(32px)}}
@media(prefers-reduced-motion:reduce){.occasion-listen-dialog[open]{animation:none!important}}