/* Yezbi brand for Kids Videos (Derek, October 8, 2026; shared/brand/README.md). Loaded last, after the app's own
   stylesheets, /shared/brand/yezbi-tokens.css and /shared/brand/brand-header.css.
   Two surfaces, marked on <html>:
   - data-kt-surface="kid": the library, the player and Who's watching? They keep their dark, TV-friendly look and
     their warm gold and orange highlights. Only the header (the brand lockup on the slate bar), the main actions (soft
     blue) and the large surfaces (neutral slate instead of brown) change. Always data-yezbi-theme="dark".
   - data-kt-surface="parent": the grown-up pages, in the brand Light or Dark that js/brand-theme.js applies from
     kt-appearance-v1 (Dark when nothing is saved, as before).
   Kids Videos has no saved child colors: children are shown by name (and a neutral person icon), and no brand token
   is used as a child's color. */

/* ---------- Brand header: wordmark → "Kids Videos" → Kids Video icon, one home link ---------- */
.kt-brand-bar {
  position: relative;
  z-index: 40; /* above the sticky section tabs (30), so the account menu opens over them */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  min-height: 68px;
  margin: 0;
  padding: 10px clamp(16px, 4vw, 48px);
  font: 400 16px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --yezbi-brand-size: 21px;
}
/* The home link is at least 44px tall; padding on the link does not move the lockup's shared baseline. */
.kt-brand-bar .yezbi-brand,
.kids-appbar .yezbi-brand { padding: max(6px, calc((44px - 1.5em) / 2)) 0; }
.kt-brand-bar .kt-scheme-switch { margin-left: auto; }
.kt-brand-bar .kt-parent-toolbar.lp-ui { margin: 0; background: transparent; font-size: 15px; }
/* family.css styles every <details>; the account menu in the bar keeps only its own summary edge. */
.kt-brand-bar details.lp-account { padding: 0; border: 0; }

/* The Light/Dark switch (grown-up pages only): sun or moon, "Dark mode", and a track that is on in Dark. */
.kt-scheme-switch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--yz-control-border);
  border-radius: 10px;
  background: var(--yz-surface);
  color: var(--yz-text);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.kt-scheme-switch:hover { border-color: var(--yz-primary); }
.kt-scheme-switch:focus-visible { outline: 3px solid var(--yz-focus); outline-offset: 2px; }
.kt-scheme-switch-icon { display: grid; place-items: center; width: 18px; height: 18px; }
.kt-scheme-switch-track { position: relative; width: 34px; height: 20px; border-radius: 999px; background: var(--yz-control-border); transition: background .15s; }
.kt-scheme-switch-track > span { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--yz-surface); box-shadow: 0 1px 2px #0003; transition: transform .15s; }
.kt-scheme-switch[aria-checked="true"] .kt-scheme-switch-track { background: var(--yz-primary); }
.kt-scheme-switch[aria-checked="true"] .kt-scheme-switch-track > span { transform: translateX(14px); background: var(--yz-on-primary); }
@media (prefers-reduced-motion: reduce) { .kt-scheme-switch-track, .kt-scheme-switch-track > span { transition: none; } }

/* Phones: a smaller lockup; the switch keeps its icon and track; Account & settings moves to its own row. */
@media (max-width: 640px) {
  .kt-brand-bar { min-height: 56px; padding: 6px 12px; --yezbi-brand-size: clamp(14px, 4.4vw, 18px); }
  .kt-scheme-switch { padding: 0 10px; }
  .kt-scheme-switch-label { display: none; }
  .kt-brand-bar .kt-parent-toolbar.lp-ui { flex-basis: 100%; }
}

/* ---------- Child screens: always Dark ---------- */
/* No color-scheme here: the player embeds YouTube, and a scheme that differs from the embedded page would give
   the frame an opaque backdrop. These pages never declared one. */
html[data-kt-surface="kid"] {
  --bg: var(--yz-background);
  --bg-elev: var(--yz-surface);
  --bg-elev-2: var(--yz-raised);
  --text: var(--yz-text);
  --text-muted: var(--yz-muted);
  --text-dim: var(--yz-muted);
}
html[data-kt-surface="kid"] .library-page {
  --library-bg: var(--yz-background);
  --library-panel: var(--yz-surface);
  --library-panel-2: var(--yz-raised);
  --library-border: var(--yz-border);
  --library-text: var(--yz-text);
  --library-muted: var(--yz-muted);
}
html[data-kt-surface="kid"] .library-page #search-input::placeholder { color: var(--yz-muted); }

