:root {
  /* DESIGN.md typography extraction tokens: Interpret **꾸미미 */
  --sticker-cream: #FFF4D8;
  --peach-gel: #FF9AB8;
  --melon-vinyl: #9BFFCA;
  --blueberry-ink: #5867F2;
  --butter-star: #FFE66D;
  --grape-charm: #B477FF;
  --cocoa-line: #5B4036;
  --scene: 0;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--cocoa-line);
  background: var(--sticker-cream);
  font-family: "Nunito", sans-serif;
  overflow: hidden;
}

button { font: inherit; color: inherit; }

.desk-theater {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background:
    radial-gradient(circle at 12% 18%, rgba(255, 154, 184, .23) 0 2px, transparent 3px),
    radial-gradient(circle at 68% 26%, rgba(88, 103, 242, .18) 0 1px, transparent 2px),
    radial-gradient(circle at 32% 78%, rgba(180, 119, 255, .18) 0 2px, transparent 3px),
    linear-gradient(120deg, rgba(255, 230, 109, .2), transparent 38%, rgba(155, 255, 202, .16)),
    var(--sticker-cream);
  cursor: grab;
}

.desk-theater::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .43;
  pointer-events: none;
  background-image:
    linear-gradient(90deg, rgba(91, 64, 54, .045) 1px, transparent 1px),
    linear-gradient(rgba(91, 64, 54, .035) 1px, transparent 1px);
  background-size: 34px 34px;
  transform: rotate(-1deg) scale(1.08);
}

.paper-grain, .paper-grain::before {
  position: absolute;
  inset: 0;
  content: "";
  background: radial-gradient(circle, rgba(91, 64, 54, .12) 0 1px, transparent 1.7px);
  background-size: 23px 19px;
  mix-blend-mode: multiply;
  opacity: .18;
}

.scene {
  position: absolute;
  inset: 0;
  opacity: calc(.08 + var(--visible, 0) * .92);
  transform: translateY(calc((var(--index, 0) - var(--scene)) * 22px)) scale(calc(.97 + var(--visible, 0) * .03));
  transition: opacity .7s ease, transform .8s cubic-bezier(.18, .88, .24, 1.12);
  pointer-events: none;
}

.scene.active { --visible: 1; pointer-events: auto; }
.scene[data-scene="0"] { --index: 0; }
.scene[data-scene="1"] { --index: 1; }
.scene[data-scene="2"] { --index: 2; }
.scene[data-scene="3"] { --index: 3; }
.scene[data-scene="4"] { --index: 4; }

.edge-tabs {
  position: fixed;
  right: 10px;
  top: 50%;
  z-index: 20;
  display: grid;
  gap: 8px;
  transform: translateY(-50%);
}

.edge-tabs button {
  width: 58px;
  padding: 9px 7px;
  border: 2px solid var(--cocoa-line);
  border-radius: 14px 3px 3px 14px;
  background: rgba(255, 230, 109, .82);
  box-shadow: 3px 3px 0 rgba(91, 64, 54, .2);
  font-family: "Gaegu", cursive;
  font-size: 18px;
  transform: translateX(calc((1 - var(--active, 0)) * 16px)) rotate(calc(-2deg + var(--active, 0) * 4deg));
  transition: transform .25s ease, background .25s ease;
}

.edge-tabs button.is-active { --active: 1; background: var(--melon-vinyl); }

.faint-wordmark {
  position: absolute;
  left: 50%;
  top: 47%;
  width: max-content;
  transform: translate(-50%, -50%) rotate(-2deg);
  font: 700 clamp(52px, 10vw, 142px) "DynaPuff", cursive;
  color: transparent;
  -webkit-text-stroke: 2px rgba(91, 64, 54, .19);
  letter-spacing: -.05em;
}

