:root {
  --ink: #f7f4ed;
  --ink-soft: #c6c2bb;
  --muted: #8f8a98;
  --night: #282638;
  --night-deep: #1c1b29;
  --purple: #aca2e9;
  --coral: #e37d69;
  --gold: #e6bd70;
  --green: #8fae8d;
  --line: rgba(247, 244, 237, 0.16);
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow: hidden; }
body { margin: 0; color: var(--ink); background: var(--night); font-family: Arial, Helvetica, sans-serif; line-height: 1.55; }
body.gift-closed { overflow: hidden; }
button { font: inherit; cursor: pointer; }
img { max-width: 100%; }

.intro-screen { position: fixed; inset: 0; z-index: 10; display: grid; place-items: center; color: var(--ink); background: var(--night); transition: opacity 600ms ease, visibility 600ms ease; }
.intro-screen.is-leaving { opacity: 0; visibility: hidden; pointer-events: none; }
.intro-screen__inner { width: min(100% - 48px, 780px); text-align: center; }
.intro-screen h1 { margin: 0 0 58px; font-family: Georgia, "Times New Roman", serif; font-size: clamp(4.5rem, 10vw, 8.6rem); font-weight: 400; letter-spacing: -0.07em; line-height: 0.93; }
.intro-screen h1 em { color: var(--purple); font-style: italic; }
.reveal-button { display: flex; align-items: center; gap: 30px; width: fit-content; margin: 0 auto; border: 1px solid var(--purple); padding: 14px 17px; color: var(--night); background: var(--purple); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; transition: background 160ms ease, transform 160ms ease; }
.reveal-button span { font-size: 1rem; transition: transform 160ms ease; }
.reveal-button:hover, .reveal-button:focus-visible { background: #c7bff5; transform: translateY(-2px); }
.reveal-button:hover span, .reveal-button:focus-visible span { transform: translateX(4px); }

.site-content { position: relative; width: 100%; height: 100svh; opacity: 1; transition: opacity 400ms ease; }
.site-content.is-hidden { opacity: 0; pointer-events: none; }
.story-ui { position: absolute; z-index: 4; top: 26px; right: 32px; left: 32px; display: flex; align-items: center; justify-content: space-between; pointer-events: none; }
.back-button { border: 0; padding: 0; color: var(--ink-soft); background: transparent; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; pointer-events: auto; }
.back-button:hover, .back-button:focus-visible { color: var(--purple); }
.back-button[hidden] { visibility: hidden; pointer-events: none; }
.sound-button { border: 0; padding: 0; color: var(--ink-soft); background: transparent; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; pointer-events: auto; }
.sound-button:hover, .sound-button:focus-visible { color: var(--purple); }
.story-stage { position: relative; width: 100%; height: 100%; overflow: hidden; }
.story-panel { position: absolute; inset: 0; visibility: hidden; opacity: 0; transform: translateX(42px); transition: opacity 460ms ease, transform 460ms ease, visibility 460ms ease; }
.story-panel.is-active { visibility: visible; opacity: 1; transform: translateX(0); }
.panel-inner { position: relative; display: flex; flex-direction: column; justify-content: center; width: min(100% - 56px, 1080px); height: 100%; margin: 0 auto; padding: 76px 0 82px; }
.eyebrow { margin: 0 0 24px; color: var(--purple); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em; }
.story-panel h2 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(4rem, 9vw, 8.4rem); font-weight: 400; letter-spacing: -0.075em; line-height: 0.91; }
.story-panel h2 em { color: var(--purple); font-style: italic; }
.panel-subtext { margin: 30px 0 0; color: var(--ink-soft); font-size: 1rem; }

.next-button { position: absolute; bottom: 28px; left: 50%; display: inline-flex; align-items: center; gap: 28px; border: 0; border-bottom: 1px solid var(--ink-soft); padding: 0 0 7px; color: var(--ink); background: transparent; font-size: 0.75rem; font-weight: 700; transform: translateX(-50%); transition: color 160ms ease, border-color 160ms ease; }
.next-button span { color: var(--coral); font-size: 1rem; transition: transform 160ms ease; }
.next-button:hover, .next-button:focus-visible { border-color: var(--purple); color: var(--purple); }
.next-button:hover span, .next-button:focus-visible span { transform: translateX(4px); }
.next-button--restart span { color: var(--green); }

