:root {
  /* compliance tokens from DESIGN.md typography extraction: Interpret **yome** bride Playfair Display** engraved label headlines */
  --veil-ivory: #FFF7EA;
  --pearl-shadow: #D8CEC0;
  --sugared-violet: #B99AD6;
  --pressed-rose: #D98FA3;
  --borrowed-blue: #7FA9C9;
  --cake-ink: #3B2924;
  --silver-spoon: #BFC5C8;
  --pistachio-leaf: #A9B88F;
  --serif-romance: "Cormorant Garamond", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --serif-display: "Playfair Display", Didot, "Bodoni 72", Georgia, serif;
  --sans-calm: "DM Sans", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --pastry: Fraunces, Georgia, serif;
  --progress: 0;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 600vh;
  color: var(--cake-ink);
  background:
    radial-gradient(circle at 12% 8%, rgba(185, 154, 214, .28), transparent 22rem),
    radial-gradient(circle at 86% 18%, rgba(127, 169, 201, .22), transparent 26rem),
    linear-gradient(115deg, var(--veil-ivory), #f5ece0 44%, var(--pearl-shadow));
  font-family: var(--sans-calm);
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 1.2rem;
  border: 1px solid rgba(59, 41, 36, .18);
  border-radius: 2.4rem;
  pointer-events: none;
  z-index: 30;
  box-shadow: inset 0 0 0 8px rgba(255, 247, 234, .38);
}

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 40;
  opacity: .28;
  mix-blend-mode: multiply;
  background-image:
    radial-gradient(circle, rgba(59, 41, 36, .2) 0 1px, transparent 1.4px),
    radial-gradient(circle, rgba(255, 247, 234, .85) 0 1px, transparent 1.8px);
  background-size: 19px 17px, 29px 31px;
}

.veil-drift {
  position: fixed;
  inset: -20% -10%;
  pointer-events: none;
  z-index: 5;
  opacity: .55;
  background:
    radial-gradient(ellipse at 50% 18%, rgba(255,255,255,.72), transparent 32%),
    repeating-linear-gradient(102deg, transparent 0 34px, rgba(191, 197, 200, .16) 35px 36px, transparent 38px 80px);
  filter: blur(.3px);
  mix-blend-mode: screen;
  transform: translate3d(calc(var(--progress) * -18px), calc(var(--progress) * 38px), 0) rotate(calc(var(--progress) * 3deg));
}

.day-box { position: relative; z-index: 10; }

.tray {
  min-height: 100vh;
  position: relative;
  display: grid;
  place-items: center;
  padding: clamp(2rem, 5vw, 5rem);
}

.tray-frame, .box-base {
  width: min(1120px, 86vw);
  height: min(740px, 76vh);
  position: relative;
  border: 1px solid rgba(59, 41, 36, .18);
  background: rgba(255, 247, 234, .78);
  box-shadow: 0 34px 80px rgba(59, 41, 36, .18), inset 0 0 0 12px rgba(216, 206, 192, .26);
}