.puffy-wordmark {
  position: absolute;
  left: 50%;
  top: 47%;
  z-index: 3;
  width: max-content;
  transform: translate(-50%, -50%) rotate(-2deg);
  font: 700 clamp(52px, 10vw, 142px) "DynaPuff", cursive;
  letter-spacing: -.05em;
}

.puffy-wordmark span {
  display: inline-block;
  color: var(--peach-gel);
  text-shadow: 0 5px 0 #ffffff, 3px 9px 0 rgba(91, 64, 54, .22), -1px -1px 0 var(--cocoa-line), 1px 1px 0 var(--cocoa-line);
  opacity: 0;
  transform: translateY(-90px) rotate(-28deg) scale(.55);
  transition: transform .65s cubic-bezier(.2, 1.35, .32, 1), opacity .3s ease;
}

.puffy-wordmark span:nth-child(3n) { color: var(--melon-vinyl); }
.puffy-wordmark span:nth-child(3n+1) { color: var(--butter-star); }
.puffy-wordmark span:nth-child(4n) { color: var(--grape-charm); }
.puffy-wordmark.placed span { opacity: 1; transform: translateY(0) rotate(var(--wiggle, 0deg)) scale(1); }
.puffy-wordmark span:nth-child(1) { transition-delay: .03s; --wiggle: -4deg; }
.puffy-wordmark span:nth-child(2) { transition-delay: .09s; --wiggle: 3deg; }
.puffy-wordmark span:nth-child(3) { transition-delay: .15s; --wiggle: -2deg; }
.puffy-wordmark span:nth-child(4) { transition-delay: .21s; --wiggle: 2deg; }
.puffy-wordmark span:nth-child(5) { transition-delay: .27s; --wiggle: -5deg; }
.puffy-wordmark span:nth-child(6) { transition-delay: .33s; --wiggle: 4deg; }
.puffy-wordmark span:nth-child(7) { transition-delay: .39s; --wiggle: -2deg; }
.puffy-wordmark span:nth-child(8) { transition-delay: .45s; --wiggle: 3deg; }
.puffy-wordmark span:nth-child(9) { transition-delay: .51s; --wiggle: -4deg; }
.puffy-wordmark span:nth-child(10) { transition-delay: .57s; --wiggle: 2deg; }
.puffy-wordmark span:nth-child(11) { transition-delay: .63s; --wiggle: -3deg; }
.puffy-wordmark span:nth-child(12) { transition-delay: .69s; --wiggle: 4deg; }

.gel-underline {
  position: absolute;
  left: 29%;
  top: 60%;
  width: 0;
  height: 18px;
  border-radius: 99px;
  background: repeating-linear-gradient(90deg, var(--blueberry-ink), var(--blueberry-ink) 18px, var(--melon-vinyl) 18px, var(--melon-vinyl) 29px);
  box-shadow: 0 5px 0 rgba(91, 64, 54, .15);
  transform: rotate(-2deg);
  transition: width .8s cubic-bezier(.23, 1, .32, 1) .35s;
}

.desk-theater.decorated .gel-underline { width: 42%; }

.lifted-corner {
  position: absolute;
  left: 8vw;
  top: 9vh;
  width: 92px;
  height: 92px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(255,255,255,.9), var(--melon-vinyl));
  border: 2px dashed rgba(91, 64, 54, .5);
  box-shadow: 10px 10px 0 rgba(91, 64, 54, .13);
  transform: rotate(-12deg);
}

.lifted-corner::after {
  content: "";
  position: absolute;
  right: -2px;
  bottom: -2px;
  border: 22px solid transparent;
  border-right-color: #ffffff;
  border-bottom-color: #ffffff;
  filter: drop-shadow(-4px -4px 3px rgba(91, 64, 54, .18));
}

