:root {
  /* Compliance font tokens from DESIGN.md: Space Grotesk* Grotesk** compact tags */
  --aurora-mint: #8EF6D4;
  --dojo-peach: #FFC6A8;
  --belt-lavender: #C9B6FF;
  --friendly-lemon: #FFF176;
  --neon-coral: #FF6B9A;
  --sky-blue-mat: #8BD3FF;
  --ink-outline: #111111;
  --warm-paper: #FFF7E8;
  --display-font: "Anybody", Impact, "Arial Black", system-ui, sans-serif;
  --body-font: "Nunito Sans", ui-rounded, system-ui, -apple-system, sans-serif;
  --accent-font: "Space Grotesk", ui-monospace, system-ui, sans-serif;
  --fluid-title: clamp(4.4rem, 13vw, 13rem);
  --fluid-heading: clamp(3.2rem, 9vw, 9.5rem);
  --fluid-body: clamp(1.1rem, 1.9vw, 1.65rem);
  --wdth: 98;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--ink-outline);
  background:
    radial-gradient(circle at 14% 8%, rgba(255, 241, 118, 0.72), transparent 23rem),
    radial-gradient(circle at 86% 18%, rgba(201, 182, 255, 0.74), transparent 27rem),
    linear-gradient(135deg, var(--warm-paper) 0%, #fff0d9 42%, #eafff8 100%);
  font-family: var(--body-font);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -3;
  background-image:
    linear-gradient(45deg, rgba(17,17,17,0.08) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(17,17,17,0.06) 25%, transparent 25%);
  background-size: 5rem 5rem;
  opacity: .36;
}

.aurora-field {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  overflow: hidden;
}

.aurora {
  position: absolute;
  width: 95vw;
  height: 7.5rem;
  border: .25rem solid var(--ink-outline);
  border-radius: 999rem;
  filter: drop-shadow(0 0 1rem rgba(142, 246, 212, .78)) drop-shadow(0 0 2.4rem rgba(255, 107, 154, .42));
  opacity: .72;
  transform-origin: center;
  animation: auroraDrift 18s ease-in-out infinite alternate;
}

.ribbon-one { top: 10%; left: -20%; background: linear-gradient(90deg, var(--aurora-mint), var(--sky-blue-mat), var(--belt-lavender)); transform: rotate(-12deg); }
.ribbon-two { top: 45%; right: -24%; background: linear-gradient(90deg, var(--friendly-lemon), var(--dojo-peach), var(--neon-coral)); transform: rotate(17deg); animation-duration: 22s; }
.ribbon-three { bottom: 5%; left: 6%; background: linear-gradient(90deg, var(--sky-blue-mat), var(--aurora-mint), var(--friendly-lemon)); transform: rotate(-5deg); animation-duration: 26s; }

.belt-tabs {
  position: fixed;
  top: clamp(.6rem, 2vw, 1.4rem);
  left: clamp(.6rem, 3vw, 2.5rem);
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  max-width: min(55rem, calc(100vw - 1rem));
}

.belt-tab {
  display: inline-block;
  padding: .65rem .9rem .55rem;
  border: .2rem solid var(--ink-outline);
  box-shadow: .25rem .25rem 0 var(--ink-outline);
  color: var(--ink-outline);
  text-decoration: none;
  font-family: var(--accent-font);
  font-weight: 700;
  font-size: clamp(.72rem, 1.2vw, .95rem);
  text-transform: uppercase;
  letter-spacing: .035em;
  transform: rotate(var(--tab-tilt, -2deg));
  transition: transform .24s cubic-bezier(.3, 1.7, .4, 1), box-shadow .2s ease;
  animation: tabBounce .7s cubic-bezier(.24, 1.6, .38, 1) both;
}

