.intro-trigger{display:inline-flex;align-items:center;gap:11px;margin-top:38px;padding:13px 23px;border:1px solid rgba(212,183,120,.65);border-radius:999px;background:rgba(10,22,30,.75);color:#e5cd9d;font:inherit;font-size:15px;letter-spacing:.035em;cursor:pointer;box-shadow:0 5px 22px rgba(0,0,0,.2);transition:background .2s,border-color .2s,box-shadow .2s}
.intro-trigger span{font-size:12px}
.intro-trigger:hover{background:rgba(62,53,34,.65);border-color:#e5cd9d;box-shadow:0 0 24px rgba(212,183,120,.12)}
.intro-trigger:focus-visible,.intro-close:focus-visible{outline:2px solid #e5cd9d;outline-offset:5px}
.intro-dialog{position:fixed;inset:0;width:min(1120px,calc(100vw - 48px));max-width:none;max-height:calc(100dvh - 48px);padding:0;border:1px solid rgba(160,190,205,.4);border-radius:16px;background:#071018;color:#edf3f5;overflow:auto;opacity:0;transform:translateY(18px) scale(.96);box-shadow:0 30px 100px rgba(0,0,0,.7);transition:opacity .3s ease,transform .3s cubic-bezier(.2,.7,.2,1)}
.intro-dialog.is-open{opacity:1;transform:translateY(0) scale(1)}
.intro-dialog::backdrop{background:rgba(0,5,10,0);backdrop-filter:blur(0);transition:background .3s,backdrop-filter .3s}
.intro-dialog.is-open::backdrop{background:rgba(0,5,10,.82);backdrop-filter:blur(7px)}
.intro-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:12px 18px}
.intro-heading h2{margin:0;color:#d8c296;font:inherit;font-size:16px;letter-spacing:.04em}
.intro-close{display:grid;place-items:center;flex-shrink:0;width:36px;height:36px;padding:0;border:1px solid rgba(160,190,205,.25);border-radius:50%;background:transparent;color:#edf3f5;font-size:27px;cursor:pointer}
.intro-close:hover{background:rgba(160,190,205,.15)}
.intro-video-frame{margin:0 14px 14px;padding:10px;border-radius:23px;background:#263642;box-shadow:inset 0 0 0 1px rgba(174,199,213,.2)}
.intro-dialog video{display:block;width:100%;max-height:calc(100dvh - 160px);background:#000;border-radius:15px;clip-path:inset(3px round 15px)}
.intro-dialog video:fullscreen{border-radius:0;clip-path:none}
.intro-status{padding:0 18px 12px;font-size:14px}
html.intro-is-open{overflow:hidden}
@media(max-width:700px){.intro-trigger{margin-top:26px}.intro-dialog{width:calc(100vw - 20px);max-height:calc(100dvh - 20px);border-radius:11px}.intro-heading{padding:10px 12px}.intro-heading h2{font-size:14px}.intro-video-frame{margin:0 8px 8px;padding:7px;border-radius:20px}.intro-dialog video{max-height:calc(100dvh - 124px)}}
@media(min-width:701px) and (max-height:600px){.intro-trigger{margin-top:24px;padding:10px 20px}}
@media(prefers-reduced-motion:reduce){.intro-dialog{transform:none;transition:opacity .12s}.intro-dialog::backdrop{transition:background .12s}.intro-trigger{transition:none}}
/* The 1920x1080 recording has 120px of background at each side. */
.intro-video-frame{box-sizing:border-box;width:min(calc(100% - 28px),calc((100dvh - 160px) * 14 / 9));margin:0 auto 14px;padding:0;border-radius:15px;box-shadow:0 0 0 1px rgba(174,199,213,.2)}
.intro-video-viewport{aspect-ratio:14/9;overflow:hidden;border-radius:15px;background:#263642}
.intro-dialog .intro-video-viewport video{width:100%;height:100%;max-height:none;object-fit:cover;clip-path:inset(2px round 15px)}
.intro-dialog .intro-video-viewport video:fullscreen{object-fit:contain;clip-path:none}
@media(max-width:700px){.intro-video-frame{width:min(calc(100% - 16px),calc((100dvh - 124px) * 14 / 9));padding:0;border-radius:15px;margin:0 auto 8px}}
/* End screen with tutorial cards (2026-11-01) */
.intro-video-viewport{position:relative}
.intro-end{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:18px;padding:34px 24px 20px;background:rgba(5,9,14,.92);overflow:auto}
.intro-end[hidden]{display:none}
.intro-end-head{margin:0;color:#d8c296;font-size:15px;letter-spacing:.14em;text-transform:uppercase}
.intro-end-list{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;width:100%}
.intro-end-card{flex:1 1 0;max-width:calc((100% - 48px) / 4);min-width:0;border:1px solid rgba(110,200,220,.28);border-radius:9px;overflow:hidden;background:#071018;color:#eef3f5;font-size:15px;letter-spacing:.03em;text-decoration:none;transition:border-color .2s}
.intro-end-card img{display:block;width:100%;height:auto;aspect-ratio:1120/618;object-fit:cover;filter:brightness(.85)}
.intro-end-card span{display:block;padding:9px 12px}
.intro-end-card:hover,.intro-end-card:focus-visible{border-color:rgba(229,205,157,.7);outline:none}
.intro-end-card:hover img{filter:brightness(1)}
.intro-end-again{padding:8px 18px;border:1px solid rgba(160,190,205,.3);border-radius:20px;background:transparent;color:#edf3f5;font:inherit;font-size:14px;cursor:pointer}
.intro-end-again:hover{background:rgba(160,190,205,.15)}
@media(max-width:700px){.intro-end{gap:8px;padding:12px 8px;justify-content:center}.intro-end-head{font-size:12px}.intro-end-list{gap:6px}.intro-end-card{max-width:calc((100% - 18px) / 4);font-size:9.5px;line-height:1.25}.intro-end-card span{padding:3px 4px}.intro-end-again{padding:4px 12px;font-size:12px}}