/* ══════════════════════════════════════════════════════════
   skye — manager of the day
   palette: dusty yarn-dyed pinks, plum ink, sage + butter counterpoints
   type:    Fraunces (soft/wonk) · Karla · Space Mono (pattern notation)
   ══════════════════════════════════════════════════════════ */

:root {
  --wool:      #FFF7F9;
  --rosewater: #FFE8EE;
  --floss:     #FF6FA5;
  --berry:     #C9265F;
  --plum:      #3D1029;
  --sage:      #A8C69F;
  --butter:    #FFD166;

  --ink:   var(--plum);
  --paper: var(--wool);
  --card:  #fff;

  --spring: cubic-bezier(.22, 1.5, .36, 1);
  --ease:   cubic-bezier(.32, .72, 0, 1);

  --gut: clamp(1.25rem, 5vw, 5rem);
  --strand-w: 108px;
}

[data-theme="night"] {
  --wool:      #200A18;
  --rosewater: #3A1128;
  --floss:     #FF85B3;
  --berry:     #FFB3CE;
  --plum:      #FFE9F1;
  --sage:      #7FA678;
  --butter:    #FFDE8A;
  --card:      #331123;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Karla, "Segoe UI", system-ui, sans-serif;
  font-size: clamp(1rem, .55vw + .88rem, 1.14rem);
  line-height: 1.6;
  overflow-x: hidden;
  transition: background .7s var(--ease), color .7s var(--ease);
}

/* stitched wool ground: two offset dot fields = a fabric tooth */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--floss) 15%, transparent) 0 1.2px, transparent 1.6px) 0 0 / 17px 17px,
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--sage) 12%, transparent) 0 1.1px, transparent 1.5px) 8px 8px / 17px 17px,
    radial-gradient(140% 90% at 50% -10%, var(--rosewater), transparent 60%);
}

.grain {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  z-index: 1;
  pointer-events: none;
  opacity: .05;
  mix-blend-mode: multiply;
}
[data-theme="night"] .grain { mix-blend-mode: screen; opacity: .07; }

#fx {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  z-index: 3;
  pointer-events: none;
}

/* ── the strand: one yarn, whole page ─────────────────────── */
.strand {
  position: absolute;
  top: 0; left: 0;
  width: var(--strand-w);
  height: 100%;
  z-index: 0;
  pointer-events: none;
  overflow: visible;
}
#strandPath {
  opacity: .85;
  transition: stroke-dashoffset .1s linear;
}
.ball {
  position: absolute;
  top: 0; left: 0;
  width: 38px; height: 38px;
  z-index: 2;
  margin: -19px 0 0 -19px;
  pointer-events: none;
  filter: drop-shadow(0 6px 12px color-mix(in srgb, var(--berry) 30%, transparent));
}
.ball svg { width: 100%; height: 100%; display: block; }

/* ── cursor cat ───────────────────────────────────────────── */
.cat {
  position: fixed;
  top: 0; left: 0;
  width: 74px; height: 66px;
  z-index: 6;
  padding: 0;
  border: 0;
  background: none;
  /* must never swallow a click meant for a flower or a square */
  pointer-events: none;
  transform: translate(-200px, -200px);
  filter: drop-shadow(0 8px 14px color-mix(in srgb, var(--berry) 26%, transparent));
}
.cat svg { width: 100%; height: 100%; display: block; overflow: visible; }
.cat-tail  { transform-box: fill-box; transform-origin: 8% 90%; animation: wag 2.1s var(--ease) infinite; }
.cat-body  { animation: breathe 3.4s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }
.cat-shut  { opacity: 0; }
.cat.is-happy .cat-eyes { opacity: 0; }
.cat.is-happy .cat-shut { opacity: 1; }
.cat.is-happy { animation: hop .6s var(--spring); }
.cat-purr {
  position: absolute;
  inset: 50% auto auto 50%;
  width: 16px; height: 16px;
  margin: -8px 0 0 -8px;
  border: 2.5px solid var(--floss);
  border-radius: 50%;
  opacity: 0;
}
.cat.is-happy .cat-purr { animation: ring .8s ease-out 2; }
@keyframes wag { 0%,100% { transform: rotate(-13deg); } 50% { transform: rotate(15deg); } }
@keyframes breathe { 0%,100% { transform: scaleY(1); } 50% { transform: scaleY(.94); } }
@keyframes hop { 0%,100% { translate: 0 0; } 40% { translate: 0 -20px; } }
@keyframes ring { from { opacity: .9; scale: .4; } to { opacity: 0; scale: 5; } }

