/* ──────────────────────────────────────────────────────────────
   Natalie Weishuhn - tribute page
   Dark modern: near-black canvas, violet/cyan glow, glass cards.
   ────────────────────────────────────────────────────────────── */

:root {
  --bg: #05060a;
  --bg-soft: #0a0c14;
  --surface: rgba(255, 255, 255, 0.035);
  --surface-2: rgba(255, 255, 255, 0.06);
  --stroke: rgba(255, 255, 255, 0.09);
  --stroke-strong: rgba(255, 255, 255, 0.16);
  --text: #eef0f7;
  --muted: #979db4;
  --violet: #8b5cf6;
  --violet-2: #c084fc;
  --cyan: #22d3ee;
  --amber: #fbbf24;
  --radius: 18px;
  --radius-lg: 26px;
  --maxw: 1120px;
  --font-display: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Layered background: stars, gradients, grain-ish vignette */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(139, 92, 246, 0.18), transparent 60%),
    radial-gradient(90% 60% at 100% 100%, rgba(34, 211, 238, 0.1), transparent 65%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-soft) 55%, var(--bg) 100%);
  z-index: -3;
  pointer-events: none;
}

#starfield {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
  pointer-events: none;
  opacity: 0.75;
}

.glow {
  position: fixed;
  border-radius: 50%;
  filter: blur(90px);
  z-index: -1;
  pointer-events: none;
  opacity: 0.55;
}

.glow--violet {
  width: 46vw;
  height: 46vw;
  top: -14vw;
  left: -10vw;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.55), transparent 70%);
  animation: drift 22s ease-in-out infinite alternate;
}

.glow--cyan {
  width: 38vw;
  height: 38vw;
  bottom: -12vw;
  right: -8vw;
  background: radial-gradient(circle, rgba(34, 211, 238, 0.4), transparent 70%);
  animation: drift 28s ease-in-out infinite alternate-reverse;
}

@keyframes drift {
  from {
    transform: translate3d(0, 0, 0) scale(1);
  }
  to {
    transform: translate3d(4vw, 5vh, 0) scale(1.12);
  }
}

/* ── Nav ───────────────────────────────────────────────────── */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 16px clamp(18px, 5vw, 48px);
  transition: background 0.35s ease, backdrop-filter 0.35s ease, border-color 0.35s ease;
  border-bottom: 1px solid transparent;
}

.nav.is-stuck {
  background: rgba(5, 6, 10, 0.72);
  backdrop-filter: blur(14px) saturate(160%);
  border-bottom-color: var(--stroke);
}

.nav__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.12em;
  font-size: 0.82rem;
  color: var(--text);
  text-decoration: none;
}

.nav__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--violet-2), var(--cyan));
  box-shadow: 0 0 14px rgba(139, 92, 246, 0.9);
}

.nav__links {
  display: flex;
  gap: clamp(12px, 2.2vw, 26px);
}

.nav__links a {
  color: var(--muted);
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  transition: color 0.2s ease;
}

.nav__links a:hover,
.nav__links a:focus-visible {
  color: var(--text);
}

/* ── Hero ──────────────────────────────────────────────────── */
.hero {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 140px clamp(20px, 6vw, 80px) 90px;
  max-width: var(--maxw);
  margin: 0 auto;
  position: relative;
}

.hero__kicker,
.section__kicker {
  font-family: var(--font-display);
  font-size: 0.72rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--violet-2);
  margin: 0 0 18px;
}

.hero__kicker::before,
.section__kicker::before {
  content: '';
  display: inline-block;
  width: 26px;
  height: 1px;
  margin-right: 12px;
  vertical-align: middle;
  background: linear-gradient(90deg, var(--violet), var(--cyan));
}

.hero__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(3.1rem, 12.5vw, 8.6rem);
  line-height: 0.92;
  letter-spacing: -0.035em;
  margin: 0 0 26px;
}

