:root {
  --stage: #00afe2;
  --paper: #c8c8c3;
  --leaf: #f2f0e9;
  --ink: #171714;
  --orange: #f9a51a;
  --cyan: #00b9d2;
  --blue: #1656bd;
  --green: #27ad5a;
  --pink: #ed3d93;
  --coral: #ff6750;
  color-scheme: light;
  font-family: Georgia, "Times New Roman", serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  min-width: 320px;
  min-height: 100%;
  margin: 0;
}

body {
  background: var(--stage);
  color: var(--ink);
  overflow-x: hidden;
}

button {
  color: inherit;
  font: inherit;
}

.stage {
  position: relative;
  display: grid;
  min-height: 100vh;
  min-height: 100svh;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 48% 16%, rgba(255, 255, 255, 0.09), transparent 34%),
    linear-gradient(150deg, #02b8e8 0%, #00a8da 56%, #008dbc 100%);
}

.book {
  position: relative;
  width: min(82rem, 96vw);
  height: min(51rem, 88vh);
  transform: rotate(-0.65deg);
  filter: drop-shadow(1.1rem 1.5rem 0.9rem rgba(0, 26, 38, 0.34));
}

.left-page {
  position: absolute;
  top: 0.7%;
  bottom: -1.5%;
  left: -23%;
  width: 45%;
  overflow: hidden;
  border-radius: 8% 5% 4% 11% / 4% 4% 4% 6%;
  background: var(--paper);
  box-shadow:
    inset -1.1rem 0 1.4rem rgba(24, 23, 19, 0.28),
    inset 0 -0.5rem 0.9rem rgba(90, 89, 84, 0.18);
}

.left-top {
  position: absolute;
  inset: 0 0 auto;
  height: 22%;
  border-radius: 0 0 75% 0 / 0 0 30% 0;
  background: var(--leaf);
}

.left-echo {
  position: absolute;
  right: 7%;
  bottom: 11%;
  width: 59%;
  height: 46%;
  overflow: hidden;
  background: var(--orange);
}

.echo-block {
  position: absolute;
  display: block;
  width: 68%;
  height: 28%;
  opacity: 0.8;
  mix-blend-mode: multiply;
}

.echo-blue {
  top: 0;
  left: 0;
  height: 100%;
  width: 27%;
  background: var(--blue);
}

.echo-teal {
  top: 0;
  right: 0;
  height: 100%;
  width: 50%;
  background: var(--cyan);
}

.echo-violet {
  left: 0;
  bottom: 28%;
  background: #7955d7;
}

.echo-pink {
  left: 0;
  bottom: 12%;
  background: var(--pink);
}

.echo-orange {
  left: 0;
  bottom: 0;
  background: var(--coral);
}

.report-page {
  position: absolute;
  inset: 0 2.6% 0 17.6%;
  overflow: visible;
  border-radius: 44% 2.2% 2.5% 5.5% / 4.8% 2.8% 3.5% 4%;
  background: var(--paper);
  box-shadow:
    inset 1.2rem 0 1.8rem rgba(255, 255, 255, 0.45),
    inset -0.3rem 0 0.4rem rgba(55, 55, 51, 0.24),
    inset 0 -0.55rem 0.8rem rgba(77, 76, 71, 0.14);
}

.top-leaf {
  position: absolute;
  inset: 0 0 auto;
  z-index: 1;
  height: 22.2%;
  border-radius: 58% 1% 56% 4% / 26% 3% 19% 4%;
  background:
    radial-gradient(circle at 26% 30%, rgba(255, 255, 255, 0.46), transparent 34%),
    var(--leaf);
  box-shadow: 0 0.12rem 0.22rem rgba(49, 48, 44, 0.12);
}

.paper-grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.3;
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0,
      transparent 2px,
      rgba(255, 255, 255, 0.032) 3px,
      transparent 4px
    ),
    radial-gradient(circle at 46% 58%, rgba(255, 255, 255, 0.11), transparent 48%);
  mix-blend-mode: overlay;
}

