:root {
  --article-ink: #071a2f;
  --article-paper: #fffaf0;
  --article-paper-accent: #fff0c2;
  --article-mana: #5ac8fa;
  --article-yolk: #ffc857;
}

:root[data-theme="dark"] {
  --article-ink: #fff4d4;
  --article-paper: #0b2945;
  --article-paper-accent: #123653;
  --article-mana: #86bdff;
}

@media (prefers-color-scheme: dark) {
  :root[data-theme="system"] {
    --article-ink: #fff4d4;
    --article-paper: #0b2945;
    --article-paper-accent: #123653;
    --article-mana: #86bdff;
  }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.article-layout {
  padding: clamp(2rem, 5vw, 4rem) clamp(0.75rem, 2.5vw, 2rem) 9rem;
}

.article-page {
  width: min(100%, 78rem);
  margin: 0 auto;
  border: 4px solid var(--article-ink);
  background: var(--article-paper);
  color: var(--article-ink);
  box-shadow: 12px 12px 0 color-mix(in srgb, var(--article-ink) 18%, transparent);
}

.article-masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem clamp(1.25rem, 5vw, 3.5rem);
  border-bottom: 4px solid var(--article-ink);
  background: var(--article-paper-accent);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.article-masthead a {
  color: inherit;
}

.article-masthead p {
  margin: 0;
  text-align: right;
}

.article-body {
  max-width: 64rem;
  margin: 0 auto;
  padding: clamp(2.5rem, 5vw, 4.5rem) clamp(1.25rem, 4vw, 3rem);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.05rem, 1.8vw, 1.2rem);
  line-height: 1.8;
}

.article-body h1,
.article-body h2,
.article-body h3 {
  font-family: "SFMono-Regular", "Cascadia Code", "Roboto Mono", Consolas, monospace;
  letter-spacing: -0.045em;
}

.article-body h1 {
  max-width: 24ch;
  margin: 0 0 1.5rem;
  font-size: clamp(2.35rem, 4.4vw, 4rem);
  line-height: 1.02;
}

.article-body h1 + p {
  margin-bottom: 2rem;
  font-size: clamp(1.15rem, 2.2vw, 1.45rem);
  line-height: 1.55;
}

.article-body h2 {
  margin: 3.5rem 0 1rem;
  font-size: clamp(1.65rem, 4vw, 2.5rem);
  line-height: 1.1;
}

.article-body h3 {
  margin: 2.5rem 0 0.75rem;
  font-size: 1.35rem;
  line-height: 1.25;
}

.article-body p,
.article-body ul,
.article-body ol {
  margin-block: 1.25rem;
}

.article-body li + li {
  margin-top: 0.45rem;
}

.article-body a {
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}

.article-body blockquote {
  margin: 2.5rem 0;
  padding: 1.3rem 1.5rem;
  border-left: 8px solid var(--c-red);
  background: color-mix(in srgb, var(--c-red) 12%, var(--article-paper));
  font-size: 1.18em;
  font-weight: 700;
}

.article-body code {
  padding: 0.12em 0.32em;
  background: color-mix(in srgb, var(--article-ink) 10%, transparent);
  font-family: "SFMono-Regular", "Cascadia Code", "Roboto Mono", Consolas, monospace;
  font-size: 0.88em;
}

.article-body pre {
  overflow-x: auto;
  margin: 2rem 0;
  padding: 1.5rem;
  border: 3px solid var(--article-ink);
  background: #071a2f;
  color: #d9ffb5;
  font: 0.85rem/1.65 "SFMono-Regular", "Cascadia Code", "Roboto Mono", Consolas, monospace;
}

.article-body pre code {
  padding: 0;
  background: transparent;
  color: inherit;
  font: inherit;
}

.article-body img {
  display: block;
  width: 100%;
  height: auto;
  margin: 2.5rem auto;
  border: 3px solid var(--article-ink);
  background: #071a2f;
}

.article-table-scroll {
  overflow-x: auto;
  margin: 2rem 0;
}

.article-body table {
  width: 100%;
  min-width: 40rem;
  border-collapse: collapse;
  font-family: "SFMono-Regular", "Cascadia Code", "Roboto Mono", Consolas, monospace;
  font-size: 0.78rem;
  line-height: 1.5;
}

.article-body th,
.article-body td {
  padding: 0.85rem;
  border: 2px solid var(--article-ink);
  text-align: left;
  vertical-align: top;
}

.article-body th {
  background: color-mix(in srgb, var(--article-yolk) 38%, var(--article-paper));
}

.article-reaction-dock {
  position: fixed;
  z-index: 90;
  right: 1.25rem;
  bottom: 1.25rem;
  display: grid;
  grid-template-columns: repeat(2, 5rem);
  align-items: center;
  gap: 0.45rem;
  width: auto;
  padding: 0.45rem;
  border: 3px solid var(--article-ink);
  box-sizing: border-box;
  background: var(--article-paper);
  color: var(--article-ink);
  box-shadow: 6px 6px 0 color-mix(in srgb, var(--article-ink) 24%, transparent);
}

.article-reaction-character-perch {
  position: absolute;
  z-index: 3;
  bottom: calc(100% - 7px);
  left: 50%;
  width: 0;
  height: 0;
}

.article-reaction-character {
  --character-size: 132px;
  --character-jump-apex: -120px;
  position: absolute;
  bottom: 0;
  left: 0;
  width: var(--character-size);
  height: var(--character-size);
  pointer-events: none;
  translate: -50% 0;
  transform-origin: 50% 78%;
  will-change: transform;
}

.article-reaction-character__frame,
.article-reaction-character__aura,
.article-reaction-character__glow,
.article-reaction-character__egg-stains,
.article-reaction-character__odor,
.article-reaction-character__flies,
.article-reaction-character__lightning {
  position: absolute;
  inset: 0;
  display: block;
}

