:root {
  /* Design compliance: IBM Plex Mono` only for tiny batch numbers. Interprets “candygirl” as a quiet confectionery ritual instead of a bright candy shop. */
  --rice: #F7EFE1;
  --maple: #B47A46;
  --caramel: #7A3F24;
  --honey: #E8B866;
  --fig: #5A3A35;
  --milk: #DCC7AA;
  --brass: #C89B4F;
  --rose: #F3D8CF;
  --ink: #211A16;
  --blur: 22px;
  --radius: 34px;
  --depth: 0 32px 90px rgba(33, 26, 22, .18);
  --progress: 0;
  --ribbon-color: #C89B4F;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--ink);
  background: var(--rice);
  font-family: "Noto Sans JP", "Inter", system-ui, sans-serif;
  overflow-x: hidden;
}

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 20;
  opacity: .22;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(122, 63, 36, .12) 0 1px, transparent 1.5px),
    radial-gradient(circle at 70% 60%, rgba(200, 155, 79, .14) 0 1px, transparent 1.5px),
    linear-gradient(115deg, transparent 0 48%, rgba(247, 239, 225, .35) 49% 51%, transparent 52%);
  background-size: 42px 42px, 58px 58px, 100% 100%;
  mix-blend-mode: multiply;
}

.site-mark {
  position: fixed;
  top: 28px;
  left: 32px;
  z-index: 30;
  display: grid;
  gap: 5px;
  color: var(--ink);
  letter-spacing: .18em;
  text-transform: uppercase;
}

.site-mark .jp {
  font-size: 10px;
  font-weight: 400;
}

.site-mark .domain {
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
}

.progress-ribbon {
  position: fixed;
  left: 0;
  top: 0;
  width: calc(var(--progress) * 100%);
  height: 3px;
  z-index: 40;
  background: linear-gradient(90deg, var(--brass), var(--ribbon-color), var(--caramel));
  box-shadow: 0 0 18px rgba(232, 184, 102, .45);
}

.tasting-scroll { position: relative; }

.chapter {
  min-height: 112vh;
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(circle at 79% 20%, rgba(232, 184, 102, .34), transparent 28%),
    radial-gradient(circle at 19% 76%, rgba(243, 216, 207, .42), transparent 26%),
    linear-gradient(135deg, var(--rice), var(--milk) 56%, rgba(180, 122, 70, .4));
}

