/* Presentation only: scoped playback, native queue and wake lock are unchanged. */
.focused-shadowing { gap: 14px; }
.focused-shadowing .example-stage { padding: 18px; border-radius: 22px; background: linear-gradient(145deg, #123c57, #0a203d); }
.focused-shadowing .example-row { display: grid; grid-template-columns: minmax(0, 1fr); border: 0; padding: 16px 0 4px; gap: 22px; }
.focused-shadowing .example-row[hidden] { display: none; }
.focused-shadowing .example-copy { text-align: center; gap: 16px; }
.focused-shadowing .example-copy strong { font-size: clamp(1.35rem, 4.5vw, 1.85rem); line-height: 1.4; }
.focused-shadowing .example-copy span { font-size: 1rem; color: #bcd5ec; line-height: 1.5; }
.focused-shadowing .example-listen { width: 100%; min-height: 56px; border-radius: 28px; background: var(--gold); color: #09203a; display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 1rem; }
.focused-shadowing .example-listen span { color: inherit; font-size: inherit; }
.focused-shadowing .example-nav { margin: 0; }
.focused-shadowing .example-nav button { width: 50px; min-height: 48px; }
.example-play-topic { min-height: 48px; width: 100%; border-radius: 14px; background: #153b63; border: 1px solid #67dbd3; color: white; font: inherit; font-weight: 750; }
.example-play-hint { color: #bcd5ec; line-height: 1.5; }
.example-context-picker > summary { min-height: 44px; padding-block: 12px; color: var(--teal); cursor: pointer; }
.example-context-picker .example-contexts button { min-height: 44px; }
.shadowing-focus { padding: 18px max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)); }
.shadowing-focus > header, .shadowing-focus > main { width: min(100%, 720px); margin-inline: auto; }
.shadowing-focus > main { gap: 18px; }
.shadowing-focus-route { font-size: .8rem; }
.shadowing-focus-route > span { display: none; }
.shadowing-focus-card { border-radius: 24px; padding: 24px 20px; text-align: center; }
.shadowing-focus-card h1 { font-size: clamp(1.4rem, 4.8vw, 2rem); line-height: 1.45; }
.shadowing-focus-card > [data-shadowing-count] { color: var(--teal); font-weight: 800; }
.shadowing-focus .shadowing-language-badge { font-size: .72rem; }
.shadowing-controls { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.shadowing-controls > button { min-width: 0; min-height: 64px; padding: 8px 2px; font-size: 1.25rem; }
.shadowing-controls > button span { font-size: .67rem; }
.shadowing-controls > button.primary { border-radius: 50%; background: var(--gold); color: #09203a; }
.shadowing-focus :is(button, summary):focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.shadowing-focus button { min-height: 44px; }
@media (prefers-reduced-motion: reduce) {
  .shadowing-focus *, .focused-shadowing * { transition: none !important; animation: none !important; }
}