/* Beginner-mode toggle.
 *
 * When body has .beginner-mode, anything authored with the `advanced` class
 * collapses out of view. Authors mark depth-y sections with:
 *
 *     <div class="advanced" markdown>
 *     ...content...
 *     </div>
 *
 * or inline:
 *
 *     - { .advanced } a senior bullet that would scare a beginner
 */
body.beginner-mode .advanced { display: none !important; }

.beginner-mode-toggle {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  z-index: 100;
  background: var(--md-primary-fg-color);
  color: var(--md-primary-bg-color);
  border: none;
  border-radius: 999px;
  padding: 0.5rem 0.9rem;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
.beginner-mode-toggle:hover { filter: brightness(1.1); }
.beginner-mode-toggle[aria-pressed="true"] {
  background: var(--md-accent-fg-color);
}