.belt-tab:nth-child(2) { --tab-tilt: 2.5deg; animation-delay: .08s; }
.belt-tab:nth-child(3) { --tab-tilt: -4deg; animation-delay: .16s; }
.belt-tab:nth-child(4) { --tab-tilt: 3deg; animation-delay: .24s; }
.belt-tab:nth-child(5) { --tab-tilt: -1deg; animation-delay: .32s; }
.belt-tab:hover, .belt-tab.is-active { transform: rotate(calc(var(--tab-tilt, -2deg) * -1)) translateY(-.28rem) scale(1.06); box-shadow: .42rem .42rem 0 var(--ink-outline), 0 0 1.1rem currentColor; }
.tab-mint { background: var(--aurora-mint); }
.tab-peach { background: var(--dojo-peach); }
.tab-lemon { background: var(--friendly-lemon); }
.tab-coral { background: var(--neon-coral); }
.tab-lavender { background: var(--belt-lavender); }

.quest-path { position: relative; }
.chapter {
  min-height: 100vh;
  position: relative;
  display: grid;
  align-items: center;
  padding: clamp(6rem, 10vw, 10rem) clamp(1rem, 5vw, 5rem) clamp(3rem, 7vw, 7rem);
  overflow: hidden;
}

.chapter::after {
  content: attr(data-chapter);
  position: absolute;
  right: clamp(1rem, 3vw, 3rem);
  bottom: clamp(1rem, 3vw, 3rem);
  font-family: var(--display-font);
  font-size: clamp(5rem, 15vw, 15rem);
  font-weight: 900;
  font-variation-settings: "wdth" 125;
  color: transparent;
  -webkit-text-stroke: .18rem rgba(17,17,17,.18);
}

.bounce-panel {
  opacity: 0;
  transform: translateY(4rem) rotate(-4deg) scale(.86, 1.06);
}
.bounce-panel.in-view { animation: bounceEnter .9s cubic-bezier(.25, 1.8, .35, 1) forwards; }

.title-frame, .chapter-card {
  position: relative;
  border: clamp(.22rem, .55vw, .45rem) solid var(--ink-outline);
  background: rgba(255, 247, 232, .92);
  box-shadow: clamp(.7rem, 1.5vw, 1.2rem) clamp(.7rem, 1.5vw, 1.2rem) 0 var(--ink-outline);
  padding: clamp(1.2rem, 4vw, 3.2rem);
}

.title-frame { width: min(64rem, 92vw); margin-left: clamp(0rem, 5vw, 4rem); transform: rotate(-2deg); }
.title-frame::before, .chapter-card::before {
  content: "";
  position: absolute;
  inset: -.8rem auto auto 9%;
  width: 8rem;
  height: 1.25rem;
  border: .18rem solid var(--ink-outline);
  background: var(--friendly-lemon);
  transform: rotate(-5deg);
}

.rank-tag {
  margin: 0 0 .6rem;
  font-family: var(--accent-font);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: clamp(.8rem, 1.35vw, 1.05rem);
}

.quest-title, h2 {
  margin: 0;
  font-family: var(--display-font);
  font-weight: 900;
  line-height: .82;
  letter-spacing: -.07em;
  font-variation-settings: "wdth" var(--wdth);
  text-transform: lowercase;
}

.quest-title { font-size: var(--fluid-title); max-width: 11ch; }
h2 { font-size: var(--fluid-heading); max-width: 8ch; }
.stretch-word { transition: font-variation-settings .35s cubic-bezier(.35, 1.8, .45, 1), letter-spacing .35s ease; }
.stretch-word:hover { font-variation-settings: "wdth" 125; letter-spacing: -.03em; }

.poem-line {
  max-width: 42rem;
  margin: 1.1rem 0 0;
  font-size: var(--fluid-body);
  line-height: 1.22;
  font-weight: 800;
}

