/* First important layer: passive help and the source label's safe text area. */
@layer sukun-tefekkur-help {
 html body.sukun-tefekkur-mode #r920Practice #r920TefExit:not([hidden]) {
  position:relative!important;overflow:visible!important;margin-bottom:40px!important;
 }
 html body #r920Practice #r920TefExitHint {
  display:block!important;position:absolute!important;top:calc(100% + 7px)!important;left:50%!important;
  width:220px!important;max-width:calc(100vw - 48px)!important;height:auto!important;min-height:0!important;
  box-sizing:border-box!important;margin:0!important;padding:3px 7px!important;border:0!important;border-image:none!important;
  border-radius:6px!important;
  font:500 11px/1.4 system-ui,sans-serif!important;letter-spacing:normal!important;text-align:center!important;
  white-space:normal!important;overflow-wrap:anywhere!important;text-transform:none!important;
  transform:translateX(-50%)!important;pointer-events:none!important;
 }
 /* Both passive instructions use light glass, not an opaque dark plaque.
    Their opacity alone changes; fading never shifts the eye or exit target. */
 html body #r920Practice #r920TefExitHint,
 html body.sukun-tefekkur-mode #r920Practice #r1241ControlHint {
  background:linear-gradient(135deg,rgba(255,255,255,.18),rgba(255,255,255,.05))!important;
  color:#fff4df!important;-webkit-text-fill-color:#fff4df!important;
  border:1px solid rgba(255,244,223,.28)!important;border-image:none!important;border-radius:8px!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2)!important;
  backdrop-filter:blur(6px) saturate(1.12)!important;-webkit-backdrop-filter:blur(6px) saturate(1.12)!important;
  text-shadow:0 1px 2px rgba(0,0,0,.7)!important;
  animation:sukun-tefekkur-hint 14s ease-in-out infinite!important;
 }
 html body.sukun-tefekkur-mode #r920Practice #r1241ControlHint {
  width:fit-content!important;max-width:100%!important;min-width:0!important;box-sizing:border-box!important;
  align-self:center!important;margin:0 auto!important;padding:3px 8px!important;
  font:500 12px/1.5 system-ui,sans-serif!important;text-align:center!important;
  white-space:normal!important;overflow-wrap:anywhere!important;
 }
 /* Frameless layered control. A 24px mark sits in an accessible native
    target; the short label and reserved exit-hint gap remain in normal flow. */
 html body #r920Practice #r1056FocusControlsToggle {
  display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;
  width:fit-content!important;min-width:44px!important;max-width:100%!important;
  height:auto!important;min-height:56px!important;max-height:none!important;box-sizing:border-box!important;
  flex:0 0 auto!important;gap:3px!important;margin:0 auto!important;padding:4px 10px!important;
  grid-column:1/-1!important;grid-row:auto!important;justify-self:center!important;align-self:center!important;
  position:relative!important;inset:auto!important;transform:none!important;
  border:0!important;border-image:none!important;border-radius:6px!important;
  background:none!important;box-shadow:none!important;filter:none!important;
  color:#d4e5df!important;-webkit-text-fill-color:currentColor!important;
  text-shadow:0 1px 2px #000!important;cursor:pointer!important;
 }
 html[data-r1074-theme="berhet"] body #r920Practice #r1056FocusControlsToggle {color:#f2da9e!important}
 html body #r920Practice #r1056FocusControlsToggle::before,
 html body #r920Practice #r1056FocusControlsToggle::after {content:none!important;display:none!important}
 html body #r920Practice #r1056FocusControlsToggle #r1242FocusControlsLabel {
  display:block!important;position:static!important;margin:0!important;padding:0!important;
  font:500 11px/1.4 system-ui,sans-serif!important;letter-spacing:normal!important;
  text-align:center!important;white-space:normal!important;overflow-wrap:anywhere!important;
 }
 html body #r920Practice #r1056FocusControlsToggle .rControlsLayers {
  display:block!important;width:24px!important;height:24px!important;flex:0 0 24px!important;
  fill:none!important;stroke:currentColor!important;stroke-width:1.5!important;
  stroke-linecap:round!important;stroke-linejoin:round!important;pointer-events:none!important;
 }
 html body #r920Practice #r1056FocusControlsToggle[data-layer-action="show"] .rControlsLayersSlash {display:none!important}
 html body #r920Practice:has(#r1056FocusControlsToggle:focus-visible) #r1241ControlHint {animation:none!important;opacity:1!important}
 html body #r920Practice #r920TefExit:focus-visible {outline:3px solid #ffe1a0!important;outline-offset:3px!important}
 html body #r920Practice #r920TefExit:focus-visible #r920TefExitHint {animation:none!important;opacity:1!important}
 @media(hover:hover) {
  html body #r920Practice #r920TefExit:hover #r920TefExitHint {animation:none!important;opacity:1!important}
 }
 /* Keep the original sapphire frame. The text and chevron must stay inside
    its carved sides even when the total counter shares a narrow mobile row. */
 html[data-r1074-theme="berhet"] body #r920Practice #r1056ReadingSource {
  position:relative!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;box-sizing:border-box!important;
  width:100%!important;min-width:0!important;max-width:100%!important;
  height:auto!important;min-height:56px!important;max-height:none!important;
  padding:15px 36px!important;white-space:normal!important;overflow-wrap:anywhere!important;
  text-align:center!important;text-indent:0!important;font-size:11px!important;line-height:1.35!important;
 }
 html[data-r1074-theme="berhet"] body #r920Practice #r1056ReadingSource::after {
  position:static!important;inset:auto!important;display:block!important;flex:0 0 auto!important;
  width:10px!important;margin:0!important;padding:0!important;transform:none!important;
 }
 @media(prefers-reduced-motion:reduce) {
  html body #r920Practice #r920TefExitHint,
  html body.sukun-tefekkur-mode #r920Practice #r1241ControlHint {animation:none!important;opacity:1!important}
 }
 @media(forced-colors:active) {
  html body #r920Practice #r920TefExitHint,
  html body.sukun-tefekkur-mode #r920Practice #r1241ControlHint {
   background:Canvas!important;color:CanvasText!important;-webkit-text-fill-color:CanvasText!important;
   border-color:CanvasText!important;box-shadow:none!important;text-shadow:none!important;
   backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  }
 html body #r920Practice #r920TefExit:focus-visible {outline-color:Highlight!important}
 html body #r920Practice #r1056FocusControlsToggle {
  color:ButtonText!important;background:ButtonFace!important;text-shadow:none!important;forced-color-adjust:auto!important;
 }
 html body #r920Practice #r1056FocusControlsToggle:focus-visible {outline-color:Highlight!important}
 }
}
@keyframes sukun-tefekkur-hint {
 0%,28%,100% {opacity:1}
 36%,90% {opacity:0}
}