:root {
  --ink: #14120E;
  --vellum: #F7F1DF;
  --sage: #B9D7C2;
  --violet: #7B61FF;
  --vermilion: #F05D2A;
  --brass: #D8B34A;
  --teal: #1C7C8C;
  --fraunces: "Fraunces", serif;
  --sora: "Sora", sans-serif;
  --mono: "Azeret Mono", monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: #14120E;
  color: #14120E;
  font-family: var(--sora);
  overflow-x: hidden;
}

.grain,
.room-glow {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 20;
}

.grain {
  opacity: 0.18;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(247, 241, 223, 0.35) 0 1px, transparent 1px),
    radial-gradient(circle at 80% 70%, rgba(20, 18, 14, 0.45) 0 1px, transparent 1px);
  background-size: 17px 19px, 23px 29px;
  mix-blend-mode: multiply;
}

.room-glow {
  z-index: 1;
  background:
    radial-gradient(circle at 16% 76%, rgba(240, 93, 42, 0.18), transparent 27%),
    radial-gradient(circle at 74% 20%, rgba(123, 97, 255, 0.16), transparent 32%),
    linear-gradient(180deg, rgba(20, 18, 14, 0.55), transparent 34%, rgba(20, 18, 14, 0.65));
}

.plotter-room { position: relative; z-index: 2; }

.plate {
  min-height: 100vh;
  position: relative;
  display: grid;
  place-items: center;
  padding: 8vh 6vw;
}

.drafting-table {
  position: fixed;
  inset: 3.5vh 3vw;
  border-radius: 34px;
  background:
    linear-gradient(112deg, rgba(247, 241, 223, 0.98), rgba(247, 241, 223, 0.9) 48%, rgba(185, 215, 194, 0.72)),
    #F7F1DF;
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(20, 18, 14, 0.22);
  overflow: hidden;
  transform-origin: 14% 82%;
}

.coordinate-stage {
  position: absolute;
  inset: -4% -3%;
  width: 106%;
  height: 108%;
  transition: transform 900ms cubic-bezier(.2,.8,.2,1), opacity 700ms ease;
}

.axis-line,
.ticks path,
.main-curve,
.ghost-curve,
.plotter-arm path,
.contours path {
  fill: none;
  vector-effect: non-scaling-stroke;
}

.axis-line {
  stroke: #14120E;
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-dasharray: 1700;
  stroke-dashoffset: 1700;
}

.ticks path {
  stroke: #D8B34A;
  stroke-width: 3;
  opacity: 0;
  transform: scaleY(0.2);
  transform-origin: center;
}

.axis-label,
.origin-label {
  font-family: var(--mono);
  font-size: 18px;
  fill: #14120E;
  opacity: 0;
  letter-spacing: 0.04em;
}

.y-label { transform: rotate(-90deg); transform-origin: 22px -650px; }