.article-reaction-character__aura {
  z-index: 0;
  inset: 10% 5% 2%;
  border-radius: 50% 50% 42% 42%;
  opacity: 0;
  filter: blur(5px);
  transform: scale(0.74);
}

.article-reaction-character__aura i {
  position: absolute;
  bottom: 8%;
  width: 24%;
  height: 70%;
  background: inherit;
  clip-path: polygon(50% 0, 100% 72%, 65% 58%, 50% 100%, 34% 58%, 0 72%);
}

.article-reaction-character__aura i:nth-child(1) { left: 4%; transform: rotate(-17deg); }
.article-reaction-character__aura i:nth-child(2) { left: 38%; }
.article-reaction-character__aura i:nth-child(3) { right: 4%; transform: rotate(17deg); }

.article-reaction-character[data-form="charged"] .article-reaction-character__aura {
  opacity: 0.55;
  background: rgb(90 200 250 / 64%);
  box-shadow: 0 0 18px 7px rgb(90 200 250 / 52%);
  animation: article-character-aura 1500ms steps(4, end) infinite;
}

.article-reaction-character[data-form="surged"] {
  --character-jump-apex: -145px;
}

.article-reaction-character[data-form="surged"] .article-reaction-character__aura {
  opacity: 0.86;
  background: rgb(255 205 56 / 78%);
  box-shadow: 0 0 24px 10px rgb(255 200 42 / 64%);
  animation: article-character-aura 1100ms steps(5, end) infinite;
}

.article-reaction-character[data-form="ascended"] {
  --character-jump-apex: -175px;
}

.article-reaction-character[data-form="ascended"] .article-reaction-character__aura {
  opacity: 1;
  background: rgb(255 244 180 / 92%);
  box-shadow:
    0 0 20px 10px rgb(255 255 230 / 86%),
    0 0 38px 18px rgb(255 190 30 / 68%);
  animation: article-character-aura-ascended 720ms steps(5, end) infinite;
}

.article-reaction-character[data-form="solar"] {
  --character-jump-apex: -190px;
}

.article-reaction-character[data-form="solar"] .article-reaction-character__aura {
  opacity: 1;
  background: rgb(255 211 61 / 90%);
  box-shadow:
    0 0 22px 10px rgb(255 249 192 / 84%),
    0 0 42px 19px rgb(255 181 24 / 68%);
  animation: article-character-aura-ascended 680ms steps(5, end) infinite;
}

.article-reaction-character[data-form="godfire"] {
  --character-jump-apex: -210px;
}

.article-reaction-character[data-form="godfire"] .article-reaction-character__aura {
  opacity: 1;
  background: rgb(255 72 92 / 88%);
  box-shadow:
    0 0 24px 11px rgb(255 185 194 / 76%),
    0 0 46px 20px rgb(220 22 62 / 66%);
  animation: article-character-aura-ascended 620ms steps(5, end) infinite;
}

.article-reaction-character[data-form="cosmic"] {
  --character-jump-apex: -235px;
}

.article-reaction-character[data-form="cosmic"] .article-reaction-character__aura {
  opacity: 1;
  background: rgb(53 217 255 / 90%);
  box-shadow:
    0 0 25px 12px rgb(203 250 255 / 86%),
    0 0 50px 22px rgb(24 102 255 / 70%);
  animation: article-character-aura-ascended 560ms steps(5, end) infinite;
}

.article-reaction-character[data-form="zenith"] {
  --character-jump-apex: -260px;
}

.article-reaction-character[data-form="zenith"] .article-reaction-character__aura {
  opacity: 1;
  background: rgb(239 235 255 / 90%);
  box-shadow:
    0 0 28px 13px rgb(255 255 255 / 90%),
    0 0 54px 24px rgb(170 156 255 / 68%);
  animation: article-character-aura-ascended 820ms steps(6, end) infinite;
}

.article-reaction-character__frame {
  z-index: 3;
  background: url("../assets/sprites/article-reaction-character-sheet.png") no-repeat 0 0 / 200% 200%;
  image-rendering: pixelated;
  filter: drop-shadow(4px 4px 0 rgb(7 26 47 / 24%));
  transform-origin: 50% 76%;
}

.article-reaction-character[data-form="solar"] .article-reaction-character__frame {
  background-image: url("../assets/sprites/article-reaction-character-solar-sheet.png");
  filter: drop-shadow(0 0 7px rgb(255 211 61 / 82%));
}

.article-reaction-character[data-form="godfire"] .article-reaction-character__frame {
  background-image: url("../assets/sprites/article-reaction-character-godfire-sheet.png");
  filter: drop-shadow(0 0 8px rgb(255 72 92 / 82%));
}

.article-reaction-character[data-form="cosmic"] .article-reaction-character__frame {
  background-image: url("../assets/sprites/article-reaction-character-cosmic-sheet.png");
  filter: drop-shadow(0 0 9px rgb(53 217 255 / 88%));
}

.article-reaction-character[data-form="zenith"] .article-reaction-character__frame {
  background-image: url("../assets/sprites/article-reaction-character-zenith-sheet.png");
  filter: drop-shadow(0 0 10px rgb(230 225 255 / 94%));
}

.article-reaction-character.is-idle-breathe {
  animation: article-character-breathe 1200ms steps(4, end) 1;
}

.article-reaction-character[data-pose="seat"] .article-reaction-character__frame {
  background-position: 0 0;
}

.article-reaction-character[data-pose="teeter"] .article-reaction-character__frame {
  background-position: 100% 0;
  transform: translateX(var(--teeter-shift, 0)) rotate(var(--teeter-angle, 0));
}