/* ── hud ──────────────────────────────────────────────────── */
.hud {
  position: fixed;
  top: clamp(.7rem, 2vw, 1.4rem);
  right: clamp(.7rem, 2vw, 1.4rem);
  z-index: 8;
  display: flex;
  align-items: center;
  gap: .6rem;
}
.hud-count {
  margin: 0;
  padding: .42rem .78rem;
  border: 1.5px solid color-mix(in srgb, var(--berry) 28%, transparent);
  border-radius: 99px;
  background: color-mix(in srgb, var(--card) 82%, transparent);
  backdrop-filter: blur(8px);
  font: 700 .68rem/1 "Space Mono", ui-monospace, monospace;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--berry);
  white-space: nowrap;
}
.hud-label { opacity: .6; font-weight: 400; }
.hud-slash { opacity: .45; margin: 0 .1em; }
.hud-count b { font-size: .92rem; transition: scale .3s var(--spring); display: inline-block; }
.hud-count.is-bump b { scale: 1.7; }

.lamp {
  width: 38px; height: 38px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1.5px solid color-mix(in srgb, var(--berry) 28%, transparent);
  border-radius: 50%;
  background: color-mix(in srgb, var(--card) 82%, transparent);
  backdrop-filter: blur(8px);
  cursor: pointer;
  transition: rotate .8s var(--spring), background .3s;
}
.lamp:hover { background: var(--rosewater); }
.lamp-face {
  width: 17px; height: 17px;
  border-radius: 50%;
  background: var(--butter);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--butter) 30%, transparent);
  transition: box-shadow .4s, background .4s;
}
[data-theme="night"] .lamp { rotate: 180deg; }
[data-theme="night"] .lamp-face {
  background: var(--rosewater);
  box-shadow: inset -6px 2px 0 0 var(--butter), 0 0 0 3px color-mix(in srgb, var(--butter) 22%, transparent);
}

.toast {
  position: fixed;
  bottom: clamp(1rem, 4vw, 2.5rem);
  left: 50%;
  z-index: 9;
  margin: 0;
  padding: .7rem 1.2rem;
  border-radius: 99px;
  background: var(--plum);
  color: var(--wool);
  font: 400 .84rem/1.3 Karla, sans-serif;
  text-align: center;
  max-width: min(88vw, 30rem);
  translate: -50% 130%;
  opacity: 0;
  pointer-events: none;
  transition: translate .55s var(--spring), opacity .35s;
}
.toast.is-up { translate: -50% 0; opacity: 1; }

/* ── shared type + layout ─────────────────────────────────── */
main {
  position: relative;
  z-index: 2;
  padding-left: var(--strand-w);
}

section {
  position: relative;
  padding: clamp(4.5rem, 11vh, 9rem) var(--gut);
}

.note {
  margin: 0 0 1.1rem;
  font: 400 .7rem/1.5 "Space Mono", ui-monospace, monospace;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--berry) 72%, transparent);
}
.note::before {
  content: "";
  display: inline-block;
  width: 26px; height: 1.5px;
  margin-right: .7rem;
  vertical-align: 4px;
  background: var(--floss);
}

.h2 {
  margin: 0 0 .7rem;
  max-width: 22ch;
  font-family: Fraunces, Georgia, serif;
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 90;
  font-weight: 600;
  font-size: clamp(2.2rem, 6.4vw, 4.4rem);
  line-height: .95;
  letter-spacing: -.02em;
}
.h2 em {
  display: block;
  font-style: normal;
  color: var(--berry);
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 120;
}
.lede {
  margin: 0;
  max-width: 34ch;
  font-size: 1.06em;
  color: color-mix(in srgb, var(--ink) 78%, transparent);
}
.head { margin-bottom: clamp(2.5rem, 6vw, 4rem); }

