.guide-explainer { margin: 36px 0; padding: 24px; border: 1px solid #d7d6cb; border-radius: 16px; background: #f5f3eb; }
.content .guide-explainer h2 { margin: 8px 0 16px; }
.guide-explainer-player { aspect-ratio: 16 / 9; width: 100%; display: grid; place-items: center; background: #112c30; color: #fff; border-radius: 10px; overflow: hidden; }
.guide-explainer-player p { margin: 20px; color: #fff; text-align: center; }
.guide-explainer-player iframe { display: block; width: 100%; height: 100%; border: 0; background: #112c30; }
.guide-explainer-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin-top: 18px; }
.guide-explainer-actions button { cursor: pointer; font: inherit; }
.guide-explainer-actions [hidden] { display: none; }
.guide-explainer-actions :focus-visible { outline: 3px solid #17656c; outline-offset: 4px; }
.content .guide-explainer-note { font-size: 13px; line-height: 1.55; margin: 14px 0 0; color: #4a5657; }
.guide-explainer-note:empty { display: none; }
@media (max-width: 620px) { .guide-explainer { padding: 16px; } .guide-explainer-player { min-height: 225px; } }
.guide-explainer-actions .btn-outline { color: #173d42; border: 1px solid #173d42; background: transparent; }
.guide-explainer-actions .btn-outline:hover { background: #e1e9e6; color: #112c30; }