/* ============================================================
   点亮这一岁 · 生日纪念站（浅色版）
   取材料包的「白天」世界：暖白纸底 #fbfaf4 / 天空蓝 #c4dff0 /
   充气字渐变 #ffffff→#cfe6f7→#aabdd4 / 荧光黄徽章 / mono 直角标签
   ============================================================ */

@font-face { font-family:'tiktok'; src:url('fonts/TikTokSans.woff2') format('woff2'); font-weight:100 900; font-display:swap; }
@font-face { font-family:'mono'; src:url('fonts/GeistMono.woff2') format('woff2'); font-weight:100 900; font-display:swap; }
@font-face { font-family:'tronica-mono'; src:url('fonts/DepartureMono-Regular.woff2') format('woff2'); font-weight:400; font-display:swap; }

:root {
  /* 主题基底（light，来自设计库实测值） */
  --bg:#fbfaf4;
  --elevated:#efede7;
  --ink:#141412;
  --text:#1b2b3a;
  --text2:rgba(54,54,48,.66);
  --text3:rgba(54,54,48,.42);
  --text4:rgba(54,54,48,.2);
  --line:rgba(54,54,48,.12);
  /* 场景色（设计库白天场景，像素估算值） */
  --sky:#c4dff0;
  --sky-glow:#e5eff0;
  --sky-deep:#aabdd4;
  --inflatable-hi:#cfe6f7;
  /* 强调色 */
  --lime:#c4dbe7;
  --coral:#ee7b69;
  --cyan:#6bddef;
  --orange:#feb643;
  --purple:#b06bff;
  --warm-panel:#d9d3cc;
  --lilac-panel:#e7e4f4;
  /* 字体 */
  --sans:"tiktok",sans-serif;
  --mono:"mono",monospace;
  --display:"tronica-mono",monospace;
  /* 动效（设计库实测值） */
  --dur-fast:.15s;
  --dur-hover:.2s;
  --ease-std:cubic-bezier(.4,0,.2,1);
  --ease-out:cubic-bezier(0,0,.2,1);
  --ease-66:cubic-bezier(.66,0,.01,1);
  --pop:cubic-bezier(.34,1.56,.64,1);
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--sans); font-size:16px; line-height:1.5;
  overflow-x:hidden;
}
button { font:inherit; }
:focus-visible { outline:2px solid #617f91; outline-offset:2px; }

/* Owner-selected childhood objects: one transparent atlas, mobile first. */
#childhood-fall {
  position:fixed; inset:0; z-index:2; overflow:hidden;
  pointer-events:none; contain:layout paint; --childhood-size:82px;
}
#childhood-fall[hidden], .childhood-object[hidden] { display:none; }
.childhood-object {
  position:absolute; left:0; top:0;
  width:var(--childhood-size); height:var(--childhood-size);
  background-image:url('childhood/objects-atlas.webp');
  background-size:300% 300%; background-repeat:no-repeat;
  filter:drop-shadow(0 5px 7px rgba(76,115,147,.13));
  will-change:transform; pointer-events:none;
}
@media (prefers-reduced-motion:reduce) {
  .childhood-object { will-change:auto; }
}

/* ---------- 画布与顶标 ---------- */
#gl { position:fixed; inset:0; width:100%; height:100%; display:block; z-index:0; }