/* every section knots onto the strand (placed on the path by JS) */
.knot {
  position: absolute;
  top: 0; left: 0;
  z-index: 1;
  width: 15px; height: 15px;
  margin: -7.5px 0 0 -7.5px;
  border: 3.5px solid var(--floss);
  border-radius: 50%;
  background: var(--paper);
  pointer-events: none;
  animation: pulse 3.6s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { scale: 1; } 50% { scale: 1.3; } }

/* ── hero ─────────────────────────────────────────────────── */
.hero {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: clamp(5rem, 14vh, 8rem);
}
.hero-for {
  margin: 0 0 .1rem;
  font-family: Fraunces, serif;
  font-variation-settings: "SOFT" 100, "WONK" 1;
  font-size: clamp(1.1rem, 3vw, 1.7rem);
  font-style: italic;
  color: var(--floss);
  animation: rise .9s var(--spring) both;
}
.hero-title {
  margin: 0 0 1.4rem;
  font-family: Fraunces, Georgia, serif;
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
  font-weight: 700;
  font-size: clamp(3.6rem, 17vw, 12.5rem);
  line-height: .82;
  letter-spacing: -.045em;
  text-transform: lowercase;
}
.line { display: block; }
.line-sm {
  font-size: .42em;
  font-weight: 400;
  font-style: italic;
  letter-spacing: -.01em;
  color: var(--floss);
  padding-left: .18em;
}
.line b {
  display: inline-block;
  transform-origin: 50% 90%;
  animation: rise .8s var(--spring) both;
  animation-delay: calc(var(--i) * .045s);
  will-change: transform;
}
.line b.is-loose { animation: unravel .9s cubic-bezier(.4,0,.7,.3) forwards; animation-delay: calc(var(--i) * .035s); }
.line b.is-back  { animation: restitch .8s var(--spring) forwards; animation-delay: calc(var(--i) * .05s); }
@keyframes rise { from { opacity: 0; transform: translateY(.5em) rotate(6deg); } to { opacity: 1; transform: none; } }
@keyframes unravel {
  to { opacity: 0; transform: translateY(60vh) rotate(var(--spin, 90deg)) scale(.3); }
}
@keyframes restitch {
  from { opacity: 0; transform: translateY(-.6em) rotate(-14deg) scale(.7); }
  to   { opacity: 1; transform: none; }
}

.hero-sub {
  margin: 0 0 2.4rem;
  max-width: 33ch;
  font-size: 1.1em;
  color: color-mix(in srgb, var(--ink) 76%, transparent);
  animation: rise 1s var(--spring) .3s both;
}

.tail {
  display: inline-flex;
  align-items: center;
  gap: .1rem;
  align-self: flex-start;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  animation: rise 1s var(--spring) .45s both;
}
.tail svg { width: 108px; height: 36px; overflow: visible; }
.tail svg path { transition: d .4s var(--ease); }
.tail svg circle { transition: translate .5s var(--spring); }
.tail:hover svg circle { translate: 9px 0; }
.tail-say, .brk-say, .bow-say {
  font: 700 .7rem/1 "Space Mono", monospace;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--berry);
  border-bottom: 1.5px solid currentColor;
  padding-bottom: 2px;
}
.tail.is-spent { opacity: .35; pointer-events: none; }

.hero-hint {
  margin: 3rem 0 0;
  font: 400 .78rem/1 "Space Mono", monospace;
  letter-spacing: .1em;
  color: color-mix(in srgb, var(--ink) 45%, transparent);
}
.wig { display: inline-block; animation: bob 1.6s ease-in-out infinite; }
@keyframes bob { 0%,100% { translate: 0 0; } 50% { translate: 0 6px; } }

/* ── flower patch ─────────────────────────────────────────── */
.patch-bed {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(clamp(7rem, 26vw, 11rem), 1fr));
  gap: clamp(.5rem, 2vw, 1.5rem);
  max-width: 62rem;
  align-items: end;
}
.bud {
  position: relative;
  aspect-ratio: 3 / 4;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  border-radius: 12px;
}
.bud svg { width: 100%; height: 100%; display: block; overflow: visible; }