.chapter-two {
  background:
    radial-gradient(circle at 76% 18%, rgba(247, 239, 225, .42), transparent 27%),
    radial-gradient(circle at 23% 73%, rgba(122, 63, 36, .18), transparent 28%),
    linear-gradient(135deg, #F7EFE1, #E8B866 52%, #B47A46);
}

.chapter-three {
  background:
    radial-gradient(circle at 77% 18%, rgba(243, 216, 207, .38), transparent 28%),
    radial-gradient(circle at 20% 78%, rgba(180, 122, 70, .22), transparent 28%),
    linear-gradient(135deg, #F7EFE1, #DCC7AA 56%, #B47A46);
}

.chapter-four {
  background:
    radial-gradient(circle at 77% 19%, rgba(232, 184, 102, .3), transparent 27%),
    radial-gradient(circle at 18% 75%, rgba(90, 58, 53, .12), transparent 27%),
    linear-gradient(135deg, #F7EFE1, #F3D8CF 50%, #DCC7AA);
}

.chapter-five {
  color: var(--rice);
  background:
    radial-gradient(circle at 76% 19%, rgba(200, 155, 79, .32), transparent 26%),
    radial-gradient(circle at 20% 78%, rgba(243, 216, 207, .18), transparent 28%),
    linear-gradient(135deg, #7A3F24, #5A3A35 54%, #211A16);
}

.scene {
  position: sticky;
  top: 0;
  min-height: 100vh;
  overflow: hidden;
  padding: clamp(28px, 5vw, 68px);
}

.scene::before {
  content: "";
  position: absolute;
  inset: 10vh 7vw 12vh 9vw;
  border: 1px solid rgba(122, 63, 36, .12);
  border-radius: 42px;
  transform: rotate(-1deg);
  background: linear-gradient(90deg, rgba(247, 239, 225, .14), transparent 38%, rgba(180, 122, 70, .08));
}

.chapter-five .scene::before { border-color: rgba(247, 239, 225, .16); }

.chapter-label {
  position: absolute;
  top: clamp(76px, 11vh, 114px);
  left: clamp(34px, 7vw, 92px);
  z-index: 8;
  display: grid;
  gap: 6px;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.chapter-label span,
.chapter-label em {
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  font-style: normal;
  opacity: .68;
}

.chapter-label strong {
  font-weight: 400;
  font-size: 12px;
}

.tiny-label {
  position: absolute;
  right: clamp(40px, 18vw, 250px);
  top: clamp(90px, 14vh, 142px);
  z-index: 8;
  margin: 0;
  padding: 9px 16px;
  border-radius: 999px;
  background: rgba(247, 239, 225, .38);
  border: 1px solid rgba(247, 239, 225, .42);
  box-shadow: 0 16px 42px rgba(33, 26, 22, .08);
  font-size: 11px;
  letter-spacing: .22em;
  backdrop-filter: blur(12px);
  transform: rotate(1.2deg);
}

.phrase {
  position: absolute;
  z-index: 8;
  left: clamp(36px, 8vw, 112px);
  bottom: clamp(54px, 11vh, 112px);
  margin: 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(68px, 11vw, 164px);
  line-height: .78;
  font-weight: 300;
  letter-spacing: -.055em;
  color: currentColor;
  text-shadow: 0 14px 34px rgba(33, 26, 22, .11);
}

.phrase i {
  color: var(--caramel);
  font-weight: 300;
}

.chapter-five .phrase i { color: var(--honey); }

.z-thread {
  position: absolute;
  inset: 13vh 7vw 12vh 6vw;
  z-index: 3;
  opacity: .62;
  filter: drop-shadow(0 12px 14px rgba(122, 63, 36, .12));
}

.z-thread path {
  fill: none;
  stroke: var(--ribbon-color);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-dasharray: 7 13;
}

.final-thread path {
  stroke-width: 7;
  stroke-dasharray: none;
  opacity: .55;
}

.drawer-card {
  position: absolute;
  z-index: 7;
  right: clamp(28px, 7vw, 92px);
  top: clamp(112px, 17vh, 170px);
  width: min(430px, 38vw);
  min-height: 440px;
  border-radius: var(--radius);
  padding: 34px;
  color: var(--ink);
  background:
    linear-gradient(135deg, rgba(247, 239, 225, .58), rgba(243, 216, 207, .25)),
    linear-gradient(180deg, rgba(255,255,255,.26), rgba(232,184,102,.12));
  border: 1px solid rgba(247, 239, 225, .62);
  box-shadow: var(--depth), inset 0 1px 0 rgba(255,255,255,.48);
  backdrop-filter: blur(var(--blur));
  transform: translate3d(var(--slide-x, 0), var(--slide-y, 0), 0) scale(.92);
  filter: blur(10px);
  opacity: .78;
  transition: transform 1100ms cubic-bezier(.16, 1, .3, 1), filter 1100ms cubic-bezier(.16, 1, .3, 1), opacity 900ms ease;
}

.chapter.active .drawer-card {
  transform: translate3d(var(--slide-x, 0), var(--slide-y, 0), 0) scale(1);
  filter: blur(0);
  opacity: 1;
}

.drawer-card::before,
.drawer-card::after {
  content: "";
  position: absolute;
  border-radius: 28px;
  border: 1px solid rgba(247, 239, 225, .38);
  background: rgba(247, 239, 225, .16);
  backdrop-filter: blur(14px);
}

.drawer-card::before {
  inset: 26px -22px 46px 38px;
  z-index: -1;
  transform: translateY(22px) rotate(1.5deg);
}

.drawer-card::after {
  inset: 52px 44px -24px -28px;
  z-index: -2;
  transform: translateY(12px) rotate(-2deg);
}

.drawer-card p {
  position: absolute;
  left: 32px;
  right: 34px;
  bottom: 58px;
  margin: 0;
  font-family: "Manrope", "Inter", sans-serif;
  font-size: 13px;
  line-height: 1.75;
  letter-spacing: .055em;
}

.drawer-card code {
  position: absolute;
  left: 32px;
  bottom: 28px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  letter-spacing: .14em;
  color: var(--caramel);
}

.paper-tag {
  position: absolute;
  top: 24px;
  left: 28px;
  padding: 8px 18px;
  background: rgba(247, 239, 225, .68);
  border: 1px solid rgba(200, 155, 79, .24);
  border-radius: 4px 16px 16px 4px;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  transform: rotate(-1.2deg);
}

.pin {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brass);
  box-shadow: 0 0 0 4px rgba(200, 155, 79, .14), 0 5px 10px rgba(33, 26, 22, .2);
  z-index: 2;
}

.pin-a { top: 33px; right: 38px; }
.pin-b { bottom: 34px; right: 42px; }

.halo {
  position: absolute;
  inset: 68px 66px 124px 72px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(232, 184, 102, .64), rgba(232, 184, 102, .18) 48%, transparent 70%);
  filter: blur(12px);
  animation: haloBreath 7s ease-in-out infinite;
}

.candy {
  position: absolute;
  left: 50%;
  top: 44%;
  width: 190px;
  height: 126px;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 25px 22px rgba(122, 63, 36, .24));
}

.sugar-sheet {
  border-radius: 24px 42px 28px 46px;
  background: linear-gradient(135deg, rgba(247,239,225,.8), rgba(243,216,207,.5));
  border: 1px solid rgba(255,255,255,.58);
  transform: translate(-50%, -50%) rotate(-8deg);
}

.sugar-sheet span,
.amber-drop span,
.wrapped-sweet span,
.rose-lozenge span,
.last-piece span {
  position: absolute;
  inset: 16px;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255,255,255,.44), transparent 55%);
}

