.word-play {
  position: relative; display: inline-block; vertical-align: baseline;
  margin: 0; padding: 0; border: 0; border-radius: 1px; background: none;
  font: inherit; line-height: inherit; color: inherit;
  text-decoration: underline; text-decoration-thickness: 1px;
  text-decoration-color: var(--nav-underline); text-underline-offset: 4px;
  text-decoration-style: dotted;
  -webkit-tap-highlight-color: transparent;
}
.word-play:hover, .word-play:focus-visible { text-decoration-style: solid; }
.word-play:disabled { cursor: text; text-decoration: none; }
.word-play[data-playing] { text-decoration-color: transparent; }
.word-play-label { display: inline-block; text-decoration: inherit; }
.word-play-threads { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.word-play-threads path { fill: none; stroke: currentColor; stroke-width: .65; stroke-linecap: round; stroke-linejoin: round; }
/* The real page sits between the stars and the firework. Fade its palette,
   rather than its container, so the original word can stay fully legible. */
html[data-about-night] { overflow: hidden; }
html[data-about-night] body {
  --night-blend: calc(var(--night-progress, 0) * 100%);
  --ink: color-mix(in srgb, var(--night-base-ink), rgb(235 235 235 / .22) var(--night-blend));
  --muted: color-mix(in srgb, var(--night-base-muted), rgb(235 235 235 / .17) var(--night-blend));
  --accent: color-mix(in srgb, var(--night-base-accent), rgb(235 235 235 / .2) var(--night-blend));
  --line: color-mix(in srgb, var(--night-base-line), rgb(235 235 235 / .08) var(--night-blend));
  --paper: color-mix(in srgb, var(--night-base-paper), transparent var(--night-blend));
  --highlight: color-mix(in srgb, var(--night-base-highlight), rgb(235 235 235 / .025) var(--night-blend));
  --surface: color-mix(in srgb, var(--night-base-surface), rgb(235 235 235 / .035) var(--night-blend));
  --surface-hover: color-mix(in srgb, var(--night-base-surface-hover), rgb(235 235 235 / .055) var(--night-blend));
  --control: color-mix(in srgb, var(--night-base-control), rgb(235 235 235 / .035) var(--night-blend));
  --selection: color-mix(in srgb, var(--night-base-selection), rgb(235 235 235 / .08) var(--night-blend));
  --nav-underline: color-mix(in srgb, var(--night-base-nav-underline), rgb(235 235 235 / .18) var(--night-blend));
  background: var(--night-base-paper);
}
html[data-about-night] .portfolio-layout { position: relative; z-index: 1; }
html[data-about-night] [data-word-play="two"] {
  color: color-mix(in srgb, var(--night-base-ink), #ebebeb var(--night-blend));
  text-decoration-color: color-mix(in srgb, var(--night-base-nav-underline), #ebebeb99 var(--night-blend));
}
html[data-about-night] :is(.portrait-printer, .polaroid-stage, .polaroid-pinned) {
  opacity: calc(1 - var(--night-progress, 0) * .8);
}
.about-night-stars {
  position: fixed; inset: 0; z-index: 0; width: 100%; height: 100%;
  pointer-events: none; opacity: 0;
  background: radial-gradient(ellipse at 50% 56%, #0d1934 0%, #080f25 42%, #040817 100%);
}
.about-night {
  position: fixed; inset: 0; z-index: 1000; width: 100%; height: 100%;
  max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  overflow: hidden; overscroll-behavior: none; touch-action: none;
  background: transparent;
  color: #b9c2d7; color-scheme: dark; outline: none;
  opacity: 0;
}
.about-night::backdrop { background: transparent; }
.about-night-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; pointer-events: none; }
.about-night-close {
  position: absolute; left: 50%; bottom: max(28px, env(safe-area-inset-bottom));
  transform: translateX(-50%); display: flex; align-items: center; gap: 14px;
  min-height: 44px; padding: 8px 12px; border: 0; background: none;
  color: inherit; font-size: .75rem; letter-spacing: .025em; white-space: nowrap;
  opacity: .6; transition: opacity 180ms ease;
}
.about-night-close:hover, .about-night-close:focus-visible { opacity: 1; }
.about-night-close:focus-visible { outline: 1px solid currentColor; outline-offset: 2px; border-radius: 3px; }
.about-night-close span { font-size: .875rem; }
.about-night .keyboard-hint { background: #080f25; color: #b9c2d7; border-color: #263149; }
.about-night .selection-frame { color: #b9c2d7; }
.effect-description { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (prefers-reduced-motion: reduce) {
  .about-night-close { transition: none; }
}
@media print {
  .about-night, .about-night-stars, .word-play-threads { display: none !important; }
  .word-play { text-decoration: none; }
  .word-play-label { opacity: 1 !important; }
}