.bud-stem {
  stroke-dasharray: 140;
  stroke-dashoffset: 140;
  transition: stroke-dashoffset 1.1s var(--ease);
}
.bud.is-in .bud-stem { stroke-dashoffset: 0; }

.bud-leaf {
  transform-box: fill-box;
  transform-origin: 0% 50%;
  scale: 0;
  opacity: 0;
  transition: scale .8s var(--spring) .55s, opacity .5s .55s;
}
.bud.is-in .bud-leaf { scale: 1; opacity: 1; animation: leafsway 4.5s ease-in-out 1.4s infinite; }
@keyframes leafsway { 0%,100% { rotate: 0deg; } 50% { rotate: -8deg; } }

/* the head: closed = petals furled into a point, open = fanned */
.bud-head {
  transform-box: fill-box;
  transform-origin: 50% 88%;
  rotate: -4deg;
  transition: rotate .9s var(--spring);
}
.bud.is-open .bud-head { rotate: 0deg; animation: headsway 5s ease-in-out 1.1s infinite; }
@keyframes headsway { 0%,100% { rotate: -3deg; } 50% { rotate: 3deg; } }

.petal {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transform: rotate(calc(var(--a) * .1)) scale(.52) translateY(6%);
  transition: transform .95s var(--spring);
  transition-delay: calc(var(--d) * 70ms);
}
.bud.is-open .petal { transform: rotate(var(--a)) scale(1); }

.petal-back { opacity: .55; }

.bud-eye {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  scale: 0;
  transition: scale .7s var(--spring) .5s;
}
.bud.is-open .bud-eye { scale: 1; }

.bud-sepal { transition: opacity .5s .2s; }
.bud.is-open .bud-sepal { opacity: 0; }

.bud-glow {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  opacity: 0;
}
.bud.is-open .bud-glow { animation: glowout 1.1s ease-out .1s; }
@keyframes glowout { from { opacity: .7; scale: .2; } to { opacity: 0; scale: 2.4; } }

.bud:not(.is-open):hover .bud-head { rotate: 5deg; scale: 1.06; }
.bud:not(.is-open) .bud-head { animation: nudge 4s ease-in-out infinite; }
@keyframes nudge { 0%,100% { rotate: -4deg; } 50% { rotate: 3deg; } }

.patch-tally {
  margin: 2.4rem 0 0;
  font: 700 .74rem/1 "Space Mono", monospace;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--berry);
}

/* ── granny squares ───────────────────────────────────────── */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: clamp(.6rem, 1.6vw, 1.1rem);
  max-width: 60rem;
  perspective: 1400px;
}
.sq {
  position: relative;
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  transform-style: preserve-3d;
  transition: transform .85s var(--spring);
  border-radius: 16px;
}
.sq:hover { transform: translateY(-6px) rotate(-1.5deg); }
.sq.is-flipped { transform: rotateY(180deg); }
.sq.is-flipped:hover { transform: rotateY(180deg) translateY(-6px); }

.sq-face {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: .5rem;
  padding: 1.1rem;
  border-radius: 16px;
  backface-visibility: hidden;
  text-align: center;
}
.sq-front {
  /* concentric granny-square rounds, drawn in gradient */
  background:
    conic-gradient(from 45deg, var(--c1) 0 25%, var(--c2) 0 50%, var(--c1) 0 75%, var(--c2) 0),
    var(--card);
  box-shadow: inset 0 0 0 7px var(--card), inset 0 0 0 15px var(--c3),
              inset 0 0 0 21px var(--card), 0 10px 24px -12px color-mix(in srgb, var(--berry) 45%, transparent);
}
.sq-icon { width: 46%; margin: 0 auto; display: block; }
.sq-front .sq-num {
  font: 700 .66rem/1 "Space Mono", monospace;
  letter-spacing: .14em;
  color: var(--plum);
  opacity: .5;
}
.sq-back {
  transform: rotateY(180deg);
  background: var(--plum);
  color: var(--wool);
  font-family: Fraunces, serif;
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 20;
  font-size: clamp(.9rem, 2.1vw, 1.1rem);
  line-height: 1.28;
  box-shadow: 0 10px 24px -12px color-mix(in srgb, var(--berry) 55%, transparent);
}
.sq-back::after {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1.5px dashed color-mix(in srgb, var(--floss) 55%, transparent);
  border-radius: 10px;
  pointer-events: none;
}

