.activity-audio { width: min(100%,420px); padding: 18px; border: 1px solid var(--line); border-radius: 12px; background: color-mix(in srgb,var(--paper-2,var(--alt)) 55%,var(--paper,var(--card))); }
.activity-audio audio { display: none; }
.activity-audio-head { display: flex; align-items: center; gap: 12px; }
.activity-audio button { display: grid; place-items: center; flex-shrink: 0; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; }
.activity-audio-toggle { background: var(--ink); color: var(--paper,var(--card)); }
.activity-audio button svg { width: 21px; height: 21px; }
.activity-audio .audio-pause-icon,.activity-audio .audio-volume-off { display: none; }
.activity-audio.is-playing .audio-play-icon { display: none; }
.activity-audio.is-playing .audio-pause-icon { display: block; }
.activity-audio-mute { background: transparent; color: var(--muted); margin-left: auto; }
.activity-audio-mute[aria-pressed="true"] .audio-volume-waves { display: none; }
.activity-audio-mute[aria-pressed="true"] .audio-volume-off { display: block; }
.activity-audio-identity { min-width: 0; display: grid; gap: 3px; }
.activity-audio-identity strong { color: var(--ink); font: 500 15px/1.6 var(--serif); }
.activity-audio-identity span { color: var(--muted); font: 11px/1.6 var(--sans); }
.activity-audio-progress { display: grid; grid-template-columns: 35px minmax(0,1fr) 35px; align-items: center; gap: 10px; margin-top: 14px; color: var(--muted); font: 11px/1.5 var(--sans); font-variant-numeric: tabular-nums; }
.activity-audio-progress > span:last-child { text-align: right; }
.activity-audio-progress input { width: 100%; min-width: 0; height: 28px; margin: 0; accent-color: var(--ink); cursor: pointer; }
.activity-audio-progress input:disabled { opacity: .4; cursor: default; }
@media (max-width:600px) {
  .activity-audio { width: 100%; padding: 16px; }
  .activity-audio-head { gap: 10px; }
  .activity-audio-identity strong { font-size: 14px; }
}

.activity-audio-identity strong,.activity-audio-identity span { overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.activity-audio :is(button,input):focus-visible {outline:2px solid var(--ink);outline-offset:3px;}

.activity-video { width: min(100%,300px); overflow: hidden; border-radius: 4px; background: #111; }
.activity-video-preview { position: relative; display: block; width: 100%; height: auto; padding: 0; border: 0; background: #111; }
.activity-video-preview > .image-load-frame { display: block; width: 100%; height: auto; }
.activity-video-preview .image-load-preview { width: 100%; height: auto; }
.activity-video-preview > .image-load-frame > img.image-load-full { object-fit: contain; }
.activity-video-play { position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 48px; height: 48px; transform: translate(-50%,-50%); border-radius: 50%; color: #fff; background: rgb(0 0 0 / .55); }
.activity-video-play svg { width: 24px; height: 24px; }
.activity-video-duration { position: absolute; bottom: 9px; right: 10px; padding: 2px 6px; border-radius: 4px; color: #fff; background: rgb(0 0 0 / .6); font: 11px/1.6 var(--sans); }
.activity-video video { display: block; width: 100%; height: 100%; object-fit: contain; }