.mono { font-family:var(--display); text-transform:uppercase; letter-spacing:.06em; }
.topline {
  position:fixed; inset:0 0 auto 0; z-index:50; pointer-events:none;
  display:flex; justify-content:space-between; padding:14px 18px;
  font-size:12px; color:var(--text);
  background:linear-gradient(to bottom, rgba(251,250,244,.85), rgba(251,250,244,0));
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  -webkit-mask-image:linear-gradient(to bottom,#000 55%,transparent); mask-image:linear-gradient(to bottom,#000 55%,transparent);
}
.tl-dim { color:var(--text3); }
/* 入夜（烟火时刻）：顶标转深底浅字，成为夜空里的 HUD */
body.night .topline {
  color:rgba(240,244,255,.92);
  background:linear-gradient(to bottom, rgba(12,18,44,.55), rgba(12,18,44,0));
}
body.night .tl-dim { color:rgba(240,244,255,.45); }

/* ---------- 叙事流骨架 ---------- */
#flow { position:relative; z-index:1; }
.panel {
  min-height:100vh; min-height:100svh;
  padding:96px 56px; display:flex; flex-direction:column; justify-content:center;
  pointer-events:none; /* 点击穿透到画布（戳泡泡）；交互元素单独恢复 */
}
/* 荧光黄徽章化 kicker（设计库 pill 母题） */
.kicker {
  display:inline-block; align-self:flex-start;
  background:var(--lime); color:#000; border-radius:18px;
  font-size:11.5px; letter-spacing:.1em; padding:3px 7px; margin:0 0 20px;
}
.letter-entry .kicker, .hero .kicker { align-self:center; }
.h2 { font-weight:700; text-transform:uppercase; letter-spacing:-.02em; line-height:1.05; font-size:clamp(1.9rem,4vw,2.9rem); margin:0 0 14px; color:var(--text); }
.lede { font-size:1.05rem; color:var(--text2); max-width:62ch; line-height:1.6; margin:0 0 24px; }
.lede strong { color:var(--ink); }
.note { font-size:11px; color:var(--text3); margin:14px 0 0; }
.lime { color:#617f91; }

/* ---------- 01 HERO ---------- */
.hero { align-items:center; text-align:center; justify-content:center; position:relative; overflow:hidden; }
.prompt {
  position:absolute; bottom:92px; left:50%; transform:translateX(-50%);
  white-space:nowrap;
  font-size:clamp(13px,1.6vw,16px); color:var(--text2);
  animation:prompt-pulse 2.4s var(--ease-std) infinite;
}
.caret { color:#617f91; animation:caret-blink 1.1s steps(1) infinite; }
@keyframes caret-blink { 50% { opacity:0; } }
@keyframes prompt-pulse { 0%,100% { opacity:.6; } 50% { opacity:1; } }
.hero-title { text-align:center; }
.hero-title[hidden], .scroll-hint[hidden] { display:none; }
.display {
  font-weight:700; text-transform:uppercase; line-height:.98; letter-spacing:-.025em;
  font-size:clamp(3rem,11vw,7.5rem); margin:0 0 18px; color:var(--text);
  text-shadow:0 1px 0 rgba(255,255,255,.6);
}
/* 充气字（设计库浅色 hero 的渐变配方） */
.inflatable-word {
  background:linear-gradient(165deg,#ffffff 8%,var(--inflatable-hi) 48%,var(--sky-deep) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 10px 18px rgba(90,130,190,.35));
}
.hero-sub { color:var(--text2); font-size:1.1rem; margin:0; }
.scroll-hint {
  position:absolute; bottom:30px; left:50%; transform:translateX(-50%);
  font-size:12px; color:var(--text2);
  animation:hint-bob 1.6s var(--ease-std) infinite;
}
@keyframes hint-bob { 0%,100% { transform:translate(-50%,0); } 50% { transform:translate(-50%,8px); } }
.fade-up { animation:fade-up .9s var(--ease-out) both; }
@keyframes fade-up { from { opacity:0; transform:translateY(26px); } to { opacity:1; transform:translateY(0); } }

/* 贴纸（源站 /sticker_img 素材，惊喜小互动：hover 弹起 / 点击 boing） */
.hero-sticker {
  position:absolute; pointer-events:auto; cursor:pointer; user-select:none;
  filter:drop-shadow(0 12px 20px rgba(60,90,140,.28));
  transition:transform .45s var(--pop);
  animation:sticker-float 5s ease-in-out infinite;
}
.st-1 { width:clamp(70px,8.5vw,116px); right:13%; top:15%; transform:rotate(-12deg); }
.st-2 { width:clamp(56px,6.5vw,92px); left:9%; top:24%; transform:rotate(10deg); animation-delay:-1.6s; }
.st-3 { width:clamp(48px,5.5vw,80px); right:24%; bottom:16%; transform:rotate(14deg); animation-delay:-3.2s; }
@keyframes sticker-float { 0%,100% { translate:0 0; } 50% { translate:0 -10px; } }
.st-1:hover { transform:rotate(-4deg) scale(1.16); }
.st-2:hover { transform:rotate(2deg) scale(1.16); }
.st-3:hover { transform:rotate(6deg) scale(1.16); }
.hero-sticker.boing { animation:boing .6s var(--pop); }
@keyframes boing { 0% { scale:1; } 35% { scale:1.28 .82; } 65% { scale:.9 1.12; } 100% { scale:1; } }
@media (prefers-reduced-motion: reduce) { .hero-sticker { animation:none; } }

/* ---------- 02 日历 ---------- */
.cal-grid {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(158px,1fr)); gap:10px;
  max-width:1240px; width:100%;
}
.cal-month { border:1px solid var(--line); background:rgba(255,255,255,.78); padding:10px; border-radius:18px; }
.cal-label { font-family:var(--display); font-size:11px; letter-spacing:.08em; color:#617f91; margin:0 0 8px; }
.cal-label .in-range { color:var(--text3); font-size:10px; margin-left:6px; }
.cal-week, .cal-days { display:grid; grid-template-columns:repeat(7,1fr); }
.cal-week span { font-family:var(--display); font-size:9px; color:var(--text3); text-align:center; padding:2px 0; }
.cal-days span {
  font-family:var(--mono); font-size:10.5px; text-align:center; padding:3px 0;
  color:var(--text2); border:1px solid transparent; aspect-ratio:1; display:grid; place-items:center;
}
.cal-days .blank { visibility:hidden; }
.cal-days .dim { color:var(--text4); }
.cal-days .day1 { background:var(--lime); color:#000; font-weight:700; }
.cal-days .day365 { border-color:#90bbce; color:#5f8d9f; }

/* ---------- 03 记忆 ---------- */
.mem-track {
  display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory;
  padding:6px 2px 18px; pointer-events:auto;
  scrollbar-width:thin; scrollbar-color:var(--text4) transparent;
}
.mem-track::-webkit-scrollbar { height:6px; }
.mem-track::-webkit-scrollbar-thumb { background:var(--text4); }
.mem-card { flex:0 0 min(430px,80vw); scroll-snap-align:start; text-decoration:none; color:inherit; padding:8px; }
.mem-preview {
  position:relative; aspect-ratio:1332/750; overflow:hidden;
  border:1px solid rgba(54,54,48,.16); display:grid; place-items:center;
  box-shadow:0 14px 28px rgba(60,90,140,.14);
  transition:transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.mem-card:hover .mem-preview { transform:translateY(-6px) rotate(-.5deg); box-shadow:0 22px 40px rgba(60,90,140,.2); }
.mem-ph { font-family:var(--display); font-size:12px; color:rgba(0,0,0,.45); text-transform:uppercase; letter-spacing:.1em; }
.mem-pill {
  position:absolute; top:8px; right:8px; background:var(--lime); color:#000;
  font-family:var(--display); font-size:11px; text-transform:uppercase; padding:0 4px;
}
.pv-warm  { background:var(--warm-panel); }
.pv-coral { background:var(--coral); }
.pv-icon  { background:#1d1d1b; }
.pv-lilac { background:var(--lilac-panel); }
.pv-cyan  { background:var(--cyan); }
.pv-icon .mem-ph, .pv-cyan .mem-ph { color:rgba(255,255,255,.6); }
.pv-empty { background:rgba(255,255,255,.5); border:2px dashed var(--text4); }
.pv-empty .mem-ph { color:var(--text3); }
.mem-meta { display:flex; justify-content:space-between; gap:10px; padding-top:12px; font-size:.82rem; text-transform:uppercase; }
.mem-title { font-weight:500; color:var(--ink); }
.mem-year { font-family:var(--display); font-variant-numeric:tabular-nums; color:var(--text2); white-space:nowrap; }
.mem-cap { font-size:.85rem; color:var(--text3); margin:6px 8px 0; line-height:1.55; }

/* ---------- 04 信件入口 ---------- */
.letter-entry { align-items:center; text-align:center; }
.letter-btn {
  pointer-events:auto; cursor:pointer; background:none; border:0; color:var(--text);
  font-weight:700; text-transform:uppercase; letter-spacing:-.02em; line-height:1.1;
  font-size:clamp(1.6rem,4.6vw,3.4rem);
  text-decoration:underline; text-underline-offset:8px; text-decoration-thickness:2px;
  transition:color var(--dur-hover) var(--ease-std), text-underline-offset var(--dur-hover) var(--ease-out);
  padding:8px; max-width:20em;
}
.letter-btn:hover { color:#e8654f; text-underline-offset:12px; }

/* ---------- 05 漂流瓶 ---------- */
.bottle-legend { list-style:none; display:flex; gap:22px; padding:0; margin:10px 0 0; font-size:12px; color:var(--text2); flex-wrap:wrap; }
.bottle-legend li { display:flex; align-items:center; gap:8px; }
.dot { width:10px; height:10px; display:inline-block; }
.dot-happy { background:#d9b6a5; }
.dot-sad { background:#90bbce; }
.dot-lost { background:#b3a5cc; }

/* ---------- 06 收尾 ---------- */
.closing { align-items:center; text-align:center; }
.closing-text {
  font-size:clamp(1.15rem,2.6vw,1.9rem); line-height:1.7; color:#4a4038;
  max-width:32em; margin:0;
}
.closing-text b { color:var(--ink); font-weight:600; }
.closing-note { margin-top:34px; color:#8a8073; }

/* ---------- 页脚 ---------- */
.doc-footer {
  position:relative; z-index:1; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
  padding:18px 56px; font-size:11px; color:var(--text3);
  pointer-events:none; background:rgba(251,250,244,.7);
}

/* ---------- 弹窗：愿望 ---------- */
.modal {
  position:fixed; inset:0; z-index:300; display:grid; place-items:center;
  background:rgba(40,60,100,.32); backdrop-filter:blur(8px); padding:20px;
}
.modal[hidden] { display:none; }
.modal-card {
  width:min(430px,92vw); background:#fffdf7; border:1px solid rgba(54,54,48,.22);
  box-shadow:0 30px 70px rgba(40,70,120,.25);
  padding:26px; animation:fade-up .5s var(--ease-out) both;
}
.modal-card label { display:block; font-size:12px; color:var(--text2); margin:0 0 10px; }
.modal-card input {
  width:100%; padding:12px; background:var(--bg); color:var(--ink);
  border:1px solid var(--text4); border-radius:18px; font-family:var(--sans); font-size:1rem;
  margin-bottom:14px;
}
.modal-card input:focus { border-color:#d9b6a5; outline:none; }
.btn-lime {
  width:100%; font-family:var(--display); text-transform:uppercase; font-size:14px;
  background:var(--lime); color:#000; border:0; border-radius:18px; padding:12px 18px;
  cursor:pointer; transition:filter var(--dur-fast) var(--ease-std), transform var(--dur-fast) var(--ease-std);
}
.btn-lime:hover { filter:brightness(1.04); transform:translateY(-1px); }
.modal-card .note { text-align:center; }

/* ---------- 弹窗：全屏信件 ---------- */
.letter-modal {
  position:fixed; inset:0; z-index:320; background:rgba(56,76,112,.4);
  backdrop-filter:blur(6px);
  display:grid; place-items:center; padding:4vh 18px;
}
.letter-modal[hidden] { display:none; }
.letter-sheet {
  width:min(720px,100%); max-height:92vh; overflow-y:auto;
  background:#fbfaf4; color:#000; border-radius:18px;
  border:1px solid rgba(54,54,48,.18);
  box-shadow:0 40px 90px rgba(30,55,100,.35);
  padding:34px clamp(20px,5vw,56px) 46px;
  animation:fade-up .5s var(--ease-out) both;
}
.letter-top { display:flex; justify-content:space-between; align-items:center; font-size:11px; color:#8a8779; margin-bottom:26px; }
.btn-ghost {
  font-size:12px; background:transparent; color:var(--ink); border:1px solid rgba(0,0,0,.3);
  padding:8px 14px; cursor:pointer; border-radius:18px;
  transition:border-color var(--dur-fast) var(--ease-std), background var(--dur-fast) var(--ease-std);
}
.btn-ghost:hover { border-color:#000; background:var(--lime); }
.letter-body h3 { font-size:clamp(1.6rem,4vw,2.4rem); font-weight:700; text-transform:uppercase; letter-spacing:-.02em; line-height:1.05; margin:0 0 20px; }
.letter-body p { font-size:1rem; line-height:1.625; color:rgba(54,54,48,.85); margin:0 0 16px; max-width:62ch; }
.letter-body .sig { font-family:var(--display); font-size:12px; text-transform:uppercase; color:#8a8779; margin-top:30px; }

/* ---------- 漂流瓶 Toast ---------- */
.toast {
  position:fixed; left:50%; bottom:30px; transform:translateX(-50%);
  z-index:400; width:min(520px,92vw);
  background:#fffdf7; border:1px solid rgba(54,54,48,.2); border-left:3px solid #d9b6a5;
  box-shadow:0 18px 44px rgba(40,70,120,.22);
  padding:14px 18px; font-family:var(--display); font-size:13px; line-height:1.6; color:var(--ink);
  animation:toast-in .35s var(--ease-out) both;
}
.toast[hidden] { display:none; }
.toast .t-cat { display:block; font-size:10px; letter-spacing:.1em; margin-bottom:4px; }
.toast.t-happy { border-left-color:#d9b6a5; } .toast.t-happy .t-cat { color:#977768; }
.toast.t-sad { border-left-color:#90bbce; } .toast.t-sad .t-cat { color:#5f8d9f; }
.toast.t-lost { border-left-color:#b3a5cc; } .toast.t-lost .t-cat { color:#8d7da4; }
@keyframes toast-in { from { opacity:0; transform:translate(-50%,14px); } to { opacity:1; transform:translate(-50%,0); } }
.toast.out { animation:toast-out .3s var(--ease-std) both; }
@keyframes toast-out { to { opacity:0; transform:translate(-50%,10px); } }

/* ---------- 响应式（设计库实测：移动 72px 16px） ---------- */
@media (max-width:1023px) {
  .panel { padding:72px 16px; }
  .doc-footer { padding:18px 16px; }
  .bottle-legend { gap:14px; }
  .st-1 { right:6%; } .st-2 { left:4%; } .st-3 { right:14%; }
}

/* ---------- 动效偏好（设计库原则：尊重 reduced-motion） ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  .prompt, .caret, .scroll-hint, .hero-sticker { animation:none; }
  .fade-up, .modal-card, .letter-sheet, .toast { animation-duration:.01s; }
  /* 揭示页与卡片弹出：直接落位，不弹不飘 */
  #wish-modal.revealed .reveal-word { animation:none!important; opacity:1; }
  .wish-stage, #wish-modal.popped .reveal-words, #wish-modal.popped .reveal-hud { transition-duration:.01s; }
  .dream-star, .dream-bokeh { animation:none; }
  .blow-button:not([hidden]) { animation:none; }
}

/* Candle ceremony — mobile first, true black until the wish is sealed. */
body.opening { background:#000; }
body.opening .topline, body.opening .hero-sticker { visibility:hidden; }
body.opening #hero { touch-action:none; }
body.opening .prompt {
  color:rgba(255,245,236,.78); font-size:15px; letter-spacing:.16em;
  bottom:16%; animation:none;
}
/* 吹蜡烛 = 许愿之后的「下一页」入口。
   纯黑舞台上必须够亮够大：实测原来 149×52、深棕 25% 透明度几乎看不见。 */
.blow-button {
  position:absolute; bottom:12%; left:50%; transform:translateX(-50%);
  pointer-events:auto; min-width:min(268px,80vw); min-height:66px;
  padding:12px 30px; display:flex; flex-direction:column; align-items:center; gap:3px;
  border:1px solid rgba(255,214,160,.55); border-radius:30px;
  background:linear-gradient(150deg,rgba(255,232,196,.20),rgba(255,190,116,.10) 62%,rgba(255,168,92,.16));
  color:#ffe9cf; cursor:pointer; backdrop-filter:blur(14px);
  box-shadow:0 0 34px rgba(255,178,102,.24),inset 0 1px 0 rgba(255,240,214,.42);
}
.blow-main {font-size:17px;font-weight:500;letter-spacing:.14em;}
.blow-sub {font-size:10px;letter-spacing:.2em;color:rgba(255,214,176,.82);}
/* 登场：从下方微微浮起，之后转为烛火般的呼吸光晕 */
.blow-button:not([hidden]) {animation:blow-enter .8s var(--pop) both,blow-breathe 2.6s ease-in-out .8s infinite;}
@keyframes blow-enter {from{opacity:0;transform:translateX(-50%) translateY(26px);}to{opacity:1;transform:translateX(-50%);}}
@keyframes blow-breathe {0%,100%{box-shadow:0 0 30px rgba(255,178,102,.2),inset 0 1px 0 rgba(255,240,214,.42);}
  50%{box-shadow:0 0 48px rgba(255,190,120,.36),inset 0 1px 0 rgba(255,240,214,.55);}}
.blow-button:hover {border-color:rgba(255,228,186,.9);}
.blow-button[hidden] { display:none; }
/* ---------- 许愿页：以蛋糕为圆心的滑动驱动全屏扩展 ---------- */
#wish-modal {
  position:fixed; inset:0; z-index:300;
  display:grid; place-items:center; padding:0; overflow:hidden;
  background:rgba(9,14,28,.72);
  /* --wp: 滑动进度 0→1；--wx/--wy: 蛋糕圆心（由 JS 写入）。圆心+半径共同构成扩展遮罩 */
  clip-path:circle(calc(var(--wp,0) * var(--wmax,150vmax)) at var(--wx,50%) var(--wy,43%));
  transition:clip-path .12s linear;
}
/* 松手后：够就顺势合拢成整屏，不够就弹回圆心 */
#wish-modal.snapping {transition:clip-path .5s cubic-bezier(.22,.72,.2,1);}
#wish-modal[hidden] { display:none; }
/* 扩张瞬间的暖色光幕：让「打开」像光从蛋糕里漫出来 */
.wish-expansion {position:absolute;inset:0;pointer-events:none;opacity:calc(var(--wp,0) * 1.25);
  background:radial-gradient(circle at var(--wx,50%) var(--wy,43%),
    rgba(255,214,158,.85) 0%,rgba(255,170,96,.42) 30%,rgba(255,140,70,.12) 55%,rgba(255,130,60,0) 76%);
  mix-blend-mode:screen;}
/* 扩展完成后暖光幕退场，把舞台让给浅蓝揭示页 */
#wish-modal.revealed .wish-expansion {opacity:0;transition:opacity .9s ease .25s;}

/* ===== 充气玻璃字组件（图一/图二共用）=====
   三层叠出气球感：::before 体积暗部（下方模糊副本）、主体渐变（上亮下深）、
   ::after 顶部斜向高光。data-text 必须与文本内容一致。 */
.bubble-word {
  position:relative; display:inline-block; white-space:nowrap;
  color:transparent;
  background:linear-gradient(178deg,#f7fcff 4%,#d3e9f9 30%,#96c0e6 60%,#6ea3d5 86%,#8ab7e0 100%);
  -webkit-background-clip:text; background-clip:text;
  filter:drop-shadow(0 3px 3px rgba(255,255,255,.8)) drop-shadow(0 13px 17px rgba(84,130,180,.42));
}
.bubble-word::before {          /* 体积暗部：让字读起来是鼓出来的 */
  content:attr(data-text); position:absolute; inset:0; z-index:-1;
  color:#4d7fac; filter:blur(7px); transform:translateY(.055em) scale(1.02);
}
.bubble-word::after {           /* 顶部高光 */
  content:attr(data-text); position:absolute; inset:0;
  background:linear-gradient(166deg,rgba(255,255,255,.98) 0%,rgba(255,255,255,.55) 20%,rgba(255,255,255,0) 46%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  transform:translate(-1.2%,-2.8%);
}

/* ===== 图二揭示页：独立透明玻璃字 + 同源天空光纹；保留真实的界面文字 ===== */
.reveal-stage {
  position:absolute; inset:0; overflow:hidden;
  background:#bfdef5;user-select:none;-webkit-user-select:none;
}
.reveal-sky {
  position:absolute;inset:0;width:100%;height:100%;object-fit:fill;pointer-events:none;
}
.reveal-hud {position:absolute;inset:0;font-family:var(--mono);font-weight:400;}
.reveal-hud>span {
  position:absolute;font-size:clamp(6px,1.3vw,12px);letter-spacing:.26em;
  color:#344f60;line-height:1.6;white-space:nowrap;
}
.reveal-hud .rh-tl {top:5.9%;left:7.35%;font-size:clamp(7px,1.5vw,14px);letter-spacing:.33em;}
.reveal-hud .rh-tl::after {content:"";display:block;width:3.4vw;max-width:32px;height:1px;background:#7599ac;margin-top:1vh;}
.reveal-hud .rh-tl-sub {top:9.75%;left:7.35%;}
.reveal-hud .rh-tr {top:6%;right:6.6%;display:flex;align-items:center;gap:3.8vw;font-size:clamp(5.5px,1.18vw,11px);letter-spacing:.2em;}
.reveal-hud .rh-tr b {font-weight:400;}
.reveal-hud .rh-burger {width:clamp(7px,2vw,20px);height:auto;opacity:.48;}
.reveal-hud .rh-bl {bottom:7.15%;left:7.35%;}
.reveal-hud .rh-bl::before {content:"";display:block;width:3.4vw;max-width:32px;height:1px;background:#7599ac;margin-bottom:1.1vh;}
.reveal-hud .rh-br {bottom:8.35%;right:6.6%;text-align:right;}
.reveal-hud .rh-br::after {content:"";display:block;width:3.4vw;max-width:32px;height:1px;background:#7599ac;margin:1.1vh 0 0 auto;}
.reveal-words {
  position:absolute;left:50%;top:49.6%;transform:translate(-50%,-50%);
  width:min(95%,90svh,1000px);pointer-events:none;
  transition:filter .7s ease,transform .7s var(--ease-out);
}
.reveal-word {
  display:block;width:100%;height:auto;opacity:0;filter:saturate(.84) brightness(1.025);
}
#wish-modal.revealed .reveal-word {animation:glass-reveal 1.1s cubic-bezier(.2,.65,.2,1) both;}
@keyframes glass-reveal {
  from {opacity:0;transform:translateY(16px) scale(.94);}
  to {opacity:1;transform:none;}
}
/* 许愿卡弹出时：揭示页轻轻退后（压暗 + 微缩），不抢焦点 */
#wish-modal.popped .reveal-words {filter:brightness(.93) saturate(.95);transform:translate(-50%,-50%) scale(.96);
  transition:filter .7s ease,transform .7s var(--ease-out);}
#wish-modal.popped .reveal-hud {opacity:.5;transition:opacity .7s ease;}
/* 滑动态：蛋糕轻微上移让位并压暗，像被「收进」屏幕。
   注意 #ceremony-stage 在 #flow 内部，与 #wish-modal 并非兄弟，故改用 body[data-phase] 驱动 */
body:has(#wish-modal.revealed:not([hidden])) .earth-composition {transform:translate(-50%,-50%);}
body:has(#wish-modal.popped) .cake-body {filter:brightness(.82) saturate(.92);}
.cake-body,.earth-composition {transition:transform .8s var(--ease-out),filter .8s var(--ease-out);}

/* 全屏许愿弹窗的卡片。
   ⚠️ 类名必须叫 wish-stage 不能叫 wish-page：wish.html 用 <body class="wish-page">
   作为整页容器，两者同名会互相覆盖（曾导致卡片被拉成全屏灰蓝竖柱）。 */
.wish-stage {
  position:relative; width:min(440px,88vw); max-height:88svh; overflow-y:auto;
  /* 底部留出 60px：屏幕底部的「↑ 上滑」提示会浮在这一带，卡片内容不能压到它 */
  padding:38px 34px 68px; border-radius:32px; text-align:center; color:#1d3b55;
  background:linear-gradient(158deg,rgba(255,255,255,.94) 0%,rgba(199,231,250,.88) 46%,rgba(148,200,236,.86) 100%);
  border:1px solid rgba(255,255,255,.95);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.96),inset 0 -30px 46px rgba(255,255,255,.32),
    inset 0 0 40px rgba(140,196,235,.30),0 30px 80px rgba(6,22,48,.55);
  backdrop-filter:blur(26px) saturate(2.2); -webkit-backdrop-filter:blur(26px) saturate(2.2);
  /* 滑动拖拽会顺带选中文字，手势页必须禁止选中 */
  user-select:none; -webkit-user-select:none;
  overscroll-behavior:contain;
  /* 必须清掉基类 .modal-card 的 fade-up：它的 fill-mode:both 会把 transform 锁死在
     translateY(0)，吃掉弹出动画。*/
  animation:none;
  /* 揭示页先登场，卡片保持隐藏；#wish-modal.popped 时才弹簧弹出 */
  opacity:0;
  transform:translateY(48px) scale(.88);
  transition:opacity .32s ease,transform .6s var(--pop);
  pointer-events:none;
}
#wish-modal.popped .wish-stage {opacity:1;transform:translateY(0) scale(1);pointer-events:auto;}
.wish-stage::before {content:"";position:absolute;inset:-40% -10% auto -10%;height:70%;pointer-events:none;
  background:linear-gradient(170deg,rgba(255,255,255,.66),rgba(255,255,255,0) 62%);}
.wish-stage > * {position:relative;}

.wish-stage .wish-eyebrow {font-size:11px;letter-spacing:.34em;color:#5d8aa8;margin:0 0 10px;}
.wish-title {font-family:BirthdayHand,'KaiTi',serif;font-weight:400;font-size:40px;line-height:1.25;
  letter-spacing:.06em;margin:0 0 12px;color:#1b3850;}
.wish-sub {font-size:13px;line-height:1.85;color:#2f5c7a;margin:0 0 22px;}

/* 二维码托底：白色卡 + 柔光，保证任何背景下都扫得出来 */
.wish-frame {position:relative;display:block;width:max-content;margin:0 auto 6px;padding:14px;border-radius:26px;
  background:rgba(255,255,255,.72);box-shadow:inset 0 0 0 1px rgba(255,255,255,.9),0 10px 30px rgba(30,80,130,.22);}
.wish-qr {width:172px;height:172px;background:#fff;border-radius:14px;overflow:hidden;position:relative;z-index:1;}
/* 二维码生成前的骨架：留一个带扫描纹的占位块，避免卡片中间出现一个空圆点 */
.wish-qr:not(:has(svg)) {background:
  repeating-linear-gradient(90deg,#eef5fa 0 6px,#e2eef6 6px 12px);
  animation:qr-breathe 2.2s ease-in-out infinite;}
.wish-qr svg {display:block;width:100%;height:100%;}
.wish-scan-glow {position:absolute;inset:-6px;border-radius:30px;pointer-events:none;z-index:0;
  background:radial-gradient(circle at 50% 50%,rgba(150,215,255,.5),rgba(150,215,255,0) 68%);
  animation:qr-breathe 3.4s ease-in-out infinite;}
@keyframes qr-breathe {0%,100%{opacity:.5;}50%{opacity:.95;}}

.wish-direct-link {display:inline-block;font-size:12px;color:#3d7ea8;margin:10px 0 20px;
  text-decoration-color:rgba(61,126,168,.45);}
.wish-direct-link[hidden] {display:none;}

/* 上滑提示：贴在视口底部，用一层暗色渐变衬底保证在浅色卡片上也读得清，
   且不与卡片内的隐私文案叠在一起 */
.wish-swipe-hint {position:absolute;left:50%;bottom:max(26px,env(safe-area-inset-bottom));
  transform:translateX(-50%);font-size:11.5px;letter-spacing:.2em;color:rgba(255,244,230,.86);
  text-shadow:0 2px 10px rgba(0,0,0,.6);opacity:0;transition:opacity .5s;pointer-events:none;
  padding:9px 20px;border-radius:999px;
  background:radial-gradient(ellipse at center,rgba(8,16,34,.62),rgba(8,16,34,0) 78%);}
#wish-modal.hint .wish-swipe-hint {opacity:1;animation:hint-bob 2.2s ease-in-out infinite;}
@keyframes hint-bob {0%,100%{transform:translateX(-50%) translateY(0);}50%{transform:translateX(-50%) translateY(-7px);}}

.wish-soft-button {
  width:100%; min-height:50px; padding:13px 16px; border:0; border-radius:26px;
  color:#123049; font-size:15px; font-weight:500; letter-spacing:.06em; cursor:pointer;
  background:linear-gradient(140deg,#f6fcff 0%,#c2e2f7 48%,#93cdec 100%);
  box-shadow:0 10px 24px rgba(30,90,145,.30), inset 0 1px 0 rgba(255,255,255,.95);
  transition:transform .18s var(--ease-std), box-shadow .18s var(--ease-std), opacity .18s var(--ease-std);
}
.wish-soft-button:not(:disabled):hover { transform:translateY(-1px); box-shadow:0 14px 30px rgba(30,90,145,.36), inset 0 1px 0 rgba(255,255,255,.95); }
.wish-soft-button:disabled {
  color:#3f6a88; background:linear-gradient(140deg,#e6f1f8,#c6dced);
  box-shadow:inset 0 0 0 1px rgba(120,165,200,.45); cursor:default;
}
.wish-status { color:#22506e; font-size:12px; line-height:1.6; min-height:20px; margin:14px 0 0; font-weight:500; }
.wish-stage .wish-privacy { color:#25506d; font-size:11px; line-height:1.6; margin:14px 0 0; }
#light-reveal { position:fixed; inset:0; z-index:3; pointer-events:none; overflow:hidden; }
#light-reveal[hidden] { display:none; }
#light-reveal::before {
  content:""; position:absolute; width:240vmax; height:240vmax; left:50%; top:44%;
  border-radius:50%; transform:translate(-50%,-50%) scale(0);
  background:radial-gradient(circle,#fff4d8 0%,#f3decb 20%,#c6e2ee 43%,rgba(196,223,240,0) 70%);
}
#light-reveal.spread::before { animation:candle-spread 2.9s cubic-bezier(.2,.65,.25,1) both; }
@keyframes candle-spread {
  0% { transform:translate(-50%,-50%) scale(.001); opacity:0; }
  18% { opacity:.85; }
  64% { transform:translate(-50%,-50%) scale(1); opacity:1; }
  100% { transform:translate(-50%,-50%) scale(1.05); opacity:0; }
}
.wish-page { min-height:100svh; display:grid; place-items:center; padding:28px 22px;
  background:radial-gradient(ellipse at top,#e5f3f5,#cbdfee 65%,#eaded6); color:#3f535d; }
.wish-page-card { max-width:380px; width:100%; }
.wish-eyebrow { font-size:12px; letter-spacing:.18em; color:#748990; }
.wish-page-card h1 { font-size:40px; line-height:1.3; font-weight:500; letter-spacing:.04em; }
.wish-page-card label { font-size:14px; }
.wish-page-card textarea { display:block; width:100%; min-height:160px; margin:14px 0 20px;
  background:rgba(255,255,255,.6); border:1px solid rgba(255,255,255,.8); border-radius:18px;
  padding:16px; font:inherit; font-size:16px; color:#3f535d; resize:vertical; }
.wish-page .wish-privacy { color:#687f87; }
#archive-status { font-size:15px; line-height:1.8; }
.archive-return[hidden] { display:none; }
.archive-return { margin-top:22px; animation:archive-return-in .65s cubic-bezier(.2,.65,.25,1) both; }
.archive-return-button {
  display:flex; align-items:center; justify-content:center; gap:14px; text-decoration:none;
  min-height:58px; border:1px solid rgba(255,255,255,.9); border-radius:999px;
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
}
.archive-return-button:focus-visible { outline:2px solid #477fa6; outline-offset:4px; }
.archive-return-arrow { font-size:20px; line-height:1; transition:transform .25s ease; }
.archive-return-button:hover .archive-return-arrow { transform:translate(3px,-3px); }
.archive-return-note { margin:16px 0 0; text-align:center; color:#638093; font-size:13px; letter-spacing:.06em; }
@keyframes archive-return-in { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:translateY(0); } }
@media(prefers-reduced-motion:reduce) { .archive-return { animation:none; } .archive-return-arrow { transition:none; } }
/* Soft, frosted surfaces throughout the birthday story. */
:root {
  --text:#334e60; --text2:rgba(52,75,89,.78); --text3:rgba(52,75,89,.64);
  --text4:rgba(75,97,110,.3); --line:rgba(255,255,255,.46);
  --coral:#e6c9c4; --cyan:#bfdfe7; --warm-panel:#e7ddd3; --lilac-panel:#dfdbea;
}
.kicker {
  background:rgba(255,255,255,.38); color:#587587; border:1px solid rgba(255,255,255,.6);
  border-radius:999px; padding:7px 13px; font-family:var(--mono); font-size:10px;
  backdrop-filter:blur(18px); box-shadow:inset 0 1px 0 rgba(255,255,255,.4);
}
.h2 { font-weight:500; letter-spacing:.01em; font-size:clamp(1.75rem,3.8vw,2.5rem); }
.display { font-weight:500; letter-spacing:-.035em; font-size:clamp(2.7rem,10vw,6rem); }
.hero-sub { max-width:28em; line-height:1.9; font-size:15px; }
.cal-grid { gap:12px; grid-template-columns:repeat(auto-fit,minmax(168px,1fr)); }
.cal-month {
  border-radius:22px; background:rgba(250,253,255,.32); border:1px solid rgba(255,255,255,.62);
  padding:13px; backdrop-filter:blur(20px) saturate(1.1);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.62),0 9px 24px rgba(100,135,160,.06);
}
.cal-label { color:#597b8e; }
.cal-days span { border-radius:50%; }
.cal-days .day1 { background:#c5dce4; color:#375c70; }
.cal-days .day365 { border-color:#98b9cd; color:#567e95; }
.mem-preview { border-radius:24px; border:1px solid rgba(255,255,255,.7); box-shadow:0 15px 32px rgba(100,130,160,.1); }
.mem-pill { border-radius:99px; padding:4px 9px; background:rgba(255,255,255,.5); color:#637b89; backdrop-filter:blur(12px); }
.mem-meta { color:#486372; }
.pv-icon { background:#d4ddeb; }
.pv-icon .mem-ph, .pv-cyan .mem-ph { color:rgba(65,89,106,.58); }
.pv-empty { border:1px dashed rgba(113,148,164,.35); background:rgba(255,255,255,.28); }
.letter-btn {
  border:1px solid rgba(255,255,255,.65); border-radius:30px; padding:30px 26px;
  background:rgba(255,255,255,.24); backdrop-filter:blur(24px); font-weight:500;
  font-size:clamp(1.25rem,3.2vw,2.1rem); text-decoration:none;
  max-width:min(20em,100%); overflow-wrap:anywhere; line-height:1.5;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 20px 45px rgba(112,137,163,.08);
}
.letter-btn:hover { background:rgba(255,255,255,.42); color:#597b90; }
.letter-sheet { border-radius:30px; background:rgba(252,252,247,.88); backdrop-filter:blur(28px); border-color:rgba(255,255,255,.65); }
.letter-body h3 { font-weight:500; color:#425b6b; }
.btn-ghost { border-radius:99px; border-color:rgba(98,133,151,.25); color:#587386; }
.toast { border-radius:22px; border:1px solid rgba(255,255,255,.65); background:rgba(255,253,249,.76); backdrop-filter:blur(24px); }
.dot { border-radius:50%; }
.bottle-legend li { border-radius:99px; padding:7px 11px; background:rgba(255,255,255,.25); border:1px solid rgba(255,255,255,.4); backdrop-filter:blur(16px); }
.closing-text { color:#68716f; font-weight:400; }
.closing-text b { font-weight:500; color:#455c63; }
.doc-footer { background:rgba(252,253,249,.24); backdrop-filter:blur(20px); }
.match-control {
  position:absolute; top:72%; left:50%; transform:translate(-50%,-50%);
  width:min(290px,80vw); height:86px; pointer-events:auto; touch-action:none;
  border:1px solid rgba(219,191,163,.14); border-radius:43px;
  background:rgba(124,100,79,.025); cursor:grab; --strike:0;
}
#hero { user-select:none; -webkit-user-select:none; }
.match-control[hidden] { display:none; }
.match-control:active { cursor:grabbing; }
.strike-track {
  position:absolute; left:14%; right:14%; top:50%; height:1px;
  background:linear-gradient(90deg,transparent,rgba(227,191,151,.3),transparent);
  opacity:calc(.3 + var(--strike)*.7); pointer-events:none;
}
body.opening .prompt { bottom:12%; color:rgba(243,222,202,.62); font-size:12px; letter-spacing:.12em; }
body.striking .match-control { border-color:rgba(242,184,122,.26); background:rgba(163,109,61,.035); }
@media (max-width:767px) {
  .cal-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .cal-month { padding:10px; border-radius:19px; }
  .cal-days span { font-size:10px; }
  .letter-sheet { padding:26px 22px; }
  .panel { padding:72px 22px; }
}
@media (prefers-reduced-motion:reduce) {
  #light-reveal.spread::before { animation:none; transform:translate(-50%,-50%) scale(1); opacity:.2; }
}

@font-face {font-family:BirthdayHand;src:url('ceremony/ZhiMangXing-Regular.woff2') format('woff2');font-display:swap;}
html {overflow-x:clip;}
.cal-week,.cal-days {grid-template-columns:repeat(7,minmax(0,1fr));}
.cal-month,.cal-week span,.cal-days span {min-width:0;}
.cal-label .in-range {display:inline-block;}
#ceremony-stage {position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden;}
/* The golden-age scene stays beneath the calendar for one viewport of scrolling. */
#hero-calendar-journey {position:relative;isolation:isolate;}
body[data-phase="done"] #hero-calendar-journey #hero {position:sticky;top:0;height:100svh;min-height:100svh;}
#hero-calendar-journey #calendar {position:relative;z-index:2;isolation:isolate;
  border-top:1px solid rgba(255,255,255,.9);border-radius:34px 34px 0 0;
  background:linear-gradient(180deg,rgba(221,240,251,.98),rgba(209,234,249,.97) 38%,rgba(217,237,248,.96) 82%,rgba(221,239,249,.94));
  box-shadow:0 -22px 70px rgba(64,116,161,.17),0 -2px 20px rgba(255,255,255,.7);}
#hero-calendar-journey #calendar::before {content:"";position:absolute;inset:0 0 auto;height:130px;
  border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.38),rgba(255,255,255,0));}
body[data-phase="done"] #hero-title.golden-age {
  opacity:var(--hero-layer-opacity,1);
  transform:translateY(var(--hero-layer-y,0px)) scale(var(--hero-layer-scale,1));
  filter:blur(var(--hero-layer-blur,0px));}
body[data-phase="done"] #hero #scroll-hint:not([hidden]) {
  opacity:var(--hero-hint-opacity,1);
  transform:translate(-50%,var(--hero-hint-y,0px));}
@media(max-width:767px){#hero-calendar-journey #calendar {border-radius:30px 30px 0 0;}}
@media(pointer:coarse){body[data-phase="done"] #hero-title.golden-age {filter:none;}}
@media(prefers-reduced-motion:reduce){
  body[data-phase="done"] #hero-calendar-journey #hero {position:relative;}
  body[data-phase="done"] #hero-title.golden-age {opacity:1;transform:none;filter:none;}
  body[data-phase="done"] #hero #scroll-hint:not([hidden]) {opacity:1;transform:translateX(-50%);filter:none;}
}
.candle-music-toggle {position:fixed;z-index:330;
  top:calc(env(safe-area-inset-top) + 20px);right:calc(env(safe-area-inset-right) + 20px);
  display:grid;place-items:center;width:48px;height:48px;padding:0;
  border:1px solid rgba(255,225,185,.56);border-radius:50%;
  color:#ffe4bb;background:linear-gradient(145deg,rgba(255,238,213,.22),rgba(157,103,69,.13));
  box-shadow:0 0 27px rgba(255,161,74,.17),inset 0 1px 0 rgba(255,249,231,.42);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);cursor:pointer;
  transition:background .25s,box-shadow .25s,transform .25s,opacity .25s;}
.candle-music-toggle[hidden] {display:none;}
.candle-music-toggle svg {width:25px;height:25px;filter:drop-shadow(0 0 5px rgba(255,190,110,.35));}
.candle-music-toggle:hover {transform:translateY(-2px);box-shadow:0 0 32px rgba(255,174,88,.28),inset 0 1px 0 rgba(255,249,231,.55);}
.candle-music-toggle:focus-visible {outline:2px solid #ffe0a5;outline-offset:4px;}
.candle-music-toggle.is-paused {color:rgba(255,229,195,.66);background:rgba(93,80,78,.22);box-shadow:inset 0 1px 0 rgba(255,249,231,.2);}
.candle-music-toggle.is-paused::after {content:"";position:absolute;width:27px;height:1.5px;
  border-radius:2px;background:currentColor;transform:rotate(-43deg);box-shadow:0 0 2px rgba(24,18,14,.85);}
@media(max-width:767px){.candle-music-toggle {top:calc(env(safe-area-inset-top) + 14px);right:calc(env(safe-area-inset-right) + 14px);}}
/* 点亮后舞台泛起一层极淡暖色，让火光照到「房间」而不是只有蛋糕 */
#ceremony-stage::after {content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(48% 36% at 50% 41%,rgba(255,176,96,.20),rgba(255,150,70,0) 72%);
  mix-blend-mode:screen;transition:opacity .45s ease;}
#ceremony-stage.radiating::after {opacity:.35;}
.sandpaper {position:absolute;inset:0;background:#080706 url('ceremony/sandpaper.jpg') center/cover no-repeat;opacity:.06;transition:opacity .7s;}
.striking .sandpaper {opacity:.8;transition:opacity .12s;}
.lit .sandpaper {opacity:.10;}

/* ---------- 蛋糕舞台：立体感由「接地阴影 + 明暗衰减 + 火光」三层叠出来 ---------- */
.earth-composition {position:absolute;width:min(86vw,430px,53svh);aspect-ratio:1;left:50%;top:43%;transform:translate(-50%,-50%);
  opacity:0;transition:opacity 1.4s,top 1.2s,width 1.2s;perspective:1000px;}
.lit .earth-composition {opacity:1;}

/* 接地阴影：椭圆软影，随倾斜反向位移，做出「落在台面上」的重量感 */
.cake-shadow {position:absolute;left:50%;bottom:1.5%;width:74%;height:8%;transform:translateX(-50%);
  background:radial-gradient(ellipse at 50% 50%,rgba(0,0,0,.92) 0%,rgba(0,0,0,.5) 42%,rgba(0,0,0,0) 74%);
  filter:blur(7px);opacity:0;transition:opacity 1.5s ease,transform .5s var(--ease-std);}
.lit .cake-shadow {opacity:1;}

/* 蛋糕本体：承载极轻微的指针视差倾斜 */
.cake-body {position:absolute;inset:0;transform-style:preserve-3d;
  transform:rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));will-change:transform;}
#earth-cake {width:100%;height:auto;display:block;
  filter:drop-shadow(0 20px 30px rgba(0,0,0,.75)) drop-shadow(0 3px 6px rgba(0,0,0,.5));}

/* 火光层：烛火是画面主光源，从顶部两支蜡烛向下衰减地打在蛋糕上 */
.cake-light {position:absolute;inset:0;pointer-events:none;opacity:0;mix-blend-mode:screen;
  transition:opacity .55s ease;
  -webkit-mask:url('ceremony/earth-cake.webp') center/contain no-repeat;
  mask:url('ceremony/earth-cake.webp') center/contain no-repeat;
  background:
    radial-gradient(24% 19% at 40.8% 3.9%,rgba(255,214,150,.48) 0%,rgba(255,170,90,.16) 45%,rgba(255,150,70,0) 78%),
    radial-gradient(24% 19% at 57.9% 4.1%,rgba(255,214,150,.48) 0%,rgba(255,170,90,.16) 45%,rgba(255,150,70,0) 78%),
    radial-gradient(54% 40% at 49.5% 10%,rgba(255,186,112,.16) 0%,rgba(255,150,80,.06) 48%,rgba(255,140,60,0) 80%);
  transform:translateZ(28px);}
/* 暗部层：① 球体边缘收暗（让平面圆形读成球面）② 底部衰减（光自上方来）③ 环境遮蔽压住蛋糕与盘子的接缝 */
.cake-shade {position:absolute;inset:0;pointer-events:none;opacity:0;mix-blend-mode:multiply;
  transition:opacity 1.4s ease .2s;
  -webkit-mask:url('ceremony/earth-cake.webp') center/contain no-repeat;
  mask:url('ceremony/earth-cake.webp') center/contain no-repeat;
  background:
    radial-gradient(ellipse 39% 33% at 50% 61%,rgba(255,255,255,0) 52%,rgba(96,124,168,.30) 82%,rgba(46,72,116,.55) 100%),
    radial-gradient(ellipse 40% 12% at 50% 91%,rgba(10,20,42,.72) 0%,rgba(10,20,42,0) 72%),
    linear-gradient(to top,rgba(6,16,38,.78) 0%,rgba(8,20,44,.46) 18%,rgba(12,26,52,.18) 40%,rgba(16,32,58,0) 64%);
  transform:translateZ(2px);}
.lit .cake-shade {opacity:1;}

/* 烛芯辉光：火焰在空气里的那圈光晕 */
.wick-glow {position:absolute;left:40.8%;top:3.9%;width:56%;aspect-ratio:1;transform:translate(-50%,-50%) scale(.64);
  pointer-events:none;opacity:0;mix-blend-mode:screen;transition:opacity .5s ease,transform .85s cubic-bezier(.2,.65,.25,1);
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,229,182,.5) 0%,rgba(255,190,111,.24) 8%,rgba(242,132,64,.14) 22%,rgba(208,78,36,.075) 42%,rgba(145,45,22,.025) 64%,rgba(145,45,22,0) 74%);}
.wick-glow.second {left:57.9%;top:4.1%;}

/* ---------- 烛火：蛋糕先亮，火苗后起 ---------- */
.candle-fire {position:absolute;left:40.8%;top:3.9%;width:9%;aspect-ratio:2/3;transform:translate(-50%,-95.2%);
  opacity:0;transition:opacity .3s;transform-origin:50% 95.2%;filter:drop-shadow(0 0 8px rgba(255,180,97,.75));}
.candle-fire.second {left:57.9%;top:4.1%;}
/* 火苗升起：先失焦过亮，再收束成形（ignite 只动 opacity/filter，breathe 动 transform，互不打架） */
.flames .candle-fire {opacity:1;animation:flame-ignite .5s ease-out both,flame-breathe 1.6s ease-in-out .5s infinite alternate;}
.candle-fire.second {animation-delay:.06s,.62s;}
.radiating .cake-light,.radiating .wick-glow {opacity:1;}
.radiating .wick-glow {transform:translate(-50%,-50%) scale(1);}
.radiating .wick-glow::after {content:"";position:absolute;inset:12%;border-radius:50%;background:radial-gradient(circle,rgba(255,198,133,.085),transparent 70%);animation:fire-flicker 2.3s ease-in-out infinite;}
.radiating .wick-glow.second::after {animation-delay:-.73s;}
/* 吹灭：火苗先被吹歪，再迅速缩没 */
.flames.blown .candle-fire {animation:flame-die .5s cubic-bezier(.3,.7,.4,1) forwards;}
.departed .earth-composition {opacity:0;transition:opacity 1.1s;}

@keyframes flame-breathe {0%{transform:translate(-50%,-95.2%) rotate(-1.4deg) scale(.97,1.03);}38%{transform:translate(-50%,-95.2%) rotate(1.1deg) scale(1.03,.96);}100%{transform:translate(-50%,-95.2%) rotate(.5deg) scale(.98,1.02);}}
@keyframes flame-ignite {0%{opacity:0;filter:blur(6px) brightness(2.6) drop-shadow(0 0 20px rgba(255,190,110,.9));}55%{opacity:1;filter:blur(.5px) brightness(1.45) drop-shadow(0 0 11px rgba(255,185,105,.85));}100%{opacity:1;filter:blur(0) brightness(1) drop-shadow(0 0 8px rgba(255,180,97,.75));}}
@keyframes flame-die {0%{opacity:1;transform:translate(-50%,-95.2%) scale(1,1);}30%{opacity:1;transform:translate(-50%,-95.2%) translate(-9px,-8px) rotate(-17deg) scale(1.18,.55);}100%{opacity:0;transform:translate(-50%,-95.2%) scale(.35,.06);}}
/* 不规则双频闪烁：火光不会像正弦那样规律 */
@keyframes fire-flicker {0%,100%{opacity:.86;}14%{opacity:1;}27%{opacity:.8;}41%{opacity:.94;}55%{opacity:.76;}68%{opacity:1;}82%{opacity:.85;}91%{opacity:.96;}}
.match-control {z-index:6;border:0!important;background:transparent!important;width:min(290px,80vw);height:100px;top:73%;}
.match-photo {position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none;transform:translate(var(--match-x,0px),var(--match-y,0px)) rotate(-8deg);filter:drop-shadow(0 4px 8px #000);transition:opacity .4s;}
.match-control.ignited {pointer-events:none;animation:match-to-candle 1.2s ease-in-out both;}
.match-control.ignited .match-photo {transform:rotate(-8deg);transition:transform .35s,opacity .4s;}
.match-fire {position:absolute;width:28px;height:42px;left:90%;top:35%;transform:translate(-50%,-90%);opacity:0;pointer-events:none;filter:drop-shadow(0 0 9px #ef9e55);}
.ignited .match-fire {opacity:1;}
@keyframes match-to-candle {to{transform:translate(-98%,-438%) rotate(-25deg);opacity:0;}}
.match-control .strike-track {display:none;}
body.opening .prompt {bottom:13%;font-size:13px;color:#eadfd2;z-index:6;}
#fireworks-sky {position:fixed;inset:0;width:100%;height:100%;z-index:4;pointer-events:none;opacity:1;transition:opacity 1.8s;}
#fireworks-sky[hidden] {display:none;}
#fireworks-sky.finished {opacity:0;}
#hero-title {z-index:5;position:relative;width:100%;text-align:center;}
/* ===== 图二「21 岁黄金时代」页 =====
   金色年龄与蓝白玻璃书法来自独立透明素材，按三组适配手机屏高。
   同源磨砂天空只在 phase=done 亮起，开场光源在这一阶段退场。 */
/* Source typography is one transparent sculpture; HTML copy remains accessible. */
#hero-title.golden-age {position:absolute;inset:0;width:100%;z-index:5;text-align:center;animation:none;}
.golden-age .age-badge {
  position:absolute;top:13.05%;left:50%;transform:translateX(-50%);
  margin:0;padding:clamp(5px,1.5vw,12px) clamp(10px,2.7vw,26px);
  border-radius:999px;background:rgba(245,251,255,.34);border:1px solid rgba(255,255,255,.9);
  color:#6086a4;font-family:var(--mono);font-weight:400;font-size:clamp(6px,1.7vw,16px);
  letter-spacing:.1em;line-height:1.4;white-space:nowrap;backdrop-filter:blur(12px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5);
}
.golden-title {position:absolute;inset:0;width:100%;margin:0;line-height:1;}
/* Three source regions keep their own vertical anchors on tall phones.
   All three reuse the same alpha artwork; no glyph is stretched or redrawn. */
.golden-art {position:absolute;left:50%;width:min(94%,54svh,980px);overflow:hidden;
  margin-left:calc(min(94%,54svh,980px) / -2);}
.age-art {top:17.5%;aspect-ratio:1216/310;}
.main-art {top:31.5%;aspect-ratio:1216/660;}
.main-art .golden-lettering {transform:translateY(-23.97525%);}
.wish-art {top:61.3%;aspect-ratio:1216/323;}
.wish-art .golden-lettering {transform:translateY(-75.01934%);}
.golden-lettering {display:block;width:100%;height:auto;filter:saturate(.62) brightness(1.15);}
.main-art .golden-lettering,.wish-art .golden-lettering {filter:saturate(.55) contrast(.7) brightness(1.5);}
.golden-copy {position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;}
.golden-copy-line {display:block;}
.golden-age .hero-sub {position:absolute;left:50%;top:81.8%;transform:translateX(-50%);
  width:92%;max-width:none;margin:0;color:#416784;font-family:'Songti SC','SimSun',serif;
  font-size:clamp(7px,1.95vw,20px);line-height:1.8;letter-spacing:.16em;white-space:nowrap;}
.hero-dream {position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden;
  opacity:0;transition:opacity 2.2s ease .4s;}
.golden-sky {position:absolute;inset:0;width:100%;height:100%;object-fit:fill;}
/* Retain the image fallback until its interactive WebGL texture is ready. */
body.golden-sky-fluid .golden-sky {visibility:hidden;}
body[data-phase="done"] .hero-dream {opacity:1;}
body[data-phase="done"] #ceremony-stage {visibility:hidden;}
body[data-phase="done"] .golden-art {animation:golden-arrive 1.3s cubic-bezier(.2,.65,.2,1) both;}
@keyframes golden-arrive {from{opacity:0;transform:translateY(12px) scale(.97);}to{opacity:1;transform:none;}}
body[data-phase="done"] .topline {top:4.6svh;left:5%;right:5%;width:auto;padding:0;
  font-family:'Songti SC','SimSun',serif;font-size:clamp(8px,2.15vw,22px);letter-spacing:.16em;
  color:#406581;background:none;backdrop-filter:none;-webkit-backdrop-filter:none;
  mask:none;-webkit-mask:none;}
.tl-date {font-family:var(--display);font-weight:400;letter-spacing:.03em;}
#hero #scroll-hint {bottom:4.45%;z-index:5;display:flex;flex-direction:column;align-items:center;
  gap:1.3svh;color:#497697;font-family:'Songti SC','SimSun',serif;
  font-size:clamp(8px,2.15vw,22px);letter-spacing:.14em;line-height:1.4;white-space:nowrap;animation:none;}
#hero #scroll-hint[hidden] {display:none;}
.scroll-arrow {width:clamp(8px,1.8vw,18px);height:auto;opacity:.65;}
.scroll-arrow:not(.inline) {filter:brightness(0) invert(1);opacity:1;}
.scroll-arrow.inline {display:inline-block;vertical-align:-.08em;}
@media(prefers-reduced-motion:reduce) {
  .hero-dream {transition:none;}
  body[data-phase="done"] .golden-art {animation:none;}
}
@media(max-width:767px){html{scrollbar-width:none;}html::-webkit-scrollbar,body::-webkit-scrollbar{display:none;}}
.letter-entry {min-height:80svh;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:visible;}
.envelope-button {display:block;position:relative;width:min(540px,100%);aspect-ratio:1479/1063;padding:0;border:0;border-radius:0;background:transparent;cursor:pointer;perspective:1200px;box-shadow:none;}
.envelope-button {pointer-events:auto;}
.envelope-button:hover {background:transparent;}
.envelope-image {position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none;filter:drop-shadow(0 12px 18px #688aab30);}
.envelope-back {clip-path:polygon(4.5% 7.5%,96% 7.5%,96% 94.5%,4.5% 94.5%);object-fit:cover;}
.envelope-front {clip-path:polygon(4.5% 7.5%,51% 61.2%,96% 7.5%,96% 94.5%,4.5% 94.5%);z-index:3;}
.envelope-flap {position:absolute;inset:0;z-index:5;clip-path:polygon(5% 7.5%,95.2% 7.5%,51% 61.2%);transform-origin:50% 7.5%;transition:transform 1.1s cubic-bezier(.2,.65,.2,1),filter 1.1s;transform-style:preserve-3d;pointer-events:none;}
.flap-print,.flap-inside {position:absolute;inset:0;width:100%;height:100%;backface-visibility:visible;transition:opacity .15s .4s;}
.flap-inside {object-fit:cover;opacity:0;}
.opening .flap-print {opacity:0;}
.opening .flap-inside {opacity:1;}
.envelope-seal {clip-path:ellipse(13% 17% at 50% 60%);z-index:6;transition:transform .6s,opacity .5s;}
.envelope-paper {position:absolute;z-index:2;left:12%;top:14%;width:76%;height:75%;object-fit:cover;object-position:top;transition:transform 1.2s .65s cubic-bezier(.25,.7,.2,1);border-radius:4px;}
.envelope-button.opening .envelope-seal {transform:translateY(20px);opacity:0;}
.envelope-button.opening .envelope-flap {transform:rotateX(172deg);filter:brightness(.97);z-index:1;}
.envelope-button.opening .envelope-paper {transform:translateY(-45%);}
.letter-modal {background:rgba(191,215,231,.5);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);transition:opacity .5s;}
.letter-sheet {background:#fcfcf7 url('ceremony/letter-paper.webp') center/cover;box-shadow:0 22px 80px #52738f24;transform-origin:50% 90%;animation:unfold-paper .9s cubic-bezier(.2,.7,.2,1) both;}
.letter-modal.closing {opacity:0;}
.blank-letter {min-height:360px;}
.blank-letter span {display:block;border-bottom:1px solid #8fa9bc25;height:36px;}
.letter-body h3 {font-family:BirthdayHand,'KaiTi',serif;font-size:36px;margin-bottom:20px;}
@keyframes unfold-paper {from{opacity:0;transform:translateY(80px) rotateX(35deg) scale(.8);}to{opacity:1;transform:none;}}
@media(max-width:767px){body:has(#wish-modal.revealed:not([hidden])) .earth-composition {top:28%;width:min(59vw,30svh);}body[data-phase=ready] .earth-composition {top:41%;}.letter-sheet {max-height:85svh;overflow-y:auto;} }
@media(prefers-reduced-motion:reduce){.candle-fire,.match-control.ignited,.cake-light,.wick-glow,#ceremony-stage::after {animation:none!important;}
  .flames:not(.blown) .candle-fire{opacity:1;}
  .blown .candle-fire{opacity:0;}
  .wick-glow,.cake-light,#ceremony-stage::after,.candle-fire{transition:none;}
  .wick-glow::after{animation:none!important;}
  .ignited .match-fire{opacity:1;}
  .envelope-flap,.envelope-paper,.earth-composition {transition-duration:.01s;transition-delay:0s;}.letter-sheet {animation:none;} }

/* Wish in the candlelight, after ignition and before blowing. */
#wish-modal.candle-wish {display:flex;align-items:flex-end;justify-content:center;
  padding:12px 14px calc(14px + env(safe-area-inset-bottom));clip-path:none;transition:opacity .28s ease;
  background:linear-gradient(0deg,#030815b3,transparent 80%);backdrop-filter:none;-webkit-backdrop-filter:none;}
#wish-modal.candle-wish[hidden] {display:none;}
#wish-modal.candle-wish.closing {opacity:0;pointer-events:none;}
#wish-modal.candle-wish .wish-stage {width:min(360px,100%);max-height:65svh;
  overflow-x:hidden;
  padding:20px 23px 18px;border-radius:30px;background:linear-gradient(150deg,#fffffff2,#dfedf5e8 58%,#c7e1eedd);
  backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);touch-action:pan-y;
  box-shadow:0 16px 65px #0006,inset 0 1px 0 #fff;animation:wish-in-candlelight .65s cubic-bezier(.16,1,.3,1) both;}
#wish-modal.candle-wish .wish-stage::before {inset:0 0 auto;height:50%;}
.candle-wish .wish-eyebrow {font-size:9px;margin-bottom:6px;}
.candle-wish .wish-title {font-size:31px;margin-bottom:7px;outline:none;}
.candle-wish .wish-sub {font-size:12px;line-height:1.7;margin-bottom:12px;}
.candle-wish .wish-frame {padding:10px;border-radius:22px;margin-bottom:5px;}
.candle-wish .wish-qr {width:140px;height:140px;border-radius:12px;}
.candle-wish .wish-direct-link {font-size:10px;margin:7px 0 10px;display:inline-block;}
.candle-wish .wish-direct-link[hidden] {display:none;}
.candle-wish .wish-soft-button {min-height:45px;padding:11px 12px;font-size:13px;}
.candle-wish .wish-status {margin-top:10px;font-size:11px;min-height:18px;}
.candle-wish .wish-privacy {font-size:9px;line-height:1.6;margin-top:9px;margin-bottom:0;color:#587687;}
.wish-retry {display:block;margin:8px auto 0;border:0;background:transparent;text-decoration:underline;
  text-underline-offset:4px;color:#527c96;font-size:11px;cursor:pointer;}
.wish-retry[hidden] {display:none;}
body:has(#wish-modal.candle-wish:not([hidden])) .earth-composition {top:23%;width:min(59vw,28svh);}
body:has(#wish-modal.candle-wish:not([hidden])) .cake-body {filter:none;}
.earth-composition {transition:top .75s cubic-bezier(.2,.65,.2,1),left .75s,width .75s,transform .8s;}
#birthday-reveal {position:fixed;inset:0;z-index:5;pointer-events:none;background:#bfdef5;}
#birthday-reveal[hidden] {display:none;}
#birthday-reveal.revealed {animation:birthday-light-open .85s cubic-bezier(.2,.65,.2,1) both;}
#birthday-reveal.revealed .reveal-word {animation:glass-reveal 1.1s cubic-bezier(.2,.65,.2,1) .15s both;}
@keyframes wish-in-candlelight {from{opacity:0;transform:translateY(22px) scale(.97);}to{opacity:1;transform:none;}}
@keyframes birthday-light-open {from{clip-path:circle(0 at 50% 43%);}to{clip-path:circle(150vmax at 50% 43%);}}
@media(min-width:768px){#wish-modal.candle-wish{align-items:center;justify-content:flex-end;padding:30px 8vw;}
  #wish-modal.candle-wish .wish-stage{width:380px;max-height:88svh;padding:27px 30px;}
  .candle-wish .wish-qr{width:164px;height:164px;}
  body:has(#wish-modal.candle-wish:not([hidden])) .earth-composition{left:31%;top:50%;width:min(43vw,65svh);}}
@media(prefers-reduced-motion:reduce){#wish-modal.candle-wish,#wish-modal.candle-wish .wish-stage,
  #birthday-reveal.revealed,#birthday-reveal.revealed .reveal-word{animation:none;transition:none;}
  #birthday-reveal .reveal-word{opacity:1;}.earth-composition{transition:none;}}

/* The sea stays in WebGL at z=0; every glass keepsake is a real foreground button. */
#bottles {position:relative;align-items:center;justify-content:center;padding:64px 20px 48px;
  pointer-events:auto;text-align:center;}
#bottles .kicker {align-self:center;margin-bottom:10px;}
#bottles .h2 {font-family:'Songti SC','SimSun',serif;font-size:clamp(29px,7vw,44px);
  font-weight:400;letter-spacing:.07em;line-height:1.3;}
#bottles .lede {max-width:26em;margin:6px 0 14px;color:#476d84;font-size:12.5px;line-height:1.8;letter-spacing:.03em;}
.bottle-categories {display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-bottom:12px;}
.bottle-categories button {padding:9px 15px;min-height:40px;border:1px solid rgba(255,255,255,.7);
  border-radius:999px;background:rgba(255,255,255,.22);color:#577990;font-size:12px;
  cursor:pointer;backdrop-filter:blur(16px);transition:background .25s,box-shadow .25s;}
.bottle-categories button[aria-pressed=true] {color:#35576c;background:rgba(255,255,255,.72);
  box-shadow:0 5px 16px #547d9815,inset 0 1px 0 #fff;}
.bottle-categories button small {margin-left:5px;font-family:var(--mono);font-size:9px;opacity:.58;}
.bottle-board {position:relative;z-index:3;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:9px 12px;width:min(650px,100%);isolation:isolate;}
.bottle-pick {display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  position:relative;width:100%;min-width:0;min-height:154px;padding:6px 0 8px;
  border:0;border-radius:22px;background:transparent;color:#31556d;cursor:pointer;
  -webkit-tap-highlight-color:transparent;touch-action:pan-y;}
.bottle-pick[hidden] {display:none;}
.bottle-pick:nth-of-type(7n) {grid-column:2;}
.bottle-portrait {display:block;width:100%;height:112px;object-fit:contain;pointer-events:none;
  animation:bottle-float 6s ease-in-out infinite;animation-delay:var(--float-delay);
  animation-play-state:paused;transition:filter .3s;}
.bottles-in-view .bottle-portrait {animation-play-state:running;}
.bottle-pick:hover .bottle-portrait {filter:brightness(1.07);}
.bottle-pick:focus-visible {outline:2px solid #729eb7;outline-offset:1px;background:#ffffff26;}
.bottle-pick-hint {margin-top:5px;font-size:10px;line-height:1.5;letter-spacing:.1em;color:#627f91;}
.bottle-pick.is-read .bottle-pick-hint {color:#527c92;}
@keyframes bottle-float {0%,100%{transform:translateY(0) rotate(var(--bottle-lean));}
  50%{transform:translateY(-5px) rotate(calc(var(--bottle-lean) + 1deg));}}
.bottle-reader {position:fixed;inset:0;z-index:400;display:grid;place-items:center;padding:24px 18px;
  background:rgba(135,173,195,.36);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);}
.bottle-reader[hidden] {display:none;}
.bottle-note {position:relative;width:min(430px,100%);max-height:86svh;overflow-y:auto;overscroll-behavior:contain;
  border:1px solid rgba(255,255,255,.92);border-radius:28px;padding:23px 27px 25px;
  background:#fffef8 url('ceremony/letter-paper.webp') center/cover;
  box-shadow:0 25px 80px #446a8233,inset 0 1px 0 #fff;color:#3b5a6b;text-align:center;
  animation:bottle-note-arrive .5s cubic-bezier(.2,.65,.2,1) both;}
.bottle-note-image {width:72px;height:108px;object-fit:contain;display:block;margin:0 auto 8px;pointer-events:none;}
.bottle-note-category {margin:0 0 13px;font-family:var(--mono);font-size:9px;line-height:1.6;letter-spacing:.05em;color:#73909e;}
.bottle-note h3 {margin:0 0 22px;font-family:'Songti SC','SimSun',serif;font-weight:400;
  font-size:25px;line-height:1.4;letter-spacing:.05em;color:#36556a;}
.bottle-message {text-align:left;font-family:'Songti SC','SimSun',serif;font-size:16px;line-height:1.95;letter-spacing:.025em;}
.bottle-message p {margin:0 0 15px;}
.bottle-signature {text-align:right;margin:19px 0 22px;font-size:11px;letter-spacing:.04em;color:#77909d;}
.bottle-close {width:100%;min-height:46px;padding:11px 17px;border:1px solid #d0e0e5;border-radius:999px;
  background:rgba(219,237,244,.64);font-size:13px;letter-spacing:.1em;color:#466c83;cursor:pointer;}
@keyframes bottle-note-arrive {from{opacity:0;transform:translateY(16px) scale(.97);}to{opacity:1;transform:none;}}
@media(min-width:768px){.bottle-portrait{height:165px;}.bottle-pick{min-height:210px;}}
@media(max-width:360px){#bottles{padding-left:14px;padding-right:14px;}.bottle-board{gap:6px;}
  .bottle-portrait{height:110px;}.bottle-pick{min-height:154px;}
  .bottle-note{padding:20px;}.bottle-message{font-size:15px;}}
@media(prefers-reduced-motion:reduce){.bottle-portrait,.bottle-note{animation:none;}.bottle-categories button{transition:none;}}

/* A single strand of light, with no visible stops. Photos stay in the foreground. */
/* Clip sideways decoration without creating a body scroll container that traps sticky. */
body {overflow-x:clip;}
#memories.memory-journey {display:block;position:relative;padding:0;height:660svh;min-height:0;}
.memory-sticky {position:sticky;top:0;height:100svh;min-height:600px;padding:76px 24px 22px;
  display:flex;align-items:center;}
.memory-inner {width:100%;max-width:900px;margin:auto;}
.memory-heading .kicker {margin-bottom:13px;background:rgba(240,249,255,.45);border:1px solid #ffffffb3;color:#628499;}
.memory-heading .h2 {font-family:'Songti SC','SimSun',serif;font-weight:400;letter-spacing:.07em;
  font-size:clamp(27px,3.4vw,42px);color:#3e647b;margin-bottom:12px;}
.memory-intro {margin:0 0 12px;color:#6a8798;font-size:13px;line-height:1.85;letter-spacing:.08em;}
.memory-stage {position:relative;height:clamp(330px,calc(100svh - 300px),620px);width:100%;
  --memory-y:34px;--memory-progress:0;--photo-y:10px;isolation:isolate;}
.memory-rail {position:absolute;left:0;top:0;bottom:0;width:64px;cursor:ns-resize;
  pointer-events:auto;touch-action:none;user-select:none;-webkit-user-select:none;outline-offset:0;border-radius:32px;}
.memory-rail:focus-visible {outline:1px solid #74a9c4;background:#eefaff24;}
.memory-rail-label {position:absolute;left:0;width:64px;text-align:center;
  font-family:'Songti SC','SimSun',serif;font-size:10px;letter-spacing:.25em;color:#7c9bae;}
.memory-rail-start {top:0;}.memory-rail-end {bottom:0;}
.memory-thread {position:absolute;top:34px;bottom:34px;left:31px;width:2px;overflow:hidden;border-radius:100px;
  background:linear-gradient(#fff7,#ffffffb3,#b8dbef73);
  box-shadow:0 0 0 1px #fff3,0 0 15px 2px #c2eaff8c,inset 0 0 2px #fff;}
.memory-thread-lit {position:absolute;inset:0;background:linear-gradient(#e7f6ff,#83c7f1,#fff3c9);
  transform-origin:top;transform:scaleY(var(--memory-progress));box-shadow:0 0 8px #c1e8ff;}
.memory-orb {position:absolute;top:var(--memory-y);left:32px;width:22px;height:22px;
  transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle at 32% 26%,#fff 5%,#e6faff 32%,#a8d8f2 68%,#ffffffb3 85%);
  border:1px solid #fff;box-shadow:0 0 0 6px #ffffff26,0 0 24px 7px #ddf6ffad,0 2px 7px #659bb333;
  transition:box-shadow .3s;}
.memory-orb span {position:absolute;inset:-12px;border:1px solid #ffffffe0;border-radius:50%;opacity:.4;animation:memory-breathe 3s ease-in-out infinite;}
.is-scrubbing .memory-orb {box-shadow:0 0 0 9px #ffffff45,0 0 32px 10px #eafaff,0 3px 8px #659bb333;}
.memory-connection {position:absolute;left:43px;right:calc(100% - 93px);height:1px;top:var(--memory-y);
  background:linear-gradient(90deg,#f9fdff,#fff8,#fffc);opacity:.75;}
.memory-photo-stack {position:absolute;left:86px;right:0;top:var(--photo-y);height:79%;
  max-height:490px;border-radius:27px;transition:top .16s ease-out,height .45s cubic-bezier(.16,1,.3,1);}
.memory-slide {position:absolute;inset:0;margin:0;padding:8px;border:1px solid #ffffffe6;border-radius:inherit;
  background:linear-gradient(140deg,#ffffff99,#f0f9ff66 48%,#ffffffa6);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  box-shadow:0 18px 40px #5c93b01c,inset 0 1px 0 #fff;opacity:0;transform:translateY(12px) scale(.985);
  transition:opacity .42s ease,transform .65s cubic-bezier(.16,1,.3,1);overflow:hidden;pointer-events:none;}
.memory-slide.is-current {opacity:1;transform:none;z-index:1;pointer-events:auto;cursor:zoom-in;}
.memory-slide:focus-visible {outline:2px solid #fff;outline-offset:3px;}
.memory-slide img {display:block;width:100%;height:100%;object-fit:contain;border-radius:20px;}
.memory-photo-glint {position:absolute;inset:0;z-index:2;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 0 0 1px #fff9;}
#memory-sparkles {position:absolute;inset:0;z-index:3;width:100%;height:100%;pointer-events:none;}
.memory-loading {position:absolute;left:86px;right:0;top:45%;margin:0;text-align:center;
  font-size:12px;letter-spacing:.1em;color:#69899d;}
.memory-loading[hidden] {display:none;}
.memory-foot {margin-top:12px;padding-left:86px;}
.memory-caption {display:flex;align-items:center;gap:12px;margin:0;font-size:11px;color:#648498;letter-spacing:.055em;}
#memory-caption {max-width:70%;line-height:1.7;}
.memory-caption-rule {flex:1;min-width:4px;height:1px;background:#ffffff80;}
.memory-count {flex:none;font-size:10px;letter-spacing:0;white-space:nowrap;}
.memory-count b {font-size:17px;font-weight:400;color:#48718b;}.memory-count span {opacity:.65;}
.memory-instruction {margin:12px 0 0;font-size:10px;letter-spacing:.04em;color:#7192a5;line-height:1.6;}
.memory-instruction>span {display:inline-block;margin-right:3px;color:#5d94b1;}
.memory-sr {position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;}
.memory-preview {position:fixed;inset:0;z-index:520;display:grid;place-items:center;padding:42px 16px 50px;
  background:rgba(17,39,57,.82);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);
  overscroll-behavior:contain;}
.memory-preview[hidden] {display:none;}
.memory-preview img {display:block;max-width:min(calc(100vw - 40px),1100px);max-height:calc(100svh - 110px);width:auto;height:auto;
  object-fit:contain;border-radius:14px;box-shadow:0 24px 100px #05182570,0 0 0 1px #fff9;}
.memory-preview-close {position:absolute;top:calc(12px + env(safe-area-inset-top));right:calc(14px + env(safe-area-inset-right));
  display:grid;place-items:center;width:44px;height:44px;border:1px solid #ffffffa6;border-radius:50%;
  background:#f2faff30;backdrop-filter:blur(12px);color:#fff;font-size:28px;line-height:1;cursor:pointer;}
.memory-preview-close:focus-visible {outline:2px solid #fff;outline-offset:3px;}
.memory-preview-count {position:absolute;bottom:calc(18px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);
  color:#e6f7ff;font-size:11px;letter-spacing:.24em;white-space:nowrap;}
@keyframes memory-breathe {50%{transform:scale(1.15);opacity:.15;}}
@media(min-width:768px){.memory-sticky{padding:90px 56px 30px;}.memory-intro br{display:none;}
  .memory-photo-stack{left:120px;right:20px;padding:0;}.memory-foot{padding-left:120px;}
  .memory-connection{right:calc(100% - 128px);}.memory-stage{max-width:800px;}
  .memory-slide{padding:12px;}.memory-slide img{border-radius:18px;}.memory-heading .h2{font-size:38px;}}
@media(max-width:360px){.memory-sticky{padding-left:16px;padding-right:16px;}.memory-photo-stack{left:71px;border-radius:23px;}
  .memory-foot{padding-left:71px;}.memory-connection{right:calc(100% - 79px);}.memory-caption{gap:7px;font-size:10px;}
  .memory-instruction{font-size:9px;}.memory-stage{height:clamp(300px,calc(100svh - 300px),620px);}}
@media(prefers-reduced-motion:reduce){.memory-slide,.memory-photo-stack{transition:none;transform:none;}.memory-orb span{animation:none;}}

/* The long private letter lives in real text over a quiet Image 2.5 paper texture. */
.letter-modal {padding:14px;background:rgba(116,150,174,.47);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);}
.letter-modal .letter-sheet {
  position:relative;display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;
  width:min(700px,100%);height:min(900px,94svh);max-height:94svh;overflow:hidden;
  padding:clamp(20px,4vw,36px) clamp(21px,5vw,48px) clamp(16px,3vw,28px);
  border:1px solid rgba(255,255,255,.9);border-radius:clamp(22px,4vw,32px);
  background:#fffefa url('ceremony/letter-stationery.webp') center / cover no-repeat;
  box-shadow:0 32px 90px rgba(49,78,108,.28),inset 0 1px 0 rgba(255,255,255,.9);
  color:#405566;
}
.letter-modal .letter-top {margin:0 0 25px;color:#6d8493;letter-spacing:.1em;gap:12px;}
.letter-modal .letter-top .btn-ghost {min-height:42px;white-space:nowrap;background:rgba(255,255,255,.55);
  border:1px solid rgba(112,149,176,.28);padding:9px 15px;}
.letter-page-head {padding-bottom:19px;border-bottom:1px solid rgba(103,146,176,.21);}
.letter-chapter-no {font-size:11px;letter-spacing:.24em;color:#7e9aaa;}
.letter-page-head h3 {font-family:'Songti SC','STSong','SimSun',serif!important;font-size:clamp(25px,5vw,36px)!important;
  line-height:1.2!important;font-weight:500!important;letter-spacing:.09em!important;color:#405f74!important;
  text-transform:none!important;margin:11px 0 7px!important;}
.letter-chapter-title {font-family:'Songti SC','STSong','SimSun',serif;font-size:14px;color:#7c9aae;
  letter-spacing:.18em;margin:0;}
.letter-modal .letter-body {
  min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-color:rgba(110,162,197,.42) transparent;
  scrollbar-width:thin;touch-action:pan-y;padding:25px 6px 21px 1px;outline:none;
  font-family:'Songti SC','STSong','Noto Serif CJK SC','SimSun',serif;
}
.letter-modal .letter-body:focus-visible {outline:2px solid rgba(116,168,199,.58);outline-offset:-2px;border-radius:8px;}
.letter-modal .letter-body.turning {animation:letter-page-turn .42s cubic-bezier(.2,.65,.2,1) both;}
.letter-modal .letter-body p {max-width:60ch;margin:0 0 .93em;color:#405566;
  font-family:inherit;font-size:clamp(16px,2.3vw,18px);font-weight:400;
  line-height:1.92;letter-spacing:.025em;overflow-wrap:anywhere;}
.letter-modal .letter-body .letter-salutation {font-size:19px;margin-bottom:1.25em;color:#315a75;}
.letter-modal .letter-body .letter-ellipsis {text-align:center;letter-spacing:.6em;margin:1.7em auto;}
.letter-modal .letter-body .letter-emphasis {font-size:clamp(17px,2.6vw,20px);line-height:1.85;
  font-weight:600;color:#4f88af;margin:1.2em 0;text-shadow:0 1px 0 #fff;}
.letter-modal .letter-body .letter-signature {text-align:right;margin:2.4em 0 .25em;color:#496e88;}
.letter-modal .letter-body .letter-date {text-align:right;font-size:14px;color:#7793a3;}
.letter-nav {display:flex;align-items:center;gap:14px;padding-top:15px;border-top:1px solid rgba(103,146,176,.21);}
.letter-page-button {display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:46px;
  padding:10px 15px;border:1px solid rgba(130,171,197,.32);border-radius:999px;
  background:rgba(255,255,255,.55);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:inset 0 1px 0 #fff9;color:#4d7690;font:500 13px var(--sans);letter-spacing:.07em;cursor:pointer;
  transition:background .2s,transform .2s,border-color .2s;}
.letter-page-button:not(:disabled):hover {background:rgba(229,245,255,.92);transform:translateY(-2px);border-color:rgba(100,160,200,.55);}
.letter-page-button:focus-visible {outline:2px solid #5089ad;outline-offset:3px;}
.letter-page-button:disabled {opacity:.35;cursor:default;}
.letter-progress {display:block;flex:1;height:2px;border-radius:2px;background:rgba(105,151,180,.2);overflow:hidden;}
.letter-progress span {display:block;height:100%;width:11.111%;border-radius:2px;background:linear-gradient(90deg,#97c7e6,#c5a76c);
  transition:width .45s cubic-bezier(.2,.65,.2,1);}
@keyframes letter-page-turn {from{opacity:.1;transform:translateX(10px);}to{opacity:1;transform:none;}}
@media(max-width:767px) {
  .letter-modal {padding:8px;}
  .letter-modal .letter-sheet {width:100%;height:calc(100svh - 16px);max-height:calc(100svh - 16px);
    border-radius:24px;padding:22px 21px 18px;background-position:center;}
  .letter-modal .letter-top {margin-bottom:18px;font-size:10px;}
  .letter-page-head {padding-bottom:14px;}
  .letter-modal .letter-body {padding-top:18px;}
  .letter-modal .letter-body p {font-size:16px;line-height:1.88;margin-bottom:.88em;}
  .letter-nav {gap:9px;padding-top:12px;}
  .letter-page-button {padding:9px 11px;font-size:12px;min-height:44px;}
}
@media(prefers-reduced-motion:reduce) {
  .letter-modal .letter-body.turning {animation:none;}
  .letter-progress span,.letter-page-button {transition:none;}
}

.closing {padding-bottom:clamp(70px,10svh,120px);}
.closing-photo {width:min(510px,100%);margin:clamp(54px,8svh,94px) 0 0;pointer-events:auto;}
.closing-photo-button {position:relative;display:block;width:100%;padding:9px;border:1px solid rgba(255,255,255,.86);
  border-radius:25px;background:rgba(255,255,255,.5);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  box-shadow:0 25px 62px rgba(80,113,132,.22),inset 0 1px 0 rgba(255,255,255,.9);
  cursor:zoom-in;transform:rotate(-1deg);transition:transform .35s cubic-bezier(.2,.65,.2,1),box-shadow .35s;}
.closing-photo-button:hover {transform:rotate(0) translateY(-4px);box-shadow:0 30px 72px rgba(70,108,132,.27);}
.closing-photo-button:focus-visible {outline:3px solid #5f9cc4;outline-offset:5px;}
.closing-photo-button img {display:block;width:100%;height:auto;aspect-ratio:1.34;object-fit:cover;
  border-radius:17px;box-shadow:inset 0 0 0 1px #fff;}
.closing-photo-expand {position:absolute;right:22px;bottom:22px;display:grid;place-items:center;width:38px;height:38px;
  border-radius:50%;background:rgba(246,252,255,.82);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid #fffd;color:#496d83;font-size:19px;box-shadow:0 5px 18px rgba(35,66,91,.18);}
.closing-photo figcaption {display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin:18px 5px 0;
  color:#647986;text-align:left;}
.closing-photo figcaption span {font:400 clamp(14px,2.8vw,17px)/1.6 'Songti SC','STSong','SimSun',serif;}
.closing-photo figcaption small {white-space:nowrap;font:400 10px/1.5 var(--display);letter-spacing:.08em;color:#6f91a4;}
.childhood-photo-dialog {position:fixed;inset:0;box-sizing:border-box;width:min(1120px,100vw);height:min(94svh,900px);
  max-width:none;max-height:none;padding:clamp(16px,3vw,30px);border:1px solid rgba(255,255,255,.5);
  border-radius:clamp(22px,3vw,32px);background:linear-gradient(135deg,rgba(246,252,255,.96),rgba(210,231,244,.96));
  box-shadow:0 40px 120px rgba(12,30,48,.45);color:#446275;overflow:hidden;}
.childhood-photo-dialog:not([open]) {display:none;}
.childhood-photo-dialog[open] {display:flex;flex-direction:column;gap:14px;animation:childhood-photo-appear .35s cubic-bezier(.2,.65,.2,1) both;}
.childhood-photo-dialog::backdrop {background:rgba(10,24,38,.76);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);}
.childhood-photo-dialog-head {display:flex;align-items:center;justify-content:space-between;gap:18px;
  font:400 14px 'Songti SC','STSong','SimSun',serif;letter-spacing:.13em;}
.childhood-photo-dialog-head button {min-height:44px;padding:9px 16px;border:1px solid rgba(95,143,172,.28);
  border-radius:999px;background:rgba(255,255,255,.67);color:#496d83;font:400 12px var(--sans);cursor:pointer;}
.childhood-photo-dialog-head button:focus-visible,#zoom-childhood-photo:focus-visible {outline:3px solid #6aa3c7;outline-offset:3px;}
.childhood-photo-view {flex:1;min-height:0;display:grid;place-items:center;overflow:auto;overscroll-behavior:contain;
  border-radius:17px;background:rgba(255,255,255,.34);}
#zoom-childhood-photo {display:flex;align-items:center;justify-content:center;width:100%;max-width:100%;padding:0;border:0;background:transparent;cursor:zoom-in;}
#zoom-childhood-photo img {display:block;max-width:100%;max-height:calc(94svh - 162px);width:auto;height:auto;
  border-radius:14px;box-shadow:0 18px 50px rgba(36,67,88,.22);}
.childhood-photo-dialog.zoomed .childhood-photo-view {display:block;}
.childhood-photo-dialog.zoomed #zoom-childhood-photo {max-width:none;width:170%;cursor:zoom-out;}
.childhood-photo-dialog.zoomed #zoom-childhood-photo img {max-width:none;max-height:none;width:100%;}
.childhood-photo-dialog-caption {margin:0;text-align:center;font:400 15px/1.5 'Songti SC','STSong','SimSun',serif;}
.childhood-photo-dialog-caption span {display:block;margin-top:4px;font:400 10px var(--display);letter-spacing:.08em;color:#6d8b9c;}
body.photo-preview-open {overflow:hidden;}
@keyframes childhood-photo-appear {from{opacity:0;transform:translateY(12px) scale(.985);}to{opacity:1;transform:none;}}
@media(max-width:767px) {
  .closing-photo {width:min(360px,89vw);margin-top:60px;}
  .closing-photo figcaption {display:block;text-align:center;}
  .closing-photo figcaption small {display:block;margin-top:5px;}
  .childhood-photo-dialog {width:calc(100vw - 14px);height:calc(100svh - 18px);padding:15px;border-radius:23px;}
  #zoom-childhood-photo img {max-height:calc(100svh - 152px);}
  .childhood-photo-dialog.zoomed #zoom-childhood-photo {width:210%;}
}
@media(prefers-reduced-motion:reduce) {
  .closing-photo-button {transition:none;}
  .childhood-photo-dialog[open] {animation:none;}
}

/* A self-contained pixel adventure inside the existing soft-blue story. */
.student-era {align-items:center;min-height:100svh;padding-top:110px;padding-bottom:96px;pointer-events:auto;}
/* Childhood keeps drifting through the site; it steps back while the player
   needs to read a gate or reach a control. */
body.student-era-in-view #childhood-fall {opacity:.035;transition:opacity .5s ease;}
.student-era-inner {position:relative;width:min(1120px,100%);margin:auto;}
.student-era .kicker {margin-bottom:15px;}
.student-era h2 {margin:0;color:#34566f;font:500 clamp(30px,5vw,60px)/1.15 var(--sans);letter-spacing:-.035em;}
.student-era-subtitle {margin:13px 0 27px;color:#66859a;font:400 clamp(14px,1.7vw,18px)/1.8 var(--sans);}
.student-game {position:relative;height:clamp(410px,63svh,650px);overflow:hidden;isolation:isolate;outline:none;touch-action:pan-y;
  border:1px solid rgba(255,255,255,.83);border-radius:32px;
  background:linear-gradient(180deg,#bde0f8,#ebf5fa 58%,#d9eecb 58%,#b4d4b6);
  box-shadow:0 26px 70px rgba(78,125,158,.2),inset 0 1px 0 #fff;
}
.student-game:focus-visible {outline:3px solid #80b3d8;outline-offset:5px;}
.student-game canvas {display:block;width:100%;height:100%;image-rendering:pixelated;}
.student-game-hud {position:absolute;z-index:3;top:16px;left:18px;right:18px;display:flex;justify-content:space-between;gap:8px;
  color:#486d86;font:600 11px/1.4 var(--display);letter-spacing:.09em;text-shadow:0 1px 1px #fffc;pointer-events:none;}
.student-game-hud span {padding:8px 11px;border:1px solid #fffd;border-radius:99px;background:#f8fdffb3;backdrop-filter:blur(12px);}
.student-game-progress {position:absolute;z-index:3;top:60px;left:20px;right:20px;height:4px;overflow:hidden;border-radius:99px;background:#fff8;pointer-events:none;}
.student-game-progress span {display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,#83bded,#f6d98c);transition:width .2s linear;}
.student-game-layer {position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;text-align:center;}
.student-game-layer[hidden] {display:none;}
.student-game-start {background:linear-gradient(150deg,rgba(217,239,250,.87),rgba(245,251,251,.64) 60%,rgba(255,241,211,.62));backdrop-filter:blur(12px);}
.student-game-eyebrow {font:600 10px/1.5 var(--display);letter-spacing:.18em;color:#6388a5;}
.student-game-start h3 {margin:20px 0 12px;color:#416a8a;font:600 clamp(27px,4vw,49px)/1.38 var(--sans);letter-spacing:.015em;}
.student-game-start p {max-width:390px;margin:0 0 25px;color:#587789;font:400 15px/1.7 var(--sans);}
.student-game-layer button {min-height:48px;padding:11px 23px;border:1px solid #fffe;border-radius:999px;background:linear-gradient(150deg,#8fbeeb,#b4d9ed);
  box-shadow:0 11px 26px #679ac44d,inset 0 1px 0 #fffb;color:#1f506e;cursor:pointer;font:600 14px/1.5 var(--sans);
  transition:transform .24s ease,box-shadow .24s ease;}
.student-game-layer button:hover {transform:translateY(-2px);box-shadow:0 16px 32px #679ac466,inset 0 1px 0 #fffb;}
.student-game-layer button:focus-visible,.student-game-controls button:focus-visible {outline:3px solid #407aa3;outline-offset:3px;}
.student-game-layer button span {margin-left:14px;}
.student-game-start small {margin-top:15px;color:#6a8da0;font:400 11px var(--display);}
.student-achievement {justify-content:flex-start;padding:10px 18px 8px;background:rgba(24,45,67,.69);overflow:hidden;}
.student-projection-beam {position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(252,248,219,.03) 0%,rgba(245,245,214,.24) 43%,rgba(255,247,199,.68) 88%,rgba(255,234,170,.88) 100%);
  clip-path:polygon(2% 5%,98% 5%,53% 100%,47% 100%);filter:blur(2px);mix-blend-mode:screen;}
.student-achievement:not([hidden]) .student-projection-beam {animation:student-beam-on .9s ease-out both;}
@keyframes student-beam-on {from{opacity:0;clip-path:polygon(49% 100%,51% 100%,51% 100%,49% 100%)}to{opacity:1;clip-path:polygon(2% 5%,98% 5%,53% 100%,47% 100%)}}
.student-projector {position:absolute;z-index:1;left:50%;bottom:11px;width:94px;height:21px;transform:translateX(-50%);
  border:2px solid #fff2d5;border-radius:50%;background:radial-gradient(ellipse,#fffbed 1%,#f4d99b 38%,#617c87 72%);
  box-shadow:0 0 18px 7px #fff1bf99,0 8px 18px #0c2d4c66;}
.student-projector span {position:absolute;left:50%;bottom:9px;width:22px;height:15px;transform:translateX(-50%);border-radius:50%;background:#fff8d5;filter:blur(3px);}
.student-achievement-content {position:relative;z-index:2;width:min(760px,100%);height:100%;max-height:100%;overflow:auto;scrollbar-width:none;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:10px 10px 30px;}
.student-achievement-content::-webkit-scrollbar {display:none;}
.student-achievement:not([hidden]) .student-achievement-content {animation:student-achievement-arrive .8s .16s cubic-bezier(.19,.78,.23,1) both;}
@keyframes student-achievement-arrive {from{opacity:0;transform:translateY(30px) scale(.95);filter:brightness(1.6);}to{opacity:1;transform:none;filter:none;}}
.student-achievement-heading {width:min(610px,100%);display:flex;align-items:center;justify-content:space-between;gap:10px;color:#fff1c8;font:600 10px var(--display);letter-spacing:.1em;text-shadow:0 1px 9px #304b6d;}
.student-achievement .student-game-eyebrow {color:#fff1c8;}
.student-achievement h3 {margin:5px 0 1px;color:#ffe8a8;text-shadow:0 2px 12px #3e4e62;font:600 clamp(22px,4vw,32px)/1.35 var(--sans);}
.student-achievement #student-school-name {margin:0 0 6px;color:#f4f8f3;font:500 13px/1.5 var(--sans);letter-spacing:.08em;}
.student-achievement-art {position:relative;display:flex;flex:0 0 auto;align-items:center;justify-content:center;width:min(640px,85%);height:min(30svh,230px);min-height:142px;margin:0 auto 7px;}
#student-real-photo {display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;border:3px solid #fff8e7;
  box-shadow:0 0 0 1px #ffe3a9,0 0 24px 7px #fff3d0b3,0 20px 52px #132f4f99;}
#student-stage-portrait {display:none;position:absolute;right:-22px;bottom:-10px;width:69px;height:92px;
  background-size:400% 200%;background-position:0 0;background-repeat:no-repeat;image-rendering:pixelated;filter:drop-shadow(0 5px 8px #102c4399);}
#student-achievement-line {margin:3px 0 9px;color:#fff8e8;text-shadow:0 2px 8px #263d5b;font:400 13px/1.5 var(--sans);}
.student-achievement-content button {min-height:39px;padding:7px 20px;background:#fff7dfdd;color:#395872;box-shadow:0 5px 19px #1b334966;}
.student-door-prompt {justify-content:flex-end;padding-bottom:38px;background:linear-gradient(to top,rgba(222,241,250,.92),rgba(230,245,251,.1) 55%,transparent 78%);}
.student-door-prompt h3 {margin:10px 0 13px;color:#3f6784;text-shadow:0 1px 8px #fffd;font:500 clamp(24px,4vw,40px)/1.4 var(--sans);}
.student-finale {overflow:auto;overscroll-behavior:contain;background:radial-gradient(circle at 50% 45%,#fff8dfed,#d1e9f3eb 60%,#a8d1e9ed);backdrop-filter:blur(10px);}
.student-future-portrait {display:block;width:clamp(83px,13svh,123px);height:clamp(112px,18svh,164px);margin:7px auto 0;
  background:url('student-era/characters/stage-4.webp') 0 0/400% 200% no-repeat;image-rendering:pixelated;filter:drop-shadow(0 10px 18px #719fc766);}
.student-finale h3 {margin:8px 0 12px;color:#8d7848;font:600 clamp(29px,5vw,52px)/1.4 var(--sans);letter-spacing:.045em;text-shadow:0 1px 0 #fff,2px 3px 0 #dce9e5;
  animation:student-finale-title .7s steps(9,end) both;}
@keyframes student-finale-title {from{opacity:0;clip-path:inset(0 100% 0 0);}to{opacity:1;clip-path:inset(0 0 0 0);}}
.student-finale p {margin:0 0 25px;color:#58738a;font:400 15px/1.9 var(--sans);}
.student-finale-actions {display:flex;justify-content:center;flex-wrap:wrap;gap:10px;}
.student-finale-actions button:last-child {background:rgba(255,255,255,.76);}
.student-game-controls {display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:9px;margin:18px 0 0;}
.student-game-controls button {min-height:48px;border:1px solid rgba(255,255,255,.88);border-radius:99px;cursor:pointer;
  color:#4c7189;background:rgba(250,254,255,.63);backdrop-filter:blur(16px);box-shadow:0 8px 23px rgba(91,137,167,.11);}
.student-game-controls .student-forward {min-width:165px;min-height:64px;padding:13px 24px;background:linear-gradient(135deg,#9dc9ed,#d2e8f2);
  color:#2e5d79;font:600 17px var(--sans);touch-action:none;user-select:none;-webkit-user-select:none;box-shadow:0 11px 30px #83b2d054;}
.student-forward span {margin-left:15px;font-size:21px;}
.student-forward.is-held {transform:translateY(2px) scale(.98);box-shadow:inset 0 4px 12px #709dbc55;}
.student-game-secondary {padding:10px 15px;font:500 12px var(--sans);}
.student-game-status {min-height:22px;margin:12px 2px 0;color:#648298;text-align:center;font:400 12px/1.6 var(--sans);}
.student-era-inner:fullscreen {box-sizing:border-box;width:100%;height:100dvh;max-width:none;padding:calc(16px + env(safe-area-inset-top)) 18px calc(12px + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;overflow:auto;background:linear-gradient(145deg,#d7ebf7,#f0f8fa);}
.student-era-inner:fullscreen .kicker {margin-bottom:7px;}
.student-era-inner:fullscreen h2 {font-size:clamp(22px,4vh,36px);}
.student-era-inner:fullscreen .student-era-subtitle {margin:2px 0 8px;font-size:12px;}
.student-era-inner:fullscreen .student-game {flex:1;min-height:270px;height:auto;}
.student-era-inner:fullscreen .student-game-controls {margin-top:9px;}
.student-era-inner:fullscreen .student-game-status {margin-top:5px;}
@media(orientation:landscape) and (max-height:520px) {
  .student-era-inner:fullscreen .student-era-subtitle {display:none;}
  .student-era-inner:fullscreen .student-game {min-height:220px;}
  .student-era-inner:fullscreen .student-game-controls {display:flex;flex-wrap:nowrap;}
  .student-era-inner:fullscreen .student-game-controls .student-forward {grid-column:auto;min-height:50px;width:auto;}
}
@media(max-width:767px) {
  .student-era {padding:88px 14px 70px;}
  .student-era .kicker {font-size:9px;}
  .student-era h2 {font-size:clamp(30px,8vw,40px);}
  .student-era-subtitle {font-size:13px;margin-bottom:19px;}
  .student-game {height:min(62svh,540px);min-height:390px;border-radius:25px;}
  .student-game-hud {top:11px;left:10px;right:10px;font-size:9px;}
  .student-game-hud span {padding:6px 8px;}
  .student-game-progress {top:47px;left:11px;right:11px;}
  .student-game-layer {padding:15px;}
  .student-game-start h3 {font-size:28px;}
  .student-game-start p {font-size:13px;}
  .student-achievement-content {padding:4px 2px 25px;}
  .student-achievement-art {width:88%;height:min(27svh,170px);min-height:125px;}
  #student-stage-portrait {right:-12px;width:54px;height:72px;}
  .student-game-controls {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;}
  .student-game-controls .student-forward {grid-column:1/-1;min-height:70px;width:100%;}
  .student-game-secondary {padding:9px 4px;font-size:11px;}
}
@media(prefers-reduced-motion:reduce) {
  .student-game-layer button,.student-game-progress span,body.student-era-in-view #childhood-fall {transition:none;}
  .student-achievement:not([hidden]) .student-achievement-content,.student-achievement:not([hidden]) .student-projection-beam {animation:none;}
  .student-finale h3 {animation:none;}
}