/* ── smoke break ──────────────────────────────────────────── */
.brk-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
  padding: clamp(2rem, 6vw, 4rem) 1rem 0;
  min-height: 42svh;
  justify-content: flex-end;
  border-bottom: 3px solid color-mix(in srgb, var(--berry) 22%, transparent);
  max-width: 60rem;
}
.brk-light {
  padding: 0; border: 0; background: none; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: .9rem;
}
.brk-light svg { width: clamp(56px, 11vw, 82px); overflow: visible; }
.brk-flame {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  scale: 0;
  opacity: 0;
  transition: scale .4s var(--spring), opacity .3s;
}
.brk-light.is-lit .brk-flame {
  opacity: 1;
  animation: flicker .45s ease-in-out infinite alternate;
  filter: drop-shadow(0 0 14px var(--butter));
}
@keyframes flicker {
  from { scale: 1 .9; rotate: -4deg; }
  to   { scale: 1.08 1.12; rotate: 5deg; }
}
.brk-light:hover svg { translate: 0 -5px; transition: translate .4s var(--spring); }
.brk-cap {
  margin: 0;
  font: 400 .78rem/1.5 "Space Mono", monospace;
  letter-spacing: .06em;
  color: color-mix(in srgb, var(--ink) 50%, transparent);
  text-align: center;
}

/* cloud cats that drift up out of the smoke */
.puff {
  position: absolute;
  bottom: 22%;
  z-index: 4;
  pointer-events: none;
  width: 78px;
  opacity: 0;
  animation: puffup 7s linear forwards;
}
.puff svg { width: 100%; display: block; }
@keyframes puffup {
  0%   { opacity: 0; translate: 0 0; scale: .3; }
  14%  { opacity: .9; }
  70%  { opacity: .7; }
  100% { opacity: 0; translate: var(--dx, 40px) -68svh; scale: 1.5; }
}