.amber-drop {
  width: 158px;
  height: 158px;
  border-radius: 58% 42% 54% 46%;
  background: radial-gradient(circle at 34% 28%, #F7EFE1, #E8B866 34%, #B47A46 70%, #7A3F24);
  transform: translate(-50%, -50%) rotate(14deg);
}

.wrapped-sweet {
  width: 240px;
  height: 100px;
  border-radius: 50px;
  background: linear-gradient(90deg, rgba(247,239,225,.7), #E8B866 24%, #F3D8CF 50%, #B47A46 78%, rgba(247,239,225,.75));
}

.wrapped-sweet::before,
.wrapped-sweet::after {
  content: "";
  position: absolute;
  top: 18px;
  width: 62px;
  height: 64px;
  background: rgba(247, 239, 225, .72);
  clip-path: polygon(0 50%, 100% 0, 82% 50%, 100% 100%);
}

.wrapped-sweet::before { left: -52px; transform: rotate(180deg); }
.wrapped-sweet::after { right: -52px; }

.rose-lozenge {
  width: 210px;
  height: 116px;
  border-radius: 999px;
  background: linear-gradient(135deg, #F7EFE1, #F3D8CF 44%, #E8B866);
  transform: translate(-50%, -50%) rotate(-4deg);
}

.last-piece {
  width: 154px;
  height: 154px;
  border-radius: 34px;
  background: linear-gradient(135deg, #E8B866, #B47A46 56%, #7A3F24);
  transform: translate(-50%, -50%) rotate(9deg);
}

.artifact {
  position: absolute;
  z-index: 5;
  transition: transform 1100ms cubic-bezier(.16, 1, .3, 1), filter 1100ms ease, opacity 900ms ease;
}

.chapter:not(.active) .artifact { filter: blur(6px); opacity: .62; }

.trail-a { left: 42%; top: 48%; }
.trail-b { left: 58%; top: 61%; }

.candy-wrap {
  width: 98px;
  height: 36px;
  border-radius: 999px;
  background: linear-gradient(90deg, #F3D8CF, #F7EFE1, #E8B866);
  transform: rotate(-18deg);
}

.caramel-block {
  width: 74px;
  height: 62px;
  border-radius: 18px;
  background: linear-gradient(135deg, #E8B866, #B47A46, #7A3F24);
  transform: rotate(16deg);
}

.brass-tongs {
  width: 132px;
  height: 13px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent 0 12%, #C89B4F 12% 44%, transparent 44% 56%, #C89B4F 56% 88%, transparent 88%);
  transform: rotate(26deg);
}

.ribbon-cross,
.closing-ribbon {
  width: 210px;
  height: 18px;
  border-radius: 999px;
  background: rgba(122, 63, 36, .42);
  transform: rotate(-29deg);
}

.paper-strip {
  padding: 12px 42px;
  background: rgba(247, 239, 225, .64);
  border: 1px solid rgba(200, 155, 79, .22);
  border-radius: 8px;
  font-size: 12px;
  letter-spacing: .2em;
  transform: rotate(8deg);
}

.sleeve-shadow {
  width: 210px;
  height: 90px;
  border-radius: 60% 40% 48% 52%;
  background: rgba(90, 58, 53, .18);
  filter: blur(10px);
  transform: rotate(-16deg);
}

.brass-dot-row {
  width: 170px;
  height: 18px;
  background: radial-gradient(circle, #C89B4F 0 6px, transparent 7px) 0 0 / 34px 18px;
  transform: rotate(10deg);
}

.glass-pane {
  width: 174px;
  height: 108px;
  border-radius: 24px;
  border: 1px solid rgba(247,239,225,.52);
  background: rgba(247,239,225,.22);
  backdrop-filter: blur(10px);
  transform: rotate(-11deg);
}

.wax-fold {
  width: 112px;
  height: 86px;
  border-radius: 42px 24px 44px 22px;
  background: linear-gradient(135deg, rgba(247,239,225,.52), rgba(232,184,102,.28));
  transform: rotate(20deg);
}

.drawer-shadow {
  position: absolute;
  z-index: 1;
  right: 19vw;
  top: 23vh;
  width: 470px;
  height: 330px;
  border-radius: 44px;
  background: rgba(122, 63, 36, .12);
  filter: blur(28px);
  transform: rotate(-8deg);
}

.amber-card { --slide-y: 14px; }
.paper-card { --slide-x: -18px; }
.rose-card { --slide-y: -12px; }
.dusk-card { --slide-x: -12px; --slide-y: 16px; }
.dusk-card { color: var(--rice); background: linear-gradient(135deg, rgba(90,58,53,.66), rgba(122,63,36,.34)); }
.dusk-card code { color: var(--honey); }
.dusk-card .paper-tag { color: var(--ink); }

@keyframes haloBreath {
  0%, 100% { transform: scale(.92); opacity: .72; }
  50% { transform: scale(1.13); opacity: 1; }
}

@media (max-width: 820px) {
  .site-mark { left: 20px; top: 18px; }
  .scene { padding: 22px; }
  .chapter-label { top: 78px; left: 24px; }
  .tiny-label { top: 122px; left: 24px; right: auto; max-width: calc(100vw - 48px); }
  .drawer-card { width: calc(100vw - 52px); right: 26px; top: 25vh; min-height: 360px; padding: 28px; }
  .phrase { font-size: clamp(54px, 17vw, 92px); left: 24px; bottom: 42px; }
  .z-thread { inset: 18vh 4vw 18vh 4vw; }
  .trail-a { left: 30%; top: 54%; }
  .trail-b { left: 54%; top: 66%; }
  .drawer-shadow { width: 80vw; right: 7vw; }
}