.tray-frame::before, .box-lid::before {
  content: "";
  position: absolute;
  inset: 1.1rem;
  pointer-events: none;
  background-image:
    radial-gradient(circle, rgba(59,41,36,.16) 0 1px, transparent 1.3px),
    linear-gradient(90deg, rgba(185,154,214,.16) 50%, transparent 0);
  background-size: 18px 18px, 84px 1px;
  opacity: .38;
  mask-image: radial-gradient(ellipse, #000 48%, transparent 76%);
}

.box-base {
  border-radius: 2.6rem;
  background: linear-gradient(145deg, #efe2d4, var(--veil-ivory));
  perspective: 1200px;
}

.under-tray {
  position: absolute;
  inset: 3rem;
  border-radius: 2rem;
  background:
    linear-gradient(90deg, rgba(169,184,143,.22) 0 1px, transparent 1px 33%),
    linear-gradient(0deg, rgba(127,169,201,.18) 0 1px, transparent 1px 50%),
    rgba(255,247,234,.68);
  box-shadow: inset 0 0 35px rgba(59,41,36,.12);
}

.hidden-compartment { position: absolute; border: 1px solid rgba(59,41,36,.16); background: rgba(255,247,234,.64); }
.oval-compartment { left: 7%; top: 11%; width: 38%; height: 50%; border-radius: 50%; display: grid; place-items: center; text-align: center; font-family: var(--serif-romance); font-size: 1.4rem; }
.rectangle-compartment { right: 8%; top: 14%; width: 34%; height: 22%; border-radius: 2rem; }
.round-compartment { right: 12%; bottom: 13%; width: 26%; aspect-ratio: 1; border-radius: 50%; }

.box-lid {
  position: absolute;
  inset: 0;
  border-radius: 2.6rem;
  background:
    linear-gradient(135deg, rgba(255,255,255,.26), transparent 38%),
    linear-gradient(145deg, var(--veil-ivory), #f2e7d8 70%, var(--pearl-shadow));
  transform: translate(calc(var(--progress) * -58vw), calc(var(--progress) * -42vh)) rotate(calc(var(--progress) * -16deg));
  transform-origin: 18% 16%;
  box-shadow: 0 42px 86px rgba(59, 41, 36, .22), inset 0 0 0 14px rgba(255,255,255,.34);
  transition: box-shadow .2s linear;
  overflow: hidden;
}

.box-lid h1 {
  position: absolute;
  left: 50%; top: 51%;
  transform: translate(-50%, -50%);
  margin: 0;
  font-family: var(--serif-romance);
  font-size: clamp(4rem, 12vw, 10rem);
  font-weight: 500;
  letter-spacing: .02em;
  color: rgba(59, 41, 36, .84);
  text-shadow: 0 1px rgba(255,255,255,.9), 0 10px 30px rgba(59,41,36,.1);
}

.embossed {
  position: absolute;
  left: 50%; bottom: 20%;
  transform: translateX(-50%);
  width: 80%;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .25em;
  font-size: .72rem;
}

.ribbon-cross { position: absolute; background: rgba(185, 154, 214, .38); box-shadow: inset 0 0 0 1px rgba(59,41,36,.08); mix-blend-mode: multiply; }
.ribbon-v { width: 7.2rem; inset-block: 0; left: 18%; }
.ribbon-h { height: 5.2rem; inset-inline: 0; top: 65%; background: rgba(217, 143, 163, .28); }

.wax-seal, .final-seal {
  display: grid;
  place-items: center;
  width: 5.6rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 26%, #e6a9b7, var(--pressed-rose) 58%, #a66172);
  color: var(--veil-ivory);
  font-family: var(--serif-display);
  font-size: .9rem;
  line-height: .85;
  text-align: center;
  box-shadow: 0 12px 22px rgba(59,41,36,.28), inset -7px -9px 14px rgba(59,41,36,.14);
}

.wax-seal { position: absolute; left: calc(18% + .8rem); top: calc(65% - 2.8rem); z-index: 2; }

.lace-aperture {
  position: absolute;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: conic-gradient(from 10deg, var(--sugared-violet) 0 8deg, transparent 8deg 16deg), rgba(255,247,234,.38);
  padding: .9rem;
  box-shadow: inset 0 0 0 2px rgba(185,154,214,.42), 0 0 0 10px rgba(255,247,234,.55);
}
.lace-aperture span { width: 100%; height: 100%; border-radius: 50%; border: 1px dashed rgba(59,41,36,.24); background: rgba(255,247,234,.72); }
.lace-aperture.small { width: 11rem; height: 7.6rem; left: 64%; top: 18%; transform: rotate(-8deg); }
.lace-aperture.wide { width: min(42vw, 470px); height: min(58vh, 520px); right: 7%; top: 9%; opacity: .78; transform: rotate(9deg); }

.corner-flourish { position: absolute; font-family: var(--serif-display); color: rgba(59,41,36,.28); font-size: 2rem; }
.c1 { left: 3rem; top: 2.4rem; } .c2 { right: 3rem; top: 2.4rem; transform: rotate(90deg); }
.c3 { left: 3rem; bottom: 2.4rem; transform: rotate(-90deg); } .c4 { right: 3rem; bottom: 2.4rem; transform: rotate(180deg); }
.scroll-note { position: absolute; bottom: 4vh; left: 50%; transform: translateX(-50%); letter-spacing: .22em; text-transform: uppercase; font-size: .7rem; }

.pearl-nav {
  position: fixed;
  left: clamp(1.6rem, 3vw, 3.1rem);
  top: 50%;
  transform: translateY(-50%);
  z-index: 60;
  display: grid;
  gap: 1.05rem;
}
.pearl-pin { position: relative; width: 1rem; height: 1rem; padding: 0; border: 0; border-radius: 50%; background: radial-gradient(circle at 30% 25%, #fff, var(--silver-spoon) 62%, #8f979b); box-shadow: 0 0 0 4px rgba(255,247,234,.72), 0 5px 10px rgba(59,41,36,.22); cursor: pointer; }
.pearl-pin span { position: absolute; left: 1.55rem; top: 50%; transform: translateY(-50%); opacity: 0; white-space: nowrap; font: 700 .62rem var(--sans-calm); text-transform: uppercase; letter-spacing: .16em; transition: opacity .25s; color: var(--cake-ink); }
.pearl-pin.active { background: radial-gradient(circle at 28% 22%, #fff, var(--pressed-rose) 64%, #9a5f69); }
.pearl-pin.active span, .pearl-pin:hover span { opacity: 1; }
.silk-thread { position: absolute; left: .43rem; top: .5rem; width: 2px; height: var(--thread-height, 1rem); background: linear-gradient(var(--pressed-rose), var(--borrowed-blue)); z-index: -1; opacity: .55; }

.oval-frame { border-radius: 50% / 44%; transform: rotate(-1.4deg); }
.chapter-number { position: absolute; left: 9%; top: 10%; font-family: var(--serif-display); font-size: clamp(4rem, 10vw, 9rem); color: rgba(185,154,214,.26); }
.vellum-card { position: absolute; left: 12%; top: 25%; width: min(33rem, 46vw); padding: 2.2rem; background: rgba(255,247,234,.62); backdrop-filter: blur(2px); border: 1px solid rgba(59,41,36,.16); box-shadow: 0 18px 34px rgba(59,41,36,.13); }
.label, .ribbon-label { font: 700 .72rem var(--sans-calm); text-transform: uppercase; letter-spacing: .28em; color: var(--pressed-rose); }
h2 { font-family: var(--serif-romance); font-size: clamp(2.5rem, 6vw, 6rem); line-height: .88; font-weight: 500; margin: .4rem 0 1rem; }
p { line-height: 1.65; }
.veil-sheet { position: absolute; inset: 10% 5% 8% 50%; background: linear-gradient(115deg, rgba(255,255,255,.6), rgba(185,154,214,.16), transparent); border-radius: 52% 48% 60% 40%; mix-blend-mode: screen; animation: veilBreath 7s ease-in-out infinite; }
.petal { position: absolute; width: 2.6rem; height: 1.1rem; border-radius: 100% 0 100% 0; background: var(--pressed-rose); opacity: .58; }
.petal-a { right: 25%; bottom: 25%; animation: drift 9s ease-in-out infinite; }
.petal-b { right: 13%; top: 34%; background: var(--sugared-violet); animation: drift 11s ease-in-out infinite reverse; }

.scallop-frame { border-radius: 3rem; background: radial-gradient(circle at 14px 14px, rgba(255,247,234,.98) 0 11px, transparent 12px) 0 0/28px 28px, rgba(255,247,234,.78); }
.ribbon-label { position: absolute; left: 0; right: 0; top: 18%; padding: 1rem; text-align: center; background: rgba(217,143,163,.3); color: var(--cake-ink); }
.vow-slip { position: absolute; left: 15%; top: 30%; width: min(33rem, 52vw); padding: 2.3rem; background: #fffaf1; transform: rotate(-2.4deg); box-shadow: 0 20px 40px rgba(59,41,36,.15); border: 1px solid rgba(59,41,36,.16); }
.ticket { font-family: var(--serif-display); color: var(--borrowed-blue); letter-spacing: .14em; }
.signature { margin-top: 1.2rem; font-family: var(--serif-romance); font-style: italic; font-size: 1.35rem; }
.frosting-line { position: absolute; right: 8%; bottom: 12%; width: 55%; height: 30%; overflow: visible; }
.frosting-line path { fill: none; stroke: var(--sugared-violet); stroke-width: 9; stroke-linecap: round; stroke-dasharray: 900; stroke-dashoffset: calc(900 - (var(--progress) * 900)); filter: drop-shadow(0 4px 0 rgba(255,247,234,.8)); }
.dragees i, .rolling-pearls i { position: absolute; width: .72rem; height: .72rem; border-radius: 50%; background: radial-gradient(circle at 28% 22%, #fff, var(--silver-spoon) 65%, #899297); box-shadow: 0 5px 12px rgba(59,41,36,.2); }
.dragees i:nth-child(1){right:31%;top:22%}.dragees i:nth-child(2){right:21%;top:36%}.dragees i:nth-child(3){right:36%;bottom:26%}.dragees i:nth-child(4){right:14%;bottom:20%}.dragees i:nth-child(5){right:48%;top:42%}.dragees i:nth-child(6){right:8%;top:58%}

.ribbon-frame { border-radius: 1.6rem 10rem 1.6rem 10rem; background: linear-gradient(90deg, rgba(127,169,201,.24) 0 25%, rgba(255,247,234,.78) 25% 75%, rgba(169,184,143,.2) 75%); }
.blue-envelope { position: absolute; left: 16%; top: 20%; width: min(48rem, 66vw); min-height: 25rem; padding: 6rem 4rem 3rem; background: rgba(127,169,201,.32); border: 1px solid rgba(59,41,36,.18); box-shadow: 0 24px 44px rgba(59,41,36,.16); transform: rotate(1.5deg); overflow: hidden; }
.envelope-flap { position: absolute; left: 0; right: 0; top: 0; height: 8rem; background: linear-gradient(155deg, rgba(255,247,234,.5) 49%, transparent 50%), linear-gradient(205deg, rgba(255,247,234,.5) 49%, transparent 50%); border-bottom: 1px solid rgba(59,41,36,.14); transform-origin: top; transform: rotateX(calc(var(--progress) * -34deg)); }
.spoon { position: absolute; right: 13%; bottom: 16%; width: 3rem; height: 17rem; border-radius: 45% 45% 1rem 1rem; background: linear-gradient(90deg, #8e989d, var(--silver-spoon), #f5f5f1, #9aa4a8); transform: rotate(47deg); box-shadow: 0 18px 28px rgba(59,41,36,.17); }
.spoon::before { content:""; position:absolute; top:-4rem; left:-1.2rem; width:5.4rem; height:6.3rem; border-radius:50%; background: inherit; }
.cross-stitches span { position:absolute; width:1.1rem; height:1.1rem; }
.cross-stitches span::before, .cross-stitches span::after { content:""; position:absolute; left:50%; top:0; width:2px; height:100%; background:var(--pressed-rose); }
.cross-stitches span::before { transform:rotate(45deg); } .cross-stitches span::after { transform:rotate(-45deg); }
.cross-stitches span:nth-child(1){left:11%;bottom:18%}.cross-stitches span:nth-child(2){left:15%;bottom:25%}.cross-stitches span:nth-child(3){right:12%;top:14%}.cross-stitches span:nth-child(4){right:19%;top:21%}.cross-stitches span:nth-child(5){right:31%;bottom:18%}

.fan-frame { border-radius: 4rem; overflow: hidden; background: radial-gradient(circle at 50% 110%, rgba(185,154,214,.22), transparent 44%), rgba(255,247,234,.82); }
.fan-note { position: absolute; left: 50%; bottom: 12%; width: 18rem; height: 25rem; padding: 2rem; transform-origin: 50% 100%; background: rgba(255,250,241,.85); border: 1px solid rgba(59,41,36,.15); box-shadow: 0 16px 30px rgba(59,41,36,.12); }
.fan-note b { display:block; font-family: var(--serif-romance); font-size: 3rem; font-weight: 500; }
.fan-note span { line-height: 1.55; }
.n1 { transform: translateX(-50%) rotate(-24deg); } .n2 { transform: translateX(-50%) rotate(0deg); } .n3 { transform: translateX(-50%) rotate(24deg); }
.tray-pearl h2 { position: absolute; left: 12%; top: 14%; }
.pearl-copy { position: absolute; left: 13%; top: 42%; width: 21rem; }
.rolling-pearls i:nth-child(1){left:12%;bottom:16%}.rolling-pearls i:nth-child(2){left:24%;bottom:21%}.rolling-pearls i:nth-child(3){left:37%;bottom:15%}.rolling-pearls i:nth-child(4){left:50%;bottom:22%}.rolling-pearls i:nth-child(5){left:64%;bottom:17%}.rolling-pearls i:nth-child(6){left:77%;bottom:24%}.rolling-pearls i:nth-child(7){left:87%;bottom:16%}

.moon-frame { border-radius: 50%; width: min(790px, 82vw); height: min(790px, 82vw); background: radial-gradient(circle, rgba(255,247,234,.94) 0 49%, rgba(216,206,192,.64) 50% 53%, rgba(255,247,234,.58) 54%); }
.moon-frame::after { content:""; position:absolute; inset:-1.2rem; border-radius:50%; background: conic-gradient(var(--veil-ivory) 0 7deg, transparent 7deg 14deg); z-index:-1; }
.cake-tier { position:absolute; inset:14%; border-radius:50%; display:grid; place-items:center; align-content:center; text-align:center; padding:4rem; background: rgba(255,247,234,.78); border: 1px dashed rgba(59,41,36,.2); }
.cake-tier h2 { max-width: 34rem; }
.cake-tier p { max-width: 31rem; }
.moon-doily { position:absolute; inset:4%; border-radius:50%; border: 1px solid rgba(185,154,214,.45); background: radial-gradient(circle at 72% 34%, rgba(216,206,192,.65) 0 17%, transparent 17.4%), radial-gradient(circle at 40% 70%, rgba(185,154,214,.16), transparent 34%); mask-image: radial-gradient(circle, transparent 0 18%, #000 18.5%); opacity:.75; }
.cake-knife { position:absolute; right:-3%; top:55%; width: 5rem; height: 22rem; background: linear-gradient(90deg, #7c8589, var(--silver-spoon), #fff, #9fa8ac); transform: rotate(62deg); border-radius: 100% 100% .6rem .6rem; box-shadow: 0 20px 36px rgba(59,41,36,.18); }
.moon-orbit-text { position:absolute; inset:-8%; display:grid; place-items:center; font: 700 .75rem var(--sans-calm); text-transform:uppercase; letter-spacing:.34em; color: rgba(59,41,36,.44); animation: orbit 28s linear infinite; }
.final-seal { position:relative; width:4.8rem; margin-top:1rem; }

@keyframes veilBreath { 0%,100%{ transform: translateY(0) skewX(-4deg); opacity:.5 } 50%{ transform: translateY(-1.5rem) skewX(5deg); opacity:.75 } }
@keyframes drift { 0%,100%{ transform: translate(0,0) rotate(0deg) } 50%{ transform: translate(-2.5rem,1.5rem) rotate(28deg) } }
@keyframes orbit { to { transform: rotate(360deg); } }

@media (max-width: 760px) {
  body::before { inset: .6rem; border-radius: 1.2rem; }
  .pearl-nav { left: 1rem; }
  .tray { padding: 4rem 1.4rem; }
  .tray-frame, .box-base { width: 90vw; height: 76vh; }
  .vellum-card, .vow-slip, .blue-envelope { left: 10%; width: 78%; padding: 1.6rem; }
  .blue-envelope { padding-top: 5rem; }
  .lace-aperture.small { left: 52%; }
  .ribbon-v { left: 12%; width: 4rem; }
  .tray-pearl h2, .pearl-copy { left: 12%; width: 72%; }
  .fan-note { width: 13rem; height: 20rem; }
  .moon-frame { height: 90vw; }
}