/* ── finale ───────────────────────────────────────────────── */
.finale {
  min-height: 88svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.finale-title {
  margin: .4rem 0 1rem;
  font-family: Fraunces, Georgia, serif;
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
  font-weight: 700;
  font-size: clamp(3rem, 15vw, 9rem);
  line-height: .85;
  letter-spacing: -.04em;
  color: var(--berry);
}
.finale-body {
  margin: 0 0 3rem;
  max-width: 36ch;
  font-size: 1.08em;
  color: color-mix(in srgb, var(--ink) 80%, transparent);
}
.bow {
  padding: 0; border: 0; background: none; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 1rem;
}
.bow svg { width: clamp(150px, 30vw, 240px); overflow: visible; }
.bow-l, .bow-r {
  transform-box: fill-box;
  transform-origin: 100% 50%;
  scale: 0 .4;
  transition: scale .9s var(--spring);
}
.bow-r { transform-origin: 0% 50%; transition-delay: .1s; }
.bow-knot { transform-box: fill-box; transform-origin: 50% 50%; scale: 0; transition: scale .6s var(--spring) .35s; }
.bow-tl, .bow-tr { stroke-dasharray: 60; stroke-dashoffset: 60; transition: stroke-dashoffset .8s var(--ease) .4s; }
.bow.is-tied .bow-l, .bow.is-tied .bow-r { scale: 1; }
.bow.is-tied .bow-knot { scale: 1; }
.bow.is-tied .bow-tl, .bow.is-tied .bow-tr { stroke-dashoffset: 0; }
.bow.is-tied svg { animation: wobble 3.5s ease-in-out 1s infinite; }
@keyframes wobble { 0%,100% { rotate: -2deg; } 50% { rotate: 2deg; } }
.bow:hover svg { scale: 1.05; transition: scale .4s var(--spring); }

.sig {
  margin: clamp(4rem, 10vw, 7rem) 0 0;
  font: 400 .72rem/1.6 "Space Mono", monospace;
  letter-spacing: .1em;
  color: color-mix(in srgb, var(--ink) 42%, transparent);
}

/* raining cats */
.rain {
  position: fixed;
  top: -80px;
  z-index: 5;
  width: 42px;
  pointer-events: none;
  animation: fall linear forwards;
}
.rain svg { width: 100%; display: block; }
@keyframes fall {
  from { translate: 0 0; rotate: 0deg; }
  to   { translate: var(--dx, 0) 112svh; rotate: var(--rot, 360deg); }
}

/* ── chain-stitch scroll progress ─────────────────────────── */
.chain {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 9;
  height: 14px;
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 0 4px;
  pointer-events: none;
}
.chain i {
  flex: 1;
  height: 8px;
  border-radius: 50% / 60%;
  background: color-mix(in srgb, var(--floss) 18%, transparent);
  transform: scaleY(.5);
  transition: background .3s, transform .3s var(--spring);
}
.chain i.on {
  background: var(--floss);
  transform: scaleY(1) rotate(var(--tw, 0deg));
  box-shadow: 0 0 8px color-mix(in srgb, var(--floss) 55%, transparent);
}

/* ── drifting background motifs ───────────────────────────── */
.drift {
  position: fixed; inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}
.drift span {
  position: absolute;
  display: block;
  opacity: .16;
  animation: driftup linear infinite;
}
.drift svg { width: 100%; display: block; }
@keyframes driftup {
  from { transform: translateY(108svh) rotate(0deg); }
  to   { transform: translateY(-25svh) rotate(var(--spin, 200deg)); }
}

/* ── the ledger ───────────────────────────────────────────── */
.ledger {
  position: fixed;
  top: calc(clamp(.7rem, 2vw, 1.4rem) + 46px);
  right: clamp(.7rem, 2vw, 1.4rem);
  z-index: 9;
  width: min(19rem, calc(100vw - 1.4rem));
  padding: 1rem 1.1rem 1.1rem;
  border: 2px solid var(--floss);
  border-radius: 18px;
  background: var(--card);
  box-shadow: 0 22px 44px -18px color-mix(in srgb, var(--berry) 55%, transparent);
  animation: popin .4s var(--spring);
}
.ledger[hidden] { display: none; }
@keyframes popin { from { opacity: 0; transform: translateY(-10px) scale(.94); } }
.ledger-top, .ledger-foot {
  margin: 0;
  font: 700 .64rem/1 "Space Mono", monospace;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--berry);
}
.ledger-foot { margin-top: .8rem; opacity: .5; font-weight: 400; }
.ledger-list {
  margin: .8rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: .34rem;
}
.ledger-list li {
  display: flex;
  align-items: center;
  gap: .55rem;
  font: 400 .8rem/1.3 Karla, sans-serif;
  color: color-mix(in srgb, var(--ink) 40%, transparent);
}
.ledger-list li::before {
  content: "";
  width: 13px; height: 13px;
  flex: none;
  border: 2px solid color-mix(in srgb, var(--floss) 45%, transparent);
  border-radius: 50%;
}
.ledger-list li.got { color: var(--ink); font-weight: 600; }
.ledger-list li.got::before {
  border-color: var(--floss);
  background: var(--floss) radial-gradient(circle at 50% 50%, var(--card) 0 2px, transparent 2.5px);
  animation: pop .45s var(--spring);
}
@keyframes pop { from { scale: 0; } 60% { scale: 1.4; } }

.hud-count { cursor: pointer; font-family: "Space Mono", monospace; }
.hud-count:hover { background: var(--rosewater); }