.grad {
  background: linear-gradient(100deg, var(--violet-2) 8%, var(--cyan) 52%, var(--amber) 96%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.hero__tag {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 2.6vw, 1.6rem);
  font-weight: 500;
  margin: 0 0 16px;
  color: var(--text);
}

.hero__sub {
  color: var(--muted);
  font-size: clamp(0.98rem, 1.6vw, 1.1rem);
  max-width: 60ch;
  margin: 0 0 34px;
  font-weight: 300;
}

.badges {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 0;
  margin: 0 0 40px;
}

.chip {
  padding: 8px 15px;
  border-radius: 999px;
  border: 1px solid var(--stroke-strong);
  background: var(--surface);
  font-size: 0.79rem;
  font-weight: 500;
  color: #d5d9e6;
  backdrop-filter: blur(8px);
  white-space: nowrap;
}

.chip--violet {
  border-color: rgba(139, 92, 246, 0.45);
  box-shadow: inset 0 0 22px rgba(139, 92, 246, 0.14);
}

.chip--cyan {
  border-color: rgba(34, 211, 238, 0.4);
  box-shadow: inset 0 0 22px rgba(34, 211, 238, 0.12);
}

.chip--amber {
  border-color: rgba(251, 191, 36, 0.4);
  box-shadow: inset 0 0 22px rgba(251, 191, 36, 0.12);
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 26px;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease,
    border-color 0.25s ease, color 0.25s ease;
}

.btn--primary {
  color: #0a0713;
  background: linear-gradient(100deg, var(--violet-2), var(--cyan));
  box-shadow: 0 12px 40px -12px rgba(139, 92, 246, 0.85);
}

.btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 50px -12px rgba(34, 211, 238, 0.7);
}

.btn--ghost {
  color: var(--text);
  border-color: var(--stroke-strong);
  background: var(--surface);
}

.btn--ghost:hover {
  border-color: var(--violet-2);
  background: var(--surface-2);
  transform: translateY(-2px);
}

/* Inline logo/icon inside a button. Sized in px so it never inherits the
   heading type scale, and never shrinks when the label wraps. */
.btn__icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.scroll-hint {
  position: absolute;
  bottom: 34px;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 56px;
  background: linear-gradient(180deg, transparent, var(--stroke-strong));
  overflow: hidden;
}

.scroll-hint span {
  position: absolute;
  top: -30%;
  left: 0;
  width: 1px;
  height: 30%;
  background: linear-gradient(180deg, transparent, var(--cyan));
  animation: scrollDot 2.4s ease-in-out infinite;
}

@keyframes scrollDot {
  0% {
    top: -30%;
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  100% {
    top: 100%;
    opacity: 0;
  }
}

/* ── Sections ──────────────────────────────────────────────── */
.section {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(70px, 11vw, 130px) clamp(20px, 6vw, 80px);
}

.section--tight {
  padding-top: clamp(40px, 6vw, 70px);
}

.section__head {
  max-width: 68ch;
  margin-bottom: clamp(38px, 5vw, 60px);
}

.section__head h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.75rem, 4.6vw, 3rem);
  line-height: 1.1;
  letter-spacing: -0.025em;
  margin: 0 0 16px;
}

.section__lede {
  color: var(--muted);
  font-size: 1rem;
  font-weight: 300;
  margin: 0;
}

/* ── Grids ─────────────────────────────────────────────────── */
.grid {
  display: grid;
  gap: 18px;
}

.grid--cards {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.grid--stats {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.grid--quotes {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

/* ── Cards ─────────────────────────────────────────────────── */
.card {
  position: relative;
  padding: 28px 26px 30px;
  border-radius: var(--radius);
  border: 1px solid var(--stroke);
  background: linear-gradient(160deg, var(--surface-2), var(--surface));
  backdrop-filter: blur(10px);
  overflow: hidden;
  transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}

.card::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(140deg, rgba(139, 92, 246, 0.6), rgba(34, 211, 238, 0.35), transparent 65%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}

.card:hover {
  transform: translateY(-5px);
  border-color: var(--stroke-strong);
  box-shadow: 0 26px 60px -30px rgba(0, 0, 0, 0.95);
}

.card:hover::after {
  opacity: 1;
}

.card__icon {
  font-size: 1.5rem;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  margin-bottom: 18px;
  background: linear-gradient(150deg, rgba(139, 92, 246, 0.22), rgba(34, 211, 238, 0.14));
  border: 1px solid var(--stroke-strong);
}

.card h3 {
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 600;
  margin: 0 0 10px;
  letter-spacing: -0.01em;
}

.card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.93rem;
  font-weight: 300;
}

.card em {
  color: #cfd4e4;
  font-style: italic;
}

.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.84em;
  color: var(--cyan);
}

/* ── Stats ─────────────────────────────────────────────────── */
.stat {
  padding: 26px 24px;
  border-radius: var(--radius);
  border: 1px solid var(--stroke);
  background: var(--surface);
}

.stat__num {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 5.6vw, 3.1rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  background: linear-gradient(120deg, var(--violet-2), var(--cyan));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  margin-bottom: 14px;
}

.stat__label {
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 300;
  line-height: 1.5;
}

/* ── Timeline ──────────────────────────────────────────────── */
.timeline {
  list-style: none;
  margin: 0;
  padding: 0 0 0 30px;
  position: relative;
}

.timeline::before {
  content: '';
  position: absolute;
  left: 7px;
  top: 6px;
  bottom: 6px;
  width: 1px;
  background: linear-gradient(180deg, var(--violet), var(--cyan), transparent);
  opacity: 0.45;
}

.tl {
  position: relative;
  padding: 0 0 40px 8px;
}

.tl:last-child {
  padding-bottom: 0;
}

.tl__node {
  position: absolute;
  left: -30px;
  top: 7px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--bg);
  border: 1.5px solid var(--violet-2);
  box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.13), 0 0 18px rgba(139, 92, 246, 0.5);
}