.story-panel--letter { background: #f1eee8; color: var(--night); }
.story-panel--letter .panel-inner { width: min(100% - 56px, 1100px); }
.story-panel--letter .eyebrow, .story-panel--letter .next-button { color: #756b84; }
.story-panel--letter .next-button { border-color: rgba(40, 38, 56, 0.3); }
.story-panel--letter .next-button span { color: var(--coral); }
.letter-layout { display: grid; grid-template-columns: 1.05fr 0.72fr; align-items: center; gap: clamp(50px, 10vw, 140px); }
.letter-layout h2 { color: var(--night); font-size: clamp(3.2rem, 6.5vw, 6.4rem); }
.letter-layout h2 em { color: #a79be5; }
.letter-copy { max-width: 430px; color: #625d66; font-size: clamp(0.9rem, 1.2vw, 1.04rem); }
.letter-copy p { margin: 0 0 21px; }
.letter-copy strong { color: var(--night); }

.story-panel--image { background: var(--night-deep); }
.panel-inner--image { align-items: center; }
.panel-inner--image img { display: block; width: auto; max-width: min(86vw, 720px); max-height: min(68vh, 620px); object-fit: contain; border: 8px solid #fff; box-shadow: 0 24px 70px rgba(0, 0, 0, 0.28); }

.story-panel--triple-t { background: #3b3650; }
.panel-inner--triple-t { display: grid; grid-template-columns: 0.8fr 1.2fr; grid-template-rows: 1fr auto; align-items: center; gap: 35px clamp(40px, 9vw, 120px); }
.triple-t__copy h2 { font-size: clamp(3.2rem, 6.4vw, 6.4rem); }
.triple-t__copy > p:last-child { max-width: 270px; margin: 28px 0 0; color: var(--ink-soft); font-size: 0.95rem; }
.panel-inner--triple-t > img { display: block; width: 100%; max-height: 68vh; object-fit: contain; border: 8px solid #fff; box-shadow: 0 24px 70px rgba(0, 0, 0, 0.28); }

.story-panel--closing { background: #f1eee8; color: var(--night); }
.story-panel--closing .panel-inner { align-items: center; text-align: center; }
.story-panel--closing h2 { color: var(--night); font-size: clamp(3.4rem, 7vw, 7rem); }
.story-panel--closing h2 em { color: #a79be5; }
.closing-copy { max-width: 480px; margin: 34px auto 0; color: #625d66; font-size: 1.02rem; }
.closing-copy p { margin: 0 0 18px; }
.closing-copy .signature { margin-top: 30px; color: var(--night); font-family: Georgia, "Times New Roman", serif; font-size: 1.18rem; font-style: italic; }
.story-panel--closing .next-button { color: var(--night); border-color: rgba(40, 38, 56, 0.3); }

.confetti { position: fixed; z-index: 20; top: 37%; left: 50%; width: var(--size, 10px); height: var(--height, 18px); border-radius: 2px; pointer-events: none; opacity: 0; animation: confetti-burst 1700ms cubic-bezier(.18,.78,.22,1) forwards; }
.confetti[data-shape="circle"] { border-radius: 50%; }
.confetti[data-shape="diamond"] { height: var(--size, 10px); transform-origin: center; }
@keyframes confetti-burst {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.25) rotate(0deg); }
  12% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--x)), var(--y)) scale(1) rotate(var(--rotation)); }
}

@media (max-width: 760px) {
  .story-ui { top: 20px; right: 20px; left: 20px; }
  .panel-inner { width: min(100% - 36px, 1080px); padding-top: 62px; padding-bottom: 74px; }
  .story-panel h2 { font-size: clamp(3.4rem, 14vw, 6rem); }
  .letter-layout, .panel-inner--triple-t { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 25px; }
  .letter-layout h2 { font-size: clamp(2.8rem, 11vw, 5rem); }
  .letter-copy { max-width: 560px; font-size: 0.88rem; }
  .letter-copy p { margin-bottom: 13px; }
  .panel-inner--image img { max-width: 92vw; max-height: 58vh; border-width: 6px; }
  .panel-inner--triple-t { align-items: center; text-align: center; }
  .triple-t__copy > p:last-child { max-width: 390px; margin-top: 18px; }
  .panel-inner--triple-t > img { max-width: 92vw; max-height: 48vh; border-width: 6px; }
  .closing-copy { max-width: 400px; font-size: 0.94rem; }
}

@media (max-width: 480px) {
  .intro-screen h1 { font-size: clamp(4rem, 18vw, 6rem); }
  .panel-inner { width: min(100% - 28px, 1080px); }
  .story-panel h2 { font-size: clamp(3rem, 14vw, 5rem); }
  .letter-layout h2 { font-size: clamp(2.65rem, 12vw, 4.5rem); }
  .letter-copy { font-size: 0.8rem; line-height: 1.42; }
  .letter-copy p { margin-bottom: 10px; }
  .panel-inner--image img { max-height: 52vh; }
  .panel-inner--triple-t > img { max-height: 43vh; }
  .closing-copy { margin-top: 25px; font-size: 0.88rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; }
}