.article-reaction-character[data-pose="dirty"] .article-reaction-character__frame {
  background-position: 0 100%;
}

.article-reaction-character[data-pose="victory"] .article-reaction-character__frame {
  background-position: 100% 100%;
}

.article-reaction-character[data-pose="walk"] .article-reaction-character__frame {
  background-image: url("../assets/sprites/character-walk-v4-04.png");
  background-position: center;
  background-size: auto 72%;
}

.article-reaction-character[data-form="solar"][data-pose="walk"] .article-reaction-character__frame {
  background-image: url("../assets/sprites/character-walk-solar.png");
}

.article-reaction-character[data-form="godfire"][data-pose="walk"] .article-reaction-character__frame {
  background-image: url("../assets/sprites/character-walk-godfire.png");
}

.article-reaction-character[data-form="cosmic"][data-pose="walk"] .article-reaction-character__frame {
  background-image: url("../assets/sprites/character-walk-cosmic.png");
}

.article-reaction-character[data-form="zenith"][data-pose="walk"] .article-reaction-character__frame {
  background-image: url("../assets/sprites/character-walk-zenith.png");
}

.article-reaction-character[data-form="surged"] .article-reaction-character__frame {
  filter: drop-shadow(0 0 6px rgb(255 204 45 / 75%));
}

.article-reaction-character[data-form="ascended"] .article-reaction-character__frame {
  filter: drop-shadow(0 0 9px rgb(255 244 164 / 92%));
}

.article-reaction-character__lightning {
  z-index: 7;
  opacity: 0;
}

.article-reaction-character__lightning i {
  position: absolute;
  width: 4px;
  height: 38%;
  background: #e9fbff;
  box-shadow: 0 0 7px #86bdff;
  clip-path: polygon(0 0, 100% 0, 45% 42%, 100% 42%, 0 100%, 35% 55%, 0 55%);
}

.article-reaction-character__lightning i:nth-child(1) { top: 10%; left: 18%; transform: rotate(-18deg); }
.article-reaction-character__lightning i:nth-child(2) { top: 2%; right: 18%; transform: rotate(20deg); }
.article-reaction-character__lightning i:nth-child(3) { right: 5%; bottom: 13%; transform: rotate(32deg); }

.article-reaction-character[data-form="ascended"] .article-reaction-character__lightning,
.article-reaction-character[data-form="solar"] .article-reaction-character__lightning,
.article-reaction-character[data-form="godfire"] .article-reaction-character__lightning,
.article-reaction-character[data-form="cosmic"] .article-reaction-character__lightning,
.article-reaction-character[data-form="zenith"] .article-reaction-character__lightning {
  opacity: 1;
  animation: article-character-lightning 620ms steps(3, end) infinite;
}

.article-reaction-character[data-form="godfire"] .article-reaction-character__lightning i {
  background: #ffd6dc;
  box-shadow: 0 0 7px #ff536d;
}

.article-reaction-character[data-form="cosmic"] .article-reaction-character__lightning i {
  background: #d9fbff;
  box-shadow: 0 0 8px #22c8ff;
}

.article-reaction-character[data-form="zenith"] .article-reaction-character__lightning i {
  background: #fff;
  box-shadow: 0 0 9px #baaaff;
}

.article-reaction-character__glow {
  z-index: 1;
  inset: 26% 18% 16%;
  border-radius: 50%;
  opacity: 0;
  filter: blur(10px);
  transform: scale(0.76);
}

.article-reaction-character[data-tier="fresh"] .article-reaction-character__glow,
.article-reaction-character[data-tier="energized"] .article-reaction-character__glow,
.article-reaction-character[data-tier="radiant"] .article-reaction-character__glow,
.article-reaction-character[data-tier="solar"] .article-reaction-character__glow,
.article-reaction-character[data-tier="godfire"] .article-reaction-character__glow,
.article-reaction-character[data-tier="cosmic"] .article-reaction-character__glow,
.article-reaction-character[data-tier="zenith"] .article-reaction-character__glow {
  opacity: 0.45;
  background: rgb(134 189 255 / 70%);
  animation: article-character-glow 1800ms steps(2, end) infinite;
}

.article-reaction-character[data-tier="energized"] .article-reaction-character__glow {
  opacity: 0.7;
  transform: scale(0.92);
}

.article-reaction-character[data-tier="radiant"] .article-reaction-character__glow {
  inset: 14% 6% 6%;
  opacity: 0.92;
  background: radial-gradient(circle, rgb(211 240 255 / 90%), rgb(90 200 250 / 48%) 52%, transparent 70%);
  transform: scale(1.08);
}

.article-reaction-character__egg-stains {
  z-index: 4;
  opacity: 0;
}

.article-reaction-character__egg-stains i {
  position: absolute;
  width: 8%;
  aspect-ratio: 1;
  background: #ffc21c;
  border: max(2px, calc(var(--character-size) * 0.012)) solid #fffbe8;
  box-shadow: 0 0 0 max(1px, calc(var(--character-size) * 0.008)) #9b6400;
}

.article-reaction-character__egg-stains i:nth-child(1) { top: 45%; left: 43%; }
.article-reaction-character__egg-stains i:nth-child(2) { top: 58%; left: 56%; transform: scale(0.68); }
.article-reaction-character__egg-stains i:nth-child(3) { top: 32%; left: 61%; transform: scale(0.52); }

.article-reaction-character[data-tier="eggy"] .article-reaction-character__egg-stains,
.article-reaction-character[data-tier="smelly"] .article-reaction-character__egg-stains,
.article-reaction-character[data-tier="rotten"] .article-reaction-character__egg-stains {
  opacity: 1;
}

