/* CUCaTS Codevent Calendar — hand-written port of the old Tailwind look:
   navy background, orange accents, Ubuntu Mono everywhere. */

@font-face {
  font-family: "Ubuntu Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/UbuntuMono-Regular-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Ubuntu Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/UbuntuMono-Bold-latin.woff2") format("woff2");
}

:root {
  --bg: #0d151f;
  --fg: #dd5f32;
  --hl: #ff9f60;
  --zinc-200: #e4e4e7;
  --zinc-300: #d4d4d8;
  --zinc-400: #a1a1aa;
  --zinc-500: #71717a;
  --zinc-800: #27272a;
  --zinc-900: #18181b;
  --red: #ef4444;
  --green: #4ade80;
  --gold: #ffd27a;
  --snow: #eef4ff;
  color-scheme: dark;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background: var(--bg);
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--zinc-300);
  font-family: "Ubuntu Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1rem;
  line-height: 1.5;
}

a {
  color: var(--fg);
  text-decoration: none;
}
a:hover,
a:focus-visible {
  color: var(--hl);
}

button {
  font: inherit;
  background: none;
  border: 0;
  padding: 0;
  color: var(--fg);
  cursor: pointer;
}
button:hover,
button:focus-visible {
  color: var(--hl);
}
button:disabled,
button:disabled:hover {
  color: #166534;
  cursor: not-allowed;
}

input[type="text"] {
  font: inherit;
  width: 12rem;
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--zinc-300);
  background: #000;
  color: var(--hl);
}

.muted {
  color: var(--zinc-400);
}

/* ---------- header ---------- */

.site-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem;
  font-size: 1.125rem;
}
.site-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
.site-nav a {
  white-space: nowrap;
}
.site-title {
  position: relative;
  font-weight: 700;
  margin-right: 2rem;
}
/* a Santa hat slipping off the first C */
.santa-hat {
  position: absolute;
  top: -0.72rem;
  left: -0.42rem;
  width: 1.55rem;
  height: auto;
  transform: rotate(-20deg);
  /* pivot on the brim, where it sits on the C */
  transform-origin: 40% 80%;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.5));
  pointer-events: none;
  /* every few seconds it sways, then settles */
  animation: hat-sway 7s ease-in-out 1.5s infinite;
}
.hat-body {
  fill: #c62d3f;
}
.hat-pom,
.hat-brim {
  fill: var(--snow);
}
.hat-pom {
  transform-box: fill-box;
  transform-origin: center;
  animation: pom-bob 7s ease-in-out 1.5s infinite;
}
/* hovering the title gives it a proper wiggle */
.site-title:hover .santa-hat,
.site-title:focus-visible .santa-hat {
  animation: hat-wiggle 0.9s ease-in-out infinite;
}
.site-title:hover .hat-pom,
.site-title:focus-visible .hat-pom {
  animation: pom-swing 0.9s ease-in-out infinite;
}
@keyframes hat-sway {
  0%,
  16%,
  100% {
    transform: rotate(-20deg);
  }
  4% {
    transform: rotate(-27deg);
  }
  9% {
    transform: rotate(-15deg);
  }
  13% {
    transform: rotate(-22deg);
  }
}
@keyframes pom-bob {
  0%,
  18%,
  100% {
    transform: translate(0, 0);
  }
  5% {
    transform: translate(-1px, 2px);
  }
  10% {
    transform: translate(0.8px, -1.4px);
  }
  14% {
    transform: translate(-0.3px, 0.6px);
  }
}
@keyframes hat-wiggle {
  0%,
  100% {
    transform: rotate(-20deg);
  }
  20% {
    transform: rotate(-33deg) translateY(-1px);
  }
  45% {
    transform: rotate(-7deg);
  }
  70% {
    transform: rotate(-28deg);
  }
  85% {
    transform: rotate(-15deg);
  }
}
@keyframes pom-swing {
  0%,
  100% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(-2px, 2.5px);
  }
  55% {
    transform: translate(1.5px, -2px);
  }
  80% {
    transform: translate(-0.8px, 1px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .santa-hat,
  .hat-pom,
  .site-title:hover .santa-hat,
  .site-title:hover .hat-pom,
  .site-title:focus-visible .santa-hat,
  .site-title:focus-visible .hat-pom {
    animation: none;
  }
}
.site-nav a[aria-current="page"] {
  color: var(--hl);
}
.signout {
  margin: 0;
}
.signout button {
  font-size: 1.125rem;
}

/* ---------- layout ---------- */

.page {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 48rem;
  margin: 0 auto;
  padding: 0 1rem 8rem;
}
.page-wide {
  max-width: 52rem;
}
.standalone,
.onboarding {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 6rem 1rem 2rem;
  text-align: center;
}
.onboarding {
  padding-top: 4rem;
}
.onboarding h1 {
  color: var(--fg);
  font-size: 1.125rem;
  margin: 0;
}

.notice {
  width: 100%;
  max-width: 40rem;
  margin: 1rem 0 0;
  padding: 0.5rem 0.75rem;
  border: 1px dashed #3b4a5c;
  color: var(--zinc-400);
}

.year-tabs {
  display: flex;
  gap: 0.75rem;
  margin-top: 1rem;
  font-size: 1.125rem;
}
.year-tabs a[aria-current="page"] {
  color: var(--hl);
  font-weight: 700;
}

/* ---------- problem list ---------- */

.days {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: 1.125rem;
}
/* the intro has a list of its own (above the countdown); with no countdown
   between them, the two read as one */
.days + .days {
  margin-top: 0.5rem;
}
.day {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.day-link {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex: 1;
  min-width: 0;
  color: var(--zinc-200);
}
a.day-link:hover .day-title,
a.day-link:focus-visible .day-title {
  color: var(--hl);
}
.day-locked .day-link {
  color: var(--zinc-500);
  cursor: not-allowed;
}
/* as wide as a date, so INTRO and OUTRO can be centred under the dates */
.day-date {
  flex: none;
  width: 10ch;
}
.day-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--zinc-300);
}
.day-status,
.day-timer {
  white-space: nowrap;
  color: var(--zinc-400);
}
.day-timer {
  font-variant-numeric: tabular-nums;
}
.status-star {
  color: var(--gold);
}
/* the intro and outro */
.day-story .day-title {
  color: var(--gold);
}
.day-story .day-date {
  text-align: center;
}
.status-practice {
  color: #9ec5ff;
}
.status-muted {
  color: var(--zinc-500);
}
@media (max-width: 40rem) {
  .day-title {
    display: none;
  }
  .day,
  .day-link {
    gap: 0.75rem;
  }
  /* without titles, the status takes the free space and wraps before the timer */
  .day-status {
    flex: 1;
    min-width: 0;
    white-space: normal;
    text-align: right;
  }
}
/* on a phone the door already says which day it is */
@media (max-width: 30rem) {
  .day-date {
    display: none;
  }
}