.quest-stamp {
  margin-top: 1.35rem;
  padding: .9rem 1.25rem .75rem;
  border: .25rem solid var(--ink-outline);
  background: var(--neon-coral);
  box-shadow: .45rem .45rem 0 var(--aurora-mint);
  font-family: var(--accent-font);
  font-weight: 700;
  text-transform: uppercase;
  cursor: pointer;
  transform: rotate(-4deg);
  transition: transform .2s cubic-bezier(.3, 1.8, .4, 1), box-shadow .2s ease;
}
.quest-stamp:hover, .quest-stamp.is-stamped { transform: rotate(3deg) scale(1.08); box-shadow: .65rem .65rem 0 var(--friendly-lemon), 0 0 1.4rem var(--neon-coral); }

.opening-mats .mat, .mat-stack { position: absolute; inset: 0; pointer-events: none; }
.slab { position: absolute; border: .35rem solid var(--ink-outline); box-shadow: .7rem .7rem 0 var(--ink-outline); animation: matSlide .95s cubic-bezier(.3, 1.7, .35, 1) both; }
.slab.sky { width: 34vw; height: 20vh; background: var(--sky-blue-mat); right: 8vw; top: 18vh; transform: rotate(8deg); }
.slab.peach { width: 28vw; height: 33vh; background: var(--dojo-peach); left: -4vw; bottom: 11vh; transform: rotate(-11deg); animation-delay: .12s; }
.slab.mint { width: 18vw; height: 18vh; background: var(--aurora-mint); right: 25vw; bottom: 7vh; transform: rotate(-5deg); animation-delay: .2s; }

.belt-knot { position: absolute; right: 4vw; top: 33vh; width: clamp(10rem, 24vw, 22rem); height: clamp(10rem, 24vw, 22rem); filter: drop-shadow(0 0 1.5rem rgba(142,246,212,.8)); animation: slowBob 5s ease-in-out infinite; }
.belt-knot span { position: absolute; inset: 38% 0 auto; height: 22%; border: .28rem solid var(--ink-outline); border-radius: 999rem; background: linear-gradient(90deg, var(--aurora-mint), var(--belt-lavender), var(--neon-coral)); }
.belt-knot span:nth-child(2) { transform: rotate(58deg); }
.belt-knot span:nth-child(3) { transform: rotate(-58deg); }

.balance-chapter { grid-template-columns: minmax(18rem, 1fr) minmax(18rem, .85fr); gap: 3rem; }
.left-heavy { max-width: 44rem; background: var(--sky-blue-mat); transform: rotate(2deg); }
.balance-platform { position: relative; min-height: 35rem; transform: rotate(-7deg); }
.platform { position: absolute; display: grid; place-items: center; border: .35rem solid var(--ink-outline); box-shadow: .8rem .8rem 0 var(--ink-outline); font-family: var(--display-font); font-size: clamp(1.7rem, 4vw, 4.4rem); font-weight: 900; font-variation-settings: "wdth" 115; }
.p1 { inset: 3rem 8% auto 7%; height: 9rem; background: var(--friendly-lemon); }
.p2 { inset: 11rem 0 auto 18%; height: 10rem; background: var(--belt-lavender); }
.p3 { inset: 20rem 12% auto 0; height: 9rem; background: var(--aurora-mint); }
.glow-star { position: absolute; width: 5.2rem; height: 5.2rem; right: 20%; top: 2rem; background: var(--neon-coral); clip-path: polygon(50% 0, 62% 34%, 98% 35%, 69% 56%, 79% 91%, 50% 70%, 21% 91%, 31% 56%, 2% 35%, 38% 34%); filter: drop-shadow(0 0 1.1rem var(--neon-coral)); animation: starBounce 1.7s ease-in-out infinite; }
.balance-platform.is-steady .glow-star { animation-duration: .75s; filter: drop-shadow(0 0 1.7rem var(--friendly-lemon)); }
.note-strip { position: absolute; right: 3vw; bottom: 13vh; width: 14rem; padding: .8rem; border: .22rem solid var(--ink-outline); background: var(--dojo-peach); box-shadow: .4rem .4rem 0 var(--ink-outline); font-family: var(--accent-font); font-weight: 700; transform: rotate(8deg); }