.offscreen-object { position: absolute; border: 3px solid var(--cocoa-line); box-shadow: 7px 7px 0 rgba(91, 64, 54, .15); }
.washi-left { left: -32px; bottom: 16vh; width: 170px; height: 62px; border-radius: 999px; background: repeating-linear-gradient(45deg, var(--peach-gel), var(--peach-gel) 14px, rgba(255,255,255,.55) 14px, rgba(255,255,255,.55) 28px); transform: rotate(18deg); }
.pen-right { right: -45px; top: 15vh; width: 210px; height: 26px; border-radius: 999px; background: linear-gradient(90deg, var(--blueberry-ink) 0 72%, var(--butter-star) 72%); transform: rotate(-24deg); }

.scrap-note, .memo-slip, .tape-label {
  position: absolute;
  padding: 16px 22px;
  border: 2px solid rgba(91, 64, 54, .75);
  background: rgba(255, 255, 255, .68);
  box-shadow: 5px 5px 0 rgba(91, 64, 54, .12);
  font-family: "Gaegu", cursive;
  font-size: clamp(22px, 3vw, 36px);
  line-height: .9;
}

.note-opening { left: 13vw; bottom: 14vh; transform: rotate(7deg); background: rgba(155, 255, 202, .58); }
.note-opening::before, .case-note::before, .diary-note::before { content: ""; position: absolute; left: 22px; top: -15px; width: 76px; height: 27px; background: rgba(255, 154, 184, .62); transform: rotate(-6deg); }
.shelf-label { right: 13vw; top: 29vh; transform: rotate(8deg); background: rgba(255, 230, 109, .72); font-size: 28px; }
.case-note { right: 14vw; bottom: 15vh; transform: rotate(-7deg); background: rgba(255, 244, 216, .78); }
.diary-note { right: 10%; top: 30%; transform: rotate(6deg); background: rgba(155, 255, 202, .55); font-size: 30px; }

.confetti-field::before, .confetti-field::after {
  content: "✦  •  ♡  ★  •  ✦  ♡  •  ★  ✦";
  position: absolute;
  left: 18%;
  top: 18%;
  width: 64%;
  color: var(--blueberry-ink);
  font: 32px "Gaegu", cursive;
  letter-spacing: 18px;
  opacity: .55;
  transform: rotate(-8deg);
}
.confetti-field::after { top: 74%; left: 8%; color: var(--peach-gel); transform: rotate(7deg); }

.top-shelf {
  position: absolute;
  left: 5vw;
  right: 9vw;
  top: 4vh;
  height: 230px;
  border: 3px solid var(--cocoa-line);
  border-radius: 0 0 36px 36px;
  background: rgba(255, 255, 255, .38);
  box-shadow: 0 12px 0 rgba(91, 64, 54, .12);
  transform: translateY(-290px) rotate(-1deg);
  transition: transform .9s cubic-bezier(.19, 1.15, .24, 1);
}
.sticker-shelf.active .top-shelf { transform: translateY(0) rotate(-1deg); }

.sticker-sheet {
  position: absolute;
  width: 168px;
  height: 188px;
  top: 26px;
  border: 2px solid var(--cocoa-line);
  border-radius: 22px;
  background: linear-gradient(145deg, rgba(255,255,255,.72), rgba(155,255,202,.38));
  box-shadow: 6px 6px 0 rgba(91, 64, 54, .16);
}
.sheet-a { left: 5%; transform: rotate(-8deg); }
.sheet-b { left: 23%; transform: rotate(9deg); background: linear-gradient(145deg, rgba(255,255,255,.74), rgba(180,119,255,.3)); }
.sticker-sheet i { position: absolute; width: 34px; height: 34px; border: 2px dashed var(--cocoa-line); border-radius: 50%; background: rgba(255,230,109,.75); }
.sticker-sheet i:nth-child(1) { left: 24px; top: 34px; }
.sticker-sheet i:nth-child(2) { right: 28px; top: 34px; border-radius: 12px; background: var(--peach-gel); }
.sticker-sheet i:nth-child(3) { left: 32px; bottom: 48px; border-radius: 7px 18px; background: var(--melon-vinyl); }
.sticker-sheet i:nth-child(4) { right: 32px; bottom: 44px; clip-path: polygon(50% 0, 62% 35%, 100% 35%, 69% 58%, 82% 100%, 50% 74%, 18% 100%, 31% 58%, 0 35%, 38% 35%); border: none; background: var(--butter-star); }
.sticker-sheet span { position: absolute; bottom: 14px; left: 18px; font: 22px "Gaegu", cursive; }

