@layer components{.preview-player{aspect-ratio:16/9;background-color:var(--bg-tertiary);border-radius:var(--radius-lg);width:100%;position:relative;overflow:hidden}.preview-player--poster{aspect-ratio:auto;border-radius:inherit;background-color:#000;width:100%;height:100%}.preview-player__video{object-fit:contain;background-color:#000;border:0;width:100%;height:100%;display:block;position:absolute;inset:0}.preview-player--poster .preview-player__video{background-color:#0000}.preview-player__facade{cursor:pointer;background:0 0;border:0;width:100%;height:100%;padding:0;display:block;position:absolute;inset:0}.preview-player__facade:focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring-color);outline-offset:calc(-1 * var(--focus-ring-offset))}.preview-player__thumbnail{width:100%;height:100%;position:absolute;inset:0}.preview-player__thumbnail--placeholder{color:var(--text-muted);font-size:var(--text-3xl);justify-content:center;align-items:center;display:flex}.preview-player__play{border-radius:var(--radius-full,9999px);background-color:var(--overlay-backdrop,#0009);width:64px;height:64px;color:var(--text-on-inverse);font-size:var(--text-2xl);transition:background-color var(--duration-fast) var(--easing-default);justify-content:center;align-items:center;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.preview-player__facade:hover .preview-player__play{background-color:var(--accent-fill);color:var(--text-on-accent)}.preview-player__play--hero{aspect-ratio:1;width:40%;max-width:140px;height:auto;color:var(--text-on-inverse);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);transition:background-color var(--duration-fast) var(--easing-default), transform var(--duration-fast) var(--easing-default);background-color:#0000008c;font-size:clamp(2rem,18%,4rem)}.preview-player__facade:hover .preview-player__play--hero{background-color:var(--accent-fill);color:var(--text-on-accent);transform:translate(-50%,-50%)scale(1.05)}.preview-player__poster-stage,.preview-player__stop-target{width:100%;height:100%;position:absolute;inset:0}.preview-player__poster-stage:has(video,iframe) .content-poster__image{visibility:hidden}.preview-player__fullscreen.preview-player__youtube-stop{padding:var(--space-xs);background:var(--overlay-backdrop);position:absolute;top:0;right:0}.preview-player__yt-mount{display:block;position:absolute;inset:0}.preview-player__yt-mount>div,.preview-player__yt-mount iframe{border:0;width:100%;height:100%;display:block;position:absolute;inset:0}.preview-player__controls{z-index:var(--z-raised,1);gap:var(--space-2xs,.125rem);padding:var(--space-md) var(--space-xs) var(--space-xs);opacity:0;pointer-events:none;background:linear-gradient(#0000 0%,#00000059 55%,#000000b3 100%);flex-direction:column;transition:opacity .18s;display:flex;position:absolute;bottom:0;left:0;right:0}.preview-player:hover .preview-player__controls,.preview-player:focus-within .preview-player__controls{opacity:1;pointer-events:auto}@media (hover:none){.preview-player__controls{opacity:1;pointer-events:auto}}.preview-player__controls-row{justify-content:space-between;align-items:center;gap:var(--space-xs);min-width:0;display:flex}.preview-player__controls-end{align-items:center;gap:var(--space-xs);flex:none;min-width:0;display:flex}.preview-player__stop,.preview-player__fullscreen,.preview-player__volume-toggle{color:var(--text-on-inverse);cursor:pointer;font-size:var(--text-base);background:0 0;border:0;justify-content:center;align-items:center;padding:0;line-height:0;display:inline-flex}:is(.preview-player__stop,.preview-player__fullscreen,.preview-player__volume-toggle):focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring-color);outline-offset:var(--focus-ring-offset);border-radius:var(--radius-xs)}.preview-player__scrubber,.preview-player__volume-slider{--progress:0;--track-height:3px;--thumb-size:11px;appearance:none;height:var(--thumb-size);cursor:pointer;background:0 0;margin:0;padding:0}.preview-player__scrubber{flex:auto;width:100%;min-width:0}.preview-player__scrubber:disabled{cursor:default;opacity:.6}.preview-player__scrubber::-webkit-slider-runnable-track{height:var(--track-height);border-radius:var(--radius-full,9999px);background:linear-gradient(to right, var(--accent-primary) 0%, var(--accent-primary) calc(var(--progress) * 100%), #ffffff4d calc(var(--progress) * 100%), #ffffff4d 100%);transition:height var(--duration-fast) var(--easing-default)}.preview-player__volume-slider::-webkit-slider-runnable-track{height:var(--track-height);border-radius:var(--radius-full,9999px);background:linear-gradient(to right, var(--accent-primary) 0%, var(--accent-primary) calc(var(--progress) * 100%), #ffffff4d calc(var(--progress) * 100%), #ffffff4d 100%);transition:height var(--duration-fast) var(--easing-default)}.preview-player__scrubber::-webkit-slider-thumb{appearance:none;width:var(--thumb-size);height:var(--thumb-size);margin-top:calc((var(--track-height) - var(--thumb-size)) / 2);border-radius:var(--radius-full,9999px);background:var(--accent-primary);transition:transform var(--duration-fast) var(--easing-default);border:0;transform:scale(0);box-shadow:0 0 2px #00000080}.preview-player__volume-slider::-webkit-slider-thumb{appearance:none;width:var(--thumb-size);height:var(--thumb-size);margin-top:calc((var(--track-height) - var(--thumb-size)) / 2);border-radius:var(--radius-full,9999px);background:var(--accent-primary);transition:transform var(--duration-fast) var(--easing-default);border:0;transform:scale(0);box-shadow:0 0 2px #00000080}.preview-player__scrubber:hover::-webkit-slider-thumb{transform:scale(1)}.preview-player__scrubber:focus-visible::-webkit-slider-thumb{transform:scale(1)}.preview-player__scrubber:active::-webkit-slider-thumb{transform:scale(1)}.preview-player__volume-slider:hover::-webkit-slider-thumb{transform:scale(1)}.preview-player__volume-slider:focus-visible::-webkit-slider-thumb{transform:scale(1)}.preview-player__volume-slider:active::-webkit-slider-thumb{transform:scale(1)}.preview-player__scrubber:hover::-webkit-slider-runnable-track{height:5px}.preview-player__scrubber:active::-webkit-slider-runnable-track{height:5px}.preview-player__volume-slider:hover::-webkit-slider-runnable-track{height:5px}.preview-player__volume-slider:active::-webkit-slider-runnable-track{height:5px}.preview-player__scrubber::-moz-range-track{height:var(--track-height);border-radius:var(--radius-full,9999px);transition:height var(--duration-fast) var(--easing-default);background:#ffffff4d}.preview-player__volume-slider::-moz-range-track{height:var(--track-height);border-radius:var(--radius-full,9999px);transition:height var(--duration-fast) var(--easing-default);background:#ffffff4d}.preview-player__scrubber::-moz-range-progress{height:var(--track-height);border-radius:var(--radius-full,9999px);background:var(--accent-primary)}.preview-player__volume-slider::-moz-range-progress{height:var(--track-height);border-radius:var(--radius-full,9999px);background:var(--accent-primary)}.preview-player__scrubber::-moz-range-thumb{width:var(--thumb-size);height:var(--thumb-size);border-radius:var(--radius-full,9999px);background:var(--accent-primary);transition:transform var(--duration-fast) var(--easing-default);border:0;transform:scale(0);box-shadow:0 0 2px #00000080}.preview-player__volume-slider::-moz-range-thumb{width:var(--thumb-size);height:var(--thumb-size);border-radius:var(--radius-full,9999px);background:var(--accent-primary);transition:transform var(--duration-fast) var(--easing-default);border:0;transform:scale(0);box-shadow:0 0 2px #00000080}.preview-player__scrubber:hover::-moz-range-thumb{transform:scale(1)}.preview-player__scrubber:focus-visible::-moz-range-thumb{transform:scale(1)}.preview-player__scrubber:active::-moz-range-thumb{transform:scale(1)}.preview-player__volume-slider:hover::-moz-range-thumb{transform:scale(1)}.preview-player__volume-slider:focus-visible::-moz-range-thumb{transform:scale(1)}.preview-player__volume-slider:active::-moz-range-thumb{transform:scale(1)}.preview-player__scrubber:hover::-moz-range-track{height:5px}.preview-player__scrubber:active::-moz-range-track{height:5px}.preview-player__scrubber:hover::-moz-range-progress{height:5px}.preview-player__scrubber:active::-moz-range-progress{height:5px}.preview-player__volume-slider:hover::-moz-range-track{height:5px}.preview-player__volume-slider:active::-moz-range-track{height:5px}.preview-player__volume-slider:hover::-moz-range-progress{height:5px}.preview-player__volume-slider:active::-moz-range-progress{height:5px}.preview-player__scrubber:focus-visible,.preview-player__volume-slider:focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring-color);outline-offset:var(--focus-ring-offset);border-radius:var(--radius-full,9999px)}.preview-player__volume{align-items:center;gap:var(--space-2xs,.125rem);min-width:0;transition:opacity var(--duration-fast) var(--easing-default);flex:none;display:flex}.preview-player__volume[data-muted]{opacity:.5}.preview-player__volume[data-disabled]{opacity:.5;pointer-events:none}.preview-player__volume-toggle:disabled{cursor:default}.preview-player__volume-slider{flex:none;width:56px}.preview-player__time{color:var(--text-on-inverse);font-size:var(--text-xs);font-variant-numeric:tabular-nums;letter-spacing:.02em;white-space:nowrap;opacity:.92;flex:none}.preview-player__label{padding:var(--space-sm) var(--space-md);font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--text-on-inverse);text-align:left;background:linear-gradient(#0000,#000000b3);position:absolute;bottom:0;left:0;right:0}.preview-player__external{align-items:center;gap:var(--space-xs);padding:var(--space-sm) var(--space-md);border:1px solid var(--border-default);border-radius:var(--radius-md);background-color:var(--bg-tertiary);color:var(--text-primary);font-size:var(--text-sm);font-weight:var(--weight-medium);text-decoration:none;display:inline-flex}.preview-player__external:hover{border-color:var(--accent-primary);color:var(--accent-primary)}.preview-player__external:focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring-color);outline-offset:var(--focus-ring-offset)}.preview-player__external--text{cursor:default}.preview-player__external--text:hover{border-color:var(--border-default);color:var(--text-primary)}}