:root {
  /* Light mode palette */
  --ghost-white: #f9f9fe;
  --light-sky-blue: #94d0ff;
  --vista-blue: #8795e8;
  --tropical-indigo: #ad8cff;
  --lavender-floral: #c774e8;
  --rose-pink: #ff6ad5;

  /* Dark mode palette */
  --rosequartz: #a695b2;
  --thistle: #bfb1c1;
  --french-gray: #b5bec6;
  --columbia-blue: #c7dbe6;
  --night: #071108;

  --text-light: #111;
  --text-night: #f2f2f2;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, sans-serif;
  background: var(--ghost-white);
  color: var(--text-light);
  transition: background 0.6s ease, color 0.6s ease;
  margin: 0;
  padding: 2rem;
}

body.night {
  background: var(--night);
  color: var(--text-night);
}

.header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  margin-top: 4rem;
  text-align: center;
}

h1 {
  margin: 0;
  font-size: 2rem;
}

.toggle {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

.toggle input { display: none; }

.slider {
  width: 50px;
  height: 24px;
  background: var(--light-sky-blue);
  border-radius: 24px;
  position: relative;
  transition: background 0.4s ease;
}

.slider::before {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  top: 2px;
  left: 2px;
  background: white;
  transition: transform 0.4s ease;
}

input:checked + .slider { background: var(--rosequartz); }
input:checked + .slider::before { transform: translateX(26px); }

.poem {
  max-width: 700px;
  margin: 3rem auto;
  display: grid;
  gap: 2rem;
}

.couplet {
  display: flex;
  justify-content: center;
}

.bubble {
  display: inline-grid;
  grid-template-areas: "stack";
  place-items: stretch;
  width: min(80ch, 90vw);
  position: relative;
}

.line {
  grid-area: stack;
  padding: .75rem 1rem;
  border-radius: 20px;
  font-size: 1.1rem;
  line-height: 1.5;
  margin: 0;
  transition: opacity .6s ease, background .6s ease, color .6s ease;
}

/* Default states */
.light-line { opacity: 1; color: var(--text-light); }
.night-line { opacity: 0; color: var(--text-night); }

/* Global toggle */
body.night .light-line { opacity: 0; }
body.night .night-line { opacity: 1; }

/* Hover flip */
.bubble:hover .light-line,
.bubble:focus-within .light-line { opacity: 0; }
.bubble:hover .night-line,
.bubble:focus-within .night-line { opacity: 1; }

body.night .bubble:hover .light-line,
body.night .bubble:focus-within .light-line { opacity: 1; }
body.night .bubble:hover .night-line,
body.night .bubble:focus-within .night-line { opacity: 0; }

/* Couplet-specific color pairings */

.couplet:nth-of-type(1) .light-line { background: var(--rosequartz); }
.couplet:nth-of-type(1) .night-line { background: var(--light-sky-blue); }

.couplet:nth-of-type(2) .light-line { background: var(--thistle); }
.couplet:nth-of-type(2) .night-line { background: var(--vista-blue); }

.couplet:nth-of-type(3) .light-line { background: var(--french-gray); }
.couplet:nth-of-type(3) .night-line { background: var(--tropical-indigo); }

.couplet:nth-of-type(4) .light-line { background: var(--columbia-blue); }
.couplet:nth-of-type(4) .night-line { background: var(--lavender-floral); }

.couplet:nth-of-type(5) .light-line { background: var(--rosequartz); }
.couplet:nth-of-type(5) .night-line { background: var(--rose-pink); }

.couplet:nth-of-type(6) .light-line { background: var(--thistle); }
.couplet:nth-of-type(6) .night-line { background: var(--light-sky-blue); }

.couplet:nth-of-type(7) .light-line { background: var(--french-gray); }
.couplet:nth-of-type(7) .night-line { background: var(--vista-blue); }

.couplet:nth-of-type(8) .light-line { background: var(--columbia-blue); }
.couplet:nth-of-type(8) .night-line { background: var(--tropical-indigo); }

/* --- Bubble horizontal animation --- */

/* Default Light position */
.bubble {
  transform: translateX(-5%);
  transition: transform .6s ease, opacity .6s ease, background .6s ease;
}

/* Global Night Mode pushes them right */
body.night .bubble {
  transform: translateX(5%);
}

/* Hover flip also animates position back and forth */
.bubble:hover,
.bubble:focus-within {
  transform: translateX(5%);
}

body.night .bubble:hover,
body.night .bubble:focus-within {
  transform: translateX(-5%);
}