/* Animated lesson (static/board/animated.js; on the page only with TUTOR_ANIMATED=1): the stage over the board, its
   Continue pill, the fallback note. Today's page and the new one (ui2) both keep #board, so one rule set serves both. */
#animStage { position: absolute; inset: 0; z-index: 6; border-radius: inherit; overflow: hidden; background: #fafaf5; }
#animStage[hidden] { display: block; visibility: hidden; pointer-events: none; }  /* (still laid out: the stage page keeps its real size while it loads) */
#animStage iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; background: transparent; }
#animStage .anim-go { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 2; border: 0; border-radius: 999px;
  padding: 11px 20px; min-height: 44px; font: 600 15px/1.2 Inter, system-ui, sans-serif; background: #111827; color: #fff;
  box-shadow: 0 6px 20px rgba(17, 24, 39, .25); cursor: pointer; max-width: calc(100% - 32px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#animStage .anim-go[hidden] { display: none; }
#animStage .anim-go:focus-visible { outline: 3px solid #93c5fd; outline-offset: 2px; }
#animNote { position: fixed; left: 50%; top: 12px; transform: translateX(-50%); z-index: 60; display: flex; align-items: center; gap: 10px;
  max-width: min(560px, calc(100vw - 32px)); box-sizing: border-box; padding: 10px 8px 10px 16px; border-radius: 12px; background: #111827; color: #fff;
  font: 500 14px/1.35 Inter, system-ui, sans-serif; box-shadow: 0 8px 30px rgba(17, 24, 39, .25); }
#animNote[hidden] { display: none; }
#animNote button { flex: none; width: 36px; height: 36px; border: 0; border-radius: 8px; background: transparent; color: #fff; font-size: 20px; cursor: pointer; }