/* ── pattern marquee ──────────────────────────────────────── */
.band {
  position: relative;
  z-index: 2;
  overflow: hidden;
  padding: .85rem 0;
  border-block: 2px solid color-mix(in srgb, var(--berry) 18%, transparent);
  background: color-mix(in srgb, var(--floss) 9%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.band-run {
  display: flex;
  width: max-content;
  animation: roll 34s linear infinite;
}
.band-run span {
  padding-right: 1.4rem;
  font: 400 .78rem/1 "Space Mono", monospace;
  letter-spacing: .2em;
  text-transform: uppercase;
  white-space: nowrap;
  color: color-mix(in srgb, var(--berry) 70%, transparent);
}
@keyframes roll { to { transform: translateX(-50%); } }

/* ── scroll reveals ───────────────────────────────────────── */
.rv { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .9s var(--spring); }
.rv.vis { opacity: 1; transform: none; }
.rv2 { transition-delay: .1s; }
.rv3 { transition-delay: .2s; }

/* ── cat nap ──────────────────────────────────────────────── */
.cat.is-asleep .cat-eyes { opacity: 0; }
.cat.is-asleep .cat-shut { opacity: 1; }
.cat.is-asleep .cat-tail { animation-duration: 5s; }
.cat.is-asleep .cat-body { animation-duration: 5s; }
.zzz {
  position: fixed;
  z-index: 6;
  pointer-events: none;
  font: 700 1rem/1 "Space Mono", monospace;
  color: var(--floss);
  animation: zzz 2.6s ease-out forwards;
}
@keyframes zzz {
  from { opacity: 0; transform: translate(0, 0) scale(.6) rotate(-8deg); }
  25%  { opacity: .95; }
  to   { opacity: 0; transform: translate(26px, -60px) scale(1.5) rotate(14deg); }
}

/* the footer cat, inflated */
.mini {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font: inherit;
  color: inherit;
  white-space: nowrap;
  transition: scale .7s var(--spring);
  transform-origin: 50% 100%;
}
.mini svg { width: 15px; vertical-align: -3px; margin-right: .35rem; transition: scale .8s var(--spring); transform-origin: 50% 100%; }
.mini.is-big svg { scale: 9; }
.mini:hover svg { scale: 1.5; }

#strandHit { cursor: pointer; pointer-events: stroke; }
.strand.is-twang #strandPath { animation: twang .7s ease-out; }
@keyframes twang {
  0%   { transform: translateX(0); }
  20%  { transform: translateX(11px); }
  40%  { transform: translateX(-8px); }
  60%  { transform: translateX(5px); }
  80%  { transform: translateX(-3px); }
  100% { transform: translateX(0); }
}

/* stitches embroidered by holding down */
.stitch {
  position: fixed;
  z-index: 5;
  width: 16px; height: 9px;
  border-radius: 50% / 60%;
  background: var(--floss);
  pointer-events: none;
  animation: stitchin .5s var(--spring) forwards, fadeout 2.4s 1.6s forwards;
}
@keyframes stitchin { from { scale: 0; rotate: -30deg; } }
@keyframes fadeout { to { opacity: 0; } }

/* her name, thrown across the screen */
.bigname {
  position: fixed;
  top: 50%;
  z-index: 7;
  pointer-events: none;
  font-family: Fraunces, Georgia, serif;
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
  font-weight: 900;
  font-size: clamp(5rem, 19vw, 15rem);
  line-height: 1;
  color: var(--floss);
  text-shadow: 0 0 60px color-mix(in srgb, var(--floss) 55%, transparent);
  animation: bigname 2.6s var(--spring) forwards;
}
@keyframes bigname {
  0%   { opacity: 0; transform: translateY(-50%) scale(.2) rotate(-24deg); }
  30%  { opacity: 1; transform: translateY(-50%) scale(1.08) rotate(4deg); }
  70%  { opacity: 1; transform: translateY(-50%) scale(1) rotate(-2deg); }
  100% { opacity: 0; transform: translateY(-58%) scale(1.3) rotate(6deg); }
}

/* ── focus + motion ───────────────────────────────────────── */
:focus-visible {
  outline: 3px solid var(--berry);
  outline-offset: 4px;
  border-radius: 6px;
}

@media (max-width: 700px) {
  :root { --strand-w: 44px; }
  .strand { opacity: .5; }
  .ball { scale: .7; }
  .cat { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .12s !important;
  }
  .petal, .bud-head, .bud-eye, .sq { transition-duration: .3s !important; }
}