.theme-toggle {
  position: relative;
  z-index: 5;
  appearance: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  font: inherit;
  color: var(--ink);
  background: transparent;
  border: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  view-transition-name: theme-control;
}
.theme-toggle:focus-visible { outline: none; }
.theme-toggle:focus-visible::after {
  content: "";
  position: absolute;
  bottom: 3px;
  width: 16px;
  height: 2px;
  background: currentColor;
}
.theme-icon { width: 22px; height: 22px; overflow: visible; }
.sun-disc { r: 5px; transition: r .55s cubic-bezier(.4, 0, .2, 1); }
.moon-cutout { transform: translate(0, 0); transition: transform .55s cubic-bezier(.4, 0, .2, 1); }
.sun-rays { opacity: 1; transform: rotate(0deg) scale(1); transform-origin: 12px 12px; transition: transform .55s cubic-bezier(.4, 0, .2, 1), opacity .25s ease; }
[data-theme="dark"] .sun-disc { r: 9px; }
[data-theme="dark"] .moon-cutout { transform: translate(-9px, 9px); }
[data-theme="dark"] .sun-rays { opacity: 0; transform: rotate(70deg) scale(.5); }

/* Keep the morphing control and water rings above the circular page reveal. */
::view-transition-group(root),
::view-transition-group(theme-control),
::view-transition-group(theme-ripple) { animation: none; }
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-old(root) { z-index: 1; }
::view-transition-new(root) { z-index: 2; }
::view-transition-group(theme-control) { z-index: 4; mix-blend-mode: difference; }
::view-transition-group(theme-ripple) { z-index: 3; }
::view-transition-old(theme-control), ::view-transition-old(theme-ripple) { display: none; }
::view-transition-new(theme-control), ::view-transition-new(theme-ripple) { animation: none; mix-blend-mode: normal; }
/* White difference blending keeps the bare icon visible on either side of the ripple. */
::view-transition-new(theme-control) { filter: brightness(0) invert(1); }
::view-transition { pointer-events: none; }
.theme-ripple { position: fixed; inset: 0; z-index: 10; overflow: hidden; pointer-events: none; view-transition-name: theme-ripple; }
.theme-wave, .theme-drop { position: absolute; left: var(--ripple-x); top: var(--ripple-y); display: block; border-radius: 50%; opacity: 0; }
.theme-wave { width: var(--ripple-size); height: var(--ripple-size); border: 1px solid rgb(239 186 43 / 55%); box-shadow: 0 0 12px rgb(239 186 43 / 8%); }
.theme-drop { width: 10px; height: 10px; background: var(--gold); }
.is-running .theme-drop { animation: water-drop 240ms ease-in both; }
.is-running .theme-wave { animation: water-wave 900ms 160ms cubic-bezier(.22, .8, .25, 1) both; }
.is-running .theme-wave-echo { animation-delay: 230ms; }
@keyframes water-drop {
  0% { opacity: 0; transform: translate(-50%, calc(-50% - 22px)) scale(.5, 1.1); }
  45% { opacity: .65; }
  70% { opacity: .65; transform: translate(-50%, -50%) scale(.7, 1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.8, .3); }
}
@keyframes water-wave {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0); }
  10% { opacity: .7; }
  65% { opacity: .3; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1); }
}

@media (max-width: 760px) {
  .header-actions { gap: 12px; }
  .utility-bar, .document-header { gap: 10px; }
  .quiet-link span, .back-link span { display: none; }
}
@media (max-width: 360px) {
  .utility-bar > .eyebrow { font-size: 8px; letter-spacing: .08em; }
  .document-header .wordmark { font-size: 19px; }
}
@media (prefers-reduced-motion: reduce) {
  .sun-disc, .moon-cutout, .sun-rays { transition: none; }
  .theme-ripple { display: none; }
}