/* The library's app bar: the slate brand bar, with the lockup in place of the earlier Y mark. */
html[data-kt-surface="kid"] .kids-appbar {
  --yezbi-brand-size: 21px;
  border-bottom-color: var(--yz-header-border);
  background: var(--yz-header-bg);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
html[data-kt-surface="kid"] .kids-appbar :is(.kids-utility-button, .active-kid-chip, .parent-gear) {
  border-color: var(--yz-control-border);
  background: var(--yz-raised);
  color: var(--yz-text);
}
html[data-kt-surface="kid"] .kids-appbar .kids-nav a { white-space: nowrap; }
/* The lockup is wider than the earlier Y mark: below 1060px Home · Explore · My List take their own row (as they
   already did below 760px), so nothing overlaps on tablets and landscape phones. */
@media (max-width: 1060px) {
  html[data-kt-surface="kid"] .kids-appbar { grid-template-columns: minmax(0, 1fr) auto; row-gap: 6px; }
  html[data-kt-surface="kid"] .kids-appbar .kids-nav { grid-column: 1 / -1; grid-row: 2; order: 3; margin: -2px 0 0; overflow-x: auto; }
}
@media (max-width: 760px) {
  html[data-kt-surface="kid"] .kids-appbar {
    column-gap: 8px;
    padding: max(8px, env(safe-area-inset-top)) 12px 8px;
    --yezbi-brand-size: clamp(14px, 3.4vw, 18px);
  }
  html[data-kt-surface="kid"] .kids-appbar-actions { gap: 6px; }
  html[data-kt-surface="kid"] .kids-appbar :is(.kids-utility-button, .parent-gear) { width: 44px; height: 44px; min-height: 44px; }
  html[data-kt-surface="kid"] .kids-appbar .active-kid-chip { min-height: 44px; }
}
@media (max-width: 440px) {
  /* Narrow phones keep a readable lockup: row 1 is the lockup, Tour and TV help; row 2 is Home · Explore · My List,
     then the child and Parent settings. The reading order matches the page order except for the Library links. */
  html[data-kt-surface="kid"] .kids-appbar { grid-template-columns: minmax(0, 1fr) auto auto; column-gap: 6px; row-gap: 6px; --yezbi-brand-size: clamp(14px, 4.4vw, 18px); }
  html[data-kt-surface="kid"] .kids-appbar .kids-appbar-actions { display: contents; }
  html[data-kt-surface="kid"] .kids-appbar .yezbi-brand { grid-column: 1; grid-row: 1; justify-self: start; }
  html[data-kt-surface="kid"] .kids-appbar #kids-tour-open { grid-column: 2; grid-row: 1; }
  html[data-kt-surface="kid"] .kids-appbar #tv-help-open { grid-column: 3; grid-row: 1; }
  html[data-kt-surface="kid"] .kids-appbar .kids-nav { grid-column: 1; grid-row: 2; order: 0; margin: 0; min-width: 0; }
  html[data-kt-surface="kid"] .kids-appbar .kids-nav a { flex: none; white-space: nowrap; }
  html[data-kt-surface="kid"] .kids-appbar #active-kid-chip { grid-column: 2; grid-row: 2; }
  html[data-kt-surface="kid"] .kids-appbar .parent-gear { grid-column: 3; grid-row: 2; }
}

/* Main actions in the soft brand blue with dark text; gold and orange stay as the library's highlights. */
html[data-kt-surface="kid"] :is(.search-submit, .hero-action, .btn-play-pause) {
  border-color: var(--yz-primary);
  background: var(--yz-primary);
  color: var(--yz-on-primary);
}
html[data-kt-surface="kid"] :is(.search-submit, .hero-action):hover,
html[data-kt-surface="kid"] .btn-play-pause:hover { border-color: var(--yz-primary-hover); background: var(--yz-primary-hover); }
html[data-kt-surface="kid"] :is(.progress-fill, .progress-thumb) { background: var(--yz-primary); }
/* Control edges on child screens: 3:1 against the slate page or the black player. The warm "Ask a grown-up" pill
   and the red Block keep their colors, a little stronger. */
html[data-kt-surface="kid"] { --border: var(--yz-control-border); --muted: var(--yz-muted); }
html[data-kt-surface="kid"] .library-page .search-section form { border-color: var(--yz-control-border); }
/* The search field has no ring of its own (outline: 0); its box shows the focus ring instead. */
html[data-kt-surface="kid"] .library-page .search-section form:focus-within { outline: 3px solid var(--yz-focus); outline-offset: 2px; }
html[data-kt-surface="kid"] :is(.kid-request-open, .search-request-empty) { border-color: rgba(230, 166, 75, .6); }
html[data-kt-surface="kid"] .kid-request-status { border-color: var(--yz-control-border); }
html[data-kt-surface="kid"] .btn-player-utility { border-color: rgba(116, 168, 216, .62); }
html[data-kt-surface="kid"] .btn-block-video { border-color: rgba(223, 113, 100, .72); }
html[data-kt-surface="kid"] :is(.btn-secondary, .btn-back, .btn-fullscreen, .btn-control:not(.btn-play-pause)) { box-shadow: inset 0 0 0 1px var(--yz-control-border); }
html[data-kt-surface="kid"] .sk-link { color: var(--yz-muted); }
/* One visible keyboard focus ring on every child screen: 3px of the light brand blue, 3:1 or better on the slate. */
html[data-kt-surface="kid"] :is(a, button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: 3px solid var(--yz-focus);
  outline-offset: 2px;
}

/* ---------- Grown-up pages: brand Light and Dark ---------- */
html[data-kt-surface="parent"] {
  --bg: var(--yz-background);
  --bg-elev: var(--yz-surface);
  /* Mostly a divider in this app; sometimes a hover surface. */
  --bg-elev-2: var(--yz-border);
  --accent: var(--yz-primary);
  --accent-hover: var(--yz-primary-hover);
  --text: var(--yz-text);
  --text-muted: var(--yz-muted);
  --text-dim: var(--yz-muted);
  --leaf: var(--yz-success);
  --danger: var(--yz-danger);
  /* Names some inline styles use with a fallback. */
  --border: var(--yz-control-border);
  --muted: var(--yz-muted);
  --surface: var(--yz-surface);
  /* Field and control edges: 3:1 or better. */
  --kt-control-line: var(--yz-control-border);
}
html[data-kt-surface="parent"][data-yezbi-theme="light"] { color-scheme: light; --shadow: 0 6px 20px rgba(36, 50, 71, .10); }
html[data-kt-surface="parent"][data-yezbi-theme="dark"] { color-scheme: dark; --shadow: 0 8px 24px rgba(0, 0, 0, .45); }
html[data-kt-surface="parent"] body { background: var(--yz-background); color: var(--yz-text); }
html[data-kt-surface="parent"] :is(.parent-tab-page, .parent-page) { background: var(--yz-background); }
/* Sign-in, PIN and loading cards still fill one screen together with the brand bar above them. */
html[data-kt-surface="parent"] .state-shell { min-height: calc(100vh - 68px); }
@media (max-width: 640px) { html[data-kt-surface="parent"] .state-shell { min-height: calc(100vh - 112px); } }

/* Shared controls (shared/ui/components.css) and section tabs (shared/ui/section-tabs.css) in the brand roles. */
html[data-kt-surface="parent"] .lp-ui.kt-parent-controls {
  --lp-bg: var(--yz-surface);
  --lp-card: var(--yz-surface);
  --lp-fg: var(--yz-text);
  --lp-muted: var(--yz-muted);
  --lp-line: var(--yz-control-border);
  --lp-accent: var(--yz-primary);
  --lp-on-accent: var(--yz-on-primary);
  --lp-focus: var(--yz-focus);
  --lp-success: var(--yz-success);
  --lp-danger: var(--yz-danger);
}
html[data-kt-surface="parent"][data-yezbi-theme="light"] .lp-ui.kt-parent-controls { color-scheme: light; }
html[data-kt-surface="parent"] .lp-ui.kt-parent-controls a:not(.lp-button) { color: var(--yz-primary); }
html[data-kt-surface="parent"] :is(.parent-quick-nav, .section-nav).yz-tabs {
  --yz-tab-fg: var(--yz-text);
  --yz-tab-bg: var(--yz-surface);
  --yz-tab-line: var(--yz-control-border);
  --yz-tab-accent: var(--yz-primary);
  --yz-tab-on-accent: var(--yz-on-primary);
  --yz-tab-focus: var(--yz-focus);
  --yz-tab-page-bg: var(--yz-background);
}

/* Keyboard focus: one solid ring in the action blue, 3:1 or better on every surface in both themes. */
html[data-kt-surface="parent"] :is(a, button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: 3px solid var(--yz-focus);
  outline-offset: 2px;
}

/* Buttons: blue for the main action, a neutral button with a 3:1 edge for the rest, a solid focus ring. */
html[data-kt-surface="parent"] .btn-secondary { box-shadow: inset 0 0 0 1px var(--kt-control-line); }
html[data-kt-surface="parent"] .btn-secondary:hover { box-shadow: none; }
html[data-kt-surface="parent"] :is(.btn-primary, .btn-secondary, .state-link, .state-back, .parent-link-button, .cs-chip, .cs-kid-action-btn, .tm-catalog-card, .tm-row-btn, .media-block-unblock, .media-block-result-action, .parent-request-actions button, .parent-history-actions button, .parent-feature-dialog-close):focus-visible {
  outline: 3px solid var(--yz-focus);
  outline-offset: 2px;
}
html[data-kt-surface="parent"] .cs-chip.selected { color: var(--yz-on-primary); }
html[data-kt-surface="parent"] .tm-catalog-card .tm-current-pill { color: var(--yz-on-primary); }
html[data-kt-surface="parent"] :is(.tm-catalog-card.is-current, .tm-custom-row.is-current, .kid-card-pickable.selected) { background: var(--yz-primary-soft); }
html[data-kt-surface="parent"] .tm-row-btn.danger:hover { border-color: var(--yz-danger); color: var(--yz-danger); }
html[data-kt-surface="parent"] .tm-msg.error { color: var(--yz-danger); }

/* Field and control edges: 3:1 against the surface in both themes. */
html[data-kt-surface="parent"] :is(.block-form input, .block-form select, .block-form textarea, .pin-form input[type="password"], .parent-feature-toolbar select, .parent-request-match select, .parent-feature-dialog-sheet textarea, .media-block-search-row input, .media-block-dialog textarea, .media-block-dialog select, .parent-request-actions button, .parent-history-actions button, .cs-kid-action-btn, .tm-row-btn, .tm-catalog-card) {
  border-color: var(--kt-control-line);
}
html[data-kt-surface="parent"] :is(.block-form input, .block-form select, .block-form textarea, .pin-form input[type="password"], .media-block-search-row input):focus { border-color: var(--yz-primary); }

/* Parent settings panels: neutral surfaces, the soft blue for selection, status colors next to words. */
html[data-kt-surface="parent"] .parent-feature-panel { border-color: var(--yz-border); background: var(--yz-surface); }
html[data-kt-surface="parent"] :is(.parent-feature-count, .media-blocks-count) { border-color: var(--yz-primary); color: var(--yz-primary); background: var(--yz-primary-soft); }
html[data-kt-surface="parent"] :is(.parent-feature-empty, .parent-request-card, .parent-history-summary > div, .parent-history-row, .parent-preflight-grid > div, .parent-privacy-counts > div, .media-block-row, .media-block-result-row) { background: var(--yz-raised); }
html[data-kt-surface="parent"] :is(.parent-preflight-grid > div, .parent-privacy-counts > div) { border-color: var(--yz-border); }
html[data-kt-surface="parent"] .parent-request-actions .parent-action-primary { border-color: var(--yz-success); color: var(--yz-success); background: var(--yz-success-soft); }
html[data-kt-surface="parent"] .parent-history-actions .parent-action-danger { border-color: var(--yz-danger); color: var(--yz-danger); background: var(--yz-danger-soft); }
html[data-kt-surface="parent"] .parent-feature-status.is-error,
html[data-kt-surface="parent"] .parent-privacy-warning { color: var(--yz-danger); }
html[data-kt-surface="parent"] .parent-feature-status.is-success { color: var(--yz-success); }
html[data-kt-surface="parent"] .draft-link-label { border-color: var(--kt-control-line); }
html[data-kt-surface="parent"] .parent-feature-dialog-close { background: var(--yz-raised); color: var(--yz-text); }
html[data-kt-surface="parent"] .parent-preflight { border-color: var(--yz-success); background: var(--yz-surface); }
html[data-kt-surface="parent"] .parent-preflight[data-state="warning"],
html[data-kt-surface="parent"] .parent-preflight[data-state="checking"] { border-color: var(--yz-gold); }
html[data-kt-surface="parent"] .parent-preflight[data-state="action"] { border-color: var(--yz-danger); }
html[data-kt-surface="parent"] .parent-preflight-badge { border-color: var(--yz-success); color: var(--yz-success); background: var(--yz-success-soft); }
html[data-kt-surface="parent"] [data-state="warning"] .parent-preflight-badge,
html[data-kt-surface="parent"] [data-state="checking"] .parent-preflight-badge { border-color: var(--yz-gold); color: var(--yz-gold); background: var(--yz-gold-soft); }
html[data-kt-surface="parent"] [data-state="action"] .parent-preflight-badge { border-color: var(--yz-danger); color: var(--yz-danger); background: var(--yz-danger-soft); }
html[data-kt-surface="parent"] .media-blocks-section { border-color: var(--yz-border); background: var(--yz-surface); }
html[data-kt-surface="parent"] :is(.media-blocks-kicker, .media-block-icon) { color: var(--yz-primary); }
html[data-kt-surface="parent"] .media-block-icon { background: var(--yz-primary-soft); }
html[data-kt-surface="parent"] :is(.media-block-unblock, .media-block-result-action) { border-color: var(--yz-primary); color: var(--yz-primary); background: var(--yz-surface); }
html[data-kt-surface="parent"] :is(.media-block-unblock, .media-block-result-action):hover { background: var(--yz-primary-soft); }
/* The pre-handoff check gets the panel padding its border needs (its text sat on the edge). */
html[data-kt-surface="parent"] .parent-preflight { padding: clamp(18px, 3vw, 24px); border-radius: 16px; }
/* A selected child's card is soft blue with a blue edge; its button keeps a 3:1 edge on that surface. */
html[data-kt-surface="parent"] .kid-card-pickable.selected .cs-kid-action-btn { border-color: var(--yz-primary); }
/* The Homeschool pairing card's colors are inline; the link and the dismiss button need 4.5:1 in Light. */
html[data-kt-surface="parent"] #cs-cross-sell-card { border-left-color: var(--yz-success) !important; }
html[data-kt-surface="parent"] #cs-cross-sell-card a { color: var(--yz-primary) !important; }
html[data-kt-surface="parent"] #cs-cross-sell-dismiss { color: var(--yz-muted) !important; }
html[data-kt-surface="parent"] .kids-tour-resume { border-color: var(--yz-primary); background: var(--yz-primary-soft); }
html[data-kt-surface="parent"] .kids-tour-resume strong { color: var(--yz-primary); }

/* Privacy & family data (data.html, css/data.css). */
html[data-kt-surface="parent"] .data-page { color: var(--yz-text); background: var(--yz-background); }
html[data-kt-surface="parent"] :is(.data-back, .data-links a, .data-eyebrow, .data-kicker) { color: var(--yz-primary); }
html[data-kt-surface="parent"] :is(.data-intro, .data-card p, .data-list, .data-counts span) { color: var(--yz-muted); }
html[data-kt-surface="parent"] .data-card { border-color: var(--yz-border); background: var(--yz-surface); box-shadow: var(--shadow); }
html[data-kt-surface="parent"] :is(.data-card h2, .data-counts strong, .data-card label) { color: var(--yz-text); }
html[data-kt-surface="parent"] .data-role { border-color: var(--yz-emphasis); color: var(--yz-emphasis); background: var(--yz-emphasis-soft); }
html[data-kt-surface="parent"] .data-counts > div { border-color: var(--yz-border); background: var(--yz-raised); }
html[data-kt-surface="parent"] .data-button { color: var(--yz-on-primary); background: var(--yz-primary); }
html[data-kt-surface="parent"] .data-button-secondary { color: var(--yz-text); background: var(--yz-raised); box-shadow: inset 0 0 0 1px var(--kt-control-line); }
html[data-kt-surface="parent"] .data-button-danger { color: var(--yz-background); background: var(--yz-danger); }
html[data-kt-surface="parent"] :is(.data-button, .data-back, .data-links a):focus-visible { outline: 3px solid var(--yz-focus); outline-offset: 2px; }
html[data-kt-surface="parent"] .data-input { border-color: var(--kt-control-line); color: var(--yz-text); background: var(--yz-surface); }
html[data-kt-surface="parent"] .data-input:focus { border-color: var(--yz-primary); }
html[data-kt-surface="parent"] :is(.data-status.is-error, .data-owner-note, .data-warning) { color: var(--yz-danger) !important; }
html[data-kt-surface="parent"] .data-status.is-success { color: var(--yz-success) !important; }
html[data-kt-surface="parent"] .data-danger { border-color: var(--yz-danger); background: linear-gradient(145deg, var(--yz-danger-soft), var(--yz-surface) 42%); }
html[data-kt-surface="parent"] .data-danger h2 { color: var(--yz-danger); }

/* Family library (family.html, css/family.css). */
html[data-kt-surface="parent"] .family-shell a:not(.lp-button) { color: var(--yz-primary); }
html[data-kt-surface="parent"] .family-shell :is(.intro, section > p, small) { color: var(--yz-muted); }
html[data-kt-surface="parent"] .family-shell section { border-color: var(--yz-border); background: var(--yz-surface); }
html[data-kt-surface="parent"] .family-shell :is(input, select) { border-color: var(--kt-control-line); color: var(--yz-text); background: var(--yz-surface); }
html[data-kt-surface="parent"] .family-shell button:not([role="tab"]) { border-color: var(--kt-control-line); color: var(--yz-text); background: var(--yz-raised); }
html[data-kt-surface="parent"] .family-shell form button:not([type="button"], [type="reset"]) { border-color: var(--yz-primary); color: var(--yz-on-primary); background: var(--yz-primary); }
html[data-kt-surface="parent"] .family-shell :is(button, a, input, select, summary):focus-visible { outline: 3px solid var(--yz-focus); outline-offset: 3px; }
html[data-kt-surface="parent"] .family-shell :is(fieldset, details) { border-color: var(--yz-border); }
html[data-kt-surface="parent"] .family-shell :is(.rows > div, ol > li) { border-bottom-color: var(--yz-border); }
html[data-kt-surface="parent"] .family-shell #status:not(:empty) { border-left-color: var(--yz-primary); }

/* Trust, Privacy notice and Terms (their own inline styles name --panel, --line and --accent). */
html[data-kt-surface="parent"] { --panel: var(--yz-surface); --line: var(--yz-border); }
html[data-kt-surface="parent"] body:not([class]) { background: var(--yz-background); }
html[data-kt-surface="parent"] body:not([class]) :is(section:not(.plain), .truth div) { background: var(--yz-surface); }
html[data-kt-surface="parent"] body:not([class]) :is(.draft, .callout) { border-color: var(--yz-emphasis); color: var(--yz-text); background: var(--yz-emphasis-soft); }
html[data-kt-surface="parent"] body:not([class]) .callout h2 { color: var(--yz-emphasis); }
html[data-kt-surface="parent"] body:not([class]) a:focus-visible { outline: 3px solid var(--yz-focus); outline-offset: 2px; }

/* The guided tour stays a dark overlay on every page, now in the brand slate with the soft blue. */
.kids-tour-spotlight { border-color: #9CB9FF; box-shadow: 0 0 0 9999px rgba(10, 14, 21, .78), 0 0 0 7px rgba(156, 185, 255, .18), 0 12px 38px rgba(0, 0, 0, .55); }
.kids-tour-bubble { border-color: #3B4B61; background: #1C2634; color: #EDF2F7; }
.kids-tour-progress { background: #3B4B61; }
.kids-tour-progress span { background: #9CB9FF; }
.kids-tour-count { color: #B3BFCE; }
.kids-tour-close { border-color: #687D98; background: #253244; color: #EDF2F7; }
.kids-tour-name { color: #F2B387; }
.kids-tour-bubble h2 { color: #EDF2F7; }
.kids-tour-body { color: #B3BFCE; }
.kids-tour-note { border-color: #687D98; background: #253244; color: #E6CB84; }
.kids-tour-actions button { border-color: #687D98; background: #253244; color: #EDF2F7; }
.kids-tour-actions .kids-tour-end { color: #B3BFCE; }
.kids-tour-actions .kids-tour-next { border-color: #9CB9FF; background: #9CB9FF; color: #16264F; }
.kids-tour-actions button:focus-visible, .kids-tour-close:focus-visible { outline: 3px solid #EDF2F7; outline-offset: 2px; }