.tl__when {
  font-family: var(--font-display);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cyan);
  margin: 0 0 8px;
}

.tl__body h3 {
  font-family: var(--font-display);
  font-size: clamp(1.08rem, 2.4vw, 1.32rem);
  font-weight: 600;
  margin: 0 0 8px;
  letter-spacing: -0.015em;
}

.tl__body p {
  margin: 0;
  color: var(--muted);
  font-weight: 300;
  font-size: 0.94rem;
  max-width: 62ch;
}

/* Named systems and products inside body copy should read as names, not as
   emphasis drowning in the muted paragraph colour. */
.tl__body strong {
  color: var(--text);
  font-weight: 600;
}

/* Nudge toward the full history once the three headline roles run out. */
.timeline__more {
  margin: 38px 0 0;
  padding-left: 30px;
  color: var(--muted);
  font-size: 0.95rem;
  font-weight: 300;
}

.timeline__more a {
  color: var(--text);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid rgba(139, 92, 246, 0.6);
  transition: color 0.2s ease, border-color 0.2s ease;
}

.timeline__more a:hover,
.timeline__more a:focus-visible {
  color: var(--cyan);
  border-bottom-color: var(--cyan);
}

/* ── Quotes ────────────────────────────────────────────────── */
.quote {
  margin: 0;
  padding: 30px 26px;
  border-radius: var(--radius);
  border: 1px solid var(--stroke);
  border-left: 2px solid var(--violet);
  background: linear-gradient(150deg, rgba(139, 92, 246, 0.09), var(--surface));
}

.quote p {
  font-family: var(--font-display);
  font-size: clamp(1.02rem, 2.2vw, 1.2rem);
  font-weight: 400;
  line-height: 1.5;
  margin: 0 0 16px;
  color: #e5e8f2;
}

.quote footer {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 300;
}

/* ── Verdict ───────────────────────────────────────────────── */
.verdict {
  padding-top: clamp(30px, 5vw, 50px);
}

.verdict__box {
  padding: clamp(32px, 5vw, 56px);
  border-radius: var(--radius-lg);
  border: 1px solid var(--stroke-strong);
  background: linear-gradient(150deg, rgba(139, 92, 246, 0.14), rgba(34, 211, 238, 0.07) 55%, var(--surface));
  position: relative;
  overflow: hidden;
}

.verdict__box h2 {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 5.5vw, 3.2rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  margin: 0 0 26px;
}

.meter {
  height: 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--stroke);
  overflow: hidden;
  margin-bottom: 10px;
}

.meter__fill {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--violet), var(--cyan), var(--amber));
  box-shadow: 0 0 24px rgba(139, 92, 246, 0.8);
  transition: width 1.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.meter__ticks {
  display: flex;
  justify-content: space-between;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 30px;
  gap: 8px;
}

.meter__ticks span:last-child {
  color: var(--amber);
}

.verdict__text {
  margin: 0;
  color: #ccd2e2;
  font-size: clamp(0.98rem, 1.7vw, 1.08rem);
  font-weight: 300;
  max-width: 66ch;
}

/* ── Sources ───────────────────────────────────────────────── */
.sources {
  list-style: none;
  margin: 0 0 34px;
  padding: 0;
  display: grid;
  gap: 10px;
}

.sources li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 14px;
  padding: 15px 18px;
  border-radius: 13px;
  border: 1px solid var(--stroke);
  background: var(--surface);
  font-size: 0.88rem;
}

.sources__tag {
  font-family: var(--font-display);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #0a0713;
  background: linear-gradient(100deg, var(--violet-2), var(--cyan));
  padding: 4px 9px;
  border-radius: 5px;
  font-weight: 700;
  white-space: nowrap;
}

.sources a {
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid rgba(139, 92, 246, 0.5);
  word-break: break-word;
}

.sources a:hover {
  border-bottom-color: var(--cyan);
  color: var(--cyan);
}

.sources__note {
  color: var(--muted);
  font-weight: 300;
  flex: 1 1 240px;
}