.washi-roll { position: absolute; top: 76px; width: 102px; height: 102px; border: 18px solid var(--peach-gel); border-radius: 50%; background: var(--sticker-cream); box-shadow: inset 0 0 0 12px rgba(255,255,255,.65), 7px 7px 0 rgba(91,64,54,.14); }
.roll-peach { left: 46%; }
.roll-melon { left: 56%; border-color: var(--melon-vinyl); transform: rotate(12deg); }
.gel-pen { position: absolute; top: 46px; width: 196px; height: 24px; border: 2px solid var(--cocoa-line); border-radius: 99px; transform-origin: center; }
.pen-blue { right: 17%; background: linear-gradient(90deg, var(--blueberry-ink), var(--blueberry-ink) 74%, #ffffff 74%); transform: rotate(18deg); }
.pen-grape { right: 6%; top: 111px; background: linear-gradient(90deg, var(--grape-charm), var(--grape-charm) 70%, var(--butter-star) 70%); transform: rotate(-11deg); }
.charm-tray { position: absolute; right: 30%; bottom: 23px; width: 158px; height: 76px; border: 2px solid var(--cocoa-line); border-radius: 30px; background: rgba(255,154,184,.3); }
.charm-tray span { position: absolute; width: 24px; height: 24px; border-radius: 50%; background: var(--butter-star); border: 2px solid var(--cocoa-line); top: 24px; }
.charm-tray span:nth-child(1) { left: 18px; }.charm-tray span:nth-child(2) { left: 50px; background: var(--melon-vinyl); }.charm-tray span:nth-child(3) { left: 82px; background: var(--peach-gel); }.charm-tray span:nth-child(4) { left: 114px; background: var(--grape-charm); }

.kumi-trail { position: absolute; pointer-events: none; }
.kumi-trail span { position: absolute; width: 18px; height: 18px; border: 2px solid var(--cocoa-line); border-radius: 50%; background: var(--butter-star); opacity: 0; transform: scale(.2); transition: opacity .25s ease, transform .45s cubic-bezier(.2,1.4,.3,1); }
.active .kumi-trail span, .kumi-trail.sparkled span { opacity: 1; transform: scale(1); }
.trail-one { left: 18vw; top: 42vh; width: 55vw; height: 28vh; transform: rotate(-8deg); }
.trail-one span:nth-child(1) { left: 0; top: 70%; transition-delay: .08s; }
.trail-one span:nth-child(2) { left: 13%; top: 42%; background: var(--peach-gel); transition-delay: .15s; border-radius: 6px; }
.trail-one span:nth-child(3) { left: 26%; top: 24%; transition-delay: .22s; }
.trail-one span:nth-child(4) { left: 41%; top: 18%; background: var(--melon-vinyl); transition-delay: .29s; }
.trail-one span:nth-child(5) { left: 58%; top: 30%; background: var(--grape-charm); transition-delay: .36s; }
.trail-one span:nth-child(6) { left: 73%; top: 56%; transition-delay: .43s; }
.trail-one span:nth-child(7) { left: 91%; top: 48%; background: var(--peach-gel); transition-delay: .50s; }

.phone-case {
  position: absolute;
  left: 50%;
  top: 48%;
  width: min(45vw, 430px);
  height: min(72vh, 620px);
  border: 7px solid rgba(91, 64, 54, .78);
  border-radius: 60px;
  background: linear-gradient(135deg, rgba(255,255,255,.55), rgba(155,255,202,.26) 44%, rgba(180,119,255,.18));
  box-shadow: 18px 22px 0 rgba(91,64,54,.13), inset 0 0 0 12px rgba(255,255,255,.35);
  transform: translate(-50%, -50%) rotate(-10deg) scale(.72);
  transition: transform .9s cubic-bezier(.18, 1.25, .23, 1);
}
.phone-island.active .phone-case { transform: translate(-50%, -50%) rotate(-10deg) scale(1); }
.camera-hole { position: absolute; left: 36px; top: 36px; width: 112px; height: 112px; border: 4px solid var(--cocoa-line); border-radius: 36px; background: rgba(255,244,216,.76); }
.case-glint { position: absolute; right: 58px; top: 105px; width: 60px; height: 320px; border-radius: 99px; background: linear-gradient(180deg, rgba(255,255,255,.85), transparent); transform: rotate(22deg); }
.case-caption { position: absolute; left: 52px; bottom: 58px; font: 28px "Gaegu", cursive; color: var(--blueberry-ink); transform: rotate(7deg); }

.orbiter { position: absolute; transition: transform .8s cubic-bezier(.18,1.38,.24,1), opacity .4s ease; opacity: 0; }
.phone-island.active .orbiter { opacity: 1; transform: translate(0, 0) rotate(var(--r, 0deg)) scale(1); }
.pearl { width: 42px; height: 42px; border-radius: 50%; border: 3px solid var(--cocoa-line); background: radial-gradient(circle at 35% 28%, #ffffff, var(--melon-vinyl)); box-shadow: 4px 5px 0 rgba(91,64,54,.13); }
.pearl-a { left: 36%; top: 27%; transform: translate(-260px, -120px) scale(.2); --r: -12deg; }
.pearl-b { left: 61%; top: 67%; transform: translate(260px, 150px) scale(.2); --r: 12deg; }
.bow-charm { left: 59%; top: 26%; width: 94px; height: 54px; transform: translate(260px, -180px) scale(.3); --r: 13deg; }
.bow-charm::before, .bow-charm::after { content: ""; position: absolute; width: 44px; height: 48px; border: 3px solid var(--cocoa-line); background: var(--peach-gel); border-radius: 50% 12px 50% 12px; }
.bow-charm::after { right: 0; transform: scaleX(-1); }
.pixel-strawberry { left: 40%; top: 63%; width: 54px; height: 54px; background: var(--peach-gel); border: 3px solid var(--cocoa-line); clip-path: polygon(30% 8%, 70% 8%, 92% 34%, 78% 86%, 50% 100%, 22% 86%, 8% 34%); transform: translate(-210px, 150px) scale(.2); --r: -18deg; }
.pixel-strawberry i { position: absolute; inset: -10px 13px auto 13px; height: 18px; background: var(--melon-vinyl); border: 2px solid var(--cocoa-line); }
.puffy-heart { left: 51%; top: 38%; width: 58px; height: 52px; background: var(--butter-star); transform: translate(0, -260px) scale(.2); --r: 9deg; clip-path: path("M29 50 C-6 24 7 0 27 13 C47 0 64 24 29 50Z"); }
.hangul-mark { left: 57%; top: 50%; font: 700 76px "Gowun Dodum", sans-serif; color: var(--blueberry-ink); text-shadow: 3px 3px 0 rgba(255,255,255,.85); transform: translate(180px, 0) scale(.2); --r: -9deg; }
.star-sequin { left: 43%; top: 45%; font: 88px "DynaPuff", cursive; color: var(--butter-star); -webkit-text-stroke: 2px var(--cocoa-line); transform: translate(-190px, 0) scale(.2); --r: 22deg; }
.doodle-arrow { position: absolute; left: 18%; top: 68%; font: 50px "Gaegu", cursive; color: var(--blueberry-ink); transform: rotate(-16deg); }

.journal {
  position: absolute;
  left: 50%;
  top: 52%;
  width: min(84vw, 980px);
  height: min(68vh, 620px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  transform: translate(-50%, -50%) rotate(1deg) scaleX(.55);
  transform-origin: center;
  transition: transform .85s cubic-bezier(.2,1.05,.24,1);
  filter: drop-shadow(16px 22px 0 rgba(91,64,54,.13));
}
.diary-fold.active .journal { transform: translate(-50%, -50%) rotate(1deg) scaleX(1); }
.page { position: relative; border: 3px solid var(--cocoa-line); background: rgba(255,255,255,.58); overflow: hidden; }
.left-page { border-radius: 32px 4px 4px 32px; background: linear-gradient(90deg, rgba(255,255,255,.75), rgba(255,244,216,.82)); }
.right-page { border-left: 0; border-radius: 4px 32px 32px 4px; background: linear-gradient(90deg, rgba(91,64,54,.08), rgba(255,255,255,.72)); }
.journal::after { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 18px; transform: translateX(-50%); background: repeating-linear-gradient(180deg, rgba(91,64,54,.2), rgba(91,64,54,.2) 12px, transparent 12px, transparent 24px); }
.scallop-frame { position: absolute; left: 40px; top: 55px; width: 270px; height: 150px; padding: 48px 24px; text-align: center; font: 30px "DynaPuff", cursive; color: var(--blueberry-ink); border: 3px solid var(--cocoa-line); border-radius: 28px; background: var(--melon-vinyl); outline: 10px dotted var(--peach-gel); }
.hand-note { position: absolute; left: 74px; bottom: 70px; width: 310px; font: 32px/1 "Gaegu", cursive; color: var(--cocoa-line); transform: rotate(-6deg); }
.mini-envelope { position: absolute; right: 36px; bottom: 58px; width: 124px; height: 78px; border: 3px solid var(--cocoa-line); background: var(--butter-star); transform: rotate(10deg); }
.mini-envelope::before { content: ""; position: absolute; inset: 0; background: linear-gradient(145deg, transparent 49%, rgba(91,64,54,.35) 50%, transparent 51%), linear-gradient(215deg, transparent 49%, rgba(91,64,54,.35) 50%, transparent 51%); }
.milk-carton { position: absolute; right: 86px; top: 72px; width: 75px; height: 112px; padding-top: 54px; border: 3px solid var(--cocoa-line); background: #ffffff; text-align: center; font: 21px "Gaegu", cursive; transform: rotate(-9deg); }
.milk-carton::before { content: ""; position: absolute; left: -3px; top: -30px; border-left: 39px solid transparent; border-right: 39px solid transparent; border-bottom: 30px solid var(--peach-gel); }
.stamp-caption { position: absolute; left: 60px; top: 70px; padding: 14px 24px; border: 3px solid var(--blueberry-ink); border-radius: 50%; font: 30px "Gowun Dodum", sans-serif; color: var(--blueberry-ink); transform: rotate(-11deg); }
.lace-border { position: absolute; left: 40px; right: 40px; bottom: 45px; height: 42px; background: radial-gradient(circle at 21px 21px, transparent 16px, var(--grape-charm) 17px, var(--grape-charm) 20px, transparent 21px); background-size: 42px 42px; opacity: .8; }
.bear-face { position: absolute; left: 80px; bottom: 115px; width: 128px; height: 110px; border: 3px solid var(--cocoa-line); border-radius: 50%; background: var(--butter-star); }
.bear-face::before, .bear-face::after { content: ""; position: absolute; top: -20px; width: 42px; height: 42px; border: 3px solid var(--cocoa-line); border-radius: 50%; background: var(--butter-star); }
.bear-face::before { left: 10px; }.bear-face::after { right: 10px; }
.bear-face span::before, .bear-face span::after { content: ""; position: absolute; top: 46px; width: 10px; height: 10px; border-radius: 50%; background: var(--cocoa-line); }
.bear-face span::before { left: 38px; }.bear-face span::after { right: 38px; }
.trail-two { left: 16vw; top: 22vh; width: 70vw; height: 58vh; transform: rotate(5deg); }
.trail-two span:nth-child(1) { left: 8%; top: 22%; }.trail-two span:nth-child(2) { left: 19%; top: 44%; background: var(--melon-vinyl); }.trail-two span:nth-child(3) { left: 31%; top: 58%; background: var(--peach-gel); }.trail-two span:nth-child(4) { left: 43%; top: 48%; }.trail-two span:nth-child(5) { left: 55%; top: 28%; background: var(--grape-charm); }.trail-two span:nth-child(6) { left: 68%; top: 35%; }.trail-two span:nth-child(7) { left: 78%; top: 55%; background: var(--melon-vinyl); }.trail-two span:nth-child(8) { left: 90%; top: 39%; background: var(--peach-gel); }
.tape-x { position: absolute; width: 98px; height: 36px; background: rgba(155,255,202,.62); border: 2px solid rgba(91,64,54,.4); }
.tape-x::after { content: ""; position: absolute; inset: 0; background: inherit; transform: rotate(90deg); border: inherit; }
.tape-one { left: 17%; top: 18%; transform: rotate(-14deg); }.tape-two { right: 16%; bottom: 18%; transform: rotate(12deg); background: rgba(255,154,184,.6); }

.charm-curtain { position: absolute; top: -30px; bottom: 0; width: 140px; display: flex; justify-content: space-around; }
.left-curtain { left: 22px; }.right-curtain { right: 78px; }
.charm-curtain span { width: 4px; height: calc(35vh + var(--drop, 0px)); background: var(--cocoa-line); transform-origin: top; animation: swing 2.8s ease-in-out infinite alternate; }
.charm-curtain span::after { content: ""; position: absolute; left: 50%; bottom: -48px; width: 58px; height: 58px; transform: translateX(-50%); border: 3px solid var(--cocoa-line); border-radius: 18px; background: linear-gradient(135deg, rgba(255,255,255,.65), var(--grape-charm)); box-shadow: 4px 5px 0 rgba(91,64,54,.15); }
.charm-curtain span:nth-child(2) { --drop: 80px; animation-delay: -.5s; }.charm-curtain span:nth-child(3) { --drop: 34px; animation-delay: -1s; }.charm-curtain span:nth-child(4) { --drop: 115px; animation-delay: -1.5s; }
@keyframes swing { from { transform: rotate(-4deg); } to { transform: rotate(5deg); } }
.finished-spread { position: absolute; left: 50%; top: 52%; width: min(76vw, 880px); height: min(62vh, 560px); border: 4px solid var(--cocoa-line); border-radius: 48px; background: linear-gradient(135deg, rgba(255,255,255,.7), rgba(255,244,216,.95) 48%, rgba(155,255,202,.36)); box-shadow: 20px 24px 0 rgba(91,64,54,.16); transform: translate(-50%, -50%) rotate(-2deg) scale(.84); transition: transform .75s cubic-bezier(.2,1.2,.25,1); }
.charm-finale.active .finished-spread { transform: translate(-50%, -50%) rotate(-2deg) scale(1); }
.final-word { position: absolute; left: 50%; top: 41%; width: max-content; transform: translate(-50%, -50%) rotate(2deg); font: 700 clamp(48px, 8vw, 118px) "DynaPuff", cursive; color: var(--peach-gel); text-shadow: 0 6px 0 #ffffff, 4px 12px 0 rgba(91,64,54,.18); -webkit-text-stroke: 2px var(--cocoa-line); }
.finished-spread p { position: absolute; left: 50%; top: 63%; transform: translateX(-50%) rotate(-3deg); font: 36px "Gaegu", cursive; color: var(--blueberry-ink); }
.bead-string { position: absolute; left: 23%; right: 23%; bottom: 8vh; display: flex; justify-content: space-between; transform: rotate(3deg); }
.bead-string i { width: 32px; height: 32px; border-radius: 50%; border: 3px solid var(--cocoa-line); background: var(--butter-star); box-shadow: 3px 4px 0 rgba(91,64,54,.15); }
.bead-string i:nth-child(2n) { background: var(--melon-vinyl); }.bead-string i:nth-child(3n) { background: var(--peach-gel); }.bead-string i:nth-child(4n) { background: var(--grape-charm); }

.mascot { position: absolute; width: 76px; height: 64px; border: 3px solid var(--cocoa-line); border-radius: 50% 50% 44% 44%; background: #ffffff; box-shadow: 5px 6px 0 rgba(91,64,54,.14); }
.mascot::before, .mascot::after { content: ""; position: absolute; top: 21px; width: 8px; height: 8px; border-radius: 50%; background: var(--cocoa-line); }
.mascot::before { left: 24px; }.mascot::after { right: 24px; }
.mascot .bow { position: absolute; right: -14px; top: -12px; width: 42px; height: 24px; background: var(--peach-gel); border: 3px solid var(--cocoa-line); border-radius: 50% 12px; transform: rotate(18deg); }
.wand, .tweezers { position: absolute; right: -38px; top: 34px; width: 55px; height: 5px; border-radius: 99px; background: var(--blueberry-ink); transform: rotate(-24deg); }
.wand::after { content: "★"; position: absolute; right: -19px; top: -18px; color: var(--butter-star); -webkit-text-stroke: 1px var(--cocoa-line); font-size: 24px; }
.tweezers { width: 64px; background: var(--cocoa-line); }
.opening { right: 24vw; bottom: 18vh; transform: rotate(-8deg); }
.shelf-mimi { left: 9vw; top: 38vh; transform: rotate(11deg); }
.pocket-mimi { left: 48%; bottom: 13vh; transform: rotate(-4deg); }
.sleeping-mimi { left: 50%; bottom: 36px; transform: translateX(-50%) rotate(5deg); }
.sleeping-mimi b { position: absolute; right: -18px; top: -12px; font: 700 24px "Gaegu", cursive; color: var(--blueberry-ink); }
.sleeping-mimi b + b { right: -36px; top: -28px; font-size: 18px; }

.placed, .stamped { animation: press .36s cubic-bezier(.2,1.4,.3,1); }
.peeled { animation: peel .7s cubic-bezier(.2,1.1,.24,1); }
.sparkled { filter: drop-shadow(0 0 12px rgba(255,230,109,.9)); }
@keyframes press { 0% { scale: 1.08; } 55% { scale: .94; } 100% { scale: 1; } }
@keyframes peel { 0% { transform: rotate(-20deg) translateY(20px); } 100% { transform: rotate(var(--r, 0deg)) translateY(0); } }

@media (max-width: 760px) {
  .edge-tabs { right: 4px; }
  .edge-tabs button { width: 48px; font-size: 15px; }
  .puffy-wordmark, .faint-wordmark { font-size: 13vw; white-space: normal; width: 88vw; text-align: center; line-height: .85; }
  .gel-underline { left: 15%; top: 66%; }
  .desk-theater.decorated .gel-underline { width: 66%; }
  .top-shelf { left: 3vw; right: 14vw; height: 260px; }
  .sheet-b, .roll-melon, .pen-grape, .charm-tray { display: none; }
  .phone-case { width: 68vw; height: 58vh; }
  .journal { width: 88vw; grid-template-columns: 1fr; height: 78vh; }
  .right-page { display: none; }
  .left-page { border-radius: 32px; }
  .final-word { white-space: normal; width: 72vw; text-align: center; line-height: .82; }
}