.article-reaction-character[data-tier="smelly"] .article-reaction-character__egg-stains,
.article-reaction-character[data-tier="rotten"] .article-reaction-character__egg-stains {
  filter: hue-rotate(22deg) saturate(0.84);
  transform: scale(1.18);
}

.article-reaction-character[data-tier="rotten"] .article-reaction-character__egg-stains {
  filter: hue-rotate(54deg) saturate(0.72) brightness(0.78);
  transform: scale(1.35);
}

.article-reaction-character__odor {
  z-index: 5;
  opacity: 0;
}

.article-reaction-character__odor i {
  position: absolute;
  top: 16%;
  width: 8%;
  height: 28%;
  border-left: max(2px, calc(var(--character-size) * 0.018)) dashed #86a63e;
  transform: rotate(12deg);
}

.article-reaction-character__odor i:nth-child(1) { left: 32%; }
.article-reaction-character__odor i:nth-child(2) { top: 10%; left: 52%; transform: rotate(-9deg); }
.article-reaction-character__odor i:nth-child(3) { left: 68%; transform: rotate(18deg); }

.article-reaction-character[data-tier="smelly"] .article-reaction-character__odor,
.article-reaction-character[data-tier="rotten"] .article-reaction-character__odor {
  opacity: 0.8;
  animation: article-character-odor 1500ms steps(3, end) infinite;
}

.article-reaction-character[data-tier="rotten"] .article-reaction-character__odor {
  opacity: 1;
  filter: drop-shadow(0 0 5px rgb(120 150 35 / 80%));
}

.article-reaction-character__flies {
  z-index: 6;
  opacity: 0;
}

.article-reaction-character__flies i {
  position: absolute;
  width: 4%;
  aspect-ratio: 1;
  background: #071a2f;
  box-shadow: 4px -2px 0 #86a63e;
}

.article-reaction-character__flies i:nth-child(1) { top: 18%; left: 24%; }
.article-reaction-character__flies i:nth-child(2) { top: 9%; right: 24%; }
.article-reaction-character__flies i:nth-child(3) { top: 34%; right: 14%; }

.article-reaction-character[data-tier="rotten"] .article-reaction-character__flies {
  opacity: 1;
  animation: article-character-flies 1100ms steps(4, end) infinite;
}

.article-reaction-character.is-idle-nod .article-reaction-character__frame {
  animation: article-character-nod 900ms steps(3, end);
}

.article-reaction-character.is-idle-swing .article-reaction-character__frame {
  animation: article-character-swing 900ms steps(3, end);
}

.article-reaction-character.is-idle-stretch .article-reaction-character__frame {
  animation: article-character-stretch 1300ms steps(4, end);
}

.article-reaction-character.is-idle-look .article-reaction-character__frame {
  animation: article-character-look 1300ms steps(4, end);
}

.article-reaction-character.is-idle-page .article-reaction-character__frame {
  animation: article-character-page 1300ms steps(4, end);
}

.article-reaction-character.is-idle-bounce .article-reaction-character__frame {
  animation: article-character-bounce 1300ms steps(5, end);
}

.article-reaction-character.is-recovering {
  animation: article-character-recover 520ms steps(4, end);
}

.article-reaction-character.is-fleeing {
  animation: article-character-flee 650ms steps(6, end) forwards;
}

.article-reaction-character.is-returning {
  animation: article-character-return 700ms steps(6, end) both;
}

.article-reaction-character.is-mana-jumping {
  animation: article-character-mana-jump 1300ms cubic-bezier(0.22, 0.8, 0.35, 1) both;
}

.article-reaction-character.is-mana-jumping .article-reaction-character__glow {
  opacity: 1;
  background: rgb(90 200 250 / 84%);
  transform: scale(1.2);
}

.article-reaction {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-width: 5rem;
  min-height: 3rem;
  padding: 0.5rem 0.65rem;
  border: 3px solid #071a2f;
  border-radius: 0;
  color: #071a2f;
  font-size: 0.82rem;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 3px 3px 0 #071a2f;
  overflow: hidden;
}

.article-reaction__icon {
  width: 1.35rem;
  height: 1.35rem;
  object-fit: contain;
  font-size: 1.1rem;
  line-height: 1;
  image-rendering: pixelated;
}

.article-reaction strong {
  font: inherit;
}

.article-reaction__hint {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: grid;
  place-items: center;
  background: inherit;
  opacity: 0;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
  transform: translateY(4px);
  transition:
    opacity 110ms ease-out,
    transform 110ms ease-out;
}

.article-reaction:hover .article-reaction__hint,
.article-reaction:focus .article-reaction__hint {
  opacity: 1;
  transform: translateY(0);
}

.article-reaction:hover {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 #071a2f;
}

.article-reaction:active {
  transform: translate(4px, 4px);
  box-shadow: none;
}

.article-reaction--egg {
  background: var(--article-yolk);
}

.article-reaction--mana {
  background: var(--article-mana);
}