.regression-ribbon { fill: url(#ribbon); opacity: 0; transition: opacity 700ms ease; }
.ghost-curve { stroke: #7B61FF; stroke-width: 2; opacity: 0.24; stroke-dasharray: 13 13; }
.main-curve { stroke: #F05D2A; stroke-width: 6; stroke-linecap: round; stroke-dasharray: 1800; stroke-dashoffset: 1800; filter: drop-shadow(0 3px 0 rgba(216, 179, 74, 0.35)); }

.plot-point { opacity: 0; transform-box: fill-box; transform-origin: center; }
.plot-point circle { fill: #14120E; stroke: #F7F1DF; stroke-width: 4; }
.plot-point.warm circle { fill: #F05D2A; }
.plot-point.violet circle { fill: #7B61FF; }
.plot-point.teal circle { fill: #1C7C8C; }
.plot-point text { font-family: var(--mono); fill: #14120E; font-size: 17px; font-weight: 600; opacity: 0; }

.residual-cloud { opacity: 0; transition: opacity 700ms ease; }
.residual-cloud circle { fill: #1C7C8C; opacity: 0.45; }

.plotter-arm { opacity: 0; transition: opacity 700ms ease; }
.arm-rail { stroke: #D8B34A; stroke-width: 9; stroke-linecap: round; }
.arm-diagonal { stroke: #14120E; stroke-width: 3; stroke-dasharray: 9 10; opacity: 0.72; }
.pen-carriage { fill: rgba(247, 241, 223, 0.62); stroke: #14120E; stroke-width: 3; }
.pen-nib { fill: #F05D2A; stroke: #14120E; stroke-width: 2; }

.contours path { stroke: #1C7C8C; stroke-width: 3; opacity: 0; stroke-dasharray: 360; stroke-dashoffset: 360; }

.registration { position: absolute; top: 28px; width: 17px; height: calc(100% - 56px); z-index: 3; background: radial-gradient(circle, rgba(20,18,14,.46) 0 5px, transparent 6px) 0 0 / 17px 54px; opacity: 0.45; }
.registration-left { left: 24px; }
.registration-right { right: 24px; }
.vellum-corner { position: absolute; z-index: 4; width: 150px; height: 58px; background: rgba(216, 179, 74, 0.35); border: 1px solid rgba(20, 18, 14, 0.12); transform: rotate(-12deg); }
.corner-a { top: 28px; left: 118px; }
.corner-b { right: 120px; bottom: 45px; transform: rotate(10deg); }

.brass-ruler {
  position: absolute;
  left: 8vw;
  right: 10vw;
  bottom: 9vh;
  height: 32px;
  display: flex;
  justify-content: space-between;
  align-items: end;
  padding: 0 22px 5px;
  font-family: var(--mono);
  font-size: 11px;
  color: #14120E;
  background: repeating-linear-gradient(90deg, #D8B34A 0 2px, transparent 2px 28px), linear-gradient(180deg, rgba(216,179,74,.72), rgba(216,179,74,.25));
  border-radius: 5px;
  opacity: 0.8;
}

.annotation-card {
  position: relative;
  width: min(620px, 88vw);
  padding: clamp(24px, 4vw, 50px);
  background: rgba(247, 241, 223, 0.76);
  border: 1px solid rgba(20, 18, 14, 0.24);
  box-shadow: 0 24px 70px rgba(20, 18, 14, 0.22), inset 0 0 0 1px rgba(247, 241, 223, 0.45);
  backdrop-filter: blur(11px);
  transform: translateY(60px);
  opacity: 0;
  transition: opacity 700ms ease, transform 900ms cubic-bezier(.2,.8,.2,1);
}

.annotation-card.visible { opacity: 1; transform: translateY(0); }

.hero-annotation { position: absolute; left: clamp(48px, 10vw, 160px); top: 12vh; }
.side-note { margin-left: auto; margin-right: 8vw; }
.floating-ledger { margin-right: auto; margin-left: 9vw; transform: rotate(-1deg) translateY(60px); }
.floating-ledger.visible { transform: rotate(-1deg) translateY(0); }
.equation-strip { margin-left: auto; margin-right: 11vw; }
.instrument-panel { margin-right: auto; margin-left: 12vw; }
.final-card { margin-left: auto; margin-right: auto; text-align: center; }

.eyebrow {
  margin: 0 0 18px;
  font-family: var(--mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: #1C7C8C;
}

h1,
h2 {
  margin: 0;
  font-family: var(--fraunces);
  font-variation-settings: "SOFT" 70, "WONK" 1;
  line-height: 0.93;
  letter-spacing: -0.055em;
  color: #14120E;
}

h1 { font-size: clamp(70px, 12vw, 176px); max-width: 840px; }
h2 { font-size: clamp(48px, 7vw, 112px); }

.lede,
.annotation-card p:not(.eyebrow) {
  font-size: clamp(16px, 1.45vw, 21px);
  line-height: 1.65;
  color: rgba(20, 18, 14, 0.8);
}

.plot-button,
.plot-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 14px;
  padding: 15px 20px;
  border: 1px solid #14120E;
  background: #F05D2A;
  color: #F7F1DF;
  font-family: var(--sora);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 7px 7px 0 #D8B34A;
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.plot-button:hover,
.plot-link:hover { transform: translate(4px, 4px); box-shadow: 3px 3px 0 #D8B34A; }

.coordinate-readout,
.live-readout,
.formula {
  font-family: var(--mono);
  color: #14120E;
  background: rgba(185, 215, 194, 0.55);
  border: 1px dashed rgba(20, 18, 14, 0.45);
}
.coordinate-readout { display: flex; gap: 10px; flex-wrap: wrap; padding: 12px; }
.coordinate-readout span { color: #7B61FF; }
.formula { margin-top: 20px; padding: 18px; font-size: clamp(18px, 2vw, 28px); color: #F05D2A; }

.ledger-list { list-style: none; padding: 0; margin: 22px 0 0; font-family: var(--sora); }
.ledger-list li { padding: 12px 0; border-top: 1px solid rgba(20, 18, 14, 0.18); }
.ledger-list span { font-family: var(--mono); color: #7B61FF; margin-right: 12px; }

.mini-plot {
  position: relative;
  height: 260px;
  margin-top: 22px;
  background: #F7F1DF;
  border: 1px solid rgba(20, 18, 14, 0.35);
  overflow: hidden;
}
.mini-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(20,18,14,.16) 1px, transparent 1px), linear-gradient(90deg, rgba(20,18,14,.16) 1px, transparent 1px); background-size: 28px 28px; }
.mini-ribbon { position: absolute; left: 9%; right: 9%; top: 46%; height: 42px; background: linear-gradient(90deg, rgba(123,97,255,.4), rgba(28,124,140,.28), rgba(240,93,42,.34)); border-radius: 50%; transform: rotate(-12deg); }
.sample-point { position: absolute; left: 61%; top: 42%; width: 24px; height: 24px; padding: 0; border-radius: 999px; border: 3px solid #14120E; background: #F05D2A; cursor: grab; }
.sample-point:active { cursor: grabbing; }
.sample-point span { position: absolute; left: 28px; top: -22px; white-space: nowrap; font-family: var(--mono); font-size: 11px; color: #14120E; }
.live-readout { margin-top: 14px; padding: 12px; color: #1C7C8C; }

.act-index {
  position: fixed;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 30;
  display: grid;
  gap: 10px;
}
.act-index a {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(247, 241, 223, 0.35);
  color: #F7F1DF;
  text-decoration: none;
  font-family: var(--mono);
  font-size: 12px;
  background: rgba(20, 18, 14, 0.54);
}
.act-index a.active { background: #7B61FF; color: #F7F1DF; border-color: #D8B34A; }

body.act-0 .hero-annotation,
body.act-1 .side-note,
body.act-2 .floating-ledger,
body.act-3 .equation-strip,
body.act-4 .instrument-panel,
body.act-5 .final-card { opacity: 1; transform: translateY(0); }

body.pen-awake .plotter-arm,
body.act-1 .plotter-arm,
body.act-2 .plotter-arm,
body.act-3 .plotter-arm,
body.act-4 .plotter-arm,
body.act-5 .plotter-arm { opacity: 1; }

body.act-1 .axis-line,
body.act-2 .axis-line,
body.act-3 .axis-line,
body.act-4 .axis-line,
body.act-5 .axis-line { animation: drawAxis 1600ms ease forwards; }

body.act-1 .ticks path,
body.act-2 .ticks path,
body.act-3 .ticks path,
body.act-4 .ticks path,
body.act-5 .ticks path { animation: tickIn 700ms ease forwards; }

body.act-1 .axis-label,
body.act-1 .origin-label,
body.act-2 .axis-label,
body.act-2 .origin-label,
body.act-3 .axis-label,
body.act-3 .origin-label,
body.act-4 .axis-label,
body.act-4 .origin-label,
body.act-5 .axis-label,
body.act-5 .origin-label { opacity: 1; transition: opacity 600ms ease 500ms; }

body.act-2 .plot-point,
body.act-3 .plot-point,
body.act-4 .plot-point,
body.act-5 .plot-point { animation: pointPop 600ms cubic-bezier(.2,1.5,.35,1) forwards; }
body.act-2 .plot-point text,
body.act-3 .plot-point text,
body.act-4 .plot-point text,
body.act-5 .plot-point text { opacity: 1; transition: opacity 600ms ease 300ms; }

body.act-3 .main-curve,
body.act-4 .main-curve,
body.act-5 .main-curve { animation: drawCurve 2300ms cubic-bezier(.15,.8,.25,1) forwards; }
body.act-3 .regression-ribbon,
body.act-4 .regression-ribbon,
body.act-5 .regression-ribbon,
body.act-3 .residual-cloud,
body.act-4 .residual-cloud,
body.act-5 .residual-cloud { opacity: 1; }
body.act-4 .contours path,
body.act-5 .contours path { animation: drawContour 1600ms ease forwards; }

@keyframes drawAxis { to { stroke-dashoffset: 0; } }
@keyframes drawCurve { to { stroke-dashoffset: 0; } }
@keyframes drawContour { to { stroke-dashoffset: 0; opacity: 0.72; } }
@keyframes tickIn { to { opacity: 1; transform: scaleY(1); } }
@keyframes pointPop { 0% { opacity: 0; transform: scale(0.2); } 100% { opacity: 1; transform: scale(1); } }

@media (max-width: 760px) {
  .drafting-table { inset: 1.5vh 1.5vw; border-radius: 20px; }
  .hero-annotation, .side-note, .floating-ledger, .equation-strip, .instrument-panel, .final-card { margin: 0; left: auto; top: auto; }
  .hero-annotation { position: relative; }
  .act-index { right: 8px; }
  .act-index a { width: 34px; height: 34px; }
  .plate { padding: 10vh 52px 10vh 24px; }
}