.vid{border-radius:var(--r);background:#000;position:relative;overflow:hidden}.vid-media::-webkit-media-controls-start-playback-button{-webkit-appearance:none;display:none!important}.vid-media::-webkit-media-controls-overlay-play-button{-webkit-appearance:none;display:none!important}.vid-media{object-fit:cover;background:#000;border:0;width:100%;height:100%;display:block;position:absolute;inset:0}:root{--vid-ratio-landscape:16 / 9;--vid-ratio-portrait:4 / 5;--vid-fit:148px;--vid-portrait-max:100%}.vid-landscape{aspect-ratio:var(--vid-ratio-landscape);width:min(100%, calc((100svh - var(--vid-fit)) * 16 / 9))}.vid-portrait{aspect-ratio:var(--vid-ratio-portrait);width:min(100%, var(--vid-portrait-max,100%), calc((100svh - var(--vid-fit)) * 4 / 5));margin-inline:auto}.vid-fill{background:0 0;border-radius:0;position:absolute;inset:0}.vid-fill .vid-media{background:0 0}.vid-bar{z-index:4;align-items:center;gap:12px;width:max(70%,min(100% - 28px,260px));display:flex;position:absolute;bottom:14px;left:50%;transform:translate(-50%)}.vid-btn{cursor:pointer;width:34px;height:34px;color:var(--cream);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:background .3s var(--ease);background:#0f0e0c80;border:0;border-radius:999px;flex:none;justify-content:center;align-items:center;gap:8px;padding:0;display:inline-flex}.vid-btn:hover{background:#0f0e0cb8}.vid-btn svg{flex:none;width:15px;height:15px}.vid-bar .vid-btn:has(.vid-sound-label){width:auto;padding:0 15px 0 12px}.vid-sound-label{letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;font-size:12px}.vid-track{cursor:pointer;flex:1;align-items:center;height:14px;display:flex;position:relative}.vid-track:before{content:"";background:#e7e7dc52;border-radius:999px;height:3px;position:absolute;left:0;right:0}.vid-progress{background:var(--cream);border-radius:999px;height:3px;position:relative}@media (max-width:620px){.vid-sound-label{display:none}.vid-bar .vid-btn:has(.vid-sound-label){width:34px;padding:0}}.vid-time{letter-spacing:.04em;color:var(--cream);font-variant-numeric:tabular-nums;text-shadow:0 1px 6px #0f0e0c8c;white-space:nowrap;flex:none;font-size:12px}.vid:fullscreen{aspect-ratio:auto;background:#000;border-radius:0;width:100%;height:100%}.vid:fullscreen .vid-media{object-fit:contain}@media (max-width:620px){.vid-time{display:none}}@media (max-width:860px){.vid-fill[data-orient=landscape] .vid-media{object-fit:contain}.vid-fill[data-orient=landscape]{background:#000}.vid-fill[data-orient=landscape] .vid-media{background:0 0}}