.article-reaction-effects {
  position: fixed;
  z-index: 70;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.article-reaction-particle {
  position: fixed;
  left: 0;
  top: 0;
  transform: translate3d(var(--start-x), var(--start-y), 0);
  will-change: transform, opacity;
}

.article-reaction-particle--egg {
  width: 25px;
  height: 32px;
  border: 2px solid rgb(160 146 114 / 72%);
  border-radius: 52% 52% 47% 47% / 60% 60% 42% 42%;
  background:
    radial-gradient(circle at 34% 26%, #fff 0 10%, transparent 11%),
    radial-gradient(ellipse at 50% 42%, #fffef4 0 48%, #e8e1cf 78%, #c8bfa9 100%);
  box-shadow:
    inset -3px -4px 5px rgb(119 100 66 / 18%),
    3px 5px 0 rgb(7 26 47 / 20%);
  animation: article-egg-throw 680ms cubic-bezier(0.2, 0.85, 0.4, 1) forwards;
}

.article-reaction-particle--mana {
  width: 38px;
  image-rendering: pixelated;
  filter: drop-shadow(0 0 12px rgb(90 200 250 / 90%));
  animation: article-mana-rise 1350ms var(--mana-delay, 0ms) ease-out forwards;
}

.article-egg-splat {
  --splat-size: clamp(180px, 30vmin, 280px);
  position: fixed;
  left: var(--impact-x);
  top: var(--impact-y);
  width: var(--splat-size);
  height: var(--splat-size);
  translate: -50% -50%;
  rotate: -4deg;
  filter: drop-shadow(0 2px 2px rgb(7 26 47 / 18%));
  animation: article-egg-splat-container 2600ms linear forwards;
}

.article-egg-splat[data-variant="side-swipe"] {
  rotate: 12deg;
}

.article-egg-splat[data-variant="side-swipe"] .article-egg-splat__crown {
  width: 96%;
  height: 49%;
}

.article-egg-splat[data-variant="side-swipe"] .article-egg-splat__white {
  top: 49%;
  left: 49%;
  width: 88%;
  height: 48%;
  border-radius: var(--white-radius, 61% 39% 57% 43% / 44% 63% 37% 56%);
}

.article-egg-splat[data-variant="side-swipe"] .article-egg-splat__white::before {
  top: -36%;
  left: 63%;
  width: 19%;
  height: 128%;
  rotate: calc(42deg + var(--white-arm-one-turn, 0deg));
}

.article-egg-splat[data-variant="side-swipe"] .article-egg-splat__white::after {
  top: 55%;
  left: 28%;
  width: 88%;
  height: 29%;
  rotate: calc(-12deg + var(--white-arm-two-turn, 0deg));
}

.article-egg-splat[data-variant="side-swipe"] .article-egg-splat__yolk {
  top: 51%;
  left: 58%;
  width: 39%;
  height: 31%;
  rotate: calc(9deg + var(--yolk-turn, 0deg));
}

.article-egg-splat[data-variant="side-swipe"] .article-egg-splat__drip--albumen {
  top: 55%;
  left: 65%;
  height: 28%;
  rotate: 24deg;
}

.article-egg-splat[data-variant="side-swipe"] .article-egg-splat__drip--yolk {
  top: 56%;
  left: 62%;
  height: 34%;
  box-shadow: -18px 10px 0 -5px rgb(237 153 0 / 88%);
  rotate: 22deg;
}

.article-egg-splat[data-variant="high-burst"] {
  rotate: -15deg;
}

.article-egg-splat[data-variant="high-burst"] .article-egg-splat__crown {
  width: 72%;
  height: 86%;
}

.article-egg-splat[data-variant="high-burst"] .article-egg-splat__white {
  top: 49%;
  left: 48%;
  width: 72%;
  height: 70%;
  border-radius: var(--white-radius, 47% 53% 63% 37% / 68% 41% 59% 32%);
}

.article-egg-splat[data-variant="high-burst"] .article-egg-splat__white::before {
  top: -38%;
  left: 12%;
  width: 20%;
  height: 118%;
  rotate: calc(-42deg + var(--white-arm-one-turn, 0deg));
}

.article-egg-splat[data-variant="high-burst"] .article-egg-splat__white::after {
  top: 62%;
  left: 44%;
  width: 78%;
  height: 25%;
  rotate: calc(31deg + var(--white-arm-two-turn, 0deg));
}

.article-egg-splat[data-variant="high-burst"] .article-egg-splat__yolk {
  top: 56%;
  left: 42%;
  width: 37%;
  height: 34%;
  rotate: calc(-9deg + var(--yolk-turn, 0deg));
}

.article-egg-splat[data-variant="high-burst"] .article-egg-splat__drip--albumen {
  top: 56%;
  left: 36%;
  height: 44%;
  rotate: -12deg;
}

.article-egg-splat[data-variant="high-burst"] .article-egg-splat__drip--yolk {
  top: 60%;
  left: 39%;
  height: 38%;
  box-shadow: 14px 15px 0 -5px rgb(237 153 0 / 88%);
  rotate: -15deg;
}

.article-egg-splat[data-variant="split-drip"] {
  rotate: 5deg;
}

.article-egg-splat[data-variant="split-drip"] .article-egg-splat__crown {
  width: 94%;
  height: 52%;
}

.article-egg-splat[data-variant="split-drip"] .article-egg-splat__white {
  top: 51%;
  left: 50%;
  width: 91%;
  height: 43%;
  border-radius: var(--white-radius, 52% 48% 69% 31% / 37% 58% 42% 63%);
}

.article-egg-splat[data-variant="split-drip"] .article-egg-splat__white::before {
  top: -88%;
  left: 55%;
  width: 13%;
  height: 176%;
  rotate: calc(8deg + var(--white-arm-one-turn, 0deg));
}

.article-egg-splat[data-variant="split-drip"] .article-egg-splat__white::after {
  top: 49%;
  left: -4%;
  width: 58%;
  height: 34%;
  rotate: calc(19deg + var(--white-arm-two-turn, 0deg));
}

.article-egg-splat[data-variant="split-drip"] .article-egg-splat__yolk {
  top: 49%;
  left: 42%;
  width: 31%;
  height: 25%;
  rotate: calc(-5deg + var(--yolk-turn, 0deg));
}

.article-egg-splat[data-variant="split-drip"] .article-egg-splat__drip--albumen {
  top: 53%;
  left: 35%;
  height: 30%;
  rotate: -10deg;
}

.article-egg-splat[data-variant="split-drip"] .article-egg-splat__drip--yolk {
  top: 54%;
  left: 55%;
  height: 48%;
  box-shadow: -14px 7px 0 -5px rgb(237 153 0 / 88%);
  rotate: 7deg;
}

.article-egg-splat__crown,
.article-egg-splat__white,
.article-egg-splat__yolk,
.article-egg-splat__droplet,
.article-egg-splat__shell,
.article-egg-splat__drip {
  position: absolute;
  display: block;
}

.article-egg-splat__crown {
  z-index: 3;
  top: 50%;
  left: 50%;
  width: 88%;
  height: 64%;
  border: clamp(2px, 0.42vmin, 4px) solid rgb(255 255 245 / 64%);
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.08, 0.04);
  animation: article-egg-crown 720ms cubic-bezier(0.12, 0.78, 0.28, 1) forwards;
}

.article-egg-splat__white {
  z-index: 2;
  top: 50%;
  left: 50%;
  width: 82%;
  height: 56%;
  border: 1px solid rgb(205 198 171 / 48%);
  border-radius: var(--white-radius, 38% 62% 46% 54% / 57% 41% 59% 43%);
  opacity: 0;
  background:
    radial-gradient(ellipse at 36% 29%, rgb(255 255 255 / 68%) 0 9%, transparent 29%),
    radial-gradient(ellipse at 48% 52%, rgb(255 255 247 / 82%) 0 28%, rgb(245 242 218 / 62%) 57%, rgb(226 221 191 / 31%) 82%, transparent 100%);
  box-shadow:
    inset 2px 2px 5px rgb(255 255 255 / 34%),
    inset -3px -2px 5px rgb(159 143 103 / 9%);
  scale: var(--white-scale-x, 1) var(--white-scale-y, 1);
  rotate: var(--white-turn, 0deg);
  transform: translate(-50%, -50%) scale(0.08);
  animation: article-egg-white-spread 1850ms cubic-bezier(0.16, 0.78, 0.3, 1) forwards;
}

.article-egg-splat__white::before,
.article-egg-splat__white::after {
  position: absolute;
  z-index: -1;
  border: 1px solid rgb(205 198 171 / 32%);
  background: rgb(255 255 246 / 56%);
  content: "";
}

.article-egg-splat__white::before {
  top: -72%;
  left: 22%;
  width: 17%;
  height: 164%;
  border-radius: 56% 44% 66% 34% / 24% 34% 66% 76%;
  translate: var(--white-arm-one-x, 0) var(--white-arm-one-y, 0);
  scale: var(--white-arm-one-scale-x, 1) var(--white-arm-one-scale-y, 1);
  rotate: calc(-22deg + var(--white-arm-one-turn, 0deg));
}

.article-egg-splat__white::after {
  top: 51%;
  left: -11%;
  width: 71%;
  height: 31%;
  border-radius: 58% 42% 64% 36% / 46% 60% 40% 54%;
  translate: var(--white-arm-two-x, 0) var(--white-arm-two-y, 0);
  scale: var(--white-arm-two-scale-x, 1) var(--white-arm-two-scale-y, 1);
  rotate: calc(13deg + var(--white-arm-two-turn, 0deg));
}

.article-egg-splat__yolk {
  z-index: 4;
  top: 53%;
  left: 47%;
  width: 44%;
  height: 29%;
  border: 1px solid rgb(167 98 0 / 44%);
  border-radius: var(--yolk-radius, 44% 56% 39% 61% / 57% 38% 62% 43%);
  opacity: 1;
  background:
    radial-gradient(ellipse at var(--yolk-gloss-x, 30%) var(--yolk-gloss-y, 23%), rgb(255 255 218 / 82%) 0 4%, rgb(255 230 118 / 34%) 5% 7%, transparent 11%),
    linear-gradient(112deg, #ffd52f 0 27%, #f2a100 64%, #d87800 100%);
  box-shadow: inset -2px -2px 4px rgb(128 60 0 / 12%);
  scale: var(--yolk-scale-x, 1) var(--yolk-scale-y, 1);
  rotate: var(--yolk-turn, 0deg);
  transform: translate(-50%, -50%) scale(0.18);
  transform-origin: center bottom;
  animation: article-egg-yolk-squash 1950ms cubic-bezier(0.18, 0.76, 0.28, 1) forwards;
}

.article-egg-splat__yolk::before,
.article-egg-splat__yolk::after {
  position: absolute;
  z-index: -1;
  background: rgb(229 137 0 / 88%);
  content: "";
}

.article-egg-splat__yolk::before {
  top: var(--yolk-left-y, 43%);
  left: var(--yolk-left-x, -8%);
  width: 32%;
  height: 34%;
  border-radius: 68% 32% 57% 43% / 48% 62% 38% 52%;
  scale: var(--yolk-left-scale-x, 1) var(--yolk-left-scale-y, 1);
  rotate: calc(-18deg + var(--yolk-left-turn, 0deg));
}

.article-egg-splat__yolk::after {
  top: var(--yolk-right-y, 19%);
  right: var(--yolk-right-x, -6%);
  width: 27%;
  height: 31%;
  border-radius: 42% 58% 65% 35% / 61% 44% 56% 39%;
  scale: var(--yolk-right-scale-x, 1) var(--yolk-right-scale-y, 1);
  rotate: calc(12deg + var(--yolk-right-turn, 0deg));
}

.article-egg-splat__drip {
  opacity: 0;
  transform: translate(-50%, 0) scaleY(0.08);
  transform-origin: center top;
  animation: article-egg-drip 1950ms cubic-bezier(0.16, 0.74, 0.25, 1) forwards;
}

.article-egg-splat__drip::after {
  position: absolute;
  right: -18%;
  bottom: -8%;
  width: 136%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: inherit;
  content: "";
}

.article-egg-splat__drip--albumen {
  z-index: 3;
  top: 57%;
  left: 55%;
  width: 7%;
  height: 36%;
  border: 1px solid rgb(205 198 171 / 32%);
  border-radius: 42% 58% 72% 28% / 16% 26% 74% 84%;
  background: rgb(248 246 226 / 64%);
  rotate: 5deg;
}

.article-egg-splat__drip--yolk {
  z-index: 5;
  top: 58%;
  left: 45%;
  width: 10%;
  height: 43%;
  border: 1px solid rgb(167 98 0 / 42%);
  border-radius: 47% 53% 68% 32% / 13% 22% 78% 87%;
  background: #e58a00;
  box-shadow: 18px 9px 0 -5px rgb(237 153 0 / 88%);
  rotate: -4deg;
}

.article-egg-splat__droplet {
  z-index: 3;
  top: 48%;
  left: 50%;
  width: var(--drop-size);
  aspect-ratio: 0.78;
  border: 1px solid rgb(194 186 158 / 56%);
  border-radius: 64% 36% 58% 42% / 38% 44% 56% 62%;
  opacity: 0;
  background: rgb(255 255 244 / 94%);
  box-shadow: inset -2px -2px 2px rgb(135 116 75 / 14%);
  transform: translate(-50%, -50%) scale(0.2);
  animation: article-egg-droplet 1900ms cubic-bezier(0.12, 0.72, 0.25, 1) forwards;
}

.article-egg-splat__droplet--yolk {
  z-index: 5;
  border-color: #ae6700;
  background: #ffae00;
  box-shadow: inset -2px -2px 2px rgb(130 62 0 / 22%);
}

.article-egg-splat__shell {
  z-index: 6;
  top: 48%;
  left: 50%;
  width: calc(21px * var(--shell-scale, 1));
  height: calc(17px * var(--shell-scale, 1));
  border: 2px solid rgb(145 130 96 / 72%);
  background:
    radial-gradient(circle at 30% 28%, #fff 0 13%, transparent 15%),
    linear-gradient(135deg, #fffceb 0 58%, #d8cfb8 100%);
  clip-path: polygon(0 18%, 30% 0, 47% 28%, 68% 4%, 100% 25%, 84% 100%, 12% 82%);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.2) rotate(0);
  animation: article-egg-shell 2150ms cubic-bezier(0.12, 0.7, 0.25, 1) forwards;
}

@keyframes article-character-nod {
  0%, 100% { transform: translateY(0) rotate(0); }
  45% { transform: translateY(3px) rotate(2deg); }
}

@keyframes article-character-breathe {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

@keyframes article-character-aura {
  0%, 100% { transform: scale(0.86, 0.94); }
  50% { transform: scale(1, 1.06); }
}

@keyframes article-character-aura-ascended {
  0%, 100% { transform: scale(0.96, 1); filter: blur(4px); }
  50% { transform: scale(1.1, 1.08); filter: blur(7px); }
}

@keyframes article-character-lightning {
  0%, 100% { visibility: visible; transform: translate(0); }
  45% { visibility: hidden; transform: translate(3px, -2px); }
}

@keyframes article-character-swing {
  0%, 100% { transform: rotate(0); }
  35% { transform: rotate(-2deg) translateY(2px); }
  70% { transform: rotate(2deg) translateY(-1px); }
}

@keyframes article-character-stretch {
  0%, 100% { transform: scaleY(1); }
  45% { transform: translateY(-5px) scaleY(1.035); }
}

@keyframes article-character-look {
  0%, 100% { transform: translateX(0) rotate(0); }
  32% { transform: translateX(-4px) rotate(-2deg); }
  66% { transform: translateX(3px) rotate(2deg); }
}

@keyframes article-character-page {
  0%, 100% { transform: rotate(0) translateY(0); }
  35% { transform: rotate(-3deg) translateY(-3px); }
  58% { transform: rotate(2deg) translateY(1px); }
}

@keyframes article-character-bounce {
  0%, 100% { transform: translateY(0) rotate(0); }
  28% { transform: translateY(-7px) rotate(-2deg); }
  52% { transform: translateY(2px) rotate(2deg); }
  72% { transform: translateY(-3px); }
}

@keyframes article-character-glow {
  0%, 100% { transform: scale(0.9); }
  50% { transform: scale(1.08); }
}

@keyframes article-character-odor {
  0% { transform: translateY(7px); }
  50% { transform: translate(4px, -2px); }
  100% { transform: translate(-2px, -10px); }
}

@keyframes article-character-flies {
  0%, 100% { transform: translate(0); }
  25% { transform: translate(7px, -4px); }
  50% { transform: translate(-3px, -8px); }
  75% { transform: translate(-8px, 3px); }
}

@keyframes article-character-recover {
  0% { transform: rotate(var(--teeter-angle, 10deg)); }
  45% { transform: rotate(-7deg) translateX(-4px); }
  72% { transform: rotate(4deg); }
  100% { transform: rotate(0); }
}

@keyframes article-character-flee {
  0% { transform: translateX(0); }
  18% { transform: translateX(-14px) rotate(-4deg); }
  100% { transform: translateX(72vw) rotate(4deg); }
}

@keyframes article-character-return {
  0% { transform: translateX(72vw); }
  82% { transform: translateX(-8px); }
  100% { transform: translateX(0); }
}

@keyframes article-character-mana-jump {
  0% { transform: translateY(0) rotate(0) scaleY(0.9); }
  18% { transform: translateY(-28px) rotate(20deg) scaleY(1); }
  52% { transform: translateY(var(--character-jump-apex)) rotate(385deg) scale(1.04); }
  78% { transform: translateY(-22px) rotate(370deg); }
  90% { transform: translateY(6px) rotate(360deg) scaleY(0.92); }
  100% { transform: translateY(0) rotate(360deg) scaleY(1); }
}

@keyframes article-egg-throw {
  0% {
    transform: translate3d(var(--start-x), var(--start-y), 0) rotate(0);
  }
  45% {
    transform: translate3d(var(--mid-x), var(--mid-y), 0) rotate(260deg);
  }
  100% {
    transform: translate3d(
        calc(var(--start-x) + var(--travel-x)),
        calc(var(--start-y) + var(--travel-y)),
        0
      )
      rotate(540deg);
  }
}

@keyframes article-mana-rise {
  0% {
    opacity: 0;
    transform: translate3d(var(--start-x), var(--start-y), 0) scale(0.35) rotate(-20deg);
  }
  15% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate3d(
        calc(var(--start-x) + var(--travel-x)),
        calc(var(--start-y) - 75vh),
        0
      )
      scale(1.65) rotate(24deg);
  }
}

@keyframes article-egg-splat-container {
  0%, 82% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes article-egg-crown {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.08, 0.04); }
  8% { opacity: 0.9; }
  58% { opacity: 0.48; transform: translate(-50%, -50%) scale(1.03, 0.68); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.22, 0.8); }
}

@keyframes article-egg-white-spread {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.08); }
  5% { opacity: 1; }
  13% { transform: translate(-50%, -50%) scale(1.12, 0.72) rotate(-3deg); }
  22% { transform: translate(-50%, -50%) scale(0.94, 1.04) rotate(1deg); }
  38%, 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@keyframes article-egg-yolk-squash {
  0% { opacity: 1; transform: translate(-50%, -50%) scale(0.18); }
  5% { transform: translate(-50%, -50%) scale(0.82, 1.08); }
  13% { transform: translate(-50%, -50%) scale(1.28, 0.66); }
  23% { transform: translate(-50%, -50%) scale(0.92, 1.06); }
  38%, 100% { opacity: 1; transform: translate(-50%, -50%) scale(1, 0.98); }
}

@keyframes article-egg-drip {
  0%, 7% { opacity: 0; transform: translate(-50%, 0) scaleY(0.08); }
  15% { opacity: 1; transform: translate(-50%, 0) scaleY(1.08); }
  24% { transform: translate(-50%, 0) scaleY(0.9); }
  38%, 100% { opacity: 1; transform: translate(-50%, 0) scaleY(1); }
}

@keyframes article-egg-droplet {
  0%, 4% { opacity: 0; transform: translate(-50%, -50%) scale(0.2); }
  12% { opacity: 1; }
  82% {
    opacity: 1;
    transform: translate(calc(-50% + var(--drop-x)), calc(-50% + var(--drop-y))) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--drop-x)), calc(-50% + var(--drop-y) + 14px)) scale(0.72);
  }
}