.rhythm-chapter { grid-template-columns: 1.05fr .95fr; gap: 3rem; }
.right-float { justify-self: end; background: var(--dojo-peach); transform: rotate(-2deg); }
.footwork-lane { position: relative; min-height: 36rem; border: .35rem solid var(--ink-outline); background: linear-gradient(135deg, var(--sky-blue-mat), var(--warm-paper)); box-shadow: .9rem .9rem 0 var(--neon-coral); transform: rotate(-4deg); }
.foot { position: absolute; width: 4.1rem; height: 7rem; border: .22rem solid var(--ink-outline); background: var(--aurora-mint); border-radius: 55% 55% 44% 44%; box-shadow: 0 0 1.2rem var(--aurora-mint); opacity: .78; transform: rotate(var(--r)); transition: transform .24s ease, background .24s ease, opacity .24s ease; }
.foot::before { content: ""; position: absolute; top: .6rem; left: 50%; width: 1rem; height: 1rem; border-radius: 50%; background: var(--ink-outline); transform: translateX(-50%); }
.f1 { --r: 18deg; left: 12%; top: 10%; } .f2 { --r: -12deg; left: 32%; top: 27%; } .f3 { --r: 24deg; left: 48%; top: 45%; } .f4 { --r: -20deg; left: 65%; top: 58%; } .f5 { --r: 16deg; left: 78%; top: 30%; }
.foot.is-lit { background: var(--friendly-lemon); opacity: 1; transform: rotate(var(--r)) scale(1.18); box-shadow: 0 0 2rem var(--friendly-lemon); }
.motion-arc { position: absolute; border: .35rem solid transparent; border-top-color: var(--neon-coral); border-left-color: var(--aurora-mint); border-radius: 50%; filter: drop-shadow(0 0 .9rem var(--aurora-mint)); }
.arc-a { width: 42%; height: 42%; left: 18%; top: 20%; transform: rotate(20deg); }
.arc-b { width: 34%; height: 34%; right: 6%; bottom: 12%; transform: rotate(-36deg); }
.rhythm-wall { position: absolute; right: 4vw; bottom: 8vh; display: grid; gap: .8rem; transform: rotate(5deg); }
.beat-pad { border: .22rem solid var(--ink-outline); background: var(--belt-lavender); box-shadow: .35rem .35rem 0 var(--ink-outline); padding: .8rem 1.4rem; font-family: var(--accent-font); font-weight: 700; text-transform: uppercase; cursor: pointer; transition: transform .18s ease, background .18s ease; }
.beat-pad:hover, .beat-pad.is-hit { transform: translate(-.2rem, -.2rem) scale(1.08); background: var(--friendly-lemon); }

.power-chapter { grid-template-columns: .8fr 1.2fr; gap: 3rem; }
.shield-speech { position: relative; justify-self: center; width: clamp(18rem, 36vw, 34rem); aspect-ratio: 1.05; border: .4rem solid var(--ink-outline); border-radius: 34% 42% 28% 46%; background: var(--aurora-mint); box-shadow: 1rem 1rem 0 var(--belt-lavender), 0 0 2rem rgba(142,246,212,.9); display: grid; place-items: center; transform: rotate(-9deg); cursor: pointer; }
.shield-speech strong { font-family: var(--display-font); font-size: clamp(3.4rem, 8vw, 8rem); line-height: .78; font-weight: 900; font-variation-settings: "wdth" 120; text-align: center; }
.shield-speech.is-kind { animation: shieldPop .6s cubic-bezier(.25, 1.8, .35, 1); }
.burst { position: absolute; width: 9rem; height: 9rem; background: var(--friendly-lemon); border: .25rem solid var(--ink-outline); clip-path: polygon(50% 0, 60% 33%, 95% 18%, 76% 50%, 100% 72%, 63% 68%, 50% 100%, 37% 68%, 0 72%, 24% 50%, 5% 18%, 40% 33%); z-index: -1; }
.burst-one { left: -3rem; top: 2rem; } .burst-two { right: -2rem; bottom: 1rem; background: var(--neon-coral); }
.power-copy { background: var(--friendly-lemon); transform: rotate(2deg); }
.patch-cloud { position: absolute; left: 8vw; bottom: 7vh; display: flex; gap: .7rem; flex-wrap: wrap; max-width: 26rem; }
.patch-cloud span { padding: .7rem .9rem; border: .2rem solid var(--ink-outline); background: var(--warm-paper); box-shadow: .3rem .3rem 0 var(--ink-outline); font-family: var(--accent-font); font-weight: 700; transform: rotate(var(--patch-tilt, -5deg)); }
.patch-cloud span:nth-child(2) { --patch-tilt: 4deg; background: var(--dojo-peach); } .patch-cloud span:nth-child(3) { --patch-tilt: -2deg; background: var(--sky-blue-mat); }