/* ── Footer ────────────────────────────────────────────────── */
.footer {
  text-align: center;
  padding: 60px 20px 70px;
  border-top: 1px solid var(--stroke);
  max-width: var(--maxw);
  margin: 0 auto;
}

.footer p {
  margin: 0;
  font-family: var(--font-display);
  font-size: 0.95rem;
}

.footer__name {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-size: 0.98rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.footer__links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
}

.footer__links a {
  color: var(--muted);
  text-decoration: none;
  font-size: 0.86rem;
  font-weight: 400;
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.footer__links a:hover,
.footer__links a:focus-visible {
  color: var(--text);
  border-bottom-color: var(--violet-2);
}

/* ── Contrail ──────────────────────────────────────────────────
   The rocket drops a puff at its nozzle as it flies. Each puff is placed once
   and never moves again, so the trail hangs in the sky instead of travelling
   with the rocket. JS removes each puff when its fade finishes. */
.contrail {
  position: fixed;
  inset: 0;
  z-index: 39; /* just under the rocket, so the exhaust reads on top */
  pointer-events: none;
  overflow: hidden;
}

.contrail__puff {
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(232, 238, 248, 0.5) 0%,
    rgba(203, 213, 228, 0.26) 45%,
    rgba(203, 213, 228, 0) 72%
  );
  will-change: transform, opacity;
}

/* ── Decorative rocket ─────────────────────────────────────────
   Crosses the viewport on a randomized interval. Purely ornamental:
   pointer-events is off so it can never intercept a click, and it is
   skipped entirely under prefers-reduced-motion. */
.rocket {
  position: fixed;
  top: 0;
  left: 0;
  width: clamp(35px, 4.4vw, 58px);
  z-index: 40; /* over the content, under the fixed nav (50) */
  pointer-events: none;
  opacity: 0; /* JS turns this on only while a flight is running */
  /* The trail extends far below the hull, so the rotation origin still has to
     sit on the hull's centre, not the centre of the whole drawing. ViewBox is
     520 units tall and the rocket's visual centre is at ~110 units, so 21%. */
  transform-origin: 50% 21%;
  will-change: transform;
}

.rocket__svg {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 8px 22px rgba(139, 92, 246, 0.5))
    drop-shadow(0 0 10px rgba(251, 191, 36, 0.22));
}

.rocket__flame {
  transform-box: fill-box;
  transform-origin: 50% 0%;
  animation: flameFlicker 0.18s ease-in-out infinite;
}

@keyframes flameFlicker {
  0%,
  100% {
    transform: scaleY(1) scaleX(1);
  }
  50% {
    transform: scaleY(0.78) scaleX(1.08);
  }
}

/* Mach diamonds pulse slightly out of phase with each other, so the plume
   shimmers and travels the way a real exhaust does instead of blinking
   as a single block. */
.rk-diamond {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: machPulse 0.34s ease-in-out infinite;
}

.rk-diamond--2 {
  animation-delay: 0.07s;
}

.rk-diamond--3 {
  animation-delay: 0.14s;
}

.rk-diamond--4 {
  animation-delay: 0.21s;
}

.rk-diamond--5 {
  animation-delay: 0.28s;
}

@keyframes machPulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1, 1);
  }
  50% {
    opacity: 0.5;
    transform: scale(0.78, 0.9);
  }
}

/* ── Reveal animation ──────────────────────────────────────────
   Gated behind html.js so that without JavaScript the content
   simply renders instead of staying invisible. */
html.js .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1), transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

html.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 720px) {
  .nav__links {
    display: none;
  }

  .hero {
    padding-top: 118px;
  }

  .scroll-hint {
    display: none;
  }

  .timeline {
    padding-left: 24px;
  }

  .timeline__more {
    padding-left: 24px;
  }

  .tl__node {
    left: -24px;
  }
}

@media (max-width: 420px) {
  .chip {
    font-size: 0.74rem;
    padding: 7px 12px;
  }

  .meter__ticks {
    font-size: 0.6rem;
    letter-spacing: 0.08em;
  }
}

/* ── Motion / contrast preferences ─────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  html.js .reveal {
    opacity: 1;
    transform: none;
  }

  .meter__fill {
    width: 100% !important;
  }

  /* The script also declines to schedule any flight under reduced motion;
     this is belt and braces so the rocket can never appear. */
  .rocket,
  .contrail {
    display: none;
  }
}

@media print {
  #starfield,
  .glow,
  .nav,
  .rocket,
  .contrail {
    display: none;
  }

  body {
    background: #fff;
    color: #000;
  }
}