/* ---------- advent doors: each day's number is painted on a little door ---------- */

/* the frame, and the dark hollow behind the door */
.day-door {
  position: relative;
  flex: none;
  display: grid;
  width: 2.6rem;
  height: 1.9rem;
  border-radius: 0.25rem;
  background: radial-gradient(circle at 50% 50%, rgba(255, 196, 92, 0.16), transparent 70%), #060a10;
  box-shadow:
    inset 0 2px 5px rgba(0, 0, 0, 0.9),
    0 0 0 1px rgba(255, 210, 122, 0.18);
}
/* what's inside: a star, faint until you've earned it (on the latch side,
   clear of the open door) */
.day-door::before {
  content: "★" / "";
  grid-area: 1 / 1;
  place-self: center end;
  margin-right: 0.2rem;
  color: rgba(255, 210, 122, 0.22);
  font-size: 1.15rem;
  line-height: 1;
}
.door-star::before {
  color: var(--gold);
  text-shadow:
    0 0 6px rgba(255, 196, 92, 0.9),
    0 0 14px rgba(255, 140, 40, 0.6);
}
.door-practice::before {
  content: "☆" / "";
  color: #b9d6ff;
  font-weight: 700;
  text-shadow: 0 0 8px rgba(158, 197, 255, 0.9);
}
/* the door itself, hinged on the left; cranberry and pine take turns */
.day-num {
  position: relative;
  grid-area: 1 / 1;
  display: grid;
  place-items: center;
  border-radius: inherit;
  background: linear-gradient(180deg, #c0303f, #8c1c2e);
  box-shadow:
    inset 0 0 0 1px rgba(255, 210, 122, 0.5),
    inset 0 0 0 3px rgba(0, 0, 0, 0.12);
  color: #ffe9b8;
  font-weight: 700;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
  transform: perspective(7rem) rotateY(0);
  transform-origin: left center;
  transition: transform 0.4s cubic-bezier(0.3, 1.5, 0.6, 1);
}
:where(.day:nth-child(even)) .day-num {
  background: linear-gradient(180deg, #2a7a4f, #17543a);
}
/* the intro and outro are wrapped in gold foil */
.day-story .day-num {
  background: linear-gradient(135deg, #ffe3a0, #d9a441 55%, #f6d27a);
  color: #6b1626;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}
/* the knob */
.day-num::after {
  content: "";
  position: absolute;
  top: calc(50% - 0.11rem);
  right: 0.2rem;
  width: 0.22rem;
  height: 0.22rem;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
}
/* a released door peeks open when you point at it... */
a.day-link:hover .day-num,
a.day-link:focus-visible .day-num {
  transform: perspective(7rem) rotateY(-32deg);
}
/* ...and a solved one stands open, swinging wide as the page loads */
.door-star .day-num,
.door-practice .day-num,
a.day-link:hover :is(.door-star, .door-practice) .day-num {
  transform: perspective(7rem) rotateY(-66deg);
  filter: brightness(0.82);
}
.door-star .day-num,
.door-practice .day-num {
  animation: door-open 0.7s cubic-bezier(0.3, 1.4, 0.6, 1) backwards;
  animation-delay: calc(0.15s + var(--door-i) * 0.05s);
}
/* doors open one after another where sibling-index() exists, all at once elsewhere */
@property --door-i {
  syntax: "<integer>";
  inherits: true;
  initial-value: 0;
}
.day {
  --door-i: sibling-index();
}
@keyframes door-open {
  from {
    transform: perspective(7rem) rotateY(0);
    filter: none;
  }
}
/* locked days are still snowed in */
.day-locked .day-num {
  background: linear-gradient(180deg, #2b3542, #1d2530);
  box-shadow: inset 0 0 0 1px rgba(238, 244, 255, 0.12);
  color: var(--zinc-500);
  text-shadow: none;
}
.day-locked .day-num::after {
  background: #3d4756;
}
.day-locked .day-door::after {
  content: "";
  position: absolute;
  top: -0.32rem;
  left: -0.14rem;
  right: -0.14rem;
  height: 0.5rem;
  border-radius: 0.3rem 0.3rem 0.12rem 0.12rem;
  background:
    radial-gradient(circle at 50% 100%, var(--snow) 0 58%, transparent 61%) 0 100% / 0.62rem 0.5rem repeat-x,
    radial-gradient(circle at 50% 100%, #dce7f6 0 58%, transparent 61%) 0.3rem 100% / 0.9rem 0.4rem repeat-x;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.5));
}

/* ---------- festive title: fairy lights + snow cap ---------- */

.festive {
  width: 100%;
  margin-top: 1.5rem;
  text-align: center;
}

.lights {
  --spacing: 2.6rem;
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: var(--spacing);
  justify-content: center;
  height: 2.6rem;
  margin: 0 auto 1.4rem;
  max-width: 100%;
  overflow: hidden;
}
/* the sagging wire: one arc per bulb */
.lights::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1.4rem;
  background: radial-gradient(
      ellipse 50% 100% at 50% 0,
      transparent 0 calc(100% - 2px),
      #2f4a3a calc(100% - 2px) 100%,
      transparent 100%
    )
    calc(50% + var(--spacing) / 2) 0 / var(--spacing) 1.4rem repeat-x;
}
.lights span {
  --bulb: #ff4d4d;
  position: relative;
  justify-self: center;
  width: 0.7rem;
  height: 1.05rem;
  margin-top: 1.2rem;
  border-radius: 50% 50% 45% 45% / 60% 60% 40% 40%;
  background: var(--bulb);
  box-shadow: 0 0.15rem 0.9rem 0.1rem var(--bulb);
  animation: twinkle 2.4s ease-in-out infinite;
}
/* socket */
.lights span::before {
  content: "";
  position: absolute;
  top: -0.3rem;
  left: 50%;
  width: 0.5rem;
  height: 0.35rem;
  transform: translateX(-50%);
  border-radius: 0.1rem;
  background: #31423a;
}
.lights span:nth-child(3n + 2) {
  --bulb: #3ddc84;
  animation-duration: 3.1s;
}
.lights span:nth-child(3n) {
  --bulb: #ffcc4d;
  animation-duration: 2.7s;
}
.lights span:nth-child(2n) {
  animation-delay: -1.1s;
}
.lights span:nth-child(5n + 1) {
  animation-delay: -0.4s;
}
.lights span:nth-child(7n + 3) {
  animation-delay: -1.9s;
}
@keyframes twinkle {
  0%,
  100% {
    opacity: 1;
    box-shadow: 0 0.15rem 1rem 0.15rem var(--bulb);
  }
  50% {
    opacity: 0.35;
    box-shadow: 0 0.15rem 0.3rem 0 var(--bulb);
  }
}

/* labels hang on a cranberry ribbon with gold stitching: the day of a
   problem, the countdown's heading, the leaderboard's year... */
.festive-day,
.countdown-heading,
.board-title {
  display: inline-block;
  padding: 0.5rem 2.6rem 0.55rem;
  color: #ffe9b8;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.03em;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
  background:
    repeating-linear-gradient(90deg, rgba(255, 210, 122, 0.7) 0 6px, transparent 6px 11px)
      0 4px / 100% 1px no-repeat,
    repeating-linear-gradient(90deg, rgba(255, 210, 122, 0.7) 0 6px, transparent 6px 11px)
      0 calc(100% - 4px) / 100% 1px no-repeat,
    linear-gradient(180deg, #c0303f, #8c1c2e);
  clip-path: polygon(0 0, 100% 0, calc(100% - 1rem) 50%, 100% 100%, 0 100%, 1rem 50%);
}

/* ...while titles and countdown digits sit on a faint gold-edged plaque... */
.festive-name,
.countdown-plaque {
  position: relative;
  border: 1px solid rgba(255, 210, 122, 0.3);
  border-radius: 0.6rem;
  background: linear-gradient(180deg, rgba(255, 210, 122, 0.07), rgba(255, 210, 122, 0.02));
  color: var(--gold);
  text-shadow:
    0 0 6px rgba(255, 196, 92, 0.65),
    0 0 18px rgba(255, 140, 40, 0.4);
}
/* the problem's title: its day on the ribbon, its name on the plaque below */
.festive-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  margin: 0;
  font-size: clamp(1.4rem, 4vw, 2rem);
  line-height: 1.25;
}
.festive-name {
  display: inline-block;
  max-width: 100%;
  padding: 0.6rem 1.4rem 0.5rem;
}
/* ...with a lumpy drift of snow resting on its top edge */
.festive-name::before,
.countdown-plaque::before {
  content: "";
  position: absolute;
  left: -0.3rem;
  right: -0.3rem;
  top: -0.7rem;
  height: 1.05rem;
  background:
    radial-gradient(circle at 50% 100%, var(--snow) 0 58%, transparent 61%) 0 100% / 1.3rem 1.05rem repeat-x,
    radial-gradient(circle at 50% 100%, #dce7f6 0 58%, transparent 61%) 0.6rem 100% / 2rem 0.85rem repeat-x,
    linear-gradient(var(--snow), var(--snow)) 0 100% / 100% 0.4rem no-repeat;
  border-radius: 0.7rem 0.7rem 0.35rem 0.35rem;
  filter: drop-shadow(0 2px 1px rgba(0, 0, 0, 0.45));
  pointer-events: none;
}
.festive-sep {
  display: none;
}
.festive-name em {
  font-style: italic;
}
.festive-author {
  margin: 0.6rem 0 0;
  color: var(--zinc-400);
  font-size: 1rem;
  letter-spacing: 0.02em;
}
.festive-author span[aria-hidden] {
  color: #b9d3ff;
}
.festive-author-name {
  color: var(--zinc-200);
}

/* ---------- pre-season countdown: a winter night scene ---------- */

/* a framed night sky, like the front of a card */
.countdown-card {
  position: relative;
  isolation: isolate;
  width: 100%;
  margin-top: 1.25rem;
  padding: 0 1rem 7rem;
  overflow: hidden;
  border: 1px solid rgba(255, 210, 122, 0.3);
  border-radius: 1rem;
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(255, 196, 92, 0.09), transparent 70%),
    linear-gradient(180deg, #14243b 0%, #101c2d 55%, #0d151f 100%);
  box-shadow:
    inset 0 0 0 5px var(--bg),
    inset 0 0 0 6px rgba(255, 210, 122, 0.16),
    0 0 3rem rgba(255, 170, 70, 0.08);
  text-align: center;
}
/* the garland spans the whole card; the card clips it, so the bulbs' glow
   isn't cut off by the string's own box */
.countdown-card .lights {
  max-width: none;
  margin-inline: -1rem;
  overflow: visible;
}

.countdown-heading {
  margin: 0.25rem 0 0;
}

.countdown-plaques {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 7.5rem));
  justify-content: center;
  gap: 2rem 1.25rem;
  margin: 2.25rem 0 0;
}
.countdown-plaque {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 1rem 0.5rem 0.6rem;
  background:
    linear-gradient(180deg, rgba(255, 210, 122, 0.1), rgba(255, 210, 122, 0.03)),
    rgba(13, 21, 31, 0.55);
}
.countdown-value {
  font-size: clamp(2.25rem, 8vw, 3.25rem);
  font-weight: 700;
  line-height: 1;
}
/* a digit that just changed glows and settles */
.countdown-value.tick {
  animation: tick 0.6s ease-out;
}
@keyframes tick {
  from {
    transform: translateY(-0.12em);
    text-shadow:
      0 0 10px rgba(255, 214, 120, 0.95),
      0 0 28px rgba(255, 150, 50, 0.7);
  }
}
.countdown-unit {
  color: var(--zinc-400);
  text-shadow: none;
}
/* a sprig of holly on each snow cap */
.holly {
  position: absolute;
  top: -1.15rem;
  left: -0.7rem;
  width: 2.5rem;
  height: auto;
  transform: rotate(-14deg);
  filter: drop-shadow(0 2px 1px rgba(0, 0, 0, 0.45));
}
.holly-leaf {
  fill: #2f8a4c;
  stroke: #1b5530;
  stroke-width: 1;
}
.holly-berry {
  fill: #e3304a;
  stroke: #9e1426;
  stroke-width: 0.8;
}

.countdown-when {
  margin: 1.75rem 0 0;
  color: var(--zinc-200);
}
.countdown-snow,
.countdown-intro {
  margin: 0.5rem 0 0;
  color: var(--zinc-400);
}

/* sky: a field of faint stars, some twinkling, a moon and a shooting star */
.sky {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
}
.sky::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.55;
  background:
    radial-gradient(1px 1px at 10% 8%, #fff, transparent),
    radial-gradient(1px 1px at 24% 30%, #fff, transparent),
    radial-gradient(1px 1px at 37% 14%, #fff, transparent),
    radial-gradient(1px 1px at 46% 38%, #fff, transparent),
    radial-gradient(1px 1px at 58% 9%, #fff, transparent),
    radial-gradient(1px 1px at 63% 33%, #fff, transparent),
    radial-gradient(1px 1px at 74% 24%, #fff, transparent),
    radial-gradient(1px 1px at 83% 44%, #fff, transparent),
    radial-gradient(1px 1px at 91% 12%, #fff, transparent),
    radial-gradient(1px 1px at 7% 55%, #fff, transparent),
    radial-gradient(1px 1px at 20% 62%, #fff, transparent),
    radial-gradient(1px 1px at 96% 60%, #fff, transparent);
}
.sky span {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: #fff7d6;
  box-shadow: 0 0 6px 1px rgba(255, 240, 200, 0.8);
  animation: starlight 3.2s ease-in-out infinite;
}
.sky span:nth-of-type(3n) {
  width: 3px;
  height: 3px;
  animation-duration: 4.1s;
}
.sky span:nth-of-type(1) { top: 12%; left: 6%; animation-delay: -1s; }
.sky span:nth-of-type(2) { top: 22%; left: 18%; animation-delay: -2.2s; }
.sky span:nth-of-type(3) { top: 9%; left: 31%; animation-delay: -0.4s; }
.sky span:nth-of-type(4) { top: 28%; left: 4%; animation-delay: -2.9s; }
.sky span:nth-of-type(5) { top: 16%; left: 68%; animation-delay: -1.6s; }
.sky span:nth-of-type(6) { top: 7%; left: 76%; animation-delay: -3.4s; }
.sky span:nth-of-type(7) { top: 31%; left: 95%; animation-delay: -0.9s; }
.sky span:nth-of-type(8) { top: 41%; left: 3%; animation-delay: -2.5s; }
.sky span:nth-of-type(9) { top: 47%; left: 97%; animation-delay: -1.3s; }
.sky span:nth-of-type(10) { top: 22%; left: 86%; animation-delay: -3s; }
.sky span:nth-of-type(11) { top: 35%; left: 12%; animation-delay: -0.2s; }
.sky span:nth-of-type(12) { top: 53%; left: 92%; animation-delay: -1.9s; }
@keyframes starlight {
  0%,
  100% {
    opacity: 0.95;
    transform: scale(1);
  }
  50% {
    opacity: 0.2;
    transform: scale(0.6);
  }
}
/* a crescent: the shadow of a transparent disc */
.moon {
  position: absolute;
  top: 3.6rem;
  right: 7%;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  box-shadow: 0.6rem 0.35rem 0 0 #fbf1cf;
  filter: drop-shadow(0 0 0.55rem rgba(251, 241, 207, 0.5));
}
.shooting-star {
  position: absolute;
  top: 13%;
  left: 6%;
  width: 6rem;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 247, 214, 0), rgba(255, 247, 214, 0.95));
  opacity: 0;
  animation: shooting 12s ease-in 4s infinite;
}
@keyframes shooting {
  0% {
    opacity: 0;
    transform: rotate(14deg) translateX(0);
  }
  2% {
    opacity: 1;
  }
  9%,
  100% {
    opacity: 0;
    transform: rotate(14deg) translateX(20rem);
  }
}

/* snow drifting down behind everything in the card and into the hills.
   Every odd flake may be the name of a past puzzle writer. Positions come
   from nth-child, in groups of 18, because the CSP allows no inline styles. */
.snowfall {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.snowfall span {
  position: absolute;
  top: -2rem;
  color: var(--snow);
  font-size: 0.85rem;
  opacity: 0.5;
  white-space: nowrap;
  animation: snowfall 13s linear infinite;
}
.snowfall span:nth-child(3n) {
  font-size: 0.6rem;
  opacity: 0.35;
  animation-duration: 17s;
}
.snowfall span:nth-child(3n + 1) {
  font-size: 1.05rem;
  animation-duration: 11s;
}
/* odd slots (names) stay left of ~78% so a whole name fits */
.snowfall span:nth-child(18n + 1) { left: 6%; animation-delay: -2s; }
.snowfall span:nth-child(18n + 3) { left: 50%; animation-delay: -10s; }
.snowfall span:nth-child(18n + 5) { left: 28%; animation-delay: -6s; }
.snowfall span:nth-child(18n + 7) { left: 72%; animation-delay: -14s; }
.snowfall span:nth-child(18n + 9) { left: 16%; animation-delay: -4s; }
.snowfall span:nth-child(18n + 11) { left: 60%; animation-delay: -12s; }
.snowfall span:nth-child(18n + 13) { left: 38%; animation-delay: -8s; }
.snowfall span:nth-child(18n + 15) { left: 78%; animation-delay: -16s; }
.snowfall span:nth-child(18n + 17) { left: 2%; animation-delay: -0.5s; }
.snowfall span:nth-child(18n + 2) { left: 92%; animation-delay: -7s; }
.snowfall span:nth-child(18n + 4) { left: 12%; animation-delay: -1s; }
.snowfall span:nth-child(18n + 6) { left: 44%; animation-delay: -11s; }
.snowfall span:nth-child(18n + 8) { left: 86%; animation-delay: -3s; }
.snowfall span:nth-child(18n + 10) { left: 22%; animation-delay: -9s; }
.snowfall span:nth-child(18n + 12) { left: 66%; animation-delay: -5s; }
.snowfall span:nth-child(18n + 14) { left: 33%; animation-delay: -13s; }
.snowfall span:nth-child(18n + 16) { left: 97%; animation-delay: -2.5s; }
.snowfall span:nth-child(18n + 18) { left: 55%; animation-delay: -15s; }
.snowfall span.flake-name {
  font-size: 0.8rem;
  opacity: 0.7;
  letter-spacing: 0.02em;
  text-shadow: 0 0 0.4rem rgba(238, 244, 255, 0.6);
  animation-name: namefall;
  animation-duration: 18s;
}
.snowfall span.flake-name::before {
  content: "❄ ";
  color: #b9d3ff;
}
/* later groups: nudged and slowed so they don't shadow the first */
.snowfall span:nth-child(n + 19) {
  margin-left: 4%;
  animation-duration: 23s;
}
@keyframes snowfall {
  from {
    top: -2rem;
    transform: translateX(0) rotate(0deg);
  }
  50% {
    transform: translateX(1.5rem) rotate(150deg);
  }
  to {
    top: 100%;
    transform: translateX(-0.5rem) rotate(300deg);
  }
}
@keyframes namefall {
  from {
    top: -2rem;
    transform: translateX(0);
  }
  50% {
    transform: translateX(1rem);
  }
  to {
    top: 100%;
    transform: translateX(-0.5rem);
  }
}

/* the ground: snowy hills with pines planted between them, one decorated */
.scenery {
  position: absolute;
  inset: auto 0 0;
  height: 6.5rem;
  pointer-events: none;
}
.hills {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.hill-far {
  fill: #5d7290;
  opacity: 0.55;
}
.hill-near {
  fill: url(#countdown-snow);
}
.pine {
  position: absolute;
  width: 2rem;
  height: 3rem;
  background: linear-gradient(90deg, #0e281d, #1f4f37 55%, #12352a);
  clip-path: polygon(
    50% 0, 66% 26%, 58% 26%, 78% 52%, 66% 52%, 92% 84%, 56% 84%, 56% 100%,
    44% 100%, 44% 84%, 8% 84%, 34% 52%, 22% 52%, 42% 26%, 34% 26%
  );
}
.pine-a {
  left: 1.5%;
  bottom: 1.6rem;
  width: 3.2rem;
  height: 4.8rem;
  background:
    radial-gradient(circle at 50% 22%, #ffcc4d 0 2px, transparent 3px),
    radial-gradient(circle at 44% 40%, #ff4d4d 0 2.5px, transparent 3.5px),
    radial-gradient(circle at 60% 47%, #ffcc4d 0 2.5px, transparent 3.5px),
    radial-gradient(circle at 35% 66%, #3ddc84 0 2.5px, transparent 3.5px),
    radial-gradient(circle at 56% 70%, #ff4d4d 0 2.5px, transparent 3.5px),
    radial-gradient(circle at 74% 78%, #ffcc4d 0 2.5px, transparent 3.5px),
    radial-gradient(circle at 24% 80%, #ff4d4d 0 2.5px, transparent 3.5px),
    linear-gradient(90deg, #0e281d, #1f4f37 55%, #12352a);
}
.pine-b { left: 9%; bottom: 2.05rem; width: 2.1rem; height: 3.2rem; }
.pine-c { left: 14.5%; bottom: 2.25rem; width: 1.6rem; height: 2.4rem; }
.pine-d { left: 79%; bottom: 2.1rem; width: 1.7rem; height: 2.6rem; }
.pine-e { left: 85%; bottom: 2.1rem; width: 2.4rem; height: 3.6rem; }
.pine-f { left: 92%; bottom: 2rem; width: 1.9rem; height: 2.8rem; }
.tree-topper {
  position: absolute;
  left: calc(1.5% + 1.6rem);
  bottom: 5.95rem;
  transform: translateX(-50%);
  color: var(--gold);
  font-size: 1.05rem;
  line-height: 1;
  text-shadow:
    0 0 6px rgba(255, 210, 122, 0.95),
    0 0 16px rgba(255, 170, 60, 0.7);
  animation: twinkle-star 2.6s ease-in-out infinite;
}
@keyframes twinkle-star {
  50% {
    opacity: 0.6;
    text-shadow: 0 0 3px rgba(255, 210, 122, 0.6);
  }
}

@media (max-width: 30rem) {
  .countdown-plaques {
    grid-template-columns: repeat(2, minmax(0, 7.5rem));
  }
  .festive-day,
  .countdown-heading,
  .board-title {
    padding-inline: 2rem;
    font-size: 1.05rem;
  }
  .moon {
    top: 3rem;
    right: 5%;
    width: 1.8rem;
    height: 1.8rem;
  }
  .snowfall span.flake-name {
    font-size: 0.7rem;
  }
  .pine-c,
  .pine-d {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lights span,
  .sky span,
  .tree-topper,
  .countdown-value.tick,
  .day-door .day-num {
    animation: none;
    transition: none;
  }
  .shooting-star {
    display: none;
  }
  /* freeze the snow mid-fall (the negative delays scatter it) */
  .snowfall span {
    animation-play-state: paused;
  }
}

/* ---------- problem statement (Tailwind "prose" subset) ---------- */

.problem {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  margin-top: 1rem;
}
.prose {
  width: 100%;
  color: var(--zinc-300);
  line-height: 1.75;
}
.prose p {
  margin: 1.25em 0;
}
.prose strong {
  color: var(--fg);
  font-weight: 700;
}
.prose a {
  color: var(--hl);
  text-decoration: underline;
}
.prose code {
  color: var(--fg);
  font-weight: 600;
  font-size: 0.875em;
}
.prose code::before,
.prose code::after {
  content: "`";
}
.prose pre {
  margin: 1.7em 0;
  padding: 0.85em 1.15em;
  overflow-x: auto;
  border-radius: 0.375rem;
  background: #1f2937;
  color: #e5e7eb;
  font-size: 0.875em;
  line-height: 1.7;
}
.prose pre code {
  color: inherit;
  font-weight: 400;
  font-size: inherit;
}
.prose pre code::before,
.prose pre code::after {
  content: none;
}
.prose blockquote {
  margin: 1.6em 0;
  padding-left: 1em;
  border-left: 0.25rem solid #374151;
  color: var(--zinc-400);
  font-style: italic;
}
.prose hr {
  margin: 3em 0;
  border: 0;
  border-top: 1px solid #374151;
}
.prose ul,
.prose ol {
  margin: 1.25em 0;
  padding-left: 1.6em;
}
.prose li {
  margin: 0.5em 0;
}
.prose li::marker {
  color: #6b7280;
}
.prose h1,
.prose h2,
.prose h3,
.prose h4 {
  color: var(--fg);
  line-height: 1.33;
}
.prose h2 {
  margin: 2em 0 1em;
  font-size: 1.35em;
}
.prose h3 {
  margin: 1.6em 0 0.6em;
  font-size: 1.15em;
}
.prose img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 2em auto;
}
.prose math {
  font-size: 1.1em;
}

.downloads {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}
.button {
  display: inline-block;
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
  background: var(--zinc-800);
  color: var(--zinc-300);
}
.button:hover,
.button:focus-visible {
  background: var(--zinc-900);
  color: var(--zinc-300);
}

/* ---------- answer box ---------- */

.answer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  width: 100%;
  margin-top: 3rem;
  /* after submitting (…#answer): keep the end of the statement in view above */
  scroll-margin-top: 30vh;
}
.answer-done {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
  color: var(--fg);
}
/* the star you earned spins into place */
.answer-done::before {
  content: "★" / "";
  color: var(--gold);
  font-size: 3rem;
  line-height: 1;
  text-shadow:
    0 0 10px rgba(255, 196, 92, 0.9),
    0 0 28px rgba(255, 140, 40, 0.6);
  animation: star-earned 0.9s cubic-bezier(0.3, 1.5, 0.6, 1) 0.1s backwards;
}
.answer-practiced::before {
  content: "☆" / "";
  color: #9ec5ff;
  text-shadow: 0 0 12px rgba(158, 197, 255, 0.7);
}
@keyframes star-earned {
  from {
    opacity: 0;
    transform: scale(0.2) rotate(-150deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .answer-done::before {
    animation: none;
  }
}
.answer-login {
  margin: 0;
  font-size: 1rem;
  font-weight: 400;
}
.answer-form {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 1rem;
}
.answer-field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.answer-error,
.answer-ok {
  margin: 0;
  max-width: 24rem;
  font-size: 0.875rem;
}
.answer-error {
  color: var(--red);
}
.answer-ok {
  color: var(--green);
}
.back {
  margin: 0;
}

/* ---------- outro letter: the reader's year, on North Pole airmail paper ---------- */

/* the airmail edge: cranberry and pine stripes around snow-white paper */
.letter {
  --ink: #1f2d4d;
  --ink-faint: rgba(31, 45, 77, 0.55);
  --cranberry: #a3243a;
  --pine: #24704a;
  --paper: #f5f8fd;
  width: 100%;
  max-width: 40rem;
  margin: 2rem 0 1.5rem;
  padding: 0.55rem;
  border-radius: 0.3rem;
  background: repeating-linear-gradient(
    -45deg,
    var(--cranberry) 0 0.8rem,
    var(--paper) 0.8rem 1.2rem,
    var(--pine) 1.2rem 2rem,
    var(--paper) 2rem 2.4rem
  );
  box-shadow:
    0 1.25rem 2.5rem rgba(0, 0, 0, 0.5),
    0 0 3rem rgba(255, 196, 92, 0.07);
  transform: rotate(-0.6deg);
}
.letter-paper {
  position: relative;
  padding: 2rem 2.5rem 2.75rem;
  background:
    radial-gradient(ellipse 80% 60% at 15% 0%, #fff, transparent 70%),
    linear-gradient(180deg, #f7f9fd, #e8eef7);
  color: var(--ink);
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  font-size: 1.0625rem;
  line-height: 1.7;
}
.letter-paper p {
  margin: 0 0 1em;
}
.letter-paper a {
  color: var(--cranberry);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
.letter-paper a:hover,
.letter-paper a:focus-visible {
  color: var(--pine);
}
.letter-from {
  margin: 0 6rem 1.75rem 0;
  color: var(--ink-faint);
  font-size: 0.95rem;
  font-style: italic;
  font-weight: 400;
}
.letter-greeting,
.letter-signature {
  font-family: "Snell Roundhand", "Apple Chancery", "Segoe Script", "URW Chancery L", "Z003", cursive;
}
.letter-paper .letter-greeting {
  font-size: 1.65rem;
  line-height: 1.3;
}
.letter-paper .letter-sign-off {
  margin-top: 1.75rem;
  text-align: right;
}
.letter-signature {
  display: inline-block;
  margin-top: 0.25rem;
  font-size: 1.6rem;
  line-height: 1.3;
}
/* the P.S., squeezed in under the signature */
.letter-paper .letter-ps {
  margin: 1.5rem 0 0;
  padding-top: 1rem;
  border-top: 1px dashed rgba(31, 45, 77, 0.25);
  font-size: 0.95rem;
}

/* a postmark, stamped on at an angle */
.letter-paper .postmark {
  position: absolute;
  top: 1.1rem;
  right: 1.4rem;
  display: grid;
  place-content: center;
  width: 5.25rem;
  height: 5.25rem;
  margin: 0;
  border: 2px solid var(--ink-faint);
  border-radius: 50%;
  outline: 1px solid rgba(31, 45, 77, 0.3);
  outline-offset: 3px;
  color: var(--ink-faint);
  font-size: 0.75rem;
  font-variant: small-caps;
  letter-spacing: 0.06em;
  line-height: 1.35;
  text-align: center;
  transform: rotate(14deg);
}

/* the wax seal: pressed onto the open letter's edge, or holding the envelope shut */
.wax-seal {
  position: absolute;
  left: 2.25rem;
  bottom: -1.5rem;
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 48% 52% 46% 54% / 53% 47% 53% 47%;
  background: radial-gradient(circle at 35% 30%, #d4566a, #9a1d33 55%, #6e1222);
  box-shadow:
    inset 0 0 0 0.3rem rgba(0, 0, 0, 0.14),
    inset 0 0 0 0.42rem rgba(255, 255, 255, 0.08),
    0 0.2rem 0.45rem rgba(0, 0, 0, 0.4);
  color: rgba(255, 214, 196, 0.6);
  font-size: 1.4rem;
  line-height: 1;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.45);
}

/* signed out: the letter is still in its envelope */
.letter-sealed .letter-paper {
  min-height: 15rem;
  padding-top: 8.5rem;
  text-align: center;
}
.letter-sealed .letter-paper::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 7rem;
  background: linear-gradient(180deg, #e6ecf5, #d5deeb);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.letter-sealed .letter-from {
  margin: 0 0 1rem;
}
.letter-sealed .wax-seal {
  top: 5.375rem;
  bottom: auto;
  left: calc(50% - 1.625rem);
}

/* the letter unfolds once, as the page loads */
.letter:not(.letter-sealed) {
  transform-origin: 50% 0;
  animation: letter-unfold 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) 0.2s backwards;
}
@keyframes letter-unfold {
  from {
    opacity: 0;
    scale: 1 0.4;
  }
}
@media (prefers-reduced-motion: reduce) {
  .letter:not(.letter-sealed) {
    animation: none;
  }
}

@media (max-width: 40rem) {
  .letter {
    transform: none;
  }
  .letter-paper {
    padding: 1.5rem 1.25rem 2.5rem;
    font-size: 1rem;
  }
  .letter-paper .postmark {
    top: 0.75rem;
    right: 0.75rem;
    width: 4.25rem;
    height: 4.25rem;
    font-size: 0.65rem;
  }
  .letter-from {
    margin-right: 4.75rem;
  }
}

/* [Download certificate (PDF)], under the letter and on the leaderboard */
.certificate-offer {
  margin: 0 0 0.5rem;
  text-align: center;
}

/* ---------- /verify: a certificate as it was issued ---------- */

.verify {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  max-width: 40rem;
  margin: 0 auto;
}
.verify > p {
  margin: 0;
  text-align: center;
}
.verified {
  width: 100%;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--zinc-800);
  background: var(--zinc-900);
}
.verified p {
  margin: 0.75rem 0;
}
.verified-title {
  margin: 0;
  color: var(--green);
  font-size: 1.125rem;
}
.verified-title::before {
  content: "✓ " / "";
}
.verified-results {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.25rem 1rem;
  margin: 1rem 0;
}
.verified-results dt {
  color: var(--zinc-400);
}
.verified-results dd {
  margin: 0;
  color: var(--hl);
}
/* the stamps on certificate paper, so they look as printed */
.verified-stamps {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
  padding: 1rem;
  border-radius: 0.25rem;
  background: #fffdf6;
}
.stamp {
  width: 11rem;
  height: 11rem;
}

/* ---------- leaderboard ---------- */

.board-heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  margin: 1.5rem 0 0.5rem;
  font-size: 1rem;
}
.badge {
  padding: 0.05rem 0.5rem;
  border: 1px solid var(--gold);
  border-radius: 999px;
  color: var(--gold);
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: 0.04em;
}
.board {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  width: 100%;
  max-width: 35rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 1.125rem;
}
.board-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.25rem 1.2rem;
}
.board-rank {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex: none;
  width: 3.6rem;
  color: var(--zinc-400);
}
/* room for an ornament; the top three hang one there */
.board-rank::before {
  content: "";
  flex: none;
  width: 1rem;
  height: 1.1rem;
  line-height: 1.1rem;
  text-align: center;
}
.board-row:nth-child(1) .board-rank::before {
  content: "★" / "";
  color: var(--gold);
  font-size: 1.3rem;
  text-shadow:
    0 0 6px rgba(255, 210, 122, 0.95),
    0 0 14px rgba(255, 170, 60, 0.7);
}
/* baubles: a cap, a shine, a ball */
.board-row:nth-child(2) .board-rank::before,
.board-row:nth-child(3) .board-rank::before {
  --ball: #c3cad4, #8d97a6 70%, #4f5866 96%;
  background:
    linear-gradient(#e0bf6a, #8a6d1d) 50% 0 / 0.32rem 0.22rem no-repeat,
    radial-gradient(circle closest-side, rgba(255, 255, 255, 0.95), transparent) 22% 62% / 0.36rem 0.36rem no-repeat,
    radial-gradient(circle closest-side, var(--ball), transparent 100%) 50% 100% / 0.9rem 0.9rem no-repeat;
}
.board-row:nth-child(3) .board-rank::before {
  --ball: #f0b27a, #c2692c 70%, #6e3412 96%;
}
.board-name {
  font-weight: 700;
  overflow-wrap: anywhere;
}
.board-score {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-variant-numeric: tabular-nums;
}
/* a string of tiny lights runs from each name to its score; the podium's are lit */
.board-score::before {
  content: "";
  flex: 1;
  min-width: 1.5rem;
  height: 0.6rem;
  opacity: 0.4;
  background:
    radial-gradient(circle, #ff4d4d 0 2px, transparent 2.5px) 0 50% / 2.25rem 100% repeat-x,
    radial-gradient(circle, #3ddc84 0 2px, transparent 2.5px) 0.75rem 50% / 2.25rem 100% repeat-x,
    radial-gradient(circle, #ffcc4d 0 2px, transparent 2.5px) 1.5rem 50% / 2.25rem 100% repeat-x,
    linear-gradient(#2f4a3a, #2f4a3a) 0 50% / 100% 1px no-repeat;
}
.board-row:nth-child(-n + 3) .board-score::before,
.board-me .board-score::before {
  opacity: 1;
  background:
    radial-gradient(circle, #ff6b6b 0 2px, rgba(255, 77, 77, 0.45) 3px, transparent 6px) 0 50% / 2.25rem 100% repeat-x,
    radial-gradient(circle, #5ef0a0 0 2px, rgba(61, 220, 132, 0.45) 3px, transparent 6px) 0.75rem 50% / 2.25rem 100% repeat-x,
    radial-gradient(circle, #ffd970 0 2px, rgba(255, 204, 77, 0.45) 3px, transparent 6px) 1.5rem 50% / 2.25rem 100% repeat-x,
    linear-gradient(#2f4a3a, #2f4a3a) 0 50% / 100% 1px no-repeat;
}
.board-stars {
  width: 4.5rem;
  text-align: right;
  color: var(--zinc-400);
  letter-spacing: 0.025em;
  white-space: nowrap;
}
/* your own row is tied up in ribbon */
.board-me {
  background:
    repeating-linear-gradient(90deg, rgba(255, 210, 122, 0.7) 0 6px, transparent 6px 11px)
      0 3px / 100% 1px no-repeat,
    repeating-linear-gradient(90deg, rgba(255, 210, 122, 0.7) 0 6px, transparent 6px 11px)
      0 calc(100% - 3px) / 100% 1px no-repeat,
    linear-gradient(180deg, #a82a3a, #7a1828);
  clip-path: polygon(0 0, 100% 0, calc(100% - 0.7rem) 50%, 100% 100%, 0 100%, 0.7rem 50%);
}
.board-me .board-name {
  color: #ffe9b8;
}
.board-me .board-rank,
.board-me .board-stars {
  color: #f1c7a6;
}
@media (max-width: 30rem) {
  .board {
    font-size: 1rem;
  }
  .board-row {
    gap: 0.6rem;
    padding-inline: 0.9rem;
  }
  .board-rank {
    width: 3rem;
  }
  .board-score::before {
    min-width: 0.75rem;
  }
  .board-stars {
    width: auto;
  }
}

/* ---------- misc pages ---------- */

.about {
  width: 100%;
  max-width: 36rem;
  margin-top: 1rem;
}
.about strong {
  color: var(--fg);
}
.message {
  margin-top: 4rem;
  text-align: center;
}
.countdown {
  font-size: 1.5rem;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}