@keyframes article-egg-shell {
  0%, 4% { opacity: 0; transform: translate(-50%, -50%) scale(0.2) rotate(0); }
  12% { opacity: 1; }
  86% {
    opacity: 1;
    transform: translate(calc(-50% + var(--shell-x)), calc(-50% + var(--shell-y))) scale(1) rotate(var(--shell-rotation));
  }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--shell-x)), calc(-50% + var(--shell-y) + 18px)) scale(0.8) rotate(calc(var(--shell-rotation) + 90deg));
  }
}

@media (max-width: 700px) {
  .article-layout {
    padding-inline: 0.75rem;
  }

  .article-page {
    box-shadow: 6px 6px 0 color-mix(in srgb, var(--article-ink) 18%, transparent);
  }

  .article-body {
    padding-inline: 1rem;
  }

  .article-body h1 {
    max-width: none;
    font-size: clamp(2rem, 10vw, 2.35rem);
  }

  .article-masthead {
    display: grid;
  }

  .article-masthead p {
    text-align: left;
  }

  .article-reaction-dock {
    right: 0.75rem;
    bottom: 0.75rem;
    left: auto;
    grid-template-columns: repeat(2, 4.5rem);
    gap: 0.4rem;
    padding: 0.4rem;
  }

  .article-reaction-character {
    --character-size: 104px;
    --character-jump-apex: -92px;
  }

  .article-reaction-character[data-form="solar"],
  .article-reaction-character[data-form="godfire"],
  .article-reaction-character[data-form="cosmic"],
  .article-reaction-character[data-form="zenith"] {
    --character-jump-apex: -126px;
  }

  .article-reaction-character-perch {
    left: 50%;
  }

  .article-reaction {
    min-width: 4.5rem;
    min-height: 2.75rem;
    padding-inline: 0.45rem;
    font-size: 0.72rem;
  }
}

@media (max-width: 390px) {
  .article-reaction-character {
    --character-size: 92px;
  }

  .article-reaction-character-perch {
    bottom: calc(100% - 5px);
    left: 50%;
  }

  .article-reaction {
    min-height: 2.6rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .article-reaction-character,
  .article-reaction-character *,
  .article-reaction-particle,
  .article-egg-splat {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
  }

  .article-egg-splat {
    opacity: 1;
    animation: none !important;
  }

  .article-egg-splat__white {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    animation: none !important;
  }

  .article-egg-splat__yolk {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1, 0.98);
    animation: none !important;
  }

  .article-egg-splat__crown,
  .article-egg-splat__droplet {
    display: none;
  }

  .article-egg-splat__shell {
    opacity: 1;
    transform: translate(calc(-50% + var(--shell-x)), calc(-50% + var(--shell-y))) rotate(var(--shell-rotation));
    animation: none !important;
  }

  .article-egg-splat__drip {
    opacity: 1;
    transform: translate(-50%, 0) scaleY(1);
    animation: none !important;
  }
}