.bowout-chapter { place-items: center; }
.bow-card { max-width: 56rem; background: var(--belt-lavender); transform: rotate(-1deg); text-align: left; }
.quiet-sky { position: absolute; inset: 0; }
.moon-mat { position: absolute; width: clamp(18rem, 45vw, 40rem); aspect-ratio: 1; border: .36rem solid var(--ink-outline); border-radius: 50%; background: radial-gradient(circle, var(--friendly-lemon) 0 36%, var(--sky-blue-mat) 37% 62%, var(--aurora-mint) 63%); box-shadow: 1rem 1rem 0 var(--ink-outline); left: 7vw; top: 20vh; opacity: .9; }
.charm { position: absolute; padding: .75rem 1rem; border: .22rem solid var(--ink-outline); background: var(--warm-paper); box-shadow: .35rem .35rem 0 var(--ink-outline); font-family: var(--accent-font); font-weight: 700; animation: slowBob 4s ease-in-out infinite; }
.c1 { right: 18vw; top: 20vh; background: var(--neon-coral); transform: rotate(10deg); } .c2 { left: 16vw; bottom: 17vh; background: var(--aurora-mint); animation-delay: .8s; } .c3 { right: 10vw; bottom: 25vh; background: var(--dojo-peach); animation-delay: 1.4s; }

@keyframes auroraDrift { from { translate: -4vw -1vh; scale: 1; } to { translate: 8vw 3vh; scale: 1.05 .92; } }
@keyframes tabBounce { 0% { transform: translateY(-4rem) rotate(18deg) scale(.75, 1.25); } 70% { transform: translateY(.35rem) rotate(var(--tab-tilt, -2deg)) scale(1.08, .92); } 100% { transform: translateY(0) rotate(var(--tab-tilt, -2deg)) scale(1); } }
@keyframes bounceEnter { 0% { opacity: 0; transform: translateY(4rem) rotate(-5deg) scale(.85, 1.12); } 58% { opacity: 1; transform: translateY(-.8rem) rotate(2deg) scale(1.06, .94); } 100% { opacity: 1; transform: translateY(0) rotate(var(--final-tilt, 0deg)) scale(1); } }
@keyframes matSlide { from { opacity: 0; translate: var(--slide-x, -8vw) var(--slide-y, 6vh); scale: .8 1.15; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes slowBob { 0%,100% { translate: 0 0; } 50% { translate: 0 -1rem; } }
@keyframes starBounce { 0%,100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(1.8rem) rotate(18deg); } }
@keyframes shieldPop { 0% { transform: rotate(-9deg) scale(1); } 45% { transform: rotate(5deg) scale(1.12, .9); } 100% { transform: rotate(-9deg) scale(1); } }

@media (max-width: 820px) {
  .chapter, .balance-chapter, .rhythm-chapter, .power-chapter { grid-template-columns: 1fr; }
  .belt-tabs { position: absolute; }
  .title-frame { margin-left: 0; }
  .belt-knot { opacity: .5; right: -5rem; }
  .balance-platform, .footwork-lane { min-height: 28rem; }
  .rhythm-wall, .note-strip, .patch-cloud { position: relative; right: auto; bottom: auto; left: auto; margin-top: 1rem; }
}