.report-meta {
  position: absolute;
  top: 4.5%;
  left: 8%;
  z-index: 2;
  display: flex;
  gap: clamp(1rem, 4vw, 4rem);
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(0.45rem, 0.52vw, 0.68rem);
  font-weight: 800;
  letter-spacing: 0.16em;
  opacity: 0.68;
}

.report-meta p {
  margin: 0;
}

.plot {
  position: absolute;
  left: 8%;
  bottom: 11.4%;
  width: 61%;
  height: 47.8%;
}

.orange-field {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background:
    linear-gradient(rgba(255, 255, 255, 0.055), transparent),
    var(--orange);
  box-shadow: inset 0 0 0 1px rgba(255, 180, 33, 0.42);
}

.metric-summary {
  position: absolute;
  top: clamp(0.8rem, 2vw, 1.55rem);
  right: clamp(0.8rem, 2vw, 1.55rem);
  z-index: 7;
  display: grid;
  justify-items: end;
  font-family: Arial, Helvetica, sans-serif;
  color: rgba(18, 16, 10, 0.85);
  pointer-events: none;
}

.metric-summary span {
  font-size: clamp(0.42rem, 0.58vw, 0.65rem);
  font-weight: 900;
  letter-spacing: 0.13em;
}

.metric-summary strong {
  margin-top: 0.15rem;
  font-size: clamp(1.65rem, 3.3vw, 3.9rem);
  line-height: 0.92;
  letter-spacing: -0.07em;
}

.metric-summary em {
  margin-top: 0.35rem;
  font-size: clamp(0.56rem, 0.75vw, 0.88rem);
  font-style: normal;
  font-weight: 900;
}

.plot-layers {
  position: absolute;
  inset: 0;
}

.period {
  position: absolute;
  bottom: 0;
  z-index: 2;
  width: 14.4%;
  min-width: 2rem;
  padding: 0;
  border: 0;
  background: var(--period-color);
  cursor: pointer;
  opacity: 0.78;
  mix-blend-mode: multiply;
  transform-origin: bottom;
  transition:
    filter 150ms ease,
    opacity 150ms ease,
    transform 180ms ease;
}

.period::before,
.period::after {
  position: absolute;
  right: -34%;
  width: 150%;
  height: 18%;
  background: var(--period-accent);
  content: "";
  opacity: 0.8;
}

.period::before {
  bottom: 15%;
}

.period::after {
  bottom: 37%;
}

.period:hover,
.period:focus-visible,
.period[aria-pressed="true"] {
  z-index: 5;
  filter: saturate(1.18);
  opacity: 0.96;
  transform: translateY(-2.5%);
}

.period:focus-visible,
.metric-tabs button:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

.reading-line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 42%;
  z-index: 6;
  width: 1px;
  background: rgba(16, 14, 9, 0.38);
  opacity: 0;
  pointer-events: none;
  transition:
    left 160ms ease,
    opacity 160ms ease;
}

.orange-field:hover .reading-line,
.orange-field:focus-within .reading-line {
  opacity: 1;
}

.period-readout {
  position: absolute;
  left: 3%;
  bottom: 3%;
  z-index: 8;
  display: grid;
  min-width: 6.2rem;
  padding: 0.5rem 0.65rem;
  background: rgba(242, 240, 233, 0.9);
  font-family: Arial, Helvetica, sans-serif;
  pointer-events: none;
}

.period-readout span {
  font-size: 0.48rem;
  font-weight: 900;
  letter-spacing: 0.14em;
}

.period-readout strong {
  margin-top: 0.15rem;
  font-size: clamp(0.9rem, 1.25vw, 1.35rem);
}

.period-readout em {
  font-size: 0.57rem;
  font-style: normal;
  font-weight: 800;
}

