.course-preview-dialog{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:24px;border:0;background:transparent;color:#fff;overflow:auto}
.course-preview-dialog[open]{display:grid;place-items:center}
.course-preview-dialog::backdrop{background:rgba(0,0,0,.76);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.course-preview-window{width:min(1100px,calc(100vw - 48px),calc((100dvh - 112px)*16/9));margin:auto}
.course-preview-heading{display:flex;align-items:center;justify-content:flex-end;gap:16px;margin-bottom:12px}
.course-preview-close{flex:none;display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid #ffffff30;border-radius:50%;background:linear-gradient(145deg,#ffffff20,#ffffff08);color:#ffffffe0;backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);box-shadow:inset 0 1px 0 #ffffff20,0 4px 16px #0002;cursor:pointer;transition:background-color .18s,color .18s}
.course-preview-close:hover{background-color:#ffffff18;color:#fff}.course-preview-close:focus-visible{outline:2px solid #fff;outline-offset:4px}
.course-preview-frame{aspect-ratio:16/9;background:#000;border-radius:12px;overflow:hidden;box-shadow:0 24px 80px #0008}
.course-preview-frame iframe{display:block;width:100%;height:100%;border:0}
@media(max-width:600px){.course-preview-dialog{padding:16px}.course-preview-window{width:min(calc(100vw - 32px),calc((100dvh - 104px)*16/9))}.course-preview-frame{border-radius:8px}}

[data-course-preview] > svg, [data-course-preview] > span{transition:transform .2s ease}
@media(hover:hover){[data-course-preview]:hover > svg{transform:translateX(2px)}[data-course-preview]:hover > span{transform:translateX(-2px)}}

/* One quiet entrance highlight; the normal button styling stays in place. */
[data-course-preview]{position:relative;overflow:hidden}
[data-course-preview]::after{content:"";position:absolute;inset:-30% auto -30% 0;width:38%;pointer-events:none;background:linear-gradient(110deg,transparent,rgba(255,160,130,.12),transparent);transform:translateX(-180%) skewX(-16deg);animation:trailer-shine .739s ease-in-out .2s 1 both}
:root[data-theme="dark"] [data-course-preview]::after{background:linear-gradient(110deg,transparent,rgba(255,255,255,.10),transparent)}
@keyframes trailer-shine{from{transform:translateX(-180%) skewX(-16deg)}to{transform:translateX(380%) skewX(-16deg)}}
@media(prefers-reduced-motion:reduce){[data-course-preview]::after{display:none;animation:none}}