.welcome-trigger {display:inline-flex;align-items:center;justify-content:center;gap:8px;line-height:1.25}
.welcome-trigger svg {flex:none}
.welcome-trigger span {min-width:0;overflow-wrap:anywhere}
.welcome-dialog {width:min(720px,calc(100% - 20px));max-width:none;max-height:calc(100dvh - 20px);padding:0;border:0;border-radius:14px;background:#fff;color:#10243a;overflow:auto;overscroll-behavior:contain}
.welcome-dialog::backdrop {background:#081725d9}
html:has(.welcome-dialog[open]) {overflow:hidden}
.welcome-dialog .welcome-head {display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:14px 14px 12px}
.welcome-head p {margin:0 0 4px;color:#a4361c;font:650 11px/1.35 Golos,sans-serif}
.welcome-head h2 {margin:0;font:700 clamp(18px,4.8vw,26px)/1.15 Golos,sans-serif;text-wrap:balance}
.welcome-close {flex:none;display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;background:#f2f0eb;color:#142c40;font:400 30px/1 system-ui;cursor:pointer}
.welcome-screen {position:relative;aspect-ratio:16/9;background:#081725;color:white}
.welcome-screen [data-welcome-frame],.welcome-screen iframe {display:block;width:100%;height:100%;border:0}
.welcome-screen [data-welcome-loading] {position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;font:600 14px/1.4 Golos,sans-serif}
.welcome-dialog [hidden] {display:none}
.welcome-foot {padding:6px 14px max(10px,env(safe-area-inset-bottom))}
.welcome-provider,.welcome-error button {display:inline-flex;align-items:center;min-height:44px;font:600 13px/1.35 Golos,sans-serif;text-decoration:underline;text-underline-offset:3px}
.welcome-follow {display:flex;align-items:flex-start;flex-direction:column;gap:3px;border-top:1px solid #dce0dc;padding-top:9px}
.welcome-follow a {display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:8px 0;color:#10243a;font:650 13px/1.3 Golos,sans-serif;text-decoration:underline;text-underline-offset:3px}
.welcome-follow.welcome-finished a {padding-inline:14px;border-radius:7px;background:#10243a;color:white;text-decoration:none}
.welcome-follow small {font:400 12px/1.5 Golos,sans-serif;color:#435665}
.welcome-error {margin:6px 0;padding:8px 10px;background:#fff0dc;border-radius:7px}
.welcome-error p {margin:0;font:500 14px/1.4 Golos,sans-serif}
.welcome-error button {padding:0;border:0;background:none;color:#10243a;cursor:pointer}
.sc-card-brief .welcome-trigger {min-height:44px;align-self:flex-start}
.dk-cover-actions .welcome-trigger {min-height:44px}
.sch-hero .sch-actions .welcome-trigger {max-width:100%}
@media(max-width:600px) {
  .sch-hero .sch-actions a {min-height:44px;height:auto}
}
@media(orientation:landscape) and (max-height:500px) {
  .welcome-dialog {width:min(540px,calc(100% - 20px))}
  .welcome-screen {height:min(64dvh,300px);aspect-ratio:auto}
}
.welcome-foot .welcome-tap {margin:4px 0 0;color:#455867;font:500 12px/1.45 Golos,sans-serif}
.welcome-runtime {font:inherit;font-size:.92em;white-space:nowrap}
.sd-preview {margin-bottom:14px}
/* In the catalogue the free lesson is a single touch target, including its duration. */
.sc-featured .sc-card-brief .sc-preview {
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:10px;
  width:100%;
  min-height:50px;
  margin:3px 0 5px;
  padding:8px 12px;
  border-radius:8px;
  background:#fff8ed;
  color:#10243a;
  font-size:14px;
  font-weight:650;
  line-height:1.3;
  text-decoration:none;
}
.sc-preview > svg {
  width:30px;
  height:30px;
  padding:8px;
  border-radius:50%;
  background:#10243a;
  color:#fff8ed;
}
.sc-preview .welcome-caption {
  flex:1;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:9px;
}
.sc-preview .welcome-name {text-wrap:pretty}
.sc-preview .welcome-runtime {
  padding-inline-start:9px;
  border-inline-start:1px solid #b9b0a1;
  color:#445365;
  font-size:12px;
  font-weight:600;
  font-variant-numeric:tabular-nums;
}
.sc-featured .sc-card-brief .sc-preview:focus-visible {outline:3px solid #fff;outline-offset:3px}
@media (hover:hover) {
  .sc-featured .sc-card-brief .sc-preview:hover {background:#ffe5b8}
}
.sc-featured .sc-card-brief .sc-preview:active {background:#f4d5a5}
@media(min-width:601px) {
  .sc-featured .sc-card-brief .sc-preview {max-width:30rem}
}

@media(max-width:600px) {
  .sd-has-preview .sd-hero-photo {grid-row:auto}
}

.sd-has-preview .sg-secondary {display:inline-flex;align-items:center;min-height:44px;margin-inline:0 12px}