.chapter-rail {
  position: absolute;
  top: 21.7%;
  right: 4.2%;
  bottom: 7%;
  width: 8.8%;
  border-right: 1px solid rgba(42, 41, 38, 0.36);
  border-left: 1px solid rgba(255, 255, 255, 0.4);
}

.chapter-rail h1,
.chapter-rail p {
  position: absolute;
  top: 1.5%;
  margin: 0;
  font-size: clamp(0.76rem, 1.08vw, 1.24rem);
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
  writing-mode: vertical-rl;
}

.chapter-rail h1 {
  left: 19%;
}

.chapter-rail p {
  right: 19%;
}

.metric-tabs {
  position: absolute;
  right: 3.9%;
  bottom: 34%;
  z-index: 8;
  display: grid;
  width: 9.4%;
}

.metric-tabs button {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 0.18rem 0;
  border: 0;
  border-top: 1px solid rgba(24, 23, 20, 0.35);
  background: transparent;
  font-size: clamp(0.5rem, 0.68vw, 0.78rem);
  cursor: pointer;
  transition: background-color 140ms ease;
}

.metric-tabs button:hover,
.metric-tabs button[aria-pressed="true"] {
  background: rgba(247, 246, 239, 0.74);
}

.page-edge {
  position: absolute;
  top: 5%;
  right: -2.4%;
  bottom: 4.5%;
  z-index: -1;
  width: 3.5%;
  transform: skewY(1.5deg);
  background: #d7d5ce;
  box-shadow: 0.45rem 0.3rem 0.25rem rgba(17, 26, 28, 0.48);
}

.page-edge i {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(52, 51, 47, 0.28);
}

.page-edge i:nth-child(1) { left: 10%; }
.page-edge i:nth-child(2) { left: 26%; }
.page-edge i:nth-child(3) { left: 42%; }
.page-edge i:nth-child(4) { left: 58%; }
.page-edge i:nth-child(5) { left: 74%; }
.page-edge i:nth-child(6) { left: 90%; }

.hint {
  position: absolute;
  right: clamp(0.7rem, 1.6vw, 1.8rem);
  bottom: clamp(0.7rem, 1.4vw, 1.4rem);
  margin: 0;
  color: rgba(255, 255, 255, 0.86);
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(0.45rem, 0.55vw, 0.65rem);
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
}

@media (max-width: 700px) {
  .book {
    width: 112vw;
    height: min(48rem, 90vh);
    transform: translateX(3.5vw) rotate(-0.6deg);
  }

  .left-page {
    left: -36%;
    width: 42%;
  }

  .report-page {
    right: 1.5%;
    left: 3%;
    border-radius: 34% 2% 2% 5% / 3.5% 2% 3% 3%;
  }

  .top-leaf {
    height: 25%;
  }

  .plot {
    left: 7%;
    bottom: 10%;
    width: 69%;
    height: 44%;
  }

  .metric-summary {
    top: 0.7rem;
    right: 0.65rem;
  }

  .metric-summary strong {
    font-size: clamp(1.4rem, 8vw, 2.25rem);
  }

  .period {
    min-width: 1rem;
    width: 17%;
  }

  .period-readout {
    min-width: 4.4rem;
    padding: 0.35rem 0.45rem;
  }

  .chapter-rail {
    top: 24.5%;
    right: 3.2%;
    width: 11.8%;
  }

  .chapter-rail h1,
  .chapter-rail p {
    font-size: clamp(0.62rem, 3vw, 0.82rem);
  }

  .metric-tabs {
    right: 2.9%;
    width: 12.4%;
  }

  .metric-tabs button {
    min-height: 2rem;
    font-size: 0.48rem;
  }

  .report-meta {
    left: 7%;
    font-size: 0.42rem;
  }

  .hint {
    display: none;
  }
}

@media (max-height: 610px) and (orientation: landscape) {
  .book {
    height: 92vh;
  }

  .plot {
    bottom: 8%;
    height: 50%;
  }

  .period-readout {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
  }
}