@font-face {
  font-family: "LXGW WenKai";
  font-style: normal;
  font-display: optional;
  font-weight: 500;
  src: url("https://media.lanyunyouming.cn/assets/latest/fonts/lxgw-wenkai-500.woff2") format("woff2");
}

/* v66 · 四款小王子治愈信纸与红蜡封寄信流程 */
.writer-body { background:#020b16; }
.writer-body .collab-editor { min-height:100svh; max-width:none; padding-bottom:calc(118px + env(safe-area-inset-bottom)); }
.writer-body .presence-strip { display:none !important; }
.writer-body .writer-select-stage { width:min(820px,calc(100% - 24px)); margin:0 auto; padding:26px 22px 34px !important; }
.writer-body .writer-select-kicker { margin:0 0 8px; color:rgba(230,194,112,.58); font:500 10px/1.4 Georgia,serif; letter-spacing:.28em; text-align:center; }
.writer-body .writer-select-title { margin:0; color:#f2d17d; font:500 clamp(27px,6vw,40px)/1.25 "STKaiti","Kaiti SC",KaiTi,serif; letter-spacing:.1em; text-align:center; }
.writer-body .writer-select-copy { margin:7px 0 22px; color:rgba(239,218,166,.65); font:400 12px/1.6 "LXGW WenKai","Kaiti SC",KaiTi,serif; letter-spacing:.08em; text-align:center; }
.writer-body .writer-select-stage .stationery-reference-heading { display:none; }
.writer-body .writer-select-stage .stationery-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:24px 18px !important; }
.writer-body .writer-select-stage .stationery-option { padding:0 0 12px !important; border-radius:19px !important; transition:transform .25s ease,filter .25s ease; }
.writer-body .writer-select-stage .stationery-option:active { transform:scale(.97); }
.writer-body .writer-select-stage .paper-swatch { aspect-ratio:1/1.16 !important; border-radius:17px !important; clip-path:none !important; overflow:hidden; }
.writer-body .writer-select-stage .stationery-option strong { margin-top:11px; font-size:17px !important; }
.writer-body .writer-select-stage .stationery-seal { right:-5px; bottom:24px; }
.writer-body .writer-compose-stage { width:min(760px,100%); margin:0 auto; }
.writer-body .change-paper-button { min-height:38px; margin:0 14px 4px; padding:0 17px; border:1px solid rgba(231,196,114,.28); border-radius:20px; color:#e7c579; background:rgba(3,24,47,.58); font:400 12px/1 "LXGW WenKai","Kaiti SC",KaiTi,serif; }
.writer-body .writer-compose-stage .shared-paper { min-height:760px !important; margin:8px 10px 0 !important; padding:58px 52px 190px !important; background-position:center !important; background-size:cover !important; }
.writer-body .stationery-moon .shared-paper { background-image:linear-gradient(rgba(255,249,228,.08),rgba(255,249,228,.08)),url("https://media.lanyunyouming.cn/assets/latest/stationery/moon-v2.webp") !important; }
.writer-body .stationery-rose .shared-paper { background-image:linear-gradient(rgba(255,249,228,.07),rgba(255,249,228,.07)),url("https://media.lanyunyouming.cn/assets/latest/stationery/rose-v2.webp") !important; }
.writer-body .stationery-wheat .shared-paper { background-image:linear-gradient(rgba(255,249,228,.06),rgba(255,249,228,.06)),url("https://media.lanyunyouming.cn/assets/latest/stationery/wheat-v2.webp") !important; }
.writer-body .stationery-star .shared-paper { color:#f3e2b5 !important; background-image:linear-gradient(rgba(3,17,42,.04),rgba(3,17,42,.04)),url("https://media.lanyunyouming.cn/assets/latest/stationery/star-v2.webp") !important; }
.writer-body .stationery-star .letter-title-input,.writer-body .stationery-star textarea,.writer-body .stationery-star .paper-address { color:#f5e6bd !important; }
.writer-body .stationery-star .letter-title-input { border-bottom-color:rgba(242,215,150,.2) !important; }
.writer-body .writer-compose-stage .editor-actions { margin-top:-158px !important; padding-bottom:34px !important; }
.writer-body .writer-compose-stage .writer-tool { opacity:.78; }
.writer-body .wax-seal-send { display:flex !important; flex-direction:column; align-items:center; justify-content:center; gap:2px; }
.writer-body .wax-seal-send .wax-rose { display:grid; place-items:center; width:42px; height:42px; border:1px solid rgba(255,218,148,.38); border-radius:50%; font-size:26px !important; line-height:1; }
.writer-body .wax-seal-send b { font:500 18px/1.1 "STKaiti","Kaiti SC",KaiTi,serif; }
.writer-body .send-success { position:fixed; z-index:80; inset:0; min-height:100svh; padding:max(72px,env(safe-area-inset-top)) 24px calc(32px + env(safe-area-inset-bottom)); display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; color:#f4d786; background:radial-gradient(circle at 50% 38%,rgba(47,86,130,.42),transparent 28%),radial-gradient(circle at 50% 110%,rgba(185,121,54,.16),transparent 35%),linear-gradient(180deg,#061c35,#020916); }
.writer-body .send-success[hidden] { display:none !important; }
.writer-body .send-success::before { content:""; position:absolute; inset:0; opacity:.65; pointer-events:none; background-image:radial-gradient(circle,#f7dda0 0 1px,transparent 1.4px),radial-gradient(circle,#b8d8ff 0 1px,transparent 1.5px); background-position:12px 28px,44px 67px; background-size:73px 79px,101px 109px; }
.writer-body .send-success>* { position:relative; z-index:1; }
.writer-body .success-stars { margin-bottom:20px; color:#e8c36c; font-size:13px; }
.writer-body .send-success>p:first-of-type { color:rgba(234,205,140,.62); font:500 10px/1.4 Georgia,serif; letter-spacing:.28em; }
.writer-body .send-success h2 { margin:14px 0 26px; font:500 clamp(31px,8vw,48px)/1.25 "STKaiti","Kaiti SC",KaiTi,serif; letter-spacing:.1em; }
.writer-body .success-envelope { position:relative; width:184px; height:118px; margin:4px auto 30px; border:1px solid rgba(129,84,44,.6); border-radius:6px; background:linear-gradient(145deg,#f2dfb9,#cda36c); box-shadow:0 18px 40px rgba(0,0,0,.42); overflow:hidden; }
.writer-body .success-envelope::before,.writer-body .success-envelope::after { content:""; position:absolute; inset:0; }
.writer-body .success-envelope::before { clip-path:polygon(0 0,50% 56%,100% 0); background:#ecd4a8; filter:drop-shadow(0 2px 1px rgba(81,48,25,.2)); }
.writer-body .success-envelope::after { clip-path:polygon(0 100%,50% 46%,100% 100%); background:rgba(211,171,112,.75); }
.writer-body .success-envelope span { position:absolute; z-index:3; left:50%; top:55%; width:46px; height:46px; display:grid; place-items:center; transform:translate(-50%,-50%); border-radius:50%; color:#e5b862; background:radial-gradient(circle at 35% 30%,#a43e35,#65131d 72%); box-shadow:0 5px 12px rgba(0,0,0,.3); font-size:25px; }
.writer-body .success-copy { margin:0 0 30px; color:rgba(238,219,170,.75); font:400 15px/1.8 "LXGW WenKai","Kaiti SC",KaiTi,serif; letter-spacing:.08em; }
.writer-body .success-actions { display:flex; gap:14px; }
.writer-body .success-actions a { min-width:118px; min-height:44px; display:grid; place-items:center; border:1px solid rgba(231,194,108,.45); border-radius:24px; color:#f2d17e; background:rgba(6,30,56,.7); font-size:14px; }
.writer-send-complete .starlight-tabbar { display:none !important; }

@media (max-width:600px) {
  .writer-body .editor-header { min-height:118px !important; }
  .writer-body .writer-select-stage { width:calc(100% - 16px); padding:20px 12px 28px !important; border-radius:22px !important; }
  .writer-body .writer-select-stage .stationery-grid { gap:18px 10px !important; }
  .writer-body .writer-select-stage .paper-swatch { aspect-ratio:1/1.18 !important; border-radius:14px !important; }
  .writer-body .writer-select-stage .stationery-option strong { font-size:14px !important; }
  .writer-body .writer-compose-stage .shared-paper { min-height:690px !important; margin-inline:2px !important; padding:48px 25px 176px !important; }
  .writer-body .writer-compose-stage .editor-actions { margin-top:-148px !important; }
  .writer-body .success-envelope { width:160px; height:103px; }
}

:root {
  --night: #071522;
  --gold: #e8c569;
  --handwriting-font: "LXGW WenKai", "Kaiti SC", "STKaiti", "KaiTi", "楷体", "DFKai-SB", "FangSong", "STFangsong", cursive;
}

* { box-sizing: border-box; }

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  background: var(--night);
  color: white;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
}

body { overflow: hidden; }
button, input, textarea { font: inherit; }

/* 觉和瑞的星光信箱首页 */
.mailbox-poster-page {
  position: relative;
  width: 100%;
  height: 100svh;
  overflow: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 0 max(18px, env(safe-area-inset-bottom));
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 16%, rgba(42, 94, 139, 0.52), transparent 40%),
    linear-gradient(160deg, #0d2d4a 0%, #061624 55%, #020a11 100%);
}

.poster-stars {
  position: fixed;
  inset: 0;
  z-index: -1;
  opacity: 0.58;
  pointer-events: none;
  background-image:
    radial-gradient(circle, rgba(255, 228, 143, 0.9) 0 1px, transparent 1.6px),
    radial-gradient(circle, rgba(194, 219, 239, 0.68) 0 1px, transparent 1.5px);
  background-size: 137px 129px, 211px 197px;
  background-position: 13px 23px, 91px 61px;
  animation: poster-sky-drift 18s ease-in-out infinite alternate;
}

@keyframes poster-sky-drift {
  to { opacity: 0.78; transform: translate3d(9px, -7px, 0); }
}

.mailbox-poster {
  position: relative;
  width: min(100%, 520px);
  min-height: 100svh;
  margin: 0 auto;
  overflow: hidden;
  background: #0b2843;
  box-shadow: 0 0 70px rgba(0, 0, 0, 0.56);
}

.mailbox-poster-image {
  width: 100%;
  height: auto;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

.poster-hotspot {
  position: absolute;
  z-index: 3;
  display: block;
  padding: 0;
  border: 0;
  border-radius: 22px;
  color: transparent;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.poster-hotspot:focus-visible {
  outline: 3px solid rgba(255, 224, 126, 0.92);
  outline-offset: 3px;
}

.poster-filter-hotspot {
  left: 4.5%;
  top: 48.4%;
  width: 50%;
  height: 5.7%;
}

.poster-letter-hotspot {
  left: 5.8%;
  top: 54.2%;
  width: 88.4%;
  height: 36.5%;
}

.poster-send-hotspot {
  left: 15.3%;
  bottom: 1.4%;
  width: 69.4%;
  height: 7.2%;
  border-radius: 999px;
}

.poster-letter-hotspot.hotspot-glow {
  animation: letter-card-glow 0.75s ease-in-out 2;
}

@keyframes letter-card-glow {
  50% {
    background: rgba(255, 220, 125, 0.12);
    box-shadow: 0 0 0 3px rgba(255, 219, 117, 0.72), 0 0 34px rgba(255, 213, 99, 0.54);
  }
}

.poster-hint {
  position: fixed;
  z-index: 4;
  left: 50%;
  bottom: max(8px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  margin: 0;
  padding: 6px 12px;
  border: 1px solid rgba(255, 227, 153, 0.18);
  border-radius: 999px;
  color: rgba(255, 239, 196, 0.76);
  background: rgba(3, 15, 25, 0.68);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: 10px;
  letter-spacing: 0.06em;
  pointer-events: none;
}

.send-note-backdrop {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(1, 9, 15, 0.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  animation: note-fade 0.24s ease both;
}

.send-note {
  width: min(430px, 100%);
  padding: 34px 28px 26px;
  border: 1px solid rgba(126, 80, 42, 0.28);
  border-radius: 26px;
  color: #433125;
  text-align: center;
  background:
    radial-gradient(circle at 86% 11%, rgba(63, 105, 146, 0.13), transparent 25%),
    linear-gradient(145deg, #fbefd0, #e1c593);
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.52);
  animation: note-rise 0.3s ease both;
}

.send-note-seal {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  margin: -63px auto 15px;
  border: 3px double rgba(242, 183, 92, 0.74);
  border-radius: 47% 53% 45% 55%;
  color: #f2c36a;
  background: radial-gradient(circle at 35% 28%, #b94e45, #781f2b 68%, #4c111d);
  box-shadow: 0 8px 20px rgba(75, 21, 26, 0.32);
}

.send-note h2 {
  margin: 0 0 12px;
  font-family: "Songti SC", "STSong", serif;
  font-size: 28px;
  font-weight: 400;
  letter-spacing: 0.1em;
}

.send-note p {
  margin: 0 0 22px;
  color: #6c5847;
  font-size: 14px;
  line-height: 1.85;
}

.send-note button {
  min-width: 140px;
  min-height: 43px;
  border: 0;
  border-radius: 999px;
  color: #ffe9ae;
  background: linear-gradient(135deg, #a7433d, #6e1b29);
  cursor: pointer;
}

@keyframes note-fade { from { opacity: 0; } }
@keyframes note-rise { from { opacity: 0; transform: translateY(14px) scale(0.98); } }

.letter-view-shell { position: relative; min-height: 100svh; }

.mailbox-back {
  position: fixed;
  top: max(12px, env(safe-area-inset-top));
  left: max(54px, calc(env(safe-area-inset-left) + 54px));
  z-index: 30;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 0 12px 0 8px;
  border: 1px solid rgba(255, 225, 147, 0.28);
  border-radius: 999px;
  color: #f5d67e;
  background: rgba(6, 22, 38, 0.78);
  box-shadow: 0 7px 20px rgba(0, 0, 0, 0.24);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-size: 11px;
  cursor: pointer;
}

.mailbox-back span { font-size: 22px; line-height: 1; }

.starlight-stage {
  position: relative;
  min-height: 100svh;
  width: 100%;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 18px 12px 112px;
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 14%, rgba(43, 87, 128, 0.62), transparent 39%),
    radial-gradient(circle at 14% 85%, rgba(34, 69, 104, 0.34), transparent 28%),
    linear-gradient(160deg, #102b48 0%, #081929 49%, #06111d 100%);
}

.sky-glow {
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: 0.5;
  background-image:
    radial-gradient(circle at 12% 21%, rgba(255, 224, 140, 0.9) 0 1px, transparent 2px),
    radial-gradient(circle at 78% 13%, rgba(255, 245, 196, 0.8) 0 1px, transparent 2px),
    radial-gradient(circle at 91% 67%, rgba(255, 221, 130, 0.8) 0 1px, transparent 2px),
    radial-gradient(circle at 33% 82%, rgba(255, 247, 213, 0.7) 0 1px, transparent 2px);
  background-size: 180px 170px, 230px 210px, 160px 190px, 260px 220px;
  animation: nebula-drift 18s ease-in-out infinite alternate;
}

@keyframes nebula-drift {
  from { opacity: 0.38; transform: scale(1); background-position: 0 0, 0 0, 0 0, 0 0; }
  to { opacity: 0.56; transform: scale(1.012); background-position: 18px -10px, -14px 12px, 12px 17px, -16px -10px; }
}

.star-field {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  color: rgba(240, 198, 92, 0.65);
  text-shadow: 0 0 12px rgba(240, 198, 92, 0.42);
}

.star-field i {
  position: absolute;
  left: var(--star-left);
  top: var(--star-top);
  font-size: var(--star-size);
  font-style: normal;
  opacity: 0.44;
  color: rgba(247, 213, 126, 0.82);
  text-shadow: 0 0 8px rgba(255, 224, 146, 0.58), 0 0 18px rgba(112, 172, 225, 0.22);
  animation: star-breathe var(--star-duration) ease-in-out var(--star-delay) infinite alternate;
  will-change: transform, opacity;
}

@keyframes star-breathe {
  from { opacity: 0.12; transform: translate3d(0, 0, 0) scale(0.76) rotate(-3deg); }
  to { opacity: 0.96; transform: translate3d(var(--star-drift), -1.8px, 0) scale(1.2) rotate(3deg); }
}

.shooting-star {
  position: absolute;
  width: 84px;
  height: 1px;
  border-radius: 999px;
  opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 244, 203, 0.7));
  box-shadow: 0 0 7px rgba(255, 228, 148, 0.38);
  transform: translate3d(-40px, 28px, 0) rotate(-28deg);
  transform-origin: right center;
  animation: shooting-star 12s cubic-bezier(0.32, 0.05, 0.45, 0.98) infinite;
}

.shooting-star::after {
  content: "";
  position: absolute;
  right: -2px;
  top: -2px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #fff4c9;
  box-shadow: 0 0 9px rgba(244, 201, 104, 0.72);
}

.shooting-star-one { left: -3%; top: 31%; animation-delay: -2.4s; animation-duration: 11.8s; }
.shooting-star-two { left: 58%; top: 14%; animation-delay: -7.9s; animation-duration: 14.6s; }
.shooting-star-three { left: 3%; top: 72%; animation-delay: -10.8s; animation-duration: 17.2s; }
.shooting-star-four { left: 72%; top: 56%; animation-delay: -5.6s; animation-duration: 13.1s; }

@keyframes shooting-star {
  0%, 66% { opacity: 0; transform: translate3d(-42px, 30px, 0) rotate(-28deg); }
  69% { opacity: 0.76; }
  82% { opacity: 0; transform: translate3d(232px, -106px, 0) rotate(-28deg); }
  100% { opacity: 0; transform: translate3d(252px, -118px, 0) rotate(-28deg); }
}

.viewer {
  position: relative;
  display: grid;
  place-items: center;
  max-width: 96vw;
  max-height: calc(100svh - 132px);
  touch-action: pan-y;
  user-select: none;
  transition: width 0.35s ease, height 0.35s ease;
}

.viewer-landscape {
  width: min(1000px, 96vw);
  aspect-ratio: 1402 / 1122;
}

.viewer-portrait {
  height: min(78svh, 790px);
  aspect-ratio: 2 / 3;
}

.letter-image {
  position: relative;
  z-index: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  border-radius: clamp(12px, 2vw, 20px);
  filter: drop-shadow(0 22px 42px rgba(0, 0, 0, 0.42));
  animation: letter-in 0.38s ease both;
}

.motion-clip {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  border-radius: clamp(12px, 2vw, 20px);
  pointer-events: none;
  animation: letter-in 0.38s ease both;
}

.motion-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: none;
  object-fit: contain;
  transform-origin: var(--origin-x) var(--origin-y);
  will-change: transform;
  backface-visibility: hidden;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-image: radial-gradient(
    ellipse var(--spot-rx) var(--spot-ry) at var(--spot-x) var(--spot-y),
    #000 0 46%,
    rgba(0, 0, 0, 0.96) 55%,
    transparent 78%
  );
  mask-image: radial-gradient(
    ellipse var(--spot-rx) var(--spot-ry) at var(--spot-x) var(--spot-y),
    #000 0 46%,
    rgba(0, 0, 0, 0.96) 55%,
    transparent 78%
  );
}

@supports ((-webkit-mask-image: radial-gradient(circle, #000, transparent)) or (mask-image: radial-gradient(circle, #000, transparent))) {
  .motion-layer { display: block; }
}

.character-motion {
  animation: character-breeze 7.2s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite alternate;
}

.rose-motion {
  animation: rose-breeze 5.6s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite alternate;
}

@keyframes character-breeze {
  0% { transform: translate3d(-0.45px, 0, 0) rotate(-0.08deg) skewX(-0.03deg); }
  36% { transform: translate3d(0.55px, -0.15px, 0) rotate(0.05deg) skewX(0.02deg); }
  72% { transform: translate3d(1.35px, -0.35px, 0) rotate(0.13deg) skewX(0.06deg); }
  100% { transform: translate3d(0.15px, -0.1px, 0) rotate(-0.03deg) skewX(0.01deg); }
}

@keyframes rose-breeze {
  0% { transform: translate3d(-0.35px, 0, 0) rotate(-0.12deg); }
  48% { transform: translate3d(1.25px, -0.2px, 0) rotate(0.2deg); }
  100% { transform: translate3d(0.1px, -0.1px, 0) rotate(-0.05deg); }
}

.petal-field {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.wind-petal {
  position: absolute;
  left: var(--rose-x);
  top: var(--rose-y);
  width: clamp(3px, 0.48vw, 5px);
  height: clamp(2px, 0.32vw, 4px);
  border-radius: 85% 15% 80% 20%;
  opacity: 0;
  background: linear-gradient(135deg, #cb554d, #7e1d2b 72%);
  box-shadow: 0 0 4px rgba(177, 60, 58, 0.35);
  animation: petal-drift 7.4s cubic-bezier(0.42, 0, 0.58, 1) var(--petal-delay) infinite;
}

.petal-2 { margin-left: 8px; margin-top: -5px; animation-duration: 8.6s; }

@keyframes petal-drift {
  0%, 18% { opacity: 0; transform: translate3d(0, 0, 0) rotate(0deg) scale(0.7); }
  30% { opacity: 0.56; }
  72% { opacity: 0.34; }
  100% { opacity: 0; transform: translate3d(var(--petal-drift), -38px, 0) rotate(210deg) scale(0.96); }
}

@keyframes letter-in {
  from { opacity: 0; transform: translateX(18px) scale(0.988); }
  to { opacity: 1; transform: none; }
}

.motion-toggle {
  position: fixed;
  top: max(12px, env(safe-area-inset-top));
  left: max(12px, env(safe-area-inset-left));
  z-index: 12;
  display: grid;
  place-items: center;
  align-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid rgba(255, 226, 147, 0.28);
  border-radius: 999px;
  color: #f4dc99;
  background: rgba(6, 22, 38, 0.76);
  box-shadow: 0 7px 20px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-size: 12px;
  cursor: pointer;
}

.motion-toggle span {
  color: #ffe18a;
  text-shadow: 0 0 8px rgba(255, 218, 107, 0.9);
  animation: motion-toggle-glow 1.7s ease-in-out infinite alternate;
}

@keyframes motion-toggle-glow {
  to { opacity: 0.42; transform: scale(0.7) rotate(36deg); }
}

.motion-paused *,
.motion-paused *::before,
.motion-paused *::after {
  animation-play-state: paused !important;
}

.control-dock {
  position: fixed;
  left: 50%;
  bottom: max(14px, env(safe-area-inset-bottom));
  z-index: 10;
  width: min(660px, 95vw);
  min-height: 72px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid rgba(255, 225, 150, 0.19);
  border-radius: 999px;
  background: linear-gradient(105deg, rgba(7, 23, 40, 0.94), rgba(18, 47, 76, 0.91));
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.34);
  backdrop-filter: blur(18px);
}

.nav-button {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.075);
  color: #f0cf78;
  font-size: 27px;
  line-height: 1;
  cursor: pointer;
}

.nav-button:disabled { opacity: 0.24; cursor: default; }

.music-player {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
}

.record-player {
  position: relative;
  flex: 0 0 auto;
  width: 76px;
  height: 60px;
  padding: 0;
  border: 0;
  border-radius: 18px;
  background: transparent;
  cursor: pointer;
  filter: drop-shadow(0 6px 9px rgba(0, 0, 0, 0.34));
  transition: transform 0.2s ease, filter 0.2s ease;
}

.record-player:hover { transform: translateY(-1px); }
.record-player:active { transform: translateY(1px) scale(0.98); }
.record-player:focus-visible { outline: 2px solid #f5d579; outline-offset: 3px; }

.gramophone {
  position: absolute;
  inset: 0;
  display: block;
}

.gramophone-base {
  position: absolute;
  left: 3px;
  bottom: 2px;
  width: 53px;
  height: 24px;
  border: 1px solid #d6a74b;
  border-radius: 8px 8px 11px 11px;
  background:
    linear-gradient(90deg, transparent 47%, rgba(255, 221, 137, 0.23) 49% 51%, transparent 53%),
    linear-gradient(145deg, #8e3c2c 0%, #5e211e 56%, #2c1820 100%);
  box-shadow:
    inset 0 2px 0 rgba(255, 226, 157, 0.2),
    0 4px 7px rgba(0, 0, 0, 0.32);
}

.gramophone-base::before,
.gramophone-base::after {
  content: "✦";
  position: absolute;
  bottom: 3px;
  color: rgba(248, 213, 123, 0.7);
  font-size: 7px;
}

.gramophone-base::before { left: 6px; }
.gramophone-base::after { right: 6px; }

.gramophone-disc {
  position: absolute;
  left: 8px;
  bottom: 20px;
  width: 34px;
  height: 25px;
  border: 1px solid #c8953c;
  border-radius: 50%;
  background: repeating-radial-gradient(ellipse at center, #253b50 0 2px, #07131f 3px 5px, #334a5e 6px 7px);
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.34);
}

.gramophone-disc::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 9px;
  height: 7px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, #fff1b8 0 17%, #ad3c39 20% 62%, #e7c467 65%);
}

.gramophone-needle {
  position: absolute;
  left: 36px;
  bottom: 26px;
  width: 3px;
  height: 22px;
  border-radius: 999px;
  background: linear-gradient(#f6dfa0, #a77829);
  transform: rotate(30deg);
  transform-origin: bottom;
  transition: transform 0.24s ease;
}

.gramophone-neck {
  position: absolute;
  right: 20px;
  bottom: 29px;
  width: 6px;
  height: 22px;
  border-radius: 999px 999px 2px 2px;
  background: linear-gradient(90deg, #8c5d22, #f4d984 50%, #9c6b27);
  transform: rotate(-8deg);
  transform-origin: bottom;
}

.gramophone-horn {
  position: absolute;
  right: 0;
  top: 0;
  width: 34px;
  height: 35px;
  clip-path: polygon(0 39%, 93% 0, 100% 7%, 100% 93%, 93% 100%, 0 61%);
  border-radius: 5px 50% 50% 5px;
  background:
    radial-gradient(ellipse at 5% 50%, #4d251d 0 9%, transparent 11%),
    linear-gradient(105deg, #a56d28 3%, #f9e19a 44%, #d19b3b 66%, #78501f 100%);
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.35));
  transform: rotate(-11deg);
  transform-origin: left center;
}

.gramophone-horn::after {
  content: "";
  position: absolute;
  inset: 4px 3px 4px 9px;
  border: 1px solid rgba(255, 239, 184, 0.7);
  border-left: 0;
  border-radius: 0 50% 50% 0;
}

.gramophone-star {
  position: absolute;
  right: 5px;
  top: 6px;
  color: #fff0a9;
  font-size: 8px;
  text-shadow: 0 0 6px #ffe179;
  animation: gramophone-star 2.2s ease-in-out infinite alternate;
}

.record-player.is-playing .gramophone-disc { animation: record-spin 2.8s linear infinite; }
.record-player.is-playing .gramophone-needle { transform: rotate(20deg); }
.record-player.is-playing .gramophone-horn { animation: horn-breathe 2.4s ease-in-out infinite alternate; }
@keyframes record-spin { to { transform: rotate(360deg); } }
@keyframes horn-breathe { to { filter: drop-shadow(0 2px 6px rgba(244, 202, 104, 0.46)); } }
@keyframes gramophone-star { to { opacity: 0.35; transform: scale(0.75) rotate(20deg); } }

.player-state {
  position: absolute;
  left: 25px;
  bottom: 7px;
  z-index: 2;
  min-width: 14px;
  color: #fff3c6;
  font-size: 8px;
  line-height: 1;
  text-align: center;
  text-shadow: 0 1px 3px #1e0f12;
}

.record-player.needs-touch { animation: gramophone-nudge 1.8s ease-in-out infinite; }
@keyframes gramophone-nudge {
  0%, 100% { filter: drop-shadow(0 6px 9px rgba(0, 0, 0, 0.34)); }
  50% { filter: drop-shadow(0 6px 12px rgba(240, 197, 95, 0.58)); }
}

.music-meta {
  width: 165px;
  min-width: 0;
  display: grid;
  gap: 1px;
}

.music-meta strong,
.music-meta span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.music-meta strong {
  color: #f1d487;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
}

.music-meta span { color: rgba(255, 255, 255, 0.65); font-size: 10px; }

.music-track {
  --music-progress: 0%;
  width: 100%;
  height: 14px;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  cursor: pointer;
}

.music-track::-webkit-slider-runnable-track {
  height: 3px;
  border-radius: 9px;
  background: linear-gradient(90deg, #e8c569 var(--music-progress), rgba(255, 255, 255, 0.15) var(--music-progress));
}

.music-track::-webkit-slider-thumb {
  width: 10px;
  height: 10px;
  margin-top: -3.5px;
  border: 0;
  border-radius: 50%;
  appearance: none;
  -webkit-appearance: none;
  background: #f5dfa0;
}

.music-track::-moz-range-track { height: 3px; border-radius: 9px; background: rgba(255, 255, 255, 0.15); }
.music-track::-moz-range-progress { height: 3px; border-radius: 9px; background: #e8c569; }
.music-track::-moz-range-thumb { width: 10px; height: 10px; border: 0; border-radius: 50%; background: #f5dfa0; }

.slide-count {
  flex: 0 0 auto;
  min-width: 38px;
  color: rgba(255, 255, 255, 0.66);
  font-size: 11px;
  text-align: center;
}

@media (max-width: 680px) {
  .starlight-stage { padding: 10px 7px 103px; }
  .viewer { max-width: 97vw; max-height: calc(100svh - 118px); }
  .viewer-landscape { width: 97vw; }
  .viewer-portrait { height: min(76svh, 720px); }
  .control-dock { min-height: 66px; gap: 6px; padding: 7px 8px; }
  .nav-button { width: 34px; height: 34px; font-size: 23px; }
  .record-player { width: 66px; height: 55px; transform: scale(0.92); }
  .music-meta { width: 112px; }
  .music-meta strong { font-size: 10px; }
  .slide-count { min-width: 32px; font-size: 10px; }
  .motion-toggle { width: 31px; height: 31px; font-size: 10px; }
}

@media (max-width: 390px) {
  .music-meta { width: 96px; }
  .slide-count { display: none; }
}

/* v51 final BT package: clean hero, compact collection badge, midnight jellyfish letter */
.mailbox-hero-v49,
.mailbox-hero-v49 .mailbox-hero-stage,
.mailbox-hero-v49 .mailbox-title {
  border-top: 0 !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}
.mailbox-hero-v49 .mailbox-count {
  min-width: 0 !important;
  width: max-content !important;
  max-width: calc(100% - 42px);
  min-height: 34px !important;
  margin-top: -17px !important;
  padding: 3px 11px 3px 5px !important;
  gap: 6px !important;
  font-size: 10px !important;
  letter-spacing: .05em;
  border-color: rgba(239,203,119,.38) !important;
  background: rgba(5,25,49,.72) !important;
  box-shadow: 0 8px 20px rgba(0,8,22,.2) !important;
}
.mailbox-count .count-envelope { width: 25px !important; height: 25px !important; }
.mailbox-count .count-envelope svg { width: 17px !important; height: 17px !important; }
.mailbox-count b { font-size: 15px !important; }
.mailbox-count i { font-size: 6px !important; }
.fireworks-intro.is-midnight::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg,rgba(0,3,18,.08),rgba(2,5,24,.28)); z-index:2; }
.fireworks-intro.is-midnight .fireworks-canvas { filter:saturate(1.16) contrast(1.05); }
.falling-love-letter { position:absolute; z-index:9; left:50%; top:12%; width:112px; height:80px; transform:translateX(-50%); animation:loveLetterFall 9s cubic-bezier(.18,.68,.26,1) both, loveLetterFloat 4.8s ease-in-out 9s infinite; }
.falling-love-letter[hidden] { display:none; }
.falling-love-letter button { border:0; background:none; color:inherit; padding:0; width:100%; height:100%; cursor:pointer; position:relative; }
.mini-envelope { position:absolute; inset:10px 13px; display:block; border:1px solid rgba(111,65,35,.55); border-radius:4px; background:linear-gradient(145deg,#ead3a7,#cda66f); box-shadow:0 10px 25px rgba(0,0,0,.32),inset 0 1px rgba(255,247,213,.6); transition:.5s ease; }
.mini-envelope::before,.mini-envelope::after { content:""; position:absolute; inset:auto 0 0; height:57%; background:linear-gradient(145deg,transparent 49%,rgba(127,76,39,.35) 50%,transparent 52%); }
.mini-envelope-flap { position:absolute; inset:0; display:block; clip-path:polygon(0 0,100% 0,50% 67%); background:#dbc08f; transform-origin:top; transition:.55s cubic-bezier(.2,.75,.2,1); }
.mini-envelope-seal { position:absolute; left:50%; top:52%; width:21px; height:21px; transform:translate(-50%,-50%); display:grid; place-items:center; border-radius:50%; color:#e6bd65; font:10px Georgia; background:#7f2630; box-shadow:0 2px 5px rgba(62,14,19,.35); transition:.3s; }
.mini-letter-paper { position:absolute; left:50%; top:50%; width:min(248px,70vw); min-height:112px; padding:27px 19px 20px; transform:translate(-50%,-36%) scale(.3); opacity:0; pointer-events:none; border:1px solid rgba(146,103,55,.42); border-radius:9px; color:#563827; background:linear-gradient(145deg,#fff5d9,#ead5ab); box-shadow:0 16px 36px rgba(0,0,0,.34); font:18px/1.75 "LXGW WenKai","STKaiti",serif; letter-spacing:.045em; transition:.55s cubic-bezier(.2,.75,.2,1); }
.falling-love-letter.is-open { z-index:12; }
.falling-love-letter.is-open .mini-envelope { transform:translateY(50px) scale(.76); opacity:.22; }
.falling-love-letter.is-open .mini-envelope-flap { transform:rotateX(175deg); }
.falling-love-letter.is-open .mini-letter-paper { opacity:1; pointer-events:auto; transform:translate(-50%,-50%) scale(1); }
@keyframes loveLetterFall { from { top:-12%; transform:translateX(-50%) rotate(-7deg); opacity:0; } 15% { opacity:1; } 70% { top:48%; transform:translateX(-50%) rotate(5deg); } to { top:58%; transform:translateX(-50%) rotate(-2deg); } }
@keyframes loveLetterFloat { 0%,100% { transform:translateX(-50%) translateY(0) rotate(-2deg); } 50% { transform:translateX(-50%) translateY(-10px) rotate(2deg); } }
.falling-love-letter.is-arrived {
  top:58%;
  opacity:1 !important;
  animation:loveLetterFloat 4.8s ease-in-out infinite !important;
}
.falling-love-letter.is-arrived:not(.is-open) .mini-envelope {
  opacity:1 !important;
  transform:none !important;
}
.falling-love-letter.is-dismissing {
  opacity:0 !important;
  transform:translateX(-50%) translateY(24px) scale(.86) !important;
  transition:opacity .48s ease, transform .48s ease;
}

/* v57：午夜透明水母与三套治愈星空。透明 PNG 直接叠加，避免移动端出现黑色矩形。 */
.fireworks-intro.is-midnight .fireworks-scene {
  object-position: center center;
  filter: saturate(1.04) brightness(.92);
}
.fireworks-intro.is-midnight .fireworks-nebula {
  opacity: .12;
}
.fireworks-intro.is-midnight .fireworks-canvas {
  filter: saturate(1.12) contrast(1.02);
}
.fireworks-intro.is-midnight .fireworks-meteors i:nth-child(n+3) {
  display: none;
}
@media (max-width: 430px) {
  .falling-love-letter { width: 98px; height: 70px; }
  .mini-letter-paper { width:min(238px,68vw); min-height:108px; padding:25px 18px 18px; font-size:17px; }
}

/* v63 — illustrated star-letter composer and unobtrusive mailbox entry */
.fireworks-intro .fireworks-actions{position:absolute;z-index:12;top:max(18px,env(safe-area-inset-top));right:18px;bottom:auto;left:auto;pointer-events:none}
.fireworks-intro .fireworks-enter{pointer-events:auto;width:50px;height:50px;min-width:0;padding:0;border:1px solid rgba(247,218,151,.55);border-radius:50%;display:grid;place-items:center;background:rgba(3,22,48,.36);color:#f5d991;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 10px 30px rgba(0,8,25,.25),inset 0 0 18px rgba(241,202,116,.07)}
.fireworks-intro .fireworks-enter svg{width:27px;height:27px;fill:none;stroke:currentColor;stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 7px rgba(246,211,126,.35))}
.fireworks-intro .fireworks-enter:hover,.fireworks-intro .fireworks-enter:focus-visible{transform:translateY(-2px);background:rgba(10,38,70,.58);box-shadow:0 12px 32px rgba(0,8,25,.35),0 0 20px rgba(244,205,118,.18)}

.writer-body{background:#061a31;color:#f2d492}
.writer-body .collab-editor{max-width:900px;padding-bottom:140px;background:radial-gradient(circle at 50% 2%,rgba(32,73,116,.26),transparent 36%),linear-gradient(#061a31,#031426)}
.writer-body .editor-header{padding-top:max(22px,env(safe-area-inset-top));grid-template-columns:110px 1fr 110px}
.writer-body .editor-header>div{text-align:center}
.writer-body .editor-header h1{font-family:"LXGW WenKai","Kaiti SC",KaiTi,serif;font-size:clamp(34px,7vw,58px);font-weight:500;letter-spacing:.12em;color:#edc678;text-shadow:0 2px 18px rgba(237,198,120,.15)}
.writer-body .editor-header>div>p{display:block!important;margin:7px 0 0;color:rgba(241,211,151,.75);font-family:"LXGW WenKai","Kaiti SC",KaiTi,serif;letter-spacing:.08em}
.writer-body .presence-strip{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%)}
.writer-body .stationery-panel{position:relative;margin-top:20px;padding:22px 18px 18px;border-color:rgba(232,198,123,.42);background:rgba(4,25,49,.55)}
.writer-body .stationery-reference-heading{justify-content:center;gap:12px;margin-bottom:16px}
.writer-body .stationery-reference-heading span{color:#e6bd6d}
.writer-body .stationery-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.writer-body .stationery-option{padding:0 0 8px;border-radius:10px}
.writer-body .stationery-option .paper-swatch{aspect-ratio:1.42;border-radius:5px;clip-path:polygon(2% 3%,98% 1%,100% 96%,97% 99%,2% 98%,0 4%)}
.writer-body .stationery-option strong{font-size:16px}
.writer-body .stationery-seal{right:4px;bottom:28px;width:42px;height:42px}
.writer-body .shared-paper{position:relative;margin-top:24px;padding:54px 42px 42px;border-radius:8px;clip-path:polygon(1% 1%,99% 0,100% 98%,98% 100%,1% 99%,0 2%);background-color:#f0dfba;background-image:linear-gradient(rgba(96,65,35,.055) 1px,transparent 1px);background-size:100% 38px;border:0;box-shadow:0 28px 65px rgba(0,4,15,.42),inset 0 0 46px rgba(115,73,30,.13)}
.writer-body .shared-paper:before{content:"";position:absolute;inset:12px;border:1px solid rgba(126,82,38,.18);pointer-events:none}
.writer-body .paper-postmark{position:absolute;right:38px;top:25px;width:88px;height:62px;padding:8px;border:1px solid rgba(68,72,78,.22);background:linear-gradient(145deg,#173455,#284a67);color:#ead197;font-family:serif;font-size:8px;letter-spacing:.06em;display:flex;align-items:center;justify-content:center;gap:5px;transform:rotate(1.5deg);box-shadow:0 2px 6px rgba(0,0,0,.18)}
.writer-body .paper-postmark i{font-size:20px;font-style:normal}
.writer-body .paper-address{padding-right:110px;font-size:19px}
.writer-body .letter-title-input{font-size:clamp(30px,6vw,48px)}
.writer-body .editor-actions{align-items:center;justify-content:center;gap:18px}
.writer-body .sync-button{width:auto;min-width:150px;border-radius:999px;background:rgba(6,30,54,.72)}
.writer-body .publish-button{width:150px;min-height:88px;border-radius:50%;background:radial-gradient(circle at 40% 30%,#a94a40,#6d1720 70%);border:2px solid rgba(246,205,119,.48);font-family:"LXGW WenKai","Kaiti SC",KaiTi,serif;font-size:17px;color:#f6d88d;box-shadow:0 12px 32px rgba(42,2,11,.38),inset 0 0 0 4px rgba(83,8,17,.28)}
@media(max-width:600px){.fireworks-intro .fireworks-actions{top:max(14px,env(safe-area-inset-top));right:14px}.fireworks-intro .fireworks-enter{width:44px;height:44px}.writer-body .editor-header{grid-template-columns:72px 1fr 72px}.writer-body .editor-header h1{font-size:34px}.writer-body .role-switch{font-size:11px}.writer-body .stationery-panel{margin-inline:14px}.writer-body .stationery-grid{gap:12px}.writer-body .stationery-option strong{font-size:14px}.writer-body .shared-paper{margin-inline:14px;padding:48px 24px 34px}.writer-body .paper-postmark{right:25px;width:72px}.writer-body .paper-address{padding-right:82px}.writer-body .editor-actions{padding-inline:14px}.writer-body .sync-button{min-width:126px}.writer-body .publish-button{width:128px;min-height:76px}}

/* v59: expose the lower illustration and reserve the sky for jellyfish. */
.fireworks-intro.is-midnight .fireworks-scenes .fireworks-scene {
  object-position: center bottom !important;
}
.fireworks-intro.is-midnight .fireworks-actions {
  bottom: max(2px, env(safe-area-inset-bottom));
}
.fireworks-intro.is-midnight .fireworks-enter {
  min-height: 24px;
  padding: 1px 8px;
  font-size: 9px;
  background: rgba(45, 22, 45, .42);
  box-shadow: 0 3px 10px rgba(0,0,0,.15);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
@media (max-height: 740px) {
  .fireworks-intro.is-midnight .fireworks-enter { min-height: 22px; font-size: 8px; }
}

/* v48：唯美治愈版。统一首页、卡片与四入口图标的视觉语言。 */
:root {
  --healing-gold: #f2cf7d;
  --healing-gold-soft: #dbc17f;
  --healing-ink: #06172e;
  --healing-glass: rgba(8, 33, 63, .72);
  --healing-line: rgba(236, 207, 137, .28);
}
.mailbox-poster-page {
  background:
    radial-gradient(ellipse at 50% 8%, rgba(49, 93, 144, .34), transparent 34%),
    radial-gradient(ellipse at 18% 42%, rgba(96, 64, 132, .13), transparent 32%),
    linear-gradient(180deg, #071d3b 0%, #04152e 58%, #020d20 100%);
}
.mailbox-poster-page::before {
  content: "";
  position: fixed;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  opacity: .48;
  background-image:
    radial-gradient(circle, rgba(255, 228, 151, .9) 0 1px, transparent 1.55px),
    radial-gradient(circle, rgba(206, 221, 255, .65) 0 1px, transparent 1.45px);
  background-size: 173px 157px, 241px 223px;
  background-position: 13px 31px, 87px 69px;
}
.mailbox-home { position: relative; z-index: 1; }
.mailbox-title {
  padding: max(27px, calc(env(safe-area-inset-top) + 16px)) 54px 20px;
  background: linear-gradient(180deg, rgba(8, 35, 67, .97), rgba(6, 29, 57, .91));
}
.mailbox-title h1 {
  color: #f6d887;
  font-family: "Songti SC", STSong, "Noto Serif SC", serif;
  font-size: clamp(34px, 10vw, 48px);
  font-weight: 400;
  letter-spacing: .11em;
  text-shadow: 0 3px 18px rgba(244, 202, 102, .13);
}
.mailbox-title .title-rose {
  width: 122px;
  margin: 10px auto 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #d8b964;
  font-size: 12px;
}
.mailbox-title .title-rose::before,
.mailbox-title .title-rose::after { content: ""; height: 1px; flex: 1; background: linear-gradient(90deg, transparent, rgba(223,190,105,.7)); }
.mailbox-title .title-rose::after { transform: scaleX(-1); }
.mailbox-title p {
  max-width: 390px;
  margin-inline: auto;
  color: rgba(244, 234, 209, .78);
  font-size: 12px;
  letter-spacing: .09em;
}
.mailbox-hero-art {
  height: clamp(300px, 68vw, 390px);
  border-block: 1px solid rgba(236, 202, 119, .14);
  background: #071c38;
}
.mailbox-hero-art img { filter: saturate(.94) contrast(1.03) brightness(.94); }
.mailbox-hero-art::after {
  background: linear-gradient(180deg, rgba(4,17,36,.02) 55%, rgba(4,17,36,.74) 100%);
}
.mailbox-count {
  width: fit-content;
  min-width: min(76%, 340px);
  min-height: 50px;
  margin: -25px auto 0;
  padding: 0 24px;
  position: relative;
  z-index: 3;
  border: 1px solid rgba(238, 204, 121, .58);
  border-radius: 999px;
  color: #f4d580;
  background: rgba(4, 24, 49, .88);
  box-shadow: 0 12px 28px rgba(0, 8, 22, .32), inset 0 1px rgba(255,255,255,.04);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.mailbox-home .letter-archive { padding: 35px 22px 30px; }
.archive-filters { gap: 10px; margin-bottom: 23px; }
.archive-filters button {
  min-height: 43px;
  padding: 0 22px;
  border-color: rgba(224, 195, 120, .34);
  color: rgba(238, 216, 161, .75);
  background: rgba(7, 32, 61, .46);
  box-shadow: inset 0 1px rgba(255,255,255,.03);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.archive-filters button.active {
  border-color: rgba(241, 208, 128, .72);
  color: #ffe29a;
  background: linear-gradient(135deg, rgba(29, 76, 116, .82), rgba(8, 38, 72, .86));
  box-shadow: 0 9px 22px rgba(0,8,22,.22), inset 0 0 18px rgba(229,191,100,.06);
}
.mailbox-home .archive-card {
  min-height: 128px;
  grid-template-columns: 118px minmax(0, 1fr) 36px;
  gap: 15px;
  margin-bottom: 14px;
  padding: 13px;
  overflow: hidden;
  border: 1px solid var(--healing-line);
  border-radius: 24px;
  background:
    radial-gradient(circle at 12% 20%, rgba(63, 118, 160, .13), transparent 34%),
    linear-gradient(135deg, rgba(9, 43, 78, .79), rgba(4, 24, 50, .86));
  box-shadow: 0 18px 38px rgba(0, 8, 22, .24), inset 0 1px rgba(255,255,255,.035);
  backdrop-filter: blur(16px) saturate(1.05);
  -webkit-backdrop-filter: blur(16px) saturate(1.05);
}
.mailbox-home .archive-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 25%, rgba(255,255,255,.025) 45%, transparent 62%);
}
.mailbox-home .archive-card:hover { border-color: rgba(241, 207, 125, .55); box-shadow: 0 20px 42px rgba(0,8,22,.31); }
.mailbox-home .archive-thumb {
  width: 118px;
  height: 92px;
  padding: 3px;
  border: 1px solid rgba(235, 204, 129, .42);
  border-radius: 14px;
  background: rgba(255, 241, 202, .05);
  box-shadow: 0 9px 24px rgba(0,6,17,.28);
}
.mailbox-home .archive-thumb > img { border-radius: 10px; filter: saturate(.92) contrast(1.02); }
.archive-copy { gap: 5px; }
.archive-copy time { color: #dcb765; font-family: Georgia, serif; font-size: 10px; letter-spacing: .13em; }
.archive-copy strong { color: #f5d789; font-family: "Songti SC", STSong, serif; font-size: clamp(18px, 5vw, 23px); font-weight: 400; letter-spacing: .04em; }
.archive-copy em { color: rgba(231, 220, 191, .58); font-size: 10px; letter-spacing: .05em; }
.archive-arrow {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(237, 198, 106, .45);
  border-radius: 50%;
  color: #f0c96b;
  font-size: 21px;
  background: rgba(7, 28, 55, .46);
}
.starlight-tabbar {
  width: min(calc(100% - 18px), 502px);
  bottom: max(8px, env(safe-area-inset-bottom));
  min-height: 72px;
  padding: 7px 8px;
  border: 1px solid rgba(223, 195, 128, .22);
  border-radius: 25px;
  background: linear-gradient(180deg, rgba(7, 30, 58, .78), rgba(3, 18, 39, .90));
  box-shadow: 0 16px 42px rgba(0, 6, 18, .52), inset 0 1px rgba(255,255,255,.04);
  backdrop-filter: blur(22px) saturate(1.18);
  -webkit-backdrop-filter: blur(22px) saturate(1.18);
}
.starlight-tabbar a { min-height: 56px; gap: 4px; border-radius: 18px; transition: color .2s ease, transform .2s ease, background .2s ease; }
.starlight-tabbar a span.tabbar-icon { width: 27px; height: 27px; display: grid; place-items: center; }
.starlight-tabbar .tabbar-icon svg {
  width: 25px;
  height: 25px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.55;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 2px 5px rgba(0,0,0,.15));
}
.starlight-tabbar a b { font-size: 10px; letter-spacing: .12em; }
.starlight-tabbar a.is-active {
  color: #f6d580;
  background: radial-gradient(circle at 50% 20%, rgba(240, 199, 104, .14), transparent 70%);
}
.starlight-tabbar a.is-active .tabbar-icon { filter: drop-shadow(0 0 8px rgba(240,196,96,.32)); }
.mailbox-poster-page { padding-bottom: max(104px, calc(88px + env(safe-area-inset-bottom))); }
.writer-body .collab-editor,
.writer-body .role-page,
.starlight-subpage { padding-bottom: max(116px, calc(96px + env(safe-area-inset-bottom))); }

@media (max-width: 390px) {
  .mailbox-title { padding-inline: 42px; padding-top: max(22px, calc(env(safe-area-inset-top) + 12px)); }
  .mailbox-title h1 { font-size: 33px; }
  .mailbox-title p { font-size: 10px; line-height: 1.65; }
  .mailbox-hero-art { height: 285px; }
  .mailbox-home .letter-archive { padding-inline: 13px; }
  .mailbox-home .archive-card { min-height: 112px; grid-template-columns: 94px minmax(0,1fr) 30px; gap: 10px; padding: 10px; border-radius: 20px; }
  .mailbox-home .archive-thumb { width: 94px; height: 73px; border-radius: 11px; }
  .archive-copy strong { font-size: 17px; }
  .archive-arrow { width: 29px; height: 29px; font-size: 18px; }
  .starlight-tabbar { width: calc(100% - 14px); min-height: 67px; border-radius: 22px; }
  .starlight-tabbar a { min-height: 51px; }
  .starlight-tabbar a span.tabbar-icon { width: 24px; height: 24px; }
  .starlight-tabbar .tabbar-icon svg { width: 23px; height: 23px; }
}

/* v46 已寄信件的修改与删除。 */
.saved-letter-actions {
  width: min(100% - 32px, 620px);
  margin: 18px auto 42px;
  display: flex;
  justify-content: center;
  gap: 12px;
}
.saved-letter-actions a,
.saved-letter-actions button {
  min-height: 44px;
  padding: 10px 18px;
  border: 1px solid rgba(224,190,112,.52);
  border-radius: 999px;
  color: #efd38d;
  background: rgba(5,25,48,.88);
  font: inherit;
}
.saved-letter-actions button { color: #f0b2a5; border-color: rgba(182,83,67,.58); }

/* 按时间收藏的信件 */
.letter-archive {
  position: relative;
  z-index: 2;
  width: min(100%, 520px);
  padding: 34px 22px 90px;
  border-top: 1px solid rgba(244, 211, 125, 0.18);
  background:
    radial-gradient(circle at 90% 10%, rgba(220, 174, 72, 0.12), transparent 28%),
    linear-gradient(180deg, #0b2843 0%, #061624 100%);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.44);
}

.archive-heading { position: relative; margin: 0 2px 21px; }
.archive-heading p,
.section-heading p,
.paper-kicker,
.role-eyebrow,
.publish-dialog > p:first-of-type {
  margin: 0 0 5px;
  color: #d3a954;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.22em;
}

.archive-heading h2 {
  margin: 0;
  color: #f7e6b2;
  font-family: "Songti SC", "STSong", serif;
  font-size: 25px;
  font-weight: 400;
  letter-spacing: 0.08em;
}

.archive-heading > span {
  position: absolute;
  right: 0;
  bottom: 4px;
  color: rgba(245, 225, 171, 0.58);
  font-size: 11px;
}

.archive-card {
  width: 100%;
  min-height: 94px;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 12px;
  margin: 0 0 12px;
  padding: 12px 13px;
  border: 1px solid rgba(240, 206, 118, 0.2);
  border-radius: 18px;
  color: #f6e6ba;
  text-align: left;
  background: linear-gradient(125deg, rgba(21, 58, 91, 0.98), rgba(8, 31, 52, 0.98));
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.archive-card:active { transform: scale(0.985); }
.archive-card:hover { border-color: rgba(240, 206, 118, 0.48); }
.archive-first-letter { background: linear-gradient(125deg, #183b5c, #0a2136); }
.archive-qixi-letter {
  border-color: rgba(232, 178, 92, 0.42);
  background:
    radial-gradient(circle at 84% 22%, rgba(231, 181, 82, 0.2), transparent 28%),
    linear-gradient(125deg, #6b2c35, #241b2d 58%, #10263e);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 243, 202, 0.08);
}
.archive-rose { background: linear-gradient(125deg, #654339, #321e20); }
.archive-moon { background: linear-gradient(125deg, #30475d, #18283a); }
.archive-wheat { background: linear-gradient(125deg, #68532d, #30291d); }

.archive-date {
  width: 58px;
  height: 64px;
  display: grid;
  place-content: center;
  border: 1px solid rgba(236, 202, 112, 0.34);
  border-radius: 13px;
  text-align: center;
  background: rgba(2, 15, 26, 0.33);
}

.archive-date strong {
  color: #f0c966;
  font-family: Georgia, serif;
  font-size: 27px;
  font-weight: 400;
  line-height: 1;
}

.archive-date small { margin-top: 4px; color: rgba(255, 238, 194, 0.58); font-size: 8px; }
.archive-copy { min-width: 0; display: grid; gap: 3px; }
.archive-copy small { color: #d6a955; font-size: 9px; letter-spacing: 0.08em; }
.archive-copy strong { overflow: hidden; color: #fff1c9; font-family: "Songti SC", "STSong", serif; font-size: 17px; font-weight: 400; text-overflow: ellipsis; white-space: nowrap; }
.archive-copy em { color: rgba(236, 227, 200, 0.56); font-size: 9px; font-style: normal; }
.archive-arrow { color: #e7bf60; font-size: 26px; }
.archive-loading { padding: 18px; color: rgba(245, 228, 182, 0.56); text-align: center; font-size: 11px; }
.archive-error { width: 100%; margin: 2px 0 14px; padding: 12px; border: 1px solid rgba(215, 116, 99, 0.35); border-radius: 13px; color: #f2b7a8; background: rgba(105, 33, 35, 0.25); font-size: 11px; cursor: pointer; }

.archive-write {
  width: 100%;
  min-height: 66px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 22px;
  border: 1px solid #d6a850;
  border-radius: 999px;
  color: #4f271e;
  background: linear-gradient(135deg, #f2d786, #d8a94c);
  box-shadow: 0 13px 28px rgba(0, 0, 0, 0.27);
  cursor: pointer;
}

.archive-write > span { font-size: 23px; }
.archive-write div { display: grid; text-align: left; }
.archive-write strong { font-family: "Songti SC", "STSong", serif; font-size: 17px; font-weight: 600; letter-spacing: 0.08em; }
.archive-write small { margin-top: 2px; opacity: 0.68; font-size: 9px; }

/* 双人共写编辑器 */
.role-page,
.collab-editor,
.saved-letter-page {
  position: relative;
  width: 100%;
  height: 100svh;
  overflow-x: hidden;
  overflow-y: auto;
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 0%, rgba(46, 91, 134, 0.62), transparent 35%),
    linear-gradient(155deg, #0f2d4a, #061523 58%, #020a11);
}

.editor-sky {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.62;
  background-image:
    radial-gradient(circle, rgba(255, 223, 135, 0.88) 0 1px, transparent 1.7px),
    radial-gradient(circle, rgba(204, 224, 240, 0.58) 0 1px, transparent 1.5px);
  background-size: 149px 137px, 213px 197px;
  background-position: 9px 27px, 71px 83px;
  animation: editor-stars 16s ease-in-out infinite alternate;
}

@keyframes editor-stars { to { opacity: 0.83; transform: translate3d(8px, -6px, 0); } }

.collab-loading { display: grid; place-items: center; color: #efd47f; font-family: "Songti SC", serif; letter-spacing: 0.1em; }

.role-page { display: grid; place-items: center; padding: 74px 20px 28px; }
.role-page > .editor-back { position: fixed; top: max(17px, env(safe-area-inset-top)); left: max(18px, env(safe-area-inset-left)); }

.editor-back,
.role-switch {
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid rgba(242, 213, 137, 0.24);
  border-radius: 999px;
  color: #f0d37d;
  background: rgba(4, 20, 34, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-size: 11px;
  cursor: pointer;
}

.role-card {
  position: relative;
  width: min(470px, 100%);
  padding: 52px 30px 31px;
  border: 1px solid rgba(215, 170, 77, 0.35);
  border-radius: 28px;
  color: #4e3827;
  text-align: center;
  background:
    radial-gradient(circle at 85% 10%, rgba(65, 111, 151, 0.18), transparent 25%),
    linear-gradient(145deg, #fff3d4, #e5c994);
  box-shadow: 0 32px 75px rgba(0, 0, 0, 0.46);
}

.role-planet {
  position: absolute;
  top: -39px;
  left: 50%;
  width: 78px;
  height: 78px;
  transform: translateX(-50%);
  display: grid;
  place-items: center;
  border: 1px solid #e0b95d;
  border-radius: 50%;
  color: #ffe7a2;
  background: radial-gradient(circle at 35% 31%, #d8714e, #8e3331 62%, #56202b);
  box-shadow: 0 10px 25px rgba(78, 28, 27, 0.4), inset 0 0 0 5px rgba(255, 215, 132, 0.09);
  font-size: 23px;
}

.role-card h1 { margin: 9px 0 12px; font-family: "Songti SC", "STSong", serif; font-size: 31px; font-weight: 400; letter-spacing: 0.08em; }
.role-card > p:not(.role-eyebrow) { margin: 0 auto 25px; max-width: 330px; color: #755e49; font-size: 13px; line-height: 1.8; }
.role-card > small { color: rgba(85, 63, 43, 0.62); font-size: 10px; }
.role-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; margin-bottom: 17px; }
.role-actions button { min-height: 76px; display: flex; align-items: center; justify-content: center; gap: 9px; border: 1px solid rgba(124, 70, 47, 0.22); border-radius: 17px; color: #56372a; background: rgba(255, 251, 231, 0.52); font-family: "Songti SC", serif; font-size: 17px; cursor: pointer; }
.role-actions button span { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; color: #ffe6a0; background: linear-gradient(145deg, #aa493d, #6d222b); }

.editor-header {
  width: min(920px, calc(100% - 28px));
  min-height: 86px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  margin: 0 auto;
  padding: max(13px, env(safe-area-inset-top)) 0 7px;
}

.editor-header > div { text-align: center; }
.editor-header p { margin: 0 0 2px; color: #d4a94f; font-size: 9px; letter-spacing: 0.14em; }
.editor-header h1 { margin: 0; color: #fff0bf; font-family: "Songti SC", "STSong", serif; font-size: 25px; font-weight: 400; letter-spacing: 0.12em; }
.editor-header .editor-back { justify-self: start; }
.editor-header .role-switch { justify-self: end; }

.presence-strip {
  width: min(900px, calc(100% - 28px));
  display: flex;
  align-items: center;
  gap: 15px;
  margin: 0 auto 17px;
  padding: 10px 15px;
  border: 1px solid rgba(236, 207, 133, 0.17);
  border-radius: 15px;
  color: rgba(239, 231, 205, 0.62);
  background: rgba(2, 15, 27, 0.54);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-size: 10px;
}

.presence-strip span { display: inline-flex; align-items: center; gap: 6px; }
.presence-strip i { width: 7px; height: 7px; border-radius: 50%; background: #6b7580; box-shadow: 0 0 0 3px rgba(107, 117, 128, 0.12); }
.presence-strip .online { color: #e9d594; }
.presence-strip .online i { background: #68c58f; box-shadow: 0 0 0 3px rgba(104, 197, 143, 0.13), 0 0 8px rgba(104, 197, 143, 0.6); }
.presence-strip button { margin-left: auto; border: 0; color: #e5c76f; background: transparent; font-size: 10px; cursor: pointer; }
.presence-strip button.save-error { color: #ef9b8e; }

.stationery-panel { width: min(900px, calc(100% - 28px)); margin: 0 auto 18px; }
.section-heading { display: flex; align-items: end; justify-content: space-between; margin: 0 3px 12px; }
.section-heading h2 { margin: 0; color: #f9e9bb; font-family: "Songti SC", "STSong", serif; font-size: 20px; font-weight: 400; letter-spacing: 0.08em; }
.section-heading > span { color: rgba(239, 228, 196, 0.5); font-size: 9px; }
.stationery-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.stationery-option { min-width: 0; display: grid; grid-template-columns: 46px minmax(0, 1fr); grid-template-rows: auto auto; align-items: center; column-gap: 10px; padding: 9px; border: 1px solid rgba(232, 206, 139, 0.16); border-radius: 14px; color: #e8d8aa; text-align: left; background: rgba(8, 30, 49, 0.72); cursor: pointer; transition: border-color 0.2s ease, transform 0.2s ease, background 0.2s ease; }
.stationery-option:hover { transform: translateY(-1px); }
.stationery-option.selected { border-color: #e1bd62; background: rgba(35, 62, 77, 0.94); box-shadow: 0 0 0 2px rgba(225, 189, 98, 0.1); }
.paper-swatch { grid-row: 1 / 3; width: 46px; height: 50px; display: grid; place-items: center; overflow: hidden; border-radius: 8px; box-shadow: 0 4px 9px rgba(0, 0, 0, 0.22); }
.paper-swatch i { font-style: normal; font-size: 17px; }
.option-star .paper-swatch { color: #f5cf69; background: radial-gradient(circle at 70% 25%, #f5cf69 0 1px, transparent 2px), linear-gradient(145deg, #173f62, #071a2b); }
.option-rose .paper-swatch { color: #a4463d; background: radial-gradient(circle at 80% 20%, #d9a85d 0 1px, transparent 2px), linear-gradient(145deg, #fff0d0, #d8b984); }
.option-moon .paper-swatch { color: #fff3c5; background: linear-gradient(145deg, #6a8398, #263e56); }
.option-wheat .paper-swatch { color: #7c5524; background: linear-gradient(145deg, #edce83, #af7c36); }
.stationery-option strong { align-self: end; overflow: hidden; font-size: 12px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.stationery-option small { align-self: start; overflow: hidden; color: rgba(232, 219, 184, 0.52); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }

.shared-paper,
.saved-letter-paper {
  --paper-ink: #4e3828;
  --paper-muted: #846d55;
  --paper-accent: #a5443d;
  --paper-line: rgba(110, 75, 48, 0.16);
  position: relative;
  width: min(720px, calc(100% - 28px));
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid rgba(181, 129, 62, 0.34);
  border-radius: 24px;
  color: var(--paper-ink);
  background:
    radial-gradient(circle at 89% 8%, rgba(44, 84, 125, 0.12), transparent 24%),
    radial-gradient(circle at 10% 92%, rgba(187, 130, 55, 0.14), transparent 27%),
    linear-gradient(145deg, #fff3d5, #e4c795);
  box-shadow: 0 28px 60px rgba(0, 0, 0, 0.38), inset 0 0 50px rgba(113, 73, 30, 0.06);
}

.stationery-star .shared-paper,
.stationery-star .saved-letter-paper {
  --paper-ink: #fff1c7;
  --paper-muted: rgba(229, 224, 205, 0.64);
  --paper-accent: #e8c35e;
  --paper-line: rgba(236, 207, 125, 0.18);
  border-color: rgba(231, 197, 102, 0.3);
  background:
    radial-gradient(circle at 80% 18%, rgba(253, 221, 128, 0.75) 0 1px, transparent 2px),
    radial-gradient(circle at 28% 76%, rgba(255, 240, 193, 0.55) 0 1px, transparent 2px),
    radial-gradient(circle at 80% 10%, rgba(69, 115, 161, 0.35), transparent 25%),
    linear-gradient(150deg, #153e60, #081d32 62%, #061522);
  background-size: 117px 113px, 163px 149px, auto, auto;
}

.stationery-moon .shared-paper,
.stationery-moon .saved-letter-paper {
  --paper-ink: #263d52;
  --paper-muted: #63798b;
  --paper-accent: #8f6931;
  --paper-line: rgba(50, 75, 96, 0.15);
  background:
    radial-gradient(circle at 84% 13%, rgba(255, 246, 208, 0.8), transparent 12%),
    linear-gradient(150deg, #eef2ed, #b9c8d1 61%, #93aaba);
}

.stationery-wheat .shared-paper,
.stationery-wheat .saved-letter-paper {
  --paper-ink: #584021;
  --paper-muted: #846a43;
  --paper-accent: #9b572d;
  --paper-line: rgba(98, 69, 29, 0.18);
  background:
    radial-gradient(ellipse at 12% 95%, rgba(132, 85, 31, 0.22), transparent 31%),
    linear-gradient(145deg, #f8e4ab, #d7ac58 70%, #bc883d);
}

.shared-paper { padding: 36px clamp(18px, 5vw, 48px) 27px; }
.paper-constellation { position: absolute; color: var(--paper-accent); opacity: 0.5; letter-spacing: 0.28em; pointer-events: none; }
.constellation-one { right: 24px; top: 21px; }
.constellation-two { left: 24px; bottom: 25px; }
.paper-kicker { color: var(--paper-accent); }

.letter-title-input {
  width: 100%;
  margin: 10px 0 8px;
  padding: 4px 0;
  border: 0;
  outline: 0;
  color: var(--paper-ink);
  background: transparent;
  font-family: var(--handwriting-font);
  font-size: clamp(27px, 5vw, 42px);
  font-weight: 400;
  letter-spacing: 0.07em;
}
.letter-title-input::placeholder { color: var(--paper-muted); opacity: 0.55; }
.paper-divider { position: relative; height: 27px; display: grid; place-items: center; color: var(--paper-accent); }
.paper-divider::before,
.paper-divider::after { content: ""; position: absolute; top: 50%; width: 42%; height: 1px; background: var(--paper-line); }
.paper-divider::before { left: 0; }
.paper-divider::after { right: 0; }
.paper-divider span { font-size: 10px; }

.author-block { position: relative; padding: 17px; border: 1px solid transparent; border-radius: 17px; transition: border-color 0.2s ease, background 0.2s ease; }
.author-active { border-color: var(--paper-line); background: rgba(255, 255, 255, 0.06); }
.author-readonly { opacity: 0.78; }
.author-label { display: flex; align-items: center; gap: 10px; }
.author-label > span { flex: 0 0 auto; width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--paper-accent), transparent 55%); border-radius: 50%; color: #fff0b9; background: var(--paper-accent); font-family: "Songti SC", serif; }
.author-label > div { display: grid; }
.author-label strong { font-size: 13px; font-weight: 600; letter-spacing: 0.08em; }
.author-label small { margin-top: 2px; color: var(--paper-muted); font-size: 8px; }
.author-label em { margin-left: auto; padding: 3px 7px; border-radius: 99px; color: #3d7e5c; background: rgba(94, 185, 131, 0.16); font-size: 8px; font-style: normal; }
.stationery-star .author-label em { color: #91d9ae; }
.author-block textarea { width: 100%; min-height: 150px; margin-top: 11px; padding: 5px 2px; resize: vertical; border: 0; outline: 0; color: var(--paper-ink); background: transparent; font-family: var(--handwriting-font); font-size: 17px; font-weight: 400; line-height: 2.05; letter-spacing: 0.075em; }
.author-block textarea::placeholder { color: var(--paper-muted); opacity: 0.58; }
.author-readonly textarea { resize: none; cursor: default; }
.author-separator { position: relative; height: 28px; display: grid; place-items: center; color: var(--paper-accent); }
.author-separator i { position: absolute; left: 8%; right: 8%; top: 50%; height: 1px; background: var(--paper-line); }
.author-separator span { z-index: 1; padding: 0 8px; background: inherit; font-size: 8px; }
.paper-tools { display: flex; align-items: center; gap: 7px; margin-top: 18px; padding-top: 15px; border-top: 1px solid var(--paper-line); }
.paper-tools button { padding: 7px 11px; border: 1px solid var(--paper-line); border-radius: 999px; color: var(--paper-ink); background: rgba(255, 255, 255, 0.06); font-size: 9px; cursor: pointer; }
.paper-tools span { margin-left: auto; color: var(--paper-muted); font-size: 9px; }

.editor-message { display: block; width: min(720px, calc(100% - 28px)); margin: 12px auto 0; padding: 11px; border: 1px solid rgba(221, 134, 110, 0.38); border-radius: 13px; color: #ffd2c0; background: rgba(105, 36, 38, 0.7); font-size: 11px; cursor: pointer; }
.editor-actions { width: min(720px, calc(100% - 28px)); display: grid; grid-template-columns: 1.45fr 1fr; gap: 11px; margin: 17px auto 0; }
.editor-actions button { min-height: 62px; border-radius: 17px; cursor: pointer; }
.editor-actions button:disabled { opacity: 0.52; cursor: wait; }
.sync-button { display: flex; align-items: center; justify-content: center; gap: 11px; border: 1px solid #e4bd60; color: #4b291e; background: linear-gradient(135deg, #f1d47d, #d39d43); box-shadow: 0 12px 26px rgba(0, 0, 0, 0.24); }
.sync-button > span { font-size: 22px; }
.sync-button > div { display: grid; text-align: left; }
.sync-button strong { font-family: "Songti SC", serif; font-size: 15px; letter-spacing: 0.08em; }
.sync-button small { opacity: 0.62; font-size: 8px; }
.publish-button { border: 1px solid rgba(237, 207, 128, 0.43); color: #f4daa0; background: linear-gradient(135deg, #9d3f38, #67202c); box-shadow: 0 12px 26px rgba(0, 0, 0, 0.24); font-family: "Songti SC", serif; font-size: 14px; letter-spacing: 0.08em; }
.editor-footnote { margin: 15px auto max(28px, env(safe-area-inset-bottom)); color: rgba(238, 225, 188, 0.48); text-align: center; font-size: 9px; }

.publish-backdrop { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 24px; background: rgba(1, 9, 15, 0.78); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.publish-dialog { position: relative; width: min(430px, 100%); padding: 48px 29px 26px; border: 1px solid rgba(154, 93, 56, 0.34); border-radius: 26px; color: #4e3829; text-align: center; background: linear-gradient(145deg, #fff2d2, #dec18c); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5); }
.publish-seal { position: absolute; top: -37px; left: 50%; width: 74px; height: 74px; transform: translateX(-50%); display: grid; place-items: center; border: 3px double #e0b45b; border-radius: 47% 53% 45% 55%; color: #f8d67c; background: radial-gradient(circle at 36% 30%, #b94e45, #771f2b 68%, #4c111d); font-size: 22px; box-shadow: 0 10px 25px rgba(71, 21, 25, 0.35); }
.publish-dialog h2 { margin: 8px 0 11px; font-family: "Songti SC", serif; font-size: 25px; font-weight: 400; letter-spacing: 0.05em; }
.publish-dialog > p:not(:first-of-type) { margin: 0 0 22px; color: #765f49; font-size: 12px; line-height: 1.8; }
.publish-dialog > div { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.publish-dialog button { min-height: 44px; border: 1px solid rgba(110, 67, 42, 0.2); border-radius: 999px; color: #66493a; background: rgba(255, 248, 225, 0.62); cursor: pointer; }
.publish-dialog button:last-child { border: 0; color: #ffe8ac; background: linear-gradient(135deg, #a7443c, #6b1d29); }
.publish-dialog button:disabled { opacity: 0.5; cursor: wait; }

/* 寄出后阅读文字信 */
.saved-letter-page { padding: 82px 14px 50px; }
.saved-letter-header { position: fixed; top: 0; left: 50%; z-index: 20; width: min(760px, calc(100% - 28px)); min-height: 68px; transform: translateX(-50%); display: flex; align-items: center; justify-content: space-between; padding-top: env(safe-area-inset-top); }
.saved-letter-header p { margin: 0; color: rgba(245, 228, 180, 0.65); font-size: 9px; }
.saved-letter-paper { min-height: calc(100svh - 135px); padding: clamp(31px, 7vw, 58px); }
.saved-letter-mark { position: absolute; right: 34px; top: 28px; color: var(--paper-accent); font-size: 20px; }
.saved-letter-paper > h1 { margin: 20px 0 35px; font-family: var(--handwriting-font); font-size: clamp(30px, 6vw, 46px); font-weight: 400; letter-spacing: 0.08em; }
.saved-letter-paper section { margin: 0 0 34px; }
.saved-letter-paper h2 { display: flex; align-items: center; gap: 9px; margin: 0 0 14px; color: var(--paper-muted); font-size: 12px; font-weight: 500; letter-spacing: 0.08em; }
.saved-letter-paper h2 span { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 50%; color: #fff0bc; background: var(--paper-accent); }
.saved-letter-paper section > p { margin: 0; white-space: pre-wrap; font-family: var(--handwriting-font); font-size: 18px; font-weight: 400; line-height: 2.1; letter-spacing: 0.075em; }
.saved-letter-paper footer { display: flex; justify-content: space-between; gap: 12px; margin-top: 48px; padding-top: 17px; border-top: 1px solid var(--paper-line); color: var(--paper-muted); font-size: 9px; }

@media (max-width: 700px) {
  .editor-header { grid-template-columns: auto 1fr auto; gap: 7px; }
  .editor-header h1 { font-size: 20px; }
  .editor-header p { display: none; }
  .editor-back, .role-switch { min-height: 34px; padding: 0 10px; font-size: 9px; }
  .presence-strip { flex-wrap: wrap; gap: 8px 13px; }
  .presence-strip button { width: 100%; margin-left: 0; padding-top: 4px; text-align: left; }
  .stationery-grid { grid-template-columns: 1fr 1fr; }
  .stationery-option { grid-template-columns: 40px minmax(0, 1fr); }
  .paper-swatch { width: 40px; height: 43px; }
  .shared-paper { padding: 28px 12px 19px; border-radius: 19px; }
  .letter-title-input { padding-left: 8px; padding-right: 8px; }
  .author-block { padding: 13px 10px; }
  .author-block textarea { min-height: 138px; font-size: 15px; }
  .editor-actions { grid-template-columns: 1fr; }
  .sync-button, .publish-button { min-height: 57px !important; }
  .saved-letter-paper { padding: 33px 22px; }
  .saved-letter-paper footer { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .editor-sky { animation: none; }
}

/* 七夕星光信 */
.qixi-stage {
  position: relative;
  width: 100%;
  min-height: 100svh;
  overflow: hidden;
  display: grid;
  place-items: center;
  padding: max(52px, calc(env(safe-area-inset-top) + 44px)) 12px max(104px, calc(env(safe-area-inset-bottom) + 94px));
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 20%, rgba(53, 103, 150, 0.58), transparent 38%),
    radial-gradient(circle at 80% 72%, rgba(125, 70, 97, 0.2), transparent 34%),
    linear-gradient(158deg, #102f4e 0%, #061725 54%, #020a12 100%);
}

.qixi-sky-glow {
  position: absolute;
  inset: -20%;
  z-index: -3;
  opacity: 0.55;
  pointer-events: none;
  background: conic-gradient(from 210deg at 50% 48%, transparent, rgba(239, 192, 100, 0.08), transparent 22%);
  animation: qixi-sky-breathe 12s ease-in-out infinite alternate;
}

.qixi-star-field {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
}

.qixi-star-field i {
  position: absolute;
  left: var(--q-star-left);
  top: var(--q-star-top);
  color: #f9d77d;
  font-size: var(--q-star-size);
  font-style: normal;
  line-height: 1;
  opacity: 0.18;
  text-shadow: 0 0 8px rgba(255, 219, 117, 0.82);
  animation: qixi-star-twinkle var(--q-star-duration) ease-in-out var(--q-star-delay) infinite alternate;
}

@keyframes qixi-star-twinkle {
  0%, 18% { opacity: 0.14; transform: translate3d(0, 1px, 0) scale(0.65); }
  55% { opacity: 0.96; transform: translate3d(var(--q-star-drift), -1px, 0) scale(1.14) rotate(14deg); }
  100% { opacity: 0.34; transform: translate3d(0, -2px, 0) scale(0.82); }
}

@keyframes qixi-sky-breathe {
  to { opacity: 0.86; transform: translate3d(1.5%, -1%, 0) rotate(3deg); }
}

.qixi-meteor,
.qixi-card-meteor {
  position: absolute;
  width: 150px;
  height: 1px;
  border-radius: 999px;
  opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 239, 190, 0.94));
  box-shadow: 0 0 8px rgba(255, 215, 113, 0.65);
  transform: rotate(-33deg);
  transform-origin: right center;
  animation: qixi-meteor-flight 7.4s ease-in infinite;
}

.qixi-meteor::after,
.qixi-card-meteor::after {
  content: "";
  position: absolute;
  right: -2px;
  top: -2px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #fff6cc;
  box-shadow: 0 0 11px #ffd66f;
}

.qixi-meteor-1 { top: 10%; left: 4%; animation-delay: -1.2s; animation-duration: 8.2s; }
.qixi-meteor-2 { top: 22%; left: 64%; animation-delay: -5.1s; animation-duration: 10.7s; }
.qixi-meteor-3 { top: 43%; left: 18%; animation-delay: -7.4s; animation-duration: 12.1s; }
.qixi-meteor-4 { top: 58%; left: 74%; animation-delay: -2.8s; animation-duration: 9.4s; }
.qixi-meteor-5 { top: 74%; left: 6%; animation-delay: -6.7s; animation-duration: 11.2s; }
.qixi-meteor-6 { top: 88%; left: 55%; animation-delay: -4.4s; animation-duration: 8.9s; }
.qixi-meteor-7 { top: 34%; left: 42%; animation-delay: -9.2s; animation-duration: 13.3s; }

@keyframes qixi-meteor-flight {
  0%, 73% { opacity: 0; translate: -120px -80px; }
  76% { opacity: 0.86; }
  88% { opacity: 0.16; }
  92%, 100% { opacity: 0; translate: 260px 180px; }
}

.qixi-letter-card {
  position: relative;
  width: min(100%, calc((100svh - 170px) * 0.6667), 640px);
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(247, 218, 142, 0.32);
  border-radius: clamp(14px, 2vw, 24px);
  background: #081a2a;
  box-shadow: 0 24px 65px rgba(0, 0, 0, 0.52), 0 0 38px rgba(207, 164, 77, 0.1);
  animation: qixi-letter-arrive 0.72s cubic-bezier(0.21, 0.8, 0.3, 1) both;
}

.qixi-letter-art {
  width: 100%;
  height: auto;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

.qixi-letter-sparkles {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.qixi-letter-sparkles i {
  position: absolute;
  left: var(--q-edge-left);
  top: var(--q-edge-top);
  color: #ffe398;
  font-size: clamp(6px, 1.2vw, 12px);
  font-style: normal;
  line-height: 1;
  opacity: 0.12;
  text-shadow: 0 0 7px rgba(255, 219, 115, 0.96);
  animation: qixi-edge-twinkle var(--q-edge-duration) ease-in-out var(--q-edge-delay) infinite alternate;
}

@keyframes qixi-edge-twinkle {
  0%, 12% { opacity: 0.08; transform: scale(0.55); }
  68% { opacity: 0.96; transform: scale(1.24) rotate(18deg); }
  100% { opacity: 0.28; transform: scale(0.78); }
}

.qixi-card-meteor { width: 90px; animation-duration: 6.8s; }
.qixi-card-meteor-one { left: -10%; top: 10%; animation-delay: -2.1s; }
.qixi-card-meteor-two { left: 76%; top: 34%; animation-delay: -5.4s; animation-duration: 8.7s; }

@keyframes qixi-letter-arrive {
  from { opacity: 0; transform: translateY(13px) scale(0.985); }
  to { opacity: 1; transform: none; }
}

.qixi-control-dock {
  position: fixed;
  left: 50%;
  bottom: max(13px, env(safe-area-inset-bottom));
  z-index: 20;
  min-width: min(360px, calc(100vw - 26px));
  min-height: 74px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 18px;
  border: 1px solid rgba(255, 225, 150, 0.23);
  border-radius: 999px;
  background: linear-gradient(105deg, rgba(9, 25, 42, 0.96), rgba(31, 48, 72, 0.93));
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.qixi-control-dock .music-player { width: 100%; justify-content: center; }
.qixi-music-meta { width: min(218px, 56vw); }

@media (max-width: 520px) {
  .qixi-stage { padding-left: 8px; padding-right: 8px; }
  .qixi-letter-card { width: min(100%, calc((100svh - 166px) * 0.6667)); }
  .qixi-control-dock { min-height: 68px; padding: 7px 14px; }
  .qixi-control-dock .record-player { width: 68px; height: 56px; transform: scale(0.92); }
  .qixi-music-meta { width: min(205px, 54vw); }
  .qixi-music-meta strong { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .qixi-sky-glow,
  .qixi-star-field i,
  .qixi-meteor,
  .qixi-letter-card,
  .qixi-letter-sparkles i,
  .qixi-card-meteor { animation: none; }
}

/* 统一后的星光信箱首页 */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.mailbox-poster-page {
  padding: 0 0 max(22px, env(safe-area-inset-bottom));
  background:
    radial-gradient(circle at 50% 8%, rgba(47, 93, 137, 0.48), transparent 32%),
    linear-gradient(180deg, #0b2b49 0%, #071b2e 52%, #030d17 100%);
}

.mailbox-home {
  position: relative;
  z-index: 1;
  width: min(100%, 560px);
  min-height: 100svh;
  margin: 0 auto;
  overflow: hidden;
  background:
    radial-gradient(circle at 88% 42%, rgba(197, 137, 55, 0.09), transparent 26%),
    linear-gradient(180deg, rgba(11, 42, 70, 0.98), rgba(4, 17, 29, 0.99));
  box-shadow: 0 0 74px rgba(0, 0, 0, 0.54);
}

.mailbox-hero {
  position: relative;
  padding-top: max(30px, calc(env(safe-area-inset-top) + 18px));
  overflow: hidden;
  background: #082743;
}

.mailbox-title {
  position: relative;
  z-index: 2;
  padding: 0 60px 18px;
  color: #f0ca72;
  text-align: center;
}

.mailbox-title::before,
.mailbox-title::after {
  content: "";
  position: absolute;
  top: 2px;
  width: 31px;
  height: 31px;
  opacity: 0.9;
}

.mailbox-title::before {
  left: 20px;
  border-radius: 50%;
  background: #e5b95c;
  box-shadow: 0 0 17px rgba(235, 197, 104, 0.42);
  clip-path: path("M 26 2 A 14 14 0 1 0 26 28 A 12 12 0 0 1 26 2");
}

.mailbox-title::after {
  right: 22px;
  border: 1px solid rgba(217, 169, 77, 0.7);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #b68245, #354a65 66%, #15293e);
  box-shadow: -8px 3px 0 -7px #e0b25d, 8px -2px 0 -7px #e0b25d;
}

.mailbox-title h1 {
  margin: 0;
  font-family: "Songti SC", "STSong", serif;
  font-size: clamp(27px, 7vw, 42px);
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1.22;
  text-shadow: 0 2px 13px rgba(0, 0, 0, 0.24);
}

.title-rose {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 78%;
  margin: 12px auto 9px;
  color: #d2a248;
  font-size: 12px;
}

.title-rose::before,
.title-rose::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(223, 177, 82, 0.78));
}

.title-rose::after { background: linear-gradient(90deg, rgba(223, 177, 82, 0.78), transparent); }

.mailbox-title p {
  margin: 0;
  color: rgba(255, 232, 179, 0.8);
  font-family: "Songti SC", "STSong", serif;
  font-size: clamp(11px, 3vw, 15px);
  letter-spacing: 0.12em;
}

.mailbox-hero-art {
  position: relative;
  overflow: hidden;
  aspect-ratio: 948 / 475;
  border-top: 1px solid rgba(232, 192, 102, 0.08);
  border-bottom: 1px solid rgba(232, 192, 102, 0.18);
}

.mailbox-hero-art::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(7, 34, 57, 0.05), transparent 70%, #08233b 100%);
}

.mailbox-hero-art img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
}

.mailbox-count {
  position: relative;
  z-index: 3;
  width: fit-content;
  min-width: 210px;
  margin: -21px auto 0;
  padding: 9px 20px;
  border: 1px solid rgba(226, 182, 82, 0.58);
  border-radius: 999px;
  color: #e8c36c;
  text-align: center;
  background: rgba(5, 28, 47, 0.95);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.28);
  font-family: "Songti SC", serif;
  font-size: 12px;
  letter-spacing: 0.08em;
}

.mailbox-count span { margin: 0 7px; font-size: 8px; }

.mailbox-home .letter-archive {
  width: 100%;
  padding: 27px 22px 78px;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.archive-filters {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 0 0 20px;
}

.archive-filters button,
.archive-filters span {
  min-height: 37px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  border: 1px solid rgba(221, 177, 79, 0.48);
  border-radius: 999px;
  color: #d8b363;
  background: rgba(9, 33, 54, 0.72);
  font-family: "Songti SC", serif;
  font-size: 12px;
  letter-spacing: 0.06em;
}

.archive-filters button.active {
  color: #f5d37a;
  background: linear-gradient(145deg, #154469, #08253f);
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  cursor: default;
}

.mailbox-home .archive-card {
  min-height: 128px;
  grid-template-columns: 116px minmax(0, 1fr) 26px;
  gap: 15px;
  margin-bottom: 15px;
  padding: 14px;
  border: 1px solid rgba(226, 181, 83, 0.5);
  border-radius: 23px;
  background:
    radial-gradient(circle at 92% 18%, rgba(225, 180, 81, 0.09), transparent 28%),
    linear-gradient(135deg, rgba(16, 53, 83, 0.96), rgba(5, 27, 47, 0.98));
  box-shadow: 0 15px 31px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 244, 203, 0.05);
}

.mailbox-home .archive-card.archive-qixi-letter,
.mailbox-home .archive-card.archive-first-letter,
.mailbox-home .archive-card.archive-rose,
.mailbox-home .archive-card.archive-moon,
.mailbox-home .archive-card.archive-wheat,
.mailbox-home .archive-card.archive-star {
  background:
    radial-gradient(circle at 92% 18%, rgba(225, 180, 81, 0.09), transparent 28%),
    linear-gradient(135deg, rgba(16, 53, 83, 0.96), rgba(5, 27, 47, 0.98));
}

.mailbox-home .archive-card:hover { transform: translateY(-1px); border-color: rgba(239, 202, 114, 0.82); }
.mailbox-home .archive-card:active { transform: scale(0.988); }

.archive-thumb {
  width: 116px;
  height: 92px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(227, 190, 107, 0.34);
  border-radius: 13px;
  color: #f2cc6b;
  background: linear-gradient(145deg, #173f61, #071a2c);
  box-shadow: 0 7px 16px rgba(0, 0, 0, 0.28);
}

.archive-thumb img { width: 100%; height: 100%; display: block; object-fit: cover; }
.archive-qixi-letter .archive-thumb img { object-position: center; }
.archive-first-letter .archive-thumb img { object-position: center; }
.archive-thumb i { font-family: Georgia, serif; font-size: 30px; font-style: normal; text-shadow: 0 0 13px rgba(247, 209, 112, 0.5); }
.archive-thumb-rose { color: #9f403d; background: radial-gradient(circle at 50% 46%, #f3d8a5, #9f693f); }
.archive-thumb-moon { color: #fff0b2; background: radial-gradient(circle at 70% 28%, #e2d19c, #526c83 22%, #1e344b 70%); }
.archive-thumb-wheat { color: #825524; background: linear-gradient(145deg, #f0d183, #9d6d31); }
.archive-thumb-star { color: #f1ca66; background: radial-gradient(circle at 68% 28%, #eec85e 0 1px, transparent 2px), linear-gradient(145deg, #17496e, #061a2c); background-size: 29px 29px, auto; }

.mailbox-home .archive-copy { gap: 4px; }
.mailbox-home .archive-copy time { color: #e4bd62; font-family: Georgia, serif; font-size: 12px; letter-spacing: 0.08em; }
.mailbox-home .archive-copy strong { color: #f8df9d; font-size: clamp(17px, 4.4vw, 22px); letter-spacing: 0.04em; }
.mailbox-home .archive-copy em { color: rgba(238, 220, 174, 0.67); font-size: 10px; }
.mailbox-home .archive-arrow { color: #e9bd5c; font-size: 27px; font-weight: 300; }

.mailbox-home .archive-loading { padding: 13px; }

.mailbox-home .archive-write {
  position: relative;
  min-height: 66px;
  margin-top: 28px;
  padding: 8px 23px 8px 76px;
  border: 1px solid #dfa94c;
  color: #f5d47d;
  background: linear-gradient(145deg, #a74235, #6f1e28 66%, #4d1722);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.34), inset 0 2px 0 rgba(255, 233, 169, 0.11);
}

.archive-write-seal {
  position: absolute;
  left: 5px;
  top: 50%;
  width: 57px;
  height: 57px;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  border: 2px double #d8a348;
  border-radius: 47% 53% 45% 55%;
  color: #e9bd61;
  background: radial-gradient(circle at 35% 30%, #b44a3e, #751e2a 68%, #47131d);
  box-shadow: 0 5px 13px rgba(0, 0, 0, 0.34);
  font-size: 20px;
}

.mailbox-home .archive-write div { text-align: center; }
.mailbox-home .archive-write strong { font-size: 19px; font-weight: 500; }
.mailbox-home .archive-write small { color: rgba(255, 225, 157, 0.65); }

/* 小王子治愈系信纸册 */
.collab-editor {
  background:
    radial-gradient(circle at 12% 8%, rgba(47, 96, 142, 0.55), transparent 27%),
    radial-gradient(circle at 88% 46%, rgba(111, 72, 91, 0.18), transparent 30%),
    linear-gradient(155deg, #0d3151, #061624 58%, #020a12);
}

.collab-editor .editor-header {
  min-height: 108px;
  padding-top: max(15px, env(safe-area-inset-top));
  padding-bottom: 11px;
}

.collab-editor .editor-header h1 {
  font-size: clamp(24px, 5.5vw, 33px);
  line-height: 1.25;
}

.collab-editor .editor-header p {
  display: block;
  max-width: 420px;
  margin: 5px auto 0;
  color: rgba(239, 208, 130, 0.66);
  font-family: "Songti SC", serif;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.08em;
}

.stationery-panel {
  position: relative;
  width: min(780px, calc(100% - 28px));
  margin: 0 auto 24px;
  padding: 18px clamp(13px, 3vw, 22px) 20px;
  border: 1px solid rgba(229, 192, 104, 0.16);
  border-radius: 26px;
  background:
    radial-gradient(circle at 50% -15%, rgba(231, 191, 95, 0.1), transparent 35%),
    rgba(3, 20, 34, 0.5);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.stationery-panel .section-heading {
  align-items: center;
  margin: 0 4px 17px;
}

.stationery-panel .section-heading h2 {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 21px;
}

.stationery-panel .section-heading h2::before { content: "✦"; color: #d7aa4c; font-size: 10px; }
.stationery-panel .section-heading > span { color: rgba(239, 221, 174, 0.5); }

.stationery-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(10px, 2vw, 17px);
}

.stationery-option {
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 0 0 8px;
  border: 1px solid transparent;
  border-radius: 18px;
  color: #ead59b;
  text-align: center;
  background: transparent;
  cursor: pointer;
  transition: transform 0.22s ease, border-color 0.22s ease, background 0.22s ease;
}

.stationery-option:hover { transform: translateY(-3px); }
.stationery-option.selected {
  border-color: rgba(235, 195, 98, 0.52);
  background: rgba(231, 191, 94, 0.06);
  box-shadow: 0 0 23px rgba(229, 185, 80, 0.12);
}

.stationery-option .paper-swatch {
  position: relative;
  grid-row: auto;
  width: 100%;
  height: auto;
  aspect-ratio: 1.22 / 1;
  display: block;
  overflow: hidden;
  border: 1px solid rgba(205, 158, 74, 0.45);
  border-radius: 15px;
  box-shadow: 0 9px 18px rgba(0, 0, 0, 0.29), inset 0 0 24px rgba(98, 60, 29, 0.08);
}

.stationery-option .paper-swatch::before {
  content: "";
  position: absolute;
  left: 18%;
  right: 18%;
  top: 42%;
  height: 34%;
  opacity: 0.28;
  background: repeating-linear-gradient(180deg, currentColor 0 1px, transparent 1px 12px);
}

.stationery-option .paper-swatch::after {
  content: "✦";
  position: absolute;
  right: 10px;
  top: 8px;
  color: currentColor;
  font-size: 8px;
  text-shadow: 0 0 8px currentColor;
}

.stationery-option .paper-swatch i {
  position: absolute;
  left: 11%;
  top: 10%;
  z-index: 2;
  font-size: clamp(18px, 3.2vw, 29px);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

.option-moon .paper-swatch {
  color: #b9964e;
  background:
    radial-gradient(circle at 22% 22%, rgba(255, 245, 202, 0.95), transparent 13%),
    radial-gradient(circle at 88% 86%, rgba(57, 94, 126, 0.38), transparent 30%),
    linear-gradient(145deg, #f7eaca, #c8d0ca);
}

.option-rose .paper-swatch {
  color: #9e433d;
  background:
    radial-gradient(circle at 82% 73%, rgba(150, 61, 55, 0.16), transparent 24%),
    linear-gradient(145deg, #fff0d5, #dfbd8b);
}

.option-wheat .paper-swatch {
  color: #7b5424;
  background:
    linear-gradient(15deg, transparent 55%, rgba(133, 89, 35, 0.18) 56% 58%, transparent 59%),
    linear-gradient(145deg, #f5dda4, #c8913e);
}

.option-star .paper-swatch {
  color: #f1cb68;
  background:
    radial-gradient(circle at 20% 25%, #f3cf6e 0 1px, transparent 2px),
    radial-gradient(circle at 75% 18%, #f3cf6e 0 1px, transparent 2px),
    radial-gradient(circle at 72% 78%, #f3cf6e 0 1px, transparent 2px),
    linear-gradient(145deg, #194b70, #071b2e 68%);
  background-size: 35px 31px, 41px 37px, 47px 43px, auto;
}

.stationery-option strong {
  width: 100%;
  margin-top: 7px;
  color: #f4d681;
  font-family: "Songti SC", serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.06em;
}

.stationery-option small {
  width: 100%;
  color: rgba(235, 218, 172, 0.48);
  font-size: 8px;
}

.stationery-seal {
  position: absolute;
  right: -5px;
  top: calc(68% - 20px);
  z-index: 4;
  width: 33px;
  height: 33px;
  display: grid;
  place-items: center;
  border: 2px double #e0aa4d;
  border-radius: 47% 53% 45% 55%;
  color: #f6d477;
  background: radial-gradient(circle at 35% 30%, #b94d40, #741e29 70%);
  box-shadow: 0 6px 13px rgba(0, 0, 0, 0.35);
  font-size: 15px;
}

.collab-editor .shared-paper {
  border-radius: 28px;
  box-shadow: 0 29px 64px rgba(0, 0, 0, 0.42), inset 0 0 60px rgba(113, 73, 30, 0.06);
}

.collab-editor .editor-actions {
  width: min(720px, calc(100% - 28px));
}

.collab-editor .sync-button {
  border-color: #dda94c;
  color: #f7d77e;
  background: linear-gradient(145deg, #a64236, #6f1e2a 70%);
}

.collab-editor .sync-button small { color: rgba(255, 226, 159, 0.68); }

@media (max-width: 700px) {
  .mailbox-title { padding-left: 50px; padding-right: 50px; }
  .mailbox-title::before { left: 13px; transform: scale(0.82); }
  .mailbox-title::after { right: 14px; transform: scale(0.82); }
  .mailbox-home .letter-archive { padding-left: 14px; padding-right: 14px; }
  .mailbox-home .archive-card { min-height: 116px; grid-template-columns: 98px minmax(0, 1fr) 20px; gap: 11px; padding: 11px; border-radius: 19px; }
  .archive-thumb { width: 98px; height: 82px; border-radius: 11px; }
  .mailbox-home .archive-copy strong { font-size: 17px; }
  .mailbox-home .archive-copy time { font-size: 10px; }
  .mailbox-home .archive-copy em { font-size: 9px; }
  .mailbox-home .archive-write { margin-left: auto; margin-right: auto; width: calc(100% - 12px); }

  .collab-editor .editor-header { grid-template-columns: auto minmax(0, 1fr) auto; min-height: 104px; }
  .collab-editor .editor-header h1 { font-size: 22px; letter-spacing: 0.06em; }
  .collab-editor .editor-header p { display: block; max-width: 230px; font-size: 8px; line-height: 1.45; }
  .stationery-panel { padding: 16px 12px 18px; border-radius: 22px; }
  .stationery-grid { grid-template-columns: 1fr 1fr; gap: 15px 12px; }
  .stationery-option .paper-swatch { width: 100%; height: auto; border-radius: 14px; }
  .stationery-option strong { font-size: 13px; }
  .stationery-seal { top: calc(70% - 21px); }
}

@media (max-width: 390px) {
  .mailbox-title h1 { font-size: 25px; }
  .mailbox-title p { font-size: 10px; letter-spacing: 0.07em; }
  .archive-filters button,
  .archive-filters span { min-height: 34px; padding: 0 15px; font-size: 11px; }
  .mailbox-home .archive-card { grid-template-columns: 86px minmax(0, 1fr) 18px; }
  .archive-thumb { width: 86px; height: 76px; }
  .mailbox-home .archive-copy strong { font-size: 15px; }
  .mailbox-home .archive-write { padding-left: 66px; padding-right: 12px; }
  .archive-write-seal { width: 53px; height: 53px; }
  .collab-editor .editor-header p { display: none; }
}

/* 2026-08 手机扫码兼容：让页面使用浏览器原生滚动，避免微信/安卓内置浏览器卡住首页 */
:root {
  --handwriting-font: "LXGW WenKai", "Kaiti SC", "STKaiti", "KaiTi", "楷体", serif;
}

html {
  min-height: 100%;
  overflow-x: hidden;
  background: var(--night);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  min-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: auto;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}

.mailbox-poster-page {
  display: block;
  height: auto;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  overflow-y: visible;
  padding-bottom: max(28px, env(safe-area-inset-bottom));
}

.mailbox-home {
  min-height: 100vh;
  min-height: 100dvh;
  overflow: visible;
}

.role-page,
.collab-editor,
.saved-letter-page {
  height: auto;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  overflow-y: visible;
}

.mailbox-scroll-hint {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: fit-content;
  margin: 9px auto 0;
  color: rgba(244, 220, 158, 0.62);
  font-family: "Songti SC", "STSong", serif;
  font-size: 10px;
  letter-spacing: 0.08em;
}

.mailbox-scroll-hint span {
  color: #e0b85e;
  font-size: 16px;
  line-height: 1;
  animation: mailbox-scroll-cue 1.8s ease-in-out infinite;
}

@keyframes mailbox-scroll-cue {
  0%, 100% { transform: translateY(-1px); opacity: 0.45; }
  50% { transform: translateY(3px); opacity: 1; }
}

/* 信纸册与真实书写纸统一成小王子治愈系，而不是表单卡片 */
.stationery-panel .section-heading p {
  margin-bottom: 4px;
  color: rgba(216, 175, 85, 0.72);
  font-size: 8px;
}

.stationery-option .paper-swatch b {
  position: absolute;
  right: 17%;
  bottom: 13%;
  z-index: 3;
  width: 7px;
  height: 15px;
  border-radius: 55% 55% 40% 40%;
  color: inherit;
  background: currentColor;
  opacity: 0.62;
  box-shadow: 10px 8px 0 -2px currentColor;
}

.stationery-option .paper-swatch b::before {
  content: "";
  position: absolute;
  left: 0;
  top: -6px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

.stationery-option .paper-swatch b::after {
  content: "";
  position: absolute;
  left: -10px;
  top: 4px;
  width: 17px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  transform: rotate(-13deg);
  transform-origin: right center;
}

.collab-editor .shared-paper {
  isolation: isolate;
  padding-top: 25px;
  font-family: var(--handwriting-font);
  font-weight: 500;
  font-synthesis: none;
}

.collab-editor .shared-paper::before {
  content: "";
  position: absolute;
  inset: 10px;
  z-index: -1;
  border: 1px solid color-mix(in srgb, var(--paper-accent), transparent 72%);
  border-radius: 20px;
  pointer-events: none;
}

.paper-address {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 17px;
  padding: 0 4px 12px;
  border-bottom: 1px dashed var(--paper-line);
  color: var(--paper-muted);
  font-family: var(--handwriting-font);
  font-size: 13px;
  letter-spacing: 0.08em;
}

.paper-address em {
  padding: 4px 10px;
  border: 1px solid var(--paper-line);
  border-radius: 999px;
  color: var(--paper-accent);
  font-size: 10px;
  font-style: normal;
  white-space: nowrap;
}

.letter-title-input,
.author-block textarea,
.saved-letter-paper > h1,
.saved-letter-paper section > p {
  font-family: var(--handwriting-font);
  font-weight: 500;
  font-synthesis: none;
}

.collab-editor .letter-title-input {
  font-size: clamp(26px, 6vw, 40px);
  line-height: 1.45;
}

.collab-editor .author-block {
  padding: 17px 13px 13px;
  border: 0;
  border-radius: 12px;
  background: transparent;
}

.collab-editor .author-active {
  background: color-mix(in srgb, var(--paper-accent), transparent 94%);
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--paper-accent), transparent 28%);
}

.collab-editor .author-label strong {
  font-family: var(--handwriting-font);
  font-size: 15px;
  font-weight: 500;
}

.collab-editor .author-block textarea {
  min-height: 170px;
  padding: 8px 4px 5px;
  border-radius: 0;
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent calc(2.15em - 1px),
    var(--paper-line) calc(2.15em - 1px),
    var(--paper-line) 2.15em
  );
  background-attachment: local;
  font-size: 18px;
  line-height: 2.15;
  letter-spacing: 0.06em;
}

@media (max-width: 700px) {
  .mailbox-hero { padding-top: max(17px, calc(env(safe-area-inset-top) + 8px)); }
  .mailbox-title { padding-bottom: 11px; }
  .mailbox-title h1 { line-height: 1.16; }
  .title-rose { margin-top: 8px; margin-bottom: 6px; }
  .mailbox-home .letter-archive { padding-top: 19px; padding-bottom: max(82px, calc(env(safe-area-inset-bottom) + 54px)); }
  .mailbox-scroll-hint { margin-top: 7px; }

  .collab-editor { padding-bottom: max(22px, env(safe-area-inset-bottom)); }
  .collab-editor .editor-header { min-height: 92px; }
  .presence-strip { margin-bottom: 13px; }
  .stationery-panel { margin-bottom: 16px; }
  .stationery-panel .section-heading { align-items: end; }
  .stationery-panel .section-heading h2 { font-size: 19px; }
  .stationery-panel .section-heading > span { max-width: 92px; text-align: right; line-height: 1.4; }
  .stationery-option { min-height: 0; }
  .collab-editor .shared-paper { width: calc(100% - 20px); padding: 22px 13px 19px; border-radius: 21px; }
  .collab-editor .shared-paper::before { inset: 7px; border-radius: 16px; }
  .paper-address { margin-bottom: 13px; font-size: 12px; }
  .collab-editor .author-block { padding-left: 10px; padding-right: 8px; }
  .collab-editor .author-block textarea { min-height: 155px; font-size: 17px; }
}

@media (max-width: 390px) {
  .mailbox-title { padding-left: 46px; padding-right: 46px; }
  .stationery-grid { gap: 12px 9px; }
  .stationery-option small { font-size: 7.5px; }
  .paper-address em { padding-left: 8px; padding-right: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .mailbox-scroll-hint span { animation: none; }
}

/* 2026-08-17：按参考稿重做写信页，并统一苹果/安卓手机显示 */
.mailbox-title p {
  max-width: 390px;
  margin-right: auto;
  margin-left: auto;
  line-height: 1.65;
  letter-spacing: 0.07em;
}

.collab-editor {
  padding-bottom: max(30px, env(safe-area-inset-bottom));
  background:
    radial-gradient(circle at 11% 10%, rgba(34, 77, 118, 0.62), transparent 26%),
    radial-gradient(circle at 90% 42%, rgba(36, 77, 117, 0.35), transparent 29%),
    radial-gradient(circle at 50% 86%, rgba(47, 75, 96, 0.22), transparent 29%),
    linear-gradient(160deg, #0b3154 0%, #061d34 47%, #020c19 100%);
}

.collab-editor .editor-sky {
  opacity: 0.82;
  background-image:
    radial-gradient(circle, rgba(255, 220, 118, 0.95) 0 1.2px, transparent 1.9px),
    radial-gradient(circle, rgba(194, 218, 239, 0.72) 0 1px, transparent 1.6px),
    radial-gradient(circle, rgba(250, 196, 80, 0.7) 0 1px, transparent 1.6px);
  background-size: 103px 97px, 167px 149px, 229px 211px;
  background-position: 12px 31px, 61px 87px, 129px 18px;
}

.collab-editor .editor-header {
  position: relative;
  width: min(820px, calc(100% - 24px));
  min-height: 128px;
  padding: max(18px, env(safe-area-inset-top)) 0 16px;
}

.collab-editor .editor-header::before,
.collab-editor .editor-header::after {
  position: absolute;
  z-index: -1;
  top: 21px;
  color: #e6b85b;
  text-shadow: 0 0 18px rgba(236, 191, 91, 0.38);
  pointer-events: none;
}

.collab-editor .editor-header::before {
  content: "☾";
  left: 78px;
  font-size: 47px;
  transform: rotate(-17deg);
}

.collab-editor .editor-header::after {
  content: "♄";
  right: 82px;
  top: 27px;
  font-family: Georgia, serif;
  font-size: 42px;
  transform: rotate(-17deg);
}

.collab-editor .editor-header h1 {
  color: #f1cc78;
  font-family: "Songti SC", "STSong", serif;
  font-size: clamp(28px, 6vw, 42px);
  letter-spacing: 0.1em;
}

.collab-editor .editor-header p {
  max-width: 500px;
  margin-top: 7px;
  color: rgba(247, 218, 151, 0.78);
  font-size: 11px;
  letter-spacing: 0.08em;
}

.collab-editor .editor-back {
  width: 44px;
  min-height: 44px;
  overflow: hidden;
  padding: 0;
  border: 2px solid rgba(224, 177, 80, 0.66);
  border-radius: 50%;
  color: #e8bf66;
  background: rgba(3, 20, 35, 0.48);
  font-size: 0;
}

.collab-editor .editor-back::before {
  content: "←";
  font-family: Georgia, serif;
  font-size: 24px;
}

.collab-editor .role-switch {
  border-color: rgba(227, 185, 91, 0.38);
  color: rgba(247, 218, 151, 0.84);
  background: rgba(3, 20, 35, 0.48);
}

.collab-editor .presence-strip {
  width: min(690px, calc(100% - 30px));
  justify-content: center;
  margin-bottom: 15px;
  padding: 7px 12px;
  border: 0;
  color: rgba(244, 223, 173, 0.62);
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.collab-editor .presence-strip button {
  margin-left: 4px;
  padding-left: 13px;
  border-left: 1px solid rgba(228, 186, 93, 0.24);
}

.collab-editor .stationery-panel {
  width: min(720px, calc(100% - 26px));
  margin-bottom: 25px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.collab-editor .stationery-reference-heading {
  display: grid;
  justify-items: center;
  gap: 6px;
  margin: 0 0 17px;
  text-align: center;
}

.collab-editor .stationery-reference-heading h2 {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  color: #e8c16e;
  font-size: clamp(20px, 4.6vw, 27px);
  letter-spacing: 0.14em;
}

.collab-editor .stationery-reference-heading h2::before { display: none; }
.collab-editor .stationery-reference-heading h2 span { color: #e0aa4a; font-size: 9px; }
.collab-editor .stationery-reference-heading small {
  color: rgba(243, 220, 164, 0.48);
  font-size: 9px;
  letter-spacing: 0.08em;
}

.collab-editor .stationery-grid {
  width: min(650px, 100%);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 22px;
  margin: 0 auto;
}

.collab-editor .stationery-option {
  display: flex;
  min-height: 0;
  gap: 0;
  padding: 0 0 5px;
  border: 0;
  border-radius: 17px;
  background: transparent;
  box-shadow: none;
}

.collab-editor .stationery-option:hover { transform: translateY(-2px); }
.collab-editor .stationery-option.selected {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.collab-editor .stationery-option .paper-swatch {
  position: relative;
  width: 100%;
  height: auto;
  aspect-ratio: 1.24 / 1;
  border: 1px solid rgba(222, 175, 79, 0.75);
  border-radius: 17px;
  background: #102b47 !important;
  box-shadow: 0 12px 23px rgba(0, 0, 0, 0.34), inset 0 0 0 1px rgba(255, 238, 186, 0.07);
}

.collab-editor .stationery-option.selected .paper-swatch {
  border-color: #f0ca6d;
  box-shadow:
    0 0 0 2px rgba(238, 194, 91, 0.42),
    0 0 24px rgba(239, 192, 76, 0.47),
    0 12px 24px rgba(0, 0, 0, 0.34);
}

.collab-editor .stationery-option .paper-swatch::before,
.collab-editor .stationery-option .paper-swatch::after,
.collab-editor .stationery-option .paper-swatch > i,
.collab-editor .stationery-option .paper-swatch > b { display: none; }

.stationery-reference-crop {
  position: absolute;
  width: 294%;
  max-width: none;
  height: auto;
  display: block;
  user-select: none;
  pointer-events: none;
  -webkit-user-drag: none;
}

.option-moon .stationery-reference-crop { left: -42%; top: -106%; }
.option-rose .stationery-reference-crop { left: -152%; top: -106%; }
.option-wheat .stationery-reference-crop { left: -42%; top: -229%; }
.option-star .stationery-reference-crop { left: -152%; top: -229%; }

.collab-editor .stationery-option strong {
  margin-top: 8px;
  color: #edca75;
  font-family: "Songti SC", "STSong", serif;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 0.1em;
}

.collab-editor .stationery-option small { display: none; }

.collab-editor .stationery-seal {
  right: -9px;
  top: calc(100% - 67px);
  width: 43px;
  height: 43px;
  border: 2px double #e2ad50;
  color: #f5d47c;
  background: radial-gradient(circle at 36% 28%, #b84b3e, #791f28 66%, #50151e);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.38), 0 0 13px rgba(225, 174, 72, 0.2);
  font-size: 18px;
}

.collab-editor .shared-paper,
.collab-editor.stationery-star .shared-paper,
.collab-editor.stationery-moon .shared-paper,
.collab-editor.stationery-rose .shared-paper,
.collab-editor.stationery-wheat .shared-paper {
  --paper-ink: #513b2b;
  --paper-muted: #846d54;
  --paper-accent: #9e463e;
  --paper-line: rgba(112, 77, 46, 0.18);
  width: min(710px, calc(100% - 28px));
  padding: 32px clamp(22px, 5vw, 50px) 29px;
  border: 1px solid rgba(211, 159, 70, 0.72);
  border-radius: 23px 18px 25px 20px;
  color: var(--paper-ink);
  background:
    radial-gradient(circle at 7% 8%, rgba(187, 131, 53, 0.12), transparent 25%),
    radial-gradient(circle at 92% 84%, rgba(173, 111, 44, 0.13), transparent 28%),
    radial-gradient(circle at 34% 51%, rgba(255, 255, 255, 0.32), transparent 30%),
    linear-gradient(145deg, #faecc9 0%, #efd8a8 54%, #dfbd80 100%);
  box-shadow: 0 29px 64px rgba(0, 0, 0, 0.45), inset 0 0 55px rgba(110, 69, 25, 0.1);
  font-family: var(--handwriting-font);
}

.collab-editor .shared-paper::before {
  inset: 11px;
  border: 1px solid rgba(175, 120, 43, 0.32);
  border-radius: 17px 14px 19px 15px;
  box-shadow: inset 0 0 0 3px rgba(255, 248, 220, 0.14);
}

.collab-editor .paper-constellation {
  color: #b0803b;
  opacity: 0.68;
}

.collab-editor .paper-address {
  min-height: 54px;
  align-items: flex-start;
  margin-bottom: 19px;
  padding: 0 0 12px;
  border-bottom: 1px dashed rgba(125, 87, 48, 0.22);
  color: #755d46;
  font-size: 16px;
}

.collab-editor .paper-address em {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border: 1px solid rgba(149, 70, 61, 0.32);
  border-radius: 8px;
  color: #99453d;
  background: rgba(255, 239, 201, 0.38);
  font-size: 10px;
}

.collab-editor .paper-address em b {
  font-size: 16px;
  font-weight: 400;
}

.collab-editor .paper-kicker {
  color: #a14c43;
  font-family: Georgia, serif;
  font-size: 9px;
  letter-spacing: 0.27em;
}

.collab-editor .letter-title-input {
  margin: 8px 0 3px;
  padding: 3px 5px;
  color: #493427;
  font-family: var(--handwriting-font);
  font-size: clamp(23px, 5vw, 34px);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: 0.07em;
}

.collab-editor .author-block {
  padding: 13px 8px 10px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  box-shadow: none;
}

.collab-editor .author-active {
  background: rgba(172, 112, 46, 0.055);
  box-shadow: inset 2px 0 0 rgba(151, 72, 58, 0.35);
}

.collab-editor .author-label > span {
  width: 31px;
  height: 31px;
  border: 1px solid rgba(151, 70, 59, 0.4);
  color: #8d4038;
  background: rgba(255, 240, 204, 0.46);
  font-family: var(--handwriting-font);
}

.collab-editor .author-label strong {
  color: #58402f;
  font-family: var(--handwriting-font);
  font-size: 16px;
}

.collab-editor .author-label small { color: #8c7257; }

.collab-editor .author-block textarea {
  min-height: 170px;
  color: #493427;
  caret-color: #9b413b;
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent calc(2.2em - 1px),
    rgba(116, 81, 47, 0.16) calc(2.2em - 1px),
    rgba(116, 81, 47, 0.16) 2.2em
  );
  font-family: var(--handwriting-font);
  font-size: 18px;
  line-height: 2.2;
}

.collab-editor .author-separator { color: #a47739; }
.collab-editor .paper-tools { border-color: rgba(114, 77, 43, 0.18); }
.collab-editor .paper-tools button {
  border-color: rgba(139, 84, 50, 0.24);
  color: #72543c;
  background: rgba(255, 244, 213, 0.32);
}

.collab-editor .paper-signature {
  margin: 24px 8px 0;
  color: #57402f;
  text-align: right;
  font-family: var(--handwriting-font);
  font-size: 18px;
  letter-spacing: 0.08em;
}

.collab-editor .editor-actions {
  width: min(650px, calc(100% - 32px));
  grid-template-columns: 1.25fr 0.82fr;
  gap: 13px;
  margin-top: 24px;
}

.collab-editor .sync-button {
  min-height: 70px;
  border: 2px double #e4b357;
  border-radius: 999px;
  color: #f5d782;
  background: linear-gradient(145deg, #ae493b, #781f29 67%, #52151e);
  box-shadow: 0 15px 27px rgba(0, 0, 0, 0.35), inset 0 2px 0 rgba(255, 234, 171, 0.1);
}

.collab-editor .sync-button > span {
  width: 51px;
  height: 51px;
  display: grid;
  place-items: center;
  border: 2px double #e0ac51;
  border-radius: 47% 53% 45% 55%;
  color: #e8bd62;
  background: rgba(94, 22, 29, 0.48);
  font-size: 22px;
}

.collab-editor .sync-button strong {
  font-family: var(--handwriting-font);
  font-size: 18px;
}

.collab-editor .publish-button {
  min-height: 70px;
  border: 1px solid rgba(225, 181, 82, 0.66);
  border-radius: 999px;
  color: #e9c46c;
  background: rgba(6, 28, 47, 0.74);
  font-family: var(--handwriting-font);
  font-size: 15px;
}

.collab-editor .editor-footnote {
  max-width: 600px;
  margin-top: 17px;
  padding: 0 18px;
  color: rgba(238, 219, 169, 0.54);
  line-height: 1.7;
}

@media (max-width: 700px) {
  .mailbox-title p { max-width: 310px; font-size: 10px; }

  .collab-editor .editor-header {
    min-height: 117px;
    grid-template-columns: 45px minmax(0, 1fr) 70px;
    gap: 6px;
  }

  .collab-editor .editor-header::before { left: 49px; top: 27px; font-size: 35px; }
  .collab-editor .editor-header::after { right: 55px; top: 31px; font-size: 32px; }
  .collab-editor .editor-header h1 { font-size: clamp(23px, 7vw, 31px); }
  .collab-editor .editor-header p { display: block; max-width: 235px; font-size: 8px; line-height: 1.55; }
  .collab-editor .role-switch { min-height: 32px; padding: 0 7px; font-size: 8px; line-height: 1.2; }

  .collab-editor .presence-strip {
    width: calc(100% - 26px);
    gap: 7px 11px;
    margin-bottom: 10px;
    padding: 5px 4px;
    font-size: 8px;
  }

  .collab-editor .presence-strip button {
    width: auto;
    margin-left: auto;
    padding: 2px 0 2px 9px;
    font-size: 8px;
    text-align: right;
  }

  .collab-editor .stationery-panel { width: calc(100% - 24px); margin-bottom: 19px; }
  .collab-editor .stationery-grid { gap: 14px 11px; }
  .collab-editor .stationery-option .paper-swatch { border-radius: 14px; }
  .collab-editor .stationery-option strong { margin-top: 7px; font-size: 14px; }
  .collab-editor .stationery-seal { right: -7px; top: calc(100% - 58px); width: 36px; height: 36px; }

  .collab-editor .shared-paper,
  .collab-editor.stationery-star .shared-paper,
  .collab-editor.stationery-moon .shared-paper,
  .collab-editor.stationery-rose .shared-paper,
  .collab-editor.stationery-wheat .shared-paper {
    width: calc(100% - 18px);
    padding: 24px 16px 23px;
    border-radius: 20px 16px 22px 17px;
  }

  .collab-editor .shared-paper::before { inset: 7px; }
  .collab-editor .paper-address { min-height: 47px; margin-bottom: 13px; font-size: 14px; }
  .collab-editor .paper-address em { padding: 6px 8px; font-size: 9px; }
  .collab-editor .paper-kicker { font-size: 8px; }
  .collab-editor .letter-title-input { font-size: clamp(22px, 7vw, 29px); }
  .collab-editor .author-label strong { font-size: 14px; }
  .collab-editor .author-block textarea { min-height: 145px; font-size: 17px; }
  .collab-editor .paper-signature { font-size: 17px; }

  .collab-editor .editor-actions {
    width: calc(100% - 28px);
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .collab-editor .sync-button,
  .collab-editor .publish-button { min-height: 64px !important; }
  .collab-editor .publish-button { min-height: 49px !important; }
}

@media (max-width: 390px) {
  .collab-editor .editor-header { grid-template-columns: 41px minmax(0, 1fr) 62px; }
  .collab-editor .editor-header::before { left: 39px; }
  .collab-editor .editor-header::after { right: 45px; }
  .collab-editor .editor-header h1 { font-size: 22px; }
  .collab-editor .editor-header p { max-width: 195px; font-size: 7px; }
  .collab-editor .stationery-grid { column-gap: 9px; }
  .collab-editor .stationery-option strong { font-size: 13px; }
  .collab-editor .paper-address em b { display: none; }
  .collab-editor .paper-address em { padding-right: 6px; padding-left: 6px; }
}

/* 2026-08-21：四款信纸的缩略图、编辑纸面与寄出成品使用同一套素材 */
.stationery-reference-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  user-select: none;
  pointer-events: none;
  -webkit-user-drag: none;
}

.collab-editor.stationery-moon .shared-paper,
.saved-letter-page.stationery-moon .saved-letter-paper {
  --paper-ink: #3f3a31;
  --paper-muted: #756d5e;
  --paper-accent: #9a7436;
  --paper-line: rgba(93, 88, 73, 0.2);
  border-color: rgba(185, 145, 70, 0.7);
  background-image:
    linear-gradient(rgba(255, 248, 224, 0.1), rgba(255, 248, 224, 0.1)),
    url("https://media.lanyunyouming.cn/assets/latest/stationery/moon-v2.webp");
  background-position: center;
  background-size: cover;
}

.collab-editor.stationery-rose .shared-paper,
.saved-letter-page.stationery-rose .saved-letter-paper {
  --paper-ink: #503529;
  --paper-muted: #82675a;
  --paper-accent: #a1453e;
  --paper-line: rgba(122, 74, 58, 0.2);
  border-color: rgba(194, 139, 66, 0.72);
  background-image:
    linear-gradient(rgba(255, 248, 224, 0.09), rgba(255, 248, 224, 0.09)),
    url("https://media.lanyunyouming.cn/assets/latest/stationery/rose-v2.webp");
  background-position: center;
  background-size: cover;
}

.collab-editor.stationery-wheat .shared-paper,
.saved-letter-page.stationery-wheat .saved-letter-paper {
  --paper-ink: #513c24;
  --paper-muted: #806847;
  --paper-accent: #9a5b2f;
  --paper-line: rgba(111, 78, 38, 0.2);
  border-color: rgba(194, 143, 65, 0.76);
  background-image:
    linear-gradient(rgba(255, 247, 217, 0.08), rgba(255, 247, 217, 0.08)),
    url("https://media.lanyunyouming.cn/assets/latest/stationery/wheat-v2.webp");
  background-position: center;
  background-size: cover;
}

.collab-editor.stationery-star .shared-paper,
.saved-letter-page.stationery-star .saved-letter-paper {
  --paper-ink: #fff0c5;
  --paper-muted: rgba(244, 225, 177, 0.73);
  --paper-accent: #efc662;
  --paper-line: rgba(244, 214, 139, 0.22);
  border-color: rgba(231, 191, 91, 0.72);
  color: var(--paper-ink);
  background-image:
    linear-gradient(rgba(4, 20, 38, 0.08), rgba(4, 20, 38, 0.08)),
    url("https://media.lanyunyouming.cn/assets/latest/stationery/star-v2.webp");
  background-position: center;
  background-size: cover;
}

.collab-editor.stationery-star .paper-address,
.collab-editor.stationery-star .author-label strong,
.collab-editor.stationery-star .author-block textarea,
.collab-editor.stationery-star .letter-title-input,
.collab-editor.stationery-star .paper-signature {
  color: var(--paper-ink);
}

.collab-editor.stationery-star .author-label small { color: var(--paper-muted); }
.collab-editor.stationery-star .author-label > span {
  color: #08223a;
  background: #e9c467;
}
.collab-editor.stationery-star .author-active { background: rgba(255, 240, 190, 0.06); }
.collab-editor.stationery-star .paper-tools button {
  color: #f8e5b3;
  background: rgba(8, 31, 52, 0.28);
}

.archive-card .archive-thumb > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.archive-card .archive-thumb { position: relative; }

.archive-card .archive-thumb > i {
  position: absolute;
  right: 7px;
  bottom: 5px;
  z-index: 2;
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border: 1px solid rgba(245, 208, 113, 0.62);
  border-radius: 50%;
  color: #f7d47a;
  background: rgba(5, 25, 43, 0.76);
  font-size: 12px;
  backdrop-filter: blur(5px);
}

/* 首屏烟花：纯 Canvas 绘制，触摸与鼠标均可在当前位置绽放 */
.fireworks-intro {
  position: relative;
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
  color: #f9e9ba;
  background:
    radial-gradient(circle at 50% 30%, rgba(37, 83, 128, 0.44), transparent 35%),
    linear-gradient(180deg, #071d35 0%, #04111f 70%, #020912 100%);
}

.fireworks-intro::before,
.fireworks-intro::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.fireworks-intro::before {
  opacity: 0.65;
  background-image:
    radial-gradient(circle, rgba(255, 232, 157, 0.9) 0 1px, transparent 1.5px),
    radial-gradient(circle, rgba(180, 211, 239, 0.66) 0 1px, transparent 1.5px);
  background-position: 19px 31px, 81px 47px;
  background-size: 119px 113px, 181px 167px;
  animation: fireworks-stars 4.2s ease-in-out infinite alternate;
}

.fireworks-intro::after {
  top: auto;
  height: 27%;
  background:
    radial-gradient(ellipse at 50% 120%, #142b48 0 42%, transparent 43%),
    linear-gradient(180deg, transparent, rgba(0, 4, 10, 0.46));
}

@keyframes fireworks-stars {
  from { opacity: 0.45; }
  to { opacity: 0.82; transform: translate3d(4px, -3px, 0); }
}

.fireworks-canvas,
.fireworks-nebula {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.fireworks-canvas { z-index: 1; touch-action: manipulation; }
.fireworks-nebula {
  z-index: 0;
  pointer-events: none;
  opacity: 0.44;
  background:
    radial-gradient(ellipse at 15% 80%, rgba(71, 113, 157, 0.25), transparent 27%),
    radial-gradient(ellipse at 86% 62%, rgba(129, 81, 123, 0.18), transparent 25%);
}

.fireworks-moon {
  position: absolute;
  z-index: 2;
  left: clamp(23px, 7vw, 78px);
  top: max(28px, env(safe-area-inset-top));
  color: #f5d77e;
  font-family: Georgia, serif;
  font-size: clamp(54px, 12vw, 90px);
  filter: drop-shadow(0 0 18px rgba(244, 209, 111, 0.3));
  pointer-events: none;
}

.fireworks-planet {
  position: absolute;
  z-index: 2;
  right: clamp(27px, 8vw, 92px);
  top: max(49px, calc(env(safe-area-inset-top) + 25px));
  width: clamp(48px, 11vw, 79px);
  aspect-ratio: 1;
  border: 1px solid rgba(237, 196, 94, 0.72);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #d6b060, #745237 46%, #172d48 72%);
  box-shadow: 0 0 24px rgba(221, 169, 68, 0.24);
  pointer-events: none;
}

.fireworks-planet::after {
  content: "";
  position: absolute;
  left: -13%;
  right: -13%;
  top: 46%;
  height: 20%;
  border: 2px solid rgba(230, 191, 103, 0.64);
  border-top-color: transparent;
  border-radius: 50%;
  transform: rotate(-18deg);
}

.fireworks-copy {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 47%;
  width: min(88%, 650px);
  transform: translate(-50%, -50%);
  text-align: center;
  pointer-events: none;
  text-shadow: 0 3px 18px rgba(0, 0, 0, 0.58);
}

.fireworks-copy > p:first-child {
  margin: 0 0 19px;
  color: rgba(239, 206, 125, 0.68);
  font-family: Georgia, serif;
  font-size: clamp(8px, 2.2vw, 12px);
  letter-spacing: 0.25em;
}

.fireworks-copy h1 {
  margin: 0;
  color: #ffe7a2;
  font-family: "LXGW WenKai", "Kaiti SC", "KaiTi", serif;
  font-size: clamp(34px, 8.2vw, 68px);
  font-weight: 500;
  line-height: 1.42;
  letter-spacing: 0.08em;
}

.fireworks-divider {
  display: block;
  margin: 22px 0 16px;
  color: #e7b94e;
  font-size: 12px;
  letter-spacing: 0.22em;
}

.fireworks-hint {
  margin: 0;
  color: rgba(246, 229, 184, 0.66);
  font-size: clamp(10px, 2.6vw, 13px);
  letter-spacing: 0.12em;
}

.fireworks-actions {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: max(38px, calc(env(safe-area-inset-bottom) + 24px));
  width: min(88%, 470px);
  display: grid;
  justify-items: center;
  gap: 11px;
  transform: translateX(-50%);
}

.fireworks-enter {
  width: 100%;
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border: 1px solid rgba(238, 195, 91, 0.72);
  border-radius: 999px;
  color: #f9da82;
  background: linear-gradient(145deg, rgba(131, 42, 42, 0.92), rgba(77, 24, 38, 0.94));
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 232, 167, 0.15);
  font-family: "LXGW WenKai", "Kaiti SC", "KaiTi", serif;
  font-size: 16px;
  letter-spacing: 0.08em;
  cursor: pointer;
}

.fireworks-enter span { color: #f0bd4f; font-size: 10px; }
.fireworks-music {
  min-height: 34px;
  padding: 0 15px;
  border: 1px solid rgba(234, 207, 141, 0.28);
  border-radius: 999px;
  color: rgba(248, 229, 181, 0.72);
  background: rgba(5, 21, 37, 0.64);
  font-size: 10px;
  cursor: pointer;
}

.fireworks-audio-note {
  color: rgba(247, 226, 175, 0.46);
  font-size: 9px;
  letter-spacing: 0.08em;
}

.fireworks-prince {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 16%;
  width: 34px;
  height: 72px;
  transform: translateX(-50%);
  opacity: 0.78;
  pointer-events: none;
}

.fireworks-prince::before {
  content: "";
  position: absolute;
  left: 9px;
  top: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #cfaa5b;
  box-shadow: -4px -2px 0 -1px #d7b55e, 4px -3px 0 -2px #e0c16c;
}

.fireworks-prince::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 18px;
  width: 22px;
  height: 35px;
  border-radius: 45% 45% 30% 30%;
  background: #173d54;
  box-shadow: -4px 29px 0 -7px #101c27, 4px 29px 0 -7px #101c27;
}

.fireworks-prince span {
  position: absolute;
  left: 24px;
  top: 20px;
  width: 44px;
  height: 5px;
  border-radius: 999px;
  background: #c99542;
  transform: rotate(10deg);
  transform-origin: left center;
  animation: fireworks-scarf 2.5s ease-in-out infinite alternate;
}

.fireworks-prince i {
  position: absolute;
  left: -18px;
  bottom: 2px;
  width: 23px;
  height: 16px;
  border-radius: 60% 55% 45% 45%;
  background: #a75e2c;
  transform: rotate(-10deg);
}

@keyframes fireworks-scarf {
  to { transform: rotate(4deg) translateY(2px); }
}

@media (max-height: 650px) {
  .fireworks-copy { top: 43%; }
  .fireworks-prince { display: none; }
  .fireworks-actions { bottom: max(20px, calc(env(safe-area-inset-bottom) + 10px)); }
}

@media (prefers-reduced-motion: reduce) {
  .fireworks-intro::before,
  .fireworks-prince span { animation: none; }
}

.offline-notice {
  position: fixed;
  z-index: 1000;
  left: 50%;
  top: max(9px, env(safe-area-inset-top));
  width: max-content;
  max-width: calc(100% - 28px);
  padding: 8px 14px;
  border: 1px solid rgba(238, 199, 103, 0.42);
  border-radius: 999px;
  color: #f5d984;
  background: rgba(4, 20, 35, 0.88);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.32);
  font-size: 10px;
  letter-spacing: 0.06em;
  transform: translateX(-50%);
  backdrop-filter: blur(10px);
}

@media (prefers-reduced-motion: reduce) {
  .collab-editor .stationery-option,
  .collab-editor .editor-sky { animation: none; transition: none; }
}

/* 2026-08-21：统一信封缩略图、成品信纸排版与新版烟花首屏 */
.archive-card .archive-thumb > img {
  object-position: center;
}

.collab-editor .shared-paper,
.saved-letter-page .saved-letter-paper {
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
}

.saved-letter-page {
  padding: max(76px, calc(env(safe-area-inset-top) + 58px)) 14px max(54px, calc(env(safe-area-inset-bottom) + 34px));
  background:
    radial-gradient(circle at 50% 4%, rgba(47, 96, 139, 0.48), transparent 34%),
    linear-gradient(160deg, #102f4d 0%, #071827 56%, #020b13 100%);
}

.saved-letter-header {
  min-height: 62px;
  padding: env(safe-area-inset-top) 2px 0;
}

.saved-letter-header p {
  max-width: 52%;
  overflow: hidden;
  color: rgba(245, 228, 180, 0.72);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.saved-letter-paper {
  width: min(700px, calc(100% - 12px));
  min-height: min(860px, calc(100svh - 118px));
  padding: clamp(50px, 8vw, 74px) clamp(36px, 9vw, 76px) clamp(92px, 13vw, 126px);
  overflow: hidden;
  border-radius: 24px 20px 26px 21px;
  box-shadow:
    0 30px 70px rgba(0, 0, 0, 0.5),
    inset 0 0 70px rgba(105, 72, 34, 0.08);
}

.saved-letter-paper::before {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid color-mix(in srgb, var(--paper-accent), transparent 76%);
  border-radius: 18px 15px 21px 17px;
  pointer-events: none;
}

.saved-letter-heading {
  position: relative;
  z-index: 1;
  max-width: 560px;
  margin: 0 auto clamp(30px, 6vw, 48px);
  text-align: center;
}

.saved-letter-heading .paper-kicker {
  margin: 0 0 18px;
  font-family: Georgia, serif;
  font-size: clamp(8px, 1.8vw, 11px);
  letter-spacing: 0.28em;
}

.saved-letter-heading h1 {
  margin: 0;
  color: var(--paper-ink);
  font-family: var(--handwriting-font);
  font-size: clamp(29px, 6vw, 42px);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: 0.1em;
}

.saved-letter-mark {
  right: 0;
  top: -14px;
  font-size: 16px;
}

.saved-letter-ornament {
  display: inline-block;
  margin-top: 16px;
  color: var(--paper-accent);
  font-size: 10px;
}

.saved-letter-ornament::before,
.saved-letter-ornament::after {
  content: "";
  display: inline-block;
  width: 58px;
  height: 1px;
  margin: 0 12px 3px;
  background: var(--paper-line);
}

.saved-letter-content {
  position: relative;
  z-index: 1;
  max-width: 560px;
  margin: 0 auto;
}

.saved-letter-paper .saved-letter-content section {
  margin: 0 0 clamp(30px, 6vw, 48px);
}

.saved-letter-paper .saved-letter-content h2 {
  gap: 10px;
  margin-bottom: 18px;
  color: var(--paper-muted);
  font-family: var(--handwriting-font);
  font-size: 13px;
  font-weight: 500;
}

.saved-letter-paper .saved-letter-content h2 span {
  width: 34px;
  height: 34px;
  color: #fff0bc;
  background: var(--paper-accent);
  font-family: var(--handwriting-font);
}

.saved-letter-paper .saved-letter-content section > p {
  margin: 0;
  color: var(--paper-ink);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-family: var(--handwriting-font);
  font-size: clamp(16px, 2.9vw, 18px);
  font-weight: 500;
  line-height: 2.05;
  letter-spacing: 0.075em;
}

.saved-letter-paper footer {
  position: relative;
  z-index: 1;
  max-width: 560px;
  margin: clamp(42px, 8vw, 70px) auto 0;
  padding-top: 18px;
  color: var(--paper-muted);
  font-family: var(--handwriting-font);
  font-size: 11px;
}

.stationery-star .saved-letter-heading h1,
.stationery-star .saved-letter-paper .saved-letter-content section > p {
  color: #fff0c5;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
}

.fireworks-intro {
  min-height: 100svh;
  background: #06172a;
}

.fireworks-intro::before {
  z-index: 1;
  opacity: 0.36;
  mix-blend-mode: screen;
}

.fireworks-intro::after { display: none; }

.fireworks-scene {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center center;
  user-select: none;
  pointer-events: none;
  -webkit-user-drag: none;
}

.fireworks-nebula {
  z-index: 2;
  opacity: 0.24;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(80, 132, 184, 0.2), transparent 31%),
    linear-gradient(180deg, rgba(0, 8, 20, 0.04), rgba(0, 5, 15, 0.18));
}

.fireworks-canvas { z-index: 3; }

.fireworks-meteors {
  position: absolute;
  inset: 0;
  z-index: 4;
  overflow: hidden;
  pointer-events: none;
  mix-blend-mode: screen;
}

.fireworks-meteors i {
  position: absolute;
  left: -34%;
  top: 15%;
  width: clamp(90px, 24vw, 180px);
  height: 2px;
  border-radius: 999px;
  opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 239, 189, 0.96));
  box-shadow: 10px 0 10px rgba(255, 218, 123, 0.46);
  transform: rotate(-28deg);
  animation: fireworks-meteor 5.8s linear infinite;
}

.fireworks-meteors i:nth-child(2) { top: 28%; animation-delay: 1.35s; animation-duration: 7.1s; }
.fireworks-meteors i:nth-child(3) { top: 42%; animation-delay: 3.1s; animation-duration: 6.4s; }
.fireworks-meteors i:nth-child(4) { top: 9%; animation-delay: 4.65s; animation-duration: 8s; }
.fireworks-meteors i:nth-child(5) { top: 55%; animation-delay: 5.6s; animation-duration: 7.4s; }

@keyframes fireworks-meteor {
  0%, 68% { opacity: 0; transform: translate3d(0, 0, 0) rotate(-28deg); }
  72% { opacity: 1; }
  86% { opacity: 0.88; }
  100% { opacity: 0; transform: translate3d(155vw, 72vh, 0) rotate(-28deg); }
}

.fireworks-copy {
  z-index: 4;
  top: 49%;
  width: min(88%, 620px);
}

.fireworks-copy > p:first-child {
  margin-bottom: 17px;
  color: rgba(245, 209, 125, 0.76);
  font-size: clamp(8px, 2.1vw, 11px);
}

.fireworks-copy h1 {
  font-size: clamp(32px, 8vw, 60px);
  line-height: 1.46;
  letter-spacing: 0.075em;
}

.fireworks-divider { margin: 18px 0 13px; }

.fireworks-hint {
  color: rgba(251, 231, 180, 0.76);
  font-family: var(--handwriting-font);
  font-size: clamp(11px, 2.7vw, 14px);
}

.fireworks-touch-cue {
  position: relative;
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  margin: 19px auto 0;
  border: 1px solid rgba(239, 199, 101, 0.28);
  border-radius: 50%;
  color: #f4cd6d;
  background: rgba(5, 27, 47, 0.18);
  box-shadow: 0 0 0 10px rgba(238, 198, 98, 0.035), 0 0 25px rgba(238, 198, 98, 0.12);
  animation: fireworks-touch-pulse 2.2s ease-in-out infinite;
}

.fireworks-touch-cue b { font-size: 13px; font-weight: 400; }
.fireworks-touch-cue i { position: absolute; bottom: -18px; font-size: 18px; font-style: normal; letter-spacing: -0.2em; transform: rotate(90deg); }

@keyframes fireworks-touch-pulse {
  50% { transform: scale(1.07); box-shadow: 0 0 0 16px rgba(238, 198, 98, 0.02), 0 0 34px rgba(238, 198, 98, 0.22); }
}

.fireworks-actions {
  z-index: 5;
  bottom: max(22px, calc(env(safe-area-inset-bottom) + 14px));
  width: min(88%, 490px);
}

.fireworks-enter {
  min-height: 62px;
  border: 2px double rgba(239, 191, 82, 0.86);
  border-radius: 30px 25px 31px 26px;
  background: linear-gradient(145deg, rgba(143, 47, 44, 0.96), rgba(84, 24, 38, 0.97));
  font-size: clamp(15px, 3.9vw, 18px);
}

@media (max-width: 700px) {
  .saved-letter-page { padding-right: 7px; padding-left: 7px; }
  .saved-letter-paper {
    width: calc(100% - 4px);
    min-height: calc(100svh - 112px);
    padding: 48px 28px 104px;
    border-radius: 20px 16px 22px 17px;
  }
  .saved-letter-paper::before { inset: 8px; }
  .saved-letter-heading { margin-bottom: 31px; }
  .saved-letter-heading .paper-kicker { margin-bottom: 15px; font-size: 8px; }
  .saved-letter-heading h1 { font-size: clamp(27px, 7.5vw, 34px); }
  .saved-letter-paper .saved-letter-content section > p { font-size: clamp(15.5px, 4.2vw, 17px); line-height: 2.05; }
  .saved-letter-paper footer { flex-direction: column; gap: 7px; }
  .fireworks-copy { top: 47%; }
  .fireworks-copy h1 { font-size: clamp(31px, 8.3vw, 42px); }
}

@media (max-height: 720px) {
  .fireworks-copy { top: 43%; }
  .fireworks-divider { margin-top: 12px; margin-bottom: 9px; }
  .fireworks-touch-cue { width: 44px; height: 44px; margin-top: 11px; }
  .fireworks-actions { bottom: max(12px, calc(env(safe-area-inset-bottom) + 7px)); }
  .fireworks-enter { min-height: 54px; }
}

@media (prefers-reduced-motion: reduce) {
  .fireworks-meteors i,
  .fireworks-touch-cue { animation: none; }
}

/* 多场景星空：首页可左右滑动，烟花只在轻触夜空时出现 */
.fireworks-scenes {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  height: 100%;
  transition: transform 720ms cubic-bezier(0.22, 0.75, 0.18, 1);
  will-change: transform;
}

.fireworks-scenes .fireworks-scene {
  position: relative;
  inset: auto;
  flex: 0 0 100vw;
  width: 100vw;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

.fireworks-canvas {
  touch-action: none;
  cursor: crosshair;
}

.fireworks-scene-controls {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
}

.fireworks-scene-arrow {
  position: absolute;
  top: 52%;
  width: 34px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(244, 211, 126, 0.2);
  border-radius: 999px;
  color: rgba(255, 232, 166, 0.72);
  background: rgba(4, 21, 37, 0.24);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  font-family: Georgia, serif;
  font-size: 28px;
  line-height: 1;
  pointer-events: auto;
  cursor: pointer;
  backdrop-filter: blur(5px);
  -webkit-tap-highlight-color: transparent;
}

.fireworks-scene-arrow-left { left: max(8px, env(safe-area-inset-left)); }
.fireworks-scene-arrow-right { right: max(8px, env(safe-area-inset-right)); }

.fireworks-scene-dots {
  position: absolute;
  left: 50%;
  top: max(18px, calc(env(safe-area-inset-top) + 10px));
  display: flex;
  gap: 9px;
  padding: 7px 10px;
  border: 1px solid rgba(241, 207, 123, 0.13);
  border-radius: 999px;
  background: rgba(3, 17, 31, 0.2);
  transform: translateX(-50%);
  pointer-events: auto;
  backdrop-filter: blur(5px);
}

.fireworks-scene-dots button {
  width: 6px;
  height: 6px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(250, 224, 158, 0.35);
  box-shadow: 0 0 0 0 rgba(247, 205, 101, 0);
  cursor: pointer;
  transition: width 240ms ease, background 240ms ease, box-shadow 240ms ease;
}

.fireworks-scene-dots button.is-active {
  width: 20px;
  border-radius: 999px;
  background: #f3cc6b;
  box-shadow: 0 0 12px rgba(247, 205, 101, 0.42);
}

.fireworks-actions {
  bottom: max(12px, calc(env(safe-area-inset-bottom) + 8px));
  width: min(74%, 370px);
  gap: 7px;
}

.fireworks-enter {
  min-height: 49px;
  padding: 8px 18px;
  border-width: 1px;
  border-radius: 999px;
  background: linear-gradient(145deg, rgba(133, 43, 43, 0.9), rgba(74, 23, 38, 0.92));
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 232, 167, 0.13);
  font-size: clamp(13px, 3.4vw, 15px);
}

@media (max-height: 720px) {
  .fireworks-actions { width: min(70%, 340px); }
  .fireworks-enter { min-height: 45px; padding-block: 6px; }
  .fireworks-scene-arrow { top: 54%; height: 42px; }
}

@media (prefers-reduced-motion: reduce) {
  .fireworks-scenes { transition: none; }
}

/* 安静星夜：减少遮挡，提升低端手机上的烟花流畅度 */
.fireworks-intro::before {
  opacity: 0.28;
  animation-duration: 5.6s;
}

.fireworks-copy {
  top: 43%;
  width: min(72%, 480px);
}

.fireworks-copy > p:first-child {
  margin-bottom: 12px;
  font-size: clamp(7px, 1.8vw, 9px);
  letter-spacing: 0.22em;
}

.fireworks-copy h1 {
  font-size: clamp(25px, 6.1vw, 38px);
  line-height: 1.48;
  letter-spacing: 0.06em;
}

.fireworks-divider { margin: 12px 0 9px; }

.fireworks-hint {
  color: rgba(251, 231, 180, 0.64);
  font-size: clamp(10px, 2.3vw, 12px);
}

.fireworks-touch-cue,
.fireworks-music { display: none; }

.fireworks-actions {
  bottom: max(8px, calc(env(safe-area-inset-bottom) + 5px));
  width: min(64%, 330px);
}

.fireworks-enter {
  min-height: 43px;
  padding: 6px 14px;
  border-color: rgba(238, 195, 91, 0.58);
  background: linear-gradient(145deg, rgba(125, 40, 42, 0.82), rgba(69, 22, 38, 0.86));
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.26), inset 0 1px 0 rgba(255, 232, 167, 0.1);
  font-size: clamp(12px, 3.1vw, 14px);
}

.fireworks-scene-arrow {
  top: 59%;
  width: 31px;
  height: 41px;
  opacity: 0.72;
}

.fireworks-meteors i {
  width: clamp(78px, 20vw, 150px);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 240, 193, 0.78));
  box-shadow: 8px 0 8px rgba(255, 218, 123, 0.3);
  animation-duration: 11.8s;
}

.fireworks-meteors i:nth-child(2) { top: 25%; animation-delay: 2.7s; animation-duration: 13.4s; }
.fireworks-meteors i:nth-child(3) { top: 39%; animation-delay: 5.5s; animation-duration: 12.6s; }
.fireworks-meteors i:nth-child(4) { top: 8%; animation-delay: 8.1s; animation-duration: 14.1s; }
.fireworks-meteors i:nth-child(5) { top: 52%; animation-delay: 10.8s; animation-duration: 13.2s; }

@keyframes fireworks-meteor {
  0%, 81% { opacity: 0; transform: translate3d(0, 0, 0) rotate(-28deg); }
  84% { opacity: 0.72; }
  92% { opacity: 0.5; }
  100% { opacity: 0; transform: translate3d(155vw, 72vh, 0) rotate(-28deg); }
}

.fireworks-twinkles {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
}

.fireworks-twinkles i {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: rgba(255, 239, 183, 0.9);
  box-shadow: 0 0 7px rgba(255, 221, 132, 0.72);
  animation: fireworks-quiet-star 3.6s ease-in-out infinite;
}

.fireworks-twinkles i:nth-child(1) { left: 8%; top: 16%; animation-delay: -0.4s; }
.fireworks-twinkles i:nth-child(2) { left: 19%; top: 31%; animation-delay: -2.1s; animation-duration: 4.3s; }
.fireworks-twinkles i:nth-child(3) { left: 31%; top: 12%; animation-delay: -1.2s; }
.fireworks-twinkles i:nth-child(4) { left: 44%; top: 24%; animation-delay: -3.1s; animation-duration: 4.8s; }
.fireworks-twinkles i:nth-child(5) { left: 58%; top: 14%; animation-delay: -0.8s; }
.fireworks-twinkles i:nth-child(6) { left: 72%; top: 28%; animation-delay: -2.7s; animation-duration: 4.1s; }
.fireworks-twinkles i:nth-child(7) { left: 87%; top: 18%; animation-delay: -1.7s; }
.fireworks-twinkles i:nth-child(8) { left: 94%; top: 43%; animation-delay: -3.5s; animation-duration: 5s; }
.fireworks-twinkles i:nth-child(9) { left: 12%; top: 48%; animation-delay: -2.4s; animation-duration: 4.5s; }
.fireworks-twinkles i:nth-child(10) { left: 27%; top: 58%; animation-delay: -0.9s; }
.fireworks-twinkles i:nth-child(11) { left: 39%; top: 67%; animation-delay: -3.3s; animation-duration: 4.9s; }
.fireworks-twinkles i:nth-child(12) { left: 54%; top: 55%; animation-delay: -1.5s; }
.fireworks-twinkles i:nth-child(13) { left: 66%; top: 72%; animation-delay: -2.9s; animation-duration: 4.4s; }
.fireworks-twinkles i:nth-child(14) { left: 78%; top: 51%; animation-delay: -0.6s; }
.fireworks-twinkles i:nth-child(15) { left: 89%; top: 65%; animation-delay: -2s; animation-duration: 4.7s; }
.fireworks-twinkles i:nth-child(16) { left: 49%; top: 34%; animation-delay: -3.8s; animation-duration: 5.2s; }

@keyframes fireworks-quiet-star {
  0%, 100% { opacity: 0.16; transform: scale(0.65); }
  48% { opacity: 0.86; transform: scale(1.65); }
  62% { opacity: 0.34; transform: scale(0.9); }
}

@media (max-width: 700px) {
  .fireworks-copy { top: 42%; width: min(76%, 430px); }
  .fireworks-copy h1 { font-size: clamp(24px, 6.6vw, 33px); }
}

@media (max-height: 720px) {
  .fireworks-copy { top: 39%; }
  .fireworks-actions { width: min(61%, 300px); }
  .fireworks-enter { min-height: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .fireworks-twinkles i,
  .fireworks-meteors i { animation: none; }
}

/* 首页入口：贴近底部的轻量玻璃印章，避免遮住小王子与狐狸 */
.fireworks-actions {
  bottom: max(5px, env(safe-area-inset-bottom));
  width: fit-content;
  max-width: calc(100vw - 24px);
}

.fireworks-enter {
  position: relative;
  width: auto;
  min-height: 28px;
  padding: 2px 10px;
  gap: 4px;
  border: 1px solid rgba(238, 198, 104, 0.48);
  border-radius: 999px;
  color: rgba(255, 225, 150, 0.94);
  background: linear-gradient(145deg, rgba(113, 31, 40, 0.5), rgba(50, 18, 34, 0.58));
  -webkit-backdrop-filter: blur(7px) saturate(0.86);
  backdrop-filter: blur(7px) saturate(0.86);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 231, 172, 0.08);
  font-size: 10px;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.fireworks-enter span {
  font-size: 5px;
  opacity: 0.78;
}

.fireworks-enter::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 999px;
}

@media (max-width: 390px) {
  .fireworks-actions { width: fit-content; }
  .fireworks-enter { min-height: 28px; padding-inline: 9px; font-size: 10px; }
}

/* 流星：亮点拖着柔和长尾划过，错峰出现但不打扰音乐 */
.fireworks-meteors i {
  --meteor-angle: 27deg;
  --meteor-x: 155vw;
  --meteor-y: 68vh;
  width: clamp(118px, 31vw, 220px);
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 220, 133, 0.15) 36%, rgba(255, 240, 190, 0.68) 78%, #fffbe9 100%);
  box-shadow: 10px 0 12px rgba(255, 225, 151, 0.58);
  filter: drop-shadow(0 0 4px rgba(255, 235, 184, 0.5));
  transform: rotate(var(--meteor-angle));
  animation: fireworks-meteor 7.8s cubic-bezier(0.16, 0.72, 0.3, 1) infinite;
}

.fireworks-meteors i::after {
  content: "";
  position: absolute;
  right: -1px;
  top: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #fff9df;
  box-shadow: 0 0 5px #fff7d0, 0 0 12px rgba(255, 216, 119, 0.72);
  transform: translate(50%, -50%);
}

.fireworks-meteors i:nth-child(1) { top: 11%; animation-delay: -5.2s; }
.fireworks-meteors i:nth-child(2) { --meteor-angle: 23deg; --meteor-y: 56vh; top: 25%; animation-delay: -2.1s; animation-duration: 9.6s; }
.fireworks-meteors i:nth-child(3) { --meteor-angle: 30deg; --meteor-y: 74vh; top: 39%; animation-delay: -7.4s; animation-duration: 9s; }
.fireworks-meteors i:nth-child(4) { --meteor-angle: 20deg; --meteor-y: 49vh; top: 6%; animation-delay: -4.6s; animation-duration: 11.2s; }
.fireworks-meteors i:nth-child(5) { --meteor-angle: 33deg; --meteor-y: 80vh; top: 52%; animation-delay: -0.8s; animation-duration: 10.4s; }
.fireworks-meteors i:nth-child(6) { --meteor-angle: 25deg; --meteor-y: 61vh; top: 18%; width: clamp(88px, 22vw, 148px); animation-delay: -8.7s; animation-duration: 12.6s; }
.fireworks-meteors i:nth-child(7) { --meteor-angle: 29deg; --meteor-y: 73vh; top: 59%; width: clamp(94px, 24vw, 158px); animation-delay: -6.1s; animation-duration: 11.8s; }

@keyframes fireworks-meteor {
  0%, 61% {
    opacity: 0;
    transform: translate3d(0, 0, 0) rotate(var(--meteor-angle));
  }
  65% { opacity: 1; }
  88% { opacity: 0.84; }
  100% {
    opacity: 0;
    transform: translate3d(var(--meteor-x), var(--meteor-y), 0) rotate(var(--meteor-angle));
  }
}

@media (prefers-reduced-motion: reduce) {
  .fireworks-meteors i {
    animation-name: fireworks-meteor;
    animation-duration: 22s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
  }
  .fireworks-meteors i:nth-child(1) { animation-delay: -15s; }
  .fireworks-meteors i:nth-child(2) { animation-delay: -6s; }
  .fireworks-meteors i:nth-child(n + 3) { display: none; }
}

/* 浪漫星夜：香槟金、玫瑰粉与淡紫在深蓝里缓慢呼吸 */
.fireworks-nebula {
  opacity: 0.32;
  background:
    radial-gradient(ellipse at 24% 32%, rgba(226, 137, 177, 0.14), transparent 29%),
    radial-gradient(ellipse at 76% 22%, rgba(177, 148, 230, 0.13), transparent 30%),
    radial-gradient(ellipse at 50% 58%, rgba(88, 142, 196, 0.16), transparent 38%),
    linear-gradient(180deg, rgba(1, 10, 27, 0.02), rgba(0, 5, 16, 0.2));
  animation: fireworks-romantic-nebula 17s ease-in-out infinite alternate;
}

@keyframes fireworks-romantic-nebula {
  from { opacity: 0.24; transform: scale(1); }
  to { opacity: 0.38; transform: scale(1.035); }
}

.fireworks-twinkles i {
  width: 2px;
  height: 2px;
  background: rgba(255, 239, 187, 0.94);
  box-shadow: 0 0 5px rgba(255, 235, 178, 0.86), 0 0 13px rgba(244, 199, 111, 0.38);
  animation-duration: 4.6s;
}

.fireworks-twinkles i:nth-child(3n) {
  background: rgba(255, 198, 211, 0.94);
  box-shadow: 0 0 6px rgba(255, 195, 211, 0.78), 0 0 15px rgba(224, 119, 163, 0.34);
}

.fireworks-twinkles i:nth-child(4n) {
  background: rgba(225, 208, 255, 0.95);
  box-shadow: 0 0 6px rgba(218, 197, 255, 0.78), 0 0 16px rgba(151, 121, 213, 0.35);
}

.fireworks-twinkles i:nth-child(5n + 1) {
  width: 3px;
  height: 3px;
}

.fireworks-twinkles i:nth-child(5n + 1)::before,
.fireworks-twinkles i:nth-child(5n + 1)::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 999px;
  background: currentColor;
  transform: translate(-50%, -50%);
  opacity: 0.7;
}

.fireworks-twinkles i:nth-child(5n + 1)::before { width: 1px; height: 9px; }
.fireworks-twinkles i:nth-child(5n + 1)::after { width: 9px; height: 1px; }

.fireworks-twinkles i:nth-child(17) { left: 5%; top: 64%; animation-delay: -1.1s; animation-duration: 5.3s; }
.fireworks-twinkles i:nth-child(18) { left: 18%; top: 78%; animation-delay: -3.7s; animation-duration: 4.9s; }
.fireworks-twinkles i:nth-child(19) { left: 33%; top: 45%; animation-delay: -2.6s; animation-duration: 5.5s; }
.fireworks-twinkles i:nth-child(20) { left: 46%; top: 82%; animation-delay: -0.5s; animation-duration: 4.7s; }
.fireworks-twinkles i:nth-child(21) { left: 61%; top: 43%; animation-delay: -4.1s; animation-duration: 5.4s; }
.fireworks-twinkles i:nth-child(22) { left: 73%; top: 84%; animation-delay: -1.9s; animation-duration: 4.8s; }
.fireworks-twinkles i:nth-child(23) { left: 84%; top: 36%; animation-delay: -3.2s; animation-duration: 5.7s; }
.fireworks-twinkles i:nth-child(24) { left: 95%; top: 76%; animation-delay: -0.7s; animation-duration: 5.1s; }

@keyframes fireworks-quiet-star {
  0%, 100% { opacity: 0.12; transform: scale(0.58) rotate(0deg); }
  45% { opacity: 0.95; transform: scale(1.7) rotate(8deg); }
  64% { opacity: 0.38; transform: scale(0.92) rotate(0deg); }
}

/* 流星采用三种柔光长尾，像星光从玫瑰色云雾里划过 */
.fireworks-meteors i {
  --meteor-soft: rgba(255, 224, 146, 0.16);
  --meteor-core: rgba(255, 244, 207, 0.92);
  --meteor-head: #fffbed;
  --meteor-glow: rgba(255, 218, 130, 0.58);
  background: linear-gradient(90deg, transparent 0%, var(--meteor-soft) 34%, var(--meteor-core) 82%, var(--meteor-head) 100%);
  box-shadow: 9px 0 14px var(--meteor-glow);
  filter: drop-shadow(0 0 5px var(--meteor-glow));
}

.fireworks-meteors i:nth-child(2),
.fireworks-meteors i:nth-child(5) {
  --meteor-soft: rgba(240, 144, 179, 0.12);
  --meteor-core: rgba(255, 199, 213, 0.86);
  --meteor-head: #fff4f5;
  --meteor-glow: rgba(226, 119, 161, 0.52);
}

.fireworks-meteors i:nth-child(4),
.fireworks-meteors i:nth-child(7) {
  --meteor-soft: rgba(182, 151, 235, 0.12);
  --meteor-core: rgba(222, 205, 255, 0.84);
  --meteor-head: #fbf7ff;
  --meteor-glow: rgba(158, 127, 217, 0.5);
}

.fireworks-meteors i::before {
  content: "";
  position: absolute;
  right: -9px;
  top: 50%;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--meteor-glow), transparent 68%);
  transform: translateY(-50%);
  filter: blur(2px);
  opacity: 0.74;
}

.fireworks-meteors i::after {
  background: var(--meteor-head);
  box-shadow: 0 0 6px var(--meteor-head), 0 0 15px var(--meteor-glow);
}

@media (prefers-reduced-motion: reduce) {
  .fireworks-nebula { animation: none; }
  .fireworks-twinkles i { animation-duration: 8s; }
}

/* 十字星独立呼吸闪烁，保持安静而清晰。 */
.fireworks-twinkles i:nth-child(5n + 1) {
  animation-name: fireworks-cross-star;
  animation-duration: 4.8s;
}
@keyframes fireworks-cross-star {
  0%, 100% { opacity: .16; transform: scale(.62) rotate(0deg); filter: brightness(.9); }
  42% { opacity: 1; transform: scale(1.72) rotate(6deg); filter: brightness(1.3); }
  58% { opacity: .42; transform: scale(.92) rotate(0deg); filter: brightness(1); }
}

/* 手机安全区与横屏兼容。 */
.fireworks-intro { min-height: 100dvh; min-height: 100svh; }
.fireworks-actions { bottom: max(6px, env(safe-area-inset-bottom)); }
@media (max-width: 360px) {
  .fireworks-scene-arrow { width: 29px; height: 38px; }
  .fireworks-enter { font-size: 9px; min-height: 27px; }
}
@media (orientation: landscape) and (max-height: 520px) {
  .fireworks-scene { object-position: center 63%; }
  .fireworks-actions { bottom: max(4px, env(safe-area-inset-bottom)); }
  .fireworks-scene-arrow { top: 53%; }
}

/* 宝塔自托管兼容层：仅补齐 PHP 页面状态，不改变原站视觉。 */
[hidden] { display: none !important; }
a { color: inherit; }
.archive-card,
.archive-write,
.editor-back,
.mailbox-back { text-decoration: none; }

body.intro-open { overflow: hidden; }
.fireworks-intro {
  position: fixed;
  inset: 0;
  z-index: 100;
  transition: opacity 430ms ease, transform 480ms cubic-bezier(.22,.72,.2,1);
}
.fireworks-intro.is-leaving {
  opacity: 0;
  transform: scale(1.018);
  pointer-events: none;
}
.mailbox-body #mailboxHome[aria-hidden="true"] { display: none; }
.mailbox-body #mailboxHome[aria-hidden="false"] { display: block; }
.mailbox-home .archive-card[hidden] { display: none !important; }

.presence-strip b,
.presence-strip em {
  font: inherit;
  color: inherit;
}
.presence-strip b { margin-right: 1px; }
.presence-strip em { font-style: normal; }

.text-slide {
  width: min(92vw, 660px);
  max-height: calc(100svh - 154px);
  overflow: auto;
  padding: clamp(28px, 7vw, 54px);
  border: 1px solid rgba(221, 176, 81, .48);
  border-radius: 20px 16px 22px 17px;
  color: #4c382b;
  background: linear-gradient(145deg, #fff2cf, #ead09b);
  box-shadow: 0 24px 60px rgba(0,0,0,.42);
  white-space: pre-wrap;
  font-family: var(--handwriting-font);
  font-size: clamp(16px, 4.2vw, 20px);
  line-height: 2;
}

.empty-state {
  min-height: 100svh;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 12px;
  padding: 28px;
  text-align: center;
  color: #f3d585;
  background: radial-gradient(circle at 50% 25%, #173e63, #061624 62%, #020a11);
}
.empty-state span { font-size: 30px; }
.empty-state h1 { margin: 0; font-family: var(--handwriting-font); font-weight: 500; }
.empty-state p { margin: 0; color: rgba(240,222,177,.68); }
.empty-state a { margin-top: 8px; padding: 8px 15px; border: 1px solid rgba(231,190,92,.55); border-radius: 999px; }

@media (max-width: 700px) {
  .fireworks-scenes .fireworks-scene { object-position: center center; }
}

/* Prevent iOS/WeChat/Android long-press selection without affecting gestures. */
.fireworks-intro,
.fireworks-intro * {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.fireworks-canvas,
.fireworks-scenes,
.fireworks-nebula,
.fireworks-meteors,
.fireworks-twinkles {
  touch-action: none;
}
.fireworks-enter,
.fireworks-scene-arrow {
  touch-action: manipulation;
}

/* v34.9: sparse, quiet sky. Only one or two meteors cross the scene. */
.fireworks-meteors i {
  animation-name: fireworks-meteor-sparse;
  animation-duration: 26s;
  animation-timing-function: cubic-bezier(.2,.65,.28,1);
  opacity: 0;
}
.fireworks-meteors i:nth-child(1) { top: 18%; animation-delay: -8s; }
.fireworks-meteors i:nth-child(2) { top: 42%; animation-delay: -21s; animation-duration: 29s; }
.fireworks-meteors i:nth-child(n + 3) { display: none; }
@keyframes fireworks-meteor-sparse {
  0%, 84% { opacity: 0; transform: translate3d(0,0,0) rotate(var(--meteor-angle)); }
  86% { opacity: .12; }
  88% { opacity: .9; }
  95% { opacity: .62; }
  100% { opacity: 0; transform: translate3d(var(--meteor-x),var(--meteor-y),0) rotate(var(--meteor-angle)); }
}

.fireworks-twinkles i:nth-child(5n + 1) {
  animation-name: fireworks-cross-star-soft;
  animation-duration: 7.8s;
  animation-timing-function: ease-in-out;
}
.fireworks-twinkles i:nth-child(5n + 1)::before,
.fireworks-twinkles i:nth-child(5n + 1)::after { opacity: .34; }
@keyframes fireworks-cross-star-soft {
  0%, 100% { opacity: .12; transform: scale(.84); filter: brightness(.94); }
  46% { opacity: .42; transform: scale(1.06); filter: brightness(1.08); }
  65% { opacity: .22; transform: scale(.94); filter: brightness(1); }
}

/* v45.1 湖畔暮光花园首页：保留复古信封、信件内容与功能。 */
.mailbox-poster-page {
  background:
    radial-gradient(ellipse at 50% 7%, rgba(57, 75, 154, .26), transparent 34%),
    linear-gradient(180deg, #071a3d 0%, #03152f 44%, #020d20 100%);
}
.mailbox-home {
  width: min(100%, 520px);
  background: linear-gradient(180deg, rgba(6, 25, 59, .76), rgba(3, 19, 45, .97) 40%, #020d20 100%);
}
.mailbox-title {
  padding-top: 24px;
  padding-bottom: 24px;
}
.mailbox-title h1 {
  font-size: clamp(38px, 10vw, 52px);
  letter-spacing: .06em;
  color: #f4d78b;
}
.mailbox-title p {
  max-width: 420px;
  margin-inline: auto;
  line-height: 1.7;
  color: rgba(246, 241, 225, .88);
}
.mailbox-hero-art {
  height: clamp(310px, 74vw, 390px);
  aspect-ratio: auto;
}
.mailbox-hero-art img {
  object-position: center 52%;
  filter: saturate(1.02) brightness(.94) contrast(1.02);
}
.mailbox-hero-art::after {
  background: linear-gradient(180deg, rgba(1,8,25,.04), transparent 56%, rgba(3,15,31,.28));
}
.mailbox-home .letter-archive { padding-top: 30px; }
.mailbox-home .archive-card {
  min-height: 132px;
  grid-template-columns: 124px minmax(0, 1fr) 40px;
  gap: 16px;
  padding: 14px;
  border-color: rgba(218,190,124,.30);
  background: linear-gradient(135deg, rgba(9,42,79,.90), rgba(4,25,54,.96));
}
.archive-thumb { width: 124px; height: 96px; border-radius: 8px; }
@media (max-width: 390px) {
  .mailbox-title { padding-top: 18px; }
  .mailbox-title h1 { font-size: 40px; }
  .mailbox-hero-art { height: 310px; }
  .mailbox-home .letter-archive { padding-inline: 14px; }
  .mailbox-home .archive-card { grid-template-columns: 108px minmax(0, 1fr) 34px; gap: 12px; min-height: 118px; padding: 12px; }
  .archive-thumb { width: 108px; height: 84px; }
}

/* v47：四个真实入口，共用一套小王子治愈系底部导航。 */
.starlight-tabbar {
  position: fixed;
  z-index: 120;
  left: 50%;
  bottom: 0;
  width: min(100%, 520px);
  min-height: 70px;
  padding: 7px 10px max(7px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid rgba(227, 193, 111, .22);
  background: rgba(3, 18, 43, .92);
  box-shadow: 0 -12px 35px rgba(0, 7, 20, .36);
  backdrop-filter: blur(18px) saturate(1.1);
  -webkit-backdrop-filter: blur(18px) saturate(1.1);
  transition: opacity .25s ease, transform .25s ease;
}
.intro-open .starlight-tabbar {
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 18px);
}
.starlight-tabbar a {
  min-width: 0;
  min-height: 52px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border-radius: 15px;
  color: rgba(209, 218, 236, .70);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.starlight-tabbar a span {
  height: 25px;
  color: currentColor;
  font-family: Georgia, serif;
  font-size: 23px;
  line-height: 1;
}
.starlight-tabbar a b {
  overflow: hidden;
  max-width: 100%;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .08em;
  white-space: nowrap;
}
.starlight-tabbar a.is-active {
  color: #f1ce78;
  background: linear-gradient(180deg, rgba(237, 196, 101, .10), transparent);
}
.starlight-tabbar a:active { transform: scale(.95); }
.mailbox-poster-page { padding-bottom: max(88px, calc(70px + env(safe-area-inset-bottom))); }
.writer-body .collab-editor,
.writer-body .role-page { padding-bottom: max(98px, calc(78px + env(safe-area-inset-bottom))); }

/* 回忆、我们的：不是占位按钮，而是可直接使用的独立页面。 */
.starlight-subpage-body {
  min-height: 100svh;
  overflow-x: hidden;
  overflow-y: auto;
  color: #f8df9d;
  background:
    radial-gradient(circle at 50% 0%, rgba(31, 82, 129, .48), transparent 36%),
    radial-gradient(circle at 80% 28%, rgba(112, 68, 133, .16), transparent 30%),
    linear-gradient(180deg, #081f3f, #03152f 55%, #020d20);
}
.starlight-subpage-body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .58;
  background-image:
    radial-gradient(circle, rgba(255, 225, 137, .9) 0 1px, transparent 1.6px),
    radial-gradient(circle, rgba(208, 224, 255, .72) 0 1px, transparent 1.5px);
  background-size: 151px 143px, 229px 211px;
  background-position: 15px 23px, 88px 67px;
}
.starlight-subpage {
  position: relative;
  z-index: 1;
  width: min(100%, 520px);
  min-height: 100svh;
  margin: 0 auto;
  padding: max(18px, env(safe-area-inset-top)) 18px max(104px, calc(82px + env(safe-area-inset-bottom)));
}
.subpage-header {
  position: relative;
  padding: 43px 12px 28px;
  text-align: center;
}
.subpage-header > a {
  position: absolute;
  left: 0;
  top: 12px;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(236, 201, 119, .44);
  border-radius: 50%;
  color: #edc872;
  font-size: 29px;
  text-decoration: none;
}
.subpage-header p { margin: 0 0 9px; color: rgba(232, 199, 115, .68); font-family: Georgia, serif; font-size: 9px; letter-spacing: .22em; }
.subpage-header h1 { margin: 0 0 12px; font-family: "Songti SC", STSong, serif; font-size: clamp(34px, 9vw, 46px); font-weight: 400; letter-spacing: .08em; }
.subpage-header > span { color: rgba(232, 224, 202, .72); font-size: 12px; line-height: 1.8; }
.memory-timeline { display: grid; gap: 23px; }
.memory-month h2 { display: flex; align-items: center; gap: 9px; margin: 0 0 11px; color: #e8c569; font-size: 14px; font-weight: 500; }
.memory-month h2 span { width: 9px; height: 9px; border: 2px solid #e8c569; border-radius: 50%; box-shadow: 0 0 12px rgba(232, 197, 105, .6); }
.memory-month > div { display: grid; gap: 11px; margin-left: 4px; padding-left: 15px; border-left: 1px solid rgba(232, 197, 105, .25); }
.memory-letter {
  min-height: 102px;
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 12px;
  padding: 11px;
  border: 1px solid rgba(232, 197, 105, .28);
  border-radius: 19px;
  color: inherit;
  text-decoration: none;
  background: linear-gradient(135deg, rgba(10, 45, 82, .92), rgba(4, 25, 54, .96));
  box-shadow: 0 13px 28px rgba(0, 8, 22, .22);
}
.memory-letter img { width: 104px; height: 80px; object-fit: cover; border-radius: 9px; }
.memory-letter > span { min-width: 0; display: grid; gap: 4px; }
.memory-letter time { color: #dcb85f; font: 10px Georgia, serif; letter-spacing: .08em; }
.memory-letter strong { overflow: hidden; color: #f6dc97; font-size: 17px; text-overflow: ellipsis; white-space: nowrap; }
.memory-letter small { overflow: hidden; color: rgba(235, 220, 182, .63); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.memory-letter > b { color: #e8bd5c; font-size: 28px; font-weight: 300; }
.memory-empty { margin-top: 48px; padding: 44px 24px; border: 1px solid rgba(232,197,105,.28); border-radius: 25px; text-align: center; background: rgba(8,39,74,.74); }
.memory-empty > span { font-size: 27px; }
.memory-empty h2 { font-family: "Songti SC", serif; font-weight: 400; }
.memory-empty p { color: rgba(235,226,201,.7); }
.memory-empty a { display: inline-block; margin-top: 8px; padding: 10px 22px; border-radius: 999px; color: #f7d886; text-decoration: none; background: #742834; }
.ours-portrait { overflow: hidden; border: 1px solid rgba(232,197,105,.3); border-radius: 27px; background: #08284b; box-shadow: 0 22px 42px rgba(0,8,22,.32); }
.ours-portrait img { display: block; width: 100%; aspect-ratio: 1.25; object-fit: cover; }
.ours-portrait > div { display: flex; align-items: center; justify-content: center; gap: 18px; padding: 15px; }
.ours-portrait span { display: grid; place-items: center; width: 39px; height: 39px; border: 1px solid rgba(232,197,105,.56); border-radius: 50%; color: #f4d585; }
.ours-portrait i { color: #e8c569; font-style: normal; }
.ours-message { position: relative; margin: 22px 5px 16px; padding: 28px 24px 23px; border: 1px solid rgba(202,150,81,.28); border-radius: 24px; color: #4a3527; background: linear-gradient(145deg, #fbefd1, #e5c891); box-shadow: 0 15px 35px rgba(0,7,18,.3); }
.ours-message p { margin: 0; font-family: var(--handwriting-font); font-size: 17px; line-height: 2; letter-spacing: .06em; }
.ours-seal { position: absolute; right: 18px; top: -17px; width: 39px; height: 39px; display: grid; place-items: center; border-radius: 50%; color: #f4cc79; background: radial-gradient(circle at 35% 28%, #b64d46, #711d2a); }
.ours-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.ours-stats div { min-height: 82px; display: grid; place-content: center; gap: 4px; padding: 10px; border: 1px solid rgba(232,197,105,.25); border-radius: 20px; text-align: center; background: rgba(7,37,70,.82); }
.ours-stats strong { color: #f2d17c; font: 19px Georgia, serif; }
.ours-stats span { color: rgba(233,222,191,.62); font-size: 10px; }
.ours-write { width: fit-content; max-width: 100%; min-height: 45px; margin: 22px auto 0; padding: 0 22px; display: flex; align-items: center; justify-content: center; gap: 13px; border: 1px solid rgba(238,196,103,.62); border-radius: 999px; color: #f7d982; text-decoration: none; background: linear-gradient(135deg, rgba(145,48,55,.92), rgba(92,24,39,.94)); }

@media (max-width: 390px) {
  .starlight-tabbar { min-height: 66px; padding-inline: 5px; }
  .starlight-tabbar a b { font-size: 10px; }
  .memory-letter { grid-template-columns: 88px minmax(0, 1fr) 16px; gap: 9px; }
  .memory-letter img { width: 88px; height: 68px; }
  .memory-letter strong { font-size: 15px; }
  .starlight-subpage { padding-inline: 13px; }
}

/* v48 final cascade: keep the healing redesign after all legacy compatibility rules. */
.mailbox-title { padding: max(27px, calc(env(safe-area-inset-top) + 16px)) 54px 20px; background: linear-gradient(180deg, rgba(8,35,67,.97), rgba(6,29,57,.91)); }
.mailbox-title h1 { color: #f6d887; font-family: "Songti SC",STSong,"Noto Serif SC",serif; font-size: clamp(34px,10vw,48px); font-weight: 400; letter-spacing: .11em; }
.mailbox-title p { max-width: 390px; margin-inline: auto; color: rgba(244,234,209,.78); font-size: 12px; letter-spacing: .09em; }
.mailbox-hero-art { height: clamp(300px,68vw,390px); border-block: 1px solid rgba(236,202,119,.14); }
.mailbox-hero-art img { filter: saturate(.94) contrast(1.03) brightness(.94); }
.mailbox-count { width: fit-content; min-width: min(76%,340px); min-height: 50px; margin: -25px auto 0; padding: 0 24px; position: relative; z-index: 3; border: 1px solid rgba(238,204,121,.58); border-radius: 999px; color: #f4d580; background: rgba(4,24,49,.88); box-shadow: 0 12px 28px rgba(0,8,22,.32); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.mailbox-home .letter-archive { padding: 35px 22px 30px; }
.archive-filters { gap: 10px; margin-bottom: 23px; }
.archive-filters button { min-height: 43px; padding: 0 22px; border-color: rgba(224,195,120,.34); color: rgba(238,216,161,.75); background: rgba(7,32,61,.46); }
.archive-filters button.active { border-color: rgba(241,208,128,.72); color: #ffe29a; background: linear-gradient(135deg,rgba(29,76,116,.82),rgba(8,38,72,.86)); }
.mailbox-home .archive-card { min-height: 128px; grid-template-columns: 118px minmax(0,1fr) 36px; gap: 15px; margin-bottom: 14px; padding: 13px; border: 1px solid rgba(236,207,137,.28); border-radius: 24px; background: linear-gradient(135deg,rgba(9,43,78,.79),rgba(4,24,50,.86)); box-shadow: 0 18px 38px rgba(0,8,22,.24); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.mailbox-home .archive-thumb { width: 118px; height: 92px; padding: 3px; border: 1px solid rgba(235,204,129,.42); border-radius: 14px; background: rgba(255,241,202,.05); box-shadow: 0 9px 24px rgba(0,6,17,.28); }
.mailbox-home .archive-thumb > img { border-radius: 10px; }
.archive-copy time { color: #dcb765; font-size: 10px; letter-spacing: .13em; }
.archive-copy strong { color: #f5d789; font-family: "Songti SC",STSong,serif; font-size: clamp(18px,5vw,23px); font-weight: 400; }
.archive-copy em { color: rgba(231,220,191,.58); }
.archive-arrow { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid rgba(237,198,106,.45); border-radius: 50%; color: #f0c96b; background: rgba(7,28,55,.46); }
.starlight-tabbar { width: min(calc(100% - 18px),502px); bottom: max(8px,env(safe-area-inset-bottom)); min-height: 72px; padding: 7px 8px; border: 1px solid rgba(223,195,128,.22); border-radius: 25px; background: linear-gradient(180deg,rgba(7,30,58,.78),rgba(3,18,39,.90)); box-shadow: 0 16px 42px rgba(0,6,18,.52); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); }
.starlight-tabbar a { min-height: 56px; gap: 4px; border-radius: 18px; }
.starlight-tabbar a span.tabbar-icon { width: 27px; height: 27px; display: grid; place-items: center; font-size: 0; }
.starlight-tabbar .tabbar-icon svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.55; stroke-linecap: round; stroke-linejoin: round; }
.starlight-tabbar a.is-active { color: #f6d580; background: radial-gradient(circle at 50% 20%,rgba(240,199,104,.14),transparent 70%); }
.mailbox-poster-page { padding-bottom: max(104px,calc(88px + env(safe-area-inset-bottom))); }
@media (max-width:390px) {
  .mailbox-title { padding-inline: 42px; padding-top: max(22px,calc(env(safe-area-inset-top) + 12px)); }
  .mailbox-title h1 { font-size: 33px; }
  .mailbox-title p { font-size: 10px; }
  .mailbox-hero-art { height: 285px; }
  .mailbox-home .letter-archive { padding-inline: 13px; }
  .mailbox-home .archive-card { min-height: 112px; grid-template-columns: 94px minmax(0,1fr) 30px; gap: 10px; padding: 10px; border-radius: 20px; }
  .mailbox-home .archive-thumb { width: 94px; height: 73px; }
  .archive-copy strong { font-size: 17px; }
  .archive-arrow { width: 29px; height: 29px; }
  .starlight-tabbar { width: calc(100% - 14px); min-height: 67px; border-radius: 22px; }
  .starlight-tabbar a { min-height: 51px; }
}

/* v49 — 星光夜花园：重做首页可见结构，保留信件数据与复古信封。 */
.mailbox-poster-page {
  background:
    radial-gradient(circle at 50% 1%, rgba(68, 91, 170, .28), transparent 25%),
    linear-gradient(180deg, #061936 0%, #03142e 52%, #020b1c 100%);
}
.mailbox-home {
  width: min(100%, 560px);
  overflow: hidden;
  background: linear-gradient(180deg, #061936, #03142e 54%, #020b1c);
  box-shadow: 0 0 60px rgba(0, 5, 20, .5);
}
.mailbox-hero-v49 { position: relative; }
.mailbox-hero-stage {
  position: relative;
  height: clamp(650px, 138vw, 790px);
  overflow: hidden;
  border-bottom: 1px solid rgba(234, 202, 126, .22);
  background: #06162f;
}
.mailbox-hero-v49 .mailbox-hero-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.mailbox-hero-v49 .mailbox-hero-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(.9) contrast(1.04) brightness(.84);
  transform: scale(1.015);
}
.mailbox-hero-v49 .mailbox-hero-art::before,
.mailbox-hero-v49 .mailbox-hero-art::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
}
.mailbox-hero-v49 .mailbox-hero-art::before {
  background: linear-gradient(180deg, rgba(1,9,27,.18), rgba(2,11,27,.02) 42%, rgba(2,11,27,.2) 100%);
}
.mailbox-hero-v49 .mailbox-hero-art::after {
  opacity: .38;
  background-image: radial-gradient(circle, rgba(255,225,144,.92) 0 1px, transparent 1.7px);
  background-size: 83px 91px;
  animation: v49-stars 5.8s ease-in-out infinite alternate;
}
.mailbox-hero-v49 .mailbox-title {
  position: absolute;
  z-index: 3;
  top: max(34px, calc(env(safe-area-inset-top) + 20px));
  left: 24px;
  right: 24px;
  padding: 30px 10px 25px;
  color: #fae2a0;
  text-align: center;
  background: radial-gradient(ellipse at center, rgba(4,20,49,.57), transparent 69%);
}
.mailbox-kicker {
  display: block;
  margin-bottom: 12px;
  color: rgba(226, 194, 117, .76);
  font: 9px/1.2 Georgia, serif;
  letter-spacing: .26em;
}
.mailbox-hero-v49 .mailbox-title h1 {
  margin: 0;
  color: #f9dda0;
  font-family: "Songti SC", STSong, "Noto Serif SC", serif;
  font-size: clamp(43px, 12vw, 61px);
  font-weight: 400;
  letter-spacing: .1em;
  text-shadow: 0 5px 22px rgba(0,5,20,.68);
}
.mailbox-hero-v49 .title-rose {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  margin: 8px auto 7px;
  color: #e5bd65;
  font-size: 15px;
}
.mailbox-hero-v49 .title-rose::before,
.mailbox-hero-v49 .title-rose::after {
  content: "";
  width: 76px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(235,199,111,.7));
}
.mailbox-hero-v49 .title-rose::after { transform: scaleX(-1); }
.mailbox-hero-v49 .mailbox-title p {
  max-width: 390px;
  margin: 0 auto;
  color: rgba(247, 240, 220, .83);
  font-size: 12px;
  line-height: 1.8;
  letter-spacing: .08em;
  text-shadow: 0 3px 10px rgba(0,6,20,.75);
}
.hero-comet {
  position: absolute;
  z-index: 2;
  top: 37%;
  right: 13%;
  width: 78px;
  height: 1px;
  opacity: .72;
  transform: rotate(-24deg);
  background: linear-gradient(90deg, transparent, rgba(255,226,147,.7), #fff4c8);
  box-shadow: 0 0 8px rgba(255,224,135,.55);
}
.mailbox-hero-v49 .mailbox-count {
  position: relative;
  z-index: 5;
  width: fit-content;
  min-width: min(78%, 365px);
  min-height: 56px;
  margin: -28px auto 0;
  padding: 0 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  border: 1px solid rgba(242,207,120,.68);
  border-radius: 999px;
  color: #f6d57e;
  background: linear-gradient(135deg, rgba(6,33,66,.91), rgba(3,19,43,.95));
  box-shadow: 0 15px 35px rgba(0,7,21,.45), inset 0 1px rgba(255,240,188,.08);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.mailbox-count .count-envelope { font-size: 19px; }
.mailbox-count b { color: #ffe69d; font: 22px Georgia, serif; }
.mailbox-count i { color: #e9bc58; font-style: normal; font-size: 10px; }
.mailbox-home .letter-archive {
  padding: 50px 24px 46px;
  background:
    radial-gradient(circle at 12% 10%, rgba(49,92,139,.18), transparent 28%),
    linear-gradient(180deg, rgba(3,20,46,.92), #020c20);
}
.archive-filters {
  display: flex;
  gap: 12px;
  margin-bottom: 27px;
}
.archive-filters button {
  min-height: 46px;
  padding: 0 25px;
  border: 1px solid rgba(226,192,110,.42);
  border-radius: 999px;
  color: rgba(237,216,164,.77);
  background: rgba(7,31,61,.52);
}
.archive-filters button.active {
  color: #ffe49a;
  border-color: rgba(243,210,127,.8);
  background: linear-gradient(135deg, rgba(29,77,118,.85), rgba(6,34,68,.9));
  box-shadow: inset 0 1px rgba(255,242,194,.1), 0 8px 24px rgba(0,8,24,.22);
}
.mailbox-home .archive-card {
  position: relative;
  min-height: 152px;
  grid-template-columns: 142px minmax(0,1fr) 42px;
  gap: 18px;
  margin-bottom: 17px;
  padding: 16px;
  border: 1px solid rgba(229,200,132,.3);
  border-radius: 27px;
  background:
    radial-gradient(circle at 100% 0, rgba(50,91,133,.18), transparent 40%),
    linear-gradient(135deg, rgba(9,43,79,.86), rgba(3,22,49,.94));
  box-shadow: 0 20px 42px rgba(0,7,21,.33), inset 0 1px rgba(255,240,191,.05);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.mailbox-home .archive-card::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: -9px;
  height: 1px;
  opacity: .3;
  background: linear-gradient(90deg, transparent, #d5af5d, transparent);
}
.mailbox-home .archive-thumb {
  width: 142px;
  height: 110px;
  padding: 4px;
  border: 1px solid rgba(241,208,132,.5);
  border-radius: 16px;
  background: rgba(255,241,202,.06);
  box-shadow: 0 10px 28px rgba(0,5,16,.4);
}
.archive-copy { gap: 7px; }
.archive-copy time { color: #dcba67; font: 10px Georgia, serif; letter-spacing: .18em; }
.archive-copy strong { color: #f8d889; font-family: "Songti SC",STSong,serif; font-size: clamp(20px,5.2vw,26px); font-weight: 400; line-height: 1.25; }
.archive-copy em { color: rgba(232,220,190,.58); font-size: 11px; }
.archive-arrow {
  width: 39px;
  height: 39px;
  border-color: rgba(240,201,108,.58);
  color: #f4ca65;
  background: rgba(4,23,49,.55);
  font-size: 21px;
}
.starlight-tabbar {
  width: min(calc(100% - 22px), 528px);
  min-height: 76px;
  padding: 8px 9px max(8px, env(safe-area-inset-bottom));
  border: 1px solid rgba(227,198,126,.27);
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(8,34,65,.79), rgba(2,16,37,.94));
  box-shadow: 0 20px 50px rgba(0,5,18,.58), inset 0 1px rgba(255,239,184,.07);
}
.starlight-tabbar a { min-height: 58px; border-radius: 20px; }
.starlight-tabbar a b { font-size: 11px; letter-spacing: .12em; }
@keyframes v49-stars { from { opacity: .2; } to { opacity: .52; } }

@media (max-width: 430px) {
  .mailbox-hero-stage { height: clamp(590px, 154vw, 690px); }
  .mailbox-hero-v49 .mailbox-title { top: max(20px, calc(env(safe-area-inset-top) + 8px)); left: 12px; right: 12px; }
  .mailbox-hero-v49 .mailbox-title h1 { font-size: clamp(39px, 11.3vw, 49px); }
  .mailbox-kicker { font-size: 8px; }
  .mailbox-hero-v49 .mailbox-title p { font-size: 10px; }
  .mailbox-hero-v49 .mailbox-count { min-height: 51px; padding-inline: 18px; font-size: 13px; }
  .mailbox-home .letter-archive { padding: 43px 14px 38px; }
  .archive-filters button { min-height: 42px; padding: 0 19px; font-size: 12px; }
  .mailbox-home .archive-card { min-height: 125px; grid-template-columns: 108px minmax(0,1fr) 33px; gap: 11px; padding: 12px; border-radius: 22px; }
  .mailbox-home .archive-thumb { width: 108px; height: 84px; border-radius: 13px; }
  .archive-copy { gap: 5px; }
  .archive-copy strong { font-size: 18px; }
  .archive-copy em { font-size: 9px; }
  .archive-arrow { width: 31px; height: 31px; font-size: 17px; }
}

@media (max-width: 350px) {
  .mailbox-hero-stage { height: 550px; }
  .mailbox-home .archive-card { grid-template-columns: 88px minmax(0,1fr) 28px; }
  .mailbox-home .archive-thumb { width: 88px; height: 69px; }
  .archive-copy strong { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .mailbox-hero-v49 .mailbox-hero-art::after { animation: none; }
}

/* v50 — 轻盈星光徽章与精致底部导航。 */
.mailbox-hero-v49 .mailbox-count {
  min-width: 0;
  min-height: 42px;
  margin-top: -21px;
  padding: 0 16px 0 10px;
  gap: 9px;
  border-color: rgba(233, 200, 121, .42);
  border-radius: 16px;
  color: rgba(249, 226, 164, .88);
  font-size: 12px;
  letter-spacing: .08em;
  background: linear-gradient(135deg, rgba(7, 32, 64, .72), rgba(3, 20, 44, .82));
  box-shadow: 0 9px 25px rgba(0, 7, 20, .3), inset 0 1px rgba(255, 241, 193, .07);
}
.mailbox-count .count-envelope {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(233, 199, 116, .28);
  border-radius: 11px;
  color: #eccb76;
  background: radial-gradient(circle at 35% 25%, rgba(245, 210, 126, .13), rgba(5, 26, 54, .42));
}
.mailbox-count .count-envelope svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.mailbox-count b {
  margin-inline: 2px;
  color: #ffe28d;
  font-size: 17px;
  font-weight: 400;
}
.mailbox-count i {
  margin-left: 1px;
  color: rgba(232, 189, 86, .78);
  font-size: 8px;
}

.starlight-tabbar {
  width: min(calc(100% - 32px), 440px);
  min-height: 62px;
  bottom: max(9px, env(safe-area-inset-bottom));
  padding: 5px 7px;
  border-color: rgba(220, 193, 132, .18);
  border-radius: 23px;
  background: linear-gradient(180deg, rgba(7, 31, 61, .72), rgba(2, 16, 37, .88));
  box-shadow: 0 14px 38px rgba(0, 5, 18, .48), inset 0 1px rgba(255, 240, 190, .05);
  backdrop-filter: blur(24px) saturate(1.08);
  -webkit-backdrop-filter: blur(24px) saturate(1.08);
}
.starlight-tabbar a {
  position: relative;
  min-height: 50px;
  gap: 1px;
  border-radius: 16px;
  color: rgba(210, 219, 237, .62);
  transition: color .22s ease, background .22s ease, transform .18s ease;
}
.starlight-tabbar a span.tabbar-icon {
  position: relative;
  width: 31px;
  height: 31px;
  display: grid;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 50%;
  background: transparent;
}
.starlight-tabbar .tabbar-icon svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.starlight-tabbar .tabbar-icon .icon-spark {
  stroke-width: 1.05;
  opacity: .72;
}
.starlight-tabbar a b {
  font-size: 9px;
  font-weight: 400;
  letter-spacing: .08em;
}
.starlight-tabbar a.is-active {
  color: #f4d27d;
  background: radial-gradient(ellipse at 50% 50%, rgba(237, 197, 104, .08), transparent 70%);
}
.starlight-tabbar a.is-active .tabbar-icon {
  border-color: rgba(237, 201, 113, .27);
  background: radial-gradient(circle at 35% 25%, rgba(245, 215, 138, .16), rgba(18, 52, 83, .14));
  box-shadow: 0 0 20px rgba(231, 188, 83, .09), inset 0 1px rgba(255, 241, 193, .08);
}
.starlight-tabbar a.is-active .tabbar-icon::after {
  content: "";
  position: absolute;
  bottom: -6px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #ecca70;
  box-shadow: 0 0 8px rgba(238, 198, 100, .65);
}
.mailbox-poster-page {
  padding-bottom: max(88px, calc(74px + env(safe-area-inset-bottom)));
}

@media (max-width: 390px) {
  .mailbox-hero-v49 .mailbox-count {
    min-height: 40px;
    margin-top: -20px;
    padding-right: 13px;
    font-size: 11px;
  }
  .mailbox-count .count-envelope { width: 28px; height: 28px; }
  .mailbox-count .count-envelope svg { width: 19px; height: 19px; }
  .mailbox-count b { font-size: 16px; }
  .starlight-tabbar {
    width: calc(100% - 26px);
    min-height: 59px;
    padding: 4px 5px;
    border-radius: 21px;
  }
  .starlight-tabbar a { min-height: 49px; }
  .starlight-tabbar a span.tabbar-icon { width: 29px; height: 29px; }
  .starlight-tabbar .tabbar-icon svg { width: 21px; height: 21px; }
  .starlight-tabbar a b { font-size: 8.5px; }
}

/* v53 final overrides must remain last so old mobile rules cannot override them. */
.mailbox-hero-v49,.mailbox-hero-v49 .mailbox-hero-stage,.mailbox-hero-v49 .mailbox-title{border-top:0!important;border-bottom:0!important;box-shadow:none!important}
.mailbox-hero-v49 .mailbox-count{min-width:0!important;width:max-content!important;max-width:calc(100% - 42px)!important;min-height:34px!important;margin-top:-17px!important;padding:3px 11px 3px 5px!important;gap:6px!important;border-radius:999px!important;font-size:10px!important;background:rgba(5,25,49,.72)!important;box-shadow:0 8px 20px rgba(0,8,22,.2)!important}
.mailbox-count .count-envelope{width:25px!important;height:25px!important}.mailbox-count .count-envelope svg{width:17px!important;height:17px!important}.mailbox-count b{font-size:15px!important}.mailbox-count i{font-size:6px!important}

/* v54: remove every legacy hero rail and make the saved-count badge truly compact. */
.mailbox-hero-v49,
.mailbox-hero-v49 .mailbox-hero-stage,
.mailbox-hero-v49 .mailbox-hero-art,
.mailbox-hero-v49 .mailbox-title,
.mailbox-hero-v49 .mailbox-count {
  border-top: 0 !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}
.mailbox-hero-v49::before,
.mailbox-hero-v49::after,
.mailbox-hero-v49 .mailbox-hero-stage::before,
.mailbox-hero-v49 .mailbox-hero-stage::after,
.mailbox-hero-v49 .mailbox-hero-art::before { display: none !important; content: none !important; }
.mailbox-hero-v49 .mailbox-count {
  width: fit-content !important;
  max-width: calc(100% - 56px) !important;
  min-width: 0 !important;
  min-height: 29px !important;
  margin-top: -14px !important;
  padding: 2px 9px 2px 4px !important;
  gap: 4px !important;
  border: 1px solid rgba(233,200,121,.34) !important;
  border-radius: 999px !important;
  font-size: 9px !important;
  letter-spacing: .055em !important;
  background: rgba(4,22,43,.56) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}
.mailbox-hero-v49 .mailbox-count .count-envelope { width: 21px !important; height: 21px !important; border-radius: 8px !important; }
.mailbox-hero-v49 .mailbox-count .count-envelope svg { width: 14px !important; height: 14px !important; }
.mailbox-hero-v49 .mailbox-count span { margin: 0 3px !important; }
.mailbox-hero-v49 .mailbox-count b { font-size: 13px !important; }
.mailbox-hero-v49 .mailbox-count i { font-size: 5px !important; }

/* v55: remove legacy padding rails and reduce the count capsule again. */
.mailbox-home .mailbox-hero.mailbox-hero-v49 {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border: 0 !important;
  background: transparent !important;
}
.mailbox-hero-v49 .mailbox-hero-stage {
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
}
.mailbox-hero-v49 .mailbox-count {
  min-height: 26px !important;
  margin-top: -12px !important;
  padding: 1px 8px 1px 3px !important;
  gap: 3px !important;
  font-size: 8.5px !important;
}
.mailbox-hero-v49 .mailbox-count .count-envelope {
  width: 19px !important;
  height: 19px !important;
  border: 0 !important;
  background: transparent !important;
}
.mailbox-hero-v49 .mailbox-count .count-envelope svg { width: 13px !important; height: 13px !important; }
.mailbox-hero-v49 .mailbox-count b { font-size: 12px !important; }

/* v62 — 保留 v61 烟花/水母动效，仅刷新信箱和写信界面。 */
.mailbox-home .mailbox-hero,
.mailbox-home .mailbox-hero-stage,
.mailbox-home .mailbox-hero-art,
.mailbox-home .letter-archive {
  border-top: 0 !important;
  border-bottom: 0 !important;
  border-block: 0 !important;
  outline: 0 !important;
}
.mailbox-home .mailbox-hero::before,
.mailbox-home .mailbox-hero::after,
.mailbox-home .mailbox-hero-stage::before,
.mailbox-home .mailbox-hero-stage::after {
  content: none !important;
  display: none !important;
}

.writer-body .role-card {
  border: 1px solid rgba(229,197,124,.25);
  border-radius: 28px;
  background: linear-gradient(150deg,rgba(8,37,68,.88),rgba(3,19,40,.94));
  box-shadow: 0 24px 60px rgba(0,7,22,.38), inset 0 1px rgba(255,239,188,.07);
}
.writer-body .role-card > p:not(.role-eyebrow) { color: rgba(225,221,205,.7); }
.writer-body .role-actions button { border-radius: 20px; }
.writer-body .editor-header > div > p,
.writer-body .section-heading small,
.writer-body .stationery-option small,
.writer-body .editor-footnote { display: none !important; }
.writer-body .stationery-panel {
  border: 1px solid rgba(226,195,121,.2);
  border-radius: 28px;
  background: linear-gradient(160deg,rgba(8,38,70,.68),rgba(3,20,42,.8));
  box-shadow: 0 22px 55px rgba(0,7,22,.25), inset 0 1px rgba(255,239,185,.05);
}
.writer-body .section-heading h2 {
  color: #f4d58b;
  font-family: "LXGW WenKai","Kaiti SC",KaiTi,serif;
  font-weight: 500;
  letter-spacing: .12em;
}
.writer-body .stationery-grid { gap: 16px 14px; }
.writer-body .stationery-option {
  padding-bottom: 10px;
  border: 1px solid transparent;
  border-radius: 22px;
  background: transparent;
  box-shadow: none;
}
.writer-body .stationery-option .paper-swatch {
  border: 1px solid rgba(235,204,132,.36);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 12px 28px rgba(0,8,24,.25);
}
.writer-body .stationery-option strong {
  color: rgba(246,218,151,.9);
  font-family: "LXGW WenKai","Kaiti SC",KaiTi,serif;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: .08em;
}
.writer-body .stationery-option.selected {
  border-color: rgba(234,195,104,.44);
  background: radial-gradient(circle at 50% 32%,rgba(239,199,105,.1),transparent 72%);
}
.writer-body .stationery-seal {
  width: 31px;
  height: 31px;
  border: 1px solid rgba(255,224,146,.72);
  background: radial-gradient(circle at 36% 28%,#b94c46,#6d1824 72%);
  box-shadow: 0 5px 14px rgba(52,4,13,.35);
}
.writer-body .shared-paper {
  border-radius: 26px;
  box-shadow: 0 30px 70px rgba(0,7,20,.35), inset 0 0 0 1px rgba(115,75,33,.12);
}
.writer-body .paper-address em b,
.writer-body .paper-divider span,
.writer-body .author-separator span { display: none !important; }
.writer-body .paper-divider,
.writer-body .author-separator { opacity: .42; }
.writer-body .paper-tools button { display: none !important; }
.writer-body .paper-tools {
  justify-content: flex-end;
  border: 0;
  background: transparent;
}
.writer-body .letter-title-input,
.writer-body textarea,
.writer-body .paper-signature,
.writer-body .paper-address {
  font-family: "LXGW WenKai","Kaiti SC",KaiTi,serif !important;
}
.writer-body .sync-button {
  border-radius: 22px;
  border: 1px solid rgba(238,205,126,.46);
  background: linear-gradient(140deg,#8e242d,#59121d);
  box-shadow: 0 16px 34px rgba(40,3,12,.3), inset 0 1px rgba(255,231,169,.18);
}
.writer-body .sync-button .save-envelope {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(250,222,150,.35);
  border-radius: 50%;
}
.writer-body .sync-button .save-envelope svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: #f4d58b;
  stroke-width: 1.35;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.writer-body .publish-button { border-radius: 22px; }

@media (max-width: 430px) {
  .writer-body .stationery-panel { border-radius: 22px; }
  .writer-body .stationery-grid { gap: 12px 10px; }
  .writer-body .stationery-option { border-radius: 18px; }
  .writer-body .stationery-option .paper-swatch { border-radius: 15px; }
  .writer-body .stationery-option strong { font-size: 12px; }
  .writer-body .shared-paper { border-radius: 22px; }
}

/* v63 final cascade: must stay last so legacy mobile rules cannot restore the old controls. */
.fireworks-intro .fireworks-actions,.fireworks-intro.is-midnight .fireworks-actions{position:absolute!important;z-index:30!important;top:max(16px,env(safe-area-inset-top))!important;right:max(16px,env(safe-area-inset-right))!important;bottom:auto!important;left:auto!important;width:auto!important;pointer-events:none!important}
.fireworks-intro .fireworks-enter,.fireworks-intro.is-midnight .fireworks-enter{pointer-events:auto!important;display:grid!important;place-items:center!important;width:48px!important;height:48px!important;min-width:48px!important;min-height:48px!important;padding:0!important;border:1px solid rgba(247,218,151,.58)!important;border-radius:50%!important;background:rgba(3,22,48,.34)!important;color:#f5d991!important;font-size:0!important;line-height:0!important;-webkit-backdrop-filter:blur(9px)!important;backdrop-filter:blur(9px)!important;box-shadow:0 10px 28px rgba(0,8,25,.28),inset 0 0 16px rgba(241,202,116,.08)!important}
.fireworks-intro .fireworks-enter:before,.fireworks-intro .fireworks-enter:after{content:none!important}
.fireworks-intro .fireworks-enter svg{display:block!important;width:26px!important;height:26px!important;fill:none!important;stroke:currentColor!important;stroke-width:1.4!important;stroke-linecap:round!important;stroke-linejoin:round!important}
.writer-body .editor-header>div>p{display:block!important}
.writer-body .presence-strip{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip-path:inset(50%)!important}
.writer-body .stationery-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
.writer-body .stationery-option .paper-swatch{aspect-ratio:1.42!important;border-radius:5px!important;clip-path:polygon(2% 3%,98% 1%,100% 96%,97% 99%,2% 98%,0 4%)!important}
.writer-body .stationery-option strong{font-family:"LXGW WenKai","Kaiti SC",KaiTi,serif!important;color:#edc879!important}
.writer-body .shared-paper{position:relative!important;border-radius:8px!important;clip-path:polygon(1% 1%,99% 0,100% 98%,98% 100%,1% 99%,0 2%)!important;background-color:#f0dfba!important;box-shadow:0 28px 65px rgba(0,4,15,.42),inset 0 0 46px rgba(115,73,30,.13)!important}
.writer-body .paper-postmark{display:flex!important}
.writer-body .editor-actions{justify-content:center!important}
@media(max-width:600px){.fireworks-intro .fireworks-actions,.fireworks-intro.is-midnight .fireworks-actions{top:max(12px,env(safe-area-inset-top))!important;right:max(12px,env(safe-area-inset-right))!important}.fireworks-intro .fireworks-enter,.fireworks-intro.is-midnight .fireworks-enter{width:43px!important;height:43px!important;min-width:43px!important;min-height:43px!important}.writer-body .shared-paper{margin-inline:14px!important;padding:48px 24px 34px!important}}

/* v64 — mobile-safe scene framing and fully component-built writing desk. */
.fireworks-intro {
  height: 100dvh !important;
  min-height: 100svh !important;
  overflow: hidden !important;
}
.fireworks-scenes { inset: 0 !important; overflow: hidden !important; }
.fireworks-scenes .fireworks-scene {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: 50% 76% !important;
  transform: translateY(-3.2svh) scale(1.065) !important;
  transform-origin: 50% 72% !important;
}
.fireworks-intro.is-midnight .fireworks-scenes .fireworks-scene {
  object-position: 50% 82% !important;
  transform: translateY(-2.2svh) scale(1.05) !important;
}
.fireworks-canvas { inset: 0 !important; width: 100% !important; height: 100% !important; }

.writer-body {
  color: #efd292;
  background:
    radial-gradient(circle at 18% 7%, rgba(104,135,190,.16), transparent 25rem),
    radial-gradient(circle at 85% 24%, rgba(72,83,150,.12), transparent 28rem),
    linear-gradient(180deg,#07182e 0%,#031226 58%,#020d1c 100%) !important;
}
.writer-body::before {
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.38;
  background-image:
    radial-gradient(circle,rgba(255,224,148,.9) 0 1px,transparent 1.4px),
    radial-gradient(circle,rgba(177,205,255,.75) 0 1px,transparent 1.5px);
  background-size:79px 83px,127px 139px;
  background-position:12px 28px,44px 67px;
}
.writer-body .collab-editor { position:relative; isolation:isolate; max-width:820px; padding:20px 20px calc(132px + env(safe-area-inset-bottom)); }
.writer-body .editor-sky { display:none !important; }
.writer-hanging-stars { position:absolute; z-index:-1; inset:0 0 auto; height:210px; overflow:hidden; pointer-events:none; }
.writer-hanging-stars::before,.writer-hanging-stars::after { content:""; position:absolute; top:0; width:1px; height:112px; background:linear-gradient(#d7af61,transparent); opacity:.62; }
.writer-hanging-stars::before{left:8%}.writer-hanging-stars::after{right:13%}
.writer-hanging-stars i { position:absolute; width:7px; height:7px; background:#e9c36e; transform:rotate(45deg); box-shadow:0 0 12px #e9c36e; opacity:.72; }
.writer-hanging-stars i:nth-child(1){left:8%;top:106px}.writer-hanging-stars i:nth-child(2){left:14%;top:56px}.writer-hanging-stars i:nth-child(3){right:13%;top:106px}.writer-hanging-stars i:nth-child(4){right:23%;top:42px}.writer-hanging-stars i:nth-child(5){left:50%;top:19px}
.writer-body .editor-header { position:relative; min-height:150px; padding:30px 74px 20px; display:flex; align-items:flex-start; justify-content:center; border:0; background:transparent; box-shadow:none; }
.writer-body .editor-header>div { text-align:center; }
.writer-body .editor-header h1 { margin:2px 0 8px; color:#e7c378; font:500 clamp(34px,7vw,58px)/1.12 "STKaiti","Kaiti SC",KaiTi,serif; letter-spacing:.09em; text-shadow:0 3px 18px rgba(218,174,83,.16); }
.writer-body .editor-header>div>p { margin:0; color:rgba(238,207,142,.84); font:400 clamp(14px,3.6vw,20px)/1.5 "LXGW WenKai","Kaiti SC",KaiTi,serif; letter-spacing:.08em; }
.writer-body .editor-back,.writer-body .role-switch { position:absolute; top:24px; width:48px; height:48px; display:grid; place-items:center; padding:0; border:1px solid rgba(231,195,116,.42); border-radius:50%; background:rgba(3,20,41,.55); color:#e8c578; font:400 27px/1 serif; -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
.writer-body .editor-back{left:0}.writer-body .role-switch{right:0;font-size:12px;letter-spacing:.08em}
.writer-body .stationery-panel { padding:22px; border:1px solid rgba(225,189,111,.28) !important; border-radius:24px !important; background:rgba(3,21,43,.38) !important; box-shadow:inset 0 0 42px rgba(135,160,216,.04) !important; }
.writer-body .stationery-reference-heading { justify-content:center; gap:15px; margin:0 0 20px; }
.writer-body .stationery-reference-heading span { color:#e7c374; font-size:13px; }
.writer-body .section-heading h2 { margin:0; font-size:25px; }
.writer-body .stationery-grid { gap:16px !important; }
.writer-body .stationery-option { position:relative; padding:0 0 9px !important; border:0 !important; border-radius:12px !important; background:transparent !important; }
.writer-body .stationery-option .paper-swatch { aspect-ratio:1.38 !important; border:0 !important; border-radius:3px !important; clip-path:polygon(1% 5%,5% 2%,10% 3%,16% 1%,23% 3%,30% 1%,38% 3%,46% 1%,55% 3%,63% 1%,72% 3%,80% 1%,88% 3%,96% 1%,99% 5%,98% 96%,94% 99%,87% 97%,79% 99%,70% 97%,62% 99%,52% 97%,44% 99%,35% 97%,27% 99%,18% 97%,10% 99%,3% 97%) !important; box-shadow:0 13px 24px rgba(0,5,18,.28) !important; }
.writer-body .stationery-reference-image { width:100%;height:100%;object-fit:cover;display:block; }
.writer-body .stationery-option strong { display:block; margin-top:9px; font-size:16px !important; letter-spacing:.09em; }
.writer-body .stationery-option.selected .paper-swatch { filter:brightness(1.04) saturate(1.04); box-shadow:0 0 0 1px rgba(243,206,124,.5),0 0 22px rgba(239,196,102,.2),0 14px 25px rgba(0,5,18,.3) !important; }
.writer-body .stationery-seal { position:absolute; right:-4px; bottom:20px; width:42px !important; height:42px !important; display:grid; place-items:center; font-size:20px; }
.writer-body .shared-paper { margin-top:22px; min-height:720px; padding:56px 56px 46px !important; overflow:hidden; color:#4a3428; background:#efe1c3 !important; background-image:linear-gradient(rgba(253,245,222,.52),rgba(235,215,177,.24)),radial-gradient(circle at 20% 12%,rgba(255,255,255,.32),transparent 33%),repeating-linear-gradient(0deg,transparent 0 31px,rgba(107,78,48,.1) 32px 33px) !important; clip-path:polygon(1% 2%,4% 1%,8% 2%,13% .7%,19% 1.8%,25% .8%,33% 1.8%,42% .6%,51% 1.6%,60% .7%,69% 1.8%,78% .6%,87% 1.8%,96% .8%,99% 2%,99% 97%,96% 99%,89% 98%,80% 99%,71% 98%,62% 99%,53% 98%,44% 99%,35% 98%,25% 99%,16% 98%,7% 99%,1% 97%) !important; }
.writer-body .paper-torn-edge { position:absolute; inset:9px; pointer-events:none; border:1px solid rgba(128,82,43,.19); border-radius:10px; box-shadow:inset 0 0 42px rgba(112,67,30,.11); }
.writer-body .paper-address { position:relative; z-index:2; font-size:20px; }
.writer-body .paper-address em { border:0;background:transparent;color:#7b4d3e; }
.writer-body .paper-postmark { width:92px;height:92px;top:28px;right:34px;background:#17365d;color:#eacb83;border:7px solid #e1cc9c;transform:rotate(3deg); }
.writer-body .paper-kicker { margin-top:34px;color:#8f4a42;letter-spacing:.24em; }
.writer-body .letter-title-input { margin-top:26px; font-size:clamp(30px,6vw,45px); color:#493025; background:transparent; }
.writer-body .author-label>span { border-color:rgba(134,74,52,.34); color:#7b352f; background:rgba(255,248,224,.38); }
.writer-body textarea { min-height:150px; font-size:20px; line-height:1.85; color:#4a3428; background:transparent; }
.writer-body .paper-signature { font-size:18px; }
.writer-body .paper-constellation { color:#b27732;opacity:.42; }
.writer-body .paper-tools { min-height:10px; margin:0 !important; padding:0 !important; }
.writer-body .editor-actions { position:relative !important; inset:auto !important; z-index:6; margin:18px auto 0 !important; padding:0 16px 16px !important; display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:12px !important; border:0 !important; background:transparent !important; box-shadow:none !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important; }
.writer-body .writer-tool { min-height:64px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; padding:7px 5px; border:0 !important; border-radius:16px; color:#d8b86f; background:transparent !important; box-shadow:none !important; }
.writer-body .writer-tool>span { width:auto !important;height:auto !important;border:0 !important;background:transparent !important;font-size:28px;color:#e5c377; }
.writer-body .writer-tool b { font:400 14px/1.2 "LXGW WenKai","Kaiti SC",KaiTi,serif;letter-spacing:.12em; }
.writer-body .sync-button .save-envelope svg { display:none; }
.writer-body .sync-button .save-envelope::before { content:"▣";font-size:28px;color:#e5c377; }
.writer-body .publish-button { order:-1; grid-column:1/-1; justify-self:center; width:112px !important;height:112px !important;min-height:112px !important;padding:18px !important;border:2px solid rgba(249,214,139,.62) !important;border-radius:50% !important;color:#f2d38b !important;background:radial-gradient(circle at 34% 25%,#a6463e,#741b27 56%,#4d0c18 100%) !important;box-shadow:0 13px 30px rgba(42,3,11,.43),inset 0 0 0 5px rgba(255,212,125,.08),inset 0 1px rgba(255,237,187,.35) !important;font:500 18px/1.35 "STKaiti","Kaiti SC",KaiTi,serif;letter-spacing:.08em;text-align:center; }
.writer-body .publish-button span { font-size:9px; }

@media (max-width:600px) {
  .fireworks-scenes .fireworks-scene { object-position:50% 78% !important; transform:translateY(-4.2svh) scale(1.09) !important; }
  .fireworks-intro.is-midnight .fireworks-scenes .fireworks-scene { object-position:50% 84% !important; transform:translateY(-3.2svh) scale(1.07) !important; }
  .writer-body .collab-editor { padding:10px 12px calc(106px + env(safe-area-inset-bottom)); }
  .writer-body .editor-header { min-height:136px;padding:25px 54px 18px; }
  .writer-body .editor-header h1 { font-size:36px; }
  .writer-body .editor-header>div>p { font-size:13px;white-space:nowrap; }
  .writer-body .editor-back,.writer-body .role-switch { top:20px;width:42px;height:42px; }
  .writer-body .stationery-panel { padding:17px 12px 15px !important;border-radius:20px !important; }
  .writer-body .stationery-grid { gap:12px 9px !important; }
  .writer-body .stationery-option strong { font-size:13px !important; }
  .writer-body .stationery-seal { width:34px !important;height:34px !important;right:-1px;bottom:16px;font-size:16px; }
  .writer-body .shared-paper { min-height:650px;margin:18px 2px 0 !important;padding:48px 25px 34px !important; }
  .writer-body .paper-postmark { width:74px;height:74px;right:19px;top:25px;border-width:5px; }
  .writer-body .paper-address { padding-right:70px;font-size:17px; }
  .writer-body .paper-kicker { margin-top:28px;font-size:10px; }
  .writer-body .letter-title-input { font-size:31px; }
  .writer-body textarea { min-height:130px;font-size:17px;line-height:1.8; }
  .writer-body .publish-button { width:98px !important;height:98px !important;min-height:98px !important;font-size:16px; }
}

/* v65 — final mobile carousel repair + hand-built healing writing desk. */
.fireworks-intro,
.fireworks-intro.is-midnight {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
  min-height: 100svh !important;
  overflow: hidden !important;
  background: #031426 !important;
}
.fireworks-scenes,
.fireworks-intro.is-midnight .fireworks-scenes {
  position: absolute !important;
  inset: 0 auto 0 0 !important;
  display: flex !important;
  flex-flow: row nowrap !important;
  gap: 0 !important;
  width: auto !important;
  min-width: 100% !important;
  height: 100% !important;
  overflow: visible !important;
  transition: transform 620ms cubic-bezier(.22,.72,.2,1) !important;
}
.fireworks-scenes .fireworks-scene,
.fireworks-intro.is-midnight .fireworks-scenes .fireworks-scene {
  position: relative !important;
  inset: auto !important;
  display: block !important;
  flex: 0 0 100vw !important;
  width: 100vw !important;
  min-width: 100vw !important;
  max-width: 100vw !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: 50% 72% !important;
  transform: none !important;
  transform-origin: center !important;
}
.fireworks-intro.is-midnight .fireworks-scenes .fireworks-scene {
  object-position: 50% 74% !important;
}
.fireworks-canvas {
  position: absolute !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
}

/* Writing page: all elements remain editable HTML controls; no screenshot layer. */
.writer-body .collab-editor { max-width: 760px !important; }
.writer-body .editor-header { min-height: 174px !important; }
.writer-body .stationery-panel {
  padding: 20px 22px 24px !important;
  border: 1px solid rgba(226,190,112,.27) !important;
  border-radius: 18px !important;
  background: rgba(2,18,39,.32) !important;
}
.writer-body .stationery-grid {
  grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  gap: 14px 16px !important;
}
.writer-body .stationery-option { min-width: 0 !important; }
.writer-body .stationery-option .paper-swatch {
  width: 100% !important;
  aspect-ratio: 1.42 !important;
}
.writer-body .shared-paper {
  min-height: 760px !important;
  padding: 54px 52px 176px !important;
}
.writer-body .paper-address {
  display: grid !important;
  gap: 12px !important;
  padding-right: 108px !important;
  font-size: 19px !important;
}
.writer-body .paper-address::after {
  content: "From：瑞";
  color: #54382c;
  font-style: normal;
}
.writer-body .paper-address em { display: none !important; }
.writer-body .paper-kicker { display: none !important; }
.writer-body .letter-title-input {
  margin-top: 34px !important;
  padding: 0 0 12px !important;
  border-bottom: 1px dashed rgba(106,74,43,.22) !important;
  font-size: 21px !important;
  font-weight: 400 !important;
}
.writer-body .letter-title-input::placeholder { color: rgba(82,57,41,.52) !important; }
.writer-body .paper-divider,
.writer-body .author-separator,
.writer-body .author-label,
.writer-body .paper-signature { display: none !important; }
.writer-body .author-block { margin: 0 !important; padding: 0 !important; }
.writer-body textarea {
  min-height: 210px !important;
  margin-top: 8px !important;
  padding: 8px 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  font-size: 19px !important;
  line-height: 1.9 !important;
}
.writer-body textarea[readonly]:placeholder-shown { display: none !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; }
.writer-body .paper-tools { display: none !important; }
.writer-body .editor-actions {
  margin-top: -150px !important;
  padding: 0 34px 24px !important;
  grid-template-columns: repeat(3,1fr) !important;
  align-items: end !important;
}
.writer-body .publish-button {
  grid-column: 1/-1 !important;
  width: 104px !important;
  height: 104px !important;
  min-height: 104px !important;
  margin-bottom: 6px !important;
}
.writer-body .writer-tool { min-height: 58px !important; }
.writer-body .writer-tool > span { font-family: Georgia,serif !important; font-size: 25px !important; }

@media (max-width:600px) {
  .fireworks-scenes .fireworks-scene,
  .fireworks-intro.is-midnight .fireworks-scenes .fireworks-scene {
    object-position: 50% 70% !important;
    transform: none !important;
  }
  .fireworks-intro.is-midnight .fireworks-scenes .fireworks-scene { object-position: 50% 72% !important; }
  .writer-body .collab-editor { padding-inline: 10px !important; }
  .writer-body .editor-header { min-height: 148px !important; }
  .writer-body .stationery-panel { padding: 15px 10px 18px !important; }
  .writer-body .stationery-grid { gap: 10px 9px !important; }
  .writer-body .stationery-option strong { font-size: 13px !important; }
  .writer-body .shared-paper {
    min-height: 660px !important;
    margin-inline: 1px !important;
    padding: 42px 24px 154px !important;
  }
  .writer-body .paper-address { padding-right: 77px !important; font-size: 17px !important; }
  .writer-body .paper-postmark { width: 68px !important; height: 68px !important; right: 17px !important; top: 24px !important; }
  .writer-body .letter-title-input { margin-top: 28px !important; font-size: 18px !important; }
  .writer-body textarea { min-height: 180px !important; font-size: 17px !important; }
  .writer-body .editor-actions { margin-top: -132px !important; padding-inline: 19px !important; }
  .writer-body .publish-button { width: 90px !important; height: 90px !important; min-height: 90px !important; }
}
/* v70 首页三场景自然交叉淡化：背景星点随场景一起更换 */
.fireworks-scenes{display:block!important;transform:none!important;transition:none!important}
.fireworks-scenes .fireworks-scene{position:absolute!important;inset:-1.5%!important;width:103%!important;height:103%!important;opacity:0;transform:scale(1.035);transition:opacity 920ms ease,transform 1300ms cubic-bezier(.2,.72,.2,1);will-change:opacity,transform;pointer-events:none}
.fireworks-scenes .fireworks-scene.is-active{opacity:1;transform:scale(1)}
.fireworks-twinkles{transition:opacity 430ms ease}.fireworks-intro.is-scene-fading .fireworks-twinkles{opacity:0}
.fireworks-intro.is-scene-fading .fireworks-nebula{opacity:.18}
/* v71 午夜三张水母全部接回，并把构图整体上移 */
.fireworks-intro.is-midnight .fireworks-scenes .fireworks-scene{object-position:50% 44%!important}
.fireworks-scene-dots{display:none!important}
.saved-letter-photos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:18px 0}.saved-letter-photos img{width:100%;max-height:280px;object-fit:cover;border-radius:12px;box-shadow:0 5px 18px rgba(42,22,15,.18)}.saved-letter-audio{display:block;width:100%;margin:18px 0}
/* v74: reliable three-scene switching on iOS/WeChat; inline opacity is reinforced by JS. */
.fireworks-scene-controls{z-index:40!important;pointer-events:none!important}
.fireworks-scene-arrow{z-index:41!important;pointer-events:auto!important;width:40px!important;height:52px!important;opacity:.92!important;touch-action:manipulation!important}
.fireworks-scenes .fireworks-scene{transition:opacity 1050ms ease,transform 1400ms cubic-bezier(.2,.72,.2,1)!important}
/* v76: script-independent fallback. Three scenes still crossfade if an in-app browser blocks JS timers. */
.fireworks-intro:not(.is-manual-scene) .fireworks-scenes .fireworks-scene:nth-child(1){animation:underwater-scene-one 24s ease-in-out infinite!important}
.fireworks-intro:not(.is-manual-scene) .fireworks-scenes .fireworks-scene:nth-child(2){animation:underwater-scene-two 24s ease-in-out infinite!important}
.fireworks-intro:not(.is-manual-scene) .fireworks-scenes .fireworks-scene:nth-child(3){animation:underwater-scene-three 24s ease-in-out infinite!important}
.fireworks-intro.is-manual-scene .fireworks-scenes .fireworks-scene{animation:none!important}

/* v78: two physical layers rotate three independent sources. This final rule
   intentionally isolates the crossfade from legacy slider transforms. */
.scene-direct-v85{position:absolute!important;inset:0!important;display:block!important;overflow:hidden!important;transform:none!important;transition:none!important;background:#08162e url("https://media.lanyunyouming.cn/assets/latest/day-scene-first-user-v85.jpeg") 50% 50%/cover no-repeat!important}
.scene-direct-v85 .fireworks-scene{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;opacity:1!important;animation:none!important;transform:none!important;object-fit:cover!important;transition:none!important;will-change:auto!important}
@keyframes underwater-scene-one{0%,27%{opacity:1}34%,93%{opacity:0}100%{opacity:1}}
@keyframes underwater-scene-two{0%,27%{opacity:0}34%,60%{opacity:1}67%,100%{opacity:0}}
@keyframes underwater-scene-three{0%,60%{opacity:0}67%,93%{opacity:1}100%{opacity:0}}


/* ===== v90 Romantic Underwater Homepage ===== */
.fireworks-intro{background:#031832!important}
.fireworks-intro .fireworks-scenes .fireworks-scene{
  filter:saturate(1.08) contrast(1.03) brightness(.92)!important;
}
.fireworks-nebula{
  background:
    radial-gradient(circle at 50% 7%,rgba(119,190,255,.20),transparent 32%),
    linear-gradient(180deg,rgba(1,12,38,.04),rgba(1,16,43,.18) 55%,rgba(1,14,34,.42))!important;
}
.intro-romantic-copy{
  position:absolute;z-index:18;top:max(76px,calc(env(safe-area-inset-top) + 52px));left:7vw;
  pointer-events:none;text-shadow:0 2px 18px rgba(0,8,28,.55)
}
.intro-romantic-copy h1{margin:0;color:#f3dfb4;font-family:var(--handwriting-font),serif;font-size:clamp(31px,8vw,48px);font-weight:500;letter-spacing:.08em}
.intro-romantic-copy p{margin:9px 0 0;color:rgba(244,226,188,.82);font-size:12px;letter-spacing:.16em}
.intro-romantic-quote{
  position:absolute;z-index:18;left:50%;top:52%;transform:translate(-50%,-50%);
  width:min(76vw,330px);text-align:center;color:#f2d79a;font-family:var(--handwriting-font),serif;
  font-size:clamp(15px,4.2vw,20px);line-height:1.95;letter-spacing:.08em;text-shadow:0 3px 18px rgba(0,7,28,.7);
  pointer-events:none;opacity:.92
}
.intro-music-pill{
  position:absolute;z-index:31;left:50%;bottom:calc(max(90px,env(safe-area-inset-bottom) + 80px));transform:translateX(-50%);
  width:min(78vw,360px);min-height:58px;display:grid;grid-template-columns:42px 1fr 38px;align-items:center;gap:10px;
  padding:8px 13px;border:1px solid rgba(225,211,177,.34);border-radius:999px;color:#f5e7c3;
  background:linear-gradient(180deg,rgba(7,31,65,.60),rgba(3,19,46,.75));
  box-shadow:0 16px 42px rgba(0,5,21,.38),inset 0 1px rgba(255,255,255,.08);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)
}
.intro-music-cover{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(246,215,145,.50);background:radial-gradient(circle at 35% 30%,#466fb1,#12284c 58%,#071a35);box-shadow:0 0 16px rgba(112,153,255,.22)}
.intro-music-copy{text-align:left;min-width:0}.intro-music-copy b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px;letter-spacing:.04em}.intro-music-copy small{display:block;margin-top:3px;color:rgba(231,221,194,.62);font-size:9px;letter-spacing:.12em}
.intro-music-state{font-size:20px;color:#f7d98d;text-align:center}
.fireworks-intro .fireworks-enter,.fireworks-intro.is-midnight .fireworks-enter{background:rgba(6,37,74,.48)!important;box-shadow:0 0 0 7px rgba(255,255,255,.025),0 12px 28px rgba(0,8,28,.32)!important}

/* bottom navigation must be truly fixed on all pages/phones */
.starlight-tabbar{
  position:fixed!important;left:50%!important;transform:translateX(-50%)!important;
  bottom:max(8px,env(safe-area-inset-bottom))!important;z-index:999!important;
}
.intro-open .starlight-tabbar{
  display:grid!important;visibility:visible!important;opacity:1!important;pointer-events:auto!important;
}
.mailbox-poster-page,.starlight-subpage{padding-bottom:calc(105px + env(safe-area-inset-bottom))!important}

/* Romantic connected layout for "我们的", less like isolated single-player cards */
.ours-page{width:min(100%,620px)!important;padding-inline:0!important}
.ours-page .subpage-header{padding:28px 22px 18px!important}
.ours-portrait{margin:0 0 0!important;border-left:0!important;border-right:0!important;border-radius:0 0 30px 30px!important;box-shadow:0 26px 58px rgba(0,7,24,.35)!important}
.ours-portrait img{aspect-ratio:1.18!important;min-height:390px!important;object-position:center 48%!important}
.ours-portrait>div{margin-top:-1px;background:linear-gradient(180deg,rgba(6,38,72,.96),rgba(5,31,62,.98));padding:18px!important}
.ours-message{margin:-1px 18px 16px!important;border-radius:0 0 27px 27px!important;border-top:0!important;background:linear-gradient(145deg,#fff0c8,#e6c687)!important}
.ours-stats{margin:0 18px!important;gap:8px!important}
.ours-stats div{background:linear-gradient(180deg,rgba(8,44,79,.66),rgba(5,30,59,.84))!important;backdrop-filter:blur(13px);-webkit-backdrop-filter:blur(13px)}
.ours-write{margin-bottom:22px!important}

/* keep intro overlays away from very short screens */
@media(max-height:720px){
  .intro-romantic-copy{top:max(58px,calc(env(safe-area-inset-top) + 38px))}
  .intro-romantic-quote{top:46%;font-size:14px}
  .intro-music-pill{bottom:calc(max(82px,env(safe-area-inset-bottom) + 72px));min-height:52px}
}


/* =========================================================
   V100 PHASE 1 — STAR-SEA JELLYFISH IMMERSIVE HOMEPAGE
   Real webpage layers, not a screenshot.
   ========================================================= */
.fireworks-intro.is-v100-ocean{
  min-height:100svh!important;
  height:100svh!important;
  overflow:hidden!important;
  isolation:isolate;
  background:#021832!important;
}
.fireworks-intro.is-v100-ocean .fireworks-scenes{
  position:absolute!important;inset:0!important;z-index:0!important;
}
.fireworks-intro.is-v100-ocean .fireworks-scene{
  width:100%!important;height:100%!important;
  object-fit:cover!important;object-position:center bottom!important;
  filter:saturate(1.14) contrast(1.025) brightness(.83)!important;
  transform:scale(1.012);
}
.fireworks-intro.is-v100-ocean::before{
  content:""!important;display:block!important;position:absolute!important;inset:0!important;z-index:1!important;pointer-events:none!important;
  background:
    radial-gradient(ellipse at 50% -3%,rgba(193,229,255,.34) 0%,rgba(90,171,235,.16) 16%,transparent 42%),
    linear-gradient(180deg,rgba(1,12,34,.05) 0%,rgba(0,24,61,.08) 48%,rgba(0,13,34,.27) 100%)!important;
  mix-blend-mode:screen;
}
.fireworks-intro.is-v100-ocean::after{
  content:""!important;display:block!important;position:absolute!important;inset:0!important;z-index:3!important;pointer-events:none!important;
  background:
    radial-gradient(circle at 12% 30%,rgba(124,205,255,.08),transparent 22%),
    radial-gradient(circle at 83% 39%,rgba(185,124,255,.075),transparent 25%),
    linear-gradient(90deg,rgba(1,12,36,.08),transparent 14%,transparent 86%,rgba(1,12,36,.08));
}
.fireworks-intro.is-v100-ocean .fireworks-canvas{z-index:8!important;filter:none!important}
.fireworks-intro.is-v100-ocean .fireworks-nebula{z-index:5!important;opacity:.55!important;background:radial-gradient(circle at 50% 9%,rgba(115,194,255,.12),transparent 35%)!important}
.fireworks-intro.is-v100-ocean .fireworks-twinkles{z-index:7!important}
.fireworks-intro.is-v100-ocean .fireworks-meteors{display:none!important}

.intro-romantic-copy{
  z-index:18!important;
  top:max(54px,calc(env(safe-area-inset-top) + 28px))!important;
  left:max(24px,calc(env(safe-area-inset-left) + 24px))!important;
}
.intro-romantic-copy h1{
  font-size:clamp(27px,7.2vw,40px)!important;
  letter-spacing:.11em!important;
  color:#f2dca9!important;
  text-shadow:0 2px 15px rgba(0,5,23,.52),0 0 12px rgba(242,204,126,.10)!important;
}
.intro-romantic-copy p{
  margin-top:8px!important;font-size:clamp(10px,2.75vw,13px)!important;
  letter-spacing:.13em!important;color:rgba(244,229,193,.78)!important
}
.intro-romantic-quote{
  z-index:17!important;top:47%!important;width:min(72vw,318px)!important;
  font-size:clamp(14px,3.8vw,18px)!important;line-height:1.85!important;
  color:rgba(244,213,150,.91)!important;
  text-shadow:0 2px 14px rgba(0,4,24,.74)!important
}
.fireworks-intro.is-v100-ocean .fireworks-actions{
  z-index:28!important;
  top:max(26px,calc(env(safe-area-inset-top) + 20px))!important;
  right:max(20px,calc(env(safe-area-inset-right) + 18px))!important;
}
.fireworks-intro.is-v100-ocean .fireworks-enter{
  width:54px!important;height:54px!important;min-width:54px!important;min-height:54px!important;
  border:1px solid rgba(247,218,151,.52)!important;
  background:linear-gradient(180deg,rgba(8,40,79,.28),rgba(3,20,48,.18))!important;
  box-shadow:0 8px 25px rgba(0,7,24,.25),inset 0 0 18px rgba(255,255,255,.04),0 0 0 6px rgba(255,255,255,.018)!important;
  backdrop-filter:blur(14px) saturate(1.2)!important;-webkit-backdrop-filter:blur(14px) saturate(1.2)!important
}

.intro-music-pill{
  z-index:32!important;
  bottom:calc(max(91px,env(safe-area-inset-bottom) + 79px))!important;
  width:min(75vw,330px)!important;min-height:52px!important;
  grid-template-columns:38px 1fr 34px!important;
  padding:6px 11px!important;
  border-color:rgba(224,207,164,.28)!important;
  background:linear-gradient(180deg,rgba(12,46,84,.36),rgba(4,23,52,.42))!important;
  box-shadow:0 14px 38px rgba(0,7,24,.27),inset 0 1px rgba(255,255,255,.06)!important;
  backdrop-filter:blur(18px) saturate(1.25)!important;-webkit-backdrop-filter:blur(18px) saturate(1.25)!important
}
.intro-music-cover{width:36px!important;height:36px!important;background:radial-gradient(circle at 35% 28%,#5075c0,#142a51 58%,#071b36)!important}
.intro-music-copy b{font-size:11px!important;font-weight:500!important}
.intro-music-copy small{font-size:8.5px!important;color:rgba(237,226,199,.55)!important}
.intro-music-state{font-size:17px!important}

/* transparent glass bottom navigation, fixed in the real viewport */
.starlight-tabbar{
  position:fixed!important;left:50%!important;transform:translateX(-50%)!important;
  bottom:max(7px,env(safe-area-inset-bottom))!important;z-index:1000!important;
  width:min(calc(100% - 18px),500px)!important;
  min-height:69px!important;padding:6px 7px!important;
  border:1px solid rgba(225,205,158,.20)!important;border-radius:27px!important;
  background:linear-gradient(180deg,rgba(10,40,73,.38),rgba(3,20,44,.48))!important;
  box-shadow:0 12px 38px rgba(0,6,22,.25),inset 0 1px rgba(255,255,255,.045)!important;
  backdrop-filter:blur(20px) saturate(1.25)!important;-webkit-backdrop-filter:blur(20px) saturate(1.25)!important
}
.intro-open .starlight-tabbar{display:grid!important;opacity:1!important;visibility:visible!important;pointer-events:auto!important}
.starlight-tabbar a{background:transparent!important;color:rgba(228,235,244,.69)!important;min-height:54px!important}
.starlight-tabbar a.is-active{
  color:#f3d27d!important;
  background:radial-gradient(circle at 50% 35%,rgba(242,203,112,.115),transparent 72%)!important
}
.starlight-tabbar .tabbar-icon{opacity:.91}
.starlight-tabbar a.is-active .tabbar-icon{filter:drop-shadow(0 0 9px rgba(244,207,116,.38))}

/* Two-minute envelope: bubble-breath entrance, not a game popup */
.falling-love-letter{
  z-index:45!important;
  width:104px!important;height:78px!important;
}
.falling-love-letter .love-letter-bubbles{
  position:absolute;inset:-42px -34px;pointer-events:none;z-index:-1
}
.falling-love-letter .love-letter-bubbles i{
  position:absolute;width:10px;height:10px;border-radius:50%;
  border:1px solid rgba(199,229,255,.42);
  background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.38),rgba(145,207,255,.08) 45%,rgba(91,151,216,.03) 70%);
  box-shadow:inset 0 0 5px rgba(255,255,255,.10),0 0 8px rgba(91,168,235,.10);
  animation:v100BubbleBreath 3.8s ease-in-out infinite,v100BubbleRise 6.8s linear infinite;
  opacity:.45
}
.falling-love-letter .love-letter-bubbles i:nth-child(1){left:6%;top:62%;animation-delay:-.4s}
.falling-love-letter .love-letter-bubbles i:nth-child(2){left:23%;top:85%;width:7px;height:7px;animation-delay:-2.2s}
.falling-love-letter .love-letter-bubbles i:nth-child(3){left:41%;top:72%;width:13px;height:13px;animation-delay:-1.4s}
.falling-love-letter .love-letter-bubbles i:nth-child(4){left:62%;top:82%;width:8px;height:8px;animation-delay:-3.1s}
.falling-love-letter .love-letter-bubbles i:nth-child(5){left:78%;top:54%;width:12px;height:12px;animation-delay:-2.7s}
.falling-love-letter .love-letter-bubbles i:nth-child(6){left:92%;top:74%;width:6px;height:6px;animation-delay:-.8s}
.falling-love-letter .love-letter-bubbles i:nth-child(7){left:50%;top:92%;width:5px;height:5px;animation-delay:-3.5s}
.falling-love-letter .mini-envelope{
  filter:drop-shadow(0 9px 16px rgba(0,8,30,.28)) drop-shadow(0 0 9px rgba(244,204,116,.11))
}
@keyframes v100BubbleBreath{
  0%,100%{transform:scale(.78);opacity:.20}
  48%{transform:scale(1.12);opacity:.58}
}
@keyframes v100BubbleRise{
  0%{translate:0 18px}
  100%{translate:0 -34px}
}

/* Equal-composition adaptation:
   center/crop at the edges instead of re-laying out the scene. */
@media (max-aspect-ratio: 9/20.5){
  .fireworks-intro.is-v100-ocean .fireworks-scene{object-position:50% 50%!important}
  .intro-romantic-quote{top:46%!important}
}
@media (min-aspect-ratio: 9/18.6){
  .fireworks-intro.is-v100-ocean .fireworks-scene{object-position:50% 58%!important}
  .intro-romantic-copy{top:max(42px,calc(env(safe-area-inset-top) + 18px))!important}
  .intro-romantic-quote{top:45%!important}
  .intro-music-pill{bottom:calc(max(82px,env(safe-area-inset-bottom) + 72px))!important}
}
@media (max-width:390px){
  .intro-romantic-copy{left:22px!important}
  .fireworks-intro.is-v100-ocean .fireworks-enter{width:48px!important;height:48px!important;min-width:48px!important;min-height:48px!important}
  .intro-music-pill{width:min(78vw,318px)!important}
}
@media (prefers-reduced-motion:reduce){
  .love-letter-bubbles i{animation:none!important}
}


/* =========================================================
   V101 — exact reference homepage + native interactive layers
   ========================================================= */
.fireworks-intro.is-v101-reference{
  height:100svh!important;
  min-height:100svh!important;
  background:#021733!important;
  overflow:hidden!important;
}
.fireworks-intro.is-v101-reference .fireworks-scenes{
  position:absolute!important;
  inset:0!important;
  z-index:0!important;
}
.fireworks-intro.is-v101-reference .v101-reference-scene{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center center!important;
  transform:none!important;
  animation:none!important;
  filter:none!important;
  opacity:1!important;
}
.fireworks-intro.is-v101-reference::before,
.fireworks-intro.is-v101-reference::after{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  pointer-events:none!important;
}
.fireworks-intro.is-v101-reference::before{
  z-index:2!important;
  background:
    radial-gradient(ellipse at 50% -8%,rgba(255,246,221,.10),rgba(112,189,255,.045) 20%,transparent 48%),
    linear-gradient(180deg,rgba(0,14,45,.02),rgba(0,14,45,.025) 62%,rgba(0,8,27,.10))!important;
}
.fireworks-intro.is-v101-reference::after{
  z-index:3!important;
  background:linear-gradient(180deg,transparent 0 72%,rgba(0,15,37,.06) 88%,rgba(0,11,30,.16) 100%)!important;
}
.fireworks-intro.is-v101-reference .fireworks-canvas{
  z-index:10!important;
  pointer-events:none!important;
}
.fireworks-intro.is-v101-reference .fireworks-nebula,
.fireworks-intro.is-v101-reference .fireworks-twinkles,
.fireworks-intro.is-v101-reference .fireworks-meteors{
  display:none!important;
}
.fireworks-intro.is-v101-reference .intro-romantic-copy,
.fireworks-intro.is-v101-reference .intro-romantic-quote{
  display:none!important;
}

/* Native player aligns over the reference position and visually replaces the baked artwork UI. */
.fireworks-intro.is-v101-reference .intro-music-pill{
  z-index:42!important;
  left:50%!important;
  bottom:calc(max(87px,env(safe-area-inset-bottom) + 80px))!important;
  width:min(calc(100% - 92px),355px)!important;
  height:58px!important;
  min-height:58px!important;
  padding:7px 12px!important;
  border:1px solid rgba(226,234,249,.23)!important;
  border-radius:999px!important;
  background:linear-gradient(180deg,rgba(13,40,77,.72),rgba(6,24,55,.80))!important;
  box-shadow:0 10px 28px rgba(0,6,24,.29),inset 0 1px rgba(255,255,255,.08)!important;
  backdrop-filter:blur(18px) saturate(1.18)!important;
  -webkit-backdrop-filter:blur(18px) saturate(1.18)!important;
}
.fireworks-intro.is-v101-reference .intro-music-cover{
  width:39px!important;height:39px!important;
  border:1px solid rgba(255,255,255,.30)!important;
  box-shadow:inset 0 0 15px rgba(255,255,255,.06)!important;
}
.fireworks-intro.is-v101-reference .intro-music-copy b{
  color:#f6f7fb!important;font-size:11px!important;font-weight:500!important;letter-spacing:.02em!important
}
.fireworks-intro.is-v101-reference .intro-music-copy small{
  color:rgba(234,239,250,.62)!important;font-size:8.5px!important
}
.fireworks-intro.is-v101-reference .intro-music-state{
  color:#ffe09a!important
}

/* Hide old floating arrows/actions except the mailbox entry button if present. */
.fireworks-intro.is-v101-reference .fireworks-scene-control{
  display:none!important;
}

/* Native bottom navigation: transparent glass, same placement as reference. */
.intro-open .starlight-tabbar{
  display:grid!important;
  position:fixed!important;
  z-index:1000!important;
  left:50%!important;
  transform:translateX(-50%)!important;
  bottom:max(7px,env(safe-area-inset-bottom))!important;
  width:min(calc(100% - 16px),510px)!important;
  min-height:74px!important;
  padding:7px 8px!important;
  border:1px solid rgba(229,236,248,.17)!important;
  border-radius:30px!important;
  background:linear-gradient(180deg,rgba(10,37,71,.68),rgba(4,21,49,.79))!important;
  box-shadow:0 14px 35px rgba(0,5,21,.30),inset 0 1px rgba(255,255,255,.055)!important;
  backdrop-filter:blur(22px) saturate(1.14)!important;
  -webkit-backdrop-filter:blur(22px) saturate(1.14)!important;
}
.intro-open .starlight-tabbar a{
  min-height:58px!important;
  background:transparent!important;
  color:rgba(238,241,249,.82)!important;
  border-radius:22px!important;
}
.intro-open .starlight-tabbar a.is-active{
  color:#ffdc8d!important;
  background:radial-gradient(circle at 50% 42%,rgba(255,213,119,.12),transparent 66%)!important;
}
.intro-open .starlight-tabbar .tabbar-icon{
  opacity:.92!important;
  filter:drop-shadow(0 0 8px rgba(126,173,255,.08))!important;
}

/* Spawned jellyfish remain behind all UI. */
.fireworks-intro.is-v101-reference .fireworks-canvas{z-index:12!important}
.fireworks-intro.is-v101-reference .intro-music-pill{pointer-events:auto!important}
.intro-open .starlight-tabbar{pointer-events:auto!important}

/* Keep the same composition across common tall phones by cropping only the outermost edges. */
@media (max-aspect-ratio: 9/20.8){
  .fireworks-intro.is-v101-reference .v101-reference-scene{object-position:50% 50%!important}
}
@media (min-aspect-ratio: 9/18.6){
  .fireworks-intro.is-v101-reference .v101-reference-scene{object-position:50% 50%!important}
  .fireworks-intro.is-v101-reference .intro-music-pill{
    bottom:calc(max(80px,env(safe-area-inset-bottom) + 73px))!important;
  }
}


/* =========================================================
   V102 — clean ocean + click-to-summon jellyfish
   ========================================================= */
.fireworks-intro.is-v102-clean-ocean{
  height:100svh!important;min-height:100svh!important;overflow:hidden!important;
  background:#031a37!important;isolation:isolate!important;
}
.fireworks-intro.is-v102-clean-ocean .fireworks-scenes{position:absolute!important;inset:0!important;z-index:0!important}
.fireworks-intro.is-v102-clean-ocean .v102-clean-scene{
  position:absolute!important;inset:0!important;width:100%!important;height:100%!important;
  object-fit:cover!important;object-position:center center!important;
  transform:none!important;filter:saturate(1.06) contrast(1.015) brightness(.98)!important;opacity:1!important
}
.fireworks-intro.is-v102-clean-ocean::before{
  content:""!important;position:absolute!important;inset:0!important;z-index:2!important;pointer-events:none!important;
  background:
    radial-gradient(ellipse at 50% -6%,rgba(255,244,210,.12) 0%,rgba(112,194,255,.06) 20%,transparent 45%),
    linear-gradient(180deg,rgba(0,15,44,.00),rgba(0,18,49,.05) 58%,rgba(0,10,30,.13))!important;
}
.fireworks-intro.is-v102-clean-ocean .fireworks-canvas{z-index:10!important;pointer-events:none!important}
.fireworks-intro.is-v102-clean-ocean .fireworks-nebula,
.fireworks-intro.is-v102-clean-ocean .fireworks-meteors,
.fireworks-intro.is-v102-clean-ocean .fireworks-twinkles,
.fireworks-intro.is-v102-clean-ocean .fireworks-scene-controls,
.fireworks-intro.is-v102-clean-ocean .fireworks-actions{display:none!important}

/* Real player matching the target: narrow, clear, glassy, full controls */
.ocean-player{
  position:absolute;z-index:40;left:50%;transform:translateX(-50%);
  bottom:calc(max(88px,env(safe-area-inset-bottom) + 82px));
  width:min(calc(100% - 76px),390px);height:58px;
  display:grid;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;gap:10px;
  padding:7px 11px;border-radius:999px;
  border:1px solid rgba(230,238,252,.24);
  background:linear-gradient(180deg,rgba(12,42,79,.62),rgba(5,24,54,.74));
  box-shadow:0 10px 30px rgba(0,5,22,.30),inset 0 1px rgba(255,255,255,.07);
  backdrop-filter:blur(18px) saturate(1.16);-webkit-backdrop-filter:blur(18px) saturate(1.16);
  color:#f7f8fb
}
.ocean-player-cover{width:40px;height:40px;border-radius:50%;object-fit:cover;border:1px solid rgba(255,255,255,.34);box-shadow:0 0 12px rgba(121,171,255,.18)}
.ocean-player-meta{min-width:0;display:flex;flex-direction:column;gap:2px}
.ocean-player-meta strong{font-size:11.5px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ocean-player-meta span{font-size:8.5px;color:rgba(235,240,249,.62)}
.ocean-player-controls{display:flex;align-items:center;gap:3px}
.ocean-player-controls button{
  width:28px;height:34px;min-width:28px;border:0;background:transparent;color:rgba(248,249,252,.92);
  display:grid;place-items:center;padding:0;border-radius:50%;font-size:12px
}
.ocean-player-controls .ocean-player-main{
  width:38px;height:38px;min-width:38px;border:1px solid rgba(255,223,150,.75);
  color:#ffe19d;box-shadow:0 0 0 3px rgba(255,222,145,.06),0 0 15px rgba(255,210,112,.17)
}
.ocean-playlist{
  position:absolute;right:10px;bottom:66px;width:174px;padding:6px;border-radius:16px;
  border:1px solid rgba(231,238,250,.18);background:rgba(5,25,54,.88);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:0 12px 28px rgba(0,5,20,.32)
}
.ocean-playlist button{width:100%;min-height:36px;border:0;border-radius:10px;text-align:left;padding:0 10px;background:transparent;color:#eef3fb;font-size:11px}
.ocean-playlist button:active{background:rgba(255,255,255,.07)}

/* One transparent glass navigation only */
.intro-open .starlight-tabbar{
  position:fixed!important;left:50%!important;transform:translateX(-50%)!important;
  bottom:max(7px,env(safe-area-inset-bottom))!important;z-index:1000!important;
  width:min(calc(100% - 16px),510px)!important;min-height:72px!important;padding:7px 8px!important;
  border:1px solid rgba(231,238,250,.18)!important;border-radius:30px!important;
  background:linear-gradient(180deg,rgba(10,38,72,.58),rgba(4,21,49,.72))!important;
  box-shadow:0 13px 34px rgba(0,6,22,.28),inset 0 1px rgba(255,255,255,.055)!important;
  backdrop-filter:blur(21px) saturate(1.16)!important;-webkit-backdrop-filter:blur(21px) saturate(1.16)!important
}
.intro-open .starlight-tabbar a{min-height:57px!important;background:transparent!important;color:rgba(238,242,250,.82)!important}
.intro-open .starlight-tabbar a.is-active{color:#ffdc8d!important;background:radial-gradient(circle at 50% 38%,rgba(255,215,120,.10),transparent 68%)!important}

/* Keep 2-min letter above jellyfish, below player/nav. */
.falling-love-letter{z-index:32!important}

/* Match tall phones by cropping only peripheral water; prince/fox stay anchored low. */
@media(max-aspect-ratio:9/20.5){
  .fireworks-intro.is-v102-clean-ocean .v102-clean-scene{object-position:50% 52%!important}
}
@media(min-aspect-ratio:9/18.6){
  .fireworks-intro.is-v102-clean-ocean .v102-clean-scene{object-position:50% 50%!important}
  .ocean-player{bottom:calc(max(81px,env(safe-area-inset-bottom) + 74px));width:min(calc(100% - 64px),390px)}
}
@media(max-width:375px){
  .ocean-player{width:calc(100% - 52px);grid-template-columns:38px minmax(0,1fr) auto;gap:7px}
  .ocean-player-controls{gap:1px}.ocean-player-controls button{width:25px;min-width:25px}
}


/* =========================================================
   V103 — refined living jellyfish / 3-scene ocean homepage
   ========================================================= */
.fireworks-intro.is-v103-ocean{height:100svh!important;min-height:100svh!important;background:#031a38!important;overflow:hidden!important}
.scene-direct-v103{position:absolute!important;inset:0!important;z-index:0!important;overflow:hidden!important;touch-action:pan-y!important}
.scene-direct-v103 .v103-ocean-slide{
  position:absolute!important;inset:0!important;width:100%!important;height:100%!important;
  object-fit:cover!important;object-position:center center!important;
  opacity:0!important;transform:translateX(4%) scale(1.015)!important;
  transition:opacity 1.05s ease,transform 1.2s cubic-bezier(.22,.72,.2,1)!important;
  filter:none!important
}
.scene-direct-v103 .v103-ocean-slide.is-active{opacity:1!important;transform:translateX(0) scale(1)!important}
.ocean-scene-dots{
  position:absolute;z-index:28;left:50%;bottom:72px;transform:translateX(-50%);
  display:flex;gap:5px;pointer-events:none;opacity:.46
}
.ocean-scene-dots i{display:block;width:4px;height:4px;border-radius:999px;background:rgba(235,241,252,.38);transition:width .35s ease,background .35s ease}
.ocean-scene-dots i.is-active{width:13px;background:rgba(244,220,164,.72)}

/* Remove all homepage copy and the four-item navigation from the intro only */
.fireworks-intro .intro-romantic-copy,
.fireworks-intro .intro-romantic-quote{display:none!important}
.intro-open .starlight-tabbar{display:none!important}

/* Player: thin floating glass strip, less "game UI" */
.ocean-player{
  bottom:calc(max(16px,env(safe-area-inset-bottom) + 12px))!important;
  width:min(calc(100% - 72px),400px)!important;height:50px!important;
  grid-template-columns:36px minmax(0,1fr) auto!important;gap:8px!important;padding:5px 10px!important;
  border:1px solid rgba(230,238,251,.17)!important;
  background:linear-gradient(180deg,rgba(9,31,63,.38),rgba(4,20,47,.50))!important;
  box-shadow:0 9px 26px rgba(0,5,23,.20),inset 0 1px rgba(255,255,255,.045)!important;
  backdrop-filter:blur(18px) saturate(1.08)!important;-webkit-backdrop-filter:blur(18px) saturate(1.08)!important
}
.ocean-player-cover{width:34px!important;height:34px!important;border-color:rgba(255,255,255,.22)!important;box-shadow:none!important}
.ocean-player-meta strong{font-size:10.8px!important;font-weight:500!important}
.ocean-player-meta span{font-size:7.8px!important;color:rgba(236,240,248,.52)!important}
.ocean-player-controls{gap:0!important}
.ocean-player-controls button{width:24px!important;min-width:24px!important;height:30px!important;font-size:14px!important;opacity:.86}
.ocean-player-controls .ocean-player-main{
  width:34px!important;min-width:34px!important;height:34px!important;
  border-color:rgba(255,222,148,.62)!important;box-shadow:0 0 11px rgba(255,212,118,.10)!important
}
.ocean-playlist{bottom:58px!important;background:rgba(4,20,47,.84)!important}

/* Animated jellyfish color pipeline stays fixed sRGB; only luminance/opacity breathes. */
.fireworks-intro.is-v103-ocean .fireworks-canvas{
  z-index:12!important;pointer-events:none!important;
  image-rendering:auto!important;
}

/* 2-minute letter: quiet envelope, surrounded by breathing bubbles */
.falling-love-letter{
  opacity:0!important;
  transform:translate3d(-50%,18px,0) scale(.88)!important;
  transition:opacity .8s ease,transform 1.2s cubic-bezier(.18,.78,.18,1)!important;
}
.falling-love-letter.is-arrived{
  opacity:1!important;
  transform:translate3d(-50%,0,0) scale(1)!important;
}
.falling-love-letter.is-arrived .mini-envelope{
  animation:v103EnvelopeBreathe 3.4s ease-in-out infinite!important;
}
.falling-love-letter.is-arrived .love-letter-bubbles i{
  animation:v100BubbleBreath 3.8s ease-in-out infinite,v103BubbleDrift 7s linear infinite!important;
}
@keyframes v103EnvelopeBreathe{
  0%,100%{transform:translateY(0) rotate(-1deg) scale(.98)}
  48%{transform:translateY(-5px) rotate(1deg) scale(1.025)}
}
@keyframes v103BubbleDrift{
  0%{translate:0 16px;opacity:.18}
  30%{opacity:.48}
  100%{translate:0 -42px;opacity:0}
}

/* Same rendering strategy across Xiaomi/iPhone: avoid blend/hue filters. */
@media(max-aspect-ratio:9/20.8){
  .scene-direct-v103 .v103-ocean-slide{object-position:50% 50%!important}
}
@media(min-aspect-ratio:9/18.6){
  .scene-direct-v103 .v103-ocean-slide{object-position:50% 52%!important}
}


/* =========================================================
   V104 — visible scene arrows + real-jelly motion refinement
   ========================================================= */
.fireworks-intro.is-v104-ocean{height:100svh!important;min-height:100svh!important;overflow:hidden!important;background:#031a38!important}
.fireworks-intro.is-v104-ocean ~ .starlight-tabbar{display:none!important}

/* arrows deliberately visible, but quiet/translucent */
.ocean-scene-arrows{position:absolute;inset:0;z-index:31;pointer-events:none}
.ocean-scene-arrows button{
  position:absolute;top:50%;transform:translateY(-50%);
  width:48px;height:66px;border-radius:999px;border:1px solid rgba(235,220,182,.20);
  background:linear-gradient(180deg,rgba(5,27,57,.24),rgba(3,18,42,.34));
  color:rgba(246,224,173,.88);font-size:32px;font-weight:200;line-height:1;
  display:grid;place-items:center;padding:0;pointer-events:auto;
  box-shadow:0 8px 24px rgba(0,7,26,.18),inset 0 1px rgba(255,255,255,.045);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)
}
.ocean-scene-arrows button:first-child{left:max(10px,env(safe-area-inset-left))}
.ocean-scene-arrows button:last-child{right:max(10px,env(safe-area-inset-right))}
.ocean-scene-arrows button:active{transform:translateY(-50%) scale(.93)}
.ocean-scene-dots{bottom:72px!important}

/* Absolutely suppress the four-option dialog while homepage intro is visible */
body.intro-open .starlight-tabbar{display:none!important;visibility:hidden!important;pointer-events:none!important}

/* player remains the only bottom UI on homepage */
body.intro-open .ocean-player{bottom:calc(max(15px,env(safe-area-inset-bottom) + 10px))!important}

/* keep canvas clear and natural */
.fireworks-intro.is-v104-ocean .fireworks-canvas{z-index:12!important;pointer-events:none!important}

.fireworks-intro{height:100svh!important;min-height:100svh!important;overflow:hidden!important;background:#03182f!important}
.scene-v105{position:absolute!important;inset:0!important;z-index:0!important;overflow:hidden!important}
.scene-v105 .v103-ocean-slide{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important;object-position:center center!important;opacity:0!important;transform:scale(1.012)!important;transition:opacity 1s ease,transform 1.2s ease!important;filter:none!important}
.scene-v105 .v103-ocean-slide.is-active{opacity:1!important;transform:scale(1)!important}
.v105-legacy-canvas{display:none!important}.living-jelly-stage{position:absolute;inset:0;z-index:17;overflow:hidden;pointer-events:none}
.ocean-scene-arrows-v105{position:absolute;inset:0;z-index:34;pointer-events:none}.ocean-scene-arrows-v105 button{position:absolute;top:49%;transform:translateY(-50%);width:32px!important;height:44px!important;min-width:32px!important;border-radius:999px!important;border:1px solid rgba(239,220,174,.16)!important;background:rgba(3,22,50,.14)!important;color:rgba(247,226,177,.66)!important;font-size:24px!important;padding:0!important;opacity:.42!important;pointer-events:auto!important;backdrop-filter:blur(6px)!important}.ocean-scene-arrows-v105 button:first-child{left:7px!important}.ocean-scene-arrows-v105 button:last-child{right:7px!important}
.mailbox-entry-v105{position:absolute;z-index:45;top:max(16px,calc(env(safe-area-inset-top) + 12px));right:15px;width:46px;height:46px;border-radius:50%;border:1px solid rgba(244,218,160,.38);color:#f0d590;background:rgba(6,29,61,.20);backdrop-filter:blur(10px);font-size:19px}
.living-jelly{position:absolute;left:var(--start-x);bottom:-48vh;width:min(48vw,270px);animation:v105JellySwim var(--life) linear forwards;will-change:transform,opacity}.living-jelly.is-small{width:min(27vw,145px)}.living-jelly img{position:absolute;left:0;width:100%;height:auto}.living-jelly-tentacles{top:23%;transform-origin:50% 4%;animation:v105TentacleLag 2.9s ease-in-out infinite}.living-jelly-bell{top:0;z-index:2;transform-origin:50% 70%;animation:v105BellBreath 2.9s cubic-bezier(.45,.05,.22,1) infinite}
@keyframes v105BellBreath{0%,100%{transform:scaleX(1.02) scaleY(.96)}26%{transform:scaleX(.91) scaleY(1.08) translateY(2px)}39%{transform:scaleX(.88) scaleY(1.11) translateY(3px)}59%{transform:scaleX(1.05) scaleY(.93) translateY(-2px)}78%{transform:scaleX(1.02) scaleY(.96)}}
@keyframes v105TentacleLag{0%,100%{transform:translateX(0) rotate(-1deg) scaleY(.99)}27%{transform:translateX(3px) rotate(2.2deg) scaleY(1.03)}50%{transform:translateX(-4px) rotate(-2deg) scaleY(1.07)}72%{transform:translateX(5px) rotate(1.8deg) scaleY(1.02)}}
@keyframes v105JellySwim{0%{transform:translate3d(-50%,0,0) scale(.88);opacity:0}7%{opacity:.9}20%{transform:translate3d(calc(-50% + var(--drift-a)),-18vh,0) scale(.95);opacity:.86}40%{transform:translate3d(calc(-50% + var(--drift-b)),-39vh,0) scale(1);opacity:.78}60%{transform:translate3d(calc(-50% + var(--drift-a)),-57vh,0) scale(1.02);opacity:.63}78%{transform:translate3d(calc(-50% + var(--drift-b)),-70vh,0) scale(1.03);opacity:.43}92%{transform:translate3d(calc(-50% + var(--drift-a)),-80vh,0) scale(1.04);opacity:.18}100%{transform:translate3d(-50%,-86vh,0) scale(1.05);opacity:0}}
.player-v105{position:absolute!important;z-index:50!important;left:50%!important;transform:translateX(-50%)!important;bottom:calc(max(10px,env(safe-area-inset-bottom) + 7px))!important;width:min(calc(100% - 20px),520px)!important;min-height:102px!important;height:auto!important;display:grid!important;grid-template-columns:54px minmax(0,1fr) auto!important;grid-template-rows:auto 26px!important;gap:3px 9px!important;padding:8px 12px 7px!important;border-radius:29px!important;border:1px solid rgba(210,229,255,.28)!important;background:linear-gradient(180deg,rgba(8,34,70,.74),rgba(4,23,52,.82))!important;box-shadow:0 10px 32px rgba(0,5,22,.28),inset 0 1px rgba(255,255,255,.06)!important;backdrop-filter:blur(20px) saturate(1.14)!important;color:#f4f7fc!important}
.player-v105 .ocean-player-cover{grid-row:1/span 2;width:52px!important;height:52px!important;border-radius:50%!important;align-self:center;object-fit:cover;border:1px solid rgba(218,234,255,.42)!important}.player-v105 .ocean-player-meta{align-self:center!important;min-width:0}.player-v105 .ocean-player-meta strong{font-size:13px!important;font-weight:500!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.player-v105 .ocean-player-meta span{font-size:9px!important;color:rgba(231,237,247,.58)!important}.player-v105 .ocean-player-controls{display:flex!important;align-items:center!important;gap:2px!important}.player-v105 .ocean-player-controls button{width:30px!important;height:34px!important;min-width:30px!important;border:0!important;background:transparent!important;color:rgba(247,249,253,.92)!important;padding:0!important;font-size:11px!important}.player-v105 .ocean-player-controls .ocean-player-main{width:42px!important;height:42px!important;min-width:42px!important;border-radius:50%!important;border:1.5px solid rgba(255,221,145,.82)!important;color:#ffe09a!important;box-shadow:0 0 14px rgba(255,208,108,.16)!important}
.ocean-player-progress{grid-column:2/4;grid-row:2;display:grid;grid-template-columns:34px 1fr 34px;align-items:center;gap:6px;font-size:8px;color:rgba(231,237,248,.58)}.ocean-player-progress input{-webkit-appearance:none;appearance:none;width:100%;height:2px;border-radius:999px;background:linear-gradient(90deg,rgba(208,144,255,.74),rgba(223,233,249,.52));outline:none}.ocean-player-progress input::-webkit-slider-thumb{-webkit-appearance:none;width:9px;height:9px;border-radius:50%;background:#fff1c5;box-shadow:0 0 8px rgba(255,223,152,.35)}
body.intro-open .starlight-tabbar{display:none!important;visibility:hidden!important;pointer-events:none!important}
.love-letter-v105{position:absolute;z-index:44;left:50%;top:56%;width:min(47vw,205px);transform:translate(-50%,24px) scale(.85);opacity:0;transition:opacity .9s ease,transform 1.15s cubic-bezier(.16,.8,.18,1)}.love-letter-v105.is-arrived{opacity:1;transform:translate(-50%,0) scale(1)}.love-letter-visual-v105{position:relative;width:100%;border:0;background:transparent;padding:0}.love-letter-visual-v105 img{width:100%;display:block;filter:drop-shadow(0 8px 18px rgba(0,5,25,.23))}.love-letter-open-wrap{display:none;position:relative}.love-letter-v105.is-open .love-letter-closed-img{display:none}.love-letter-v105.is-open .love-letter-open-wrap{display:block}.love-letter-open-wrap p{position:absolute;left:25%;right:19%;top:39%;margin:0;text-align:center;color:#745c63;font-family:"Kaiti SC","STKaiti","KaiTi","Songti SC",serif;font-size:clamp(9px,2.6vw,12px);line-height:1.65}
.love-letter-bubbles-v105{position:absolute;inset:-38px -28px;pointer-events:none}.love-letter-bubbles-v105 i{position:absolute;width:8px;height:8px;border-radius:50%;border:1px solid rgba(202,232,255,.40);background:radial-gradient(circle at 35% 28%,rgba(255,255,255,.38),rgba(108,194,255,.06) 58%,transparent 70%);animation:v105Bubble 6s linear infinite;opacity:.32}.love-letter-bubbles-v105 i:nth-child(1){left:7%;top:80%;animation-delay:-1s}.love-letter-bubbles-v105 i:nth-child(2){left:22%;top:92%;width:5px;height:5px;animation-delay:-3s}.love-letter-bubbles-v105 i:nth-child(3){left:39%;top:77%;width:11px;height:11px;animation-delay:-2s}.love-letter-bubbles-v105 i:nth-child(4){left:58%;top:89%;width:6px;height:6px;animation-delay:-4s}.love-letter-bubbles-v105 i:nth-child(5){left:75%;top:73%;width:10px;height:10px;animation-delay:-.4s}.love-letter-bubbles-v105 i:nth-child(6){left:91%;top:84%;width:5px;height:5px;animation-delay:-2.6s}.love-letter-bubbles-v105 i:nth-child(7){left:48%;top:96%;width:4px;height:4px;animation-delay:-4.8s}@keyframes v105Bubble{0%{transform:translateY(18px) scale(.74);opacity:.12}30%{opacity:.44}72%{opacity:.30}100%{transform:translateY(-44px) scale(1.08);opacity:0}}


/* =========================================================
   V106 — function fix + compact player + transparent mailbox
   ========================================================= */

/* Make sure the carousel arrows are visible but very small and quiet */
.ocean-scene-arrows-v105 button{
  width:28px!important;
  min-width:28px!important;
  height:40px!important;
  min-height:40px!important;
  font-size:21px!important;
  opacity:.30!important;
  background:rgba(2,20,45,.08)!important;
  border-color:rgba(239,220,174,.13)!important;
  box-shadow:none!important;
}
.ocean-scene-arrows-v105 button:active{opacity:.78!important}

/* Smaller, cleaner top-right mailbox icon */
.mailbox-entry-v106{
  width:42px!important;
  height:42px!important;
  top:max(12px,calc(env(safe-area-inset-top) + 9px))!important;
  right:max(12px,env(safe-area-inset-right))!important;
  padding:0!important;
  border:1px solid rgba(235,218,178,.27)!important;
  background:rgba(4,27,57,.10)!important;
  box-shadow:none!important;
  backdrop-filter:blur(7px)!important;
  -webkit-backdrop-filter:blur(7px)!important;
}
.mailbox-entry-v106 svg{
  width:21px;
  height:21px;
  fill:none;
  stroke:rgba(244,224,177,.82);
  stroke-width:1.25;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* Move player to the absolute bottom and make it more refined/compact */
.player-v105{
  bottom:max(3px,env(safe-area-inset-bottom))!important;
  width:min(calc(100% - 18px),460px)!important;
  min-height:78px!important;
  grid-template-columns:44px minmax(0,1fr) auto!important;
  grid-template-rows:auto 20px!important;
  gap:1px 7px!important;
  padding:6px 9px 5px!important;
  border-radius:24px!important;
  background:
    radial-gradient(circle at 76% 6%,rgba(91,164,236,.07),transparent 30%),
    linear-gradient(180deg,rgba(7,29,62,.55),rgba(4,20,45,.68))!important;
  border-color:rgba(212,228,249,.19)!important;
  box-shadow:0 7px 23px rgba(0,5,22,.18),inset 0 1px rgba(255,255,255,.045)!important;
  backdrop-filter:blur(16px) saturate(1.08)!important;
  -webkit-backdrop-filter:blur(16px) saturate(1.08)!important;
}
.player-v105 .ocean-player-cover{
  width:42px!important;height:42px!important;
  border-color:rgba(218,234,255,.28)!important;
}
.player-v105 .ocean-player-meta strong{font-size:11.5px!important}
.player-v105 .ocean-player-meta span{font-size:7.8px!important}
.player-v105 .ocean-player-controls{gap:0!important}
.player-v105 .ocean-player-controls button{
  width:25px!important;
  min-width:25px!important;
  height:28px!important;
  font-size:10px!important;
  opacity:.85!important;
}
.player-v105 .ocean-player-controls .ocean-player-main{
  width:34px!important;
  min-width:34px!important;
  height:34px!important;
  border-width:1px!important;
  box-shadow:0 0 9px rgba(255,208,108,.10)!important;
}
.ocean-player-progress{
  grid-template-columns:29px 1fr 29px!important;
  gap:4px!important;
  font-size:7px!important;
}
.ocean-player-progress input{height:1.5px!important}

/* Keep living jelly stage above background and below controls */
.living-jelly-stage{z-index:20!important}
.ocean-scene-arrows-v105{z-index:40!important}
.mailbox-entry-v106{z-index:48!important}
.player-v105{z-index:52!important}


/* =========================================================
   V107 — recording fixes
   ========================================================= */

/* When homepage intro is gone, the four main sections MUST return. */
.fireworks-intro[hidden] ~ .starlight-tabbar,
body:not(.intro-open) .starlight-tabbar{
  display:grid!important;
  visibility:visible!important;
  pointer-events:auto!important;
  opacity:1!important;
}

/* Homepage itself still hides the four-section bar. */
body.intro-open .starlight-tabbar{
  display:none!important;
  visibility:hidden!important;
  pointer-events:none!important;
}

/* Three uploaded backgrounds: never substitute black/star-only legacy scenes. */
.scene-v105 .v103-ocean-slide{
  object-position:50% 50%!important;
  background:#052451!important;
}
.scene-v105 .v103-ocean-slide.is-active{
  opacity:1!important;
}

/* Corrected cutout jellyfish: brighter transparent edge, no muddy runtime recoloring. */
.living-jelly img{
  filter:drop-shadow(0 0 7px rgba(161,180,255,.12));
}
.living-jelly.is-big{
  width:min(46vw,250px)!important;
}
.living-jelly.is-small{
  width:min(25vw,132px)!important;
}

/* Slightly slower/longer swim so jelly remains visible and feels alive. */
@keyframes v105JellySwim{
  0%{transform:translate3d(-50%,0,0) scale(.88);opacity:0}
  7%{opacity:.88}
  22%{transform:translate3d(calc(-50% + var(--drift-a)),-17vh,0) scale(.94);opacity:.85}
  44%{transform:translate3d(calc(-50% + var(--drift-b)),-35vh,0) scale(.99);opacity:.79}
  64%{transform:translate3d(calc(-50% + var(--drift-a)),-50vh,0) scale(1.01);opacity:.66}
  80%{transform:translate3d(calc(-50% + var(--drift-b)),-62vh,0) scale(1.02);opacity:.48}
  92%{transform:translate3d(calc(-50% + var(--drift-a)),-70vh,0) scale(1.03);opacity:.24}
  100%{transform:translate3d(-50%,-75vh,0) scale(1.03);opacity:0}
}


/* =========================================================
   V108 checked edition
   ========================================================= */

/* background slides: only the 3 uploaded images, never black fallback */
.scene-v105{background:#07346b!important}
.scene-v105 .v103-ocean-slide{
  opacity:0!important;
  visibility:hidden!important;
  transition:opacity .72s ease!important;
  transform:none!important;
  filter:none!important;
}
.scene-v105 .v103-ocean-slide.is-active{
  opacity:1!important;
  visibility:visible!important;
}

/* intact jelly: one complete image is always present, so body cannot split apart */
.living-jelly-v108{
  position:absolute;
  left:var(--start-x);
  bottom:-44vh;
  width:min(43vw,240px);
  animation:v108JellySwim var(--life) cubic-bezier(.20,.48,.22,1) forwards;
  transform-origin:50% 15%;
  will-change:transform,opacity;
}
.living-jelly-v108.is-small{width:min(23vw,124px)}
.living-jelly-v108 img{
  position:absolute;inset:0;width:100%;height:auto;object-fit:contain;pointer-events:none;user-select:none
}
.living-jelly-intact-v108{
  z-index:2;
  transform-origin:50% 18%;
  animation:v108BellBreath 2.75s cubic-bezier(.45,.08,.24,1) infinite;
  filter:drop-shadow(0 0 8px rgba(165,176,255,.12));
}
/* lower duplicate is masked and subtle: adds tentacle lag without breaking the intact main body */
.living-jelly-tentacle-lag-v108{
  z-index:3;
  opacity:.22;
  transform-origin:50% 24%;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,transparent 27%,rgba(0,0,0,.25) 38%,#000 57%,#000 100%);
  mask-image:linear-gradient(to bottom,transparent 0%,transparent 27%,rgba(0,0,0,.25) 38%,#000 57%,#000 100%);
  animation:v108TentacleLag 2.75s ease-in-out infinite;
}
@keyframes v108BellBreath{
  0%,100%{transform:scaleX(1.012) scaleY(.985)}
  20%{transform:scaleX(.968) scaleY(1.028) translateY(1px)}
  31%{transform:scaleX(.948) scaleY(1.047) translateY(2px)}
  47%{transform:scaleX(1.028) scaleY(.972) translateY(-2px)}
  68%{transform:scaleX(1.016) scaleY(.982)}
}
@keyframes v108TentacleLag{
  0%,100%{transform:translateX(0) rotate(-.5deg) scaleY(1)}
  27%{transform:translateX(2.5px) rotate(1.5deg) scaleY(1.018)}
  49%{transform:translateX(-3px) rotate(-1.3deg) scaleY(1.038)}
  73%{transform:translateX(3.5px) rotate(1.2deg) scaleY(1.012)}
}
@keyframes v108JellySwim{
  0%{transform:translate3d(-50%,0,0) scale(.90);opacity:0}
  7%{opacity:.92}
  22%{transform:translate3d(calc(-50% + var(--drift-a)),-15vh,0) scale(.95);opacity:.90}
  43%{transform:translate3d(calc(-50% + var(--drift-b)),-32vh,0) scale(.99);opacity:.86}
  60%{transform:translate3d(calc(-50% + var(--drift-a)),-45vh,0) scale(1.01);opacity:.78}
  72%{transform:translate3d(calc(-50% + var(--drift-b)),-54vh,0) scale(1.02);opacity:.66}
  84%{transform:translate3d(calc(-50% + var(--drift-a)),-62vh,0) scale(1.025);opacity:.43}
  94%{transform:translate3d(calc(-50% + var(--drift-b)),-69vh,0) scale(1.03);opacity:.19}
  100%{transform:translate3d(-50%,-74vh,0) scale(1.03);opacity:0}
}

/* player: smaller, lower, delicate, still fully usable */
.player-v105{
  bottom:max(1px,env(safe-area-inset-bottom))!important;
  width:min(calc(100% - 24px),420px)!important;
  min-height:66px!important;
  grid-template-columns:38px minmax(0,1fr) auto!important;
  grid-template-rows:auto 16px!important;
  gap:0 6px!important;
  padding:5px 8px 4px!important;
  border-radius:21px!important;
  background:linear-gradient(180deg,rgba(7,29,61,.47),rgba(3,19,44,.58))!important;
  border-color:rgba(214,229,248,.16)!important;
  box-shadow:0 5px 18px rgba(0,5,22,.14),inset 0 1px rgba(255,255,255,.04)!important;
  backdrop-filter:blur(14px) saturate(1.06)!important;
  -webkit-backdrop-filter:blur(14px) saturate(1.06)!important;
}
.player-v105 .ocean-player-cover{width:36px!important;height:36px!important}
.player-v105 .ocean-player-meta strong{font-size:10.5px!important}
.player-v105 .ocean-player-meta span{font-size:7px!important}
.player-v105 .ocean-player-controls button{width:22px!important;min-width:22px!important;height:25px!important;font-size:9px!important}
.player-v105 .ocean-player-controls .ocean-player-main{width:30px!important;min-width:30px!important;height:30px!important}
.ocean-player-progress{grid-template-columns:25px 1fr 25px!important;gap:3px!important;font-size:6.5px!important}

/* arrows kept compact and dependable */
.ocean-scene-arrows-v105 button{
  width:26px!important;min-width:26px!important;height:38px!important;min-height:38px!important;
  font-size:19px!important;opacity:.34!important
}


/* ===== V109 cross-phone rendering: Xiaomi 14 Ultra / iPhone ===== */
html,body{width:100%;max-width:100%;overflow-x:hidden;background:#031832}
.fireworks-intro{
  width:100vw!important;
  height:100vh!important;
  height:100svh!important;
  height:100dvh!important;
  min-height:100vh!important;
  min-height:100svh!important;
  min-height:100dvh!important;
  overflow:hidden!important;
  overscroll-behavior:none;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
.fireworks-scenes,.fireworks-scenes .fireworks-scene{
  width:100%!important;height:100%!important;inset:0!important;
}
.fireworks-scenes .fireworks-scene{
  object-fit:cover!important;
  object-position:50% 50%!important;
  image-rendering:auto;
  -webkit-user-drag:none;
}
/* V109 uses original image color without browser-dependent extra filter differences. */
.fireworks-intro .fireworks-scenes .fireworks-scene{filter:none!important}
.v105-legacy-canvas{display:none!important}
.living-jelly-stage{position:absolute!important;inset:0!important;overflow:hidden!important;pointer-events:none!important;z-index:24!important}
.living-jelly-v108{will-change:transform,opacity!important;transform:translate3d(var(--start-x),18vh,0)}
.living-jelly-intact-v108,.living-jelly-tentacle-lag-v108{
  -webkit-backface-visibility:hidden;backface-visibility:hidden;
  transform:translateZ(0);
}
.ocean-player{
  left:50%!important;
  transform:translateX(-50%) translateZ(0)!important;
  bottom:max(2px,env(safe-area-inset-bottom))!important;
  width:min(calc(100% - 22px),410px)!important;
}
/* Keep controls large enough to tap while visually compact. */
.ocean-player button{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
@media (min-width:430px){
  .ocean-player{width:min(calc(100% - 28px),420px)!important}
}

/* ===== V112 exact user jelly + natural swim ===== */
.living-jelly-v108{
  bottom:-40vh!important;
  animation:v112NaturalSwim var(--life) cubic-bezier(.20,.52,.22,1) forwards!important;
}
.living-jelly-v108.is-big{width:min(43vw,238px)!important}
.living-jelly-v108.is-small{width:min(22vw,118px)!important}
.living-jelly-intact-v108{
  animation:v112WholeBreath 2.9s cubic-bezier(.44,.05,.25,1) infinite!important;
  transform-origin:50% 18%!important;
}
.living-jelly-tentacle-lag-v108{
  opacity:.15!important;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,transparent 31%,rgba(0,0,0,.12) 39%,#000 58%,#000 100%)!important;
  mask-image:linear-gradient(to bottom,transparent 0%,transparent 31%,rgba(0,0,0,.12) 39%,#000 58%,#000 100%)!important;
  animation:v112TentacleFlow 2.9s ease-in-out infinite!important;
}
@keyframes v112WholeBreath{
  0%,100%{transform:scaleX(1) scaleY(1) translateY(0)}
  18%{transform:scaleX(.985) scaleY(1.018) translateY(1px)}
  30%{transform:scaleX(.958) scaleY(1.042) translateY(2px)}
  46%{transform:scaleX(1.022) scaleY(.982) translateY(-2px)}
  66%{transform:scaleX(1.008) scaleY(.994) translateY(-1px)}
}
@keyframes v112TentacleFlow{
  0%,100%{transform:translate3d(0,1px,0) rotate(-.35deg) scaleY(1)}
  25%{transform:translate3d(2px,3px,0) rotate(.75deg) scaleY(1.012)}
  48%{transform:translate3d(-2px,6px,0) rotate(-.8deg) scaleY(1.028)}
  72%{transform:translate3d(2.5px,3px,0) rotate(.65deg) scaleY(1.012)}
}
@keyframes v112NaturalSwim{
  0%{transform:translate3d(-50%,0,0) scale(.94);opacity:0}
  6%{opacity:.96}
  18%{transform:translate3d(calc(-50% + var(--drift-a)),-14vh,0) scale(.97);opacity:.95}
  36%{transform:translate3d(calc(-50% + var(--drift-b)),-31vh,0) scale(1);opacity:.94}
  54%{transform:translate3d(calc(-50% + var(--drift-a)),-47vh,0) scale(1.015);opacity:.91}
  67%{transform:translate3d(calc(-50% + var(--drift-b)),-57vh,0) scale(1.02);opacity:.84}
  78%{transform:translate3d(calc(-50% + var(--drift-a)),-65vh,0) scale(1.025);opacity:.62}
  88%{transform:translate3d(calc(-50% + var(--drift-b)),-72vh,0) scale(1.03);opacity:.38}
  96%{transform:translate3d(calc(-50% + var(--drift-a)),-78vh,0) scale(1.03);opacity:.13}
  100%{transform:translate3d(-50%,-82vh,0) scale(1.03);opacity:0}
}

/* =========================================================
   V113 jelly travel: remain visible across almost the entire page.
   Fade only after the bell reaches the upper region.
   ========================================================= */
.living-jelly-v108{
  bottom:-33vh!important;
  animation:v113JellyFullTravel var(--life) cubic-bezier(.18,.48,.20,1) forwards!important;
}
.living-jelly-v108.is-big{width:min(45vw,250px)!important}
.living-jelly-v108.is-small{width:min(23vw,126px)!important}
.living-jelly-intact-v108{
  animation:v113JellyBreath 2.85s cubic-bezier(.42,.06,.24,1) infinite!important;
  transform-origin:50% 17%!important;
}
.living-jelly-tentacle-lag-v108{
  opacity:.12!important;
  animation:v113TentacleFlow 2.85s ease-in-out infinite!important;
}
@keyframes v113JellyBreath{
  0%,100%{transform:scaleX(1) scaleY(1) translateY(0)}
  18%{transform:scaleX(.985) scaleY(1.015) translateY(1px)}
  30%{transform:scaleX(.962) scaleY(1.038) translateY(2px)}
  45%{transform:scaleX(1.018) scaleY(.985) translateY(-2px)}
  66%{transform:scaleX(1.006) scaleY(.996) translateY(-1px)}
}
@keyframes v113TentacleFlow{
  0%,100%{transform:translate3d(0,1px,0) rotate(-.25deg) scaleY(1)}
  24%{transform:translate3d(1.7px,3px,0) rotate(.6deg) scaleY(1.01)}
  48%{transform:translate3d(-2px,6px,0) rotate(-.7deg) scaleY(1.025)}
  72%{transform:translate3d(2px,3px,0) rotate(.55deg) scaleY(1.01)}
}
@keyframes v113JellyFullTravel{
  0%  {transform:translate3d(-50%,0,0) scale(.94);opacity:0}
  4%  {opacity:.98}
  18% {transform:translate3d(calc(-50% + var(--drift-a)),-18vh,0) scale(.97);opacity:.98}
  36% {transform:translate3d(calc(-50% + var(--drift-b)),-39vh,0) scale(1);opacity:.97}
  54% {transform:translate3d(calc(-50% + var(--drift-a)),-61vh,0) scale(1.01);opacity:.96}
  70% {transform:translate3d(calc(-50% + var(--drift-b)),-79vh,0) scale(1.02);opacity:.93}
  80% {transform:translate3d(calc(-50% + var(--drift-a)),-91vh,0) scale(1.025);opacity:.88}
  87% {transform:translate3d(calc(-50% + var(--drift-b)),-100vh,0) scale(1.03);opacity:.72}
  93% {transform:translate3d(calc(-50% + var(--drift-a)),-108vh,0) scale(1.03);opacity:.42}
  97% {transform:translate3d(calc(-50% + var(--drift-b)),-114vh,0) scale(1.03);opacity:.18}
  100%{transform:translate3d(-50%,-120vh,0) scale(1.03);opacity:0}
}

/* Exact 3 backgrounds on iPhone + Xiaomi/Android */
#oceanSceneCarousel{
  position:absolute!important;inset:0!important;overflow:hidden!important;
  touch-action:pan-y!important;
}
#oceanSceneCarousel .v103-ocean-slide{
  position:absolute!important;inset:0!important;
  width:100%!important;height:100%!important;
  object-fit:cover!important;
  object-position:center center!important;
  transition:opacity .38s ease!important;
  -webkit-user-select:none!important;user-select:none!important;
  pointer-events:none!important;
}

/* =========================================================
   V114 — recording-based visual fixes
   ========================================================= */

/* Full-image scene fit on all phones:
   sharp original remains fully visible; same-image blurred fill occupies spare aspect area. */
#oceanSceneCarousel .v103-ocean-slide{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  overflow:hidden!important;
  background:#061d42!important;
  opacity:0!important;
  visibility:hidden!important;
  display:block!important;
  transition:opacity .42s ease!important;
}
#oceanSceneCarousel .v103-ocean-slide::before{
  content:"";
  position:absolute;
  inset:-6%;
  background-image:var(--scene-image);
  background-size:cover;
  background-position:center;
  filter:blur(18px) brightness(.72) saturate(.95);
  transform:scale(1.08);
  opacity:.78;
}
#oceanSceneCarousel .v103-ocean-slide.is-active{
  opacity:1!important;
  visibility:visible!important;
  z-index:2!important;
}
#oceanSceneCarousel .v114-scene-fit{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  object-position:center center!important;
  z-index:2!important;
  pointer-events:none!important;
  user-select:none!important;
  -webkit-user-drag:none!important;
}

/* Mailbox entry: only a floating transparent line envelope, NO circle. */
.mailbox-entry-v106,
.mailbox-entry-v105,
#enterMailbox{
  width:30px!important;
  height:24px!important;
  min-width:30px!important;
  min-height:24px!important;
  padding:2px!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  opacity:.72!important;
}
#enterMailbox::before,#enterMailbox::after{display:none!important}
#enterMailbox svg{
  width:22px!important;
  height:18px!important;
  opacity:.82!important;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.15))!important;
}

/* Player: about half the former visual height, fixed at bottom safe area. */
.player-v105,
.ocean-player{
  width:min(calc(100% - 34px),360px)!important;
  min-height:38px!important;
  max-height:42px!important;
  grid-template-columns:26px minmax(0,1fr) auto!important;
  grid-template-rows:24px 8px!important;
  gap:0 5px!important;
  padding:3px 7px 2px!important;
  bottom:max(1px,env(safe-area-inset-bottom))!important;
  border-radius:15px!important;
  background:linear-gradient(180deg,rgba(5,26,57,.40),rgba(3,17,39,.52))!important;
  border:1px solid rgba(225,237,255,.12)!important;
  box-shadow:0 3px 12px rgba(0,5,18,.13)!important;
  backdrop-filter:blur(11px) saturate(1.03)!important;
  -webkit-backdrop-filter:blur(11px) saturate(1.03)!important;
}
.ocean-player-cover{width:24px!important;height:24px!important;border-radius:7px!important}
.ocean-player-meta{min-width:0!important;line-height:1!important}
.ocean-player-meta strong{font-size:8px!important;line-height:9px!important}
.ocean-player-meta span{font-size:5.5px!important;line-height:7px!important;opacity:.58!important}
.ocean-player-controls{gap:1px!important}
.ocean-player-controls button{
  width:16px!important;min-width:16px!important;height:19px!important;min-height:19px!important;
  padding:0!important;font-size:7px!important
}
.ocean-player-controls .ocean-player-main{
  width:23px!important;min-width:23px!important;height:23px!important;min-height:23px!important;font-size:8px!important
}
.ocean-player-progress{
  grid-template-columns:19px 1fr 19px!important;
  gap:2px!important;
  font-size:5px!important;
  line-height:7px!important;
}
.ocean-player-progress input{height:7px!important}

/* Realer jelly: keep a faint connected whole-body core, animate bell & tentacles independently. */
.living-jelly-v108 img{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:auto!important;
  object-fit:contain!important;
  pointer-events:none!important;
  user-select:none!important;
}
.living-jelly-core-v114{
  z-index:1!important;
  opacity:.28!important;
  transform-origin:50% 20%!important;
}
.living-jelly-bell-v114{
  z-index:3!important;
  transform-origin:50% 16%!important;
  animation:v114BellPulse 2.55s cubic-bezier(.42,.04,.22,1) infinite!important;
  will-change:transform;
}
.living-jelly-tentacles-v114{
  z-index:2!important;
  transform-origin:50% 27%!important;
  animation:v114TentacleWave 2.55s cubic-bezier(.37,.05,.34,1) infinite!important;
  will-change:transform;
}
@keyframes v114BellPulse{
  0%,100%{transform:translateY(0) scaleX(1.00) scaleY(1.00)}
  12%{transform:translateY(1px) scaleX(.982) scaleY(1.010)}
  24%{transform:translateY(3px) scaleX(.935) scaleY(1.055)}
  33%{transform:translateY(2px) scaleX(.955) scaleY(1.040)}
  48%{transform:translateY(-2px) scaleX(1.038) scaleY(.967)}
  63%{transform:translateY(-1px) scaleX(1.018) scaleY(.985)}
  80%{transform:translateY(0) scaleX(1.006) scaleY(.996)}
}
@keyframes v114TentacleWave{
  0%,100%{transform:translate3d(0,0,0) skewX(0deg) rotate(0deg) scaleY(1)}
  18%{transform:translate3d(1px,2px,0) skewX(.5deg) rotate(.25deg) scaleY(1.012)}
  30%{transform:translate3d(3px,7px,0) skewX(1.4deg) rotate(.65deg) scaleY(1.038)}
  47%{transform:translate3d(-2px,9px,0) skewX(-1.1deg) rotate(-.45deg) scaleY(1.052)}
  64%{transform:translate3d(-3px,4px,0) skewX(-1.4deg) rotate(-.7deg) scaleY(1.028)}
  82%{transform:translate3d(2px,1px,0) skewX(.8deg) rotate(.35deg) scaleY(1.006)}
}

/* Mobile sizing consistency */
@supports (height:100dvh){
  .fireworks-intro{height:100dvh!important;min-height:100dvh!important}
}
@media (max-width:430px){
  .living-jelly-v108.is-big{width:min(43vw,220px)!important}
  .living-jelly-v108.is-small{width:min(21vw,108px)!important}
}

/* ===== V115 final mobile fixes ===== */
.fireworks-intro{
  width:100vw!important;height:100vh!important;min-height:100vh!important;overflow:hidden!important;
}
@supports (height:100svh){.fireworks-intro{height:100svh!important;min-height:100svh!important}}
@supports (height:100dvh){.fireworks-intro{height:100dvh!important;min-height:100dvh!important}}

#oceanSceneCarousel{
  position:absolute!important;inset:0!important;width:100%!important;height:100%!important;
  overflow:hidden!important;background:#061c43!important;touch-action:pan-y!important;
}
#oceanSceneCarousel .v103-ocean-slide{
  position:absolute!important;inset:0!important;width:100%!important;height:100%!important;
  overflow:hidden!important;display:block!important;opacity:0!important;visibility:hidden!important;
  transition:opacity .42s ease!important;background:#061c43!important;
}
#oceanSceneCarousel .v103-ocean-slide::before{
  content:""!important;position:absolute!important;inset:-7%!important;
  background-image:var(--scene-image)!important;background-size:cover!important;
  background-position:center center!important;background-repeat:no-repeat!important;
  filter:blur(20px) brightness(.66) saturate(.94)!important;
  transform:scale(1.10)!important;opacity:.84!important;
}
#oceanSceneCarousel .v103-ocean-slide.is-active{
  opacity:1!important;visibility:visible!important;z-index:2!important;
}
#oceanSceneCarousel .v114-scene-fit{
  position:absolute!important;inset:0!important;width:100%!important;height:100%!important;
  object-fit:contain!important;object-position:center center!important;z-index:2!important;
  pointer-events:none!important;-webkit-user-drag:none!important;user-select:none!important;
}

/* bottom player: about one third of previous width */
.ocean-player,.player-v105{
  width:clamp(116px,34vw,138px)!important;min-width:116px!important;max-width:138px!important;
  min-height:34px!important;max-height:37px!important;
  left:50%!important;transform:translateX(-50%)!important;
  bottom:max(2px,env(safe-area-inset-bottom))!important;
  grid-template-columns:20px minmax(0,1fr) auto!important;
  grid-template-rows:21px 7px!important;gap:0 3px!important;
  padding:3px 4px 2px!important;border-radius:13px!important;box-sizing:border-box!important;
}
.ocean-player-cover{width:20px!important;height:20px!important;border-radius:6px!important}
.ocean-player-meta{min-width:0!important;overflow:hidden!important}
.ocean-player-meta strong{
  display:block!important;max-width:58px!important;font-size:6.5px!important;line-height:8px!important;
  white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important
}
.ocean-player-meta span{
  display:block!important;max-width:58px!important;font-size:4.8px!important;line-height:6px!important;
  white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important
}
.ocean-player-controls{gap:0!important;flex-wrap:nowrap!important}
.ocean-player-controls button{
  width:11px!important;min-width:11px!important;height:17px!important;min-height:17px!important;
  font-size:5.5px!important;padding:0!important
}
.ocean-player-controls .ocean-player-main{
  width:17px!important;min-width:17px!important;height:17px!important;min-height:17px!important;font-size:6px!important
}
.ocean-player-progress{
  grid-column:2/4!important;grid-template-columns:15px minmax(22px,1fr) 15px!important;
  gap:1px!important;font-size:4px!important;line-height:5px!important
}
.ocean-player-progress input{height:6px!important}

/* whole intact jelly */
.living-jelly-v108{
  bottom:-36vh!important;
  animation:v115JellyToTop var(--life) cubic-bezier(.17,.42,.20,1) forwards!important;
  will-change:transform,opacity!important;
}
.living-jelly-v108.is-big{width:min(46vw,250px)!important}
.living-jelly-v108.is-small{width:min(22vw,116px)!important}
.living-jelly-whole-v115,.living-jelly-lag-v115{
  position:absolute!important;inset:0!important;width:100%!important;height:auto!important;
  object-fit:contain!important;pointer-events:none!important;user-select:none!important;-webkit-user-drag:none!important
}
.living-jelly-whole-v115{
  z-index:2!important;transform-origin:50% 16%!important;
  animation:v115JellyBreath 2.8s cubic-bezier(.40,.04,.24,1) infinite!important
}
.living-jelly-lag-v115{
  z-index:1!important;opacity:.13!important;transform-origin:50% 25%!important;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,transparent 34%,rgba(0,0,0,.10) 43%,#000 62%,#000 100%)!important;
  mask-image:linear-gradient(to bottom,transparent 0%,transparent 34%,rgba(0,0,0,.10) 43%,#000 62%,#000 100%)!important;
  animation:v115TentacleLag 2.8s ease-in-out infinite!important
}
@keyframes v115JellyBreath{
  0%,100%{transform:translate3d(0,0,0) scaleX(1) scaleY(1)}
  18%{transform:translate3d(0,1px,0) scaleX(.982) scaleY(1.018)}
  30%{transform:translate3d(0,3px,0) scaleX(.953) scaleY(1.043)}
  44%{transform:translate3d(0,-2px,0) scaleX(1.025) scaleY(.981)}
  64%{transform:translate3d(0,-1px,0) scaleX(1.010) scaleY(.993)}
  82%{transform:translate3d(0,0,0) scaleX(1.004) scaleY(.998)}
}
@keyframes v115TentacleLag{
  0%,100%{transform:translate3d(0,1px,0) rotate(-.20deg) scaleY(1)}
  25%{transform:translate3d(2px,4px,0) rotate(.55deg) scaleY(1.012)}
  48%{transform:translate3d(-2px,8px,0) rotate(-.65deg) scaleY(1.030)}
  72%{transform:translate3d(2px,4px,0) rotate(.45deg) scaleY(1.014)}
}
/* stays clear until the jelly is at the top, then fades */
@keyframes v115JellyToTop{
  0%{transform:translate3d(-50%,0,0) scale(.95);opacity:0}
  4%{transform:translate3d(calc(-50% + var(--drift-a)),-8vh,0) scale(.97);opacity:.96}
  18%{transform:translate3d(calc(-50% + var(--drift-b)),-30vh,0) scale(.99);opacity:.96}
  36%{transform:translate3d(calc(-50% + var(--drift-a)),-56vh,0) scale(1);opacity:.96}
  54%{transform:translate3d(calc(-50% + var(--drift-b)),-80vh,0) scale(1.01);opacity:.95}
  70%{transform:translate3d(calc(-50% + var(--drift-a)),-101vh,0) scale(1.015);opacity:.94}
  80%{transform:translate3d(calc(-50% + var(--drift-b)),-114vh,0) scale(1.02);opacity:.91}
  87%{transform:translate3d(calc(-50% + var(--drift-a)),-122vh,0) scale(1.02);opacity:.70}
  93%{transform:translate3d(calc(-50% + var(--drift-b)),-130vh,0) scale(1.02);opacity:.42}
  97%{transform:translate3d(calc(-50% + var(--drift-a)),-136vh,0) scale(1.02);opacity:.18}
  100%{transform:translate3d(-50%,-142vh,0) scale(1.02);opacity:0}
}
@media (max-width:430px){
  .living-jelly-v108.is-big{width:min(45vw,225px)!important}
  .living-jelly-v108.is-small{width:min(22vw,110px)!important}
  .ocean-player,.player-v105{width:clamp(116px,35vw,132px)!important}
}

/* =========================================================
   V116 — full-screen mobile backgrounds / stronger jelly / normal player
   ========================================================= */

/* Backgrounds are pre-composed as tall mobile canvases:
   original image is fully preserved, outer area is extended from the same image. */
#oceanSceneCarousel .v103-ocean-slide{
  background:#061c43!important;
}
#oceanSceneCarousel .v103-ocean-slide::before{
  display:none!important;
}
#oceanSceneCarousel .v114-scene-fit{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center center!important;
  display:block!important;
  z-index:2!important;
  pointer-events:none!important;
  -webkit-user-drag:none!important;
}
@media (orientation:landscape){
  #oceanSceneCarousel .v114-scene-fit{
    object-fit:contain!important;
    background:#061c43!important;
  }
}

/* Player back to a normal compact size — not oversized, not tiny. */
.ocean-player,.player-v105{
  width:min(76vw,310px)!important;
  min-width:248px!important;
  max-width:310px!important;
  min-height:48px!important;
  max-height:none!important;
  left:50%!important;
  transform:translateX(-50%)!important;
  bottom:max(6px,env(safe-area-inset-bottom))!important;
  grid-template-columns:34px minmax(0,1fr) auto!important;
  grid-template-rows:30px 10px!important;
  gap:1px 7px!important;
  padding:6px 8px 5px!important;
  border-radius:18px!important;
  box-sizing:border-box!important;
}
.ocean-player-cover{width:32px!important;height:32px!important;border-radius:9px!important}
.ocean-player-meta strong{
  max-width:138px!important;font-size:10px!important;line-height:13px!important;
}
.ocean-player-meta span{
  max-width:138px!important;font-size:8px!important;line-height:10px!important;
}
.ocean-player-controls{gap:2px!important}
.ocean-player-controls button{
  width:22px!important;min-width:22px!important;height:26px!important;min-height:26px!important;
  font-size:9px!important;
}
.ocean-player-controls .ocean-player-main{
  width:28px!important;min-width:28px!important;height:28px!important;min-height:28px!important;
  font-size:10px!important;
}
.ocean-player-progress{
  grid-column:2/4!important;
  grid-template-columns:26px minmax(60px,1fr) 26px!important;
  gap:3px!important;font-size:7px!important;line-height:8px!important;
}
.ocean-player-progress input{height:8px!important}

/* Jelly sizing keeps the source image proportions untouched. */
.living-jelly-v108.is-big{width:min(48vw,270px)!important}
.living-jelly-v108.is-small{width:min(24vw,125px)!important}

/* Stronger but still realistic pulse:
   contraction is quick; relaxation/glide is slower. */
.living-jelly-whole-v115{
  transform-origin:50% 17%!important;
  animation:v116JellyPulse 2.55s cubic-bezier(.30,.02,.18,1) infinite!important;
}
.living-jelly-lag-v115{
  opacity:.16!important;
  animation:v116TentacleFlow 2.55s ease-in-out infinite!important;
}
@keyframes v116JellyPulse{
  0%,100%{transform:translate3d(0,0,0) scaleX(1) scaleY(1) rotate(0deg)}
  12%{transform:translate3d(0,2px,0) scaleX(.965) scaleY(1.025) rotate(-.35deg)}
  22%{transform:translate3d(0,5px,0) scaleX(.895) scaleY(1.075) rotate(.25deg)}
  32%{transform:translate3d(0,-4px,0) scaleX(1.045) scaleY(.965) rotate(.45deg)}
  48%{transform:translate3d(0,-2px,0) scaleX(1.025) scaleY(.982) rotate(-.25deg)}
  68%{transform:translate3d(0,0,0) scaleX(1.010) scaleY(.993) rotate(.18deg)}
  86%{transform:translate3d(0,1px,0) scaleX(1.003) scaleY(.998) rotate(-.10deg)}
}
@keyframes v116TentacleFlow{
  0%,100%{transform:translate3d(0,2px,0) rotate(-.45deg) scaleY(1)}
  18%{transform:translate3d(4px,7px,0) rotate(1.15deg) scaleY(1.020)}
  34%{transform:translate3d(-5px,13px,0) rotate(-1.25deg) scaleY(1.055)}
  52%{transform:translate3d(5px,8px,0) rotate(1.05deg) scaleY(1.030)}
  72%{transform:translate3d(-3px,4px,0) rotate(-.75deg) scaleY(1.015)}
}

/* Stronger living path: the jelly is visible through the full screen,
   then fades only after it reaches the upper area. */
@keyframes v115JellyToTop{
  0%{transform:translate3d(-50%,0,0) scale(.95);opacity:0}
  4%{transform:translate3d(calc(-50% + var(--drift-a)),-8vh,0) scale(.97);opacity:.97}
  16%{transform:translate3d(calc(-50% + var(--drift-b)),-28vh,0) scale(.99);opacity:.97}
  32%{transform:translate3d(calc(-50% + var(--drift-a)),-52vh,0) scale(1);opacity:.97}
  48%{transform:translate3d(calc(-50% + var(--drift-b)),-76vh,0) scale(1.01);opacity:.96}
  64%{transform:translate3d(calc(-50% + var(--drift-a)),-98vh,0) scale(1.015);opacity:.95}
  78%{transform:translate3d(calc(-50% + var(--drift-b)),-116vh,0) scale(1.02);opacity:.93}
  86%{transform:translate3d(calc(-50% + var(--drift-a)),-126vh,0) scale(1.02);opacity:.78}
  92%{transform:translate3d(calc(-50% + var(--drift-b)),-134vh,0) scale(1.02);opacity:.52}
  97%{transform:translate3d(calc(-50% + var(--drift-a)),-142vh,0) scale(1.02);opacity:.22}
  100%{transform:translate3d(-50%,-148vh,0) scale(1.02);opacity:0}
}
@media (max-width:430px){
  .ocean-player,.player-v105{
    width:min(78vw,300px)!important;
    min-width:244px!important;
  }
  .living-jelly-v108.is-big{width:min(49vw,250px)!important}
  .living-jelly-v108.is-small{width:min(25vw,120px)!important}
}

/* V117 authoritative mobile fullscreen + jelly breathing */
#oceanSceneCarousel,.v103-ocean-carousel,.v103-ocean-slide{
  position:absolute!important;inset:0!important;width:100%!important;height:100%!important;
}
#oceanSceneCarousel .v103-ocean-slide::before,
#oceanSceneCarousel .v103-ocean-slide::after{display:none!important;content:none!important}
#oceanSceneCarousel .v114-scene-fit{
  position:absolute!important;inset:0!important;
  width:100%!important;height:100%!important;
  object-fit:cover!important;object-position:50% 50%!important;
  filter:none!important;-webkit-filter:none!important;
  transform:none!important;
  background:none!important;
}
@supports(height:100dvh){
  .fireworks-intro,#oceanSceneCarousel,.v103-ocean-carousel,.v103-ocean-slide{height:100dvh!important}
}
@supports not (height:100dvh){
  .fireworks-intro,#oceanSceneCarousel,.v103-ocean-carousel,.v103-ocean-slide{height:100vh!important}
}

/* 明显但自然：快速收伞推进，慢慢舒展开；整只水母保持完整 */
.living-jelly-whole-v115{
 transform-origin:50% 18%!important;
 animation:v117Breath 2.72s cubic-bezier(.22,.05,.16,1) infinite!important;
 will-change:transform!important;
}
.living-jelly-lag-v115{
 opacity:.19!important;
 transform-origin:50% 20%!important;
 animation:v117Tentacles 2.72s ease-in-out infinite!important;
}
@keyframes v117Breath{
 0%,100%{transform:translate3d(0,0,0) scaleX(1) scaleY(1)}
 10%{transform:translate3d(0,2px,0) scaleX(.95) scaleY(1.035)}
 20%{transform:translate3d(0,7px,0) scaleX(.84) scaleY(1.105)}
 29%{transform:translate3d(0,-6px,0) scaleX(1.07) scaleY(.945)}
 42%{transform:translate3d(0,-4px,0) scaleX(1.045) scaleY(.968)}
 60%{transform:translate3d(0,-2px,0) scaleX(1.025) scaleY(.982)}
 78%{transform:translate3d(0,0,0) scaleX(1.010) scaleY(.994)}
 91%{transform:translate3d(0,1px,0) scaleX(1.003) scaleY(.998)}
}
@keyframes v117Tentacles{
 0%,100%{transform:translate3d(0,2px,0) rotate(-.5deg) scaleY(1)}
 18%{transform:translate3d(5px,8px,0) rotate(1.4deg) scaleY(1.025)}
 31%{transform:translate3d(-7px,18px,0) rotate(-1.7deg) scaleY(1.075)}
 48%{transform:translate3d(7px,12px,0) rotate(1.45deg) scaleY(1.045)}
 67%{transform:translate3d(-5px,7px,0) rotate(-1.0deg) scaleY(1.025)}
 84%{transform:translate3d(3px,4px,0) rotate(.55deg) scaleY(1.010)}
}
/* 保持到顶部再淡出 */
@keyframes v115JellyToTop{
 0%{transform:translate3d(-50%,0,0) scale(.96);opacity:0}
 4%{transform:translate3d(calc(-50% + var(--drift-a)),-7vh,0) scale(.98);opacity:.98}
 20%{transform:translate3d(calc(-50% + var(--drift-b)),-34vh,0) scale(1);opacity:.98}
 40%{transform:translate3d(calc(-50% + var(--drift-a)),-66vh,0) scale(1.01);opacity:.98}
 60%{transform:translate3d(calc(-50% + var(--drift-b)),-96vh,0) scale(1.015);opacity:.97}
 77%{transform:translate3d(calc(-50% + var(--drift-a)),-119vh,0) scale(1.02);opacity:.95}
 86%{transform:translate3d(calc(-50% + var(--drift-b)),-130vh,0) scale(1.02);opacity:.82}
 93%{transform:translate3d(calc(-50% + var(--drift-a)),-139vh,0) scale(1.02);opacity:.48}
 100%{transform:translate3d(-50%,-151vh,0) scale(1.02);opacity:0}
}

/* V118 — single-layer jelly, no duplicate ghost fringe */
.living-jelly-lag-v115{display:none!important;opacity:0!important}

/* V118 — clearer natural jelly pulse */
.living-jelly-whole-v115{
  transform-origin:50% 17%!important;
  animation:v118Pulse 3.15s cubic-bezier(.24,.04,.18,1) infinite!important;
  will-change:transform!important;
}
@keyframes v118Pulse{
  0%,100%{transform:translate3d(0,0,0) scaleX(1) scaleY(1)}
  12%{transform:translate3d(0,2px,0) scaleX(.93) scaleY(1.04)}
  22%{transform:translate3d(0,8px,0) scaleX(.82) scaleY(1.11)}
  31%{transform:translate3d(0,-7px,0) scaleX(1.075) scaleY(.945)}
  44%{transform:translate3d(0,-4px,0) scaleX(1.045) scaleY(.968)}
  60%{transform:translate3d(0,-2px,0) scaleX(1.025) scaleY(.984)}
  78%{transform:translate3d(0,0,0) scaleX(1.010) scaleY(.994)}
  91%{transform:translate3d(0,1px,0) scaleX(1.003) scaleY(.998)}
}

/* V118 — slightly larger, clearer mailbox entry */
.mailbox-entry-v106,.mailbox-entry-v105,#enterMailbox{
  width:40px!important;height:34px!important;
  min-width:40px!important;min-height:34px!important;
  padding:2px!important;
  opacity:.94!important;
}
#enterMailbox svg{
  width:31px!important;height:25px!important;
  opacity:.98!important;
  stroke-width:1.65!important;
  filter:drop-shadow(0 1px 4px rgba(0,0,0,.36))!important;
}

/* V118 — final mobile background sizing */
#oceanSceneCarousel .v103-ocean-slide::before,
#oceanSceneCarousel .v103-ocean-slide::after{
  display:none!important;content:none!important;
}
#oceanSceneCarousel .v114-scene-fit{
  position:absolute!important;inset:0!important;
  width:100%!important;height:100%!important;
  object-fit:cover!important;
  object-position:50% 50%!important;
  filter:none!important;-webkit-filter:none!important;
  transform:none!important;
  background:none!important;
}
@supports(height:100dvh){
  .fireworks-intro,#oceanSceneCarousel,.v103-ocean-slide{
    height:100dvh!important;min-height:100dvh!important;
  }
}

/* V119 exact phone-ratio homepage masters:
   iPhone 14 390x844 CSS / 1170x2532 physical
   Xiaomi 14 Ultra 1440x3200 physical */
#oceanSceneCarousel .v114-scene-fit{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center center!important;
  filter:none!important;
  -webkit-filter:none!important;
  transform:none!important;
}
@media (max-aspect-ratio: 1170/2532){
  #oceanSceneCarousel .v114-scene-fit{
    object-fit:cover!important;
    object-position:50% 50%!important;
  }
}
@media (min-aspect-ratio: 9/20){
  #oceanSceneCarousel .v114-scene-fit{
    object-fit:cover!important;
    object-position:50% 50%!important;
  }
}

/* =========================================================
   V120 — exact three uploaded homepage images, no crop/no blur
   Only homepage image fitting is changed. Player/envelopes/timer untouched.
   ========================================================= */
#oceanSceneCarousel .v103-ocean-slide::before,
#oceanSceneCarousel .v103-ocean-slide::after{
  display:none!important;
  content:none!important;
}
#oceanSceneCarousel .v114-scene-fit{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  object-fit:fill!important;
  object-position:center center!important;
  filter:none!important;
  -webkit-filter:none!important;
  transform:none!important;
  background:none!important;
}
.fireworks-intro,
#oceanSceneCarousel,
#oceanSceneCarousel .v103-ocean-slide{
  width:100vw!important;
  height:100vh!important;
  min-height:100vh!important;
  overflow:hidden!important;
}
@supports(height:100dvh){
  .fireworks-intro,
  #oceanSceneCarousel,
  #oceanSceneCarousel .v103-ocean-slide{
    height:100dvh!important;
    min-height:100dvh!important;
  }
}

/* =========================================================
   V121 — first jelly only + clearer carousel arrows
   ========================================================= */

/* Hide every old dynamic jelly layer. */
#livingJellyStage .living-jelly-v108,
#livingJellyStage .living-jelly-lag-v115{
  display:none!important;
}

/* First jelly inspection stage:
   no old swimming/fade animation yet — we design movement next. */
.v121-first-jelly{
  position:absolute!important;
  left:50%!important;
  top:48%!important;
  width:min(46vw,250px)!important;
  transform:translate(-50%,-50%)!important;
  z-index:26!important;
  pointer-events:none!important;
  opacity:1!important;
}
.v121-first-jelly img{
  display:block!important;
  width:100%!important;
  height:auto!important;
  object-fit:contain!important;
  filter:none!important;
  -webkit-filter:none!important;
  transform:none!important;
  user-select:none!important;
  -webkit-user-drag:none!important;
}

/* Make homepage left/right arrows clearly visible, but keep the same UI style. */
.ocean-scene-arrows,
.ocean-scene-arrows-v105{
  z-index:42!important;
}
.ocean-scene-arrows button,
.ocean-scene-arrows-v105 button{
  width:42px!important;
  height:52px!important;
  min-width:42px!important;
  min-height:52px!important;
  border:1px solid rgba(255,240,202,.48)!important;
  background:rgba(3,24,58,.42)!important;
  color:rgba(255,244,211,.96)!important;
  opacity:.92!important;
  font-size:31px!important;
  font-weight:400!important;
  box-shadow:0 3px 16px rgba(0,0,0,.28),inset 0 0 12px rgba(255,255,255,.05)!important;
  -webkit-backdrop-filter:blur(6px)!important;
  backdrop-filter:blur(6px)!important;
}
.ocean-scene-arrows button:first-child,
.ocean-scene-arrows-v105 button:first-child{
  left:max(10px,env(safe-area-inset-left))!important;
}
.ocean-scene-arrows button:last-child,
.ocean-scene-arrows-v105 button:last-child{
  right:max(10px,env(safe-area-inset-right))!important;
}
.ocean-scene-arrows button:active,
.ocean-scene-arrows-v105 button:active{
  opacity:1!important;
  transform:translateY(-50%) scale(.94)!important;
}

/* =========================================================
   V122 — first jelly natural swim + stronger arrows
   ========================================================= */

/* First jelly only. Starts below viewport, remains clear through the whole screen,
   then slowly fades after reaching the upper area. */
.v122-first-jelly{
  position:absolute!important;
  left:var(--jelly-x,50%)!important;
  bottom:-34vh!important;
  width:min(48vw,270px)!important;
  z-index:26!important;
  pointer-events:none!important;
  opacity:0;
  animation:v122JellyRise 27s cubic-bezier(.18,.42,.20,1) forwards!important;
  will-change:transform,opacity!important;
}
.v122-first-jelly-img{
  display:block!important;
  width:100%!important;
  height:auto!important;
  object-fit:contain!important;
  transform-origin:50% 17%!important;
  filter:none!important;
  -webkit-filter:none!important;
  user-select:none!important;
  -webkit-user-drag:none!important;
  animation:v122JellyBreath 3.05s cubic-bezier(.24,.04,.18,1) infinite!important;
  will-change:transform!important;
}

/* Clear “close → push → relax” rhythm. */
@keyframes v122JellyBreath{
  0%,100%{transform:translate3d(0,0,0) scaleX(1) scaleY(1)}
  10%{transform:translate3d(0,2px,0) scaleX(.95) scaleY(1.035)}
  20%{transform:translate3d(0,7px,0) scaleX(.84) scaleY(1.10)}
  30%{transform:translate3d(0,-7px,0) scaleX(1.07) scaleY(.95)}
  44%{transform:translate3d(0,-4px,0) scaleX(1.045) scaleY(.97)}
  61%{transform:translate3d(0,-2px,0) scaleX(1.025) scaleY(.985)}
  79%{transform:translate3d(0,0,0) scaleX(1.01) scaleY(.994)}
  92%{transform:translate3d(0,1px,0) scaleX(1.003) scaleY(.998)}
}

/* Gentle side drift + full-height swim.
   Opacity remains ~1 until reaching the upper region. */
@keyframes v122JellyRise{
  0%{
    transform:translate3d(-50%,0,0) scale(.96);
    opacity:0;
  }
  5%{
    transform:translate3d(calc(-50% + var(--jelly-drift-a)),-10vh,0) scale(.98);
    opacity:.98;
  }
  22%{
    transform:translate3d(calc(-50% + var(--jelly-drift-b)),-36vh,0) scale(1);
    opacity:.98;
  }
  42%{
    transform:translate3d(calc(-50% + var(--jelly-drift-a)),-68vh,0) scale(1.01);
    opacity:.98;
  }
  62%{
    transform:translate3d(calc(-50% + var(--jelly-drift-b)),-99vh,0) scale(1.015);
    opacity:.97;
  }
  78%{
    transform:translate3d(calc(-50% + var(--jelly-drift-a)),-121vh,0) scale(1.02);
    opacity:.95;
  }
  87%{
    transform:translate3d(calc(-50% + var(--jelly-drift-b)),-133vh,0) scale(1.02);
    opacity:.78;
  }
  94%{
    transform:translate3d(calc(-50% + var(--jelly-drift-a)),-143vh,0) scale(1.02);
    opacity:.42;
  }
  100%{
    transform:translate3d(-50%,-154vh,0) scale(1.02);
    opacity:0;
  }
}

/* Arrows: stronger visibility, still elegant and not game-like. */
#oceanScenePrev,#oceanSceneNext,
.ocean-scene-arrows button,
.ocean-scene-arrows-v105 button{
  width:46px!important;
  height:56px!important;
  min-width:46px!important;
  min-height:56px!important;
  border:1px solid rgba(255,245,220,.68)!important;
  background:rgba(2,22,56,.50)!important;
  color:rgba(255,248,225,1)!important;
  opacity:.98!important;
  font-size:33px!important;
  line-height:1!important;
  text-shadow:0 1px 8px rgba(255,239,190,.52)!important;
  box-shadow:
    0 4px 20px rgba(0,0,0,.34),
    inset 0 0 14px rgba(255,255,255,.07)!important;
  -webkit-backdrop-filter:blur(7px)!important;
  backdrop-filter:blur(7px)!important;
}
#oceanScenePrev{left:max(8px,env(safe-area-inset-left))!important}
#oceanSceneNext{right:max(8px,env(safe-area-inset-right))!important}
#oceanScenePrev:active,#oceanSceneNext:active{
  transform:translateY(-50%) scale(.94)!important;
}
@media(max-width:430px){
  .v122-first-jelly{width:min(50vw,250px)!important}
  #oceanScenePrev,#oceanSceneNext{
    width:44px!important;height:54px!important;
  }
}

.v121-first-jelly{display:none!important}

/* =========================================================
   V123 — smaller arrows / more transparent jelly / stronger breathing
   ========================================================= */

/* Jelly overall transparency: lighter and more ethereal */
.v122-first-jelly{
  opacity:.82!important;
  animation:v123JellyRise 26s cubic-bezier(.18,.42,.20,1) forwards!important;
}

/* Stronger bell breathing: quick contraction, clear expansion, slow relax */
.v122-first-jelly-img{
  opacity:.88!important;
  transform-origin:50% 16%!important;
  animation:v123BellBreath 2.72s cubic-bezier(.22,.03,.15,1) infinite!important;
}
@keyframes v123BellBreath{
  0%,100%{transform:translate3d(0,0,0) scaleX(1) scaleY(1)}
  9%{transform:translate3d(0,3px,0) scaleX(.93) scaleY(1.045)}
  18%{transform:translate3d(0,10px,0) scaleX(.78) scaleY(1.145)}
  27%{transform:translate3d(0,-9px,0) scaleX(1.10) scaleY(.925)}
  40%{transform:translate3d(0,-5px,0) scaleX(1.06) scaleY(.955)}
  56%{transform:translate3d(0,-2px,0) scaleX(1.035) scaleY(.978)}
  74%{transform:translate3d(0,0,0) scaleX(1.015) scaleY(.991)}
  90%{transform:translate3d(0,1px,0) scaleX(1.004) scaleY(.997)}
}

/* Fade starts around the middle of the page; it keeps swimming upward while fading */
@keyframes v123JellyRise{
  0%{
    transform:translate3d(-50%,0,0) scale(.96);
    opacity:0;
  }
  5%{
    transform:translate3d(calc(-50% + var(--jelly-drift-a)),-10vh,0) scale(.98);
    opacity:.82;
  }
  22%{
    transform:translate3d(calc(-50% + var(--jelly-drift-b)),-36vh,0) scale(1);
    opacity:.82;
  }
  40%{
    transform:translate3d(calc(-50% + var(--jelly-drift-a)),-62vh,0) scale(1.01);
    opacity:.80;
  }
  52%{
    transform:translate3d(calc(-50% + var(--jelly-drift-b)),-79vh,0) scale(1.015);
    opacity:.72;
  }
  64%{
    transform:translate3d(calc(-50% + var(--jelly-drift-a)),-96vh,0) scale(1.018);
    opacity:.56;
  }
  76%{
    transform:translate3d(calc(-50% + var(--jelly-drift-b)),-113vh,0) scale(1.02);
    opacity:.38;
  }
  88%{
    transform:translate3d(calc(-50% + var(--jelly-drift-a)),-132vh,0) scale(1.02);
    opacity:.18;
  }
  100%{
    transform:translate3d(-50%,-151vh,0) scale(1.02);
    opacity:0;
  }
}

/* Small, elegant arrows that remain visible */
#oceanScenePrev,#oceanSceneNext,
.ocean-scene-arrows button,
.ocean-scene-arrows-v105 button{
  width:34px!important;
  height:42px!important;
  min-width:34px!important;
  min-height:42px!important;
  border:1px solid rgba(255,245,220,.56)!important;
  background:rgba(3,24,58,.30)!important;
  color:rgba(255,248,225,.96)!important;
  opacity:.90!important;
  font-size:25px!important;
  box-shadow:0 3px 12px rgba(0,0,0,.25),inset 0 0 8px rgba(255,255,255,.05)!important;
  -webkit-backdrop-filter:blur(5px)!important;
  backdrop-filter:blur(5px)!important;
}
#oceanScenePrev{left:max(8px,env(safe-area-inset-left))!important}
#oceanSceneNext{right:max(8px,env(safe-area-inset-right))!important}

/* Tentacles swim separately with delayed flowing motion.
   Only the lower part is visible so the bell stays single and clean. */
.v123-jelly-tentacles{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:auto!important;
  object-fit:contain!important;
  opacity:.28!important;
  pointer-events:none!important;
  transform-origin:50% 28%!important;
  -webkit-mask-image:linear-gradient(
    to bottom,
    transparent 0%,
    transparent 31%,
    rgba(0,0,0,.10) 38%,
    rgba(0,0,0,.55) 48%,
    #000 60%,
    #000 100%
  )!important;
  mask-image:linear-gradient(
    to bottom,
    transparent 0%,
    transparent 31%,
    rgba(0,0,0,.10) 38%,
    rgba(0,0,0,.55) 48%,
    #000 60%,
    #000 100%
  )!important;
  animation:v123TentacleSwim 2.72s ease-in-out infinite!important;
  will-change:transform!important;
}
@keyframes v123TentacleSwim{
  0%,100%{transform:translate3d(0,3px,0) rotate(-.4deg) scaleY(1)}
  18%{transform:translate3d(5px,9px,0) rotate(1.2deg) scaleY(1.02)}
  30%{transform:translate3d(-7px,18px,0) rotate(-1.6deg) scaleY(1.07)}
  46%{transform:translate3d(8px,14px,0) rotate(1.5deg) scaleY(1.05)}
  62%{transform:translate3d(-6px,10px,0) rotate(-1.1deg) scaleY(1.03)}
  80%{transform:translate3d(4px,6px,0) rotate(.7deg) scaleY(1.015)}
}

/* =========================================================
   V124 — smaller elegant arrows / stronger jelly breathing
   ========================================================= */

/* 更轻、更透明的水母 */
.v122-first-jelly{
  opacity:.72!important;
  animation:v124JellyRise 25.5s cubic-bezier(.18,.40,.18,1) forwards!important;
}

/* 伞体呼吸更明显：收得更紧、张得更开，但节奏更干净 */
.v122-first-jelly-img{
  opacity:.80!important;
  transform-origin:50% 15%!important;
  animation:v124BellBreath 2.55s cubic-bezier(.20,.02,.14,1) infinite!important;
}
@keyframes v124BellBreath{
  0%,100%{transform:translate3d(0,0,0) scaleX(1) scaleY(1)}
  8%{transform:translate3d(0,3px,0) scaleX(.91) scaleY(1.055)}
  17%{transform:translate3d(0,12px,0) scaleX(.72) scaleY(1.18)}
  27%{transform:translate3d(0,-11px,0) scaleX(1.14) scaleY(.90)}
  40%{transform:translate3d(0,-6px,0) scaleX(1.075) scaleY(.945)}
  56%{transform:translate3d(0,-3px,0) scaleX(1.040) scaleY(.975)}
  73%{transform:translate3d(0,-1px,0) scaleX(1.018) scaleY(.990)}
  89%{transform:translate3d(0,0,0) scaleX(1.005) scaleY(.998)}
}

/* 到页面中段后开始持续淡出，继续往上游，离开屏幕 */
@keyframes v124JellyRise{
  0%{
    transform:translate3d(-50%,0,0) scale(.96);
    opacity:0;
  }
  5%{
    transform:translate3d(calc(-50% + var(--jelly-drift-a)),-10vh,0) scale(.98);
    opacity:.72;
  }
  22%{
    transform:translate3d(calc(-50% + var(--jelly-drift-b)),-35vh,0) scale(1);
    opacity:.72;
  }
  40%{
    transform:translate3d(calc(-50% + var(--jelly-drift-a)),-61vh,0) scale(1.01);
    opacity:.70;
  }
  50%{
    transform:translate3d(calc(-50% + var(--jelly-drift-b)),-76vh,0) scale(1.015);
    opacity:.60;
  }
  61%{
    transform:translate3d(calc(-50% + var(--jelly-drift-a)),-92vh,0) scale(1.018);
    opacity:.44;
  }
  72%{
    transform:translate3d(calc(-50% + var(--jelly-drift-b)),-108vh,0) scale(1.02);
    opacity:.28;
  }
  82%{
    transform:translate3d(calc(-50% + var(--jelly-drift-a)),-123vh,0) scale(1.02);
    opacity:.14;
  }
  90%{
    transform:translate3d(calc(-50% + var(--jelly-drift-b)),-136vh,0) scale(1.02);
    opacity:.05;
  }
  100%{
    transform:translate3d(-50%,-151vh,0) scale(1.02);
    opacity:0;
  }
}

/* 触须：更像水中推进后的滞后，不做乱摆 */
.v123-jelly-tentacles{
  opacity:.22!important;
  transform-origin:50% 29%!important;
  animation:v124TentacleSwim 2.55s cubic-bezier(.34,.02,.26,1) infinite!important;
}
@keyframes v124TentacleSwim{
  0%,100%{transform:translate3d(0,2px,0) rotate(-.25deg) scaleY(1)}
  14%{transform:translate3d(4px,8px,0) rotate(.9deg) scaleY(1.018)}
  27%{transform:translate3d(-6px,17px,0) rotate(-1.25deg) scaleY(1.060)}
  41%{transform:translate3d(7px,14px,0) rotate(1.15deg) scaleY(1.045)}
  58%{transform:translate3d(-5px,10px,0) rotate(-.85deg) scaleY(1.030)}
  76%{transform:translate3d(4px,6px,0) rotate(.55deg) scaleY(1.015)}
  90%{transform:translate3d(-2px,3px,0) rotate(-.25deg) scaleY(1.006)}
}

/* 箭头再缩小：小巧灵动，但仍清楚可见 */
#oceanScenePrev,#oceanSceneNext,
.ocean-scene-arrows button,
.ocean-scene-arrows-v105 button{
  width:28px!important;
  height:36px!important;
  min-width:28px!important;
  min-height:36px!important;
  border:1px solid rgba(255,245,220,.60)!important;
  background:rgba(3,24,58,.26)!important;
  color:rgba(255,249,230,.98)!important;
  opacity:.92!important;
  font-size:20px!important;
  text-shadow:0 1px 6px rgba(255,239,190,.46)!important;
  box-shadow:0 2px 9px rgba(0,0,0,.22), inset 0 0 6px rgba(255,255,255,.04)!important;
  -webkit-backdrop-filter:blur(4px)!important;
  backdrop-filter:blur(4px)!important;
}
#oceanScenePrev{left:max(7px,env(safe-area-inset-left))!important}
#oceanSceneNext{right:max(7px,env(safe-area-inset-right))!important}

/* =========================================================
   V125 — natural jelly rhythm, mid-upper fade
   ========================================================= */

/* 整体透明度回调到中间值：有通透感，但不会发虚 */
.v122-first-jelly{
  opacity:.86!important;
  animation:v125JellyRise 27.8s cubic-bezier(.17,.39,.18,1) forwards!important;
}

/* 伞体：快速收伞推进 -> 明显舒展 -> 缓慢恢复 */
.v122-first-jelly-img{
  opacity:.92!important;
  transform-origin:50% 15%!important;
  animation:v125BellBreath 3.05s cubic-bezier(.22,.03,.16,1) infinite!important;
}
@keyframes v125BellBreath{
  0%,100%{transform:translate3d(0,0,0) scaleX(1) scaleY(1)}
  9%{transform:translate3d(0,2px,0) scaleX(.95) scaleY(1.035)}
  18%{transform:translate3d(0,8px,0) scaleX(.80) scaleY(1.125)}
  27%{transform:translate3d(0,-7px,0) scaleX(1.095) scaleY(.935)}
  39%{transform:translate3d(0,-4px,0) scaleX(1.060) scaleY(.960)}
  55%{transform:translate3d(0,-2px,0) scaleX(1.035) scaleY(.978)}
  72%{transform:translate3d(0,0,0) scaleX(1.016) scaleY(.990)}
  88%{transform:translate3d(0,1px,0) scaleX(1.005) scaleY(.997)}
}

/* 路径：中部保持清晰；从中上部开始持续淡出；顶部前已接近消失 */
@keyframes v125JellyRise{
  0%{
    transform:translate3d(-50%,0,0) scale(.96);
    opacity:0;
  }
  5%{
    transform:translate3d(calc(-50% + var(--jelly-drift-a)),-9vh,0) scale(.98);
    opacity:.86;
  }
  22%{
    transform:translate3d(calc(-50% + var(--jelly-drift-b)),-34vh,0) scale(1);
    opacity:.86;
  }
  39%{
    transform:translate3d(calc(-50% + var(--jelly-drift-a)),-58vh,0) scale(1.01);
    opacity:.85;
  }
  50%{
    transform:translate3d(calc(-50% + var(--jelly-drift-b)),-73vh,0) scale(1.015);
    opacity:.83;
  }
  58%{
    transform:translate3d(calc(-50% + var(--jelly-drift-a)),-84vh,0) scale(1.018);
    opacity:.76;
  }
  66%{
    transform:translate3d(calc(-50% + var(--jelly-drift-b)),-96vh,0) scale(1.02);
    opacity:.64;
  }
  74%{
    transform:translate3d(calc(-50% + var(--jelly-drift-a)),-108vh,0) scale(1.02);
    opacity:.50;
  }
  82%{
    transform:translate3d(calc(-50% + var(--jelly-drift-b)),-120vh,0) scale(1.02);
    opacity:.34;
  }
  89%{
    transform:translate3d(calc(-50% + var(--jelly-drift-a)),-132vh,0) scale(1.02);
    opacity:.20;
  }
  95%{
    transform:translate3d(calc(-50% + var(--jelly-drift-b)),-141vh,0) scale(1.02);
    opacity:.08;
  }
  100%{
    transform:translate3d(-50%,-150vh,0) scale(1.02);
    opacity:0;
  }
}

/* 长触须：比伞体更慢，像推进后被水流拖住再回摆 */
.v123-jelly-tentacles{
  opacity:.24!important;
  transform-origin:50% 28%!important;
  animation:v125TentacleFlow 3.35s cubic-bezier(.34,.05,.22,1) infinite!important;
}
@keyframes v125TentacleFlow{
  0%,100%{transform:translate3d(0,2px,0) rotate(-.20deg) scaleY(1)}
  16%{transform:translate3d(3px,7px,0) rotate(.55deg) scaleY(1.015)}
  31%{transform:translate3d(-5px,14px,0) rotate(-.85deg) scaleY(1.045)}
  47%{transform:translate3d(6px,12px,0) rotate(.80deg) scaleY(1.035)}
  63%{transform:translate3d(-4px,9px,0) rotate(-.60deg) scaleY(1.025)}
  79%{transform:translate3d(3px,5px,0) rotate(.38deg) scaleY(1.012)}
  92%{transform:translate3d(-1px,3px,0) rotate(-.15deg) scaleY(1.004)}
}

/* =========================================================
   V126 — multi-jelly click sequence
   ========================================================= */

/* Disable older single-jelly presentation so only V126 is visible */
.v122-first-jelly,
.v123-jelly-tentacles,
.v121-first-jelly{
  display:none!important;
}

.v126-jelly{
  position:absolute!important;
  left:var(--jelly-x,50%)!important;
  bottom:-34vh!important;
  z-index:27!important;
  pointer-events:none!important;
  opacity:0;
  animation:v126JellyRise var(--jelly-life,26s) cubic-bezier(.17,.39,.18,1) forwards!important;
  will-change:transform,opacity!important;
}
.v126-jelly-big{
  width:min(48vw,270px)!important;
}
.v126-jelly-small{
  /* approximately one third of the large jelly */
  width:min(16vw,90px)!important;
}

.v126-jelly-main,
.v126-jelly-tentacles{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:auto!important;
  object-fit:contain!important;
  pointer-events:none!important;
  user-select:none!important;
  -webkit-user-drag:none!important;
}
.v126-jelly-main{
  z-index:2!important;
  opacity:.93!important;
  transform-origin:50% 15%!important;
  animation:v126BellBreath 3.05s cubic-bezier(.22,.03,.16,1) infinite!important;
}
.v126-jelly-small .v126-jelly-main{
  animation-duration:2.65s!important;
}

/* Only the lower body/tentacles are shown in this delayed layer. */
.v126-jelly-tentacles{
  z-index:1!important;
  opacity:.23!important;
  transform-origin:50% 29%!important;
  -webkit-mask-image:linear-gradient(
    to bottom,
    transparent 0%,
    transparent 31%,
    rgba(0,0,0,.08) 38%,
    rgba(0,0,0,.50) 49%,
    #000 62%,
    #000 100%
  )!important;
  mask-image:linear-gradient(
    to bottom,
    transparent 0%,
    transparent 31%,
    rgba(0,0,0,.08) 38%,
    rgba(0,0,0,.50) 49%,
    #000 62%,
    #000 100%
  )!important;
  animation:v126TentacleFlow 3.38s cubic-bezier(.34,.05,.22,1) infinite!important;
}
.v126-jelly-small .v126-jelly-tentacles{
  animation-duration:2.95s!important;
}

@keyframes v126BellBreath{
  0%,100%{transform:translate3d(0,0,0) scaleX(1) scaleY(1)}
  9%{transform:translate3d(0,2px,0) scaleX(.95) scaleY(1.035)}
  18%{transform:translate3d(0,8px,0) scaleX(.80) scaleY(1.125)}
  27%{transform:translate3d(0,-7px,0) scaleX(1.095) scaleY(.935)}
  39%{transform:translate3d(0,-4px,0) scaleX(1.060) scaleY(.960)}
  55%{transform:translate3d(0,-2px,0) scaleX(1.035) scaleY(.978)}
  72%{transform:translate3d(0,0,0) scaleX(1.016) scaleY(.990)}
  88%{transform:translate3d(0,1px,0) scaleX(1.005) scaleY(.997)}
}

@keyframes v126TentacleFlow{
  0%,100%{transform:translate3d(0,2px,0) rotate(-.20deg) scaleY(1)}
  16%{transform:translate3d(3px,7px,0) rotate(.55deg) scaleY(1.015)}
  31%{transform:translate3d(-5px,14px,0) rotate(-.85deg) scaleY(1.045)}
  47%{transform:translate3d(6px,12px,0) rotate(.80deg) scaleY(1.035)}
  63%{transform:translate3d(-4px,9px,0) rotate(-.60deg) scaleY(1.025)}
  79%{transform:translate3d(3px,5px,0) rotate(.38deg) scaleY(1.012)}
  92%{transform:translate3d(-1px,3px,0) rotate(-.15deg) scaleY(1.004)}
}

/* First half stays visible; from mid-upper region it fades continuously to zero. */
@keyframes v126JellyRise{
  0%{
    transform:translate3d(-50%,0,0) scale(.96);
    opacity:0;
  }
  5%{
    transform:translate3d(calc(-50% + var(--jelly-drift-a)),-9vh,0) scale(.98);
    opacity:.88;
  }
  22%{
    transform:translate3d(calc(-50% + var(--jelly-drift-b)),-34vh,0) scale(1);
    opacity:.88;
  }
  39%{
    transform:translate3d(calc(-50% + var(--jelly-drift-a)),-58vh,0) scale(1.01);
    opacity:.86;
  }
  50%{
    transform:translate3d(calc(-50% + var(--jelly-drift-b)),-73vh,0) scale(1.015);
    opacity:.83;
  }
  58%{
    transform:translate3d(calc(-50% + var(--jelly-drift-a)),-84vh,0) scale(1.018);
    opacity:.75;
  }
  66%{
    transform:translate3d(calc(-50% + var(--jelly-drift-b)),-96vh,0) scale(1.02);
    opacity:.63;
  }
  74%{
    transform:translate3d(calc(-50% + var(--jelly-drift-a)),-108vh,0) scale(1.02);
    opacity:.49;
  }
  82%{
    transform:translate3d(calc(-50% + var(--jelly-drift-b)),-120vh,0) scale(1.02);
    opacity:.33;
  }
  89%{
    transform:translate3d(calc(-50% + var(--jelly-drift-a)),-132vh,0) scale(1.02);
    opacity:.19;
  }
  95%{
    transform:translate3d(calc(-50% + var(--jelly-drift-b)),-141vh,0) scale(1.02);
    opacity:.07;
  }
  100%{
    transform:translate3d(-50%,-150vh,0) scale(1.02);
    opacity:0;
  }
}

/* V127 — two-minute random vintage love letter */
.love-letter-v127{position:absolute!important;z-index:60!important;left:50%!important;top:18%!important;width:150px!important;height:112px!important;transform:translate(-50%,-20px) scale(.82)!important;opacity:0!important;pointer-events:none!important;transition:opacity .55s ease,transform .75s cubic-bezier(.16,.82,.22,1)!important}
.love-letter-v127[hidden]{display:none!important}.love-letter-v127.is-arrived{opacity:1!important;transform:translate(-50%,0) scale(1)!important;pointer-events:auto!important;animation:v127LetterFloat 4.6s ease-in-out .8s infinite!important}
@keyframes v127LetterFloat{0%,100%{margin-top:0}50%{margin-top:-7px}}
.love-letter-visual-v127{position:relative!important;width:150px!important;height:112px!important;display:block!important;border:0!important;padding:0!important;background:transparent!important;overflow:visible!important;cursor:pointer!important;-webkit-tap-highlight-color:transparent!important}
.v127-envelope{position:absolute!important;inset:10px 7px 8px!important;display:block!important;filter:drop-shadow(0 14px 18px rgba(0,0,0,.32))!important;transition:opacity .4s ease,transform .6s cubic-bezier(.2,.75,.18,1)!important}
.v127-envelope-back{position:absolute!important;inset:0!important;border:1px solid rgba(112,72,40,.60)!important;border-radius:7px!important;background:radial-gradient(circle at 20% 25%,rgba(255,248,218,.44),transparent 22%),linear-gradient(145deg,#ead5aa 0%,#d3ad78 54%,#c3945e 100%)!important;box-shadow:inset 0 1px 0 rgba(255,250,224,.75),inset 0 -10px 22px rgba(111,67,35,.12)!important}
.v127-envelope-paper-edge{position:absolute!important;left:9px!important;right:9px!important;top:10px!important;height:43px!important;border-radius:4px 4px 1px 1px!important;background:linear-gradient(#f5e9c9,#e7d3a8)!important;box-shadow:0 2px 5px rgba(80,48,24,.14)!important}
.v127-envelope-flap{position:absolute!important;z-index:3!important;left:1px!important;right:1px!important;top:1px!important;height:58px!important;clip-path:polygon(0 0,100% 0,50% 91%)!important;background:linear-gradient(160deg,#f0ddb6 0%,#d7b583 70%,#c99d67 100%)!important;border-radius:6px 6px 0 0!important;transform-origin:50% 0!important;transition:transform .72s cubic-bezier(.16,.76,.18,1)!important;filter:drop-shadow(0 2px 1px rgba(87,52,27,.22))!important}
.v127-envelope-front{position:absolute!important;z-index:4!important;inset:0!important;border-radius:7px!important;background:linear-gradient(32deg,transparent 49.3%,rgba(118,76,42,.18) 50%,transparent 50.8%),linear-gradient(-32deg,transparent 49.3%,rgba(118,76,42,.18) 50%,transparent 50.8%),linear-gradient(145deg,transparent 45%,rgba(212,174,119,.88) 45.5%,#c99d67 100%)!important;clip-path:polygon(0 36%,50% 72%,100% 36%,100% 100%,0 100%)!important}
.v127-wax-seal{position:absolute!important;z-index:6!important;left:50%!important;top:57%!important;width:30px!important;height:30px!important;display:grid!important;place-items:center!important;transform:translate(-50%,-50%) rotate(-5deg)!important;border-radius:48% 53% 45% 55%!important;color:#dfb868!important;font:13px/1 Georgia,serif!important;background:radial-gradient(circle at 35% 28%,#b34b48,#8f2830 42%,#641921 100%)!important;box-shadow:0 3px 7px rgba(52,14,19,.38),inset 0 1px 2px rgba(255,185,149,.28),inset 0 -2px 4px rgba(56,8,15,.30)!important;transition:opacity .28s ease,transform .45s ease!important}
.v127-open-letter{position:absolute!important;z-index:12!important;left:50%!important;top:50%!important;width:min(300px,78vw)!important;min-height:178px!important;padding:30px 25px 27px!important;box-sizing:border-box!important;transform:translate(-50%,-28%) scale(.70)!important;opacity:0!important;pointer-events:none!important;border:1px solid rgba(126,88,48,.46)!important;border-radius:5px!important;color:#60472f!important;background:radial-gradient(circle at 18% 17%,rgba(133,93,52,.06) 0 1px,transparent 1.5px),radial-gradient(circle at 78% 66%,rgba(122,83,45,.045) 0 1px,transparent 1.4px),linear-gradient(145deg,#f7edcf,#ead8b2 58%,#e2cba0)!important;box-shadow:0 22px 55px rgba(0,0,0,.36),inset 0 0 30px rgba(117,76,36,.08),inset 0 1px rgba(255,255,255,.72)!important;transition:opacity .45s ease,transform .72s cubic-bezier(.16,.82,.18,1)!important}
.v127-open-letter::before{content:""!important;position:absolute!important;inset:9px!important;border:1px solid rgba(138,97,53,.20)!important;border-radius:3px!important}
.v127-paper-ornament{position:relative!important;z-index:2!important;display:block!important;margin-bottom:15px!important;color:#9a613d!important;font:12px/1 Georgia,serif!important;letter-spacing:.15em!important}
.v127-letter-copy{position:relative!important;z-index:2!important;display:block!important;color:#543d2b!important;font-family:"STKaiti","Kaiti SC","KaiTi","楷体",serif!important;font-size:19px!important;font-weight:400!important;line-height:1.88!important;letter-spacing:.055em!important;text-align:center!important}
.v127-letter-sign{position:relative!important;z-index:2!important;display:block!important;margin-top:18px!important;color:rgba(102,69,40,.68)!important;font-family:"STKaiti","Kaiti SC","KaiTi","楷体",serif!important;font-size:12px!important;letter-spacing:.13em!important}
.love-letter-v127.is-open .v127-envelope{opacity:.18!important;transform:translateY(35px) scale(.88)!important}.love-letter-v127.is-open .v127-envelope-flap{transform:rotateX(178deg)!important}.love-letter-v127.is-open .v127-wax-seal{opacity:0!important;transform:translate(-50%,-50%) scale(.55) rotate(12deg)!important}.love-letter-v127.is-open .v127-open-letter{opacity:1!important;transform:translate(-50%,-54%) scale(1)!important;pointer-events:auto!important}
.love-letter-v127 .love-letter-closed-img,.love-letter-v127 .love-letter-open-img,.love-letter-v127 .love-letter-open-wrap{display:none!important}
@media(max-width:430px){.love-letter-v127{top:17%!important}.v127-open-letter{width:min(286px,80vw)!important;min-height:168px!important;padding:27px 22px 24px!important}.v127-letter-copy{font-size:18px!important;line-height:1.86!important}}

/* =========================================================
   V128 — iPhone 14 / Xiaomi 14 Ultra mobile compatibility
   ========================================================= */

html,body{
  width:100%!important;
  max-width:100%!important;
  overscroll-behavior:none!important;
  -webkit-text-size-adjust:100%!important;
  text-size-adjust:100%!important;
}

/* Use the real visible mobile viewport. This prevents Safari/HyperOS browser
   bars from creating a bottom gap or pushing controls off-screen. */
.fireworks-intro,
#oceanSceneCarousel,
#oceanSceneCarousel .v103-ocean-slide{
  height:var(--v128-vh,100dvh)!important;
  min-height:var(--v128-vh,100dvh)!important;
  max-height:var(--v128-vh,100dvh)!important;
}

/* Keep full background visible exactly as current V120 strategy. */
#oceanSceneCarousel .v114-scene-fit{
  width:100%!important;
  height:100%!important;
  object-fit:fill!important;
  object-position:center center!important;
}

/* iPhone notch/home indicator + Xiaomi gesture navigation safe areas.
   No redesign: only keep existing player/envelope inside tappable safe zone. */
.ocean-player,.player-v105{
  bottom:max(10px,calc(env(safe-area-inset-bottom) + 7px))!important;
  max-width:calc(100vw - 24px)!important;
  box-sizing:border-box!important;
}

.mailbox-entry-v106,.mailbox-entry-v105,#enterMailbox{
  top:max(12px,calc(env(safe-area-inset-top) + 8px))!important;
  right:max(10px,calc(env(safe-area-inset-right) + 8px))!important;
}

/* The arrows stay visually small, but their invisible touch target is larger.
   This keeps the "small and lively" look while reducing missed taps. */
#oceanScenePrev,#oceanSceneNext{
  position:absolute!important;
  touch-action:manipulation!important;
  -webkit-tap-highlight-color:transparent!important;
}
#oceanScenePrev::after,#oceanSceneNext::after{
  content:""!important;
  position:absolute!important;
  inset:-7px -8px!important;
  background:transparent!important;
  border-radius:16px!important;
}

/* Prevent accidental browser zoom/select during repeated jelly taps. */
#livingJellyStage,
.v126-jelly,
.v126-jelly *{
  -webkit-user-select:none!important;
  user-select:none!important;
  -webkit-touch-callout:none!important;
}

/* The 2-minute vintage letter must always fit both 844px and taller Android viewports. */
.love-letter-v127{
  top:max(15%,calc(env(safe-area-inset-top) + 74px))!important;
}
.v127-open-letter{
  max-height:min(62dvh,520px)!important;
  overflow:auto!important;
  overscroll-behavior:contain!important;
  -webkit-overflow-scrolling:touch!important;
}
.v127-letter-copy{
  overflow-wrap:anywhere!important;
  word-break:break-word!important;
}

/* iPhone 14 class viewport (~390 CSS px wide): preserve composition and avoid clipping. */
@media (max-width:400px) and (max-height:860px){
  .ocean-player,.player-v105{
    max-width:calc(100vw - 20px)!important;
    bottom:max(9px,calc(env(safe-area-inset-bottom) + 6px))!important;
  }
  .v126-jelly-big{width:min(47vw,250px)!important}
  .v126-jelly-small{width:min(15.7vw,84px)!important}
  .v127-open-letter{
    width:min(278px,78vw)!important;
    max-height:58dvh!important;
    padding:25px 20px 22px!important;
  }
  .v127-letter-copy{font-size:17.5px!important;line-height:1.82!important}
}

/* Xiaomi 14 Ultra / tall Android class: keep controls off the curved/gesture edges. */
@media (min-aspect-ratio: 9/20) and (min-height:861px){
  .ocean-player,.player-v105{
    bottom:max(12px,calc(env(safe-area-inset-bottom) + 8px))!important;
  }
  .mailbox-entry-v106,.mailbox-entry-v105,#enterMailbox{
    top:max(14px,calc(env(safe-area-inset-top) + 9px))!important;
  }
}

/* Landscape guard so rotating either phone cannot leave an oversized letter/player. */
@media (orientation:landscape) and (max-height:500px){
  .v127-open-letter{
    width:min(410px,72vw)!important;
    max-height:74dvh!important;
    padding:18px 22px!important;
  }
  .v127-letter-copy{font-size:16px!important;line-height:1.65!important}
  .love-letter-v127{top:16%!important}
}

/* =========================================================
   V129 — purple-only jelly sequence + refined tiny letter
   ========================================================= */
.v126-jelly,.v126-jelly *{display:none!important}

.v129-jelly{
  position:absolute!important;
  left:var(--jelly-x,50%)!important;
  bottom:-36vh!important;
  z-index:27!important;
  pointer-events:none!important;
  opacity:0;
  transform-origin:50% 50%!important;
  animation:v129JellyRise var(--jelly-life,26s) cubic-bezier(.17,.39,.18,1) forwards!important;
  will-change:transform,opacity!important;
}
.v129-jelly-big{width:min(48vw,270px)!important}
.v129-jelly-small{width:min(16vw,90px)!important}

.v129-jelly-main,.v129-jelly-tentacles{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:auto!important;
  object-fit:contain!important;
  pointer-events:none!important;
  user-select:none!important;
  -webkit-user-drag:none!important;
}
.v129-jelly-main{
  z-index:2!important;
  opacity:.94!important;
  transform-origin:50% 15%!important;
  animation:v129BellPulse 3.08s cubic-bezier(.21,.03,.16,1) infinite!important;
}
.v129-jelly-small .v129-jelly-main{animation-duration:2.72s!important}

.v129-jelly-tentacles{
  z-index:1!important;
  opacity:.24!important;
  transform-origin:50% 29%!important;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,transparent 30%,rgba(0,0,0,.08) 37%,rgba(0,0,0,.48) 48%,#000 61%,#000 100%)!important;
  mask-image:linear-gradient(to bottom,transparent 0%,transparent 30%,rgba(0,0,0,.08) 37%,rgba(0,0,0,.48) 48%,#000 61%,#000 100%)!important;
  animation:v129TentacleFlow 4.25s cubic-bezier(.34,.05,.22,1) infinite!important;
}
.v129-jelly-small .v129-jelly-tentacles{animation-duration:3.55s!important}

@keyframes v129BellPulse{
  0%,100%{transform:translate3d(0,0,0) scaleX(1) scaleY(1)}
  8%{transform:translate3d(0,2px,0) scaleX(.95) scaleY(1.035)}
  17%{transform:translate3d(0,10px,0) scaleX(.76) scaleY(1.15)}
  27%{transform:translate3d(0,-9px,0) scaleX(1.12) scaleY(.92)}
  41%{transform:translate3d(0,-5px,0) scaleX(1.07) scaleY(.95)}
  57%{transform:translate3d(0,-2px,0) scaleX(1.035) scaleY(.98)}
  74%{transform:translate3d(0,0,0) scaleX(1.014) scaleY(.992)}
  90%{transform:translate3d(0,1px,0) scaleX(1.004) scaleY(.998)}
}
@keyframes v129TentacleFlow{
  0%,100%{transform:translate3d(-2px,2px,0) rotate(-.28deg) skewX(-1deg) scaleY(1)}
  14%{transform:translate3d(5px,7px,0) rotate(.48deg) skewX(1.5deg) scaleY(1.012)}
  29%{transform:translate3d(10px,14px,0) rotate(.92deg) skewX(2.7deg) scaleY(1.038)}
  44%{transform:translate3d(4px,18px,0) rotate(.3deg) skewX(.7deg) scaleY(1.052)}
  59%{transform:translate3d(-9px,13px,0) rotate(-.88deg) skewX(-2.5deg) scaleY(1.038)}
  74%{transform:translate3d(-12px,8px,0) rotate(-1.04deg) skewX(-3deg) scaleY(1.022)}
  88%{transform:translate3d(-5px,4px,0) rotate(-.5deg) skewX(-1.4deg) scaleY(1.008)}
}
@keyframes v129JellyRise{
  0%{transform:translate3d(-50%,0,0) scale(.96);opacity:0}
  5%{transform:translate3d(calc(-50% + var(--jelly-drift-a)),-9vh,0) scale(.98);opacity:.90}
  22%{transform:translate3d(calc(-50% + var(--jelly-drift-b)),-34vh,0) scale(1);opacity:.90}
  40%{transform:translate3d(calc(-50% + var(--jelly-drift-a)),-59vh,0) scale(1.01);opacity:.89}
  52%{transform:translate3d(calc(-50% + var(--jelly-drift-b)),-75vh,0) scale(1.015);opacity:.86}
  60%{transform:translate3d(calc(-50% + var(--jelly-drift-a)),-87vh,0) scale(1.018);opacity:.76}
  68%{transform:translate3d(calc(-50% + var(--jelly-drift-b)),-99vh,0) scale(1.02);opacity:.62}
  76%{transform:translate3d(calc(-50% + var(--jelly-drift-a)),-111vh,0) scale(1.02);opacity:.46}
  84%{transform:translate3d(calc(-50% + var(--jelly-drift-b)),-123vh,0) scale(1.02);opacity:.29}
  91%{transform:translate3d(calc(-50% + var(--jelly-drift-a)),-134vh,0) scale(1.02);opacity:.14}
  96%{transform:translate3d(calc(-50% + var(--jelly-drift-b)),-143vh,0) scale(1.02);opacity:.05}
  100%{transform:translate3d(-50%,-151vh,0) scale(1.02);opacity:0}
}

/* Smaller, more delicate vintage envelope */
.love-letter-v127{width:104px!important;height:77px!important;top:19%!important}
.love-letter-visual-v127{width:104px!important;height:77px!important}
.v127-envelope{inset:7px 5px 6px!important;filter:drop-shadow(0 8px 12px rgba(0,0,0,.28))!important}
.v127-envelope-paper-edge{left:7px!important;right:7px!important;top:7px!important;height:30px!important}
.v127-envelope-flap{height:41px!important}
.v127-wax-seal{width:21px!important;height:21px!important;font-size:9px!important;top:58%!important}

/* Cleaner open-letter presentation */
.v127-open-letter{
  width:min(268px,74vw)!important;
  min-height:156px!important;
  max-height:min(56dvh,450px)!important;
  padding:24px 20px 22px!important;
  border-radius:4px!important;
  border:1px solid rgba(119,82,45,.34)!important;
  background:radial-gradient(circle at 16% 18%,rgba(111,72,38,.05) 0 1px,transparent 1.4px),radial-gradient(circle at 82% 70%,rgba(111,72,38,.038) 0 1px,transparent 1.3px),linear-gradient(145deg,#faf1dc 0%,#eeddbb 58%,#e5cda4 100%)!important;
  box-shadow:0 16px 40px rgba(0,0,0,.32),inset 0 0 24px rgba(107,69,34,.06)!important;
}
.v127-open-letter::before{inset:7px!important;border-color:rgba(135,92,50,.14)!important}
.v127-paper-ornament{margin-bottom:11px!important;color:#95603d!important;font-size:10px!important}
.v127-letter-copy{
  color:#4e3827!important;
  font-family:"STKaiti","Kaiti SC","KaiTi","楷体",serif!important;
  font-size:17.5px!important;
  line-height:1.86!important;
  letter-spacing:.055em!important;
  text-align:center!important;
}
.v127-letter-sign{margin-top:14px!important;font-size:10.5px!important;color:rgba(91,60,35,.58)!important}
.love-letter-v127.is-open .v127-envelope{opacity:.08!important;transform:translateY(26px) scale(.76)!important}
.love-letter-v127.is-open .v127-open-letter{transform:translate(-50%,-52%) scale(1)!important}
.love-letter-v127.is-dismissing{
  opacity:0!important;
  transform:translate(-50%,-10px) scale(.93)!important;
  transition:opacity .46s ease,transform .46s ease!important;
}
@media(max-width:400px) and (max-height:860px){
  .love-letter-v127{width:98px!important;height:73px!important;top:18%!important}
  .love-letter-visual-v127{width:98px!important;height:73px!important}
  .v127-open-letter{width:min(258px,74vw)!important;max-height:54dvh!important;padding:22px 18px 20px!important}
  .v127-letter-copy{font-size:17px!important;line-height:1.82!important}
}

/* =========================================================
   V130 — lighter package + coordinated jelly motion
   ========================================================= */

/* Main bell: strong squeeze-and-release, then a long glide.
   The whole cycle intentionally has a quick propulsion phase and a slower recovery. */
.v129-jelly-main{
  transform-origin:50% 14%!important;
  animation:v130BellBreath 3.22s cubic-bezier(.20,.03,.16,1) infinite!important;
  will-change:transform,filter!important;
}
.v129-jelly-small .v129-jelly-main{
  animation-duration:2.88s!important;
}

@keyframes v130BellBreath{
  0%,100%{
    transform:translate3d(0,0,0) scaleX(1) scaleY(1);
    filter:brightness(1);
  }
  7%{
    transform:translate3d(0,2px,0) scaleX(.94) scaleY(1.045);
    filter:brightness(1.02);
  }
  16%{
    transform:translate3d(0,11px,0) scaleX(.73) scaleY(1.16);
    filter:brightness(1.06);
  }
  24%{
    transform:translate3d(0,-10px,0) scaleX(1.135) scaleY(.91);
    filter:brightness(1.09);
  }
  34%{
    transform:translate3d(0,-6px,0) scaleX(1.085) scaleY(.945);
    filter:brightness(1.07);
  }
  48%{
    transform:translate3d(0,-3px,0) scaleX(1.048) scaleY(.972);
    filter:brightness(1.045);
  }
  63%{
    transform:translate3d(0,-1px,0) scaleX(1.024) scaleY(.987);
    filter:brightness(1.025);
  }
  79%{
    transform:translate3d(0,0,0) scaleX(1.010) scaleY(.995);
    filter:brightness(1.01);
  }
  92%{
    transform:translate3d(0,1px,0) scaleX(1.003) scaleY(.999);
    filter:brightness(1);
  }
}

/* Tentacles: slower than the bell and phase-lagged.
   They travel left/right AND up/down; the swing peaks after the bell squeeze,
   which feels like water dragging the long tentacles behind the body. */
.v129-jelly-tentacles{
  opacity:.27!important;
  transform-origin:50% 28%!important;
  animation:v130TentacleFlow 5.15s cubic-bezier(.34,.04,.24,1) infinite!important;
  will-change:transform!important;
}
.v129-jelly-small .v129-jelly-tentacles{
  animation-duration:4.25s!important;
}

@keyframes v130TentacleFlow{
  0%,100%{
    transform:translate3d(-3px,1px,0) rotate(-.35deg) skewX(-1.2deg) scaleY(1);
  }
  10%{
    transform:translate3d(2px,4px,0) rotate(.18deg) skewX(.6deg) scaleY(1.008);
  }
  20%{
    transform:translate3d(8px,10px,0) rotate(.72deg) skewX(2.2deg) scaleY(1.025);
  }
  31%{
    transform:translate3d(13px,17px,0) rotate(1.18deg) skewX(3.4deg) scaleY(1.052);
  }
  42%{
    transform:translate3d(8px,21px,0) rotate(.72deg) skewX(2.1deg) scaleY(1.066);
  }
  53%{
    transform:translate3d(0,18px,0) rotate(0deg) skewX(0deg) scaleY(1.052);
  }
  64%{
    transform:translate3d(-9px,14px,0) rotate(-.82deg) skewX(-2.4deg) scaleY(1.040);
  }
  75%{
    transform:translate3d(-14px,9px,0) rotate(-1.22deg) skewX(-3.5deg) scaleY(1.026);
  }
  86%{
    transform:translate3d(-10px,5px,0) rotate(-.78deg) skewX(-2.2deg) scaleY(1.012);
  }
  94%{
    transform:translate3d(-5px,2px,0) rotate(-.42deg) skewX(-1.2deg) scaleY(1.004);
  }
}

/* Coordinated body path:
   slight side-to-side meander + upward thrust/glide, so the jelly does not rise on a rigid rail.
   Fade behavior remains the same: clear through middle, then fades toward the top. */
@keyframes v130JellyRise{
  0%{
    transform:translate3d(-50%,0,0) scale(.96) rotate(-.25deg);
    opacity:0;
  }
  5%{
    transform:translate3d(calc(-50% + var(--jelly-drift-a)),-9vh,0) scale(.98) rotate(.25deg);
    opacity:.90;
  }
  15%{
    transform:translate3d(calc(-50% + var(--jelly-drift-b)),-23vh,0) scale(.995) rotate(.55deg);
    opacity:.90;
  }
  27%{
    transform:translate3d(calc(-50% + var(--jelly-drift-a)),-39vh,0) scale(1) rotate(-.40deg);
    opacity:.90;
  }
  40%{
    transform:translate3d(calc(-50% + var(--jelly-drift-b)),-58vh,0) scale(1.01) rotate(.45deg);
    opacity:.89;
  }
  52%{
    transform:translate3d(calc(-50% + var(--jelly-drift-a)),-75vh,0) scale(1.015) rotate(-.35deg);
    opacity:.86;
  }
  60%{
    transform:translate3d(calc(-50% + var(--jelly-drift-b)),-87vh,0) scale(1.018) rotate(.30deg);
    opacity:.76;
  }
  68%{
    transform:translate3d(calc(-50% + var(--jelly-drift-a)),-99vh,0) scale(1.02) rotate(-.25deg);
    opacity:.62;
  }
  76%{
    transform:translate3d(calc(-50% + var(--jelly-drift-b)),-111vh,0) scale(1.02) rotate(.20deg);
    opacity:.46;
  }
  84%{
    transform:translate3d(calc(-50% + var(--jelly-drift-a)),-123vh,0) scale(1.02) rotate(-.14deg);
    opacity:.29;
  }
  91%{
    transform:translate3d(calc(-50% + var(--jelly-drift-b)),-134vh,0) scale(1.02) rotate(.10deg);
    opacity:.14;
  }
  96%{
    transform:translate3d(calc(-50% + var(--jelly-drift-a)),-143vh,0) scale(1.02) rotate(-.06deg);
    opacity:.05;
  }
  100%{
    transform:translate3d(-50%,-151vh,0) scale(1.02);
    opacity:0;
  }
}

.v129-jelly{
  animation-name:v130JellyRise!important;
  animation-timing-function:cubic-bezier(.17,.38,.18,1)!important;
}

/* On smaller jellyfish, keep the same realism but reduce swing amplitude visually. */
.v129-jelly-small{
  --jelly-drift-a:8px;
  --jelly-drift-b:-10px;
}

/* =========================================================
   V131 — water-current tentacles + centered elegant letter
   ========================================================= */

/* Tentacles follow the bell with delayed, asymmetric water-current motion.
   Two translucent lower-body layers move at different phases, avoiding a rigid
   up/down loop and creating a softer drifting-water impression. */
.v131-tentacles-near{
  opacity:.22!important;
  transform-origin:50% 27%!important;
  animation:v131TentacleNear 5.75s cubic-bezier(.37,.04,.20,1) infinite!important;
}
.v131-tentacles-far{
  z-index:0!important;
  opacity:.105!important;
  transform-origin:49% 28%!important;
  animation:v131TentacleFar 7.35s cubic-bezier(.32,.04,.23,1) -1.15s infinite!important;
  filter:blur(.25px)!important;
}
.v129-jelly-small .v131-tentacles-near{animation-duration:4.85s!important}
.v129-jelly-small .v131-tentacles-far{animation-duration:6.15s!important}

/* Near strands: broad sideways sweep, smaller vertical movement.
   The direction reverses gradually rather than snapping at endpoints. */
@keyframes v131TentacleNear{
  0%,100%{transform:translate3d(-5px,3px,0) rotate(-.45deg) skewX(-1.8deg) scaleX(.995) scaleY(1.005)}
  9%{transform:translate3d(1px,5px,0) rotate(.05deg) skewX(.3deg) scaleX(1) scaleY(1.014)}
  19%{transform:translate3d(9px,8px,0) rotate(.62deg) skewX(2.5deg) scaleX(1.006) scaleY(1.028)}
  30%{transform:translate3d(16px,11px,0) rotate(1.12deg) skewX(4.2deg) scaleX(1.012) scaleY(1.046)}
  40%{transform:translate3d(19px,10px,0) rotate(1.28deg) skewX(4.8deg) scaleX(1.014) scaleY(1.054)}
  50%{transform:translate3d(12px,8px,0) rotate(.74deg) skewX(2.8deg) scaleX(1.008) scaleY(1.044)}
  60%{transform:translate3d(2px,7px,0) rotate(.05deg) skewX(.2deg) scaleX(1) scaleY(1.032)}
  70%{transform:translate3d(-10px,8px,0) rotate(-.72deg) skewX(-2.8deg) scaleX(.995) scaleY(1.025)}
  80%{transform:translate3d(-18px,7px,0) rotate(-1.22deg) skewX(-4.5deg) scaleX(.990) scaleY(1.018)}
  89%{transform:translate3d(-20px,5px,0) rotate(-1.30deg) skewX(-4.9deg) scaleX(.989) scaleY(1.010)}
  95%{transform:translate3d(-12px,3px,0) rotate(-.82deg) skewX(-3deg) scaleX(.993) scaleY(1.005)}
}

/* Far strands: slower counter-current. It intentionally lags the near layer
   and sometimes continues sideways after the bell has begun relaxing. */
@keyframes v131TentacleFar{
  0%,100%{transform:translate3d(8px,7px,0) rotate(.55deg) skewX(2.2deg) scaleY(1.020)}
  12%{transform:translate3d(16px,9px,0) rotate(1.05deg) skewX(3.8deg) scaleY(1.036)}
  25%{transform:translate3d(21px,10px,0) rotate(1.32deg) skewX(5deg) scaleY(1.050)}
  38%{transform:translate3d(13px,9px,0) rotate(.72deg) skewX(2.7deg) scaleY(1.043)}
  50%{transform:translate3d(1px,7px,0) rotate(0deg) skewX(0deg) scaleY(1.032)}
  63%{transform:translate3d(-13px,8px,0) rotate(-.82deg) skewX(-3.1deg) scaleY(1.026)}
  76%{transform:translate3d(-21px,7px,0) rotate(-1.28deg) skewX(-4.8deg) scaleY(1.020)}
  87%{transform:translate3d(-13px,6px,0) rotate(-.78deg) skewX(-2.9deg) scaleY(1.016)}
  94%{transform:translate3d(-2px,6px,0) rotate(-.10deg) skewX(-.4deg) scaleY(1.018)}
}

/* The letter arrives from the exact visual center with a small elegant pop. */
.love-letter-v127{
  left:50%!important;
  top:50%!important;
  width:94px!important;
  height:69px!important;
  margin:0!important;
  transform:translate(-50%,-50%) scale(.56)!important;
  opacity:0!important;
}
.love-letter-v127.is-arrived{
  transform:translate(-50%,-50%) scale(1)!important;
  opacity:1!important;
  animation:v131LetterArrival .78s cubic-bezier(.16,.86,.24,1.18) both,
            v131LetterFloat 4.8s ease-in-out .82s infinite!important;
}
@keyframes v131LetterArrival{
  0%{transform:translate(-50%,-50%) scale(.42);opacity:0}
  55%{transform:translate(-50%,-50%) scale(1.08);opacity:1}
  76%{transform:translate(-50%,-50%) scale(.97);opacity:1}
  100%{transform:translate(-50%,-50%) scale(1);opacity:1}
}
@keyframes v131LetterFloat{
  0%,100%{margin-top:0}
  50%{margin-top:-5px}
}
.love-letter-visual-v127{width:94px!important;height:69px!important}

/* Simpler and cleaner vintage envelope: warm ivory paper + restrained wax seal. */
.v127-envelope{
  inset:5px 4px 5px!important;
  filter:drop-shadow(0 7px 11px rgba(0,0,0,.27))!important;
}
.v127-envelope-back{
  border-radius:5px!important;
  border:1px solid rgba(118,83,49,.44)!important;
  background:linear-gradient(145deg,#f3e4c5 0%,#dfc398 57%,#cda875 100%)!important;
}
.v127-envelope-paper-edge{
  left:6px!important;right:6px!important;top:6px!important;height:27px!important;
  background:linear-gradient(#faf0d6,#ead7b4)!important;
}
.v127-envelope-flap{
  height:37px!important;
  background:linear-gradient(160deg,#f6e8ca 0%,#dfc39a 68%,#cfa978 100%)!important;
}
.v127-envelope-front{
  background:
    linear-gradient(32deg,transparent 49.4%,rgba(112,78,46,.13) 50%,transparent 50.7%),
    linear-gradient(-32deg,transparent 49.4%,rgba(112,78,46,.13) 50%,transparent 50.7%),
    linear-gradient(145deg,transparent 45%,rgba(223,195,151,.9) 45.5%,#cca673 100%)!important;
}
.v127-wax-seal{
  width:18px!important;height:18px!important;
  font-size:8px!important;
  background:radial-gradient(circle at 35% 28%,#a84a48,#81252d 48%,#5e1820 100%)!important;
  box-shadow:0 2px 5px rgba(52,14,19,.32),inset 0 1px 1px rgba(255,190,155,.22)!important;
}

/* Refined opened letter: calmer, cleaner, more letter-like. */
.v127-open-letter{
  width:min(264px,73vw)!important;
  min-height:152px!important;
  padding:25px 21px 22px!important;
  border-radius:3px!important;
  background:
    radial-gradient(circle at 17% 20%,rgba(112,75,40,.045) 0 1px,transparent 1.4px),
    linear-gradient(145deg,#fbf3df 0%,#f0dfbd 60%,#e7d0a8 100%)!important;
  border:1px solid rgba(117,80,44,.30)!important;
  box-shadow:0 18px 44px rgba(0,0,0,.31),inset 0 0 24px rgba(104,66,31,.045)!important;
}
.v127-open-letter::before{
  inset:8px!important;
  border:1px solid rgba(132,91,49,.12)!important;
}
.v127-paper-ornament{
  margin-bottom:12px!important;
  opacity:.72!important;
}
.v127-letter-copy{
  color:#493526!important;
  font-size:17.5px!important;
  line-height:1.9!important;
  letter-spacing:.06em!important;
}
.v127-letter-sign{
  color:rgba(78,52,32,.52)!important;
  margin-top:15px!important;
}
.love-letter-v127.is-open .v127-open-letter{
  transform:translate(-50%,-50%) scale(1)!important;
}
.love-letter-v127.is-open .v127-envelope{
  opacity:.06!important;
  transform:translateY(22px) scale(.72)!important;
}
.love-letter-v127.is-dismissing{
  transform:translate(-50%,-50%) scale(.90)!important;
}

/* Keep exact center on both iPhone 14 and Xiaomi 14 Ultra. */
@media(max-width:430px){
  .love-letter-v127{left:50%!important;top:50%!important}
}

/* =========================================================
   V132 — simultaneous jelly + letter refinement
   ========================================================= */

/* -------------------------
   JELLY: stronger life-like coordination
   ------------------------- */

/* Bell keeps strong open/close breathing but gets a tiny asymmetric roll,
   so it doesn't look like a perfectly mechanical scale animation. */
.v129-jelly-main{
  animation:v132BellBreath 3.28s cubic-bezier(.19,.03,.17,1) var(--jelly-phase,0s) infinite!important;
  transform-origin:50% 14%!important;
}
.v129-jelly-small .v129-jelly-main{
  animation-duration:2.92s!important;
}

@keyframes v132BellBreath{
  0%,100%{
    transform:translate3d(0,0,0) rotate(-.18deg) scaleX(1) scaleY(1);
    filter:brightness(1);
  }
  7%{
    transform:translate3d(-1px,2px,0) rotate(-.35deg) scaleX(.94) scaleY(1.045);
    filter:brightness(1.02);
  }
  16%{
    transform:translate3d(1px,11px,0) rotate(.20deg) scaleX(.72) scaleY(1.165);
    filter:brightness(1.07);
  }
  25%{
    transform:translate3d(-1px,-10px,0) rotate(.42deg) scaleX(1.14) scaleY(.905);
    filter:brightness(1.10);
  }
  36%{
    transform:translate3d(0,-6px,0) rotate(.18deg) scaleX(1.085) scaleY(.945);
    filter:brightness(1.07);
  }
  50%{
    transform:translate3d(1px,-3px,0) rotate(-.10deg) scaleX(1.046) scaleY(.973);
    filter:brightness(1.045);
  }
  66%{
    transform:translate3d(0,-1px,0) rotate(-.20deg) scaleX(1.022) scaleY(.988);
    filter:brightness(1.025);
  }
  82%{
    transform:translate3d(-1px,0,0) rotate(-.22deg) scaleX(1.008) scaleY(.996);
    filter:brightness(1.01);
  }
  93%{
    transform:translate3d(0,1px,0) rotate(-.18deg) scaleX(1.002) scaleY(.999);
    filter:brightness(1);
  }
}

/* Near tentacles: broad side sweep, low vertical movement.
   The direction change is smooth and intentionally delayed from the bell. */
.v131-tentacles-near{
  animation:v132TentacleNear 6.1s cubic-bezier(.33,.05,.23,1) calc(var(--jelly-phase,0s) - .55s) infinite!important;
  opacity:.225!important;
}
.v129-jelly-small .v131-tentacles-near{
  animation-duration:5.05s!important;
}

@keyframes v132TentacleNear{
  0%,100%{
    transform:translate3d(-8px,3px,0) rotate(-.55deg) skewX(-2.2deg) scaleX(.992) scaleY(1.004);
  }
  8%{
    transform:translate3d(-2px,4px,0) rotate(-.18deg) skewX(-.8deg) scaleX(.996) scaleY(1.010);
  }
  18%{
    transform:translate3d(7px,6px,0) rotate(.42deg) skewX(1.8deg) scaleX(1.003) scaleY(1.020);
  }
  30%{
    transform:translate3d(16px,8px,0) rotate(1.02deg) skewX(4.0deg) scaleX(1.010) scaleY(1.034);
  }
  40%{
    transform:translate3d(22px,9px,0) rotate(1.35deg) skewX(5.3deg) scaleX(1.014) scaleY(1.042);
  }
  50%{
    transform:translate3d(15px,8px,0) rotate(.88deg) skewX(3.3deg) scaleX(1.009) scaleY(1.035);
  }
  61%{
    transform:translate3d(4px,6px,0) rotate(.18deg) skewX(.7deg) scaleX(1.001) scaleY(1.024);
  }
  72%{
    transform:translate3d(-9px,7px,0) rotate(-.62deg) skewX(-2.4deg) scaleX(.995) scaleY(1.018);
  }
  82%{
    transform:translate3d(-18px,6px,0) rotate(-1.08deg) skewX(-4.2deg) scaleX(.990) scaleY(1.012);
  }
  91%{
    transform:translate3d(-23px,5px,0) rotate(-1.38deg) skewX(-5.5deg) scaleX(.988) scaleY(1.007);
  }
  96%{
    transform:translate3d(-15px,4px,0) rotate(-.92deg) skewX(-3.5deg) scaleX(.991) scaleY(1.005);
  }
}

/* Far tentacles: slower counter-flow gives water-current depth.
   Vertical travel is intentionally subtle; most movement is lateral. */
.v131-tentacles-far{
  animation:v132TentacleFar 7.9s cubic-bezier(.31,.05,.24,1) calc(var(--jelly-phase,0s) - 1.35s) infinite!important;
  opacity:.095!important;
  filter:blur(.35px)!important;
}
.v129-jelly-small .v131-tentacles-far{
  animation-duration:6.55s!important;
}

@keyframes v132TentacleFar{
  0%,100%{transform:translate3d(10px,6px,0) rotate(.65deg) skewX(2.5deg) scaleY(1.018)}
  12%{transform:translate3d(18px,7px,0) rotate(1.12deg) skewX(4.1deg) scaleY(1.028)}
  24%{transform:translate3d(24px,8px,0) rotate(1.42deg) skewX(5.5deg) scaleY(1.036)}
  37%{transform:translate3d(16px,8px,0) rotate(.92deg) skewX(3.4deg) scaleY(1.032)}
  50%{transform:translate3d(3px,7px,0) rotate(.12deg) skewX(.5deg) scaleY(1.025)}
  63%{transform:translate3d(-11px,7px,0) rotate(-.72deg) skewX(-2.8deg) scaleY(1.020)}
  76%{transform:translate3d(-22px,6px,0) rotate(-1.28deg) skewX(-4.9deg) scaleY(1.016)}
  87%{transform:translate3d(-15px,6px,0) rotate(-.86deg) skewX(-3.2deg) scaleY(1.015)}
  95%{transform:translate3d(-3px,6px,0) rotate(-.18deg) skewX(-.7deg) scaleY(1.016)}
}

/* Body path: a touch more meander while still clearly swimming upward. */
.v129-jelly{
  animation-name:v132JellyRise!important;
}
@keyframes v132JellyRise{
  0%{transform:translate3d(-50%,0,0) scale(.96) rotate(-.28deg);opacity:0}
  5%{transform:translate3d(calc(-50% + var(--jelly-drift-a)),-9vh,0) scale(.98) rotate(.22deg);opacity:.90}
  15%{transform:translate3d(calc(-50% + var(--jelly-drift-b)),-23vh,0) scale(.995) rotate(.52deg);opacity:.90}
  27%{transform:translate3d(calc(-50% + var(--jelly-drift-a)),-39vh,0) scale(1) rotate(-.46deg);opacity:.90}
  40%{transform:translate3d(calc(-50% + var(--jelly-drift-b)),-58vh,0) scale(1.01) rotate(.48deg);opacity:.89}
  52%{transform:translate3d(calc(-50% + var(--jelly-drift-a)),-75vh,0) scale(1.015) rotate(-.38deg);opacity:.86}
  60%{transform:translate3d(calc(-50% + var(--jelly-drift-b)),-87vh,0) scale(1.018) rotate(.32deg);opacity:.76}
  68%{transform:translate3d(calc(-50% + var(--jelly-drift-a)),-99vh,0) scale(1.02) rotate(-.26deg);opacity:.62}
  76%{transform:translate3d(calc(-50% + var(--jelly-drift-b)),-111vh,0) scale(1.02) rotate(.20deg);opacity:.46}
  84%{transform:translate3d(calc(-50% + var(--jelly-drift-a)),-123vh,0) scale(1.02) rotate(-.14deg);opacity:.29}
  91%{transform:translate3d(calc(-50% + var(--jelly-drift-b)),-134vh,0) scale(1.02) rotate(.10deg);opacity:.14}
  96%{transform:translate3d(calc(-50% + var(--jelly-drift-a)),-143vh,0) scale(1.02) rotate(-.06deg);opacity:.05}
  100%{transform:translate3d(-50%,-151vh,0) scale(1.02);opacity:0}
}

/* -------------------------
   LETTER: smaller, cleaner, more refined
   ------------------------- */

/* Center pop stays, but envelope becomes slightly smaller and sharper. */
.love-letter-v127{
  width:88px!important;
  height:64px!important;
}
.love-letter-visual-v127{
  width:88px!important;
  height:64px!important;
}

.v127-envelope{
  inset:4px 3px 4px!important;
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.25))!important;
}
.v127-envelope-back{
  border-radius:5px!important;
  border:1px solid rgba(110,77,45,.38)!important;
  background:linear-gradient(145deg,#f5e8cd 0%,#e4c89f 58%,#d0ac79 100%)!important;
}
.v127-envelope-paper-edge{
  left:6px!important;
  right:6px!important;
  top:5px!important;
  height:24px!important;
  border-radius:3px 3px 1px 1px!important;
}
.v127-envelope-flap{
  height:33px!important;
  background:linear-gradient(160deg,#f8ecd1 0%,#e4c9a0 68%,#d1ac7b 100%)!important;
}
.v127-envelope-front{
  background:
    linear-gradient(32deg,transparent 49.5%,rgba(106,74,43,.11) 50%,transparent 50.7%),
    linear-gradient(-32deg,transparent 49.5%,rgba(106,74,43,.11) 50%,transparent 50.7%),
    linear-gradient(145deg,transparent 45%,rgba(226,198,155,.92) 45.5%,#d0aa76 100%)!important;
}
.v127-wax-seal{
  width:16px!important;
  height:16px!important;
  font-size:7px!important;
  top:58%!important;
  box-shadow:0 2px 4px rgba(48,14,18,.29),inset 0 1px 1px rgba(255,195,165,.20)!important;
}

/* Open letter: more elegant proportions and more breathing room around text. */
.v127-open-letter{
  width:min(258px,72vw)!important;
  min-height:148px!important;
  padding:24px 20px 21px!important;
  border-radius:3px!important;
  background:
    radial-gradient(circle at 16% 18%,rgba(105,70,37,.038) 0 1px,transparent 1.4px),
    radial-gradient(circle at 84% 74%,rgba(105,70,37,.028) 0 1px,transparent 1.3px),
    linear-gradient(145deg,#fcf5e4 0%,#f1e1c1 60%,#e8d1aa 100%)!important;
  border:1px solid rgba(112,77,43,.27)!important;
  box-shadow:
    0 16px 40px rgba(0,0,0,.29),
    inset 0 0 22px rgba(99,62,30,.04)!important;
}
.v127-open-letter::before{
  inset:8px!important;
  border-color:rgba(126,86,47,.10)!important;
}
.v127-paper-ornament{
  margin-bottom:11px!important;
  font-size:9.5px!important;
  letter-spacing:.18em!important;
}
.v127-letter-copy{
  font-size:17px!important;
  line-height:1.92!important;
  letter-spacing:.06em!important;
}
.v127-letter-sign{
  margin-top:14px!important;
  font-size:10px!important;
  letter-spacing:.11em!important;
}

/* Slightly softer disappearance after reading. */
.love-letter-v127.is-dismissing{
  opacity:0!important;
  transform:translate(-50%,-50%) scale(.88)!important;
  filter:blur(.7px)!important;
  transition:opacity .48s ease,transform .48s ease,filter .48s ease!important;
}

/* =========================================================
   V133 — instant summon + true pulse-propelled purple jellyfish
   ========================================================= */
/* The old -36vh start + fade-in caused the perceived 1–3 s pause. */
.v129-jelly{
  bottom:-8vh!important;
  opacity:.88!important;
  animation:v133JellyRise var(--jelly-life,24s) cubic-bezier(.20,.34,.18,1) forwards!important;
  contain:layout style paint;
}
.v133-jelly-swimmer{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  transform-origin:50% 22%!important;
  animation:v133BodyThrust var(--jelly-breath,3.12s) cubic-bezier(.18,.03,.16,1) var(--jelly-phase,0s) infinite!important;
  will-change:transform;
}
/* Real jellyfish rhythm: slow refill -> quick bell contraction -> short propulsion kick -> elastic reopen. */
.v129-jelly-main{
  animation:v133BellBreath var(--jelly-breath,3.12s) cubic-bezier(.18,.02,.15,1) var(--jelly-phase,0s) infinite!important;
  transform-origin:50% 18%!important;
  will-change:transform,filter;
}
@keyframes v133BellBreath{
  0%,100%{transform:translate3d(0,0,0) rotate(-.15deg) scaleX(1.035) scaleY(.985);filter:brightness(1.01)}
  12%{transform:translate3d(-1px,1px,0) rotate(-.28deg) scaleX(1.055) scaleY(.970);filter:brightness(1.025)}
  27%{transform:translate3d(0,3px,0) rotate(.05deg) scaleX(1.018) scaleY(.995);filter:brightness(1.04)}
  36%{transform:translate3d(1px,7px,0) rotate(.28deg) scaleX(.875) scaleY(1.090);filter:brightness(1.075)}
  43%{transform:translate3d(0,10px,0) rotate(.18deg) scaleX(.735) scaleY(1.175);filter:brightness(1.115)}
  49%{transform:translate3d(-1px,-8px,0) rotate(-.22deg) scaleX(1.145) scaleY(.905);filter:brightness(1.10)}
  58%{transform:translate3d(0,-5px,0) rotate(-.12deg) scaleX(1.095) scaleY(.942);filter:brightness(1.075)}
  71%{transform:translate3d(1px,-2px,0) rotate(.10deg) scaleX(1.062) scaleY(.963);filter:brightness(1.045)}
  86%{transform:translate3d(0,0,0) rotate(-.08deg) scaleX(1.043) scaleY(.978);filter:brightness(1.02)}
}
@keyframes v133BodyThrust{
  0%,32%,100%{transform:translate3d(0,0,0) rotate(-.20deg)}
  41%{transform:translate3d(0,3px,0) rotate(.16deg)}
  48%{transform:translate3d(0,-11px,0) rotate(.32deg)}
  57%{transform:translate3d(1px,-7px,0) rotate(-.18deg)}
  72%{transform:translate3d(-1px,-3px,0) rotate(-.32deg)}
  88%{transform:translate3d(0,-1px,0) rotate(-.22deg)}
}
/* Tentacles react after the bell, with two water-current layers and asymmetric lateral sweep. */
.v131-tentacles-near{
  animation:v133TentacleNear 5.24s cubic-bezier(.30,.05,.22,1) calc(var(--jelly-phase,0s) - .18s) infinite!important;
  opacity:.26!important;
  transform-origin:50% 29%!important;
}
.v131-tentacles-far{
  animation:v133TentacleFar 6.65s cubic-bezier(.31,.04,.23,1) calc(var(--jelly-phase,0s) - .58s) infinite!important;
  opacity:.115!important;
  transform-origin:49% 30%!important;
  filter:blur(.3px)!important;
}
@keyframes v133TentacleNear{
  0%,100%{transform:translate3d(-7px,2px,0) rotate(-.50deg) skewX(-2.2deg) scaleX(.994) scaleY(1.00)}
  14%{transform:translate3d(2px,5px,0) rotate(.18deg) skewX(.8deg) scaleX(1.002) scaleY(1.015)}
  28%{transform:translate3d(14px,8px,0) rotate(.92deg) skewX(4.0deg) scaleX(1.010) scaleY(1.038)}
  39%{transform:translate3d(20px,10px,0) rotate(1.24deg) skewX(5.2deg) scaleX(1.014) scaleY(1.060)}
  48%{transform:translate3d(10px,15px,0) rotate(.55deg) skewX(2.5deg) scaleX(1.006) scaleY(1.085)}
  58%{transform:translate3d(-1px,12px,0) rotate(-.05deg) skewX(-.3deg) scaleX(1.000) scaleY(1.060)}
  72%{transform:translate3d(-14px,8px,0) rotate(-.92deg) skewX(-4.0deg) scaleX(.992) scaleY(1.034)}
  86%{transform:translate3d(-20px,5px,0) rotate(-1.18deg) skewX(-5.0deg) scaleX(.988) scaleY(1.014)}
}
@keyframes v133TentacleFar{
  0%,100%{transform:translate3d(10px,5px,0) rotate(.62deg) skewX(2.5deg) scaleY(1.018)}
  18%{transform:translate3d(23px,8px,0) rotate(1.35deg) skewX(5.4deg) scaleY(1.038)}
  34%{transform:translate3d(15px,12px,0) rotate(.85deg) skewX(3.2deg) scaleY(1.064)}
  50%{transform:translate3d(0,14px,0) rotate(0deg) skewX(0deg) scaleY(1.075)}
  66%{transform:translate3d(-17px,10px,0) rotate(-1.02deg) skewX(-4.0deg) scaleY(1.052)}
  82%{transform:translate3d(-24px,7px,0) rotate(-1.38deg) skewX(-5.6deg) scaleY(1.030)}
}
/* Immediate visibility, then pulse-assisted ascent. The first 120 ms visibly moves upward. */
@keyframes v133JellyRise{
  0%{transform:translate3d(-50%,0,0) scale(.985) rotate(-.22deg);opacity:.84}
  .5%{transform:translate3d(calc(-50% + 1px),-2.2vh,0) scale(.99) rotate(-.12deg);opacity:.93}
  3%{transform:translate3d(calc(-50% + var(--jelly-drift-a)),-10vh,0) scale(.995) rotate(.25deg);opacity:.94}
  11%{transform:translate3d(calc(-50% + var(--jelly-drift-b)),-24vh,0) scale(1) rotate(.48deg);opacity:.94}
  22%{transform:translate3d(calc(-50% + var(--jelly-drift-a)),-42vh,0) scale(1.005) rotate(-.42deg);opacity:.93}
  34%{transform:translate3d(calc(-50% + var(--jelly-drift-b)),-61vh,0) scale(1.01) rotate(.40deg);opacity:.91}
  47%{transform:translate3d(calc(-50% + var(--jelly-drift-a)),-80vh,0) scale(1.015) rotate(-.32deg);opacity:.86}
  59%{transform:translate3d(calc(-50% + var(--jelly-drift-b)),-96vh,0) scale(1.018) rotate(.28deg);opacity:.74}
  70%{transform:translate3d(calc(-50% + var(--jelly-drift-a)),-111vh,0) scale(1.02) rotate(-.22deg);opacity:.58}
  80%{transform:translate3d(calc(-50% + var(--jelly-drift-b)),-124vh,0) scale(1.02) rotate(.17deg);opacity:.40}
  89%{transform:translate3d(calc(-50% + var(--jelly-drift-a)),-136vh,0) scale(1.02) rotate(-.10deg);opacity:.22}
  96%{transform:translate3d(calc(-50% + var(--jelly-drift-b)),-146vh,0) scale(1.02);opacity:.07}
  100%{transform:translate3d(-50%,-153vh,0) scale(1.02);opacity:0}
}
@media (max-width:430px){
  .v129-jelly{bottom:-5vh!important}
  .v129-jelly-big{width:min(50vw,255px)!important}
  .v129-jelly-small{width:min(18vw,88px)!important}
}
@media (prefers-reduced-motion:reduce){
  .v133-jelly-swimmer,.v129-jelly-main,.v131-tentacles-near,.v131-tentacles-far{animation-duration:5.2s!important}
}

.v129-jelly-small .v131-tentacles-near{animation-duration:4.65s!important}
.v129-jelly-small .v131-tentacles-far{animation-duration:5.92s!important}

/* =========================================================
   V134 — layered translucent bell / anatomical breathing V1
   ========================================================= */
/* Keep the original body faintly present for continuity; the independent membrane above owns the visible bell. */
.v129-jelly-big .v129-jelly-main{opacity:.54!important;filter:brightness(.96) saturate(.82)!important}
.v134-bell-layer{
  position:absolute;left:0;top:0;width:100%;height:55%;overflow:hidden;pointer-events:none;
  transform-origin:50% 30%;z-index:5;opacity:.92;
  animation:v134BellShape 3.55s linear var(--jelly-phase,0s) infinite;
  will-change:transform,filter,border-radius;
}
.v134-bell-membrane{
  position:absolute;inset:0 0 auto 0;width:100%;height:auto;display:block;
  opacity:.66;mix-blend-mode:screen;
  filter:saturate(.72) brightness(1.02) contrast(.93) drop-shadow(0 0 4px rgba(187,165,255,.16));
  transform-origin:50% 23%;
  animation:v134MembraneLight 3.55s linear var(--jelly-phase,0s) infinite;
}
.v134-bell-layer:after{
  content:"";position:absolute;left:8%;right:8%;top:3%;height:82%;border-radius:52% 52% 44% 44%/62% 62% 35% 35%;
  background:radial-gradient(ellipse at 50% 36%,rgba(224,216,255,.13) 0%,rgba(167,137,255,.065) 35%,rgba(118,86,224,.025) 58%,transparent 75%);
  box-shadow:inset 0 -7px 13px rgba(208,190,255,.055),inset 0 3px 8px rgba(238,234,255,.07);
  animation:v134EdgeRipple 3.55s ease-in-out var(--jelly-phase,0s) infinite;
}
.v134-bell-glow{
  position:absolute;left:27%;top:24%;width:46%;height:42%;border-radius:50%;
  background:radial-gradient(ellipse,rgba(213,188,255,.22),rgba(155,112,241,.09) 45%,transparent 72%);
  filter:blur(4px);opacity:.35;mix-blend-mode:screen;
  animation:v134InnerGlow 3.55s linear var(--jelly-phase,0s) infinite;
}
/* 0–45% refill/expand; 45–56% brief hold; 56–72% fast muscular contraction;
   72–82% elastic rebound; 82–100% soft refill. The width/height relationship changes, not just scale. */
@keyframes v134BellShape{
  0%,100%{transform:translate3d(0,1px,0) scaleX(1.075) scaleY(.91) skewX(-.25deg);border-radius:48% 52% 44% 46%/58% 57% 38% 36%;filter:brightness(.99)}
  22%{transform:translate3d(-1px,2px,0) scaleX(1.105) scaleY(.885) skewX(.18deg);border-radius:51% 49% 47% 43%/55% 59% 40% 34%;filter:brightness(.985)}
  45%{transform:translate3d(1px,3px,0) scaleX(1.12) scaleY(.875) skewX(-.12deg);border-radius:49% 51% 45% 48%/56% 56% 39% 37%;filter:brightness(.98)}
  56%{transform:translate3d(0,4px,0) scaleX(1.095) scaleY(.90) skewX(.12deg);border-radius:51% 49% 43% 45%/59% 57% 34% 39%;filter:brightness(1.00)}
  64%{transform:translate3d(0,8px,0) scaleX(.91) scaleY(1.055) skewX(-.28deg);border-radius:46% 54% 36% 39%/67% 65% 25% 28%;filter:brightness(1.055)}
  71%{transform:translate3d(1px,10px,0) scaleX(.78) scaleY(1.16) skewX(.22deg);border-radius:43% 57% 31% 34%/72% 70% 20% 22%;filter:brightness(1.10)}
  77%{transform:translate3d(-1px,-3px,0) scaleX(1.14) scaleY(.86) skewX(-.12deg);border-radius:52% 48% 48% 42%/54% 58% 41% 34%;filter:brightness(1.045)}
  84%{transform:translate3d(0,-1px,0) scaleX(1.095) scaleY(.895) skewX(.10deg);border-radius:49% 51% 45% 46%/57% 56% 38% 36%;filter:brightness(1.015)}
}
@keyframes v134MembraneLight{
  0%,45%,100%{opacity:.58;filter:saturate(.68) brightness(.98) contrast(.91) drop-shadow(0 0 3px rgba(190,170,255,.12))}
  64%{opacity:.69;filter:saturate(.76) brightness(1.04) contrast(.94) drop-shadow(0 0 5px rgba(190,163,255,.18))}
  71%{opacity:.76;filter:saturate(.82) brightness(1.10) contrast(.96) drop-shadow(0 0 7px rgba(196,168,255,.22))}
  84%{opacity:.63;filter:saturate(.72) brightness(1.01) contrast(.92) drop-shadow(0 0 4px rgba(190,170,255,.14))}
}
@keyframes v134InnerGlow{0%,45%,100%{opacity:.22;transform:scale(1.08)}64%{opacity:.38;transform:scale(.94)}71%{opacity:.56;transform:scale(.80)}82%{opacity:.29;transform:scale(1.02)}}
@keyframes v134EdgeRipple{0%,100%{transform:skewX(-.35deg) scaleX(1)}28%{transform:skewX(.45deg) scaleX(.995)}56%{transform:skewX(-.2deg) scaleX(1.01)}71%{transform:skewX(.65deg) scaleX(.96)}84%{transform:skewX(-.45deg) scaleX(1.008)}}
/* V134 focuses the new anatomy on the large purple jelly first; small jelly remain V133 until this bell is approved. */
.v129-jelly-small .v134-bell-layer{display:none!important}
@media (prefers-reduced-motion:reduce){.v134-bell-layer,.v134-bell-membrane,.v134-bell-layer:after,.v134-bell-glow{animation-duration:5.4s!important}}


/* =========================================================
   V135 — visibility/click recovery for layered bell
   ========================================================= */
#livingJellyStage{display:block!important;visibility:visible!important;opacity:1!important;pointer-events:none!important;z-index:30!important;}
.v129-jelly.v133-live{display:block!important;visibility:visible!important;opacity:.94!important;}
.v129-jelly-big{bottom:-2vh!important;}
.v129-jelly-big .v134-bell-layer{display:block!important;visibility:visible!important;opacity:.96!important;}
/* Give the absolute swimmer a concrete box; some mobile WebViews collapse percentage-height children otherwise. */
.v129-jelly-big .v133-jelly-swimmer{height:auto!important;aspect-ratio:1 / 2.08!important;}
.v129-jelly-big .v134-bell-layer{height:31%!important;overflow:hidden!important;}
@media (max-width:430px){.v129-jelly-big{width:min(58vw,270px)!important;bottom:-1vh!important;}}

/* =========================================================
   V136 — true standalone translucent SVG bell (no image crop)
   ========================================================= */
.v129-jelly-big .v134-bell-layer{height:36%!important;overflow:visible!important;top:-1%!important;}
.v129-jelly-big .v134-bell-membrane{display:none!important;}
.v136-bell-svg{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible;filter:drop-shadow(0 0 5px rgba(184,158,255,.18));}
.v136-bell-shell{transform-box:fill-box;transform-origin:50% 58%;animation:v136BellMorph 3.55s cubic-bezier(.24,.02,.15,1) var(--jelly-phase,0s) infinite;will-change:transform;}
.v136-bell-edge{fill:none;stroke:rgba(229,218,255,.36);stroke-width:1.2;vector-effect:non-scaling-stroke;animation:v136EdgePulse 3.55s ease-in-out var(--jelly-phase,0s) infinite;}
.v136-bell-inner{transform-box:fill-box;transform-origin:50% 50%;animation:v136InnerPulse 3.55s linear var(--jelly-phase,0s) infinite;}
.v136-bell-rib{fill:none;stroke:rgba(211,194,255,.18);stroke-width:.9;vector-effect:non-scaling-stroke;stroke-linecap:round;}
@keyframes v136BellMorph{
  0%,100%{transform:translateY(3px) scaleX(1.08) scaleY(.91) rotate(-.2deg)}
  24%{transform:translateY(4px) scaleX(1.12) scaleY(.88) rotate(.15deg)}
  48%{transform:translateY(5px) scaleX(1.13) scaleY(.87) rotate(-.1deg)}
  58%{transform:translateY(6px) scaleX(1.06) scaleY(.94) rotate(.1deg)}
  66%{transform:translateY(10px) scaleX(.91) scaleY(1.08) rotate(-.2deg)}
  72%{transform:translateY(12px) scaleX(.79) scaleY(1.18) rotate(.15deg)}
  79%{transform:translateY(-2px) scaleX(1.15) scaleY(.85) rotate(-.1deg)}
  87%{transform:translateY(0) scaleX(1.10) scaleY(.90)}
}
@keyframes v136InnerPulse{0%,48%,100%{opacity:.28;transform:scale(1.08)}66%{opacity:.44;transform:scale(.92)}72%{opacity:.62;transform:scale(.78)}84%{opacity:.34;transform:scale(1.02)}}
@keyframes v136EdgePulse{0%,100%{opacity:.50;stroke-width:1.0}48%{opacity:.42;stroke-width:.9}72%{opacity:.78;stroke-width:1.35}84%{opacity:.56;stroke-width:1.05}}
.v129-jelly-big .v129-jelly-main{opacity:.34!important;}
@media(max-width:430px){.v129-jelly-big .v134-bell-layer{height:38%!important;top:-2%!important}}

/* =========================================================
   V137 — fix the actual zero-height DOM jelly container
   ========================================================= */
/* V129 only defined width on the absolutely-positioned jelly node. All descendants
   were absolute as well, so some mobile WebViews resolved the parent height to ~0px.
   The bell therefore rendered as a thin line. Give the jelly itself real geometry. */
.v129-jelly-big{
  aspect-ratio:1 / 2.08!important;
  height:auto!important;
  min-height:420px!important;
  overflow:visible!important;
}
.v129-jelly-small{
  aspect-ratio:1 / 2.08!important;
  height:auto!important;
  min-height:145px!important;
  overflow:visible!important;
}
.v129-jelly-big .v133-jelly-swimmer,
.v129-jelly-small .v133-jelly-swimmer{
  position:absolute!important;
  left:0!important;top:0!important;right:0!important;bottom:0!important;
  width:100%!important;height:100%!important;
  aspect-ratio:auto!important;
}
/* The standalone bell now has a nonzero percentage height on every browser. */
.v129-jelly-big .v134-bell-layer{
  left:0!important;
  top:0!important;
  width:100%!important;
  height:27%!important;
  min-height:112px!important;
  overflow:visible!important;
  z-index:8!important;
  opacity:1!important;
}
.v129-jelly-big .v136-bell-svg{
  position:absolute!important;
  left:0!important;top:0!important;
  width:100%!important;height:100%!important;
  display:block!important;
  overflow:visible!important;
}
/* For this bell-validation build, dim the old full-image bell and tentacle copies so
   the new membrane is unambiguous, while keeping enough body context to orient it. */
.v129-jelly-big .v129-jelly-main{opacity:.18!important;}
.v129-jelly-big .v131-tentacles-near{opacity:.12!important;}
.v129-jelly-big .v131-tentacles-far{opacity:.055!important;}
@media(max-width:430px){
  .v129-jelly-big{width:min(62vw,270px)!important;min-height:390px!important;bottom:-2vh!important;}
  .v129-jelly-big .v134-bell-layer{height:30%!important;min-height:116px!important;}
}

/* =========================================================
   V138 — isolated new jellyfish test mode
   Old purple/small jellyfish are paused. Tap spawns only this vector jellyfish.
   ========================================================= */
.v129-jelly{display:none!important;}
.v138-jelly-test{
  position:absolute;
  z-index:36;
  left:var(--v138-x,50%);
  bottom:-26vh;
  width:min(56vw,265px);
  height:auto;
  aspect-ratio:240 / 460;
  pointer-events:none;
  transform:translate3d(-50%,0,0);
  opacity:0;
  will-change:transform,opacity;
}
.v138-jelly-test.v138-live{
  animation:v138Rise 24s cubic-bezier(.19,.72,.22,1) forwards;
}
.v138-swimmer{
  position:absolute;inset:0;
  transform-origin:50% 24%;
  animation:v138Thrust 3.65s cubic-bezier(.25,.02,.16,1) var(--v138-phase,0s) infinite;
  will-change:transform;
}
.v138-jelly-svg{width:100%;height:100%;display:block;overflow:visible;filter:drop-shadow(0 0 7px rgba(164,126,255,.18));}
.v138-bell{transform-box:fill-box;transform-origin:50% 72%;animation:v138BellBreath 3.65s cubic-bezier(.24,.02,.14,1) var(--v138-phase,0s) infinite;will-change:transform;}
.v138-bell-fill{filter:drop-shadow(0 0 9px rgba(194,166,255,.24));}
.v138-bell-edge{fill:none;stroke:rgba(244,237,255,.62);stroke-width:1.25;stroke-linecap:round;vector-effect:non-scaling-stroke;}
.v138-bell-rim{fill:none;stroke:rgba(229,211,255,.52);stroke-width:1.1;stroke-linecap:round;vector-effect:non-scaling-stroke;animation:v138Rim 3.65s ease-in-out var(--v138-phase,0s) infinite;}
.v138-inner{transform-box:fill-box;transform-origin:50% 55%;animation:v138Inner 3.65s linear var(--v138-phase,0s) infinite;}
.v138-organ{fill:rgba(194,153,255,.38);}
.v138-ribs{fill:none;stroke:rgba(230,216,255,.30);stroke-width:1;stroke-linecap:round;vector-effect:non-scaling-stroke;}
.v138-arms,.v138-filaments{transform-box:fill-box;transform-origin:50% 0%;}
.v138-arm{fill:none;stroke-width:9;stroke-linecap:round;filter:drop-shadow(0 0 4px rgba(174,139,245,.17));transform-box:fill-box;transform-origin:50% 0%;}
.v138-arm-a{animation:v138ArmA 5.1s ease-in-out calc(var(--v138-phase,0s) - .4s) infinite;}
.v138-arm-b{animation:v138ArmB 5.8s ease-in-out calc(var(--v138-phase,0s) - 1.1s) infinite;}
.v138-arm-c{animation:v138ArmA 5.45s ease-in-out calc(var(--v138-phase,0s) - 1.8s) infinite reverse;}
.v138-arm-d{animation:v138ArmB 6.1s ease-in-out calc(var(--v138-phase,0s) - .8s) infinite reverse;}
.v138-filament{fill:none;stroke:rgba(220,202,255,.29);stroke-width:1.15;stroke-linecap:round;vector-effect:non-scaling-stroke;transform-box:fill-box;transform-origin:50% 0%;}
.v138-filament-a{animation:v138ThreadA 6.8s ease-in-out -.7s infinite}.v138-filament-b{animation:v138ThreadB 7.4s ease-in-out -2.1s infinite}.v138-filament-c{animation:v138ThreadA 6.1s ease-in-out -3.2s infinite reverse}.v138-filament-d{animation:v138ThreadB 7.1s ease-in-out -1.3s infinite reverse}.v138-filament-e{animation:v138ThreadA 6.6s ease-in-out -2.7s infinite}.v138-filament-f{animation:v138ThreadB 7.8s ease-in-out -.2s infinite reverse}
@keyframes v138BellBreath{
  0%,9%{transform:scaleX(1.07) scaleY(.94) translateY(1px)}
  38%,50%{transform:scaleX(1.11) scaleY(.91) translateY(3px)}
  60%{transform:scaleX(1.02) scaleY(1.01) translateY(-1px)}
  68%{transform:scaleX(.82) scaleY(1.18) translateY(-7px)}
  73%{transform:scaleX(.79) scaleY(1.22) translateY(-9px)}
  82%{transform:scaleX(.96) scaleY(1.05) translateY(-3px)}
  100%{transform:scaleX(1.07) scaleY(.94) translateY(1px)}
}
@keyframes v138Inner{0%,50%,100%{opacity:.58;transform:scale(1.05)}68%,74%{opacity:.88;transform:scale(.83)}}
@keyframes v138Rim{0%,50%,100%{opacity:.55;transform:scaleX(1)}70%{opacity:.86;transform:scaleX(.82)}}
@keyframes v138Thrust{0%,53%,100%{transform:translate3d(0,0,0) rotate(-.3deg)}69%{transform:translate3d(0,-8px,0) rotate(.5deg)}78%{transform:translate3d(1px,-12px,0) rotate(-.2deg)}}
@keyframes v138ArmA{0%,100%{transform:translateX(-1px) rotate(-1.2deg)}50%{transform:translateX(7px) rotate(2.6deg)}}
@keyframes v138ArmB{0%,100%{transform:translateX(2px) rotate(1deg)}50%{transform:translateX(-8px) rotate(-2.2deg)}}
@keyframes v138ThreadA{0%,100%{transform:translateX(-2px) rotate(-.7deg)}50%{transform:translateX(10px) rotate(2.3deg)}}
@keyframes v138ThreadB{0%,100%{transform:translateX(3px) rotate(.8deg)}50%{transform:translateX(-11px) rotate(-2.5deg)}}
@keyframes v138Rise{
  0%{opacity:.94;transform:translate3d(-50%,0,0)}
  3%{opacity:.98;transform:translate3d(calc(-50% + 2px),-8vh,0)}
  18%{opacity:1;transform:translate3d(calc(-50% + var(--v138-drift,0px)*.18),-25vh,0)}
  45%{opacity:.98;transform:translate3d(calc(-50% + var(--v138-drift,0px)*.55),-53vh,0)}
  73%{opacity:.94;transform:translate3d(calc(-50% + var(--v138-drift,0px)*.82),-82vh,0)}
  91%{opacity:.74;transform:translate3d(calc(-50% + var(--v138-drift,0px)),-105vh,0)}
  100%{opacity:0;transform:translate3d(calc(-50% + var(--v138-drift,0px)*1.08),-124vh,0)}
}
@media(max-width:430px){.v138-jelly-test{width:min(64vw,260px);bottom:-20vh}.v138-jelly-test.v138-live{animation-duration:22s}}

/* =========================================================
   V228 — three-membrane gelatinous bell + real umbrella contraction
   Test mode remains: taps spawn only the new jellyfish.
   ========================================================= */
.v138-jelly-test{z-index:42!important;width:min(61vw,286px)!important;filter:none!important;}
.v228-jelly-svg{filter:drop-shadow(0 0 10px rgba(156,115,245,.23))!important;}
.v228-bell{transform-box:fill-box;transform-origin:50% 78%;animation:v228Bell 3.72s cubic-bezier(.23,.02,.12,1) var(--v138-phase,0s) infinite;will-change:transform;}
.v228-bell-shadow{opacity:.96;filter:drop-shadow(0 0 10px rgba(189,153,255,.25));}
.v228-bell-gel{opacity:.91;mix-blend-mode:screen;}
.v228-bell-sheen{fill:rgba(255,252,255,.16);filter:blur(.45px);}
.v228-bell-sheen-r{opacity:.68;}
.v228-inner{transform-box:fill-box;transform-origin:50% 56%;animation:v228Inner 3.72s cubic-bezier(.23,.02,.12,1) var(--v138-phase,0s) infinite;}
.v228-core{opacity:.82;}
.v228-organ{fill:rgba(203,164,255,.52);filter:drop-shadow(0 0 4px rgba(205,168,255,.32));}
.v228-ribs{fill:none;stroke:rgba(239,228,255,.38);stroke-width:1.05;stroke-linecap:round;vector-effect:non-scaling-stroke;}
.v228-rim-band{opacity:.54;mix-blend-mode:screen;transform-box:fill-box;transform-origin:50% 50%;animation:v228RimBand 3.72s cubic-bezier(.2,.02,.13,1) var(--v138-phase,0s) infinite;}
.v228-rim-line{fill:none;stroke:rgba(255,250,255,.76);stroke-width:1.28;stroke-linecap:round;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 3px rgba(228,211,255,.35));}
.v228-edge-line{fill:none;stroke:rgba(250,245,255,.73);stroke-width:1.18;stroke-linecap:round;vector-effect:non-scaling-stroke;opacity:.90;}
.v228-arms,.v228-filaments{transform-box:fill-box;transform-origin:50% 0%;}
.v228-arm{fill:none;stroke-width:9.5;stroke-linecap:round;filter:drop-shadow(0 0 4px rgba(180,143,247,.19));transform-box:fill-box;transform-origin:50% 0%;opacity:.72;}
.v228-arm-a{animation:v228ArmA 5.15s ease-in-out -.35s infinite}.v228-arm-b{animation:v228ArmB 5.85s ease-in-out -1.05s infinite}.v228-arm-c{animation:v228ArmA 5.5s ease-in-out -1.75s infinite reverse}.v228-arm-d{animation:v228ArmB 6.15s ease-in-out -.75s infinite reverse}
.v228-filament{fill:none;stroke:rgba(230,214,255,.34);stroke-width:1.18;stroke-linecap:round;vector-effect:non-scaling-stroke;transform-box:fill-box;transform-origin:50% 0%;}
.v228-filament-a{animation:v228ThreadA 6.9s ease-in-out -.7s infinite}.v228-filament-b{animation:v228ThreadB 7.5s ease-in-out -2.1s infinite}.v228-filament-c{animation:v228ThreadA 6.2s ease-in-out -3.2s infinite reverse}.v228-filament-d{animation:v228ThreadB 7.2s ease-in-out -1.3s infinite reverse}.v228-filament-e{animation:v228ThreadA 6.7s ease-in-out -2.7s infinite}.v228-filament-f{animation:v228ThreadB 7.9s ease-in-out -.2s infinite reverse}
.v228-swimmer{animation:v228Thrust 3.72s cubic-bezier(.2,.03,.15,1) var(--v138-phase,0s) infinite!important;}

/* Expanded bell is wide/soft. The lower rim curls inward first; contraction is quick and tall. */
@keyframes v228Bell{
  0%,8%{transform:translate3d(0,2px,0) scaleX(1.10) scaleY(.91)}
  28%{transform:translate3d(0,4px,0) scaleX(1.13) scaleY(.89)}
  48%{transform:translate3d(0,4px,0) scaleX(1.11) scaleY(.90)}
  57%{transform:translate3d(0,1px,0) scaleX(1.03) scaleY(.98)}
  64%{transform:translate3d(0,-5px,0) scaleX(.86) scaleY(1.15)}
  69%{transform:translate3d(0,-8px,0) scaleX(.76) scaleY(1.27)}
  73%{transform:translate3d(0,-9px,0) scaleX(.78) scaleY(1.25)}
  81%{transform:translate3d(0,-4px,0) scaleX(.94) scaleY(1.07)}
  91%{transform:translate3d(0,0,0) scaleX(1.055) scaleY(.955)}
  100%{transform:translate3d(0,2px,0) scaleX(1.10) scaleY(.91)}
}
@keyframes v228Inner{
  0%,48%,100%{opacity:.69;transform:translateY(1px) scaleX(1.02) scaleY(.98)}
  58%{opacity:.76;transform:translateY(-1px) scale(.96)}
  69%,73%{opacity:1;transform:translateY(-5px) scaleX(.81) scaleY(1.07)}
  84%{opacity:.82;transform:translateY(-2px) scale(.94)}
}
@keyframes v228RimBand{
  0%,48%,100%{opacity:.47;transform:translateY(0) scaleX(1.02) scaleY(.9)}
  58%{opacity:.60;transform:translateY(-2px) scaleX(.94) scaleY(1.1)}
  69%,73%{opacity:.86;transform:translateY(-9px) scaleX(.72) scaleY(1.65)}
  84%{opacity:.60;transform:translateY(-3px) scaleX(.91) scaleY(1.15)}
}
@keyframes v228Thrust{0%,56%,100%{transform:translate3d(0,0,0) rotate(-.22deg)}66%{transform:translate3d(0,2px,0) rotate(.22deg)}73%{transform:translate3d(0,-13px,0) rotate(.38deg)}82%{transform:translate3d(1px,-9px,0) rotate(-.26deg)}92%{transform:translate3d(-1px,-3px,0) rotate(-.18deg)}}
@keyframes v228ArmA{0%,100%{transform:translate3d(-2px,0,0) rotate(-1.4deg) skewX(-1deg)}48%{transform:translate3d(8px,4px,0) rotate(2.7deg) skewX(2.8deg)}72%{transform:translate3d(4px,10px,0) rotate(1.4deg) skewX(1.2deg)}}
@keyframes v228ArmB{0%,100%{transform:translate3d(2px,1px,0) rotate(1deg) skewX(1deg)}46%{transform:translate3d(-9px,5px,0) rotate(-2.5deg) skewX(-3deg)}75%{transform:translate3d(-4px,11px,0) rotate(-1.1deg) skewX(-1.4deg)}}
@keyframes v228ThreadA{0%,100%{transform:translate3d(-2px,0,0) rotate(-.8deg)}50%{transform:translate3d(11px,5px,0) rotate(2.4deg)}72%{transform:translate3d(6px,10px,0) rotate(1deg)}}
@keyframes v228ThreadB{0%,100%{transform:translate3d(3px,1px,0) rotate(.9deg)}50%{transform:translate3d(-12px,5px,0) rotate(-2.6deg)}74%{transform:translate3d(-6px,10px,0) rotate(-1.2deg)}}

@media(max-width:430px){
  .v138-jelly-test{width:min(68vw,278px)!important;bottom:-19vh!important;}
  .v228-edge-line,.v228-rim-line{stroke-width:1.35!important;}
}

/* === V228 single jelly / organic bell refinement === */
.v228-new-jelly, .v139-new-jelly{
  width:min(38vw, 176px)!important;
  height:min(76vw, 350px)!important;
  transform-origin:50% 25%;
}
.v228-new-jelly .v139-bell,
.v139-new-jelly .v139-bell,
.v228-new-jelly .v138-bell,
.v139-new-jelly .v138-bell{
  transform-origin:50% 82%!important;
  animation:v228BellOrganic 3.75s cubic-bezier(.37,.05,.22,1) infinite!important;
  will-change:transform,filter;
}
@keyframes v228BellOrganic{
  0%   {transform:translateX(-1.2%) scaleX(1.035) scaleY(.91) rotate(-.45deg);filter:brightness(.98)}
  34%  {transform:translateX(.7%) scaleX(1.075) scaleY(.885) rotate(.35deg);filter:brightness(1)}
  49%  {transform:translateX(-.5%) scaleX(1.055) scaleY(.90) rotate(-.2deg);filter:brightness(1.01)}
  58%  {transform:translateY(-2px) translateX(.8%) scaleX(.80) scaleY(1.105) rotate(.45deg);filter:brightness(1.13)}
  65%  {transform:translateY(-5px) translateX(-.4%) scaleX(.75) scaleY(1.16) rotate(-.25deg);filter:brightness(1.18)}
  72%  {transform:translateY(-3px) translateX(.5%) scaleX(.87) scaleY(1.06) rotate(.25deg);filter:brightness(1.08)}
  100% {transform:translateX(-1.2%) scaleX(1.035) scaleY(.91) rotate(-.45deg);filter:brightness(.98)}
}
.v228-new-jelly .v139-bell-edge,
.v139-new-jelly .v139-bell-edge{
  animation:v228EdgeCurl 3.75s cubic-bezier(.37,.05,.22,1) infinite!important;
  transform-origin:50% 78%;
}
@keyframes v228EdgeCurl{
  0%,45%,100%{transform:scaleX(1) scaleY(1) translateY(0)}
  58%{transform:scaleX(.89) scaleY(.82) translateY(-2px)}
  65%{transform:scaleX(.80) scaleY(.72) translateY(-4px)}
  74%{transform:scaleX(.93) scaleY(.90) translateY(-1px)}
}
/* one contraction gives a small whole-body thrust; relaxation glides */
.v228-new-jelly .v139-body,
.v139-new-jelly .v139-body,
.v228-new-jelly .v138-body,
.v139-new-jelly .v138-body{
  animation:v228PulseThrust 3.75s cubic-bezier(.3,.05,.2,1) infinite!important;
}
@keyframes v228PulseThrust{
  0%,50%{transform:translate3d(0,0,0)}
  66%{transform:translate3d(1px,-8px,0)}
  78%{transform:translate3d(-1px,-10px,0)}
  100%{transform:translate3d(0,-7px,0)}
}
/* make asymmetry subtle, not mechanical */
.v228-new-jelly svg,
.v139-new-jelly svg{overflow:visible}

/* === V228: restrained contraction + delayed thrust + softer rim === */
/* Keep the attractive broad relaxed state; contraction is narrower/rounder, never needle-like. */
.v228-new-jelly .v139-bell,
.v140-new-jelly .v139-bell,
.v139-new-jelly .v139-bell,
.v228-new-jelly .v138-bell,
.v140-new-jelly .v138-bell,
.v139-new-jelly .v138-bell{
  transform-origin:50% 80%!important;
  animation:v228BellNatural 3.82s cubic-bezier(.36,.04,.2,1) infinite!important;
}
@keyframes v228BellNatural{
  0%   {transform:translateX(-.8%) scaleX(1.045) scaleY(.92) rotate(-.28deg);filter:brightness(.98)}
  36%  {transform:translateX(.55%) scaleX(1.075) scaleY(.90) rotate(.22deg);filter:brightness(1)}
  50%  {transform:translateX(-.25%) scaleX(1.055) scaleY(.915) rotate(-.12deg);filter:brightness(1.01)}
  59%  {transform:translateY(-1px) translateX(.5%) scaleX(.88) scaleY(1.025) rotate(.25deg);filter:brightness(1.08)}
  66%  {transform:translateY(-2px) translateX(-.25%) scaleX(.82) scaleY(1.07) rotate(-.16deg);filter:brightness(1.12)}
  73%  {transform:translateY(-1px) translateX(.35%) scaleX(.91) scaleY(1.015) rotate(.14deg);filter:brightness(1.05)}
  100% {transform:translateX(-.8%) scaleX(1.045) scaleY(.92) rotate(-.28deg);filter:brightness(.98)}
}
/* Rim folds inward during contraction, but loses the glass-dome outline. */
.v228-new-jelly .v139-bell-edge,
.v140-new-jelly .v139-bell-edge,
.v139-new-jelly .v139-bell-edge{
  opacity:.30!important;
  filter:blur(.35px)!important;
  transform-origin:50% 76%!important;
  animation:v228SoftRim 3.82s ease-in-out infinite!important;
}
@keyframes v228SoftRim{
  0%,47%,100%{transform:scaleX(1.01) scaleY(.96) translateY(0);opacity:.25}
  60%{transform:scaleX(.91) scaleY(.88) translateY(-1px);opacity:.34}
  67%{transform:scaleX(.84) scaleY(.80) translateY(-3px);opacity:.38}
  77%{transform:scaleX(.94) scaleY(.91) translateY(-1px);opacity:.29}
}
/* Propulsion begins only after the bell has nearly completed contraction. */
.v228-new-jelly .v139-body,
.v140-new-jelly .v139-body,
.v139-new-jelly .v139-body,
.v228-new-jelly .v138-body,
.v140-new-jelly .v138-body,
.v139-new-jelly .v138-body{
  animation:v228DelayedThrust 3.82s cubic-bezier(.28,.05,.18,1) infinite!important;
}
@keyframes v228DelayedThrust{
  0%,61%{transform:translate3d(0,0,0)}
  69%{transform:translate3d(.5px,-3px,0)}
  76%{transform:translate3d(-.6px,-8px,0)}
  86%{transform:translate3d(.3px,-10px,0)}
  100%{transform:translate3d(0,-8px,0)}
}

/* V228 — bell aperture curl illusion + pulse/glide separation */
.v228-new-jelly .v139-bell,
.v141-new-jelly .v139-bell,
.v140-new-jelly .v139-bell,
.v139-new-jelly .v139-bell{
  transform-origin:50% 84%!important;
  animation:v228BellBody 3.95s cubic-bezier(.34,.03,.18,1) infinite!important;
}
@keyframes v228BellBody{
  0%{transform:translateX(-.7%) scaleX(1.06) scaleY(.91) rotate(-.22deg)}
  40%{transform:translateX(.45%) scaleX(1.085) scaleY(.895) rotate(.18deg)}
  52%{transform:translateX(-.2%) scaleX(1.06) scaleY(.91) rotate(-.1deg)}
  61%{transform:translateY(-1px) translateX(.35%) scaleX(.91) scaleY(1.015) rotate(.18deg)}
  68%{transform:translateY(-2px) translateX(-.2%) scaleX(.85) scaleY(1.055) rotate(-.12deg)}
  75%{transform:translateY(-1px) translateX(.25%) scaleX(.93) scaleY(1.005) rotate(.1deg)}
  100%{transform:translateX(-.7%) scaleX(1.06) scaleY(.91) rotate(-.22deg)}
}
/* Lower rim visibly participates: folds inward and upward rather than staying horizontal. */
.v228-new-jelly .v139-bell-edge,
.v141-new-jelly .v139-bell-edge,
.v140-new-jelly .v139-bell-edge,
.v139-new-jelly .v139-bell-edge{
  opacity:.22!important;
  transform-origin:50% 72%!important;
  animation:v228ApertureCurl 3.95s cubic-bezier(.3,.02,.18,1) infinite!important;
}
@keyframes v228ApertureCurl{
  0%,50%,100%{transform:translateY(0) scaleX(1.04) scaleY(.93) rotate(0deg);opacity:.20}
  60%{transform:translateY(-2px) scaleX(.90) scaleY(.82) rotate(.2deg);opacity:.28}
  68%{transform:translateY(-5px) scaleX(.76) scaleY(.68) rotate(-.15deg);opacity:.34}
  77%{transform:translateY(-2px) scaleX(.91) scaleY(.86) rotate(.1deg);opacity:.25}
}
/* organic membrane wobble, deliberately tiny */
.v228-new-jelly svg,
.v141-new-jelly svg,
.v140-new-jelly svg,
.v139-new-jelly svg{
  transform-origin:50% 45%;
  animation:v228MembraneBias 7.6s ease-in-out infinite alternate;
}
@keyframes v228MembraneBias{
  0%{transform:skewX(-.45deg) rotate(-.12deg)}
  45%{transform:skewX(.25deg) rotate(.1deg)}
  100%{transform:skewX(.55deg) rotate(.16deg)}
}
/* stronger distinction: almost-still glide, then short pulse thrust */
.v228-new-jelly .v139-body,
.v141-new-jelly .v139-body,
.v140-new-jelly .v139-body,
.v139-new-jelly .v139-body,
.v228-new-jelly .v138-body,
.v141-new-jelly .v138-body{
  animation:v228PulseGlide 3.95s cubic-bezier(.25,.04,.16,1) infinite!important;
}
@keyframes v228PulseGlide{
  0%,63%{transform:translate3d(0,0,0)}
  69%{transform:translate3d(.4px,-2px,0)}
  75%{transform:translate3d(-.5px,-10px,0)}
  82%{transform:translate3d(.25px,-13px,0)}
  100%{transform:translate3d(0,-10px,0)}
}

/* === V228: true path-morph bell inspection mode === */
/* Disable old whole-bell scale animation: SVG paths themselves now change shape. */
.v138-jelly-test .v228-bell{
  animation:none!important;
  transform:none!important;
  filter:none!important;
}
/* Hide all temporary arms/filaments. Bell only. */
.v138-jelly-test .v228-arms,
.v138-jelly-test .v228-filaments{
  display:none!important;
}
/* Keep the bell large enough to inspect, but not screen-filling. */
.v138-jelly-test{
  width:min(36vw,168px)!important;
}
.v138-jelly-test .v228-jelly-svg{
  overflow:visible;
}
/* membrane should read as water, not a drawn glass outline */
.v138-jelly-test .v228-edge-line{
  fill:none!important;
  stroke:rgba(231,220,255,.20)!important;
  stroke-width:1.15!important;
  filter:blur(.28px);
}
.v138-jelly-test .v228-rim-line{
  fill:none!important;
  stroke:rgba(240,230,255,.18)!important;
  stroke-width:1.05!important;
  filter:blur(.38px);
}
.v138-jelly-test .v228-rim-band{opacity:.48!important}
.v138-jelly-test .v228-bell-sheen{opacity:.28!important}
.v138-jelly-test .v228-inner{opacity:.80!important}

/* Whole body remains nearly still until the contraction is almost complete. */
.v138-jelly-test .v228-swimmer{
  animation:v228BodyPulse 3.95s cubic-bezier(.25,.04,.16,1) infinite!important;
}
@keyframes v228BodyPulse{
  0%,64%{transform:translate3d(0,0,0)}
  70%{transform:translate3d(.4px,-2px,0)}
  77%{transform:translate3d(-.4px,-8px,0)}
  85%{transform:translate3d(.2px,-11px,0)}
  100%{transform:translate3d(0,-8px,0)}
}

/* =========================================================
   V228 — bell lock-in + touch-performance pass
   ========================================================= */

/* WAAPI owns the long rise now; disable the old CSS rise. */
.v138-jelly-test.v138-live{animation:none!important}

/* One prewarmed layer gets composited once; taps only reposition/restart it. */
.v138-jelly-test.v228-pooled{
  contain:layout style paint;
  transform:translate3d(-50%,0,0);
  backface-visibility:hidden;
}
.v138-jelly-test.v228-pooled .v228-jelly-svg{
  filter:none!important; /* costly drop-shadow removed from the whole SVG */
  transform:translateZ(0);
}

/* Less perfect dome: slightly flatter top, tiny organic lean. */
.v138-jelly-test .v228-bell{
  transform-origin:50% 76%!important;
  animation:v228MicroAsym 7.2s ease-in-out infinite alternate!important;
}
@keyframes v228MicroAsym{
  0%{transform:skewX(-.45deg) rotate(-.16deg)}
  46%{transform:skewX(.18deg) rotate(.08deg)}
  100%{transform:skewX(.5deg) rotate(.15deg)}
}

/* Kill the umbrella-spoke language. */
.v138-jelly-test .v228-ribs{display:none!important}
.v138-jelly-test .v228-lobes{
  fill:rgba(202,174,255,.16);
  opacity:.72;
  animation:v228LobeBreath 3.95s ease-in-out infinite;
}
@keyframes v228LobeBreath{
  0%,50%,100%{opacity:.50;transform:scale(1)}
  69%{opacity:.72;transform:scale(.94)}
  78%{opacity:.60;transform:scale(.97)}
}

/* Softer bell edge / scalloped aperture: no glass-rim look. */
.v138-jelly-test .v228-edge-line{
  stroke:rgba(239,230,255,.13)!important;
  stroke-width:.82!important;
  filter:none!important;
}
.v138-jelly-test .v228-rim-line{
  stroke:rgba(244,234,255,.12)!important;
  stroke-width:.78!important;
  filter:none!important;
}
.v138-jelly-test .v228-rim-band{
  opacity:.34!important;
}
.v138-jelly-test .v228-bell-sheen{
  opacity:.19!important;
}
.v138-jelly-test .v228-inner{
  opacity:.67!important;
  filter:none!important;
}

/* Keep inspection clean: no temporary arms/tentacles yet. */
.v138-jelly-test .v228-arms,
.v138-jelly-test .v228-filaments{
  display:none!important;
}

/* Pulse is short; most of the cycle is calm gliding. */
.v138-jelly-test .v228-swimmer{
  will-change:transform;
  animation:v228Pulse 3.95s cubic-bezier(.24,.03,.15,1) infinite!important;
}
@keyframes v228Pulse{
  0%,64%{transform:translate3d(0,0,0)}
  70%{transform:translate3d(.3px,-1px,0)}
  76%{transform:translate3d(-.35px,-6px,0)}
  83%{transform:translate3d(.15px,-8px,0)}
  100%{transform:translate3d(0,-6px,0)}
}

/* Keep the test bell visually readable without making SVG rasterization huge. */
.v138-jelly-test{width:min(35vw,164px)!important}
@media(max-width:430px){
  .v138-jelly-test{width:min(42vw,176px)!important;bottom:-17vh!important}
}

/* =========================================================
   V228 — single-motion performance architecture
   Goal: leave headroom for future oral arms + tentacles.
   ========================================================= */

/* Only the outer pooled element moves through the water. */
.v138-jelly-test.v228-pooled{
  contain:layout paint style;
  isolation:isolate;
  backface-visibility:hidden;
  transform:translate3d(-50%,0,0);
  will-change:transform,opacity;
}

/* The inner swimmer MUST NOT run a competing transform animation. */
.v138-jelly-test .v228-swimmer{
  animation:none!important;
  transform:none!important;
  will-change:auto!important;
}

/* SVG stays light: two animated paths, no live blur/drop-shadow/blend filters. */
.v138-jelly-test .v228-jelly-svg{
  overflow:visible;
  filter:none!important;
  transform:none!important;
  animation:none!important;
  shape-rendering:geometricPrecision;
}

/* Path morphing itself supplies the breathing, so no group-scale animation. */
.v138-jelly-test .v228-bell{
  animation:none!important;
  transform:none!important;
  filter:none!important;
}

/* Membrane material: translucent but not glassy. */
.v138-jelly-test .v228-membrane{
  opacity:.96;
  stroke:rgba(241,233,255,.10);
  stroke-width:.7;
  vector-effect:non-scaling-stroke;
}
.v138-jelly-test .v228-rim{
  opacity:.52;
}
.v138-jelly-test .v228-highlight{
  fill:rgba(255,253,255,.095);
  opacity:.82;
}

/* Soft internal tissue, deliberately static for performance and realism. */
.v138-jelly-test .v228-core{
  opacity:.62;
}
.v138-jelly-test .v228-organs{
  fill:rgba(199,171,245,.13);
  opacity:.82;
}

/* Keep the test bell clean and at a moderate raster size. */
.v138-jelly-test{
  width:min(36vw,166px)!important;
  aspect-ratio:240/250!important;
  bottom:-14vh!important;
}
@media(max-width:430px){
  .v138-jelly-test{
    width:min(40vw,170px)!important;
    bottom:-13vh!important;
  }
}

/* Old test-era transforms/filters should never leak onto the active V228 node. */
.v138-jelly-test.v228-pooled .v138-jelly-svg,
.v138-jelly-test.v228-pooled .v138-swimmer,
.v138-jelly-test.v228-pooled .v228-bell,
.v138-jelly-test.v228-pooled .v228-core,
.v138-jelly-test.v228-pooled .v228-organs{
  filter:none!important;
  mix-blend-mode:normal!important;
}

/* =========================================================
   V228 — three-background adaptive jelly material + scale
   Measured against the actual homepage-user-v120-1/2/3 images.
   Motion architecture from V145 is untouched.
   ========================================================= */

/* Shared: cool transparent body, lavender concentrated internally. */
.fireworks-intro .v138-jelly-test.v228-pooled{
  --jelly-scale:1;
  --jelly-opacity:1;
  opacity:var(--jelly-opacity);
}
.fireworks-intro .v138-jelly-test.v228-pooled .v228-jelly-svg{
  transform:scale(var(--jelly-scale))!important;
  transform-origin:50% 58%!important;
}
.fireworks-intro .v138-jelly-test .v228-membrane{
  fill-opacity:.94;
}
.fireworks-intro .v138-jelly-test .v228-core{
  opacity:.54;
}
.fireworks-intro .v138-jelly-test .v228-organs{
  opacity:.76;
}
.fireworks-intro .v138-jelly-test .v228-rim{
  opacity:.46;
}
.fireworks-intro .v138-jelly-test .v228-highlight{
  opacity:.72;
}

/* Scene 1 — darkest/deepest blue:
   slightly larger and more luminous, but still transparent. */
.fireworks-intro[data-jelly-scene="1"] .v138-jelly-test.v228-pooled{
  --jelly-scale:1.045;
  --jelly-opacity:.99;
}
.fireworks-intro[data-jelly-scene="1"] .v228-membrane{
  opacity:.98;
  stroke:rgba(242,240,255,.12);
}
.fireworks-intro[data-jelly-scene="1"] .v228-core{opacity:.61}
.fireworks-intro[data-jelly-scene="1"] .v228-organs{
  fill:rgba(207,187,250,.145);
  opacity:.82;
}
.fireworks-intro[data-jelly-scene="1"] .v228-rim{opacity:.50}

/* Scene 2 — the brightest of the three:
   slightly smaller, body presence raised, glow reduced so it won't wash out. */
.fireworks-intro[data-jelly-scene="2"] .v138-jelly-test.v228-pooled{
  --jelly-scale:.965;
  --jelly-opacity:.99;
}
.fireworks-intro[data-jelly-scene="2"] .v228-membrane{
  opacity:1;
  stroke:rgba(239,235,255,.14);
}
.fireworks-intro[data-jelly-scene="2"] .v228-core{opacity:.48}
.fireworks-intro[data-jelly-scene="2"] .v228-organs{
  fill:rgba(190,164,238,.16);
  opacity:.78;
}
.fireworks-intro[data-jelly-scene="2"] .v228-rim{opacity:.44}
.fireworks-intro[data-jelly-scene="2"] .v228-highlight{opacity:.62}

/* Scene 3 — dark blue with somewhat brighter local structure:
   neutral middle scale, a touch cooler/bluer internally. */
.fireworks-intro[data-jelly-scene="3"] .v138-jelly-test.v228-pooled{
  --jelly-scale:1.01;
  --jelly-opacity:.99;
}
.fireworks-intro[data-jelly-scene="3"] .v228-membrane{
  opacity:.97;
  stroke:rgba(234,237,255,.115);
}
.fireworks-intro[data-jelly-scene="3"] .v228-core{opacity:.56}
.fireworks-intro[data-jelly-scene="3"] .v228-organs{
  fill:rgba(190,181,248,.145);
  opacity:.80;
}
.fireworks-intro[data-jelly-scene="3"] .v228-rim{opacity:.47}

/* Slightly larger on compact phones where the background composition leaves
   less apparent visual mass, without increasing SVG raster dimensions heavily. */
@media(max-width:390px){
  .fireworks-intro[data-jelly-scene="1"] .v138-jelly-test.v228-pooled{--jelly-scale:1.06}
  .fireworks-intro[data-jelly-scene="2"] .v138-jelly-test.v228-pooled{--jelly-scale:.98}
  .fireworks-intro[data-jelly-scene="3"] .v138-jelly-test.v228-pooled{--jelly-scale:1.025}
}

/* =========================================================
   V228 — living color depth, no heavy rendering effects
   ========================================================= */

/* Color hierarchy: nearly colorless membrane -> lavender rim -> richer internal tissue. */
.fireworks-intro .v138-jelly-test .v228-membrane{
  opacity:.96;
}
.fireworks-intro .v138-jelly-test .v228-rim{
  opacity:.45;
}
.fireworks-intro .v138-jelly-test .v228-core{
  opacity:.50;
}
.fireworks-intro .v138-jelly-test .v228-organs{
  fill:rgba(193,168,238,.145);
}
.fireworks-intro .v138-jelly-test .v228-life-ring{
  vector-effect:non-scaling-stroke;
}

/* Scene 1: deep blue — cool-white membrane + restrained lavender center. */
.fireworks-intro[data-jelly-scene="1"] .v228-core{opacity:.56}
.fireworks-intro[data-jelly-scene="1"] .v228-organs{fill:rgba(205,178,245,.15)}
.fireworks-intro[data-jelly-scene="1"] .v228-life-ring{stroke:rgba(211,205,255,.17)}
.fireworks-intro[data-jelly-scene="1"] .v228-rim{opacity:.49}

/* Scene 2: brighter — less luminous, slightly denser mauve tissue. */
.fireworks-intro[data-jelly-scene="2"] .v228-core{opacity:.45}
.fireworks-intro[data-jelly-scene="2"] .v228-organs{fill:rgba(184,157,224,.17)}
.fireworks-intro[data-jelly-scene="2"] .v228-life-ring{stroke:rgba(194,185,235,.16)}
.fireworks-intro[data-jelly-scene="2"] .v228-rim{opacity:.42}

/* Scene 3: cooler blue — internal tint shifts a little toward blue-violet. */
.fireworks-intro[data-jelly-scene="3"] .v228-core{opacity:.51}
.fireworks-intro[data-jelly-scene="3"] .v228-organs{fill:rgba(177,178,239,.16)}
.fireworks-intro[data-jelly-scene="3"] .v228-life-ring{stroke:rgba(192,203,255,.17)}
.fireworks-intro[data-jelly-scene="3"] .v228-rim{opacity:.46}

/* Performance contract: no blur, drop-shadow, blend mode or extra transform animation. */
.v138-jelly-test.v228-pooled .v228-membrane,
.v138-jelly-test.v228-pooled .v228-rim,
.v138-jelly-test.v228-pooled .v228-core,
.v138-jelly-test.v228-pooled .v228-organs,
.v138-jelly-test.v228-pooled .v228-life-ring{
  filter:none!important;
  mix-blend-mode:normal!important;
}

/* =========================================================
   V228 — final luminous bell candidate
   Reference-inspired, but restrained for real-time mobile motion.
   ========================================================= */

/* Maintain transparent gel body; luminous color lives mostly in depth and rim. */
.fireworks-intro .v138-jelly-test .v228-membrane{
  opacity:.98;
  stroke:rgba(220,230,255,.12);
}
.fireworks-intro .v138-jelly-test .v228-rim{
  opacity:.58;
}
.fireworks-intro .v138-jelly-test .v228-core{
  opacity:.54;
}
.fireworks-intro .v138-jelly-test .v228-organs{
  fill:rgba(202,161,237,.17);
  opacity:.84;
}
.fireworks-intro .v138-jelly-test .v228-life-ring{
  stroke:rgba(185,198,255,.17);
  opacity:.22;
}

/* Sparse highlights: no blur/filter; brightness comes from contrast and opacity only. */
.fireworks-intro .v138-jelly-test .v228-bell-sparks{
  fill:#f8f6ff;
  opacity:.50;
  animation:v228SparkBreath 3.96s ease-in-out infinite;
}
.fireworks-intro .v138-jelly-test .v228-bell-sparks circle:nth-child(2n){
  fill:#9ddcff;
}
.fireworks-intro .v138-jelly-test .v228-bell-sparks circle:nth-child(3n){
  fill:#ffb2e9;
}
@keyframes v228SparkBreath{
  0%,52%,100%{opacity:.34}
  68%{opacity:.68}
  80%{opacity:.46}
}

/* Breathing light: contraction gathers light inward, expansion releases it. */
.fireworks-intro .v138-jelly-test .v228-core{
  animation:v228CorePulse 3.96s ease-in-out infinite!important;
}
@keyframes v228CorePulse{
  0%,52%,100%{opacity:.48}
  61%{opacity:.55}
  69%{opacity:.70}
  80%{opacity:.56}
}
.fireworks-intro .v138-jelly-test .v228-rim{
  animation:v228RimPulse 3.96s ease-in-out infinite!important;
}
@keyframes v228RimPulse{
  0%,52%,100%{opacity:.50}
  64%{opacity:.58}
  69%{opacity:.68}
  80%{opacity:.55}
}

/* Scene-specific luminous balance. */
.fireworks-intro[data-jelly-scene="1"] .v228-membrane{opacity:1}
.fireworks-intro[data-jelly-scene="1"] .v228-rim{opacity:.61}
.fireworks-intro[data-jelly-scene="1"] .v228-core{opacity:.57}
.fireworks-intro[data-jelly-scene="1"] .v228-bell-sparks{opacity:.54}

.fireworks-intro[data-jelly-scene="2"] .v228-membrane{opacity:.96}
.fireworks-intro[data-jelly-scene="2"] .v228-rim{opacity:.50}
.fireworks-intro[data-jelly-scene="2"] .v228-core{opacity:.48}
.fireworks-intro[data-jelly-scene="2"] .v228-bell-sparks{opacity:.40}

.fireworks-intro[data-jelly-scene="3"] .v228-membrane{opacity:.99}
.fireworks-intro[data-jelly-scene="3"] .v228-rim{opacity:.63}
.fireworks-intro[data-jelly-scene="3"] .v228-core{opacity:.58}
.fireworks-intro[data-jelly-scene="3"] .v228-organs{fill:rgba(219,148,240,.18)}
.fireworks-intro[data-jelly-scene="3"] .v228-bell-sparks{opacity:.56}

/* Strict performance guard: still no blur/drop-shadow/mix-blend on live bell. */
.v138-jelly-test.v228-pooled .v228-membrane,
.v138-jelly-test.v228-pooled .v228-rim,
.v138-jelly-test.v228-pooled .v228-core,
.v138-jelly-test.v228-pooled .v228-organs,
.v138-jelly-test.v228-pooled .v228-life-ring,
.v138-jelly-test.v228-pooled .v228-bell-sparks{
  filter:none!important;
  mix-blend-mode:normal!important;
}

/* Avoid compositor churn: only spark group uses opacity animation, never transform. */
.v138-jelly-test.v228-pooled .v228-bell-sparks{
  will-change:opacity;
}

/* =========================================================
   V228 — deeper layered bell contrast for bright backgrounds
   Final bell color lock candidate.
   ========================================================= */

/* Stronger silhouette without turning opaque. */
.fireworks-intro .v138-jelly-test .v228-membrane{
  opacity:1;
  stroke:rgba(176,194,255,.20);
}
.fireworks-intro .v138-jelly-test .v228-rim{
  opacity:.66;
}
.fireworks-intro .v138-jelly-test .v228-core{
  opacity:.61;
}
.fireworks-intro .v138-jelly-test .v228-organs{
  fill:rgba(165,118,220,.22);
  opacity:.90;
}
.fireworks-intro .v138-jelly-test .v228-life-ring{
  stroke:rgba(155,176,246,.22);
  opacity:.28;
}
.fireworks-intro .v138-jelly-test .v228-highlight{
  opacity:.70;
}

/* Scene 1 — deeper cool blue outline, richer mid-violet. */
.fireworks-intro[data-jelly-scene="1"] .v228-rim{opacity:.69}
.fireworks-intro[data-jelly-scene="1"] .v228-core{opacity:.64}
.fireworks-intro[data-jelly-scene="1"] .v228-organs{
  fill:rgba(164,121,224,.22);
  opacity:.91;
}
.fireworks-intro[data-jelly-scene="1"] .v228-bell-sparks{opacity:.57}

/* Scene 2 — brightest background:
   strongest contour and denser internal violet for separation. */
.fireworks-intro[data-jelly-scene="2"] .v228-membrane{
  opacity:1;
  stroke:rgba(147,170,240,.24);
}
.fireworks-intro[data-jelly-scene="2"] .v228-rim{opacity:.72}
.fireworks-intro[data-jelly-scene="2"] .v228-core{opacity:.62}
.fireworks-intro[data-jelly-scene="2"] .v228-organs{
  fill:rgba(148,103,204,.25);
  opacity:.94;
}
.fireworks-intro[data-jelly-scene="2"] .v228-life-ring{
  stroke:rgba(150,161,226,.24);
  opacity:.31;
}
.fireworks-intro[data-jelly-scene="2"] .v228-bell-sparks{opacity:.50}

/* Scene 3 — richest purple/pink layering. */
.fireworks-intro[data-jelly-scene="3"] .v228-rim{opacity:.72}
.fireworks-intro[data-jelly-scene="3"] .v228-core{opacity:.66}
.fireworks-intro[data-jelly-scene="3"] .v228-organs{
  fill:rgba(186,103,219,.24);
  opacity:.93;
}
.fireworks-intro[data-jelly-scene="3"] .v228-life-ring{
  stroke:rgba(170,161,240,.24);
  opacity:.30;
}
.fireworks-intro[data-jelly-scene="3"] .v228-bell-sparks{opacity:.60}

/* Preserve the lightweight rendering contract. */
.v138-jelly-test.v228-pooled .v228-membrane,
.v138-jelly-test.v228-pooled .v228-rim,
.v138-jelly-test.v228-pooled .v228-core,
.v138-jelly-test.v228-pooled .v228-organs,
.v138-jelly-test.v228-pooled .v228-life-ring,
.v138-jelly-test.v228-pooled .v228-bell-sparks{
  filter:none!important;
  mix-blend-mode:normal!important;
}

/* =========================================================
   V228 — first complete tentacle system
   Quality + performance: 4 oral arms + 8 fine threads,
   all animated as groups rather than dozens of independent nodes.
   ========================================================= */

.v138-jelly-test{
  aspect-ratio:240/470!important;
  bottom:-30vh!important;
}

/* Oral arms: broad translucent tissue, root slightly brighter, ends fade visually. */
.v138-jelly-test .v228-oral-arms{
  fill:none;
  stroke:rgba(175,126,232,.31);
  stroke-width:7.2;
  stroke-linecap:round;
  stroke-linejoin:round;
  opacity:.82;
  transform-origin:120px 151px;
  animation:v228ArmsFlow 5.8s cubic-bezier(.42,.02,.34,1) infinite alternate;
}
.v138-jelly-test .v228-arm:nth-child(2),
.v138-jelly-test .v228-arm:nth-child(3){
  stroke:rgba(126,151,238,.29);
  stroke-width:8.2;
}
@keyframes v228ArmsFlow{
  0%{transform:translate3d(-1px,0,0) rotate(-1.5deg) skewX(-1.2deg)}
  34%{transform:translate3d(2px,1px,0) rotate(.8deg) skewX(1.1deg)}
  68%{transform:translate3d(-1px,0,0) rotate(1.6deg) skewX(.4deg)}
  100%{transform:translate3d(1px,1px,0) rotate(-.7deg) skewX(-.8deg)}
}

/* Fine threads: hair-thin, low opacity, slightly blue/purple. */
.v138-jelly-test .v228-fine-tentacles{
  fill:none;
  stroke:rgba(183,176,248,.27);
  stroke-width:1.05;
  stroke-linecap:round;
  opacity:.76;
  transform-origin:120px 150px;
  animation:v228ThreadsFlow 7.1s cubic-bezier(.38,.03,.28,1) infinite alternate;
}
.v138-jelly-test .v228-thread:nth-child(2n){
  stroke:rgba(214,147,226,.24);
}
.v138-jelly-test .v228-thread:nth-child(3n){
  stroke:rgba(144,190,248,.24);
}
@keyframes v228ThreadsFlow{
  0%{transform:translate3d(-3px,0,0) rotate(-1.9deg) skewX(-1.7deg)}
  28%{transform:translate3d(2px,1px,0) rotate(.5deg) skewX(.8deg)}
  62%{transform:translate3d(4px,0,0) rotate(1.7deg) skewX(1.6deg)}
  100%{transform:translate3d(-1px,1px,0) rotate(-.5deg) skewX(-.7deg)}
}

/* Pulse lag: tentacles respond after bell contraction rather than exactly with it. */
.v138-jelly-test .v228-tentacle-system{
  transform-origin:120px 151px;
  animation:v228TentacleLag 3.96s cubic-bezier(.24,.03,.16,1) infinite;
}
@keyframes v228TentacleLag{
  0%,62%{transform:translate3d(0,0,0) scaleY(1)}
  70%{transform:translate3d(0,2px,0) scaleY(1.015)}
  79%{transform:translate3d(0,5px,0) scaleY(1.035)}
  90%{transform:translate3d(0,2px,0) scaleY(1.015)}
  100%{transform:translate3d(0,0,0) scaleY(1)}
}

/* Scene-aware tentacle visibility. */
.fireworks-intro[data-jelly-scene="1"] .v228-oral-arms{opacity:.86}
.fireworks-intro[data-jelly-scene="1"] .v228-fine-tentacles{opacity:.80}

.fireworks-intro[data-jelly-scene="2"] .v228-oral-arms{
  opacity:.88;
  stroke:rgba(151,113,211,.36);
}
.fireworks-intro[data-jelly-scene="2"] .v228-fine-tentacles{
  opacity:.82;
  stroke:rgba(157,151,225,.31);
}

.fireworks-intro[data-jelly-scene="3"] .v228-oral-arms{
  opacity:.88;
  stroke:rgba(194,115,225,.35);
}
.fireworks-intro[data-jelly-scene="3"] .v228-fine-tentacles{
  opacity:.82;
  stroke:rgba(199,151,236,.29);
}

/* Performance contract: no blur, shadow, filters or per-thread animation. */
.v138-jelly-test.v228-pooled .v228-tentacle-system,
.v138-jelly-test.v228-pooled .v228-oral-arms,
.v138-jelly-test.v228-pooled .v228-fine-tentacles{
  filter:none!important;
  mix-blend-mode:normal!important;
  backface-visibility:hidden;
}
@media(max-width:430px){
  .v138-jelly-test{
    width:min(41vw,172px)!important;
    bottom:-28vh!important;
  }
}

/* =========================================================
   V228 — unified swimming biomechanics
   Bell remains the master clock. Arms and threads now deform
   progressively from root to tip with delayed hydrodynamic response.
   ========================================================= */

/* Disable V150/V228 group-swing animations so the new path morphs define motion. */
.v138-jelly-test .v228-oral-arms,
.v138-jelly-test .v228-fine-tentacles{
  animation:none!important;
  transform:none!important;
}

/* Keep only a tiny whole-system recoil; path deformation does most of the work. */
.v138-jelly-test .v228-tentacle-system{
  transform-origin:120px 151px;
  animation:v228WholeBodyRecoil 3.96s cubic-bezier(.22,.04,.18,1) infinite!important;
}
@keyframes v228WholeBodyRecoil{
  0%,58%{transform:translate3d(0,0,0)}
  68%{transform:translate3d(0,1px,0)}
  77%{transform:translate3d(0,5px,0)}
  90%{transform:translate3d(0,2px,0)}
  100%{transform:translate3d(0,0,0)}
}

/* Root feels attached to bell; tips stay lighter. */
.v138-jelly-test .v228-oral-arms{
  stroke-width:7.4;
  opacity:.84;
}
.v138-jelly-test .v228-fine-tentacles{
  stroke-width:1.0;
  opacity:.74;
}

/* Slight asymmetry in density gives natural body mass without extra animations. */
.v138-jelly-test .v228-arm-a,
.v138-jelly-test .v228-arm-d{opacity:.76}
.v138-jelly-test .v228-arm-b,
.v138-jelly-test .v228-arm-c{opacity:.91}

/* Make outer threads lighter; central threads carry more visible flow. */
.v138-jelly-test .v228-thread.t1,
.v138-jelly-test .v228-thread.t8{opacity:.58}
.v138-jelly-test .v228-thread.t2,
.v138-jelly-test .v228-thread.t7{opacity:.67}
.v138-jelly-test .v228-thread.t3,
.v138-jelly-test .v228-thread.t6{opacity:.76}
.v138-jelly-test .v228-thread.t4,
.v138-jelly-test .v228-thread.t5{opacity:.82}

/* Scene-specific visibility remains, but no heavier effects. */
.fireworks-intro[data-jelly-scene="2"] .v228-fine-tentacles{opacity:.82}
.fireworks-intro[data-jelly-scene="2"] .v228-oral-arms{opacity:.90}

/* Performance guard. Path morph only, no filter/blur/shadow. */
.v138-jelly-test.v228-pooled .v228-tentacle-system,
.v138-jelly-test.v228-pooled .v228-oral-arms,
.v138-jelly-test.v228-pooled .v228-fine-tentacles,
.v138-jelly-test.v228-pooled .v228-arm,
.v138-jelly-test.v228-pooled .v228-thread{
  filter:none!important;
  mix-blend-mode:normal!important;
}

/* V228: organic water-driven tentacles, intentionally asymmetric. */
.v138-jelly-test .v228-root-web{fill:rgba(172,125,224,.17);stroke:rgba(220,200,252,.08);stroke-width:.6;opacity:.82}
.v138-jelly-test .v228-ribbons{fill:none;stroke:rgba(176,125,224,.24);stroke-width:6.5;stroke-linecap:round;opacity:.72}
.v138-jelly-test .v228-ribbon.r2{stroke:rgba(125,148,229,.23);stroke-width:7.5}
.v138-jelly-test .v228-ribbon.r3{stroke:rgba(194,112,218,.23)}
.v138-jelly-test .v228-filaments{fill:none;stroke:rgba(190,181,244,.29);stroke-width:.82;stroke-linecap:round;opacity:.76}
.v138-jelly-test .v228-fil.f1,.v138-jelly-test .v228-fil.f7{opacity:.48}
.v138-jelly-test .v228-fil.f2,.v138-jelly-test .v228-fil.f6{opacity:.62}
.v138-jelly-test .v228-fil.f3,.v138-jelly-test .v228-fil.f5{opacity:.73}
.v138-jelly-test .v228-fil.f4{opacity:.81}
.v138-jelly-test .v228-tentacle-system,.v138-jelly-test .v228-ribbons,.v138-jelly-test .v228-filaments{animation:none!important;transform:none!important}
.fireworks-intro[data-jelly-scene="2"] .v228-filaments{stroke:rgba(157,150,220,.36);opacity:.84}
.fireworks-intro[data-jelly-scene="3"] .v228-ribbons{stroke:rgba(190,108,219,.27)}
.v138-jelly-test.v228-pooled .v228-root-web,.v138-jelly-test.v228-pooled .v228-ribbon,.v138-jelly-test.v228-pooled .v228-fil{filter:none!important;mix-blend-mode:normal!important}

/* V228 — real-jelly tentacles based on uploaded swimming reference. */
.v138-jelly-test .v228-root-web{fill:rgba(173,127,224,.16);stroke:rgba(224,205,253,.075);stroke-width:.6;opacity:.84}
.v138-jelly-test .v228-oral-arms{fill:none;stroke:rgba(169,119,222,.27);stroke-linecap:round;stroke-linejoin:round;opacity:.80}
.v138-jelly-test .v228-arm.a1{stroke-width:6.7;opacity:.72}
.v138-jelly-test .v228-arm.a2{stroke-width:8.1;stroke:rgba(127,148,229,.25);opacity:.88}
.v138-jelly-test .v228-arm.a3{stroke-width:8.0;stroke:rgba(151,129,229,.25);opacity:.88}
.v138-jelly-test .v228-arm.a4{stroke-width:6.5;stroke:rgba(193,113,218,.25);opacity:.72}
.v138-jelly-test .v228-filaments{fill:none;stroke:rgba(191,185,246,.25);stroke-width:.72;stroke-linecap:round;opacity:.68}
.v138-jelly-test .v228-fil.f1,.v138-jelly-test .v228-fil.f4{opacity:.55}
.v138-jelly-test .v228-fil.f2,.v138-jelly-test .v228-fil.f3{opacity:.76}
.v138-jelly-test .v228-tentacle-system,.v138-jelly-test .v228-oral-arms,.v138-jelly-test .v228-filaments{animation:none!important;transform:none!important}
.fireworks-intro[data-jelly-scene="2"] .v228-root-web{fill:rgba(145,108,206,.22)}
.fireworks-intro[data-jelly-scene="2"] .v228-oral-arms{stroke:rgba(149,111,207,.32)}
.fireworks-intro[data-jelly-scene="2"] .v228-filaments{stroke:rgba(160,154,224,.32);opacity:.75}
.fireworks-intro[data-jelly-scene="3"] .v228-arm.a4{stroke:rgba(207,118,222,.28)}
.fireworks-intro[data-jelly-scene="3"] .v228-filaments{stroke:rgba(207,158,235,.27)}
.v138-jelly-test.v228-pooled .v228-root-web,.v138-jelly-test.v228-pooled .v228-arm,.v138-jelly-test.v228-pooled .v228-fil{filter:none!important;mix-blend-mode:normal!important}

/* =========================================================
   V228 — reference-video bell realism
   Blue-white gelatinous translucency + thin luminous rim +
   subtle warm internal tissue. Removes fantasy-neon feel.
   ========================================================= */

.fireworks-intro .v138-jelly-test .v228-membrane{
  opacity:.84!important;
  stroke:rgba(213,234,255,.16)!important;
  stroke-width:.72!important;
}
.fireworks-intro .v138-jelly-test .v228-rim{
  opacity:.54!important;
}
.fireworks-intro .v138-jelly-test .v228-core{
  opacity:.43!important;
  animation:v228CoreBreath 3.96s ease-in-out infinite!important;
}
@keyframes v228CoreBreath{
  0%,52%,100%{opacity:.34}
  68%{opacity:.48}
  79%{opacity:.40}
}

/* Video-like internal organs: peach-orange, semi-transparent, never neon. */
.fireworks-intro .v138-jelly-test .v228-organs{
  fill:rgba(255,176,138,.23)!important;
  opacity:.68!important;
}
.fireworks-intro .v138-jelly-test .v228-life-ring{
  stroke:rgba(197,220,247,.13)!important;
  opacity:.15!important;
}
.fireworks-intro .v138-jelly-test .v228-highlight{
  stroke:rgba(245,250,255,.20)!important;
  opacity:.42!important;
}

/* Remove fantasy star-speckle from the bell — the reference is clean gel tissue. */
.fireworks-intro .v138-jelly-test .v228-bell-sparks{
  display:none!important;
}

/* Bright scene: slightly denser membrane for visibility, still translucent. */
.fireworks-intro[data-jelly-scene="1"] .v228-membrane{opacity:.86!important}
.fireworks-intro[data-jelly-scene="1"] .v228-rim{opacity:.57!important}

.fireworks-intro[data-jelly-scene="2"] .v228-membrane{
  opacity:.91!important;
  stroke:rgba(188,216,248,.21)!important;
}
.fireworks-intro[data-jelly-scene="2"] .v228-rim{opacity:.61!important}
.fireworks-intro[data-jelly-scene="2"] .v228-core{opacity:.46!important}
.fireworks-intro[data-jelly-scene="2"] .v228-organs{
  fill:rgba(238,156,126,.25)!important;
  opacity:.74!important;
}

.fireworks-intro[data-jelly-scene="3"] .v228-membrane{opacity:.86!important}
.fireworks-intro[data-jelly-scene="3"] .v228-rim{opacity:.58!important}
.fireworks-intro[data-jelly-scene="3"] .v228-organs{
  fill:rgba(248,168,142,.23)!important;
}

/* Match the video's softer body/edge relationship. */
.v138-jelly-test.v228-pooled .v228-membrane,
.v138-jelly-test.v228-pooled .v228-rim,
.v138-jelly-test.v228-pooled .v228-core,
.v138-jelly-test.v228-pooled .v228-organs,
.v138-jelly-test.v228-pooled .v228-life-ring,
.v138-jelly-test.v228-pooled .v228-highlight{
  filter:none!important;
  mix-blend-mode:normal!important;
}

/* =========================================================
   V228 — volumetric front-view living jellyfish.
   No flat/top-view silhouette, no neon game look.
   ========================================================= */
.v138-jelly-test{
  aspect-ratio:260/500!important;
  width:min(45vw,190px)!important;
  bottom:-31vh!important;
}
.v138-jelly-test .v228-jelly-svg{width:100%!important;height:100%!important;overflow:visible!important}
.v138-jelly-test .v228-bell{
  opacity:.92;
  stroke:rgba(218,244,255,.17);
  stroke-width:.8;
}
.v138-jelly-test .v228-inner-gel{opacity:.84}
.v138-jelly-test .v228-rim{opacity:.73}
.v138-jelly-test .v228-organs{
  fill:rgba(255,160,184,.18);
  stroke:rgba(255,201,184,.10);
  stroke-width:.6;
  opacity:.82;
}
.v138-jelly-test .v228-oral-arms{opacity:.76}
.v138-jelly-test .v228-arm.a1,.v138-jelly-test .v228-arm.a4{opacity:.63}
.v138-jelly-test .v228-arm.a2,.v138-jelly-test .v228-arm.a3{opacity:.82}
.v138-jelly-test .v228-filaments{
  stroke:rgba(186,226,246,.25);
  stroke-width:.72;
  opacity:.64;
}
.v138-jelly-test .v228-fil.f1,.v138-jelly-test .v228-fil.f4{opacity:.48}
.v138-jelly-test .v228-fil.f2,.v138-jelly-test .v228-fil.f3{opacity:.70}

/* Keep the gel transparent on all three existing backgrounds. */
.fireworks-intro[data-jelly-scene="1"] .v228-bell{opacity:.94}
.fireworks-intro[data-jelly-scene="2"] .v228-bell{opacity:.98;stroke:rgba(197,229,246,.23)}
.fireworks-intro[data-jelly-scene="2"] .v228-rim{opacity:.82}
.fireworks-intro[data-jelly-scene="2"] .v228-organs{opacity:.90}
.fireworks-intro[data-jelly-scene="3"] .v228-bell{opacity:.95}
.fireworks-intro[data-jelly-scene="3"] .v228-organs{fill:rgba(255,145,190,.20)}

/* No heavy effects; translucency comes from layered alpha only. */
.v138-jelly-test.v228-pooled .v228-bell,
.v138-jelly-test.v228-pooled .v228-inner-gel,
.v138-jelly-test.v228-pooled .v228-rim,
.v138-jelly-test.v228-pooled .v228-organs,
.v138-jelly-test.v228-pooled .v228-arm,
.v138-jelly-test.v228-pooled .v228-fil{
  filter:none!important;
  mix-blend-mode:normal!important;
}

/* =========================================================
   V228 — real oral tissue: filled ribbons + sparse filaments.
   Removes the "four transparent wires" look seen in recording.
   ========================================================= */

.v138-jelly-test .v228-root-web{
  fill:rgba(223,174,224,.13);
  stroke:rgba(220,218,247,.05);
  stroke-width:.5;
  opacity:.78;
}

.v138-jelly-test .v228-oral-ribbons{
  fill:rgba(190,145,224,.14);
  stroke:rgba(214,195,241,.055);
  stroke-width:.55;
  opacity:.88;
}
.v138-jelly-test .v228-ribbon.r1{fill:rgba(148,192,231,.12);opacity:.68}
.v138-jelly-test .v228-ribbon.r2{fill:rgba(205,147,225,.16);opacity:.88}
.v138-jelly-test .v228-ribbon.r3{fill:rgba(226,155,210,.15);opacity:.84}
.v138-jelly-test .v228-ribbon.r4{fill:rgba(139,198,229,.11);opacity:.64}

.v138-jelly-test .v228-filaments{
  stroke:rgba(202,228,243,.19);
  stroke-width:.52;
  opacity:.54;
}
.v138-jelly-test .v228-fil.f1,
.v138-jelly-test .v228-fil.f5{opacity:.35}
.v138-jelly-test .v228-fil.f2,
.v138-jelly-test .v228-fil.f4{opacity:.48}
.v138-jelly-test .v228-fil.f3{opacity:.58}

/* Do not let the tissue read as bright ropes on the lightest background. */
.fireworks-intro[data-jelly-scene="2"] .v228-root-web{opacity:.84}
.fireworks-intro[data-jelly-scene="2"] .v228-oral-ribbons{opacity:.93}
.fireworks-intro[data-jelly-scene="2"] .v228-filaments{opacity:.58}

/* Clean out all legacy rope styles from V156. */
.v138-jelly-test .v228-oral-arms,
.v138-jelly-test .v228-arm{display:none!important}

.v138-jelly-test.v228-pooled .v228-root-web,
.v138-jelly-test.v228-pooled .v228-ribbon,
.v138-jelly-test.v228-pooled .v228-fil{
  filter:none!important;
  mix-blend-mode:normal!important;
}

/* =========================================================
   V228 — smoother, lighter hydrodynamics from user recording.
   Continuous depth wave, 30fps path updates, airier tissue.
   ========================================================= */
.v138-jelly-test .v228-root-web{
  fill:rgba(220,178,226,.095)!important;
  stroke:rgba(227,218,246,.035)!important;
  opacity:.58!important;
}
.v138-jelly-test .v228-oral-ribbons{
  stroke-width:.34!important;
  opacity:.72!important;
}
.v138-jelly-test .v228-ribbon.r1{fill:rgba(151,199,231,.082)!important;opacity:.52!important}
.v138-jelly-test .v228-ribbon.r2{fill:rgba(204,157,226,.105)!important;opacity:.70!important}
.v138-jelly-test .v228-ribbon.r3{fill:rgba(226,164,211,.100)!important;opacity:.68!important}
.v138-jelly-test .v228-ribbon.r4{fill:rgba(143,201,230,.075)!important;opacity:.48!important}

.v138-jelly-test .v228-filaments{
  stroke:rgba(211,236,248,.155)!important;
  stroke-width:.42!important;
  opacity:.48!important;
}
.v138-jelly-test .v228-fil.f1,
.v138-jelly-test .v228-fil.f5{opacity:.28!important}
.v138-jelly-test .v228-fil.f2,
.v138-jelly-test .v228-fil.f4{opacity:.42!important}
.v138-jelly-test .v228-fil.f3{opacity:.50!important}

/* Slightly lighter bell/tissue balance so the whole animal floats rather than hangs. */
.v138-jelly-test .v228-bell{opacity:.88!important}
.v138-jelly-test .v228-inner-gel{opacity:.72!important}
.v138-jelly-test .v228-rim{opacity:.66!important}
.v138-jelly-test .v228-organs{opacity:.72!important}

.fireworks-intro[data-jelly-scene="2"] .v228-root-web{opacity:.66!important}
.fireworks-intro[data-jelly-scene="2"] .v228-oral-ribbons{opacity:.78!important}
.fireworks-intro[data-jelly-scene="2"] .v228-filaments{opacity:.52!important}

/* =========================================================
   V228 — restore visible living color without losing gel transparency.
   Recording showed V158 was too faint against the bright blue scene.
   ========================================================= */

.v138-jelly-test .v228-bell{
  opacity:.98!important;
  stroke:rgba(186,225,255,.34)!important;
  stroke-width:1.15!important;
}
.v138-jelly-test .v228-inner-gel{
  opacity:.91!important;
}
.v138-jelly-test .v228-rim{
  opacity:.88!important;
  stroke-width:3.45!important;
}
.v138-jelly-test .v228-organs{
  fill:rgba(242,119,190,.27)!important;
  stroke:rgba(255,195,177,.14)!important;
  opacity:.93!important;
}

/* Keep oral tissue light, but not invisible. */
.v138-jelly-test .v228-root-web{
  fill:rgba(208,139,227,.13)!important;
  opacity:.68!important;
}
.v138-jelly-test .v228-oral-ribbons{
  opacity:.79!important;
}
.v138-jelly-test .v228-ribbon.r1{fill:rgba(119,188,236,.12)!important;opacity:.60!important}
.v138-jelly-test .v228-ribbon.r2{fill:rgba(181,118,230,.16)!important;opacity:.78!important}
.v138-jelly-test .v228-ribbon.r3{fill:rgba(229,128,207,.15)!important;opacity:.76!important}
.v138-jelly-test .v228-ribbon.r4{fill:rgba(112,193,232,.11)!important;opacity:.58!important}
.v138-jelly-test .v228-filaments{
  stroke:rgba(188,224,246,.20)!important;
  opacity:.55!important;
}

/* Brightest homepage background needs the strongest separation. */
.fireworks-intro[data-jelly-scene="2"] .v228-bell{
  opacity:1!important;
  stroke:rgba(158,207,246,.42)!important;
}
.fireworks-intro[data-jelly-scene="2"] .v228-inner-gel{opacity:.96!important}
.fireworks-intro[data-jelly-scene="2"] .v228-rim{opacity:.97!important}
.fireworks-intro[data-jelly-scene="2"] .v228-organs{
  fill:rgba(226,105,188,.31)!important;
  opacity:1!important;
}
.fireworks-intro[data-jelly-scene="2"] .v228-root-web{opacity:.76!important}
.fireworks-intro[data-jelly-scene="2"] .v228-oral-ribbons{opacity:.84!important}

/* Scene 3 gets a touch more violet/pink density. */
.fireworks-intro[data-jelly-scene="3"] .v228-organs{
  fill:rgba(235,111,198,.29)!important;
}

/* V228 — strengthen tentacle colour only; keep V159 bell and motion intact. */
.v138-jelly-test .v228-root-web{
  fill:rgba(202,119,225,.18)!important;
  opacity:.78!important;
}
.v138-jelly-test .v228-oral-ribbons{opacity:.90!important}
.v138-jelly-test .v228-ribbon.r1{fill:rgba(91,184,239,.18)!important;opacity:.72!important}
.v138-jelly-test .v228-ribbon.r2{fill:rgba(166,91,232,.23)!important;opacity:.90!important}
.v138-jelly-test .v228-ribbon.r3{fill:rgba(232,92,199,.22)!important;opacity:.88!important}
.v138-jelly-test .v228-ribbon.r4{fill:rgba(84,191,235,.17)!important;opacity:.70!important}

.v138-jelly-test .v228-filaments{
  stroke:rgba(174,216,248,.30)!important;
  stroke-width:.46!important;
  opacity:.68!important;
}
.v138-jelly-test .v228-fil.f1{stroke:rgba(116,199,242,.25)!important;opacity:.46!important}
.v138-jelly-test .v228-fil.f2{stroke:rgba(157,131,235,.30)!important;opacity:.62!important}
.v138-jelly-test .v228-fil.f3{stroke:rgba(218,128,218,.31)!important;opacity:.70!important}
.v138-jelly-test .v228-fil.f4{stroke:rgba(139,159,239,.29)!important;opacity:.61!important}
.v138-jelly-test .v228-fil.f5{stroke:rgba(100,197,239,.24)!important;opacity:.45!important}

/* Strongest separation on the bright second background. */
.fireworks-intro[data-jelly-scene="2"] .v228-root-web{opacity:.84!important}
.fireworks-intro[data-jelly-scene="2"] .v228-oral-ribbons{opacity:.96!important}
.fireworks-intro[data-jelly-scene="2"] .v228-filaments{opacity:.75!important}

/* =========================================================
   V228 FINAL — preserve V160 color; refine only life/motion.
   ========================================================= */

/* Slightly softer tissue hierarchy: roots belong to body, tips disappear into water. */
.v138-jelly-test .v228-root-web{opacity:.75!important}
.v138-jelly-test .v228-ribbon.r1{opacity:.69!important}
.v138-jelly-test .v228-ribbon.r2{opacity:.87!important}
.v138-jelly-test .v228-ribbon.r3{opacity:.85!important}
.v138-jelly-test .v228-ribbon.r4{opacity:.67!important}
.v138-jelly-test .v228-fil.f1,
.v138-jelly-test .v228-fil.f5{opacity:.42!important}
.v138-jelly-test .v228-fil.f2,
.v138-jelly-test .v228-fil.f4{opacity:.59!important}
.v138-jelly-test .v228-fil.f3{opacity:.67!important}

/* Bell remains the visual anchor; no extra glow/filter. */
.v138-jelly-test.v228-pooled .v228-bell,
.v138-jelly-test.v228-pooled .v228-inner-gel,
.v138-jelly-test.v228-pooled .v228-rim,
.v138-jelly-test.v228-pooled .v228-root-web,
.v138-jelly-test.v228-pooled .v228-ribbon,
.v138-jelly-test.v228-pooled .v228-fil{
  filter:none!important;
  mix-blend-mode:normal!important;
  will-change:auto!important;
}

/* V228 — make water flow readable without turning tentacles into waving ropes. */
.v138-jelly-test .v228-oral-ribbons{
  opacity:.91!important;
}
.v138-jelly-test .v228-filaments{
  opacity:.72!important;
}
.v138-jelly-test .v228-fil.f1,
.v138-jelly-test .v228-fil.f5{opacity:.48!important}
.v138-jelly-test .v228-fil.f2,
.v138-jelly-test .v228-fil.f4{opacity:.65!important}
.v138-jelly-test .v228-fil.f3{opacity:.73!important}

/* Preserve the V160/V161 colour strength and light gel quality. */
.v138-jelly-test .v228-root-web{opacity:.77!important}

/* =========================================================
   V228 — restrained bioluminescence + underwater audio.
   Saturation lives inside transparent tissue; no blur/filter.
   ========================================================= */
.v138-jelly-test .v228-bell{
  opacity:1!important;
  stroke:rgba(104,232,255,.48)!important;
  stroke-width:1.28!important;
}
.v138-jelly-test .v228-inner-gel{opacity:.98!important}
.v138-jelly-test .v228-rim{opacity:.98!important;stroke-width:3.55!important}
.v138-jelly-test .v228-organs{
  fill:rgba(245,90,205,.34)!important;
  stroke:rgba(255,205,162,.18)!important;
  opacity:1!important;
}
.v138-jelly-test .v228-root-web{fill:rgba(190,91,236,.21)!important;opacity:.84!important}
.v138-jelly-test .v228-ribbon.r1{fill:rgba(61,213,255,.22)!important;opacity:.76!important}
.v138-jelly-test .v228-ribbon.r2{fill:rgba(137,72,249,.28)!important;opacity:.94!important}
.v138-jelly-test .v228-ribbon.r3{fill:rgba(244,69,207,.27)!important;opacity:.92!important}
.v138-jelly-test .v228-ribbon.r4{fill:rgba(53,205,248,.20)!important;opacity:.74!important}
.v138-jelly-test .v228-fil.f1{stroke:rgba(70,215,255,.34)!important}
.v138-jelly-test .v228-fil.f2{stroke:rgba(131,119,255,.38)!important}
.v138-jelly-test .v228-fil.f3{stroke:rgba(235,101,237,.40)!important}
.v138-jelly-test .v228-fil.f4{stroke:rgba(149,113,255,.36)!important}
.v138-jelly-test .v228-fil.f5{stroke:rgba(67,209,250,.32)!important}

/* Bright background keeps separation without turning opaque. */
.fireworks-intro[data-jelly-scene="2"] .v228-bell{stroke:rgba(75,202,248,.58)!important}
.fireworks-intro[data-jelly-scene="2"] .v228-rim{opacity:1!important}
.fireworks-intro[data-jelly-scene="2"] .v228-organs{fill:rgba(229,67,197,.39)!important}

.v138-jelly-test.v228-pooled .v228-bell,
.v138-jelly-test.v228-pooled .v228-inner-gel,
.v138-jelly-test.v228-pooled .v228-rim,
.v138-jelly-test.v228-pooled .v228-organs,
.v138-jelly-test.v228-pooled .v228-root-web,
.v138-jelly-test.v228-pooled .v228-ribbon,
.v138-jelly-test.v228-pooled .v228-fil{
  filter:none!important;
  mix-blend-mode:normal!important;
}

/* =========================================================
   V228 FINAL JELLY REFINEMENT
   - no jelly sound
   - less circular / less game-like bell
   - dispersed internal bioluminescence
   - asynchronous hydrodynamic oral arms
   ========================================================= */

/* Keep the gel luminous but break up the "pink glowing ball" impression. */
.v138-jelly-test .v228-inner-gel{opacity:.86!important}
.v138-jelly-test .v228-organs{
  fill:rgba(218,111,203,.23)!important;
  stroke:rgba(255,190,173,.10)!important;
  opacity:.82!important;
}
.v138-jelly-test .v228-rim{
  opacity:.91!important;
  stroke-width:3.15!important;
}

/* Oral arms remain colored but slightly more tissue-like than neon ribbons. */
.v138-jelly-test .v228-ribbon.r1{opacity:.70!important}
.v138-jelly-test .v228-ribbon.r2{opacity:.84!important}
.v138-jelly-test .v228-ribbon.r3{opacity:.82!important}
.v138-jelly-test .v228-ribbon.r4{opacity:.68!important}
.v138-jelly-test .v228-filaments{opacity:.70!important}

/* No heavy rendering effects. */
.v138-jelly-test.v228-pooled svg,
.v138-jelly-test.v228-pooled .v228-bell,
.v138-jelly-test.v228-pooled .v228-ribbon,
.v138-jelly-test.v228-pooled .v228-fil{
  filter:none!important;
  mix-blend-mode:normal!important;
}

/* V228 — V164 tentacle appearance restored; motion upgraded to circulating water. */
.v138-jelly-test.v228-pooled .v228-ribbon,
.v138-jelly-test.v228-pooled .v228-fil,
.v138-jelly-test.v228-pooled .v228-root-web{
  filter:none!important;
  mix-blend-mode:normal!important;
  will-change:auto!important;
}

/* V228 — geometry unchanged; make the moving water readable to the eye. */
.v138-jelly-test .v228-oral-ribbons{opacity:.88!important}
.v138-jelly-test .v228-filaments{opacity:.72!important}
.v138-jelly-test.v228-pooled .v228-ribbon,
.v138-jelly-test.v228-pooled .v228-fil{
  filter:none!important;
  mix-blend-mode:normal!important;
}

/* V228 — freer, more visible water-driven tentacle motion. Geometry unchanged. */
.v138-jelly-test .v228-oral-ribbons{opacity:.90!important}
.v138-jelly-test .v228-filaments{opacity:.75!important}

/* =========================================================
   V228 — continuous rotational-flow final + iPhone/Xiaomi compatibility.
   No new filters, no blend modes, no layout-thrashing animation.
   ========================================================= */
.v138-jelly-test.v228-pooled,
.v138-jelly-test.v228-pooled svg{
  -webkit-transform:translateZ(0);
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
.v138-jelly-test.v228-pooled .v228-ribbon,
.v138-jelly-test.v228-pooled .v228-fil,
.v138-jelly-test.v228-pooled .v228-root-web{
  filter:none!important;
  mix-blend-mode:normal!important;
}

/* Respect safe-area geometry on modern iPhone browsers/web-app mode. */
@supports (padding-bottom: env(safe-area-inset-bottom)){
  .fireworks-intro{
    padding-bottom:env(safe-area-inset-bottom);
  }
}

/* Xiaomi/Android Chromium: avoid text-size auto-adjust affecting surrounding layout. */
html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

/* =========================================================
   V228 — bell/tentacle causal coupling
   Geometry, color and fluorescence remain from V169.
   ========================================================= */
.v138-jelly-test.v228-pooled .v228-ribbon,
.v138-jelly-test.v228-pooled .v228-fil,
.v138-jelly-test.v228-pooled .v228-root-web{
  filter:none!important;
  mix-blend-mode:normal!important;
}

/* Keep visibility stable while the arms gather/fan. */
.v138-jelly-test .v228-oral-ribbons{opacity:.89!important}
.v138-jelly-test .v228-filaments{opacity:.73!important}

/* =========================================================
   V228 — stronger 3-stage coupling + restore visible fluorescence
   ========================================================= */

/* Bell/body: transparent gel, but no longer washed out. */
.v138-jelly-test .v228-bell{
  opacity:1!important;
  stroke:rgba(176,224,255,.44)!important;
}
.v138-jelly-test .v228-inner-gel{
  opacity:.96!important;
}
.v138-jelly-test .v228-rim{
  opacity:.98!important;
  stroke-width:3.5!important;
}
.v138-jelly-test .v228-organs{
  fill:rgba(232,105,202,.31)!important;
  stroke:rgba(255,195,177,.14)!important;
  opacity:.98!important;
}
.v138-jelly-test .v228-root-web{
  fill:rgba(200,116,228,.18)!important;
  opacity:.84!important;
}

/* Oral arms: stronger local bioluminescence, still translucent. */
.v138-jelly-test .v228-oral-ribbons{opacity:.96!important}
.v138-jelly-test .v228-ribbon.r1{
  fill:rgba(92,190,240,.22)!important;
  opacity:.78!important;
}
.v138-jelly-test .v228-ribbon.r2{
  fill:rgba(170,95,237,.28)!important;
  opacity:.96!important;
}
.v138-jelly-test .v228-ribbon.r3{
  fill:rgba(236,95,207,.27)!important;
  opacity:.94!important;
}
.v138-jelly-test .v228-ribbon.r4{
  fill:rgba(86,196,238,.21)!important;
  opacity:.76!important;
}

/* Fine filaments must be readable during the 3-stage motion. */
.v138-jelly-test .v228-filaments{
  stroke:rgba(190,225,252,.34)!important;
  stroke-width:.48!important;
  opacity:.80!important;
}
.v138-jelly-test .v228-fil.f1,
.v138-jelly-test .v228-fil.f5{opacity:.56!important}
.v138-jelly-test .v228-fil.f2,
.v138-jelly-test .v228-fil.f4{opacity:.72!important}
.v138-jelly-test .v228-fil.f3{opacity:.82!important}

/* Bright scene 2 gets extra separation so color doesn't disappear. */
.fireworks-intro[data-jelly-scene="2"] .v228-bell{
  stroke:rgba(154,211,250,.52)!important;
}
.fireworks-intro[data-jelly-scene="2"] .v228-inner-gel{opacity:1!important}
.fireworks-intro[data-jelly-scene="2"] .v228-rim{opacity:1!important}
.fireworks-intro[data-jelly-scene="2"] .v228-organs{opacity:1!important}
.fireworks-intro[data-jelly-scene="2"] .v228-oral-ribbons{opacity:1!important}
.fireworks-intro[data-jelly-scene="2"] .v228-filaments{opacity:.86!important}

/* Keep rendering lightweight. */
.v138-jelly-test.v228-pooled .v228-bell,
.v138-jelly-test.v228-pooled .v228-ribbon,
.v138-jelly-test.v228-pooled .v228-fil,
.v138-jelly-test.v228-pooled .v228-root-web{
  filter:none!important;
  mix-blend-mode:normal!important;
}

/* V228 — make gather/fan visually unmistakable; retain V171 fluorescence. */
.v138-jelly-test .v228-oral-ribbons{opacity:.98!important}
.v138-jelly-test .v228-filaments{opacity:.84!important}
.v138-jelly-test .v228-root-web{opacity:.88!important}

/* =========================================================
   V228 — bell-locked rotational gather/fan
   Keep the V171/V172 visible fluorescence; no heavier filters.
   ========================================================= */
.v138-jelly-test .v228-oral-ribbons{opacity:.98!important}
.v138-jelly-test .v228-filaments{opacity:.84!important}
.v138-jelly-test .v228-root-web{opacity:.88!important}
.v138-jelly-test.v228-pooled .v228-ribbon,
.v138-jelly-test.v228-pooled .v228-fil{
  filter:none!important;
  mix-blend-mode:normal!important;
}

/* V228 — master-clock bell/tentacle synchronization */
.v138-jelly-test .v228-oral-ribbons{opacity:.98!important}
.v138-jelly-test .v228-filaments{opacity:.86!important}
.v138-jelly-test .v228-root-web{opacity:.90!important}
.v138-jelly-test.v228-pooled .v228-ribbon,
.v138-jelly-test.v228-pooled .v228-fil{
  filter:none!important;
  mix-blend-mode:normal!important;
}

/* =========================================================
   V228 — performance + coordinated rotational gather/fan
   ========================================================= */
.v138-jelly-test .v228-ribbon,
.v138-jelly-test .v228-fil{
  transform-box:view-box;
  will-change:transform;
}
.v138-jelly-test .v228-oral-ribbons{opacity:.98!important}
.v138-jelly-test .v228-filaments{opacity:.86!important}
.v138-jelly-test .v228-root-web{opacity:.90!important}
.v138-jelly-test.v228-pooled .v228-ribbon,
.v138-jelly-test.v228-pooled .v228-fil{
  filter:none!important;
  mix-blend-mode:normal!important;
}

/* =========================================================
   V228 — consolidated final motion repair
   ========================================================= */
.v138-jelly-test .v228-oral-ribbons{opacity:.98!important}
.v138-jelly-test .v228-filaments{opacity:.86!important}
.v138-jelly-test .v228-root-web{opacity:.90!important}
.v138-jelly-test.v228-pooled .v228-ribbon,
.v138-jelly-test.v228-pooled .v228-fil,
.v138-jelly-test.v228-pooled .v228-root-web{
  filter:none!important;
  mix-blend-mode:normal!important;
}
html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
@supports (padding-bottom:env(safe-area-inset-bottom)){
  .fireworks-intro{padding-bottom:env(safe-area-inset-bottom)}
}

/* =========================================================
   V228 — softer natural bell/tentacle coordination
   Transform-only motion for mobile smoothness.
   ========================================================= */
.v138-jelly-test .v228-ribbon,
.v138-jelly-test .v228-fil{
  transform-box:view-box;
  will-change:transform;
}
.v138-jelly-test .v228-oral-ribbons{opacity:.96!important}
.v138-jelly-test .v228-filaments{opacity:.82!important}
.v138-jelly-test .v228-root-web{opacity:.88!important}
.v138-jelly-test.v228-pooled .v228-ribbon,
.v138-jelly-test.v228-pooled .v228-fil,
.v138-jelly-test.v228-pooled .v228-root-web{
  filter:none!important;
  mix-blend-mode:normal!important;
}

/* V228 — smaller reopening amplitude; preserve V177 smooth motion. */

/* V228 — opening returns to neutral; no active outward fan. */

/* V228: remove artificial bell linework and keep only soft gel silhouette. */
.v138-jelly-test [class*="rib"],
.v138-jelly-test [class*="seam"],
.v138-jelly-test [class*="skirt-line"],
.v138-jelly-test [class*="bell-line"]{
  opacity:.10!important;
}
.v138-jelly-test .v228-rim{
  opacity:.38!important;
}
.v138-jelly-test .v228-bell,
.v138-jelly-test .v228-bell-body{
  transform-box:view-box;
  will-change:transform;
}

/* =========================================================
   V228 — separate bell / rim / tentacles to prevent clipping
   ========================================================= */
.v138-jelly-test .v228-oral-ribbons{
  opacity:.98!important;
  visibility:visible!important;
}
.v138-jelly-test .v228-filaments{
  opacity:.88!important;
  visibility:visible!important;
}
.v138-jelly-test .v228-root-web{
  opacity:.90!important;
  visibility:visible!important;
}
.v138-jelly-test .v228-rim{
  opacity:.34!important;
  overflow:visible!important;
}
.v138-jelly-test .v228-bell{
  overflow:visible!important;
}
.v138-jelly-test .v228-ribbon,
.v138-jelly-test .v228-fil{
  filter:none!important;
  mix-blend-mode:normal!important;
  transform-box:view-box;
  will-change:transform;
}
/* Prevent the lower rim from visually escaping the translucent bell. */
.v138-jelly-test .v228-rim{
  stroke-width:2.2!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
}

/* =========================================================
   V228 — new transparent gel artwork + approved V181 trajectory
   ========================================================= */
.v138-jelly-test.v228-pooled{
  width:min(43vw,260px)!important;
  height:auto!important;
  aspect-ratio:2/3;
  background:none!important;
  contain:layout style;
}
.v138-jelly-test .v228-swimmer{
  width:100%;
  height:100%;
  position:relative;
  transform:none!important;
  animation:none!important;
}
.v138-jelly-test .v228-gel-jelly{
  position:absolute;
  inset:0;
  transform-origin:50% 30%;
  will-change:transform;
  pointer-events:none;
}
.v138-jelly-test .v228-gel-bell,
.v138-jelly-test .v228-gel-body{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  pointer-events:none;
  user-select:none;
  -webkit-user-drag:none;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  will-change:transform;
  filter:none!important;
  mix-blend-mode:normal!important;
}
.v138-jelly-test .v228-gel-bell{
  transform-origin:50% 30%;
  z-index:2;
}
.v138-jelly-test .v228-gel-body{
  transform-origin:50% 24%;
  z-index:1;
}

/* V228: stronger bell stroke + causal tentacle follow.
   Keep transforms GPU-only and separate layers. */
.v138-jelly-test .v228-gel-bell{transform-origin:50% 31%!important}
.v138-jelly-test .v228-gel-body{transform-origin:50% 25%!important}

/* V228 — new gel artwork + approved V181 trajectory, stronger visible swimming */
.v138-jelly-test .v228-gel-bell{
  transform-origin:50% 31%!important;
}
.v138-jelly-test .v228-gel-body{
  transform-origin:50% 24%!important;
}

/* V228 guaranteed visible dynamic jelly */
.v138-jelly-test.v228-pooled{
 display:block!important;position:absolute!important;
 width:clamp(150px,43vw,260px)!important;
 height:clamp(300px,86vw,520px)!important;
 opacity:1!important;visibility:visible!important;
 overflow:visible!important;z-index:18!important;pointer-events:none!important;
}
.v138-jelly-test.v228-pooled .v228-swimmer,
.v138-jelly-test.v228-pooled .v228-gel-jelly{
 display:block!important;position:absolute!important;inset:0!important;
 width:100%!important;height:100%!important;opacity:1!important;
 visibility:visible!important;overflow:visible!important;
}
.v138-jelly-test.v228-pooled .v228-gel-bell,
.v138-jelly-test.v228-pooled .v228-gel-body{
 display:block!important;visibility:visible!important;opacity:1!important;
 width:100%!important;height:100%!important;object-fit:contain!important;
}

/* V228 — independent flowing lower tentacles */
.v138-jelly-test .v228-gel-oral,
.v138-jelly-test .v228-gel-tentacle,
.v138-jelly-test .v228-gel-bell{
 position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
 display:block;pointer-events:none;user-select:none;-webkit-user-drag:none;
 backface-visibility:hidden;-webkit-backface-visibility:hidden;
 filter:none!important;mix-blend-mode:normal!important;will-change:transform;
}
.v138-jelly-test .v228-gel-oral{z-index:2;transform-origin:50% 30%}
.v138-jelly-test .v228-gel-tentacle{z-index:1;transform-origin:50% 34%}
.v138-jelly-test .v228-gel-bell{z-index:3;transform-origin:50% 31%}
.v138-jelly-test .v228-t1{transform-origin:24% 34%}
.v138-jelly-test .v228-t2{transform-origin:37% 34%}
.v138-jelly-test .v228-t3{transform-origin:50% 34%}
.v138-jelly-test .v228-t4{transform-origin:63% 34%}
.v138-jelly-test .v228-t5{transform-origin:76% 34%}

/* V228 — asset-path repair + guaranteed layered jelly visibility */
.v138-jelly-test.v228-pooled{
 display:block!important;visibility:visible!important;opacity:1!important;
 width:clamp(150px,43vw,260px)!important;height:clamp(300px,86vw,520px)!important;
 overflow:visible!important;z-index:18!important;
}
.v138-jelly-test.v228-pooled .v228-swimmer,
.v138-jelly-test.v228-pooled .v228-gel-jelly{
 display:block!important;visibility:visible!important;opacity:1!important;
 position:absolute!important;inset:0!important;width:100%!important;height:100%!important;
 overflow:visible!important;
}
.v138-jelly-test.v228-pooled .v228-gel-oral,
.v138-jelly-test.v228-pooled .v228-gel-tentacle,
.v138-jelly-test.v228-pooled .v228-gel-bell{
 display:block!important;visibility:visible!important;opacity:1!important;
 position:absolute!important;inset:0!important;width:100%!important;height:100%!important;
 object-fit:contain!important;
}

/* V228 — stronger breathing + stronger lateral tentacle release + stronger water drift */
.v138-jelly-test .v228-gel-bell{transform-origin:50% 31%!important}
.v138-jelly-test .v228-gel-oral{transform-origin:50% 30%!important}
.v138-jelly-test .v228-gel-tentacle{will-change:transform}

/* V228 — cleaner 4 main + 2 fine tentacles; water-flow bending */
.v138-jelly-test .v228-t1{transform-origin:28% 34%}
.v138-jelly-test .v228-t2{transform-origin:42% 34%}
.v138-jelly-test .v228-t3{transform-origin:58% 34%}
.v138-jelly-test .v228-t4{transform-origin:72% 34%}
.v138-jelly-test .v228-t5{transform-origin:17% 33%}
.v138-jelly-test .v228-t6{transform-origin:83% 33%}
.v138-jelly-test .v228-t5,.v138-jelly-test .v228-t6{opacity:.68!important}

/* V228 true segmented bending */
.v138-jelly-test .v228-tseg{
 position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
 display:block;pointer-events:none;will-change:transform;
 backface-visibility:hidden;-webkit-backface-visibility:hidden;
 filter:none!important;mix-blend-mode:normal!important;z-index:1;
}
.v138-jelly-test .v228-m1s1,.v138-jelly-test .v228-m1s2,.v138-jelly-test .v228-m1s3{transform-origin:25% 37%}
.v138-jelly-test .v228-m2s1,.v138-jelly-test .v228-m2s2,.v138-jelly-test .v228-m2s3{transform-origin:42% 37%}
.v138-jelly-test .v228-m3s1,.v138-jelly-test .v228-m3s2,.v138-jelly-test .v228-m3s3{transform-origin:58% 37%}
.v138-jelly-test .v228-m4s1,.v138-jelly-test .v228-m4s2,.v138-jelly-test .v228-m4s3{transform-origin:75% 37%}

/* V228 lightweight */
.v138-jelly-test.v228-pooled{contain:layout style paint;}
.v138-jelly-test .v228-tseg,
.v138-jelly-test .v228-gel-oral,
.v138-jelly-test .v228-gel-bell{
 filter:none!important;
 mix-blend-mode:normal!important;
}

/* V228 — tentacle gather/release synchronized with bell breathing */
.v138-jelly-test .v228-tseg{
  will-change:transform;
}

/* V228 — coordinated whole-body swimming + slow mid-page fade */
.v138-jelly-test.v228-pooled{opacity:1;will-change:transform,opacity;}

/* V228 — night jelly: transparent gel, big/small cycle, multi-instance */
.v138-jelly-test.v228-pooled{
  will-change:transform,opacity;
  contain:layout style paint;
}
.v138-jelly-test.v228-big{
  width:clamp(150px,43vw,260px)!important;
  height:clamp(300px,86vw,520px)!important;
}
.v138-jelly-test.v228-small{
  width:clamp(92px,27vw,160px)!important;
  height:clamp(184px,54vw,320px)!important;
}
.v138-jelly-test .v228-gel-bell{opacity:.88!important}
.v138-jelly-test .v228-gel-oral{opacity:.72!important}
.v138-jelly-test .v228-tseg{opacity:.68!important}

/* V228 — softer transparent gel + calmer realistic motion */
.v138-jelly-test .v228-gel-bell{
  opacity:.76!important;
}
.v138-jelly-test .v228-gel-oral{
  opacity:.55!important;
}
.v138-jelly-test .v228-tseg{
  opacity:.46!important;
}
.v138-jelly-test.v228-pooled{
  will-change:transform,opacity;
}

/* V228 — continuous rise from middle to top while fading */
.v138-jelly-test.v228-pooled{
  will-change:transform,opacity;
}

/* V228 — higher-transparency gel, softer tentacles */
.v138-jelly-test .v228-gel-bell{opacity:.68!important;}
.v138-jelly-test .v228-gel-oral{opacity:.46!important;}
.v138-jelly-test .v228-tseg{opacity:.35!important;}
.v138-jelly-test.v228-pooled{
  will-change:transform,opacity;
  contain:layout style paint;
}

/* V228 — more transparent gel and softer tentacles */
.v138-jelly-test .v228-gel-bell{opacity:.60!important;}
.v138-jelly-test .v228-gel-oral{opacity:.38!important;}
.v138-jelly-test .v228-tseg{opacity:.27!important;}
.v138-jelly-test.v228-pooled{
  will-change:transform,opacity;
  contain:layout style paint;
}

/* V228 — balanced translucent gel */
.v138-jelly-test .v228-gel-bell{opacity:.60!important;}
.v138-jelly-test .v228-gel-oral{opacity:.37!important;}
.v138-jelly-test .v228-tseg{opacity:.26!important;}
.v138-jelly-test.v228-pooled{
  will-change:transform,opacity;
  contain:layout style paint;
}

/* V228 FINAL — iOS/Android consistency + mobile stability */
.v138-jelly-test.v228-pooled{
  pointer-events:none!important;
  transform-origin:50% 50%;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  will-change:transform,opacity;
  contain:layout style paint;
}
.v138-jelly-test .v228-gel-bell{opacity:.60!important;}
.v138-jelly-test .v228-gel-oral{opacity:.37!important;}
.v138-jelly-test .v228-tseg{opacity:.26!important;}
@supports (height:100dvh){
  .v138-jelly-test.v228-pooled{
    max-height:100dvh;
  }
}

/* V228 LIGHT FINAL — mobile-safe geometric entrance and gel balance */
.v138-jelly-test.v228-pooled{
  pointer-events:none!important;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  will-change:transform,opacity;
  contain:layout style paint;
  filter:none!important;
  -webkit-filter:none!important;
  mix-blend-mode:normal!important;
}
.v138-jelly-test .v228-gel-bell{opacity:.60!important;}
.v138-jelly-test .v228-gel-oral{opacity:.36!important;}
.v138-jelly-test .v228-tseg{opacity:.25!important;}

/* =========================================================
   V228 FINAL LIGHT — real container fade + exact-tap spawn
   This rule intentionally overrides historical opacity:1!important.
   ========================================================= */
.v138-jelly-test.v228-pooled{
  opacity:var(--v228-opacity,1)!important;
  transition:none!important;
  pointer-events:none!important;
  filter:none!important;
  -webkit-filter:none!important;
  mix-blend-mode:normal!important;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  will-change:transform,opacity;
  contain:layout style paint;
}

/* =========================================================
   V228 — daytime rose-garden homepage
   Full-screen, no stretching; iPhone 14 / Xiaomi 14 Ultra safe.
   ========================================================= */
.day-garden-scenes,
.day-butterfly-stage{
  position:absolute;
  inset:0;
}
.day-garden-scenes{
  z-index:0;
  overflow:hidden;
  background:#f4d9b9;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
.fireworks-intro[data-home-period="butterfly"] .day-garden-scenes{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}
.day-garden-slide{
  position:absolute;
  inset:0;
  opacity:0;
  visibility:hidden;
  transition:opacity 1.6s ease;
  will-change:opacity;
}
.day-garden-slide.no-transition{transition:none}
.day-garden-slide.is-active{
  opacity:1;
  visibility:visible;
}
.day-garden-slide img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:50% 50%;
  user-select:none;
  -webkit-user-drag:none;
  transform:translateZ(0);
}
.day-butterfly-stage{
  z-index:3;
  overflow:hidden;
  pointer-events:none;
  opacity:0;
  visibility:hidden;
}
.fireworks-intro[data-home-period="butterfly"] .day-butterfly-stage{
  opacity:1;
  visibility:visible;
}

/* Day scene hides night-only atmosphere but preserves mailbox/music controls. */
.fireworks-intro[data-home-period="butterfly"] #oceanSceneCarousel,
.fireworks-intro[data-home-period="butterfly"] .ocean-scene-arrows,
.fireworks-intro[data-home-period="butterfly"] .ocean-scene-dots,
.fireworks-intro[data-home-period="butterfly"] .fireworks-nebula,
.fireworks-intro[data-home-period="butterfly"] .fireworks-meteors,
.fireworks-intro[data-home-period="butterfly"] .fireworks-twinkles,
.fireworks-intro[data-home-period="butterfly"] #livingJellyStage,
.fireworks-intro[data-home-period="butterfly"] #fireworksCanvas{
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
}

/* Keep controls above daytime art. */
.fireworks-intro[data-home-period="butterfly"] .mailbox-entry-v105,
.fireworks-intro[data-home-period="butterfly"] .ocean-player,
.fireworks-intro[data-home-period="butterfly"] .love-letter-v105{
  z-index:20;
}

/* Tall phones: preserve people/fox while filling 19.5:9 / 20:9 screens.
   No fixed crop; object-fit keeps original ratio. */
@media (max-aspect-ratio: 10/19){
  .day-garden-slide img{object-position:50% 50%}
}
@supports (height:100dvh){
  .day-garden-scenes,.day-butterfly-stage{height:100dvh}
}

/* =========================================================
   V228 — realistic lightweight butterfly construction
   Two independent wings + fixed body; GPU transforms only.
   ========================================================= */
.v228-butterfly{
  --bf-size:48px;
  position:absolute;
  left:0; top:0;
  width:var(--bf-size);
  height:calc(var(--bf-size)*.78);
  pointer-events:none;
  z-index:1;
  perspective:180px;
  transform-style:preserve-3d;
  transform-origin:50% 55%;
  will-change:transform,opacity;
  contain:layout style paint;
}
.v228-wing,
.v228-body{
  position:absolute;
  inset:0;
  transform-style:preserve-3d;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
.v228-wing{
  will-change:transform;
}
.v228-wing img,
.v228-body img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  max-width:none;
  user-select:none;
  -webkit-user-drag:none;
  pointer-events:none;
}
.v228-wing-left{
  transform-origin:49% 55%;
  clip-path:inset(0 50% 0 0);
  -webkit-clip-path:inset(0 50% 0 0);
}
.v228-wing-right{
  transform-origin:51% 55%;
  clip-path:inset(0 0 0 50%);
  -webkit-clip-path:inset(0 0 0 50%);
}
.v228-body{
  z-index:3;
  clip-path:inset(0 46% 0 46%);
  -webkit-clip-path:inset(0 46% 0 46%);
  transform:translateZ(1px);
}
@media (prefers-reduced-motion:reduce){
  .v228-wing-left{transform:rotateY(28deg)!important}
  .v228-wing-right{transform:rotateY(-28deg)!important}
}

/* V228 natural garden integration */
.v228-butterfly{
  opacity:.94;
}
.v228-butterfly .v228-wing img,
.v228-butterfly .v228-body img{
  image-rendering:auto;
}

/* V228 daytime garden navigation */
.day-garden-arrow{
  position:absolute;
  top:50%;
  z-index:40;
  width:40px;
  height:56px;
  margin-top:-28px;
  border:0;
  border-radius:20px;
  background:rgba(255,255,255,.42);
  color:rgba(80,60,40,.78);
  font-size:34px;
  line-height:52px;
  text-align:center;
  padding:0;
  -webkit-tap-highlight-color:transparent;
  backdrop-filter:none;
  box-shadow:0 2px 10px rgba(50,30,20,.10);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
.day-garden-prev{left:max(8px,env(safe-area-inset-left));}
.day-garden-next{right:max(8px,env(safe-area-inset-right));}
.fireworks-intro[data-home-period="butterfly"] .day-garden-arrow{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}
.day-garden-arrow:active{transform:scale(.94);}

/* V228 — only a clean chevron, no circular/filled button */
.day-garden-arrow{
  width:34px!important;height:64px!important;margin-top:-32px!important;
  padding:0!important;border:0!important;border-radius:0!important;
  background:transparent!important;box-shadow:none!important;
  color:rgba(255,255,255,.96)!important;
  font-family:Arial,sans-serif!important;font-size:46px!important;font-weight:300!important;
  line-height:60px!important;text-shadow:0 1px 5px rgba(40,30,20,.52)!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
}
.day-garden-arrow:active{transform:scale(.88)!important;}
.fireworks-intro[data-home-period="butterfly"] #dayButterflyStage{
  display:block!important;opacity:1!important;visibility:visible!important;
  z-index:12!important;pointer-events:none!important;
}
.v228-butterfly{z-index:2!important;opacity:1!important;}
.v206-butterfly,.v207-butterfly,.v208-butterfly,.v209-butterfly,.v210-butterfly{display:none!important;}

.fireworks-intro[data-home-period="butterfly"] #dayButterflyStage{
  display:block!important;opacity:1!important;visibility:visible!important;z-index:18!important;pointer-events:none!important;
}
.v228-morpho{
  --bf-size:50px;position:absolute;left:0;top:0;width:var(--bf-size);height:calc(var(--bf-size)*.76);
  pointer-events:none;transform-style:preserve-3d;perspective:220px;transform-origin:50% 52%;
  will-change:transform,opacity;contain:layout style paint;
}
.v228-wing,.v228-body{position:absolute;inset:0;transform-style:preserve-3d;backface-visibility:hidden;-webkit-backface-visibility:hidden;}
.v228-wing{will-change:transform;}
.v228-wing img,.v228-body img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;max-width:none;pointer-events:none;user-select:none;-webkit-user-drag:none;}
.v228-left{transform-origin:49% 51%;clip-path:inset(0 50% 0 0);-webkit-clip-path:inset(0 50% 0 0);}
.v228-right{transform-origin:51% 51%;clip-path:inset(0 0 0 50%);-webkit-clip-path:inset(0 0 0 50%);}
.v228-body{z-index:3;clip-path:inset(0 45% 0 45%);-webkit-clip-path:inset(0 45% 0 45%);transform:translateZ(1px);}
.day-garden-arrow{background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;}

/* V228 keeps the single Morpho visible above the garden */
.fireworks-intro[data-home-period="butterfly"] .v228-morpho{
  display:block!important;
  visibility:visible!important;
}

.fireworks-intro[data-home-period="butterfly"] .v228-morpho{display:block!important;visibility:visible!important;}

.fireworks-intro[data-home-period="butterfly"] .v228-morpho{
  display:block!important;
  visibility:visible!important;
}

.fireworks-intro[data-home-period="butterfly"] .v228-morpho{
  display:block!important;
  visibility:visible!important;
  will-change:transform,opacity;
}


/* V228 performance tuning */
.day-butterfly-stage,.living-jelly-stage,#fireworksCanvas{
  contain:layout paint style;
}
.day-butterfly-stage>*,
.living-jelly-stage>*{
  will-change:transform,opacity;
  backface-visibility:hidden;
}
@media (prefers-reduced-motion: reduce){
  .day-butterfly-stage>*,.living-jelly-stage>*{will-change:auto}
}

/* V228 verified iPhone14 + Xiaomi14Ultra compatibility */
html,body{min-height:100%;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{min-height:100vh;min-height:100dvh;overscroll-behavior-y:none}
.fireworks-intro,.day-garden-scenes,.day-butterfly-stage,.living-jelly-stage{min-height:100vh;min-height:100dvh}
button,a,[role="button"]{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
@supports(padding:max(0px)){body{padding-bottom:env(safe-area-inset-bottom)}}

/* =========================================================
   V228 THREE-THEME + MOBILE VISUAL FIXES — authoritative tail
   ========================================================= */
/* Remove the old always-midnight visual lock. The JS coordinator controls visibility. */
.fireworks-intro[data-home-period="fireworks"] #oceanSceneCarousel,
.fireworks-intro[data-home-period="jelly"] #oceanSceneCarousel{
  opacity:1!important;visibility:visible!important;pointer-events:auto!important;
}
.fireworks-intro[data-home-period="fireworks"] #fireworksCanvas{
  opacity:1!important;visibility:visible!important;pointer-events:none!important;
  z-index:6!important;
}
.fireworks-intro[data-home-period="fireworks"] #livingJellyStage{
  opacity:0!important;visibility:hidden!important;pointer-events:none!important;
}
.fireworks-intro[data-home-period="jelly"] #fireworksCanvas{
  opacity:0!important;visibility:hidden!important;pointer-events:none!important;
}
.fireworks-intro[data-home-period="jelly"] #livingJellyStage{
  opacity:1!important;visibility:visible!important;pointer-events:none!important;
  z-index:7!important;
}
.fireworks-intro[data-home-period="fireworks"] .day-garden-scenes,
.fireworks-intro[data-home-period="fireworks"] .day-butterfly-stage,
.fireworks-intro[data-home-period="jelly"] .day-garden-scenes,
.fireworks-intro[data-home-period="jelly"] .day-butterfly-stage{
  opacity:0!important;visibility:hidden!important;pointer-events:none!important;
}
.fireworks-intro[data-home-period="fireworks"] .v114-scene-fit,
.fireworks-intro[data-home-period="jelly"] .v114-scene-fit{
  width:100%!important;height:100%!important;display:block!important;
  object-fit:cover!important;object-position:50% 50%!important;
}
/* The old .is-midnight composition adjustment only applies to 23:00-07:00. */
.fireworks-intro[data-home-period="fireworks"] .fireworks-scenes .fireworks-scene{
  object-position:50% 50%!important;
}

/* Write-paper picker: show the ENTIRE four-paper artwork instead of cover-cropping it. */
html body.writer-body main#paperPicker.pure-picker{
  height:auto!important;min-height:100dvh!important;max-height:none!important;
  overflow-x:hidden!important;overflow-y:auto!important;
  -webkit-overflow-scrolling:touch!important;touch-action:pan-y!important;
}
html body.writer-body main#paperPicker.pure-picker > img:first-child{
  position:relative!important;inset:auto!important;display:block!important;
  width:100%!important;height:auto!important;min-height:0!important;max-height:none!important;
  object-fit:contain!important;object-position:center top!important;
}
/* Also make any individual stationery preview image use contain, never crop. */
html body.writer-body .stationery-reference-image{
  object-fit:contain!important;object-position:center!important;background:#06152a!important;
}
html body.writer-body .writer-select-stage .paper-swatch{
  overflow:hidden!important;clip-path:none!important;
}

/* Chat: keep the 瑞 role button safely inside the right edge on iPhone/Android.
   Extra ID specificity intentionally beats older injected mobile rules. */
html body #roleSwitch#roleSwitch{
  position:absolute!important;left:auto!important;
  right:max(22px,calc(env(safe-area-inset-right,0px) + 16px))!important;
  top:50%!important;transform:translateY(-50%)!important;
  margin:0!important;
}
@media(max-width:390px){
  html body #roleSwitch#roleSwitch{
    left:auto!important;
    right:max(20px,calc(env(safe-area-inset-right,0px) + 14px))!important;
  }
}

/* Preserve the earlier requested About Us cleanup on this V228-only build. */
.ours-page{
  width:min(100%,620px)!important;
  padding-inline:0!important;
  padding-bottom:max(112px,calc(92px + env(safe-area-inset-bottom)))!important;
}
.ours-portrait{
  margin:0!important;overflow:visible!important;border:0!important;border-radius:0!important;
  background:transparent!important;box-shadow:none!important;
}
.ours-portrait img{
  display:block!important;width:100%!important;height:auto!important;max-height:none!important;min-height:0!important;
  aspect-ratio:auto!important;object-fit:contain!important;object-position:center!important;
  background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;transform:none!important;
}
.ours-portrait>div{
  margin:0!important;padding:12px 16px 14px!important;border:0!important;border-radius:0!important;
  box-shadow:none!important;background:linear-gradient(180deg,rgba(6,38,72,.98),rgba(5,30,61,.99))!important;
}
.ours-message{
  position:relative!important;margin:0 22px 16px!important;padding:22px 4px 18px!important;
  border:0!important;border-radius:0!important;color:rgba(246,229,188,.94)!important;
  background:transparent!important;box-shadow:none!important;outline:0!important;
}
.ours-message p{
  margin:0!important;padding:0!important;color:rgba(246,229,188,.94)!important;background:transparent!important;
}
.ours-message::before,.ours-message::after,.ours-seal{
  display:none!important;content:none!important;
}
.writer-body .writer-compose-stage .shared-paper{
  background-size:contain!important;background-position:center top!important;background-repeat:no-repeat!important;
}
@media(max-width:430px){.ours-message{margin-inline:18px!important;padding-top:18px!important}}

/* =========================================================
   V228 F4 — screenshot-targeted fixes (2026-08-31)
   1) fireworks must render above the theme artwork
   2) paper picker gets breathing room at the top
   3) selected stationery artwork is never cover-cropped
   4) chat back + 瑞 controls stay fully tappable inside safe area
   ========================================================= */

/* Fireworks: the image carousel is the background; canvas is always the visual FX layer. */
.fireworks-intro[data-home-period="fireworks"] #oceanSceneCarousel,
.fireworks-intro[data-home-period="fireworks"] .scene-v105,
.fireworks-intro[data-home-period="fireworks"] .scene-direct-v103,
.fireworks-intro[data-home-period="fireworks"] .fireworks-scenes{
  z-index:0!important;
}
.fireworks-intro[data-home-period="fireworks"] #fireworksCanvas,
.fireworks-intro[data-home-period="fireworks"] canvas.fireworks-canvas{
  display:block!important;
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  opacity:1!important;
  visibility:visible!important;
  z-index:33!important;
  pointer-events:none!important;
  mix-blend-mode:screen!important;
  filter:none!important;
  transform:translateZ(0)!important;
}
/* Keep real controls above the effect layer. */
.fireworks-intro[data-home-period="fireworks"] .ocean-player,
.fireworks-intro[data-home-period="fireworks"] .ocean-scene-arrows,
.fireworks-intro[data-home-period="fireworks"] .ocean-scene-arrows-v105,
.fireworks-intro[data-home-period="fireworks"] .fireworks-actions,
.fireworks-intro[data-home-period="fireworks"] .love-letter-v105{
  z-index:45!important;
}

/* Paper picker screenshot: do not glue the 4-paper artwork to the browser/header edge. */
html body.writer-body main#paperPicker.pure-picker{
  box-sizing:border-box!important;
  padding-top:max(24px,calc(env(safe-area-inset-top,0px) + 14px))!important;
  padding-left:0!important;
  padding-right:0!important;
  padding-bottom:max(34px,calc(env(safe-area-inset-bottom,0px) + 24px))!important;
  scroll-padding-top:max(24px,calc(env(safe-area-inset-top,0px) + 14px))!important;
}
html body.writer-body main#paperPicker.pure-picker > img:first-child{
  width:100%!important;
  height:auto!important;
  max-width:100%!important;
  object-fit:contain!important;
  object-position:center top!important;
}

/* Selected writing paper: preserve the complete illustration instead of zooming/cropping it. */
html body.writer-body .writer-compose-stage .shared-paper,
html body.writer-body .shared-paper{
  box-sizing:border-box!important;
  width:calc(100% - 16px)!important;
  max-width:720px!important;
  margin:12px auto max(30px,env(safe-area-inset-bottom))!important;
  min-height:clamp(700px,145vw,1080px)!important;
  height:auto!important;
  background-size:contain!important;
  background-repeat:no-repeat!important;
  background-position:center top!important;
  overflow:visible!important;
}
@media(max-width:430px){
  html body.writer-body .writer-compose-stage .shared-paper,
  html body.writer-body .shared-paper{
    width:calc(100% - 12px)!important;
    min-height:clamp(690px,151vw,900px)!important;
    margin-top:14px!important;
    padding-top:54px!important;
    padding-left:26px!important;
    padding-right:26px!important;
    padding-bottom:170px!important;
  }
}

/* Chat screenshot: pull 瑞 inward and make both header controls win every old mobile rule. */
html body #roleSwitch#roleSwitch{
  z-index:120!important;
  left:auto!important;
  right:max(34px,calc(env(safe-area-inset-right,0px) + 26px))!important;
  top:50%!important;
  transform:translateY(-50%)!important;
  pointer-events:auto!important;
  touch-action:manipulation!important;
}
html body #roleBadge#roleBadge{
  position:relative!important;
  right:auto!important;
  transform:none!important;
  pointer-events:auto!important;
}
html body .chat-back{
  z-index:121!important;
  position:relative!important;
  pointer-events:auto!important;
  touch-action:manipulation!important;
  -webkit-tap-highlight-color:transparent!important;
}
@media(max-width:390px){
  html body #roleSwitch#roleSwitch{
    right:max(30px,calc(env(safe-area-inset-right,0px) + 22px))!important;
  }
}


/* =========================================================
   V228 F5 — screenshot correction authority tail
   ========================================================= */
html body #roleSwitch#roleSwitch{
  left:auto!important;
  right:max(42px,calc(env(safe-area-inset-right,0px) + 32px))!important;
  margin-right:0!important;
  pointer-events:auto!important;
  z-index:9998!important;
}
@media(max-width:390px){html body #roleSwitch#roleSwitch{left:auto!important;right:max(38px,calc(env(safe-area-inset-right,0px) + 28px))!important}}
html body #v237ChatBack,html body .chat-back{pointer-events:auto!important;touch-action:manipulation!important;z-index:9999!important}
html body.writer-body .pure-compose{padding-top:max(38px,calc(env(safe-area-inset-top,0px) + 24px))!important;overflow-x:hidden!important;overflow-y:visible!important}
html body.writer-body .pure-sheet{width:min(calc(100% - 16px),520px)!important;height:auto!important;min-height:0!important;margin:0 auto!important;overflow:visible!important;transform:none!important}
html body.writer-body .pure-sheet>img#paperImage{position:relative!important;inset:auto!important;display:block!important;width:100%!important;height:auto!important;min-height:0!important;max-height:none!important;object-fit:contain!important;object-position:center top!important;transform:none!important}


/* =========================================================
   V228 F7 — Android/Xiaomi vertical-scroll repair ONLY.
   Deliberately scoped to html.is-android so iPhone/Safari CSS is untouched.
   ========================================================= */
html.is-android,
html.is-android body{
  height:auto!important;
  min-height:100%!important;
  max-height:none!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  overscroll-behavior-y:auto!important;
  touch-action:pan-y!important;
  -webkit-overflow-scrolling:touch!important;
}
/* 信箱：进入信箱后让文档和信箱列表自然纵向滚动。 */
html.is-android body.mailbox-body:not(.intro-open),
html.is-android body.mailbox-body:not(.intro-open) #mailboxHome,
html.is-android body.mailbox-body:not(.intro-open) .mailbox-poster-page,
html.is-android body.mailbox-body:not(.intro-open) .mailbox-home{
  height:auto!important;
  min-height:100dvh!important;
  max-height:none!important;
  overflow-x:hidden!important;
  overflow-y:visible!important;
  touch-action:pan-y!important;
  -webkit-overflow-scrolling:touch!important;
}
/* 回忆 / 关于我们：解除旧版 fixed-height/overflow 锁定。 */
html.is-android body.starlight-subpage-body,
html.is-android body.starlight-subpage-body .starlight-subpage,
html.is-android body.starlight-subpage-body .memory-timeline,
html.is-android body.starlight-subpage-body .ours-page{
  position:relative!important;
  height:auto!important;
  min-height:100dvh!important;
  max-height:none!important;
  overflow-x:hidden!important;
  overflow-y:visible!important;
  touch-action:pan-y!important;
  -webkit-overflow-scrolling:touch!important;
}
/* 写信：只在 Android 再加一层滚动兜底；不覆盖现有信纸定位。 */
html.is-android body.writer-body,
html.is-android body.writer-body .pure-picker,
html.is-android body.writer-body .pure-compose,
html.is-android body.writer-body .pure-sent{
  height:auto!important;
  min-height:100dvh!important;
  max-height:none!important;
  overflow-x:hidden!important;
  touch-action:pan-y!important;
  -webkit-overflow-scrolling:touch!important;
}
html.is-android body.writer-body{overflow-y:auto!important}
html.is-android body.writer-body .pure-picker,
html.is-android body.writer-body .pure-compose,
html.is-android body.writer-body .pure-sent{overflow-y:visible!important}

/* =========================================================
   V228 F8 — Xiaomi/Android only: Memories + About Us scrolling.
   Activated only by Android runtime class; iPhone rules unchanged.
   ========================================================= */
html.is-android-subpage-scroll,
html.is-android-subpage-scroll body.starlight-subpage-body{
  position:static!important;
  height:auto!important;
  min-height:100%!important;
  max-height:none!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  touch-action:pan-y!important;
  -webkit-overflow-scrolling:touch!important;
  overscroll-behavior-y:auto!important;
}
html.is-android-subpage-scroll body.starlight-subpage-body .starlight-subpage,
html.is-android-subpage-scroll body.starlight-subpage-body .memory-timeline,
html.is-android-subpage-scroll body.starlight-subpage-body .memory-month,
html.is-android-subpage-scroll body.starlight-subpage-body .ours-page{
  position:relative!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  overflow-x:hidden!important;
  overflow-y:visible!important;
  touch-action:pan-y!important;
  -webkit-overflow-scrolling:touch!important;
}
html.is-android-subpage-scroll body.starlight-subpage-body .starlight-subpage{
  min-height:calc(100dvh + 1px)!important;
  padding-bottom:max(132px,calc(104px + env(safe-area-inset-bottom)))!important;
}


/* V228 F10 — 回忆唱片机页，仅作用于 memories.php */
body.memories-gramophone-page{
  margin:0;
  min-height:100dvh;
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior-y:auto;
  -webkit-overflow-scrolling:touch;
  background:#061326;
}
.memories-gramophone-shell{
  position:relative;
  width:100%;
  min-height:100dvh;
  padding:0 0 calc(88px + env(safe-area-inset-bottom,0px));
}
.memories-gramophone-art{
  position:relative;
  width:100%;
  max-width:520px;
  margin:0 auto;
  line-height:0;
}
.memories-gramophone-art>img{
  display:block;
  width:100%;
  height:auto;
  user-select:none;
  -webkit-user-select:none;
  -webkit-touch-callout:none;
}
.memories-record-button{
  position:absolute;
  left:53.2%;
  top:67%;
  width:94px;
  height:94px;
  transform:translate(-50%,-50%);
  padding:0;
  border:0;
  border-radius:50%;
  color:#fff8df;
  background:rgba(8,10,18,.16);
  box-shadow:0 0 0 1px rgba(255,217,132,.10),0 0 22px rgba(255,195,93,.08);
  display:grid;
  place-items:center;
  z-index:3;
  cursor:pointer;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}
.memories-record-ring{
  position:absolute;
  inset:11px;
  border:1px solid rgba(255,218,139,.24);
  border-radius:50%;
  opacity:.34;
}
.memories-record-state{
  position:relative;
  z-index:1;
  width:40px;
  height:40px;
  border-radius:50%;
  display:grid;
  place-items:center;
  font:600 18px/1 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:#fff5d2;
  background:rgba(5,8,17,.48);
  border:1px solid rgba(255,231,173,.58);
  box-shadow:0 0 18px rgba(255,192,82,.20);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}
.memories-record-button.is-playing .memories-record-ring{
  animation:v228F10RecordSpin 3.8s linear infinite;
  opacity:.72;
  border-style:dashed;
}
.memories-record-button.is-playing .memories-record-state{
  background:rgba(92,54,20,.46);
}
@keyframes v228F10RecordSpin{to{transform:rotate(360deg)}}

@media (max-width:430px){
  .memories-gramophone-art{max-width:none}
  .memories-record-button{
    width:82px;height:82px;left:53.2%;top:67%;
  }
  .memories-record-state{width:36px;height:36px;font-size:16px}
}

/* 只给 Android 保留回忆页纵向滑动保险；不覆盖 iPhone */
html.is-android body.memories-gramophone-page{
  height:auto!important;
  min-height:100dvh!important;
  overflow-y:auto!important;
  touch-action:pan-y!important;
}
html.is-android body.memories-gramophone-page .memories-gramophone-shell{
  height:auto!important;
  overflow:visible!important;
  touch-action:pan-y!important;
}

/* V228 F11 回忆页八首歌简易播放器 */
.memories-player{position:relative;z-index:5;width:min(calc(100% - 24px),496px);margin:-2px auto 12px;padding:13px 14px 14px;border:1px solid rgba(255,220,158,.22);border-radius:22px;background:linear-gradient(180deg,rgba(7,15,34,.78),rgba(4,10,24,.92));box-shadow:0 12px 30px rgba(0,0,0,.24);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);color:#f9e6bd}
.memories-now{display:grid;grid-template-columns:46px minmax(0,1fr) 46px;align-items:center;gap:8px}
.memories-song-meta{text-align:center;min-width:0}.memories-song-name{font:500 16px/1.25 Georgia,"Times New Roman",serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.memories-song-sub{margin-top:3px;font-size:11px;opacity:.58}
.memories-icon-btn,.memories-controls button,.memories-playlist-head button{border:0;background:transparent;color:#f8e3b9;min-width:44px;min-height:44px;font-size:24px;touch-action:manipulation}.memories-icon-btn.is-fav{color:#ffd27d}
.memories-progress-row{display:grid;grid-template-columns:38px minmax(0,1fr) 38px;align-items:center;gap:7px;font-size:11px;color:rgba(249,230,189,.72)}
#memoriesProgress{width:100%;accent-color:#f0c36e}
.memories-controls{display:flex;justify-content:center;align-items:center;gap:24px;margin-top:2px}.memories-controls button{font-size:19px}.memories-controls .memories-main-play{width:54px;height:54px;border:1px solid rgba(255,232,187,.8);border-radius:50%;font-size:20px;background:rgba(255,221,151,.08);box-shadow:0 0 18px rgba(246,194,95,.14)}
.memories-playlist{position:absolute;left:0;right:0;bottom:0;transform:translateY(2px);max-height:330px;overflow:auto;padding:12px;border-radius:22px;background:rgba(5,11,26,.97);border:1px solid rgba(255,220,158,.24);box-shadow:0 -12px 35px rgba(0,0,0,.38)}
.memories-playlist-head{display:flex;align-items:center;justify-content:space-between;padding:0 4px 6px;font-size:14px}.memories-track{width:100%;display:grid;grid-template-columns:28px minmax(0,1fr) 28px;align-items:center;gap:8px;min-height:48px;padding:6px 8px;border:0;border-top:1px solid rgba(255,255,255,.06);background:transparent;color:#f5dfb5;text-align:left}.memories-track strong{font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.memories-track span,.memories-track em{font-size:11px;opacity:.6;font-style:normal}.memories-track.is-current{background:rgba(240,195,110,.08);border-radius:12px}
@media(max-width:430px){.memories-player{width:calc(100% - 20px);padding:11px 12px 12px}.memories-song-name{font-size:15px}.memories-controls{gap:20px}}

/* F12 transparent player + visible rotating vinyl */
.memories-record-ring{display:none!important}.memories-record-button{background:transparent!important;box-shadow:none!important}
.memories-vinyl{position:absolute;left:53.2%;top:67%;z-index:2;width:31%;aspect-ratio:1/.43;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(ellipse at center,#28150d 0 4%,#d87731 5% 16%,#171313 17% 24%,#07090c 25% 100%);box-shadow:inset 0 0 0 1px rgba(255,225,174,.12);pointer-events:none;overflow:hidden}
.memories-vinyl:before{content:"";position:absolute;inset:5%;border-radius:50%;background:repeating-radial-gradient(ellipse at center,transparent 0 3px,rgba(255,255,255,.055) 4px,transparent 5px)}
.memories-vinyl-label{position:absolute;left:50%;top:50%;width:34%;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle,#24150e 0 7%,#df8538 8% 74%,#74371d 75% 100%)}
.memories-vinyl-label:after{content:"";position:absolute;left:52%;top:17%;width:2px;height:31%;background:rgba(255,239,190,.75)}
.memories-vinyl.is-playing{animation:f12vinyl 3.6s linear infinite}@keyframes f12vinyl{to{transform:translate(-50%,-50%) rotate(360deg)}}
.memories-player{width:min(calc(100% - 28px),492px)!important;margin:-8px auto 8px!important;padding:10px 12px 12px!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
.memories-song-name{font-size:16px!important;color:#f7dfae}.memories-song-sub{font-size:10px!important;opacity:.5}.memories-controls{margin-top:-1px!important;gap:26px!important}.memories-controls .memories-main-play{width:50px!important;height:50px!important;background:transparent!important;border:1px solid rgba(255,229,176,.68)!important;box-shadow:none!important}.memories-icon-btn,.memories-controls button{color:#f7dfae!important}.memories-playlist{background:rgba(4,10,24,.92)!important;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
@media(max-width:430px){.memories-vinyl{width:31.5%}.memories-player{width:calc(100% - 22px)!important;padding-left:8px!important;padding-right:8px!important}}

/* V228 F13 — platter-correct vinyl: fixed ellipse inside the gramophone, only grooves/label rotate */
.memories-vinyl{
  left:50.0%!important;top:67.25%!important;z-index:2!important;
  width:43.5%!important;aspect-ratio:1/1!important;
  transform:translate(-50%,-50%) scaleY(.285)!important;
  border-radius:50%!important;background:transparent!important;
  box-shadow:none!important;overflow:hidden!important;pointer-events:none!important;
}
.memories-vinyl:before{display:none!important}
.memories-vinyl-disc{
  position:absolute;inset:0;border-radius:50%;display:block;
  background:
    repeating-radial-gradient(circle at center,transparent 0 5px,rgba(255,255,255,.055) 6px,transparent 7px),
    radial-gradient(circle at center,#24150e 0 3%,#dc7e34 3.5% 13%,#6e341c 13.5% 15%,#0a0b0d 15.5% 100%);
  box-shadow:inset 0 0 0 1px rgba(255,225,174,.10);
  transform:rotate(0deg);transform-origin:50% 50%;will-change:transform;
}
.memories-vinyl-label{
  position:absolute;left:50%;top:50%;width:24%;height:24%;border-radius:50%;
  transform:translate(-50%,-50%) scaleY(3.51); /* undo parent flatten for label artwork */
  background:radial-gradient(circle,#25160f 0 8%,#db7d34 9% 72%,#6e331d 73% 100%);
}
.memories-vinyl-label:after{content:"";position:absolute;left:50%;top:50%;width:5px;height:5px;border-radius:50%;background:#24160f;transform:translate(-50%,-50%)}
.memories-vinyl.is-playing{animation:none!important}
.memories-vinyl.is-playing .memories-vinyl-disc{animation:f13discspin 3.8s linear infinite!important}
@keyframes f13discspin{to{transform:rotate(360deg)}}
.memories-record-button{left:50%!important;top:67.25%!important;width:14%!important;aspect-ratio:1/1!important}
.memories-record-state{transform:scaleY(1)!important}


/* V228 F14 — music controls live INSIDE the artwork, at the lower-middle area. */
.memories-gramophone-art{position:relative!important;overflow:hidden!important}
.memories-gramophone-art>.memories-player{
  position:absolute!important;
  left:50%!important;
  bottom:4.8%!important;
  transform:translateX(-50%)!important;
  z-index:12!important;
  width:min(90%,470px)!important;
  margin:0!important;
  padding:6px 8px 8px!important;
  border:0!important;
  border-radius:0!important;
  background:linear-gradient(180deg,rgba(4,10,24,0),rgba(4,10,24,.18))!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
.memories-gramophone-art>.memories-player .memories-song-name{font-size:15px!important;line-height:1.15!important;text-shadow:0 1px 7px rgba(0,0,0,.82)!important}
.memories-gramophone-art>.memories-player .memories-song-sub{display:none!important}
.memories-gramophone-art>.memories-player .memories-now{grid-template-columns:42px minmax(0,1fr) 42px!important}
.memories-gramophone-art>.memories-player .memories-progress-row{margin-top:-2px!important;text-shadow:0 1px 5px rgba(0,0,0,.8)!important}
.memories-gramophone-art>.memories-player .memories-controls{margin-top:-5px!important;gap:22px!important}
.memories-gramophone-art>.memories-player .memories-controls .memories-main-play{width:46px!important;height:46px!important}
.memories-gramophone-art>.memories-player .memories-playlist{bottom:0!important;max-height:280px!important}
@media(max-width:430px){
 .memories-gramophone-art>.memories-player{bottom:4.2%!important;width:92%!important;padding:5px 6px 6px!important}
 .memories-gramophone-art>.memories-player .memories-song-name{font-size:14px!important}
 .memories-gramophone-art>.memories-player .memories-controls{gap:18px!important}
}
/* F14: keep night jelly above the scene and let taps be captured by the page. */
.fireworks-intro[data-home-period="jelly"] #livingJellyStage{z-index:18!important;opacity:1!important;visibility:visible!important}
.v138-jelly-test.v228-pooled{z-index:2!important}


/* ===== F15: EXACT V181 FINALIZED JELLY CSS RESTORE ===== */
/* =========================================================
   V137 — fix the actual zero-height DOM jelly container
   ========================================================= */
/* V129 only defined width on the absolutely-positioned jelly node. All descendants
   were absolute as well, so some mobile WebViews resolved the parent height to ~0px.
   The bell therefore rendered as a thin line. Give the jelly itself real geometry. */
.v129-jelly-big{
  aspect-ratio:1 / 2.08!important;
  height:auto!important;
  min-height:420px!important;
  overflow:visible!important;
}
.v129-jelly-small{
  aspect-ratio:1 / 2.08!important;
  height:auto!important;
  min-height:145px!important;
  overflow:visible!important;
}
.v129-jelly-big .v133-jelly-swimmer,
.v129-jelly-small .v133-jelly-swimmer{
  position:absolute!important;
  left:0!important;top:0!important;right:0!important;bottom:0!important;
  width:100%!important;height:100%!important;
  aspect-ratio:auto!important;
}
/* The standalone bell now has a nonzero percentage height on every browser. */
.v129-jelly-big .v134-bell-layer{
  left:0!important;
  top:0!important;
  width:100%!important;
  height:27%!important;
  min-height:112px!important;
  overflow:visible!important;
  z-index:8!important;
  opacity:1!important;
}
.v129-jelly-big .v136-bell-svg{
  position:absolute!important;
  left:0!important;top:0!important;
  width:100%!important;height:100%!important;
  display:block!important;
  overflow:visible!important;
}
/* For this bell-validation build, dim the old full-image bell and tentacle copies so
   the new membrane is unambiguous, while keeping enough body context to orient it. */
.v129-jelly-big .v129-jelly-main{opacity:.18!important;}
.v129-jelly-big .v131-tentacles-near{opacity:.12!important;}
.v129-jelly-big .v131-tentacles-far{opacity:.055!important;}
@media(max-width:430px){
  .v129-jelly-big{width:min(62vw,270px)!important;min-height:390px!important;bottom:-2vh!important;}
  .v129-jelly-big .v134-bell-layer{height:30%!important;min-height:116px!important;}
}

/* =========================================================
   V138 — isolated new jellyfish test mode
   Old purple/small jellyfish are paused. Tap spawns only this vector jellyfish.
   ========================================================= */
.v129-jelly{display:none!important;}
.v138-jelly-test{
  position:absolute;
  z-index:36;
  left:var(--v138-x,50%);
  bottom:-26vh;
  width:min(56vw,265px);
  height:auto;
  aspect-ratio:240 / 460;
  pointer-events:none;
  transform:translate3d(-50%,0,0);
  opacity:0;
  will-change:transform,opacity;
}
.v138-jelly-test.v138-live{
  animation:v138Rise 24s cubic-bezier(.19,.72,.22,1) forwards;
}
.v138-swimmer{
  position:absolute;inset:0;
  transform-origin:50% 24%;
  animation:v138Thrust 3.65s cubic-bezier(.25,.02,.16,1) var(--v138-phase,0s) infinite;
  will-change:transform;
}
.v138-jelly-svg{width:100%;height:100%;display:block;overflow:visible;filter:drop-shadow(0 0 7px rgba(164,126,255,.18));}
.v138-bell{transform-box:fill-box;transform-origin:50% 72%;animation:v138BellBreath 3.65s cubic-bezier(.24,.02,.14,1) var(--v138-phase,0s) infinite;will-change:transform;}
.v138-bell-fill{filter:drop-shadow(0 0 9px rgba(194,166,255,.24));}
.v138-bell-edge{fill:none;stroke:rgba(244,237,255,.62);stroke-width:1.25;stroke-linecap:round;vector-effect:non-scaling-stroke;}
.v138-bell-rim{fill:none;stroke:rgba(229,211,255,.52);stroke-width:1.1;stroke-linecap:round;vector-effect:non-scaling-stroke;animation:v138Rim 3.65s ease-in-out var(--v138-phase,0s) infinite;}
.v138-inner{transform-box:fill-box;transform-origin:50% 55%;animation:v138Inner 3.65s linear var(--v138-phase,0s) infinite;}
.v138-organ{fill:rgba(194,153,255,.38);}
.v138-ribs{fill:none;stroke:rgba(230,216,255,.30);stroke-width:1;stroke-linecap:round;vector-effect:non-scaling-stroke;}
.v138-arms,.v138-filaments{transform-box:fill-box;transform-origin:50% 0%;}
.v138-arm{fill:none;stroke-width:9;stroke-linecap:round;filter:drop-shadow(0 0 4px rgba(174,139,245,.17));transform-box:fill-box;transform-origin:50% 0%;}
.v138-arm-a{animation:v138ArmA 5.1s ease-in-out calc(var(--v138-phase,0s) - .4s) infinite;}
.v138-arm-b{animation:v138ArmB 5.8s ease-in-out calc(var(--v138-phase,0s) - 1.1s) infinite;}
.v138-arm-c{animation:v138ArmA 5.45s ease-in-out calc(var(--v138-phase,0s) - 1.8s) infinite reverse;}
.v138-arm-d{animation:v138ArmB 6.1s ease-in-out calc(var(--v138-phase,0s) - .8s) infinite reverse;}
.v138-filament{fill:none;stroke:rgba(220,202,255,.29);stroke-width:1.15;stroke-linecap:round;vector-effect:non-scaling-stroke;transform-box:fill-box;transform-origin:50% 0%;}
.v138-filament-a{animation:v138ThreadA 6.8s ease-in-out -.7s infinite}.v138-filament-b{animation:v138ThreadB 7.4s ease-in-out -2.1s infinite}.v138-filament-c{animation:v138ThreadA 6.1s ease-in-out -3.2s infinite reverse}.v138-filament-d{animation:v138ThreadB 7.1s ease-in-out -1.3s infinite reverse}.v138-filament-e{animation:v138ThreadA 6.6s ease-in-out -2.7s infinite}.v138-filament-f{animation:v138ThreadB 7.8s ease-in-out -.2s infinite reverse}
@keyframes v138BellBreath{
  0%,9%{transform:scaleX(1.07) scaleY(.94) translateY(1px)}
  38%,50%{transform:scaleX(1.11) scaleY(.91) translateY(3px)}
  60%{transform:scaleX(1.02) scaleY(1.01) translateY(-1px)}
  68%{transform:scaleX(.82) scaleY(1.18) translateY(-7px)}
  73%{transform:scaleX(.79) scaleY(1.22) translateY(-9px)}
  82%{transform:scaleX(.96) scaleY(1.05) translateY(-3px)}
  100%{transform:scaleX(1.07) scaleY(.94) translateY(1px)}
}
@keyframes v138Inner{0%,50%,100%{opacity:.58;transform:scale(1.05)}68%,74%{opacity:.88;transform:scale(.83)}}
@keyframes v138Rim{0%,50%,100%{opacity:.55;transform:scaleX(1)}70%{opacity:.86;transform:scaleX(.82)}}
@keyframes v138Thrust{0%,53%,100%{transform:translate3d(0,0,0) rotate(-.3deg)}69%{transform:translate3d(0,-8px,0) rotate(.5deg)}78%{transform:translate3d(1px,-12px,0) rotate(-.2deg)}}
@keyframes v138ArmA{0%,100%{transform:translateX(-1px) rotate(-1.2deg)}50%{transform:translateX(7px) rotate(2.6deg)}}
@keyframes v138ArmB{0%,100%{transform:translateX(2px) rotate(1deg)}50%{transform:translateX(-8px) rotate(-2.2deg)}}
@keyframes v138ThreadA{0%,100%{transform:translateX(-2px) rotate(-.7deg)}50%{transform:translateX(10px) rotate(2.3deg)}}
@keyframes v138ThreadB{0%,100%{transform:translateX(3px) rotate(.8deg)}50%{transform:translateX(-11px) rotate(-2.5deg)}}
@keyframes v138Rise{
  0%{opacity:.94;transform:translate3d(-50%,0,0)}
  3%{opacity:.98;transform:translate3d(calc(-50% + 2px),-8vh,0)}
  18%{opacity:1;transform:translate3d(calc(-50% + var(--v138-drift,0px)*.18),-25vh,0)}
  45%{opacity:.98;transform:translate3d(calc(-50% + var(--v138-drift,0px)*.55),-53vh,0)}
  73%{opacity:.94;transform:translate3d(calc(-50% + var(--v138-drift,0px)*.82),-82vh,0)}
  91%{opacity:.74;transform:translate3d(calc(-50% + var(--v138-drift,0px)),-105vh,0)}
  100%{opacity:0;transform:translate3d(calc(-50% + var(--v138-drift,0px)*1.08),-124vh,0)}
}
@media(max-width:430px){.v138-jelly-test{width:min(64vw,260px);bottom:-20vh}.v138-jelly-test.v138-live{animation-duration:22s}}

/* =========================================================
   V181 — three-membrane gelatinous bell + real umbrella contraction
   Test mode remains: taps spawn only the new jellyfish.
   ========================================================= */
.v138-jelly-test{z-index:42!important;width:min(61vw,286px)!important;filter:none!important;}
.v181-jelly-svg{filter:drop-shadow(0 0 10px rgba(156,115,245,.23))!important;}
.v181-bell{transform-box:fill-box;transform-origin:50% 78%;animation:v181Bell 3.72s cubic-bezier(.23,.02,.12,1) var(--v138-phase,0s) infinite;will-change:transform;}
.v181-bell-shadow{opacity:.96;filter:drop-shadow(0 0 10px rgba(189,153,255,.25));}
.v181-bell-gel{opacity:.91;mix-blend-mode:screen;}
.v181-bell-sheen{fill:rgba(255,252,255,.16);filter:blur(.45px);}
.v181-bell-sheen-r{opacity:.68;}
.v181-inner{transform-box:fill-box;transform-origin:50% 56%;animation:v181Inner 3.72s cubic-bezier(.23,.02,.12,1) var(--v138-phase,0s) infinite;}
.v181-core{opacity:.82;}
.v181-organ{fill:rgba(203,164,255,.52);filter:drop-shadow(0 0 4px rgba(205,168,255,.32));}
.v181-ribs{fill:none;stroke:rgba(239,228,255,.38);stroke-width:1.05;stroke-linecap:round;vector-effect:non-scaling-stroke;}
.v181-rim-band{opacity:.54;mix-blend-mode:screen;transform-box:fill-box;transform-origin:50% 50%;animation:v181RimBand 3.72s cubic-bezier(.2,.02,.13,1) var(--v138-phase,0s) infinite;}
.v181-rim-line{fill:none;stroke:rgba(255,250,255,.76);stroke-width:1.28;stroke-linecap:round;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 3px rgba(228,211,255,.35));}
.v181-edge-line{fill:none;stroke:rgba(250,245,255,.73);stroke-width:1.18;stroke-linecap:round;vector-effect:non-scaling-stroke;opacity:.90;}
.v181-arms,.v181-filaments{transform-box:fill-box;transform-origin:50% 0%;}
.v181-arm{fill:none;stroke-width:9.5;stroke-linecap:round;filter:drop-shadow(0 0 4px rgba(180,143,247,.19));transform-box:fill-box;transform-origin:50% 0%;opacity:.72;}
.v181-arm-a{animation:v181ArmA 5.15s ease-in-out -.35s infinite}.v181-arm-b{animation:v181ArmB 5.85s ease-in-out -1.05s infinite}.v181-arm-c{animation:v181ArmA 5.5s ease-in-out -1.75s infinite reverse}.v181-arm-d{animation:v181ArmB 6.15s ease-in-out -.75s infinite reverse}
.v181-filament{fill:none;stroke:rgba(230,214,255,.34);stroke-width:1.18;stroke-linecap:round;vector-effect:non-scaling-stroke;transform-box:fill-box;transform-origin:50% 0%;}
.v181-filament-a{animation:v181ThreadA 6.9s ease-in-out -.7s infinite}.v181-filament-b{animation:v181ThreadB 7.5s ease-in-out -2.1s infinite}.v181-filament-c{animation:v181ThreadA 6.2s ease-in-out -3.2s infinite reverse}.v181-filament-d{animation:v181ThreadB 7.2s ease-in-out -1.3s infinite reverse}.v181-filament-e{animation:v181ThreadA 6.7s ease-in-out -2.7s infinite}.v181-filament-f{animation:v181ThreadB 7.9s ease-in-out -.2s infinite reverse}
.v181-swimmer{animation:v181Thrust 3.72s cubic-bezier(.2,.03,.15,1) var(--v138-phase,0s) infinite!important;}

/* Expanded bell is wide/soft. The lower rim curls inward first; contraction is quick and tall. */
@keyframes v181Bell{
  0%,8%{transform:translate3d(0,2px,0) scaleX(1.10) scaleY(.91)}
  28%{transform:translate3d(0,4px,0) scaleX(1.13) scaleY(.89)}
  48%{transform:translate3d(0,4px,0) scaleX(1.11) scaleY(.90)}
  57%{transform:translate3d(0,1px,0) scaleX(1.03) scaleY(.98)}
  64%{transform:translate3d(0,-5px,0) scaleX(.86) scaleY(1.15)}
  69%{transform:translate3d(0,-8px,0) scaleX(.76) scaleY(1.27)}
  73%{transform:translate3d(0,-9px,0) scaleX(.78) scaleY(1.25)}
  81%{transform:translate3d(0,-4px,0) scaleX(.94) scaleY(1.07)}
  91%{transform:translate3d(0,0,0) scaleX(1.055) scaleY(.955)}
  100%{transform:translate3d(0,2px,0) scaleX(1.10) scaleY(.91)}
}
@keyframes v181Inner{
  0%,48%,100%{opacity:.69;transform:translateY(1px) scaleX(1.02) scaleY(.98)}
  58%{opacity:.76;transform:translateY(-1px) scale(.96)}
  69%,73%{opacity:1;transform:translateY(-5px) scaleX(.81) scaleY(1.07)}
  84%{opacity:.82;transform:translateY(-2px) scale(.94)}
}
@keyframes v181RimBand{
  0%,48%,100%{opacity:.47;transform:translateY(0) scaleX(1.02) scaleY(.9)}
  58%{opacity:.60;transform:translateY(-2px) scaleX(.94) scaleY(1.1)}
  69%,73%{opacity:.86;transform:translateY(-9px) scaleX(.72) scaleY(1.65)}
  84%{opacity:.60;transform:translateY(-3px) scaleX(.91) scaleY(1.15)}
}
@keyframes v181Thrust{0%,56%,100%{transform:translate3d(0,0,0) rotate(-.22deg)}66%{transform:translate3d(0,2px,0) rotate(.22deg)}73%{transform:translate3d(0,-13px,0) rotate(.38deg)}82%{transform:translate3d(1px,-9px,0) rotate(-.26deg)}92%{transform:translate3d(-1px,-3px,0) rotate(-.18deg)}}
@keyframes v181ArmA{0%,100%{transform:translate3d(-2px,0,0) rotate(-1.4deg) skewX(-1deg)}48%{transform:translate3d(8px,4px,0) rotate(2.7deg) skewX(2.8deg)}72%{transform:translate3d(4px,10px,0) rotate(1.4deg) skewX(1.2deg)}}
@keyframes v181ArmB{0%,100%{transform:translate3d(2px,1px,0) rotate(1deg) skewX(1deg)}46%{transform:translate3d(-9px,5px,0) rotate(-2.5deg) skewX(-3deg)}75%{transform:translate3d(-4px,11px,0) rotate(-1.1deg) skewX(-1.4deg)}}
@keyframes v181ThreadA{0%,100%{transform:translate3d(-2px,0,0) rotate(-.8deg)}50%{transform:translate3d(11px,5px,0) rotate(2.4deg)}72%{transform:translate3d(6px,10px,0) rotate(1deg)}}
@keyframes v181ThreadB{0%,100%{transform:translate3d(3px,1px,0) rotate(.9deg)}50%{transform:translate3d(-12px,5px,0) rotate(-2.6deg)}74%{transform:translate3d(-6px,10px,0) rotate(-1.2deg)}}

@media(max-width:430px){
  .v138-jelly-test{width:min(68vw,278px)!important;bottom:-19vh!important;}
  .v181-edge-line,.v181-rim-line{stroke-width:1.35!important;}
}

/* === V181 single jelly / organic bell refinement === */
.v181-new-jelly, .v139-new-jelly{
  width:min(38vw, 176px)!important;
  height:min(76vw, 350px)!important;
  transform-origin:50% 25%;
}
.v181-new-jelly .v139-bell,
.v139-new-jelly .v139-bell,
.v181-new-jelly .v138-bell,
.v139-new-jelly .v138-bell{
  transform-origin:50% 82%!important;
  animation:v181BellOrganic 3.75s cubic-bezier(.37,.05,.22,1) infinite!important;
  will-change:transform,filter;
}
@keyframes v181BellOrganic{
  0%   {transform:translateX(-1.2%) scaleX(1.035) scaleY(.91) rotate(-.45deg);filter:brightness(.98)}
  34%  {transform:translateX(.7%) scaleX(1.075) scaleY(.885) rotate(.35deg);filter:brightness(1)}
  49%  {transform:translateX(-.5%) scaleX(1.055) scaleY(.90) rotate(-.2deg);filter:brightness(1.01)}
  58%  {transform:translateY(-2px) translateX(.8%) scaleX(.80) scaleY(1.105) rotate(.45deg);filter:brightness(1.13)}
  65%  {transform:translateY(-5px) translateX(-.4%) scaleX(.75) scaleY(1.16) rotate(-.25deg);filter:brightness(1.18)}
  72%  {transform:translateY(-3px) translateX(.5%) scaleX(.87) scaleY(1.06) rotate(.25deg);filter:brightness(1.08)}
  100% {transform:translateX(-1.2%) scaleX(1.035) scaleY(.91) rotate(-.45deg);filter:brightness(.98)}
}
.v181-new-jelly .v139-bell-edge,
.v139-new-jelly .v139-bell-edge{
  animation:v181EdgeCurl 3.75s cubic-bezier(.37,.05,.22,1) infinite!important;
  transform-origin:50% 78%;
}
@keyframes v181EdgeCurl{
  0%,45%,100%{transform:scaleX(1) scaleY(1) translateY(0)}
  58%{transform:scaleX(.89) scaleY(.82) translateY(-2px)}
  65%{transform:scaleX(.80) scaleY(.72) translateY(-4px)}
  74%{transform:scaleX(.93) scaleY(.90) translateY(-1px)}
}
/* one contraction gives a small whole-body thrust; relaxation glides */
.v181-new-jelly .v139-body,
.v139-new-jelly .v139-body,
.v181-new-jelly .v138-body,
.v139-new-jelly .v138-body{
  animation:v181PulseThrust 3.75s cubic-bezier(.3,.05,.2,1) infinite!important;
}
@keyframes v181PulseThrust{
  0%,50%{transform:translate3d(0,0,0)}
  66%{transform:translate3d(1px,-8px,0)}
  78%{transform:translate3d(-1px,-10px,0)}
  100%{transform:translate3d(0,-7px,0)}
}
/* make asymmetry subtle, not mechanical */
.v181-new-jelly svg,
.v139-new-jelly svg{overflow:visible}

/* === V181: restrained contraction + delayed thrust + softer rim === */
/* Keep the attractive broad relaxed state; contraction is narrower/rounder, never needle-like. */
.v181-new-jelly .v139-bell,
.v140-new-jelly .v139-bell,
.v139-new-jelly .v139-bell,
.v181-new-jelly .v138-bell,
.v140-new-jelly .v138-bell,
.v139-new-jelly .v138-bell{
  transform-origin:50% 80%!important;
  animation:v181BellNatural 3.82s cubic-bezier(.36,.04,.2,1) infinite!important;
}
@keyframes v181BellNatural{
  0%   {transform:translateX(-.8%) scaleX(1.045) scaleY(.92) rotate(-.28deg);filter:brightness(.98)}
  36%  {transform:translateX(.55%) scaleX(1.075) scaleY(.90) rotate(.22deg);filter:brightness(1)}
  50%  {transform:translateX(-.25%) scaleX(1.055) scaleY(.915) rotate(-.12deg);filter:brightness(1.01)}
  59%  {transform:translateY(-1px) translateX(.5%) scaleX(.88) scaleY(1.025) rotate(.25deg);filter:brightness(1.08)}
  66%  {transform:translateY(-2px) translateX(-.25%) scaleX(.82) scaleY(1.07) rotate(-.16deg);filter:brightness(1.12)}
  73%  {transform:translateY(-1px) translateX(.35%) scaleX(.91) scaleY(1.015) rotate(.14deg);filter:brightness(1.05)}
  100% {transform:translateX(-.8%) scaleX(1.045) scaleY(.92) rotate(-.28deg);filter:brightness(.98)}
}
/* Rim folds inward during contraction, but loses the glass-dome outline. */
.v181-new-jelly .v139-bell-edge,
.v140-new-jelly .v139-bell-edge,
.v139-new-jelly .v139-bell-edge{
  opacity:.30!important;
  filter:blur(.35px)!important;
  transform-origin:50% 76%!important;
  animation:v181SoftRim 3.82s ease-in-out infinite!important;
}
@keyframes v181SoftRim{
  0%,47%,100%{transform:scaleX(1.01) scaleY(.96) translateY(0);opacity:.25}
  60%{transform:scaleX(.91) scaleY(.88) translateY(-1px);opacity:.34}
  67%{transform:scaleX(.84) scaleY(.80) translateY(-3px);opacity:.38}
  77%{transform:scaleX(.94) scaleY(.91) translateY(-1px);opacity:.29}
}
/* Propulsion begins only after the bell has nearly completed contraction. */
.v181-new-jelly .v139-body,
.v140-new-jelly .v139-body,
.v139-new-jelly .v139-body,
.v181-new-jelly .v138-body,
.v140-new-jelly .v138-body,
.v139-new-jelly .v138-body{
  animation:v181DelayedThrust 3.82s cubic-bezier(.28,.05,.18,1) infinite!important;
}
@keyframes v181DelayedThrust{
  0%,61%{transform:translate3d(0,0,0)}
  69%{transform:translate3d(.5px,-3px,0)}
  76%{transform:translate3d(-.6px,-8px,0)}
  86%{transform:translate3d(.3px,-10px,0)}
  100%{transform:translate3d(0,-8px,0)}
}

/* V181 — bell aperture curl illusion + pulse/glide separation */
.v181-new-jelly .v139-bell,
.v141-new-jelly .v139-bell,
.v140-new-jelly .v139-bell,
.v139-new-jelly .v139-bell{
  transform-origin:50% 84%!important;
  animation:v181BellBody 3.95s cubic-bezier(.34,.03,.18,1) infinite!important;
}
@keyframes v181BellBody{
  0%{transform:translateX(-.7%) scaleX(1.06) scaleY(.91) rotate(-.22deg)}
  40%{transform:translateX(.45%) scaleX(1.085) scaleY(.895) rotate(.18deg)}
  52%{transform:translateX(-.2%) scaleX(1.06) scaleY(.91) rotate(-.1deg)}
  61%{transform:translateY(-1px) translateX(.35%) scaleX(.91) scaleY(1.015) rotate(.18deg)}
  68%{transform:translateY(-2px) translateX(-.2%) scaleX(.85) scaleY(1.055) rotate(-.12deg)}
  75%{transform:translateY(-1px) translateX(.25%) scaleX(.93) scaleY(1.005) rotate(.1deg)}
  100%{transform:translateX(-.7%) scaleX(1.06) scaleY(.91) rotate(-.22deg)}
}
/* Lower rim visibly participates: folds inward and upward rather than staying horizontal. */
.v181-new-jelly .v139-bell-edge,
.v141-new-jelly .v139-bell-edge,
.v140-new-jelly .v139-bell-edge,
.v139-new-jelly .v139-bell-edge{
  opacity:.22!important;
  transform-origin:50% 72%!important;
  animation:v181ApertureCurl 3.95s cubic-bezier(.3,.02,.18,1) infinite!important;
}
@keyframes v181ApertureCurl{
  0%,50%,100%{transform:translateY(0) scaleX(1.04) scaleY(.93) rotate(0deg);opacity:.20}
  60%{transform:translateY(-2px) scaleX(.90) scaleY(.82) rotate(.2deg);opacity:.28}
  68%{transform:translateY(-5px) scaleX(.76) scaleY(.68) rotate(-.15deg);opacity:.34}
  77%{transform:translateY(-2px) scaleX(.91) scaleY(.86) rotate(.1deg);opacity:.25}
}
/* organic membrane wobble, deliberately tiny */
.v181-new-jelly svg,
.v141-new-jelly svg,
.v140-new-jelly svg,
.v139-new-jelly svg{
  transform-origin:50% 45%;
  animation:v181MembraneBias 7.6s ease-in-out infinite alternate;
}
@keyframes v181MembraneBias{
  0%{transform:skewX(-.45deg) rotate(-.12deg)}
  45%{transform:skewX(.25deg) rotate(.1deg)}
  100%{transform:skewX(.55deg) rotate(.16deg)}
}
/* stronger distinction: almost-still glide, then short pulse thrust */
.v181-new-jelly .v139-body,
.v141-new-jelly .v139-body,
.v140-new-jelly .v139-body,
.v139-new-jelly .v139-body,
.v181-new-jelly .v138-body,
.v141-new-jelly .v138-body{
  animation:v181PulseGlide 3.95s cubic-bezier(.25,.04,.16,1) infinite!important;
}
@keyframes v181PulseGlide{
  0%,63%{transform:translate3d(0,0,0)}
  69%{transform:translate3d(.4px,-2px,0)}
  75%{transform:translate3d(-.5px,-10px,0)}
  82%{transform:translate3d(.25px,-13px,0)}
  100%{transform:translate3d(0,-10px,0)}
}

/* === V181: true path-morph bell inspection mode === */
/* Disable old whole-bell scale animation: SVG paths themselves now change shape. */
.v138-jelly-test .v181-bell{
  animation:none!important;
  transform:none!important;
  filter:none!important;
}
/* Hide all temporary arms/filaments. Bell only. */
.v138-jelly-test .v181-arms,
.v138-jelly-test .v181-filaments{
  display:none!important;
}
/* Keep the bell large enough to inspect, but not screen-filling. */
.v138-jelly-test{
  width:min(36vw,168px)!important;
}
.v138-jelly-test .v181-jelly-svg{
  overflow:visible;
}
/* membrane should read as water, not a drawn glass outline */
.v138-jelly-test .v181-edge-line{
  fill:none!important;
  stroke:rgba(231,220,255,.20)!important;
  stroke-width:1.15!important;
  filter:blur(.28px);
}
.v138-jelly-test .v181-rim-line{
  fill:none!important;
  stroke:rgba(240,230,255,.18)!important;
  stroke-width:1.05!important;
  filter:blur(.38px);
}
.v138-jelly-test .v181-rim-band{opacity:.48!important}
.v138-jelly-test .v181-bell-sheen{opacity:.28!important}
.v138-jelly-test .v181-inner{opacity:.80!important}

/* Whole body remains nearly still until the contraction is almost complete. */
.v138-jelly-test .v181-swimmer{
  animation:v181BodyPulse 3.95s cubic-bezier(.25,.04,.16,1) infinite!important;
}
@keyframes v181BodyPulse{
  0%,64%{transform:translate3d(0,0,0)}
  70%{transform:translate3d(.4px,-2px,0)}
  77%{transform:translate3d(-.4px,-8px,0)}
  85%{transform:translate3d(.2px,-11px,0)}
  100%{transform:translate3d(0,-8px,0)}
}

/* =========================================================
   V181 — bell lock-in + touch-performance pass
   ========================================================= */

/* WAAPI owns the long rise now; disable the old CSS rise. */
.v138-jelly-test.v138-live{animation:none!important}

/* One prewarmed layer gets composited once; taps only reposition/restart it. */
.v138-jelly-test.v181-pooled{
  contain:layout style paint;
  transform:translate3d(-50%,0,0);
  backface-visibility:hidden;
}
.v138-jelly-test.v181-pooled .v181-jelly-svg{
  filter:none!important; /* costly drop-shadow removed from the whole SVG */
  transform:translateZ(0);
}

/* Less perfect dome: slightly flatter top, tiny organic lean. */
.v138-jelly-test .v181-bell{
  transform-origin:50% 76%!important;
  animation:v181MicroAsym 7.2s ease-in-out infinite alternate!important;
}
@keyframes v181MicroAsym{
  0%{transform:skewX(-.45deg) rotate(-.16deg)}
  46%{transform:skewX(.18deg) rotate(.08deg)}
  100%{transform:skewX(.5deg) rotate(.15deg)}
}

/* Kill the umbrella-spoke language. */
.v138-jelly-test .v181-ribs{display:none!important}
.v138-jelly-test .v181-lobes{
  fill:rgba(202,174,255,.16);
  opacity:.72;
  animation:v181LobeBreath 3.95s ease-in-out infinite;
}
@keyframes v181LobeBreath{
  0%,50%,100%{opacity:.50;transform:scale(1)}
  69%{opacity:.72;transform:scale(.94)}
  78%{opacity:.60;transform:scale(.97)}
}

/* Softer bell edge / scalloped aperture: no glass-rim look. */
.v138-jelly-test .v181-edge-line{
  stroke:rgba(239,230,255,.13)!important;
  stroke-width:.82!important;
  filter:none!important;
}
.v138-jelly-test .v181-rim-line{
  stroke:rgba(244,234,255,.12)!important;
  stroke-width:.78!important;
  filter:none!important;
}
.v138-jelly-test .v181-rim-band{
  opacity:.34!important;
}
.v138-jelly-test .v181-bell-sheen{
  opacity:.19!important;
}
.v138-jelly-test .v181-inner{
  opacity:.67!important;
  filter:none!important;
}

/* Keep inspection clean: no temporary arms/tentacles yet. */
.v138-jelly-test .v181-arms,
.v138-jelly-test .v181-filaments{
  display:none!important;
}

/* Pulse is short; most of the cycle is calm gliding. */
.v138-jelly-test .v181-swimmer{
  will-change:transform;
  animation:v181Pulse 3.95s cubic-bezier(.24,.03,.15,1) infinite!important;
}
@keyframes v181Pulse{
  0%,64%{transform:translate3d(0,0,0)}
  70%{transform:translate3d(.3px,-1px,0)}
  76%{transform:translate3d(-.35px,-6px,0)}
  83%{transform:translate3d(.15px,-8px,0)}
  100%{transform:translate3d(0,-6px,0)}
}

/* Keep the test bell visually readable without making SVG rasterization huge. */
.v138-jelly-test{width:min(35vw,164px)!important}
@media(max-width:430px){
  .v138-jelly-test{width:min(42vw,176px)!important;bottom:-17vh!important}
}

/* =========================================================
   V181 — single-motion performance architecture
   Goal: leave headroom for future oral arms + tentacles.
   ========================================================= */

/* Only the outer pooled element moves through the water. */
.v138-jelly-test.v181-pooled{
  contain:layout paint style;
  isolation:isolate;
  backface-visibility:hidden;
  transform:translate3d(-50%,0,0);
  will-change:transform,opacity;
}

/* The inner swimmer MUST NOT run a competing transform animation. */
.v138-jelly-test .v181-swimmer{
  animation:none!important;
  transform:none!important;
  will-change:auto!important;
}

/* SVG stays light: two animated paths, no live blur/drop-shadow/blend filters. */
.v138-jelly-test .v181-jelly-svg{
  overflow:visible;
  filter:none!important;
  transform:none!important;
  animation:none!important;
  shape-rendering:geometricPrecision;
}

/* Path morphing itself supplies the breathing, so no group-scale animation. */
.v138-jelly-test .v181-bell{
  animation:none!important;
  transform:none!important;
  filter:none!important;
}

/* Membrane material: translucent but not glassy. */
.v138-jelly-test .v181-membrane{
  opacity:.96;
  stroke:rgba(241,233,255,.10);
  stroke-width:.7;
  vector-effect:non-scaling-stroke;
}
.v138-jelly-test .v181-rim{
  opacity:.52;
}
.v138-jelly-test .v181-highlight{
  fill:rgba(255,253,255,.095);
  opacity:.82;
}

/* Soft internal tissue, deliberately static for performance and realism. */
.v138-jelly-test .v181-core{
  opacity:.62;
}
.v138-jelly-test .v181-organs{
  fill:rgba(199,171,245,.13);
  opacity:.82;
}

/* Keep the test bell clean and at a moderate raster size. */
.v138-jelly-test{
  width:min(36vw,166px)!important;
  aspect-ratio:240/250!important;
  bottom:-14vh!important;
}
@media(max-width:430px){
  .v138-jelly-test{
    width:min(40vw,170px)!important;
    bottom:-13vh!important;
  }
}

/* Old test-era transforms/filters should never leak onto the active V181 node. */
.v138-jelly-test.v181-pooled .v138-jelly-svg,
.v138-jelly-test.v181-pooled .v138-swimmer,
.v138-jelly-test.v181-pooled .v181-bell,
.v138-jelly-test.v181-pooled .v181-core,
.v138-jelly-test.v181-pooled .v181-organs{
  filter:none!important;
  mix-blend-mode:normal!important;
}

/* =========================================================
   V181 — three-background adaptive jelly material + scale
   Measured against the actual homepage-user-v120-1/2/3 images.
   Motion architecture from V145 is untouched.
   ========================================================= */

/* Shared: cool transparent body, lavender concentrated internally. */
.fireworks-intro .v138-jelly-test.v181-pooled{
  --jelly-scale:1;
  --jelly-opacity:1;
  opacity:var(--jelly-opacity);
}
.fireworks-intro .v138-jelly-test.v181-pooled .v181-jelly-svg{
  transform:scale(var(--jelly-scale))!important;
  transform-origin:50% 58%!important;
}
.fireworks-intro .v138-jelly-test .v181-membrane{
  fill-opacity:.94;
}
.fireworks-intro .v138-jelly-test .v181-core{
  opacity:.54;
}
.fireworks-intro .v138-jelly-test .v181-organs{
  opacity:.76;
}
.fireworks-intro .v138-jelly-test .v181-rim{
  opacity:.46;
}
.fireworks-intro .v138-jelly-test .v181-highlight{
  opacity:.72;
}

/* Scene 1 — darkest/deepest blue:
   slightly larger and more luminous, but still transparent. */
.fireworks-intro[data-jelly-scene="1"] .v138-jelly-test.v181-pooled{
  --jelly-scale:1.045;
  --jelly-opacity:.99;
}
.fireworks-intro[data-jelly-scene="1"] .v181-membrane{
  opacity:.98;
  stroke:rgba(242,240,255,.12);
}
.fireworks-intro[data-jelly-scene="1"] .v181-core{opacity:.61}
.fireworks-intro[data-jelly-scene="1"] .v181-organs{
  fill:rgba(207,187,250,.145);
  opacity:.82;
}
.fireworks-intro[data-jelly-scene="1"] .v181-rim{opacity:.50}

/* Scene 2 — the brightest of the three:
   slightly smaller, body presence raised, glow reduced so it won't wash out. */
.fireworks-intro[data-jelly-scene="2"] .v138-jelly-test.v181-pooled{
  --jelly-scale:.965;
  --jelly-opacity:.99;
}
.fireworks-intro[data-jelly-scene="2"] .v181-membrane{
  opacity:1;
  stroke:rgba(239,235,255,.14);
}
.fireworks-intro[data-jelly-scene="2"] .v181-core{opacity:.48}
.fireworks-intro[data-jelly-scene="2"] .v181-organs{
  fill:rgba(190,164,238,.16);
  opacity:.78;
}
.fireworks-intro[data-jelly-scene="2"] .v181-rim{opacity:.44}
.fireworks-intro[data-jelly-scene="2"] .v181-highlight{opacity:.62}

/* Scene 3 — dark blue with somewhat brighter local structure:
   neutral middle scale, a touch cooler/bluer internally. */
.fireworks-intro[data-jelly-scene="3"] .v138-jelly-test.v181-pooled{
  --jelly-scale:1.01;
  --jelly-opacity:.99;
}
.fireworks-intro[data-jelly-scene="3"] .v181-membrane{
  opacity:.97;
  stroke:rgba(234,237,255,.115);
}
.fireworks-intro[data-jelly-scene="3"] .v181-core{opacity:.56}
.fireworks-intro[data-jelly-scene="3"] .v181-organs{
  fill:rgba(190,181,248,.145);
  opacity:.80;
}
.fireworks-intro[data-jelly-scene="3"] .v181-rim{opacity:.47}

/* Slightly larger on compact phones where the background composition leaves
   less apparent visual mass, without increasing SVG raster dimensions heavily. */
@media(max-width:390px){
  .fireworks-intro[data-jelly-scene="1"] .v138-jelly-test.v181-pooled{--jelly-scale:1.06}
  .fireworks-intro[data-jelly-scene="2"] .v138-jelly-test.v181-pooled{--jelly-scale:.98}
  .fireworks-intro[data-jelly-scene="3"] .v138-jelly-test.v181-pooled{--jelly-scale:1.025}
}

/* =========================================================
   V181 — living color depth, no heavy rendering effects
   ========================================================= */

/* Color hierarchy: nearly colorless membrane -> lavender rim -> richer internal tissue. */
.fireworks-intro .v138-jelly-test .v181-membrane{
  opacity:.96;
}
.fireworks-intro .v138-jelly-test .v181-rim{
  opacity:.45;
}
.fireworks-intro .v138-jelly-test .v181-core{
  opacity:.50;
}
.fireworks-intro .v138-jelly-test .v181-organs{
  fill:rgba(193,168,238,.145);
}
.fireworks-intro .v138-jelly-test .v181-life-ring{
  vector-effect:non-scaling-stroke;
}

/* Scene 1: deep blue — cool-white membrane + restrained lavender center. */
.fireworks-intro[data-jelly-scene="1"] .v181-core{opacity:.56}
.fireworks-intro[data-jelly-scene="1"] .v181-organs{fill:rgba(205,178,245,.15)}
.fireworks-intro[data-jelly-scene="1"] .v181-life-ring{stroke:rgba(211,205,255,.17)}
.fireworks-intro[data-jelly-scene="1"] .v181-rim{opacity:.49}

/* Scene 2: brighter — less luminous, slightly denser mauve tissue. */
.fireworks-intro[data-jelly-scene="2"] .v181-core{opacity:.45}
.fireworks-intro[data-jelly-scene="2"] .v181-organs{fill:rgba(184,157,224,.17)}
.fireworks-intro[data-jelly-scene="2"] .v181-life-ring{stroke:rgba(194,185,235,.16)}
.fireworks-intro[data-jelly-scene="2"] .v181-rim{opacity:.42}

/* Scene 3: cooler blue — internal tint shifts a little toward blue-violet. */
.fireworks-intro[data-jelly-scene="3"] .v181-core{opacity:.51}
.fireworks-intro[data-jelly-scene="3"] .v181-organs{fill:rgba(177,178,239,.16)}
.fireworks-intro[data-jelly-scene="3"] .v181-life-ring{stroke:rgba(192,203,255,.17)}
.fireworks-intro[data-jelly-scene="3"] .v181-rim{opacity:.46}

/* Performance contract: no blur, drop-shadow, blend mode or extra transform animation. */
.v138-jelly-test.v181-pooled .v181-membrane,
.v138-jelly-test.v181-pooled .v181-rim,
.v138-jelly-test.v181-pooled .v181-core,
.v138-jelly-test.v181-pooled .v181-organs,
.v138-jelly-test.v181-pooled .v181-life-ring{
  filter:none!important;
  mix-blend-mode:normal!important;
}

/* =========================================================
   V181 — final luminous bell candidate
   Reference-inspired, but restrained for real-time mobile motion.
   ========================================================= */

/* Maintain transparent gel body; luminous color lives mostly in depth and rim. */
.fireworks-intro .v138-jelly-test .v181-membrane{
  opacity:.98;
  stroke:rgba(220,230,255,.12);
}
.fireworks-intro .v138-jelly-test .v181-rim{
  opacity:.58;
}
.fireworks-intro .v138-jelly-test .v181-core{
  opacity:.54;
}
.fireworks-intro .v138-jelly-test .v181-organs{
  fill:rgba(202,161,237,.17);
  opacity:.84;
}
.fireworks-intro .v138-jelly-test .v181-life-ring{
  stroke:rgba(185,198,255,.17);
  opacity:.22;
}

/* Sparse highlights: no blur/filter; brightness comes from contrast and opacity only. */
.fireworks-intro .v138-jelly-test .v181-bell-sparks{
  fill:#f8f6ff;
  opacity:.50;
  animation:v181SparkBreath 3.96s ease-in-out infinite;
}
.fireworks-intro .v138-jelly-test .v181-bell-sparks circle:nth-child(2n){
  fill:#9ddcff;
}
.fireworks-intro .v138-jelly-test .v181-bell-sparks circle:nth-child(3n){
  fill:#ffb2e9;
}
@keyframes v181SparkBreath{
  0%,52%,100%{opacity:.34}
  68%{opacity:.68}
  80%{opacity:.46}
}

/* Breathing light: contraction gathers light inward, expansion releases it. */
.fireworks-intro .v138-jelly-test .v181-core{
  animation:v181CorePulse 3.96s ease-in-out infinite!important;
}
@keyframes v181CorePulse{
  0%,52%,100%{opacity:.48}
  61%{opacity:.55}
  69%{opacity:.70}
  80%{opacity:.56}
}
.fireworks-intro .v138-jelly-test .v181-rim{
  animation:v181RimPulse 3.96s ease-in-out infinite!important;
}
@keyframes v181RimPulse{
  0%,52%,100%{opacity:.50}
  64%{opacity:.58}
  69%{opacity:.68}
  80%{opacity:.55}
}

/* Scene-specific luminous balance. */
.fireworks-intro[data-jelly-scene="1"] .v181-membrane{opacity:1}
.fireworks-intro[data-jelly-scene="1"] .v181-rim{opacity:.61}
.fireworks-intro[data-jelly-scene="1"] .v181-core{opacity:.57}
.fireworks-intro[data-jelly-scene="1"] .v181-bell-sparks{opacity:.54}

.fireworks-intro[data-jelly-scene="2"] .v181-membrane{opacity:.96}
.fireworks-intro[data-jelly-scene="2"] .v181-rim{opacity:.50}
.fireworks-intro[data-jelly-scene="2"] .v181-core{opacity:.48}
.fireworks-intro[data-jelly-scene="2"] .v181-bell-sparks{opacity:.40}

.fireworks-intro[data-jelly-scene="3"] .v181-membrane{opacity:.99}
.fireworks-intro[data-jelly-scene="3"] .v181-rim{opacity:.63}
.fireworks-intro[data-jelly-scene="3"] .v181-core{opacity:.58}
.fireworks-intro[data-jelly-scene="3"] .v181-organs{fill:rgba(219,148,240,.18)}
.fireworks-intro[data-jelly-scene="3"] .v181-bell-sparks{opacity:.56}

/* Strict performance guard: still no blur/drop-shadow/mix-blend on live bell. */
.v138-jelly-test.v181-pooled .v181-membrane,
.v138-jelly-test.v181-pooled .v181-rim,
.v138-jelly-test.v181-pooled .v181-core,
.v138-jelly-test.v181-pooled .v181-organs,
.v138-jelly-test.v181-pooled .v181-life-ring,
.v138-jelly-test.v181-pooled .v181-bell-sparks{
  filter:none!important;
  mix-blend-mode:normal!important;
}

/* Avoid compositor churn: only spark group uses opacity animation, never transform. */
.v138-jelly-test.v181-pooled .v181-bell-sparks{
  will-change:opacity;
}

/* =========================================================
   V181 — deeper layered bell contrast for bright backgrounds
   Final bell color lock candidate.
   ========================================================= */

/* Stronger silhouette without turning opaque. */
.fireworks-intro .v138-jelly-test .v181-membrane{
  opacity:1;
  stroke:rgba(176,194,255,.20);
}
.fireworks-intro .v138-jelly-test .v181-rim{
  opacity:.66;
}
.fireworks-intro .v138-jelly-test .v181-core{
  opacity:.61;
}
.fireworks-intro .v138-jelly-test .v181-organs{
  fill:rgba(165,118,220,.22);
  opacity:.90;
}
.fireworks-intro .v138-jelly-test .v181-life-ring{
  stroke:rgba(155,176,246,.22);
  opacity:.28;
}
.fireworks-intro .v138-jelly-test .v181-highlight{
  opacity:.70;
}

/* Scene 1 — deeper cool blue outline, richer mid-violet. */
.fireworks-intro[data-jelly-scene="1"] .v181-rim{opacity:.69}
.fireworks-intro[data-jelly-scene="1"] .v181-core{opacity:.64}
.fireworks-intro[data-jelly-scene="1"] .v181-organs{
  fill:rgba(164,121,224,.22);
  opacity:.91;
}
.fireworks-intro[data-jelly-scene="1"] .v181-bell-sparks{opacity:.57}

/* Scene 2 — brightest background:
   strongest contour and denser internal violet for separation. */
.fireworks-intro[data-jelly-scene="2"] .v181-membrane{
  opacity:1;
  stroke:rgba(147,170,240,.24);
}
.fireworks-intro[data-jelly-scene="2"] .v181-rim{opacity:.72}
.fireworks-intro[data-jelly-scene="2"] .v181-core{opacity:.62}
.fireworks-intro[data-jelly-scene="2"] .v181-organs{
  fill:rgba(148,103,204,.25);
  opacity:.94;
}
.fireworks-intro[data-jelly-scene="2"] .v181-life-ring{
  stroke:rgba(150,161,226,.24);
  opacity:.31;
}
.fireworks-intro[data-jelly-scene="2"] .v181-bell-sparks{opacity:.50}

/* Scene 3 — richest purple/pink layering. */
.fireworks-intro[data-jelly-scene="3"] .v181-rim{opacity:.72}
.fireworks-intro[data-jelly-scene="3"] .v181-core{opacity:.66}
.fireworks-intro[data-jelly-scene="3"] .v181-organs{
  fill:rgba(186,103,219,.24);
  opacity:.93;
}
.fireworks-intro[data-jelly-scene="3"] .v181-life-ring{
  stroke:rgba(170,161,240,.24);
  opacity:.30;
}
.fireworks-intro[data-jelly-scene="3"] .v181-bell-sparks{opacity:.60}

/* Preserve the lightweight rendering contract. */
.v138-jelly-test.v181-pooled .v181-membrane,
.v138-jelly-test.v181-pooled .v181-rim,
.v138-jelly-test.v181-pooled .v181-core,
.v138-jelly-test.v181-pooled .v181-organs,
.v138-jelly-test.v181-pooled .v181-life-ring,
.v138-jelly-test.v181-pooled .v181-bell-sparks{
  filter:none!important;
  mix-blend-mode:normal!important;
}

/* =========================================================
   V181 — first complete tentacle system
   Quality + performance: 4 oral arms + 8 fine threads,
   all animated as groups rather than dozens of independent nodes.
   ========================================================= */

.v138-jelly-test{
  aspect-ratio:240/470!important;
  bottom:-30vh!important;
}

/* Oral arms: broad translucent tissue, root slightly brighter, ends fade visually. */
.v138-jelly-test .v181-oral-arms{
  fill:none;
  stroke:rgba(175,126,232,.31);
  stroke-width:7.2;
  stroke-linecap:round;
  stroke-linejoin:round;
  opacity:.82;
  transform-origin:120px 151px;
  animation:v181ArmsFlow 5.8s cubic-bezier(.42,.02,.34,1) infinite alternate;
}
.v138-jelly-test .v181-arm:nth-child(2),
.v138-jelly-test .v181-arm:nth-child(3){
  stroke:rgba(126,151,238,.29);
  stroke-width:8.2;
}
@keyframes v181ArmsFlow{
  0%{transform:translate3d(-1px,0,0) rotate(-1.5deg) skewX(-1.2deg)}
  34%{transform:translate3d(2px,1px,0) rotate(.8deg) skewX(1.1deg)}
  68%{transform:translate3d(-1px,0,0) rotate(1.6deg) skewX(.4deg)}
  100%{transform:translate3d(1px,1px,0) rotate(-.7deg) skewX(-.8deg)}
}

/* Fine threads: hair-thin, low opacity, slightly blue/purple. */
.v138-jelly-test .v181-fine-tentacles{
  fill:none;
  stroke:rgba(183,176,248,.27);
  stroke-width:1.05;
  stroke-linecap:round;
  opacity:.76;
  transform-origin:120px 150px;
  animation:v181ThreadsFlow 7.1s cubic-bezier(.38,.03,.28,1) infinite alternate;
}
.v138-jelly-test .v181-thread:nth-child(2n){
  stroke:rgba(214,147,226,.24);
}
.v138-jelly-test .v181-thread:nth-child(3n){
  stroke:rgba(144,190,248,.24);
}
@keyframes v181ThreadsFlow{
  0%{transform:translate3d(-3px,0,0) rotate(-1.9deg) skewX(-1.7deg)}
  28%{transform:translate3d(2px,1px,0) rotate(.5deg) skewX(.8deg)}
  62%{transform:translate3d(4px,0,0) rotate(1.7deg) skewX(1.6deg)}
  100%{transform:translate3d(-1px,1px,0) rotate(-.5deg) skewX(-.7deg)}
}

/* Pulse lag: tentacles respond after bell contraction rather than exactly with it. */
.v138-jelly-test .v181-tentacle-system{
  transform-origin:120px 151px;
  animation:v181TentacleLag 3.96s cubic-bezier(.24,.03,.16,1) infinite;
}
@keyframes v181TentacleLag{
  0%,62%{transform:translate3d(0,0,0) scaleY(1)}
  70%{transform:translate3d(0,2px,0) scaleY(1.015)}
  79%{transform:translate3d(0,5px,0) scaleY(1.035)}
  90%{transform:translate3d(0,2px,0) scaleY(1.015)}
  100%{transform:translate3d(0,0,0) scaleY(1)}
}

/* Scene-aware tentacle visibility. */
.fireworks-intro[data-jelly-scene="1"] .v181-oral-arms{opacity:.86}
.fireworks-intro[data-jelly-scene="1"] .v181-fine-tentacles{opacity:.80}

.fireworks-intro[data-jelly-scene="2"] .v181-oral-arms{
  opacity:.88;
  stroke:rgba(151,113,211,.36);
}
.fireworks-intro[data-jelly-scene="2"] .v181-fine-tentacles{
  opacity:.82;
  stroke:rgba(157,151,225,.31);
}

.fireworks-intro[data-jelly-scene="3"] .v181-oral-arms{
  opacity:.88;
  stroke:rgba(194,115,225,.35);
}
.fireworks-intro[data-jelly-scene="3"] .v181-fine-tentacles{
  opacity:.82;
  stroke:rgba(199,151,236,.29);
}

/* Performance contract: no blur, shadow, filters or per-thread animation. */
.v138-jelly-test.v181-pooled .v181-tentacle-system,
.v138-jelly-test.v181-pooled .v181-oral-arms,
.v138-jelly-test.v181-pooled .v181-fine-tentacles{
  filter:none!important;
  mix-blend-mode:normal!important;
  backface-visibility:hidden;
}
@media(max-width:430px){
  .v138-jelly-test{
    width:min(41vw,172px)!important;
    bottom:-28vh!important;
  }
}

/* =========================================================
   V181 — unified swimming biomechanics
   Bell remains the master clock. Arms and threads now deform
   progressively from root to tip with delayed hydrodynamic response.
   ========================================================= */

/* Disable V150/V181 group-swing animations so the new path morphs define motion. */
.v138-jelly-test .v181-oral-arms,
.v138-jelly-test .v181-fine-tentacles{
  animation:none!important;
  transform:none!important;
}

/* Keep only a tiny whole-system recoil; path deformation does most of the work. */
.v138-jelly-test .v181-tentacle-system{
  transform-origin:120px 151px;
  animation:v181WholeBodyRecoil 3.96s cubic-bezier(.22,.04,.18,1) infinite!important;
}
@keyframes v181WholeBodyRecoil{
  0%,58%{transform:translate3d(0,0,0)}
  68%{transform:translate3d(0,1px,0)}
  77%{transform:translate3d(0,5px,0)}
  90%{transform:translate3d(0,2px,0)}
  100%{transform:translate3d(0,0,0)}
}

/* Root feels attached to bell; tips stay lighter. */
.v138-jelly-test .v181-oral-arms{
  stroke-width:7.4;
  opacity:.84;
}
.v138-jelly-test .v181-fine-tentacles{
  stroke-width:1.0;
  opacity:.74;
}

/* Slight asymmetry in density gives natural body mass without extra animations. */
.v138-jelly-test .v181-arm-a,
.v138-jelly-test .v181-arm-d{opacity:.76}
.v138-jelly-test .v181-arm-b,
.v138-jelly-test .v181-arm-c{opacity:.91}

/* Make outer threads lighter; central threads carry more visible flow. */
.v138-jelly-test .v181-thread.t1,
.v138-jelly-test .v181-thread.t8{opacity:.58}
.v138-jelly-test .v181-thread.t2,
.v138-jelly-test .v181-thread.t7{opacity:.67}
.v138-jelly-test .v181-thread.t3,
.v138-jelly-test .v181-thread.t6{opacity:.76}
.v138-jelly-test .v181-thread.t4,
.v138-jelly-test .v181-thread.t5{opacity:.82}

/* Scene-specific visibility remains, but no heavier effects. */
.fireworks-intro[data-jelly-scene="2"] .v181-fine-tentacles{opacity:.82}
.fireworks-intro[data-jelly-scene="2"] .v181-oral-arms{opacity:.90}

/* Performance guard. Path morph only, no filter/blur/shadow. */
.v138-jelly-test.v181-pooled .v181-tentacle-system,
.v138-jelly-test.v181-pooled .v181-oral-arms,
.v138-jelly-test.v181-pooled .v181-fine-tentacles,
.v138-jelly-test.v181-pooled .v181-arm,
.v138-jelly-test.v181-pooled .v181-thread{
  filter:none!important;
  mix-blend-mode:normal!important;
}

/* V181: organic water-driven tentacles, intentionally asymmetric. */
.v138-jelly-test .v181-root-web{fill:rgba(172,125,224,.17);stroke:rgba(220,200,252,.08);stroke-width:.6;opacity:.82}
.v138-jelly-test .v181-ribbons{fill:none;stroke:rgba(176,125,224,.24);stroke-width:6.5;stroke-linecap:round;opacity:.72}
.v138-jelly-test .v181-ribbon.r2{stroke:rgba(125,148,229,.23);stroke-width:7.5}
.v138-jelly-test .v181-ribbon.r3{stroke:rgba(194,112,218,.23)}
.v138-jelly-test .v181-filaments{fill:none;stroke:rgba(190,181,244,.29);stroke-width:.82;stroke-linecap:round;opacity:.76}
.v138-jelly-test .v181-fil.f1,.v138-jelly-test .v181-fil.f7{opacity:.48}
.v138-jelly-test .v181-fil.f2,.v138-jelly-test .v181-fil.f6{opacity:.62}
.v138-jelly-test .v181-fil.f3,.v138-jelly-test .v181-fil.f5{opacity:.73}
.v138-jelly-test .v181-fil.f4{opacity:.81}
.v138-jelly-test .v181-tentacle-system,.v138-jelly-test .v181-ribbons,.v138-jelly-test .v181-filaments{animation:none!important;transform:none!important}
.fireworks-intro[data-jelly-scene="2"] .v181-filaments{stroke:rgba(157,150,220,.36);opacity:.84}
.fireworks-intro[data-jelly-scene="3"] .v181-ribbons{stroke:rgba(190,108,219,.27)}
.v138-jelly-test.v181-pooled .v181-root-web,.v138-jelly-test.v181-pooled .v181-ribbon,.v138-jelly-test.v181-pooled .v181-fil{filter:none!important;mix-blend-mode:normal!important}

/* V181 — real-jelly tentacles based on uploaded swimming reference. */
.v138-jelly-test .v181-root-web{fill:rgba(173,127,224,.16);stroke:rgba(224,205,253,.075);stroke-width:.6;opacity:.84}
.v138-jelly-test .v181-oral-arms{fill:none;stroke:rgba(169,119,222,.27);stroke-linecap:round;stroke-linejoin:round;opacity:.80}
.v138-jelly-test .v181-arm.a1{stroke-width:6.7;opacity:.72}
.v138-jelly-test .v181-arm.a2{stroke-width:8.1;stroke:rgba(127,148,229,.25);opacity:.88}
.v138-jelly-test .v181-arm.a3{stroke-width:8.0;stroke:rgba(151,129,229,.25);opacity:.88}
.v138-jelly-test .v181-arm.a4{stroke-width:6.5;stroke:rgba(193,113,218,.25);opacity:.72}
.v138-jelly-test .v181-filaments{fill:none;stroke:rgba(191,185,246,.25);stroke-width:.72;stroke-linecap:round;opacity:.68}
.v138-jelly-test .v181-fil.f1,.v138-jelly-test .v181-fil.f4{opacity:.55}
.v138-jelly-test .v181-fil.f2,.v138-jelly-test .v181-fil.f3{opacity:.76}
.v138-jelly-test .v181-tentacle-system,.v138-jelly-test .v181-oral-arms,.v138-jelly-test .v181-filaments{animation:none!important;transform:none!important}
.fireworks-intro[data-jelly-scene="2"] .v181-root-web{fill:rgba(145,108,206,.22)}
.fireworks-intro[data-jelly-scene="2"] .v181-oral-arms{stroke:rgba(149,111,207,.32)}
.fireworks-intro[data-jelly-scene="2"] .v181-filaments{stroke:rgba(160,154,224,.32);opacity:.75}
.fireworks-intro[data-jelly-scene="3"] .v181-arm.a4{stroke:rgba(207,118,222,.28)}
.fireworks-intro[data-jelly-scene="3"] .v181-filaments{stroke:rgba(207,158,235,.27)}
.v138-jelly-test.v181-pooled .v181-root-web,.v138-jelly-test.v181-pooled .v181-arm,.v138-jelly-test.v181-pooled .v181-fil{filter:none!important;mix-blend-mode:normal!important}

/* =========================================================
   V181 — reference-video bell realism
   Blue-white gelatinous translucency + thin luminous rim +
   subtle warm internal tissue. Removes fantasy-neon feel.
   ========================================================= */

.fireworks-intro .v138-jelly-test .v181-membrane{
  opacity:.84!important;
  stroke:rgba(213,234,255,.16)!important;
  stroke-width:.72!important;
}
.fireworks-intro .v138-jelly-test .v181-rim{
  opacity:.54!important;
}
.fireworks-intro .v138-jelly-test .v181-core{
  opacity:.43!important;
  animation:v181CoreBreath 3.96s ease-in-out infinite!important;
}
@keyframes v181CoreBreath{
  0%,52%,100%{opacity:.34}
  68%{opacity:.48}
  79%{opacity:.40}
}

/* Video-like internal organs: peach-orange, semi-transparent, never neon. */
.fireworks-intro .v138-jelly-test .v181-organs{
  fill:rgba(255,176,138,.23)!important;
  opacity:.68!important;
}
.fireworks-intro .v138-jelly-test .v181-life-ring{
  stroke:rgba(197,220,247,.13)!important;
  opacity:.15!important;
}
.fireworks-intro .v138-jelly-test .v181-highlight{
  stroke:rgba(245,250,255,.20)!important;
  opacity:.42!important;
}

/* Remove fantasy star-speckle from the bell — the reference is clean gel tissue. */
.fireworks-intro .v138-jelly-test .v181-bell-sparks{
  display:none!important;
}

/* Bright scene: slightly denser membrane for visibility, still translucent. */
.fireworks-intro[data-jelly-scene="1"] .v181-membrane{opacity:.86!important}
.fireworks-intro[data-jelly-scene="1"] .v181-rim{opacity:.57!important}

.fireworks-intro[data-jelly-scene="2"] .v181-membrane{
  opacity:.91!important;
  stroke:rgba(188,216,248,.21)!important;
}
.fireworks-intro[data-jelly-scene="2"] .v181-rim{opacity:.61!important}
.fireworks-intro[data-jelly-scene="2"] .v181-core{opacity:.46!important}
.fireworks-intro[data-jelly-scene="2"] .v181-organs{
  fill:rgba(238,156,126,.25)!important;
  opacity:.74!important;
}

.fireworks-intro[data-jelly-scene="3"] .v181-membrane{opacity:.86!important}
.fireworks-intro[data-jelly-scene="3"] .v181-rim{opacity:.58!important}
.fireworks-intro[data-jelly-scene="3"] .v181-organs{
  fill:rgba(248,168,142,.23)!important;
}

/* Match the video's softer body/edge relationship. */
.v138-jelly-test.v181-pooled .v181-membrane,
.v138-jelly-test.v181-pooled .v181-rim,
.v138-jelly-test.v181-pooled .v181-core,
.v138-jelly-test.v181-pooled .v181-organs,
.v138-jelly-test.v181-pooled .v181-life-ring,
.v138-jelly-test.v181-pooled .v181-highlight{
  filter:none!important;
  mix-blend-mode:normal!important;
}

/* =========================================================
   V181 — volumetric front-view living jellyfish.
   No flat/top-view silhouette, no neon game look.
   ========================================================= */
.v138-jelly-test{
  aspect-ratio:260/500!important;
  width:min(45vw,190px)!important;
  bottom:-31vh!important;
}
.v138-jelly-test .v181-jelly-svg{width:100%!important;height:100%!important;overflow:visible!important}
.v138-jelly-test .v181-bell{
  opacity:.92;
  stroke:rgba(218,244,255,.17);
  stroke-width:.8;
}
.v138-jelly-test .v181-inner-gel{opacity:.84}
.v138-jelly-test .v181-rim{opacity:.73}
.v138-jelly-test .v181-organs{
  fill:rgba(255,160,184,.18);
  stroke:rgba(255,201,184,.10);
  stroke-width:.6;
  opacity:.82;
}
.v138-jelly-test .v181-oral-arms{opacity:.76}
.v138-jelly-test .v181-arm.a1,.v138-jelly-test .v181-arm.a4{opacity:.63}
.v138-jelly-test .v181-arm.a2,.v138-jelly-test .v181-arm.a3{opacity:.82}
.v138-jelly-test .v181-filaments{
  stroke:rgba(186,226,246,.25);
  stroke-width:.72;
  opacity:.64;
}
.v138-jelly-test .v181-fil.f1,.v138-jelly-test .v181-fil.f4{opacity:.48}
.v138-jelly-test .v181-fil.f2,.v138-jelly-test .v181-fil.f3{opacity:.70}

/* Keep the gel transparent on all three existing backgrounds. */
.fireworks-intro[data-jelly-scene="1"] .v181-bell{opacity:.94}
.fireworks-intro[data-jelly-scene="2"] .v181-bell{opacity:.98;stroke:rgba(197,229,246,.23)}
.fireworks-intro[data-jelly-scene="2"] .v181-rim{opacity:.82}
.fireworks-intro[data-jelly-scene="2"] .v181-organs{opacity:.90}
.fireworks-intro[data-jelly-scene="3"] .v181-bell{opacity:.95}
.fireworks-intro[data-jelly-scene="3"] .v181-organs{fill:rgba(255,145,190,.20)}

/* No heavy effects; translucency comes from layered alpha only. */
.v138-jelly-test.v181-pooled .v181-bell,
.v138-jelly-test.v181-pooled .v181-inner-gel,
.v138-jelly-test.v181-pooled .v181-rim,
.v138-jelly-test.v181-pooled .v181-organs,
.v138-jelly-test.v181-pooled .v181-arm,
.v138-jelly-test.v181-pooled .v181-fil{
  filter:none!important;
  mix-blend-mode:normal!important;
}

/* =========================================================
   V181 — real oral tissue: filled ribbons + sparse filaments.
   Removes the "four transparent wires" look seen in recording.
   ========================================================= */

.v138-jelly-test .v181-root-web{
  fill:rgba(223,174,224,.13);
  stroke:rgba(220,218,247,.05);
  stroke-width:.5;
  opacity:.78;
}

.v138-jelly-test .v181-oral-ribbons{
  fill:rgba(190,145,224,.14);
  stroke:rgba(214,195,241,.055);
  stroke-width:.55;
  opacity:.88;
}
.v138-jelly-test .v181-ribbon.r1{fill:rgba(148,192,231,.12);opacity:.68}
.v138-jelly-test .v181-ribbon.r2{fill:rgba(205,147,225,.16);opacity:.88}
.v138-jelly-test .v181-ribbon.r3{fill:rgba(226,155,210,.15);opacity:.84}
.v138-jelly-test .v181-ribbon.r4{fill:rgba(139,198,229,.11);opacity:.64}

.v138-jelly-test .v181-filaments{
  stroke:rgba(202,228,243,.19);
  stroke-width:.52;
  opacity:.54;
}
.v138-jelly-test .v181-fil.f1,
.v138-jelly-test .v181-fil.f5{opacity:.35}
.v138-jelly-test .v181-fil.f2,
.v138-jelly-test .v181-fil.f4{opacity:.48}
.v138-jelly-test .v181-fil.f3{opacity:.58}

/* Do not let the tissue read as bright ropes on the lightest background. */
.fireworks-intro[data-jelly-scene="2"] .v181-root-web{opacity:.84}
.fireworks-intro[data-jelly-scene="2"] .v181-oral-ribbons{opacity:.93}
.fireworks-intro[data-jelly-scene="2"] .v181-filaments{opacity:.58}

/* Clean out all legacy rope styles from V156. */
.v138-jelly-test .v181-oral-arms,
.v138-jelly-test .v181-arm{display:none!important}

.v138-jelly-test.v181-pooled .v181-root-web,
.v138-jelly-test.v181-pooled .v181-ribbon,
.v138-jelly-test.v181-pooled .v181-fil{
  filter:none!important;
  mix-blend-mode:normal!important;
}

/* =========================================================
   V181 — smoother, lighter hydrodynamics from user recording.
   Continuous depth wave, 30fps path updates, airier tissue.
   ========================================================= */
.v138-jelly-test .v181-root-web{
  fill:rgba(220,178,226,.095)!important;
  stroke:rgba(227,218,246,.035)!important;
  opacity:.58!important;
}
.v138-jelly-test .v181-oral-ribbons{
  stroke-width:.34!important;
  opacity:.72!important;
}
.v138-jelly-test .v181-ribbon.r1{fill:rgba(151,199,231,.082)!important;opacity:.52!important}
.v138-jelly-test .v181-ribbon.r2{fill:rgba(204,157,226,.105)!important;opacity:.70!important}
.v138-jelly-test .v181-ribbon.r3{fill:rgba(226,164,211,.100)!important;opacity:.68!important}
.v138-jelly-test .v181-ribbon.r4{fill:rgba(143,201,230,.075)!important;opacity:.48!important}

.v138-jelly-test .v181-filaments{
  stroke:rgba(211,236,248,.155)!important;
  stroke-width:.42!important;
  opacity:.48!important;
}
.v138-jelly-test .v181-fil.f1,
.v138-jelly-test .v181-fil.f5{opacity:.28!important}
.v138-jelly-test .v181-fil.f2,
.v138-jelly-test .v181-fil.f4{opacity:.42!important}
.v138-jelly-test .v181-fil.f3{opacity:.50!important}

/* Slightly lighter bell/tissue balance so the whole animal floats rather than hangs. */
.v138-jelly-test .v181-bell{opacity:.88!important}
.v138-jelly-test .v181-inner-gel{opacity:.72!important}
.v138-jelly-test .v181-rim{opacity:.66!important}
.v138-jelly-test .v181-organs{opacity:.72!important}

.fireworks-intro[data-jelly-scene="2"] .v181-root-web{opacity:.66!important}
.fireworks-intro[data-jelly-scene="2"] .v181-oral-ribbons{opacity:.78!important}
.fireworks-intro[data-jelly-scene="2"] .v181-filaments{opacity:.52!important}

/* =========================================================
   V181 — restore visible living color without losing gel transparency.
   Recording showed V158 was too faint against the bright blue scene.
   ========================================================= */

.v138-jelly-test .v181-bell{
  opacity:.98!important;
  stroke:rgba(186,225,255,.34)!important;
  stroke-width:1.15!important;
}
.v138-jelly-test .v181-inner-gel{
  opacity:.91!important;
}
.v138-jelly-test .v181-rim{
  opacity:.88!important;
  stroke-width:3.45!important;
}
.v138-jelly-test .v181-organs{
  fill:rgba(242,119,190,.27)!important;
  stroke:rgba(255,195,177,.14)!important;
  opacity:.93!important;
}

/* Keep oral tissue light, but not invisible. */
.v138-jelly-test .v181-root-web{
  fill:rgba(208,139,227,.13)!important;
  opacity:.68!important;
}
.v138-jelly-test .v181-oral-ribbons{
  opacity:.79!important;
}
.v138-jelly-test .v181-ribbon.r1{fill:rgba(119,188,236,.12)!important;opacity:.60!important}
.v138-jelly-test .v181-ribbon.r2{fill:rgba(181,118,230,.16)!important;opacity:.78!important}
.v138-jelly-test .v181-ribbon.r3{fill:rgba(229,128,207,.15)!important;opacity:.76!important}
.v138-jelly-test .v181-ribbon.r4{fill:rgba(112,193,232,.11)!important;opacity:.58!important}
.v138-jelly-test .v181-filaments{
  stroke:rgba(188,224,246,.20)!important;
  opacity:.55!important;
}

/* Brightest homepage background needs the strongest separation. */
.fireworks-intro[data-jelly-scene="2"] .v181-bell{
  opacity:1!important;
  stroke:rgba(158,207,246,.42)!important;
}
.fireworks-intro[data-jelly-scene="2"] .v181-inner-gel{opacity:.96!important}
.fireworks-intro[data-jelly-scene="2"] .v181-rim{opacity:.97!important}
.fireworks-intro[data-jelly-scene="2"] .v181-organs{
  fill:rgba(226,105,188,.31)!important;
  opacity:1!important;
}
.fireworks-intro[data-jelly-scene="2"] .v181-root-web{opacity:.76!important}
.fireworks-intro[data-jelly-scene="2"] .v181-oral-ribbons{opacity:.84!important}

/* Scene 3 gets a touch more violet/pink density. */
.fireworks-intro[data-jelly-scene="3"] .v181-organs{
  fill:rgba(235,111,198,.29)!important;
}

/* V181 — strengthen tentacle colour only; keep V159 bell and motion intact. */
.v138-jelly-test .v181-root-web{
  fill:rgba(202,119,225,.18)!important;
  opacity:.78!important;
}
.v138-jelly-test .v181-oral-ribbons{opacity:.90!important}
.v138-jelly-test .v181-ribbon.r1{fill:rgba(91,184,239,.18)!important;opacity:.72!important}
.v138-jelly-test .v181-ribbon.r2{fill:rgba(166,91,232,.23)!important;opacity:.90!important}
.v138-jelly-test .v181-ribbon.r3{fill:rgba(232,92,199,.22)!important;opacity:.88!important}
.v138-jelly-test .v181-ribbon.r4{fill:rgba(84,191,235,.17)!important;opacity:.70!important}

.v138-jelly-test .v181-filaments{
  stroke:rgba(174,216,248,.30)!important;
  stroke-width:.46!important;
  opacity:.68!important;
}
.v138-jelly-test .v181-fil.f1{stroke:rgba(116,199,242,.25)!important;opacity:.46!important}
.v138-jelly-test .v181-fil.f2{stroke:rgba(157,131,235,.30)!important;opacity:.62!important}
.v138-jelly-test .v181-fil.f3{stroke:rgba(218,128,218,.31)!important;opacity:.70!important}
.v138-jelly-test .v181-fil.f4{stroke:rgba(139,159,239,.29)!important;opacity:.61!important}
.v138-jelly-test .v181-fil.f5{stroke:rgba(100,197,239,.24)!important;opacity:.45!important}

/* Strongest separation on the bright second background. */
.fireworks-intro[data-jelly-scene="2"] .v181-root-web{opacity:.84!important}
.fireworks-intro[data-jelly-scene="2"] .v181-oral-ribbons{opacity:.96!important}
.fireworks-intro[data-jelly-scene="2"] .v181-filaments{opacity:.75!important}

/* =========================================================
   V181 FINAL — preserve V160 color; refine only life/motion.
   ========================================================= */

/* Slightly softer tissue hierarchy: roots belong to body, tips disappear into water. */
.v138-jelly-test .v181-root-web{opacity:.75!important}
.v138-jelly-test .v181-ribbon.r1{opacity:.69!important}
.v138-jelly-test .v181-ribbon.r2{opacity:.87!important}
.v138-jelly-test .v181-ribbon.r3{opacity:.85!important}
.v138-jelly-test .v181-ribbon.r4{opacity:.67!important}
.v138-jelly-test .v181-fil.f1,
.v138-jelly-test .v181-fil.f5{opacity:.42!important}
.v138-jelly-test .v181-fil.f2,
.v138-jelly-test .v181-fil.f4{opacity:.59!important}
.v138-jelly-test .v181-fil.f3{opacity:.67!important}

/* Bell remains the visual anchor; no extra glow/filter. */
.v138-jelly-test.v181-pooled .v181-bell,
.v138-jelly-test.v181-pooled .v181-inner-gel,
.v138-jelly-test.v181-pooled .v181-rim,
.v138-jelly-test.v181-pooled .v181-root-web,
.v138-jelly-test.v181-pooled .v181-ribbon,
.v138-jelly-test.v181-pooled .v181-fil{
  filter:none!important;
  mix-blend-mode:normal!important;
  will-change:auto!important;
}

/* V181 — make water flow readable without turning tentacles into waving ropes. */
.v138-jelly-test .v181-oral-ribbons{
  opacity:.91!important;
}
.v138-jelly-test .v181-filaments{
  opacity:.72!important;
}
.v138-jelly-test .v181-fil.f1,
.v138-jelly-test .v181-fil.f5{opacity:.48!important}
.v138-jelly-test .v181-fil.f2,
.v138-jelly-test .v181-fil.f4{opacity:.65!important}
.v138-jelly-test .v181-fil.f3{opacity:.73!important}

/* Preserve the V160/V161 colour strength and light gel quality. */
.v138-jelly-test .v181-root-web{opacity:.77!important}

/* =========================================================
   V181 — restrained bioluminescence + underwater audio.
   Saturation lives inside transparent tissue; no blur/filter.
   ========================================================= */
.v138-jelly-test .v181-bell{
  opacity:1!important;
  stroke:rgba(104,232,255,.48)!important;
  stroke-width:1.28!important;
}
.v138-jelly-test .v181-inner-gel{opacity:.98!important}
.v138-jelly-test .v181-rim{opacity:.98!important;stroke-width:3.55!important}
.v138-jelly-test .v181-organs{
  fill:rgba(245,90,205,.34)!important;
  stroke:rgba(255,205,162,.18)!important;
  opacity:1!important;
}
.v138-jelly-test .v181-root-web{fill:rgba(190,91,236,.21)!important;opacity:.84!important}
.v138-jelly-test .v181-ribbon.r1{fill:rgba(61,213,255,.22)!important;opacity:.76!important}
.v138-jelly-test .v181-ribbon.r2{fill:rgba(137,72,249,.28)!important;opacity:.94!important}
.v138-jelly-test .v181-ribbon.r3{fill:rgba(244,69,207,.27)!important;opacity:.92!important}
.v138-jelly-test .v181-ribbon.r4{fill:rgba(53,205,248,.20)!important;opacity:.74!important}
.v138-jelly-test .v181-fil.f1{stroke:rgba(70,215,255,.34)!important}
.v138-jelly-test .v181-fil.f2{stroke:rgba(131,119,255,.38)!important}
.v138-jelly-test .v181-fil.f3{stroke:rgba(235,101,237,.40)!important}
.v138-jelly-test .v181-fil.f4{stroke:rgba(149,113,255,.36)!important}
.v138-jelly-test .v181-fil.f5{stroke:rgba(67,209,250,.32)!important}

/* Bright background keeps separation without turning opaque. */
.fireworks-intro[data-jelly-scene="2"] .v181-bell{stroke:rgba(75,202,248,.58)!important}
.fireworks-intro[data-jelly-scene="2"] .v181-rim{opacity:1!important}
.fireworks-intro[data-jelly-scene="2"] .v181-organs{fill:rgba(229,67,197,.39)!important}

.v138-jelly-test.v181-pooled .v181-bell,
.v138-jelly-test.v181-pooled .v181-inner-gel,
.v138-jelly-test.v181-pooled .v181-rim,
.v138-jelly-test.v181-pooled .v181-organs,
.v138-jelly-test.v181-pooled .v181-root-web,
.v138-jelly-test.v181-pooled .v181-ribbon,
.v138-jelly-test.v181-pooled .v181-fil{
  filter:none!important;
  mix-blend-mode:normal!important;
}

/* =========================================================
   V181 FINAL JELLY REFINEMENT
   - no jelly sound
   - less circular / less game-like bell
   - dispersed internal bioluminescence
   - asynchronous hydrodynamic oral arms
   ========================================================= */

/* Keep the gel luminous but break up the "pink glowing ball" impression. */
.v138-jelly-test .v181-inner-gel{opacity:.86!important}
.v138-jelly-test .v181-organs{
  fill:rgba(218,111,203,.23)!important;
  stroke:rgba(255,190,173,.10)!important;
  opacity:.82!important;
}
.v138-jelly-test .v181-rim{
  opacity:.91!important;
  stroke-width:3.15!important;
}

/* Oral arms remain colored but slightly more tissue-like than neon ribbons. */
.v138-jelly-test .v181-ribbon.r1{opacity:.70!important}
.v138-jelly-test .v181-ribbon.r2{opacity:.84!important}
.v138-jelly-test .v181-ribbon.r3{opacity:.82!important}
.v138-jelly-test .v181-ribbon.r4{opacity:.68!important}
.v138-jelly-test .v181-filaments{opacity:.70!important}

/* No heavy rendering effects. */
.v138-jelly-test.v181-pooled svg,
.v138-jelly-test.v181-pooled .v181-bell,
.v138-jelly-test.v181-pooled .v181-ribbon,
.v138-jelly-test.v181-pooled .v181-fil{
  filter:none!important;
  mix-blend-mode:normal!important;
}

/* V181 — V164 tentacle appearance restored; motion upgraded to circulating water. */
.v138-jelly-test.v181-pooled .v181-ribbon,
.v138-jelly-test.v181-pooled .v181-fil,
.v138-jelly-test.v181-pooled .v181-root-web{
  filter:none!important;
  mix-blend-mode:normal!important;
  will-change:auto!important;
}

/* V181 — geometry unchanged; make the moving water readable to the eye. */
.v138-jelly-test .v181-oral-ribbons{opacity:.88!important}
.v138-jelly-test .v181-filaments{opacity:.72!important}
.v138-jelly-test.v181-pooled .v181-ribbon,
.v138-jelly-test.v181-pooled .v181-fil{
  filter:none!important;
  mix-blend-mode:normal!important;
}

/* V181 — freer, more visible water-driven tentacle motion. Geometry unchanged. */
.v138-jelly-test .v181-oral-ribbons{opacity:.90!important}
.v138-jelly-test .v181-filaments{opacity:.75!important}

/* =========================================================
   V181 — continuous rotational-flow final + iPhone/Xiaomi compatibility.
   No new filters, no blend modes, no layout-thrashing animation.
   ========================================================= */
.v138-jelly-test.v181-pooled,
.v138-jelly-test.v181-pooled svg{
  -webkit-transform:translateZ(0);
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
.v138-jelly-test.v181-pooled .v181-ribbon,
.v138-jelly-test.v181-pooled .v181-fil,
.v138-jelly-test.v181-pooled .v181-root-web{
  filter:none!important;
  mix-blend-mode:normal!important;
}

/* Respect safe-area geometry on modern iPhone browsers/web-app mode. */
@supports (padding-bottom: env(safe-area-inset-bottom)){
  .fireworks-intro{
    padding-bottom:env(safe-area-inset-bottom);
  }
}

/* Xiaomi/Android Chromium: avoid text-size auto-adjust affecting surrounding layout. */
html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

/* =========================================================
   V181 — bell/tentacle causal coupling
   Geometry, color and fluorescence remain from V169.
   ========================================================= */
.v138-jelly-test.v181-pooled .v181-ribbon,
.v138-jelly-test.v181-pooled .v181-fil,
.v138-jelly-test.v181-pooled .v181-root-web{
  filter:none!important;
  mix-blend-mode:normal!important;
}

/* Keep visibility stable while the arms gather/fan. */
.v138-jelly-test .v181-oral-ribbons{opacity:.89!important}
.v138-jelly-test .v181-filaments{opacity:.73!important}

/* =========================================================
   V181 — stronger 3-stage coupling + restore visible fluorescence
   ========================================================= */

/* Bell/body: transparent gel, but no longer washed out. */
.v138-jelly-test .v181-bell{
  opacity:1!important;
  stroke:rgba(176,224,255,.44)!important;
}
.v138-jelly-test .v181-inner-gel{
  opacity:.96!important;
}
.v138-jelly-test .v181-rim{
  opacity:.98!important;
  stroke-width:3.5!important;
}
.v138-jelly-test .v181-organs{
  fill:rgba(232,105,202,.31)!important;
  stroke:rgba(255,195,177,.14)!important;
  opacity:.98!important;
}
.v138-jelly-test .v181-root-web{
  fill:rgba(200,116,228,.18)!important;
  opacity:.84!important;
}

/* Oral arms: stronger local bioluminescence, still translucent. */
.v138-jelly-test .v181-oral-ribbons{opacity:.96!important}
.v138-jelly-test .v181-ribbon.r1{
  fill:rgba(92,190,240,.22)!important;
  opacity:.78!important;
}
.v138-jelly-test .v181-ribbon.r2{
  fill:rgba(170,95,237,.28)!important;
  opacity:.96!important;
}
.v138-jelly-test .v181-ribbon.r3{
  fill:rgba(236,95,207,.27)!important;
  opacity:.94!important;
}
.v138-jelly-test .v181-ribbon.r4{
  fill:rgba(86,196,238,.21)!important;
  opacity:.76!important;
}

/* Fine filaments must be readable during the 3-stage motion. */
.v138-jelly-test .v181-filaments{
  stroke:rgba(190,225,252,.34)!important;
  stroke-width:.48!important;
  opacity:.80!important;
}
.v138-jelly-test .v181-fil.f1,
.v138-jelly-test .v181-fil.f5{opacity:.56!important}
.v138-jelly-test .v181-fil.f2,
.v138-jelly-test .v181-fil.f4{opacity:.72!important}
.v138-jelly-test .v181-fil.f3{opacity:.82!important}

/* Bright scene 2 gets extra separation so color doesn't disappear. */
.fireworks-intro[data-jelly-scene="2"] .v181-bell{
  stroke:rgba(154,211,250,.52)!important;
}
.fireworks-intro[data-jelly-scene="2"] .v181-inner-gel{opacity:1!important}
.fireworks-intro[data-jelly-scene="2"] .v181-rim{opacity:1!important}
.fireworks-intro[data-jelly-scene="2"] .v181-organs{opacity:1!important}
.fireworks-intro[data-jelly-scene="2"] .v181-oral-ribbons{opacity:1!important}
.fireworks-intro[data-jelly-scene="2"] .v181-filaments{opacity:.86!important}

/* Keep rendering lightweight. */
.v138-jelly-test.v181-pooled .v181-bell,
.v138-jelly-test.v181-pooled .v181-ribbon,
.v138-jelly-test.v181-pooled .v181-fil,
.v138-jelly-test.v181-pooled .v181-root-web{
  filter:none!important;
  mix-blend-mode:normal!important;
}

/* V181 — make gather/fan visually unmistakable; retain V171 fluorescence. */
.v138-jelly-test .v181-oral-ribbons{opacity:.98!important}
.v138-jelly-test .v181-filaments{opacity:.84!important}
.v138-jelly-test .v181-root-web{opacity:.88!important}

/* =========================================================
   V181 — bell-locked rotational gather/fan
   Keep the V171/V172 visible fluorescence; no heavier filters.
   ========================================================= */
.v138-jelly-test .v181-oral-ribbons{opacity:.98!important}
.v138-jelly-test .v181-filaments{opacity:.84!important}
.v138-jelly-test .v181-root-web{opacity:.88!important}
.v138-jelly-test.v181-pooled .v181-ribbon,
.v138-jelly-test.v181-pooled .v181-fil{
  filter:none!important;
  mix-blend-mode:normal!important;
}

/* V181 — master-clock bell/tentacle synchronization */
.v138-jelly-test .v181-oral-ribbons{opacity:.98!important}
.v138-jelly-test .v181-filaments{opacity:.86!important}
.v138-jelly-test .v181-root-web{opacity:.90!important}
.v138-jelly-test.v181-pooled .v181-ribbon,
.v138-jelly-test.v181-pooled .v181-fil{
  filter:none!important;
  mix-blend-mode:normal!important;
}

/* =========================================================
   V181 — performance + coordinated rotational gather/fan
   ========================================================= */
.v138-jelly-test .v181-ribbon,
.v138-jelly-test .v181-fil{
  transform-box:view-box;
  will-change:transform;
}
.v138-jelly-test .v181-oral-ribbons{opacity:.98!important}
.v138-jelly-test .v181-filaments{opacity:.86!important}
.v138-jelly-test .v181-root-web{opacity:.90!important}
.v138-jelly-test.v181-pooled .v181-ribbon,
.v138-jelly-test.v181-pooled .v181-fil{
  filter:none!important;
  mix-blend-mode:normal!important;
}

/* =========================================================
   V181 — consolidated final motion repair
   ========================================================= */
.v138-jelly-test .v181-oral-ribbons{opacity:.98!important}
.v138-jelly-test .v181-filaments{opacity:.86!important}
.v138-jelly-test .v181-root-web{opacity:.90!important}
.v138-jelly-test.v181-pooled .v181-ribbon,
.v138-jelly-test.v181-pooled .v181-fil,
.v138-jelly-test.v181-pooled .v181-root-web{
  filter:none!important;
  mix-blend-mode:normal!important;
}
html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
@supports (padding-bottom:env(safe-area-inset-bottom)){
  .fireworks-intro{padding-bottom:env(safe-area-inset-bottom)}
}

/* =========================================================
   V181 — softer natural bell/tentacle coordination
   Transform-only motion for mobile smoothness.
   ========================================================= */
.v138-jelly-test .v181-ribbon,
.v138-jelly-test .v181-fil{
  transform-box:view-box;
  will-change:transform;
}
.v138-jelly-test .v181-oral-ribbons{opacity:.96!important}
.v138-jelly-test .v181-filaments{opacity:.82!important}
.v138-jelly-test .v181-root-web{opacity:.88!important}
.v138-jelly-test.v181-pooled .v181-ribbon,
.v138-jelly-test.v181-pooled .v181-fil,
.v138-jelly-test.v181-pooled .v181-root-web{
  filter:none!important;
  mix-blend-mode:normal!important;
}

/* V181 — smaller reopening amplitude; preserve V177 smooth motion. */

/* V181 — opening returns to neutral; no active outward fan. */

/* V181: remove artificial bell linework and keep only soft gel silhouette. */
.v138-jelly-test [class*="rib"],
.v138-jelly-test [class*="seam"],
.v138-jelly-test [class*="skirt-line"],
.v138-jelly-test [class*="bell-line"]{
  opacity:.10!important;
}
.v138-jelly-test .v181-rim{
  opacity:.38!important;
}
.v138-jelly-test .v181-bell,
.v138-jelly-test .v181-bell-body{
  transform-box:view-box;
  will-change:transform;
}

/* =========================================================
   V181 — separate bell / rim / tentacles to prevent clipping
   ========================================================= */
.v138-jelly-test .v181-oral-ribbons{
  opacity:.98!important;
  visibility:visible!important;
}
.v138-jelly-test .v181-filaments{
  opacity:.88!important;
  visibility:visible!important;
}
.v138-jelly-test .v181-root-web{
  opacity:.90!important;
  visibility:visible!important;
}
.v138-jelly-test .v181-rim{
  opacity:.34!important;
  overflow:visible!important;
}
.v138-jelly-test .v181-bell{
  overflow:visible!important;
}
.v138-jelly-test .v181-ribbon,
.v138-jelly-test .v181-fil{
  filter:none!important;
  mix-blend-mode:normal!important;
  transform-box:view-box;
  will-change:transform;
}
/* Prevent the lower rim from visually escaping the translucent bell. */
.v138-jelly-test .v181-rim{
  stroke-width:2.2!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
}


/* V228 F16 — exact V203 finalized jelly CSS restored */
/* =========================================================
   V203 — three-membrane gelatinous bell + real umbrella contraction
   Test mode remains: taps spawn only the new jellyfish.
   ========================================================= */
.v138-jelly-test{z-index:42!important;width:min(61vw,286px)!important;filter:none!important;}
.v203-jelly-svg{filter:drop-shadow(0 0 10px rgba(156,115,245,.23))!important;}
.v203-bell{transform-box:fill-box;transform-origin:50% 78%;animation:v203Bell 3.72s cubic-bezier(.23,.02,.12,1) var(--v138-phase,0s) infinite;will-change:transform;}
.v203-bell-shadow{opacity:.96;filter:drop-shadow(0 0 10px rgba(189,153,255,.25));}
.v203-bell-gel{opacity:.91;mix-blend-mode:screen;}
.v203-bell-sheen{fill:rgba(255,252,255,.16);filter:blur(.45px);}
.v203-bell-sheen-r{opacity:.68;}
.v203-inner{transform-box:fill-box;transform-origin:50% 56%;animation:v203Inner 3.72s cubic-bezier(.23,.02,.12,1) var(--v138-phase,0s) infinite;}
.v203-core{opacity:.82;}
.v203-organ{fill:rgba(203,164,255,.52);filter:drop-shadow(0 0 4px rgba(205,168,255,.32));}
.v203-ribs{fill:none;stroke:rgba(239,228,255,.38);stroke-width:1.05;stroke-linecap:round;vector-effect:non-scaling-stroke;}
.v203-rim-band{opacity:.54;mix-blend-mode:screen;transform-box:fill-box;transform-origin:50% 50%;animation:v203RimBand 3.72s cubic-bezier(.2,.02,.13,1) var(--v138-phase,0s) infinite;}
.v203-rim-line{fill:none;stroke:rgba(255,250,255,.76);stroke-width:1.28;stroke-linecap:round;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 3px rgba(228,211,255,.35));}
.v203-edge-line{fill:none;stroke:rgba(250,245,255,.73);stroke-width:1.18;stroke-linecap:round;vector-effect:non-scaling-stroke;opacity:.90;}
.v203-arms,.v203-filaments{transform-box:fill-box;transform-origin:50% 0%;}
.v203-arm{fill:none;stroke-width:9.5;stroke-linecap:round;filter:drop-shadow(0 0 4px rgba(180,143,247,.19));transform-box:fill-box;transform-origin:50% 0%;opacity:.72;}
.v203-arm-a{animation:v203ArmA 5.15s ease-in-out -.35s infinite}.v203-arm-b{animation:v203ArmB 5.85s ease-in-out -1.05s infinite}.v203-arm-c{animation:v203ArmA 5.5s ease-in-out -1.75s infinite reverse}.v203-arm-d{animation:v203ArmB 6.15s ease-in-out -.75s infinite reverse}
.v203-filament{fill:none;stroke:rgba(230,214,255,.34);stroke-width:1.18;stroke-linecap:round;vector-effect:non-scaling-stroke;transform-box:fill-box;transform-origin:50% 0%;}
.v203-filament-a{animation:v203ThreadA 6.9s ease-in-out -.7s infinite}.v203-filament-b{animation:v203ThreadB 7.5s ease-in-out -2.1s infinite}.v203-filament-c{animation:v203ThreadA 6.2s ease-in-out -3.2s infinite reverse}.v203-filament-d{animation:v203ThreadB 7.2s ease-in-out -1.3s infinite reverse}.v203-filament-e{animation:v203ThreadA 6.7s ease-in-out -2.7s infinite}.v203-filament-f{animation:v203ThreadB 7.9s ease-in-out -.2s infinite reverse}
.v203-swimmer{animation:v203Thrust 3.72s cubic-bezier(.2,.03,.15,1) var(--v138-phase,0s) infinite!important;}

/* Expanded bell is wide/soft. The lower rim curls inward first; contraction is quick and tall. */
@keyframes v203Bell{
  0%,8%{transform:translate3d(0,2px,0) scaleX(1.10) scaleY(.91)}
  28%{transform:translate3d(0,4px,0) scaleX(1.13) scaleY(.89)}
  48%{transform:translate3d(0,4px,0) scaleX(1.11) scaleY(.90)}
  57%{transform:translate3d(0,1px,0) scaleX(1.03) scaleY(.98)}
  64%{transform:translate3d(0,-5px,0) scaleX(.86) scaleY(1.15)}
  69%{transform:translate3d(0,-8px,0) scaleX(.76) scaleY(1.27)}
  73%{transform:translate3d(0,-9px,0) scaleX(.78) scaleY(1.25)}
  81%{transform:translate3d(0,-4px,0) scaleX(.94) scaleY(1.07)}
  91%{transform:translate3d(0,0,0) scaleX(1.055) scaleY(.955)}
  100%{transform:translate3d(0,2px,0) scaleX(1.10) scaleY(.91)}
}
@keyframes v203Inner{
  0%,48%,100%{opacity:.69;transform:translateY(1px) scaleX(1.02) scaleY(.98)}
  58%{opacity:.76;transform:translateY(-1px) scale(.96)}
  69%,73%{opacity:1;transform:translateY(-5px) scaleX(.81) scaleY(1.07)}
  84%{opacity:.82;transform:translateY(-2px) scale(.94)}
}
@keyframes v203RimBand{
  0%,48%,100%{opacity:.47;transform:translateY(0) scaleX(1.02) scaleY(.9)}
  58%{opacity:.60;transform:translateY(-2px) scaleX(.94) scaleY(1.1)}
  69%,73%{opacity:.86;transform:translateY(-9px) scaleX(.72) scaleY(1.65)}
  84%{opacity:.60;transform:translateY(-3px) scaleX(.91) scaleY(1.15)}
}
@keyframes v203Thrust{0%,56%,100%{transform:translate3d(0,0,0) rotate(-.22deg)}66%{transform:translate3d(0,2px,0) rotate(.22deg)}73%{transform:translate3d(0,-13px,0) rotate(.38deg)}82%{transform:translate3d(1px,-9px,0) rotate(-.26deg)}92%{transform:translate3d(-1px,-3px,0) rotate(-.18deg)}}
@keyframes v203ArmA{0%,100%{transform:translate3d(-2px,0,0) rotate(-1.4deg) skewX(-1deg)}48%{transform:translate3d(8px,4px,0) rotate(2.7deg) skewX(2.8deg)}72%{transform:translate3d(4px,10px,0) rotate(1.4deg) skewX(1.2deg)}}
@keyframes v203ArmB{0%,100%{transform:translate3d(2px,1px,0) rotate(1deg) skewX(1deg)}46%{transform:translate3d(-9px,5px,0) rotate(-2.5deg) skewX(-3deg)}75%{transform:translate3d(-4px,11px,0) rotate(-1.1deg) skewX(-1.4deg)}}
@keyframes v203ThreadA{0%,100%{transform:translate3d(-2px,0,0) rotate(-.8deg)}50%{transform:translate3d(11px,5px,0) rotate(2.4deg)}72%{transform:translate3d(6px,10px,0) rotate(1deg)}}
@keyframes v203ThreadB{0%,100%{transform:translate3d(3px,1px,0) rotate(.9deg)}50%{transform:translate3d(-12px,5px,0) rotate(-2.6deg)}74%{transform:translate3d(-6px,10px,0) rotate(-1.2deg)}}

@media(max-width:430px){
  .v138-jelly-test{width:min(68vw,278px)!important;bottom:-19vh!important;}
  .v203-edge-line,.v203-rim-line{stroke-width:1.35!important;}
}

/* === V203 single jelly / organic bell refinement === */
.v203-new-jelly, .v139-new-jelly{
  width:min(38vw, 176px)!important;
  height:min(76vw, 350px)!important;
  transform-origin:50% 25%;
}
.v203-new-jelly .v139-bell,
.v139-new-jelly .v139-bell,
.v203-new-jelly .v138-bell,
.v139-new-jelly .v138-bell{
  transform-origin:50% 82%!important;
  animation:v203BellOrganic 3.75s cubic-bezier(.37,.05,.22,1) infinite!important;
  will-change:transform,filter;
}
@keyframes v203BellOrganic{
  0%   {transform:translateX(-1.2%) scaleX(1.035) scaleY(.91) rotate(-.45deg);filter:brightness(.98)}
  34%  {transform:translateX(.7%) scaleX(1.075) scaleY(.885) rotate(.35deg);filter:brightness(1)}
  49%  {transform:translateX(-.5%) scaleX(1.055) scaleY(.90) rotate(-.2deg);filter:brightness(1.01)}
  58%  {transform:translateY(-2px) translateX(.8%) scaleX(.80) scaleY(1.105) rotate(.45deg);filter:brightness(1.13)}
  65%  {transform:translateY(-5px) translateX(-.4%) scaleX(.75) scaleY(1.16) rotate(-.25deg);filter:brightness(1.18)}
  72%  {transform:translateY(-3px) translateX(.5%) scaleX(.87) scaleY(1.06) rotate(.25deg);filter:brightness(1.08)}
  100% {transform:translateX(-1.2%) scaleX(1.035) scaleY(.91) rotate(-.45deg);filter:brightness(.98)}
}
.v203-new-jelly .v139-bell-edge,
.v139-new-jelly .v139-bell-edge{
  animation:v203EdgeCurl 3.75s cubic-bezier(.37,.05,.22,1) infinite!important;
  transform-origin:50% 78%;
}
@keyframes v203EdgeCurl{
  0%,45%,100%{transform:scaleX(1) scaleY(1) translateY(0)}
  58%{transform:scaleX(.89) scaleY(.82) translateY(-2px)}
  65%{transform:scaleX(.80) scaleY(.72) translateY(-4px)}
  74%{transform:scaleX(.93) scaleY(.90) translateY(-1px)}
}
/* one contraction gives a small whole-body thrust; relaxation glides */
.v203-new-jelly .v139-body,
.v139-new-jelly .v139-body,
.v203-new-jelly .v138-body,
.v139-new-jelly .v138-body{
  animation:v203PulseThrust 3.75s cubic-bezier(.3,.05,.2,1) infinite!important;
}
@keyframes v203PulseThrust{
  0%,50%{transform:translate3d(0,0,0)}
  66%{transform:translate3d(1px,-8px,0)}
  78%{transform:translate3d(-1px,-10px,0)}
  100%{transform:translate3d(0,-7px,0)}
}
/* make asymmetry subtle, not mechanical */
.v203-new-jelly svg,
.v139-new-jelly svg{overflow:visible}

/* === V203: restrained contraction + delayed thrust + softer rim === */
/* Keep the attractive broad relaxed state; contraction is narrower/rounder, never needle-like. */
.v203-new-jelly .v139-bell,
.v140-new-jelly .v139-bell,
.v139-new-jelly .v139-bell,
.v203-new-jelly .v138-bell,
.v140-new-jelly .v138-bell,
.v139-new-jelly .v138-bell{
  transform-origin:50% 80%!important;
  animation:v203BellNatural 3.82s cubic-bezier(.36,.04,.2,1) infinite!important;
}
@keyframes v203BellNatural{
  0%   {transform:translateX(-.8%) scaleX(1.045) scaleY(.92) rotate(-.28deg);filter:brightness(.98)}
  36%  {transform:translateX(.55%) scaleX(1.075) scaleY(.90) rotate(.22deg);filter:brightness(1)}
  50%  {transform:translateX(-.25%) scaleX(1.055) scaleY(.915) rotate(-.12deg);filter:brightness(1.01)}
  59%  {transform:translateY(-1px) translateX(.5%) scaleX(.88) scaleY(1.025) rotate(.25deg);filter:brightness(1.08)}
  66%  {transform:translateY(-2px) translateX(-.25%) scaleX(.82) scaleY(1.07) rotate(-.16deg);filter:brightness(1.12)}
  73%  {transform:translateY(-1px) translateX(.35%) scaleX(.91) scaleY(1.015) rotate(.14deg);filter:brightness(1.05)}
  100% {transform:translateX(-.8%) scaleX(1.045) scaleY(.92) rotate(-.28deg);filter:brightness(.98)}
}
/* Rim folds inward during contraction, but loses the glass-dome outline. */
.v203-new-jelly .v139-bell-edge,
.v140-new-jelly .v139-bell-edge,
.v139-new-jelly .v139-bell-edge{
  opacity:.30!important;
  filter:blur(.35px)!important;
  transform-origin:50% 76%!important;
  animation:v203SoftRim 3.82s ease-in-out infinite!important;
}
@keyframes v203SoftRim{
  0%,47%,100%{transform:scaleX(1.01) scaleY(.96) translateY(0);opacity:.25}
  60%{transform:scaleX(.91) scaleY(.88) translateY(-1px);opacity:.34}
  67%{transform:scaleX(.84) scaleY(.80) translateY(-3px);opacity:.38}
  77%{transform:scaleX(.94) scaleY(.91) translateY(-1px);opacity:.29}
}
/* Propulsion begins only after the bell has nearly completed contraction. */
.v203-new-jelly .v139-body,
.v140-new-jelly .v139-body,
.v139-new-jelly .v139-body,
.v203-new-jelly .v138-body,
.v140-new-jelly .v138-body,
.v139-new-jelly .v138-body{
  animation:v203DelayedThrust 3.82s cubic-bezier(.28,.05,.18,1) infinite!important;
}
@keyframes v203DelayedThrust{
  0%,61%{transform:translate3d(0,0,0)}
  69%{transform:translate3d(.5px,-3px,0)}
  76%{transform:translate3d(-.6px,-8px,0)}
  86%{transform:translate3d(.3px,-10px,0)}
  100%{transform:translate3d(0,-8px,0)}
}

/* V203 — bell aperture curl illusion + pulse/glide separation */
.v203-new-jelly .v139-bell,
.v141-new-jelly .v139-bell,
.v140-new-jelly .v139-bell,
.v139-new-jelly .v139-bell{
  transform-origin:50% 84%!important;
  animation:v203BellBody 3.95s cubic-bezier(.34,.03,.18,1) infinite!important;
}
@keyframes v203BellBody{
  0%{transform:translateX(-.7%) scaleX(1.06) scaleY(.91) rotate(-.22deg)}
  40%{transform:translateX(.45%) scaleX(1.085) scaleY(.895) rotate(.18deg)}
  52%{transform:translateX(-.2%) scaleX(1.06) scaleY(.91) rotate(-.1deg)}
  61%{transform:translateY(-1px) translateX(.35%) scaleX(.91) scaleY(1.015) rotate(.18deg)}
  68%{transform:translateY(-2px) translateX(-.2%) scaleX(.85) scaleY(1.055) rotate(-.12deg)}
  75%{transform:translateY(-1px) translateX(.25%) scaleX(.93) scaleY(1.005) rotate(.1deg)}
  100%{transform:translateX(-.7%) scaleX(1.06) scaleY(.91) rotate(-.22deg)}
}
/* Lower rim visibly participates: folds inward and upward rather than staying horizontal. */
.v203-new-jelly .v139-bell-edge,
.v141-new-jelly .v139-bell-edge,
.v140-new-jelly .v139-bell-edge,
.v139-new-jelly .v139-bell-edge{
  opacity:.22!important;
  transform-origin:50% 72%!important;
  animation:v203ApertureCurl 3.95s cubic-bezier(.3,.02,.18,1) infinite!important;
}
@keyframes v203ApertureCurl{
  0%,50%,100%{transform:translateY(0) scaleX(1.04) scaleY(.93) rotate(0deg);opacity:.20}
  60%{transform:translateY(-2px) scaleX(.90) scaleY(.82) rotate(.2deg);opacity:.28}
  68%{transform:translateY(-5px) scaleX(.76) scaleY(.68) rotate(-.15deg);opacity:.34}
  77%{transform:translateY(-2px) scaleX(.91) scaleY(.86) rotate(.1deg);opacity:.25}
}
/* organic membrane wobble, deliberately tiny */
.v203-new-jelly svg,
.v141-new-jelly svg,
.v140-new-jelly svg,
.v139-new-jelly svg{
  transform-origin:50% 45%;
  animation:v203MembraneBias 7.6s ease-in-out infinite alternate;
}
@keyframes v203MembraneBias{
  0%{transform:skewX(-.45deg) rotate(-.12deg)}
  45%{transform:skewX(.25deg) rotate(.1deg)}
  100%{transform:skewX(.55deg) rotate(.16deg)}
}
/* stronger distinction: almost-still glide, then short pulse thrust */
.v203-new-jelly .v139-body,
.v141-new-jelly .v139-body,
.v140-new-jelly .v139-body,
.v139-new-jelly .v139-body,
.v203-new-jelly .v138-body,
.v141-new-jelly .v138-body{
  animation:v203PulseGlide 3.95s cubic-bezier(.25,.04,.16,1) infinite!important;
}
@keyframes v203PulseGlide{
  0%,63%{transform:translate3d(0,0,0)}
  69%{transform:translate3d(.4px,-2px,0)}
  75%{transform:translate3d(-.5px,-10px,0)}
  82%{transform:translate3d(.25px,-13px,0)}
  100%{transform:translate3d(0,-10px,0)}
}

/* === V203: true path-morph bell inspection mode === */
/* Disable old whole-bell scale animation: SVG paths themselves now change shape. */
.v138-jelly-test .v203-bell{
  animation:none!important;
  transform:none!important;
  filter:none!important;
}
/* Hide all temporary arms/filaments. Bell only. */
.v138-jelly-test .v203-arms,
.v138-jelly-test .v203-filaments{
  display:none!important;
}
/* Keep the bell large enough to inspect, but not screen-filling. */
.v138-jelly-test{
  width:min(36vw,168px)!important;
}
.v138-jelly-test .v203-jelly-svg{
  overflow:visible;
}
/* membrane should read as water, not a drawn glass outline */
.v138-jelly-test .v203-edge-line{
  fill:none!important;
  stroke:rgba(231,220,255,.20)!important;
  stroke-width:1.15!important;
  filter:blur(.28px);
}
.v138-jelly-test .v203-rim-line{
  fill:none!important;
  stroke:rgba(240,230,255,.18)!important;
  stroke-width:1.05!important;
  filter:blur(.38px);
}
.v138-jelly-test .v203-rim-band{opacity:.48!important}
.v138-jelly-test .v203-bell-sheen{opacity:.28!important}
.v138-jelly-test .v203-inner{opacity:.80!important}

/* Whole body remains nearly still until the contraction is almost complete. */
.v138-jelly-test .v203-swimmer{
  animation:v203BodyPulse 3.95s cubic-bezier(.25,.04,.16,1) infinite!important;
}
@keyframes v203BodyPulse{
  0%,64%{transform:translate3d(0,0,0)}
  70%{transform:translate3d(.4px,-2px,0)}
  77%{transform:translate3d(-.4px,-8px,0)}
  85%{transform:translate3d(.2px,-11px,0)}
  100%{transform:translate3d(0,-8px,0)}
}

/* =========================================================
   V203 — bell lock-in + touch-performance pass
   ========================================================= */

/* WAAPI owns the long rise now; disable the old CSS rise. */
.v138-jelly-test.v138-live{animation:none!important}

/* One prewarmed layer gets composited once; taps only reposition/restart it. */
.v138-jelly-test.v203-pooled{
  contain:layout style paint;
  transform:translate3d(-50%,0,0);
  backface-visibility:hidden;
}
.v138-jelly-test.v203-pooled .v203-jelly-svg{
  filter:none!important; /* costly drop-shadow removed from the whole SVG */
  transform:translateZ(0);
}

/* Less perfect dome: slightly flatter top, tiny organic lean. */
.v138-jelly-test .v203-bell{
  transform-origin:50% 76%!important;
  animation:v203MicroAsym 7.2s ease-in-out infinite alternate!important;
}
@keyframes v203MicroAsym{
  0%{transform:skewX(-.45deg) rotate(-.16deg)}
  46%{transform:skewX(.18deg) rotate(.08deg)}
  100%{transform:skewX(.5deg) rotate(.15deg)}
}

/* Kill the umbrella-spoke language. */
.v138-jelly-test .v203-ribs{display:none!important}
.v138-jelly-test .v203-lobes{
  fill:rgba(202,174,255,.16);
  opacity:.72;
  animation:v203LobeBreath 3.95s ease-in-out infinite;
}
@keyframes v203LobeBreath{
  0%,50%,100%{opacity:.50;transform:scale(1)}
  69%{opacity:.72;transform:scale(.94)}
  78%{opacity:.60;transform:scale(.97)}
}

/* Softer bell edge / scalloped aperture: no glass-rim look. */
.v138-jelly-test .v203-edge-line{
  stroke:rgba(239,230,255,.13)!important;
  stroke-width:.82!important;
  filter:none!important;
}
.v138-jelly-test .v203-rim-line{
  stroke:rgba(244,234,255,.12)!important;
  stroke-width:.78!important;
  filter:none!important;
}
.v138-jelly-test .v203-rim-band{
  opacity:.34!important;
}
.v138-jelly-test .v203-bell-sheen{
  opacity:.19!important;
}
.v138-jelly-test .v203-inner{
  opacity:.67!important;
  filter:none!important;
}

/* Keep inspection clean: no temporary arms/tentacles yet. */
.v138-jelly-test .v203-arms,
.v138-jelly-test .v203-filaments{
  display:none!important;
}

/* Pulse is short; most of the cycle is calm gliding. */
.v138-jelly-test .v203-swimmer{
  will-change:transform;
  animation:v203Pulse 3.95s cubic-bezier(.24,.03,.15,1) infinite!important;
}
@keyframes v203Pulse{
  0%,64%{transform:translate3d(0,0,0)}
  70%{transform:translate3d(.3px,-1px,0)}
  76%{transform:translate3d(-.35px,-6px,0)}
  83%{transform:translate3d(.15px,-8px,0)}
  100%{transform:translate3d(0,-6px,0)}
}

/* Keep the test bell visually readable without making SVG rasterization huge. */
.v138-jelly-test{width:min(35vw,164px)!important}
@media(max-width:430px){
  .v138-jelly-test{width:min(42vw,176px)!important;bottom:-17vh!important}
}

/* =========================================================
   V203 — single-motion performance architecture
   Goal: leave headroom for future oral arms + tentacles.
   ========================================================= */

/* Only the outer pooled element moves through the water. */
.v138-jelly-test.v203-pooled{
  contain:layout paint style;
  isolation:isolate;
  backface-visibility:hidden;
  transform:translate3d(-50%,0,0);
  will-change:transform,opacity;
}

/* The inner swimmer MUST NOT run a competing transform animation. */
.v138-jelly-test .v203-swimmer{
  animation:none!important;
  transform:none!important;
  will-change:auto!important;
}

/* SVG stays light: two animated paths, no live blur/drop-shadow/blend filters. */
.v138-jelly-test .v203-jelly-svg{
  overflow:visible;
  filter:none!important;
  transform:none!important;
  animation:none!important;
  shape-rendering:geometricPrecision;
}

/* Path morphing itself supplies the breathing, so no group-scale animation. */
.v138-jelly-test .v203-bell{
  animation:none!important;
  transform:none!important;
  filter:none!important;
}

/* Membrane material: translucent but not glassy. */
.v138-jelly-test .v203-membrane{
  opacity:.96;
  stroke:rgba(241,233,255,.10);
  stroke-width:.7;
  vector-effect:non-scaling-stroke;
}
.v138-jelly-test .v203-rim{
  opacity:.52;
}
.v138-jelly-test .v203-highlight{
  fill:rgba(255,253,255,.095);
  opacity:.82;
}

/* Soft internal tissue, deliberately static for performance and realism. */
.v138-jelly-test .v203-core{
  opacity:.62;
}
.v138-jelly-test .v203-organs{
  fill:rgba(199,171,245,.13);
  opacity:.82;
}

/* Keep the test bell clean and at a moderate raster size. */
.v138-jelly-test{
  width:min(36vw,166px)!important;
  aspect-ratio:240/250!important;
  bottom:-14vh!important;
}
@media(max-width:430px){
  .v138-jelly-test{
    width:min(40vw,170px)!important;
    bottom:-13vh!important;
  }
}

/* Old test-era transforms/filters should never leak onto the active V203 node. */
.v138-jelly-test.v203-pooled .v138-jelly-svg,
.v138-jelly-test.v203-pooled .v138-swimmer,
.v138-jelly-test.v203-pooled .v203-bell,
.v138-jelly-test.v203-pooled .v203-core,
.v138-jelly-test.v203-pooled .v203-organs{
  filter:none!important;
  mix-blend-mode:normal!important;
}

/* =========================================================
   V203 — three-background adaptive jelly material + scale
   Measured against the actual homepage-user-v120-1/2/3 images.
   Motion architecture from V145 is untouched.
   ========================================================= */

/* Shared: cool transparent body, lavender concentrated internally. */
.fireworks-intro .v138-jelly-test.v203-pooled{
  --jelly-scale:1;
  --jelly-opacity:1;
  opacity:var(--jelly-opacity);
}
.fireworks-intro .v138-jelly-test.v203-pooled .v203-jelly-svg{
  transform:scale(var(--jelly-scale))!important;
  transform-origin:50% 58%!important;
}
.fireworks-intro .v138-jelly-test .v203-membrane{
  fill-opacity:.94;
}
.fireworks-intro .v138-jelly-test .v203-core{
  opacity:.54;
}
.fireworks-intro .v138-jelly-test .v203-organs{
  opacity:.76;
}
.fireworks-intro .v138-jelly-test .v203-rim{
  opacity:.46;
}
.fireworks-intro .v138-jelly-test .v203-highlight{
  opacity:.72;
}

/* Scene 1 — darkest/deepest blue:
   slightly larger and more luminous, but still transparent. */
.fireworks-intro[data-jelly-scene="1"] .v138-jelly-test.v203-pooled{
  --jelly-scale:1.045;
  --jelly-opacity:.99;
}
.fireworks-intro[data-jelly-scene="1"] .v203-membrane{
  opacity:.98;
  stroke:rgba(242,240,255,.12);
}
.fireworks-intro[data-jelly-scene="1"] .v203-core{opacity:.61}
.fireworks-intro[data-jelly-scene="1"] .v203-organs{
  fill:rgba(207,187,250,.145);
  opacity:.82;
}
.fireworks-intro[data-jelly-scene="1"] .v203-rim{opacity:.50}

/* Scene 2 — the brightest of the three:
   slightly smaller, body presence raised, glow reduced so it won't wash out. */
.fireworks-intro[data-jelly-scene="2"] .v138-jelly-test.v203-pooled{
  --jelly-scale:.965;
  --jelly-opacity:.99;
}
.fireworks-intro[data-jelly-scene="2"] .v203-membrane{
  opacity:1;
  stroke:rgba(239,235,255,.14);
}
.fireworks-intro[data-jelly-scene="2"] .v203-core{opacity:.48}
.fireworks-intro[data-jelly-scene="2"] .v203-organs{
  fill:rgba(190,164,238,.16);
  opacity:.78;
}
.fireworks-intro[data-jelly-scene="2"] .v203-rim{opacity:.44}
.fireworks-intro[data-jelly-scene="2"] .v203-highlight{opacity:.62}

/* Scene 3 — dark blue with somewhat brighter local structure:
   neutral middle scale, a touch cooler/bluer internally. */
.fireworks-intro[data-jelly-scene="3"] .v138-jelly-test.v203-pooled{
  --jelly-scale:1.01;
  --jelly-opacity:.99;
}
.fireworks-intro[data-jelly-scene="3"] .v203-membrane{
  opacity:.97;
  stroke:rgba(234,237,255,.115);
}
.fireworks-intro[data-jelly-scene="3"] .v203-core{opacity:.56}
.fireworks-intro[data-jelly-scene="3"] .v203-organs{
  fill:rgba(190,181,248,.145);
  opacity:.80;
}
.fireworks-intro[data-jelly-scene="3"] .v203-rim{opacity:.47}

/* Slightly larger on compact phones where the background composition leaves
   less apparent visual mass, without increasing SVG raster dimensions heavily. */
@media(max-width:390px){
  .fireworks-intro[data-jelly-scene="1"] .v138-jelly-test.v203-pooled{--jelly-scale:1.06}
  .fireworks-intro[data-jelly-scene="2"] .v138-jelly-test.v203-pooled{--jelly-scale:.98}
  .fireworks-intro[data-jelly-scene="3"] .v138-jelly-test.v203-pooled{--jelly-scale:1.025}
}

/* =========================================================
   V203 — living color depth, no heavy rendering effects
   ========================================================= */

/* Color hierarchy: nearly colorless membrane -> lavender rim -> richer internal tissue. */
.fireworks-intro .v138-jelly-test .v203-membrane{
  opacity:.96;
}
.fireworks-intro .v138-jelly-test .v203-rim{
  opacity:.45;
}
.fireworks-intro .v138-jelly-test .v203-core{
  opacity:.50;
}
.fireworks-intro .v138-jelly-test .v203-organs{
  fill:rgba(193,168,238,.145);
}
.fireworks-intro .v138-jelly-test .v203-life-ring{
  vector-effect:non-scaling-stroke;
}

/* Scene 1: deep blue — cool-white membrane + restrained lavender center. */
.fireworks-intro[data-jelly-scene="1"] .v203-core{opacity:.56}
.fireworks-intro[data-jelly-scene="1"] .v203-organs{fill:rgba(205,178,245,.15)}
.fireworks-intro[data-jelly-scene="1"] .v203-life-ring{stroke:rgba(211,205,255,.17)}
.fireworks-intro[data-jelly-scene="1"] .v203-rim{opacity:.49}

/* Scene 2: brighter — less luminous, slightly denser mauve tissue. */
.fireworks-intro[data-jelly-scene="2"] .v203-core{opacity:.45}
.fireworks-intro[data-jelly-scene="2"] .v203-organs{fill:rgba(184,157,224,.17)}
.fireworks-intro[data-jelly-scene="2"] .v203-life-ring{stroke:rgba(194,185,235,.16)}
.fireworks-intro[data-jelly-scene="2"] .v203-rim{opacity:.42}

/* Scene 3: cooler blue — internal tint shifts a little toward blue-violet. */
.fireworks-intro[data-jelly-scene="3"] .v203-core{opacity:.51}
.fireworks-intro[data-jelly-scene="3"] .v203-organs{fill:rgba(177,178,239,.16)}
.fireworks-intro[data-jelly-scene="3"] .v203-life-ring{stroke:rgba(192,203,255,.17)}
.fireworks-intro[data-jelly-scene="3"] .v203-rim{opacity:.46}

/* Performance contract: no blur, drop-shadow, blend mode or extra transform animation. */
.v138-jelly-test.v203-pooled .v203-membrane,
.v138-jelly-test.v203-pooled .v203-rim,
.v138-jelly-test.v203-pooled .v203-core,
.v138-jelly-test.v203-pooled .v203-organs,
.v138-jelly-test.v203-pooled .v203-life-ring{
  filter:none!important;
  mix-blend-mode:normal!important;
}

/* =========================================================
   V203 — final luminous bell candidate
   Reference-inspired, but restrained for real-time mobile motion.
   ========================================================= */

/* Maintain transparent gel body; luminous color lives mostly in depth and rim. */
.fireworks-intro .v138-jelly-test .v203-membrane{
  opacity:.98;
  stroke:rgba(220,230,255,.12);
}
.fireworks-intro .v138-jelly-test .v203-rim{
  opacity:.58;
}
.fireworks-intro .v138-jelly-test .v203-core{
  opacity:.54;
}
.fireworks-intro .v138-jelly-test .v203-organs{
  fill:rgba(202,161,237,.17);
  opacity:.84;
}
.fireworks-intro .v138-jelly-test .v203-life-ring{
  stroke:rgba(185,198,255,.17);
  opacity:.22;
}

/* Sparse highlights: no blur/filter; brightness comes from contrast and opacity only. */
.fireworks-intro .v138-jelly-test .v203-bell-sparks{
  fill:#f8f6ff;
  opacity:.50;
  animation:v203SparkBreath 3.96s ease-in-out infinite;
}
.fireworks-intro .v138-jelly-test .v203-bell-sparks circle:nth-child(2n){
  fill:#9ddcff;
}
.fireworks-intro .v138-jelly-test .v203-bell-sparks circle:nth-child(3n){
  fill:#ffb2e9;
}
@keyframes v203SparkBreath{
  0%,52%,100%{opacity:.34}
  68%{opacity:.68}
  80%{opacity:.46}
}

/* Breathing light: contraction gathers light inward, expansion releases it. */
.fireworks-intro .v138-jelly-test .v203-core{
  animation:v203CorePulse 3.96s ease-in-out infinite!important;
}
@keyframes v203CorePulse{
  0%,52%,100%{opacity:.48}
  61%{opacity:.55}
  69%{opacity:.70}
  80%{opacity:.56}
}
.fireworks-intro .v138-jelly-test .v203-rim{
  animation:v203RimPulse 3.96s ease-in-out infinite!important;
}
@keyframes v203RimPulse{
  0%,52%,100%{opacity:.50}
  64%{opacity:.58}
  69%{opacity:.68}
  80%{opacity:.55}
}

/* Scene-specific luminous balance. */
.fireworks-intro[data-jelly-scene="1"] .v203-membrane{opacity:1}
.fireworks-intro[data-jelly-scene="1"] .v203-rim{opacity:.61}
.fireworks-intro[data-jelly-scene="1"] .v203-core{opacity:.57}
.fireworks-intro[data-jelly-scene="1"] .v203-bell-sparks{opacity:.54}

.fireworks-intro[data-jelly-scene="2"] .v203-membrane{opacity:.96}
.fireworks-intro[data-jelly-scene="2"] .v203-rim{opacity:.50}
.fireworks-intro[data-jelly-scene="2"] .v203-core{opacity:.48}
.fireworks-intro[data-jelly-scene="2"] .v203-bell-sparks{opacity:.40}

.fireworks-intro[data-jelly-scene="3"] .v203-membrane{opacity:.99}
.fireworks-intro[data-jelly-scene="3"] .v203-rim{opacity:.63}
.fireworks-intro[data-jelly-scene="3"] .v203-core{opacity:.58}
.fireworks-intro[data-jelly-scene="3"] .v203-organs{fill:rgba(219,148,240,.18)}
.fireworks-intro[data-jelly-scene="3"] .v203-bell-sparks{opacity:.56}

/* Strict performance guard: still no blur/drop-shadow/mix-blend on live bell. */
.v138-jelly-test.v203-pooled .v203-membrane,
.v138-jelly-test.v203-pooled .v203-rim,
.v138-jelly-test.v203-pooled .v203-core,
.v138-jelly-test.v203-pooled .v203-organs,
.v138-jelly-test.v203-pooled .v203-life-ring,
.v138-jelly-test.v203-pooled .v203-bell-sparks{
  filter:none!important;
  mix-blend-mode:normal!important;
}

/* Avoid compositor churn: only spark group uses opacity animation, never transform. */
.v138-jelly-test.v203-pooled .v203-bell-sparks{
  will-change:opacity;
}

/* =========================================================
   V203 — deeper layered bell contrast for bright backgrounds
   Final bell color lock candidate.
   ========================================================= */

/* Stronger silhouette without turning opaque. */
.fireworks-intro .v138-jelly-test .v203-membrane{
  opacity:1;
  stroke:rgba(176,194,255,.20);
}
.fireworks-intro .v138-jelly-test .v203-rim{
  opacity:.66;
}
.fireworks-intro .v138-jelly-test .v203-core{
  opacity:.61;
}
.fireworks-intro .v138-jelly-test .v203-organs{
  fill:rgba(165,118,220,.22);
  opacity:.90;
}
.fireworks-intro .v138-jelly-test .v203-life-ring{
  stroke:rgba(155,176,246,.22);
  opacity:.28;
}
.fireworks-intro .v138-jelly-test .v203-highlight{
  opacity:.70;
}

/* Scene 1 — deeper cool blue outline, richer mid-violet. */
.fireworks-intro[data-jelly-scene="1"] .v203-rim{opacity:.69}
.fireworks-intro[data-jelly-scene="1"] .v203-core{opacity:.64}
.fireworks-intro[data-jelly-scene="1"] .v203-organs{
  fill:rgba(164,121,224,.22);
  opacity:.91;
}
.fireworks-intro[data-jelly-scene="1"] .v203-bell-sparks{opacity:.57}

/* Scene 2 — brightest background:
   strongest contour and denser internal violet for separation. */
.fireworks-intro[data-jelly-scene="2"] .v203-membrane{
  opacity:1;
  stroke:rgba(147,170,240,.24);
}
.fireworks-intro[data-jelly-scene="2"] .v203-rim{opacity:.72}
.fireworks-intro[data-jelly-scene="2"] .v203-core{opacity:.62}
.fireworks-intro[data-jelly-scene="2"] .v203-organs{
  fill:rgba(148,103,204,.25);
  opacity:.94;
}
.fireworks-intro[data-jelly-scene="2"] .v203-life-ring{
  stroke:rgba(150,161,226,.24);
  opacity:.31;
}
.fireworks-intro[data-jelly-scene="2"] .v203-bell-sparks{opacity:.50}

/* Scene 3 — richest purple/pink layering. */
.fireworks-intro[data-jelly-scene="3"] .v203-rim{opacity:.72}
.fireworks-intro[data-jelly-scene="3"] .v203-core{opacity:.66}
.fireworks-intro[data-jelly-scene="3"] .v203-organs{
  fill:rgba(186,103,219,.24);
  opacity:.93;
}
.fireworks-intro[data-jelly-scene="3"] .v203-life-ring{
  stroke:rgba(170,161,240,.24);
  opacity:.30;
}
.fireworks-intro[data-jelly-scene="3"] .v203-bell-sparks{opacity:.60}

/* Preserve the lightweight rendering contract. */
.v138-jelly-test.v203-pooled .v203-membrane,
.v138-jelly-test.v203-pooled .v203-rim,
.v138-jelly-test.v203-pooled .v203-core,
.v138-jelly-test.v203-pooled .v203-organs,
.v138-jelly-test.v203-pooled .v203-life-ring,
.v138-jelly-test.v203-pooled .v203-bell-sparks{
  filter:none!important;
  mix-blend-mode:normal!important;
}

/* =========================================================
   V203 — first complete tentacle system
   Quality + performance: 4 oral arms + 8 fine threads,
   all animated as groups rather than dozens of independent nodes.
   ========================================================= */

.v138-jelly-test{
  aspect-ratio:240/470!important;
  bottom:-30vh!important;
}

/* Oral arms: broad translucent tissue, root slightly brighter, ends fade visually. */
.v138-jelly-test .v203-oral-arms{
  fill:none;
  stroke:rgba(175,126,232,.31);
  stroke-width:7.2;
  stroke-linecap:round;
  stroke-linejoin:round;
  opacity:.82;
  transform-origin:120px 151px;
  animation:v203ArmsFlow 5.8s cubic-bezier(.42,.02,.34,1) infinite alternate;
}
.v138-jelly-test .v203-arm:nth-child(2),
.v138-jelly-test .v203-arm:nth-child(3){
  stroke:rgba(126,151,238,.29);
  stroke-width:8.2;
}
@keyframes v203ArmsFlow{
  0%{transform:translate3d(-1px,0,0) rotate(-1.5deg) skewX(-1.2deg)}
  34%{transform:translate3d(2px,1px,0) rotate(.8deg) skewX(1.1deg)}
  68%{transform:translate3d(-1px,0,0) rotate(1.6deg) skewX(.4deg)}
  100%{transform:translate3d(1px,1px,0) rotate(-.7deg) skewX(-.8deg)}
}

/* Fine threads: hair-thin, low opacity, slightly blue/purple. */
.v138-jelly-test .v203-fine-tentacles{
  fill:none;
  stroke:rgba(183,176,248,.27);
  stroke-width:1.05;
  stroke-linecap:round;
  opacity:.76;
  transform-origin:120px 150px;
  animation:v203ThreadsFlow 7.1s cubic-bezier(.38,.03,.28,1) infinite alternate;
}
.v138-jelly-test .v203-thread:nth-child(2n){
  stroke:rgba(214,147,226,.24);
}
.v138-jelly-test .v203-thread:nth-child(3n){
  stroke:rgba(144,190,248,.24);
}
@keyframes v203ThreadsFlow{
  0%{transform:translate3d(-3px,0,0) rotate(-1.9deg) skewX(-1.7deg)}
  28%{transform:translate3d(2px,1px,0) rotate(.5deg) skewX(.8deg)}
  62%{transform:translate3d(4px,0,0) rotate(1.7deg) skewX(1.6deg)}
  100%{transform:translate3d(-1px,1px,0) rotate(-.5deg) skewX(-.7deg)}
}

/* Pulse lag: tentacles respond after bell contraction rather than exactly with it. */
.v138-jelly-test .v203-tentacle-system{
  transform-origin:120px 151px;
  animation:v203TentacleLag 3.96s cubic-bezier(.24,.03,.16,1) infinite;
}
@keyframes v203TentacleLag{
  0%,62%{transform:translate3d(0,0,0) scaleY(1)}
  70%{transform:translate3d(0,2px,0) scaleY(1.015)}
  79%{transform:translate3d(0,5px,0) scaleY(1.035)}
  90%{transform:translate3d(0,2px,0) scaleY(1.015)}
  100%{transform:translate3d(0,0,0) scaleY(1)}
}

/* Scene-aware tentacle visibility. */
.fireworks-intro[data-jelly-scene="1"] .v203-oral-arms{opacity:.86}
.fireworks-intro[data-jelly-scene="1"] .v203-fine-tentacles{opacity:.80}

.fireworks-intro[data-jelly-scene="2"] .v203-oral-arms{
  opacity:.88;
  stroke:rgba(151,113,211,.36);
}
.fireworks-intro[data-jelly-scene="2"] .v203-fine-tentacles{
  opacity:.82;
  stroke:rgba(157,151,225,.31);
}

.fireworks-intro[data-jelly-scene="3"] .v203-oral-arms{
  opacity:.88;
  stroke:rgba(194,115,225,.35);
}
.fireworks-intro[data-jelly-scene="3"] .v203-fine-tentacles{
  opacity:.82;
  stroke:rgba(199,151,236,.29);
}

/* Performance contract: no blur, shadow, filters or per-thread animation. */
.v138-jelly-test.v203-pooled .v203-tentacle-system,
.v138-jelly-test.v203-pooled .v203-oral-arms,
.v138-jelly-test.v203-pooled .v203-fine-tentacles{
  filter:none!important;
  mix-blend-mode:normal!important;
  backface-visibility:hidden;
}
@media(max-width:430px){
  .v138-jelly-test{
    width:min(41vw,172px)!important;
    bottom:-28vh!important;
  }
}

/* =========================================================
   V203 — unified swimming biomechanics
   Bell remains the master clock. Arms and threads now deform
   progressively from root to tip with delayed hydrodynamic response.
   ========================================================= */

/* Disable V150/V203 group-swing animations so the new path morphs define motion. */
.v138-jelly-test .v203-oral-arms,
.v138-jelly-test .v203-fine-tentacles{
  animation:none!important;
  transform:none!important;
}

/* Keep only a tiny whole-system recoil; path deformation does most of the work. */
.v138-jelly-test .v203-tentacle-system{
  transform-origin:120px 151px;
  animation:v203WholeBodyRecoil 3.96s cubic-bezier(.22,.04,.18,1) infinite!important;
}
@keyframes v203WholeBodyRecoil{
  0%,58%{transform:translate3d(0,0,0)}
  68%{transform:translate3d(0,1px,0)}
  77%{transform:translate3d(0,5px,0)}
  90%{transform:translate3d(0,2px,0)}
  100%{transform:translate3d(0,0,0)}
}

/* Root feels attached to bell; tips stay lighter. */
.v138-jelly-test .v203-oral-arms{
  stroke-width:7.4;
  opacity:.84;
}
.v138-jelly-test .v203-fine-tentacles{
  stroke-width:1.0;
  opacity:.74;
}

/* Slight asymmetry in density gives natural body mass without extra animations. */
.v138-jelly-test .v203-arm-a,
.v138-jelly-test .v203-arm-d{opacity:.76}
.v138-jelly-test .v203-arm-b,
.v138-jelly-test .v203-arm-c{opacity:.91}

/* Make outer threads lighter; central threads carry more visible flow. */
.v138-jelly-test .v203-thread.t1,
.v138-jelly-test .v203-thread.t8{opacity:.58}
.v138-jelly-test .v203-thread.t2,
.v138-jelly-test .v203-thread.t7{opacity:.67}
.v138-jelly-test .v203-thread.t3,
.v138-jelly-test .v203-thread.t6{opacity:.76}
.v138-jelly-test .v203-thread.t4,
.v138-jelly-test .v203-thread.t5{opacity:.82}

/* Scene-specific visibility remains, but no heavier effects. */
.fireworks-intro[data-jelly-scene="2"] .v203-fine-tentacles{opacity:.82}
.fireworks-intro[data-jelly-scene="2"] .v203-oral-arms{opacity:.90}

/* Performance guard. Path morph only, no filter/blur/shadow. */
.v138-jelly-test.v203-pooled .v203-tentacle-system,
.v138-jelly-test.v203-pooled .v203-oral-arms,
.v138-jelly-test.v203-pooled .v203-fine-tentacles,
.v138-jelly-test.v203-pooled .v203-arm,
.v138-jelly-test.v203-pooled .v203-thread{
  filter:none!important;
  mix-blend-mode:normal!important;
}

/* V203: organic water-driven tentacles, intentionally asymmetric. */
.v138-jelly-test .v203-root-web{fill:rgba(172,125,224,.17);stroke:rgba(220,200,252,.08);stroke-width:.6;opacity:.82}
.v138-jelly-test .v203-ribbons{fill:none;stroke:rgba(176,125,224,.24);stroke-width:6.5;stroke-linecap:round;opacity:.72}
.v138-jelly-test .v203-ribbon.r2{stroke:rgba(125,148,229,.23);stroke-width:7.5}
.v138-jelly-test .v203-ribbon.r3{stroke:rgba(194,112,218,.23)}
.v138-jelly-test .v203-filaments{fill:none;stroke:rgba(190,181,244,.29);stroke-width:.82;stroke-linecap:round;opacity:.76}
.v138-jelly-test .v203-fil.f1,.v138-jelly-test .v203-fil.f7{opacity:.48}
.v138-jelly-test .v203-fil.f2,.v138-jelly-test .v203-fil.f6{opacity:.62}
.v138-jelly-test .v203-fil.f3,.v138-jelly-test .v203-fil.f5{opacity:.73}
.v138-jelly-test .v203-fil.f4{opacity:.81}
.v138-jelly-test .v203-tentacle-system,.v138-jelly-test .v203-ribbons,.v138-jelly-test .v203-filaments{animation:none!important;transform:none!important}
.fireworks-intro[data-jelly-scene="2"] .v203-filaments{stroke:rgba(157,150,220,.36);opacity:.84}
.fireworks-intro[data-jelly-scene="3"] .v203-ribbons{stroke:rgba(190,108,219,.27)}
.v138-jelly-test.v203-pooled .v203-root-web,.v138-jelly-test.v203-pooled .v203-ribbon,.v138-jelly-test.v203-pooled .v203-fil{filter:none!important;mix-blend-mode:normal!important}

/* V203 — real-jelly tentacles based on uploaded swimming reference. */
.v138-jelly-test .v203-root-web{fill:rgba(173,127,224,.16);stroke:rgba(224,205,253,.075);stroke-width:.6;opacity:.84}
.v138-jelly-test .v203-oral-arms{fill:none;stroke:rgba(169,119,222,.27);stroke-linecap:round;stroke-linejoin:round;opacity:.80}
.v138-jelly-test .v203-arm.a1{stroke-width:6.7;opacity:.72}
.v138-jelly-test .v203-arm.a2{stroke-width:8.1;stroke:rgba(127,148,229,.25);opacity:.88}
.v138-jelly-test .v203-arm.a3{stroke-width:8.0;stroke:rgba(151,129,229,.25);opacity:.88}
.v138-jelly-test .v203-arm.a4{stroke-width:6.5;stroke:rgba(193,113,218,.25);opacity:.72}
.v138-jelly-test .v203-filaments{fill:none;stroke:rgba(191,185,246,.25);stroke-width:.72;stroke-linecap:round;opacity:.68}
.v138-jelly-test .v203-fil.f1,.v138-jelly-test .v203-fil.f4{opacity:.55}
.v138-jelly-test .v203-fil.f2,.v138-jelly-test .v203-fil.f3{opacity:.76}
.v138-jelly-test .v203-tentacle-system,.v138-jelly-test .v203-oral-arms,.v138-jelly-test .v203-filaments{animation:none!important;transform:none!important}
.fireworks-intro[data-jelly-scene="2"] .v203-root-web{fill:rgba(145,108,206,.22)}
.fireworks-intro[data-jelly-scene="2"] .v203-oral-arms{stroke:rgba(149,111,207,.32)}
.fireworks-intro[data-jelly-scene="2"] .v203-filaments{stroke:rgba(160,154,224,.32);opacity:.75}
.fireworks-intro[data-jelly-scene="3"] .v203-arm.a4{stroke:rgba(207,118,222,.28)}
.fireworks-intro[data-jelly-scene="3"] .v203-filaments{stroke:rgba(207,158,235,.27)}
.v138-jelly-test.v203-pooled .v203-root-web,.v138-jelly-test.v203-pooled .v203-arm,.v138-jelly-test.v203-pooled .v203-fil{filter:none!important;mix-blend-mode:normal!important}

/* =========================================================
   V203 — reference-video bell realism
   Blue-white gelatinous translucency + thin luminous rim +
   subtle warm internal tissue. Removes fantasy-neon feel.
   ========================================================= */

.fireworks-intro .v138-jelly-test .v203-membrane{
  opacity:.84!important;
  stroke:rgba(213,234,255,.16)!important;
  stroke-width:.72!important;
}
.fireworks-intro .v138-jelly-test .v203-rim{
  opacity:.54!important;
}
.fireworks-intro .v138-jelly-test .v203-core{
  opacity:.43!important;
  animation:v203CoreBreath 3.96s ease-in-out infinite!important;
}
@keyframes v203CoreBreath{
  0%,52%,100%{opacity:.34}
  68%{opacity:.48}
  79%{opacity:.40}
}

/* Video-like internal organs: peach-orange, semi-transparent, never neon. */
.fireworks-intro .v138-jelly-test .v203-organs{
  fill:rgba(255,176,138,.23)!important;
  opacity:.68!important;
}
.fireworks-intro .v138-jelly-test .v203-life-ring{
  stroke:rgba(197,220,247,.13)!important;
  opacity:.15!important;
}
.fireworks-intro .v138-jelly-test .v203-highlight{
  stroke:rgba(245,250,255,.20)!important;
  opacity:.42!important;
}

/* Remove fantasy star-speckle from the bell — the reference is clean gel tissue. */
.fireworks-intro .v138-jelly-test .v203-bell-sparks{
  display:none!important;
}

/* Bright scene: slightly denser membrane for visibility, still translucent. */
.fireworks-intro[data-jelly-scene="1"] .v203-membrane{opacity:.86!important}
.fireworks-intro[data-jelly-scene="1"] .v203-rim{opacity:.57!important}

.fireworks-intro[data-jelly-scene="2"] .v203-membrane{
  opacity:.91!important;
  stroke:rgba(188,216,248,.21)!important;
}
.fireworks-intro[data-jelly-scene="2"] .v203-rim{opacity:.61!important}
.fireworks-intro[data-jelly-scene="2"] .v203-core{opacity:.46!important}
.fireworks-intro[data-jelly-scene="2"] .v203-organs{
  fill:rgba(238,156,126,.25)!important;
  opacity:.74!important;
}

.fireworks-intro[data-jelly-scene="3"] .v203-membrane{opacity:.86!important}
.fireworks-intro[data-jelly-scene="3"] .v203-rim{opacity:.58!important}
.fireworks-intro[data-jelly-scene="3"] .v203-organs{
  fill:rgba(248,168,142,.23)!important;
}

/* Match the video's softer body/edge relationship. */
.v138-jelly-test.v203-pooled .v203-membrane,
.v138-jelly-test.v203-pooled .v203-rim,
.v138-jelly-test.v203-pooled .v203-core,
.v138-jelly-test.v203-pooled .v203-organs,
.v138-jelly-test.v203-pooled .v203-life-ring,
.v138-jelly-test.v203-pooled .v203-highlight{
  filter:none!important;
  mix-blend-mode:normal!important;
}

/* =========================================================
   V203 — volumetric front-view living jellyfish.
   No flat/top-view silhouette, no neon game look.
   ========================================================= */
.v138-jelly-test{
  aspect-ratio:260/500!important;
  width:min(45vw,190px)!important;
  bottom:-31vh!important;
}
.v138-jelly-test .v203-jelly-svg{width:100%!important;height:100%!important;overflow:visible!important}
.v138-jelly-test .v203-bell{
  opacity:.92;
  stroke:rgba(218,244,255,.17);
  stroke-width:.8;
}
.v138-jelly-test .v203-inner-gel{opacity:.84}
.v138-jelly-test .v203-rim{opacity:.73}
.v138-jelly-test .v203-organs{
  fill:rgba(255,160,184,.18);
  stroke:rgba(255,201,184,.10);
  stroke-width:.6;
  opacity:.82;
}
.v138-jelly-test .v203-oral-arms{opacity:.76}
.v138-jelly-test .v203-arm.a1,.v138-jelly-test .v203-arm.a4{opacity:.63}
.v138-jelly-test .v203-arm.a2,.v138-jelly-test .v203-arm.a3{opacity:.82}
.v138-jelly-test .v203-filaments{
  stroke:rgba(186,226,246,.25);
  stroke-width:.72;
  opacity:.64;
}
.v138-jelly-test .v203-fil.f1,.v138-jelly-test .v203-fil.f4{opacity:.48}
.v138-jelly-test .v203-fil.f2,.v138-jelly-test .v203-fil.f3{opacity:.70}

/* Keep the gel transparent on all three existing backgrounds. */
.fireworks-intro[data-jelly-scene="1"] .v203-bell{opacity:.94}
.fireworks-intro[data-jelly-scene="2"] .v203-bell{opacity:.98;stroke:rgba(197,229,246,.23)}
.fireworks-intro[data-jelly-scene="2"] .v203-rim{opacity:.82}
.fireworks-intro[data-jelly-scene="2"] .v203-organs{opacity:.90}
.fireworks-intro[data-jelly-scene="3"] .v203-bell{opacity:.95}
.fireworks-intro[data-jelly-scene="3"] .v203-organs{fill:rgba(255,145,190,.20)}

/* No heavy effects; translucency comes from layered alpha only. */
.v138-jelly-test.v203-pooled .v203-bell,
.v138-jelly-test.v203-pooled .v203-inner-gel,
.v138-jelly-test.v203-pooled .v203-rim,
.v138-jelly-test.v203-pooled .v203-organs,
.v138-jelly-test.v203-pooled .v203-arm,
.v138-jelly-test.v203-pooled .v203-fil{
  filter:none!important;
  mix-blend-mode:normal!important;
}

/* =========================================================
   V203 — real oral tissue: filled ribbons + sparse filaments.
   Removes the "four transparent wires" look seen in recording.
   ========================================================= */

.v138-jelly-test .v203-root-web{
  fill:rgba(223,174,224,.13);
  stroke:rgba(220,218,247,.05);
  stroke-width:.5;
  opacity:.78;
}

.v138-jelly-test .v203-oral-ribbons{
  fill:rgba(190,145,224,.14);
  stroke:rgba(214,195,241,.055);
  stroke-width:.55;
  opacity:.88;
}
.v138-jelly-test .v203-ribbon.r1{fill:rgba(148,192,231,.12);opacity:.68}
.v138-jelly-test .v203-ribbon.r2{fill:rgba(205,147,225,.16);opacity:.88}
.v138-jelly-test .v203-ribbon.r3{fill:rgba(226,155,210,.15);opacity:.84}
.v138-jelly-test .v203-ribbon.r4{fill:rgba(139,198,229,.11);opacity:.64}

.v138-jelly-test .v203-filaments{
  stroke:rgba(202,228,243,.19);
  stroke-width:.52;
  opacity:.54;
}
.v138-jelly-test .v203-fil.f1,
.v138-jelly-test .v203-fil.f5{opacity:.35}
.v138-jelly-test .v203-fil.f2,
.v138-jelly-test .v203-fil.f4{opacity:.48}
.v138-jelly-test .v203-fil.f3{opacity:.58}

/* Do not let the tissue read as bright ropes on the lightest background. */
.fireworks-intro[data-jelly-scene="2"] .v203-root-web{opacity:.84}
.fireworks-intro[data-jelly-scene="2"] .v203-oral-ribbons{opacity:.93}
.fireworks-intro[data-jelly-scene="2"] .v203-filaments{opacity:.58}

/* Clean out all legacy rope styles from V156. */
.v138-jelly-test .v203-oral-arms,
.v138-jelly-test .v203-arm{display:none!important}

.v138-jelly-test.v203-pooled .v203-root-web,
.v138-jelly-test.v203-pooled .v203-ribbon,
.v138-jelly-test.v203-pooled .v203-fil{
  filter:none!important;
  mix-blend-mode:normal!important;
}

/* =========================================================
   V203 — smoother, lighter hydrodynamics from user recording.
   Continuous depth wave, 30fps path updates, airier tissue.
   ========================================================= */
.v138-jelly-test .v203-root-web{
  fill:rgba(220,178,226,.095)!important;
  stroke:rgba(227,218,246,.035)!important;
  opacity:.58!important;
}
.v138-jelly-test .v203-oral-ribbons{
  stroke-width:.34!important;
  opacity:.72!important;
}
.v138-jelly-test .v203-ribbon.r1{fill:rgba(151,199,231,.082)!important;opacity:.52!important}
.v138-jelly-test .v203-ribbon.r2{fill:rgba(204,157,226,.105)!important;opacity:.70!important}
.v138-jelly-test .v203-ribbon.r3{fill:rgba(226,164,211,.100)!important;opacity:.68!important}
.v138-jelly-test .v203-ribbon.r4{fill:rgba(143,201,230,.075)!important;opacity:.48!important}

.v138-jelly-test .v203-filaments{
  stroke:rgba(211,236,248,.155)!important;
  stroke-width:.42!important;
  opacity:.48!important;
}
.v138-jelly-test .v203-fil.f1,
.v138-jelly-test .v203-fil.f5{opacity:.28!important}
.v138-jelly-test .v203-fil.f2,
.v138-jelly-test .v203-fil.f4{opacity:.42!important}
.v138-jelly-test .v203-fil.f3{opacity:.50!important}

/* Slightly lighter bell/tissue balance so the whole animal floats rather than hangs. */
.v138-jelly-test .v203-bell{opacity:.88!important}
.v138-jelly-test .v203-inner-gel{opacity:.72!important}
.v138-jelly-test .v203-rim{opacity:.66!important}
.v138-jelly-test .v203-organs{opacity:.72!important}

.fireworks-intro[data-jelly-scene="2"] .v203-root-web{opacity:.66!important}
.fireworks-intro[data-jelly-scene="2"] .v203-oral-ribbons{opacity:.78!important}
.fireworks-intro[data-jelly-scene="2"] .v203-filaments{opacity:.52!important}

/* =========================================================
   V203 — restore visible living color without losing gel transparency.
   Recording showed V158 was too faint against the bright blue scene.
   ========================================================= */

.v138-jelly-test .v203-bell{
  opacity:.98!important;
  stroke:rgba(186,225,255,.34)!important;
  stroke-width:1.15!important;
}
.v138-jelly-test .v203-inner-gel{
  opacity:.91!important;
}
.v138-jelly-test .v203-rim{
  opacity:.88!important;
  stroke-width:3.45!important;
}
.v138-jelly-test .v203-organs{
  fill:rgba(242,119,190,.27)!important;
  stroke:rgba(255,195,177,.14)!important;
  opacity:.93!important;
}

/* Keep oral tissue light, but not invisible. */
.v138-jelly-test .v203-root-web{
  fill:rgba(208,139,227,.13)!important;
  opacity:.68!important;
}
.v138-jelly-test .v203-oral-ribbons{
  opacity:.79!important;
}
.v138-jelly-test .v203-ribbon.r1{fill:rgba(119,188,236,.12)!important;opacity:.60!important}
.v138-jelly-test .v203-ribbon.r2{fill:rgba(181,118,230,.16)!important;opacity:.78!important}
.v138-jelly-test .v203-ribbon.r3{fill:rgba(229,128,207,.15)!important;opacity:.76!important}
.v138-jelly-test .v203-ribbon.r4{fill:rgba(112,193,232,.11)!important;opacity:.58!important}
.v138-jelly-test .v203-filaments{
  stroke:rgba(188,224,246,.20)!important;
  opacity:.55!important;
}

/* Brightest homepage background needs the strongest separation. */
.fireworks-intro[data-jelly-scene="2"] .v203-bell{
  opacity:1!important;
  stroke:rgba(158,207,246,.42)!important;
}
.fireworks-intro[data-jelly-scene="2"] .v203-inner-gel{opacity:.96!important}
.fireworks-intro[data-jelly-scene="2"] .v203-rim{opacity:.97!important}
.fireworks-intro[data-jelly-scene="2"] .v203-organs{
  fill:rgba(226,105,188,.31)!important;
  opacity:1!important;
}
.fireworks-intro[data-jelly-scene="2"] .v203-root-web{opacity:.76!important}
.fireworks-intro[data-jelly-scene="2"] .v203-oral-ribbons{opacity:.84!important}

/* Scene 3 gets a touch more violet/pink density. */
.fireworks-intro[data-jelly-scene="3"] .v203-organs{
  fill:rgba(235,111,198,.29)!important;
}

/* V203 — strengthen tentacle colour only; keep V159 bell and motion intact. */
.v138-jelly-test .v203-root-web{
  fill:rgba(202,119,225,.18)!important;
  opacity:.78!important;
}
.v138-jelly-test .v203-oral-ribbons{opacity:.90!important}
.v138-jelly-test .v203-ribbon.r1{fill:rgba(91,184,239,.18)!important;opacity:.72!important}
.v138-jelly-test .v203-ribbon.r2{fill:rgba(166,91,232,.23)!important;opacity:.90!important}
.v138-jelly-test .v203-ribbon.r3{fill:rgba(232,92,199,.22)!important;opacity:.88!important}
.v138-jelly-test .v203-ribbon.r4{fill:rgba(84,191,235,.17)!important;opacity:.70!important}

.v138-jelly-test .v203-filaments{
  stroke:rgba(174,216,248,.30)!important;
  stroke-width:.46!important;
  opacity:.68!important;
}
.v138-jelly-test .v203-fil.f1{stroke:rgba(116,199,242,.25)!important;opacity:.46!important}
.v138-jelly-test .v203-fil.f2{stroke:rgba(157,131,235,.30)!important;opacity:.62!important}
.v138-jelly-test .v203-fil.f3{stroke:rgba(218,128,218,.31)!important;opacity:.70!important}
.v138-jelly-test .v203-fil.f4{stroke:rgba(139,159,239,.29)!important;opacity:.61!important}
.v138-jelly-test .v203-fil.f5{stroke:rgba(100,197,239,.24)!important;opacity:.45!important}

/* Strongest separation on the bright second background. */
.fireworks-intro[data-jelly-scene="2"] .v203-root-web{opacity:.84!important}
.fireworks-intro[data-jelly-scene="2"] .v203-oral-ribbons{opacity:.96!important}
.fireworks-intro[data-jelly-scene="2"] .v203-filaments{opacity:.75!important}

/* =========================================================
   V203 FINAL — preserve V160 color; refine only life/motion.
   ========================================================= */

/* Slightly softer tissue hierarchy: roots belong to body, tips disappear into water. */
.v138-jelly-test .v203-root-web{opacity:.75!important}
.v138-jelly-test .v203-ribbon.r1{opacity:.69!important}
.v138-jelly-test .v203-ribbon.r2{opacity:.87!important}
.v138-jelly-test .v203-ribbon.r3{opacity:.85!important}
.v138-jelly-test .v203-ribbon.r4{opacity:.67!important}
.v138-jelly-test .v203-fil.f1,
.v138-jelly-test .v203-fil.f5{opacity:.42!important}
.v138-jelly-test .v203-fil.f2,
.v138-jelly-test .v203-fil.f4{opacity:.59!important}
.v138-jelly-test .v203-fil.f3{opacity:.67!important}

/* Bell remains the visual anchor; no extra glow/filter. */
.v138-jelly-test.v203-pooled .v203-bell,
.v138-jelly-test.v203-pooled .v203-inner-gel,
.v138-jelly-test.v203-pooled .v203-rim,
.v138-jelly-test.v203-pooled .v203-root-web,
.v138-jelly-test.v203-pooled .v203-ribbon,
.v138-jelly-test.v203-pooled .v203-fil{
  filter:none!important;
  mix-blend-mode:normal!important;
  will-change:auto!important;
}

/* V203 — make water flow readable without turning tentacles into waving ropes. */
.v138-jelly-test .v203-oral-ribbons{
  opacity:.91!important;
}
.v138-jelly-test .v203-filaments{
  opacity:.72!important;
}
.v138-jelly-test .v203-fil.f1,
.v138-jelly-test .v203-fil.f5{opacity:.48!important}
.v138-jelly-test .v203-fil.f2,
.v138-jelly-test .v203-fil.f4{opacity:.65!important}
.v138-jelly-test .v203-fil.f3{opacity:.73!important}

/* Preserve the V160/V161 colour strength and light gel quality. */
.v138-jelly-test .v203-root-web{opacity:.77!important}

/* =========================================================
   V203 — restrained bioluminescence + underwater audio.
   Saturation lives inside transparent tissue; no blur/filter.
   ========================================================= */
.v138-jelly-test .v203-bell{
  opacity:1!important;
  stroke:rgba(104,232,255,.48)!important;
  stroke-width:1.28!important;
}
.v138-jelly-test .v203-inner-gel{opacity:.98!important}
.v138-jelly-test .v203-rim{opacity:.98!important;stroke-width:3.55!important}
.v138-jelly-test .v203-organs{
  fill:rgba(245,90,205,.34)!important;
  stroke:rgba(255,205,162,.18)!important;
  opacity:1!important;
}
.v138-jelly-test .v203-root-web{fill:rgba(190,91,236,.21)!important;opacity:.84!important}
.v138-jelly-test .v203-ribbon.r1{fill:rgba(61,213,255,.22)!important;opacity:.76!important}
.v138-jelly-test .v203-ribbon.r2{fill:rgba(137,72,249,.28)!important;opacity:.94!important}
.v138-jelly-test .v203-ribbon.r3{fill:rgba(244,69,207,.27)!important;opacity:.92!important}
.v138-jelly-test .v203-ribbon.r4{fill:rgba(53,205,248,.20)!important;opacity:.74!important}
.v138-jelly-test .v203-fil.f1{stroke:rgba(70,215,255,.34)!important}
.v138-jelly-test .v203-fil.f2{stroke:rgba(131,119,255,.38)!important}
.v138-jelly-test .v203-fil.f3{stroke:rgba(235,101,237,.40)!important}
.v138-jelly-test .v203-fil.f4{stroke:rgba(149,113,255,.36)!important}
.v138-jelly-test .v203-fil.f5{stroke:rgba(67,209,250,.32)!important}

/* Bright background keeps separation without turning opaque. */
.fireworks-intro[data-jelly-scene="2"] .v203-bell{stroke:rgba(75,202,248,.58)!important}
.fireworks-intro[data-jelly-scene="2"] .v203-rim{opacity:1!important}
.fireworks-intro[data-jelly-scene="2"] .v203-organs{fill:rgba(229,67,197,.39)!important}

.v138-jelly-test.v203-pooled .v203-bell,
.v138-jelly-test.v203-pooled .v203-inner-gel,
.v138-jelly-test.v203-pooled .v203-rim,
.v138-jelly-test.v203-pooled .v203-organs,
.v138-jelly-test.v203-pooled .v203-root-web,
.v138-jelly-test.v203-pooled .v203-ribbon,
.v138-jelly-test.v203-pooled .v203-fil{
  filter:none!important;
  mix-blend-mode:normal!important;
}

/* =========================================================
   V203 FINAL JELLY REFINEMENT
   - no jelly sound
   - less circular / less game-like bell
   - dispersed internal bioluminescence
   - asynchronous hydrodynamic oral arms
   ========================================================= */

/* Keep the gel luminous but break up the "pink glowing ball" impression. */
.v138-jelly-test .v203-inner-gel{opacity:.86!important}
.v138-jelly-test .v203-organs{
  fill:rgba(218,111,203,.23)!important;
  stroke:rgba(255,190,173,.10)!important;
  opacity:.82!important;
}
.v138-jelly-test .v203-rim{
  opacity:.91!important;
  stroke-width:3.15!important;
}

/* Oral arms remain colored but slightly more tissue-like than neon ribbons. */
.v138-jelly-test .v203-ribbon.r1{opacity:.70!important}
.v138-jelly-test .v203-ribbon.r2{opacity:.84!important}
.v138-jelly-test .v203-ribbon.r3{opacity:.82!important}
.v138-jelly-test .v203-ribbon.r4{opacity:.68!important}
.v138-jelly-test .v203-filaments{opacity:.70!important}

/* No heavy rendering effects. */
.v138-jelly-test.v203-pooled svg,
.v138-jelly-test.v203-pooled .v203-bell,
.v138-jelly-test.v203-pooled .v203-ribbon,
.v138-jelly-test.v203-pooled .v203-fil{
  filter:none!important;
  mix-blend-mode:normal!important;
}

/* V203 — V164 tentacle appearance restored; motion upgraded to circulating water. */
.v138-jelly-test.v203-pooled .v203-ribbon,
.v138-jelly-test.v203-pooled .v203-fil,
.v138-jelly-test.v203-pooled .v203-root-web{
  filter:none!important;
  mix-blend-mode:normal!important;
  will-change:auto!important;
}

/* V203 — geometry unchanged; make the moving water readable to the eye. */
.v138-jelly-test .v203-oral-ribbons{opacity:.88!important}
.v138-jelly-test .v203-filaments{opacity:.72!important}
.v138-jelly-test.v203-pooled .v203-ribbon,
.v138-jelly-test.v203-pooled .v203-fil{
  filter:none!important;
  mix-blend-mode:normal!important;
}

/* V203 — freer, more visible water-driven tentacle motion. Geometry unchanged. */
.v138-jelly-test .v203-oral-ribbons{opacity:.90!important}
.v138-jelly-test .v203-filaments{opacity:.75!important}

/* =========================================================
   V203 — continuous rotational-flow final + iPhone/Xiaomi compatibility.
   No new filters, no blend modes, no layout-thrashing animation.
   ========================================================= */
.v138-jelly-test.v203-pooled,
.v138-jelly-test.v203-pooled svg{
  -webkit-transform:translateZ(0);
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
.v138-jelly-test.v203-pooled .v203-ribbon,
.v138-jelly-test.v203-pooled .v203-fil,
.v138-jelly-test.v203-pooled .v203-root-web{
  filter:none!important;
  mix-blend-mode:normal!important;
}

/* Respect safe-area geometry on modern iPhone browsers/web-app mode. */
@supports (padding-bottom: env(safe-area-inset-bottom)){
  .fireworks-intro{
    padding-bottom:env(safe-area-inset-bottom);
  }
}

/* Xiaomi/Android Chromium: avoid text-size auto-adjust affecting surrounding layout. */
html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

/* =========================================================
   V203 — bell/tentacle causal coupling
   Geometry, color and fluorescence remain from V169.
   ========================================================= */
.v138-jelly-test.v203-pooled .v203-ribbon,
.v138-jelly-test.v203-pooled .v203-fil,
.v138-jelly-test.v203-pooled .v203-root-web{
  filter:none!important;
  mix-blend-mode:normal!important;
}

/* Keep visibility stable while the arms gather/fan. */
.v138-jelly-test .v203-oral-ribbons{opacity:.89!important}
.v138-jelly-test .v203-filaments{opacity:.73!important}

/* =========================================================
   V203 — stronger 3-stage coupling + restore visible fluorescence
   ========================================================= */

/* Bell/body: transparent gel, but no longer washed out. */
.v138-jelly-test .v203-bell{
  opacity:1!important;
  stroke:rgba(176,224,255,.44)!important;
}
.v138-jelly-test .v203-inner-gel{
  opacity:.96!important;
}
.v138-jelly-test .v203-rim{
  opacity:.98!important;
  stroke-width:3.5!important;
}
.v138-jelly-test .v203-organs{
  fill:rgba(232,105,202,.31)!important;
  stroke:rgba(255,195,177,.14)!important;
  opacity:.98!important;
}
.v138-jelly-test .v203-root-web{
  fill:rgba(200,116,228,.18)!important;
  opacity:.84!important;
}

/* Oral arms: stronger local bioluminescence, still translucent. */
.v138-jelly-test .v203-oral-ribbons{opacity:.96!important}
.v138-jelly-test .v203-ribbon.r1{
  fill:rgba(92,190,240,.22)!important;
  opacity:.78!important;
}
.v138-jelly-test .v203-ribbon.r2{
  fill:rgba(170,95,237,.28)!important;
  opacity:.96!important;
}
.v138-jelly-test .v203-ribbon.r3{
  fill:rgba(236,95,207,.27)!important;
  opacity:.94!important;
}
.v138-jelly-test .v203-ribbon.r4{
  fill:rgba(86,196,238,.21)!important;
  opacity:.76!important;
}

/* Fine filaments must be readable during the 3-stage motion. */
.v138-jelly-test .v203-filaments{
  stroke:rgba(190,225,252,.34)!important;
  stroke-width:.48!important;
  opacity:.80!important;
}
.v138-jelly-test .v203-fil.f1,
.v138-jelly-test .v203-fil.f5{opacity:.56!important}
.v138-jelly-test .v203-fil.f2,
.v138-jelly-test .v203-fil.f4{opacity:.72!important}
.v138-jelly-test .v203-fil.f3{opacity:.82!important}

/* Bright scene 2 gets extra separation so color doesn't disappear. */
.fireworks-intro[data-jelly-scene="2"] .v203-bell{
  stroke:rgba(154,211,250,.52)!important;
}
.fireworks-intro[data-jelly-scene="2"] .v203-inner-gel{opacity:1!important}
.fireworks-intro[data-jelly-scene="2"] .v203-rim{opacity:1!important}
.fireworks-intro[data-jelly-scene="2"] .v203-organs{opacity:1!important}
.fireworks-intro[data-jelly-scene="2"] .v203-oral-ribbons{opacity:1!important}
.fireworks-intro[data-jelly-scene="2"] .v203-filaments{opacity:.86!important}

/* Keep rendering lightweight. */
.v138-jelly-test.v203-pooled .v203-bell,
.v138-jelly-test.v203-pooled .v203-ribbon,
.v138-jelly-test.v203-pooled .v203-fil,
.v138-jelly-test.v203-pooled .v203-root-web{
  filter:none!important;
  mix-blend-mode:normal!important;
}

/* V203 — make gather/fan visually unmistakable; retain V171 fluorescence. */
.v138-jelly-test .v203-oral-ribbons{opacity:.98!important}
.v138-jelly-test .v203-filaments{opacity:.84!important}
.v138-jelly-test .v203-root-web{opacity:.88!important}

/* =========================================================
   V203 — bell-locked rotational gather/fan
   Keep the V171/V172 visible fluorescence; no heavier filters.
   ========================================================= */
.v138-jelly-test .v203-oral-ribbons{opacity:.98!important}
.v138-jelly-test .v203-filaments{opacity:.84!important}
.v138-jelly-test .v203-root-web{opacity:.88!important}
.v138-jelly-test.v203-pooled .v203-ribbon,
.v138-jelly-test.v203-pooled .v203-fil{
  filter:none!important;
  mix-blend-mode:normal!important;
}

/* V203 — master-clock bell/tentacle synchronization */
.v138-jelly-test .v203-oral-ribbons{opacity:.98!important}
.v138-jelly-test .v203-filaments{opacity:.86!important}
.v138-jelly-test .v203-root-web{opacity:.90!important}
.v138-jelly-test.v203-pooled .v203-ribbon,
.v138-jelly-test.v203-pooled .v203-fil{
  filter:none!important;
  mix-blend-mode:normal!important;
}

/* =========================================================
   V203 — performance + coordinated rotational gather/fan
   ========================================================= */
.v138-jelly-test .v203-ribbon,
.v138-jelly-test .v203-fil{
  transform-box:view-box;
  will-change:transform;
}
.v138-jelly-test .v203-oral-ribbons{opacity:.98!important}
.v138-jelly-test .v203-filaments{opacity:.86!important}
.v138-jelly-test .v203-root-web{opacity:.90!important}
.v138-jelly-test.v203-pooled .v203-ribbon,
.v138-jelly-test.v203-pooled .v203-fil{
  filter:none!important;
  mix-blend-mode:normal!important;
}

/* =========================================================
   V203 — consolidated final motion repair
   ========================================================= */
.v138-jelly-test .v203-oral-ribbons{opacity:.98!important}
.v138-jelly-test .v203-filaments{opacity:.86!important}
.v138-jelly-test .v203-root-web{opacity:.90!important}
.v138-jelly-test.v203-pooled .v203-ribbon,
.v138-jelly-test.v203-pooled .v203-fil,
.v138-jelly-test.v203-pooled .v203-root-web{
  filter:none!important;
  mix-blend-mode:normal!important;
}
html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
@supports (padding-bottom:env(safe-area-inset-bottom)){
  .fireworks-intro{padding-bottom:env(safe-area-inset-bottom)}
}

/* =========================================================
   V203 — softer natural bell/tentacle coordination
   Transform-only motion for mobile smoothness.
   ========================================================= */
.v138-jelly-test .v203-ribbon,
.v138-jelly-test .v203-fil{
  transform-box:view-box;
  will-change:transform;
}
.v138-jelly-test .v203-oral-ribbons{opacity:.96!important}
.v138-jelly-test .v203-filaments{opacity:.82!important}
.v138-jelly-test .v203-root-web{opacity:.88!important}
.v138-jelly-test.v203-pooled .v203-ribbon,
.v138-jelly-test.v203-pooled .v203-fil,
.v138-jelly-test.v203-pooled .v203-root-web{
  filter:none!important;
  mix-blend-mode:normal!important;
}

/* V203 — smaller reopening amplitude; preserve V177 smooth motion. */

/* V203 — opening returns to neutral; no active outward fan. */

/* V203: remove artificial bell linework and keep only soft gel silhouette. */
.v138-jelly-test [class*="rib"],
.v138-jelly-test [class*="seam"],
.v138-jelly-test [class*="skirt-line"],
.v138-jelly-test [class*="bell-line"]{
  opacity:.10!important;
}
.v138-jelly-test .v203-rim{
  opacity:.38!important;
}
.v138-jelly-test .v203-bell,
.v138-jelly-test .v203-bell-body{
  transform-box:view-box;
  will-change:transform;
}

/* =========================================================
   V203 — separate bell / rim / tentacles to prevent clipping
   ========================================================= */
.v138-jelly-test .v203-oral-ribbons{
  opacity:.98!important;
  visibility:visible!important;
}
.v138-jelly-test .v203-filaments{
  opacity:.88!important;
  visibility:visible!important;
}
.v138-jelly-test .v203-root-web{
  opacity:.90!important;
  visibility:visible!important;
}
.v138-jelly-test .v203-rim{
  opacity:.34!important;
  overflow:visible!important;
}
.v138-jelly-test .v203-bell{
  overflow:visible!important;
}
.v138-jelly-test .v203-ribbon,
.v138-jelly-test .v203-fil{
  filter:none!important;
  mix-blend-mode:normal!important;
  transform-box:view-box;
  will-change:transform;
}
/* Prevent the lower rim from visually escaping the translucent bell. */
.v138-jelly-test .v203-rim{
  stroke-width:2.2!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
}

/* =========================================================
   V203 — new transparent gel artwork + approved V181 trajectory
   ========================================================= */
.v138-jelly-test.v203-pooled{
  width:min(43vw,260px)!important;
  height:auto!important;
  aspect-ratio:2/3;
  background:none!important;
  contain:layout style;
}
.v138-jelly-test .v203-swimmer{
  width:100%;
  height:100%;
  position:relative;
  transform:none!important;
  animation:none!important;
}
.v138-jelly-test .v203-gel-jelly{
  position:absolute;
  inset:0;
  transform-origin:50% 30%;
  will-change:transform;
  pointer-events:none;
}
.v138-jelly-test .v203-gel-bell,
.v138-jelly-test .v203-gel-body{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  pointer-events:none;
  user-select:none;
  -webkit-user-drag:none;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  will-change:transform;
  filter:none!important;
  mix-blend-mode:normal!important;
}
.v138-jelly-test .v203-gel-bell{
  transform-origin:50% 30%;
  z-index:2;
}
.v138-jelly-test .v203-gel-body{
  transform-origin:50% 24%;
  z-index:1;
}

/* V203: stronger bell stroke + causal tentacle follow.
   Keep transforms GPU-only and separate layers. */
.v138-jelly-test .v203-gel-bell{transform-origin:50% 31%!important}
.v138-jelly-test .v203-gel-body{transform-origin:50% 25%!important}

/* V203 — new gel artwork + approved V181 trajectory, stronger visible swimming */
.v138-jelly-test .v203-gel-bell{
  transform-origin:50% 31%!important;
}
.v138-jelly-test .v203-gel-body{
  transform-origin:50% 24%!important;
}

/* V203 guaranteed visible dynamic jelly */
.v138-jelly-test.v203-pooled{
 display:block!important;position:absolute!important;
 width:clamp(150px,43vw,260px)!important;
 height:clamp(300px,86vw,520px)!important;
 opacity:1!important;visibility:visible!important;
 overflow:visible!important;z-index:18!important;pointer-events:none!important;
}
.v138-jelly-test.v203-pooled .v203-swimmer,
.v138-jelly-test.v203-pooled .v203-gel-jelly{
 display:block!important;position:absolute!important;inset:0!important;
 width:100%!important;height:100%!important;opacity:1!important;
 visibility:visible!important;overflow:visible!important;
}
.v138-jelly-test.v203-pooled .v203-gel-bell,
.v138-jelly-test.v203-pooled .v203-gel-body{
 display:block!important;visibility:visible!important;opacity:1!important;
 width:100%!important;height:100%!important;object-fit:contain!important;
}

/* V203 — independent flowing lower tentacles */
.v138-jelly-test .v203-gel-oral,
.v138-jelly-test .v203-gel-tentacle,
.v138-jelly-test .v203-gel-bell{
 position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
 display:block;pointer-events:none;user-select:none;-webkit-user-drag:none;
 backface-visibility:hidden;-webkit-backface-visibility:hidden;
 filter:none!important;mix-blend-mode:normal!important;will-change:transform;
}
.v138-jelly-test .v203-gel-oral{z-index:2;transform-origin:50% 30%}
.v138-jelly-test .v203-gel-tentacle{z-index:1;transform-origin:50% 34%}
.v138-jelly-test .v203-gel-bell{z-index:3;transform-origin:50% 31%}
.v138-jelly-test .v203-t1{transform-origin:24% 34%}
.v138-jelly-test .v203-t2{transform-origin:37% 34%}
.v138-jelly-test .v203-t3{transform-origin:50% 34%}
.v138-jelly-test .v203-t4{transform-origin:63% 34%}
.v138-jelly-test .v203-t5{transform-origin:76% 34%}

/* V203 — asset-path repair + guaranteed layered jelly visibility */
.v138-jelly-test.v203-pooled{
 display:block!important;visibility:visible!important;opacity:1!important;
 width:clamp(150px,43vw,260px)!important;height:clamp(300px,86vw,520px)!important;
 overflow:visible!important;z-index:18!important;
}
.v138-jelly-test.v203-pooled .v203-swimmer,
.v138-jelly-test.v203-pooled .v203-gel-jelly{
 display:block!important;visibility:visible!important;opacity:1!important;
 position:absolute!important;inset:0!important;width:100%!important;height:100%!important;
 overflow:visible!important;
}
.v138-jelly-test.v203-pooled .v203-gel-oral,
.v138-jelly-test.v203-pooled .v203-gel-tentacle,
.v138-jelly-test.v203-pooled .v203-gel-bell{
 display:block!important;visibility:visible!important;opacity:1!important;
 position:absolute!important;inset:0!important;width:100%!important;height:100%!important;
 object-fit:contain!important;
}

/* V203 — stronger breathing + stronger lateral tentacle release + stronger water drift */
.v138-jelly-test .v203-gel-bell{transform-origin:50% 31%!important}
.v138-jelly-test .v203-gel-oral{transform-origin:50% 30%!important}
.v138-jelly-test .v203-gel-tentacle{will-change:transform}

/* V203 — cleaner 4 main + 2 fine tentacles; water-flow bending */
.v138-jelly-test .v203-t1{transform-origin:28% 34%}
.v138-jelly-test .v203-t2{transform-origin:42% 34%}
.v138-jelly-test .v203-t3{transform-origin:58% 34%}
.v138-jelly-test .v203-t4{transform-origin:72% 34%}
.v138-jelly-test .v203-t5{transform-origin:17% 33%}
.v138-jelly-test .v203-t6{transform-origin:83% 33%}
.v138-jelly-test .v203-t5,.v138-jelly-test .v203-t6{opacity:.68!important}

/* V203 true segmented bending */
.v138-jelly-test .v203-tseg{
 position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
 display:block;pointer-events:none;will-change:transform;
 backface-visibility:hidden;-webkit-backface-visibility:hidden;
 filter:none!important;mix-blend-mode:normal!important;z-index:1;
}
.v138-jelly-test .v203-m1s1,.v138-jelly-test .v203-m1s2,.v138-jelly-test .v203-m1s3{transform-origin:25% 37%}
.v138-jelly-test .v203-m2s1,.v138-jelly-test .v203-m2s2,.v138-jelly-test .v203-m2s3{transform-origin:42% 37%}
.v138-jelly-test .v203-m3s1,.v138-jelly-test .v203-m3s2,.v138-jelly-test .v203-m3s3{transform-origin:58% 37%}
.v138-jelly-test .v203-m4s1,.v138-jelly-test .v203-m4s2,.v138-jelly-test .v203-m4s3{transform-origin:75% 37%}

/* V203 lightweight */
.v138-jelly-test.v203-pooled{contain:layout style paint;}
.v138-jelly-test .v203-tseg,
.v138-jelly-test .v203-gel-oral,
.v138-jelly-test .v203-gel-bell{
 filter:none!important;
 mix-blend-mode:normal!important;
}

/* V203 — tentacle gather/release synchronized with bell breathing */
.v138-jelly-test .v203-tseg{
  will-change:transform;
}

/* V203 — coordinated whole-body swimming + slow mid-page fade */
.v138-jelly-test.v203-pooled{opacity:1;will-change:transform,opacity;}

/* V203 — night jelly: transparent gel, big/small cycle, multi-instance */
.v138-jelly-test.v203-pooled{
  will-change:transform,opacity;
  contain:layout style paint;
}
.v138-jelly-test.v203-big{
  width:clamp(150px,43vw,260px)!important;
  height:clamp(300px,86vw,520px)!important;
}
.v138-jelly-test.v203-small{
  width:clamp(92px,27vw,160px)!important;
  height:clamp(184px,54vw,320px)!important;
}
.v138-jelly-test .v203-gel-bell{opacity:.88!important}
.v138-jelly-test .v203-gel-oral{opacity:.72!important}
.v138-jelly-test .v203-tseg{opacity:.68!important}

/* V203 — softer transparent gel + calmer realistic motion */
.v138-jelly-test .v203-gel-bell{
  opacity:.76!important;
}
.v138-jelly-test .v203-gel-oral{
  opacity:.55!important;
}
.v138-jelly-test .v203-tseg{
  opacity:.46!important;
}
.v138-jelly-test.v203-pooled{
  will-change:transform,opacity;
}

/* V203 — continuous rise from middle to top while fading */
.v138-jelly-test.v203-pooled{
  will-change:transform,opacity;
}

/* V203 — higher-transparency gel, softer tentacles */
.v138-jelly-test .v203-gel-bell{opacity:.68!important;}
.v138-jelly-test .v203-gel-oral{opacity:.46!important;}
.v138-jelly-test .v203-tseg{opacity:.35!important;}
.v138-jelly-test.v203-pooled{
  will-change:transform,opacity;
  contain:layout style paint;
}

/* V203 — more transparent gel and softer tentacles */
.v138-jelly-test .v203-gel-bell{opacity:.60!important;}
.v138-jelly-test .v203-gel-oral{opacity:.38!important;}
.v138-jelly-test .v203-tseg{opacity:.27!important;}
.v138-jelly-test.v203-pooled{
  will-change:transform,opacity;
  contain:layout style paint;
}

/* V203 — balanced translucent gel */
.v138-jelly-test .v203-gel-bell{opacity:.60!important;}
.v138-jelly-test .v203-gel-oral{opacity:.37!important;}
.v138-jelly-test .v203-tseg{opacity:.26!important;}
.v138-jelly-test.v203-pooled{
  will-change:transform,opacity;
  contain:layout style paint;
}

/* V203 FINAL — iOS/Android consistency + mobile stability */
.v138-jelly-test.v203-pooled{
  pointer-events:none!important;
  transform-origin:50% 50%;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  will-change:transform,opacity;
  contain:layout style paint;
}
.v138-jelly-test .v203-gel-bell{opacity:.60!important;}
.v138-jelly-test .v203-gel-oral{opacity:.37!important;}
.v138-jelly-test .v203-tseg{opacity:.26!important;}
@supports (height:100dvh){
  .v138-jelly-test.v203-pooled{
    max-height:100dvh;
  }
}

/* V203 LIGHT FINAL — mobile-safe geometric entrance and gel balance */
.v138-jelly-test.v203-pooled{
  pointer-events:none!important;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  will-change:transform,opacity;
  contain:layout style paint;
  filter:none!important;
  -webkit-filter:none!important;
  mix-blend-mode:normal!important;
}
.v138-jelly-test .v203-gel-bell{opacity:.60!important;}
.v138-jelly-test .v203-gel-oral{opacity:.36!important;}
.v138-jelly-test .v203-tseg{opacity:.25!important;}

/* =========================================================
   V203 FINAL LIGHT — real container fade + exact-tap spawn
   This rule intentionally overrides historical opacity:1!important.
   ========================================================= */
.v138-jelly-test.v203-pooled{
  opacity:var(--v203-opacity,1)!important;
  transition:none!important;
  pointer-events:none!important;
  filter:none!important;
  -webkit-filter:none!important;
  mix-blend-mode:normal!important;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  will-change:transform,opacity;
  contain:layout style paint;
}

/* V228 F18 — V203 final jelly isolated visibility/touch repair */
.fireworks-intro[data-home-period="jelly"] #livingJellyStage,
.fireworks-intro.is-midnight #livingJellyStage{
  display:block!important;position:absolute!important;inset:0!important;
  width:100%!important;height:100%!important;overflow:hidden!important;
  opacity:1!important;visibility:visible!important;pointer-events:none!important;
  z-index:58!important;transform:none!important;
}
.fireworks-intro[data-home-period="jelly"] #oceanSceneCarousel{z-index:0!important}
.fireworks-intro[data-home-period="jelly"] .v138-jelly-test.v203-pooled{
  display:block!important;visibility:visible!important;z-index:1!important;
  opacity:var(--v203-opacity,1)!important;pointer-events:none!important;
}
.fireworks-intro[data-home-period="jelly"] .v138-jelly-test.v203-warm{
  visibility:hidden!important;opacity:0!important;
}


/* V228 F20 — restore native interaction after V203 jelly repair.
   Jelly is visual-only. Every real homepage control stays above it and clickable. */
#livingJellyStage,
#livingJellyStage *,
.v138-jelly-test,
.v138-jelly-test *{
  pointer-events:none!important;
}
#enterMailbox,
.mailbox-entry-v105,
.ocean-scene-arrows,
.ocean-scene-arrows button,
.ocean-player,
.ocean-player button,
.ocean-player input,
.day-garden-arrow,
.love-letter-v105,
.love-letter-v105 button{
  pointer-events:auto!important;
  touch-action:manipulation!important;
  position:relative;
  z-index:90!important;
}
#enterMailbox,
.mailbox-entry-v105{
  position:absolute!important;
}
.starlight-tabbar,
.starlight-tabbar a{
  pointer-events:auto!important;
  touch-action:manipulation!important;
  z-index:120!important;
}


/* V228 F21 — screenshot verified layout repair */
/* Carousel arrow overlay must fill the whole homepage so both arrows stay vertically centered. */
.fireworks-intro .ocean-scene-arrows,
.fireworks-intro .ocean-scene-arrows-v105{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  z-index:90!important;
  pointer-events:none!important;
}
.fireworks-intro .ocean-scene-arrows button,
.fireworks-intro .ocean-scene-arrows-v105 button{
  position:absolute!important;
  top:50%!important;
  transform:translateY(-50%)!important;
  pointer-events:auto!important;
  touch-action:manipulation!important;
}
.fireworks-intro .ocean-scene-arrows button:first-child,
.fireworks-intro .ocean-scene-arrows-v105 button:first-child{
  left:max(10px,env(safe-area-inset-left,0px))!important;
  right:auto!important;
}
.fireworks-intro .ocean-scene-arrows button:last-child,
.fireworks-intro .ocean-scene-arrows-v105 button:last-child{
  right:max(10px,env(safe-area-inset-right,0px))!important;
  left:auto!important;
}

/* Mailbox bottom four modules must return immediately after leaving intro. */
body.mailbox-body:not(.intro-open) .starlight-tabbar{
  display:grid!important;
  position:fixed!important;
  left:50%!important;
  bottom:max(8px,env(safe-area-inset-bottom,0px))!important;
  transform:translateX(-50%)!important;
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
  z-index:220!important;
}
body.mailbox-body:not(.intro-open) #mailboxHome{
  padding-bottom:max(112px,calc(92px + env(safe-area-inset-bottom,0px)))!important;
}


/* V228 F22 — restore V203 jelly visibility without touching its motion logic */
.fireworks-intro[data-home-period="jelly"] #livingJellyStage{
  display:block!important;
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  opacity:1!important;
  visibility:visible!important;
  overflow:hidden!important;
  pointer-events:none!important;
  z-index:60!important;
  transform:translateZ(0);
  -webkit-transform:translateZ(0);
}
.fireworks-intro[data-home-period="jelly"] #livingJellyStage .v138-jelly-test,
.fireworks-intro[data-home-period="jelly"] #livingJellyStage .v203-pooled{
  display:block!important;
  visibility:visible!important;
  pointer-events:none!important;
  z-index:61!important;
}

/* Arrow wrapper should not become a fullscreen compositing layer above jelly.
   Only the two actual buttons need to sit above jelly. */
.fireworks-intro .ocean-scene-arrows,
.fireworks-intro .ocean-scene-arrows-v105{
  z-index:62!important;
  background:transparent!important;
}
.fireworks-intro .ocean-scene-arrows button,
.fireworks-intro .ocean-scene-arrows-v105 button{
  z-index:100!important;
}


/* V228 F25 — DAY GARDEN ONLY: keep the two white chevrons at true vertical center. */
.fireworks-intro[data-home-period="butterfly"] #dayGardenPrev,
.fireworks-intro[data-home-period="butterfly"] #dayGardenNext{
  display:block!important;
  position:absolute!important;
  top:50%!important;
  bottom:auto!important;
  margin-top:0!important;
  transform:translateY(-50%)!important;
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
  z-index:80!important;
}
.fireworks-intro[data-home-period="butterfly"] #dayGardenPrev{
  left:max(10px,env(safe-area-inset-left,0px))!important;
  right:auto!important;
}
.fireworks-intro[data-home-period="butterfly"] #dayGardenNext{
  right:max(10px,env(safe-area-inset-right,0px))!important;
  left:auto!important;
}


/* V228 F33 — true first-page envelope intro; existing homepage untouched */
#openingEnvelopeF33.opening-envelope-f33{
  position:fixed!important;
  inset:0!important;
  width:100vw!important;
  height:100vh!important;
  height:100dvh!important;
  z-index:2147483000!important;
  overflow:hidden!important;
  background:#071a3a!important;
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
  isolation:isolate!important;
}
#openingEnvelopeF33[hidden]{display:none!important}

.opening-envelope-f33__bg{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  display:block!important;
  object-fit:cover!important;
  object-position:center center!important;
  z-index:1!important;
  pointer-events:none!important;
  user-select:none!important;
  -webkit-user-drag:none!important;
  transform:scale(1.002);
  transition:transform 1.16s cubic-bezier(.22,.7,.2,1),filter 1.16s ease,opacity .58s ease;
}

.opening-envelope-f33__seal{
  position:absolute!important;
  left:50%!important;
  top:45.7%!important;
  width:min(24vw,120px)!important;
  aspect-ratio:1/1!important;
  transform:translate(-50%,-50%)!important;
  z-index:8!important;
  border:0!important;
  padding:0!important;
  margin:0!important;
  border-radius:50%!important;
  background:transparent!important;
  box-shadow:none!important;
  outline:none!important;
  pointer-events:auto!important;
  touch-action:manipulation!important;
  -webkit-tap-highlight-color:transparent!important;
}

.opening-envelope-f33__mist{
  position:absolute!important;
  top:-12%!important;
  bottom:-12%!important;
  width:70%!important;
  z-index:6!important;
  opacity:0!important;
  pointer-events:none!important;
  filter:blur(26px)!important;
  will-change:transform,opacity!important;
  background:
    radial-gradient(ellipse at center,
      rgba(255,255,255,.42) 0%,
      rgba(225,236,255,.26) 30%,
      rgba(174,194,228,.13) 52%,
      rgba(49,70,105,.06) 66%,
      rgba(7,20,48,0) 80%)!important;
  transition:transform 1.08s cubic-bezier(.18,.74,.18,1),opacity .34s ease!important;
}
.opening-envelope-f33__mist--left{left:-18%!important;transform:translateX(0)!important}
.opening-envelope-f33__mist--right{right:-18%!important;transform:translateX(0) scaleX(-1)!important}

#openingEnvelopeF33.is-opening .opening-envelope-f33__mist{opacity:1!important}
#openingEnvelopeF33.is-opening .opening-envelope-f33__mist--left{transform:translateX(-74%)!important}
#openingEnvelopeF33.is-opening .opening-envelope-f33__mist--right{transform:translateX(74%) scaleX(-1)!important}
#openingEnvelopeF33.is-opening .opening-envelope-f33__bg{
  transform:scale(1.04)!important;
  filter:brightness(1.075) saturate(1.035)!important;
}
#openingEnvelopeF33.is-opening .opening-envelope-f33__seal{
  animation:f33SealOpen .56s cubic-bezier(.2,.75,.2,1) forwards!important;
}
#openingEnvelopeF33.is-fading{
  opacity:0!important;
  visibility:hidden!important;
  transition:opacity .58s ease,visibility .58s ease!important;
}

@keyframes f33SealOpen{
  0%{transform:translate(-50%,-50%) scale(1);opacity:1}
  38%{transform:translate(-50%,-50%) scale(.93);opacity:1}
  100%{transform:translate(-50%,-50%) scale(1.15);opacity:0}
}

html.opening-envelope-active-f33,
body.opening-envelope-active-f33{
  overflow:hidden!important;
  overscroll-behavior:none!important;
}

@supports(height:100dvh){
  #openingEnvelopeF33.opening-envelope-f33{height:100dvh!important}
}

.future-letter-trigger-f35{position:fixed;right:16px;bottom:calc(86px + env(safe-area-inset-bottom));z-index:1200;min-height:44px;padding:10px 14px;border:1px solid rgba(255,232,179,.34);border-radius:999px;background:rgba(12,38,67,.78);color:#fff5d6;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);font-size:14px;display:flex;align-items:center;gap:7px;box-shadow:0 8px 24px rgba(0,0,0,.18);touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.future-letter-trigger-f35:active{transform:scale(.97)}
.future-letter-sheet-f35,.future-letter-arrival-f35{position:fixed;inset:0;z-index:2200;display:flex;align-items:flex-end;justify-content:center;padding:18px 14px calc(18px + env(safe-area-inset-bottom));background:rgba(2,14,28,.52);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.future-letter-sheet-f35[hidden],.future-letter-arrival-f35[hidden]{display:none!important}
.future-letter-card-f35,.future-letter-arrival-card-f35{width:min(100%,520px);max-height:min(82vh,720px);overflow:auto;border:1px solid rgba(255,232,179,.24);border-radius:24px;padding:22px 18px 18px;background:linear-gradient(180deg,rgba(16,43,73,.97),rgba(9,29,53,.98));color:#f8efd8;box-shadow:0 24px 70px rgba(0,0,0,.35);position:relative}
.future-letter-close-f35{position:absolute;top:10px;right:10px;width:44px;height:44px;border:0;border-radius:50%;background:transparent;color:#f8efd8;font-size:26px;touch-action:manipulation}
.future-letter-kicker-f35{font-size:12px;letter-spacing:.16em;color:#d9c28d;margin-bottom:8px}
.future-letter-card-f35 h2,.future-letter-arrival-card-f35 h2{font-size:24px;line-height:1.25;margin:0 42px 8px 0}
.future-letter-copy-f35,.future-letter-note-f35{color:rgba(248,239,216,.72);font-size:13px;line-height:1.6}
.future-letter-label-f35{display:block;margin:16px 0 7px;font-size:13px;color:#eedcae}
.future-letter-date-f35,.future-letter-text-f35{width:100%;box-sizing:border-box;border:1px solid rgba(255,232,179,.22);border-radius:14px;background:rgba(255,255,255,.07);color:#fff8e8;font-size:16px;outline:none}
.future-letter-date-f35{height:48px;padding:0 12px;color-scheme:dark}
.future-letter-text-f35{padding:13px;resize:vertical;min-height:156px;line-height:1.7}
.future-letter-save-f35{width:100%;min-height:48px;margin-top:16px;border:0;border-radius:14px;background:#e8cf98;color:#24334a;font-size:15px;font-weight:600;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.future-letter-status-f35{min-height:20px;margin-top:10px;color:#ffe8a8;font-size:13px}
.future-letter-arrival-date-f35{font-size:12px;color:#d9c28d;margin:5px 0 14px}
.future-letter-arrival-text-f35{font-size:16px;line-height:1.9;color:#fff8e8}
body.future-letter-open-f35{overflow:hidden!important}
button,a,[role="button"]{touch-action:manipulation}


/* F36 — future-self entry placed below the writing paper */
.future-letter-below-paper-f36{
  width:100%;
  display:flex;
  justify-content:center;
  padding:14px 18px calc(18px + env(safe-area-inset-bottom));
  box-sizing:border-box;
}
.future-letter-trigger-f36{
  width:min(88%,360px);
  min-height:48px;
  border:1px solid rgba(255,232,179,.34);
  border-radius:16px;
  background:rgba(12,38,67,.82);
  color:#fff5d6;
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  font-size:15px;
  letter-spacing:.02em;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  box-shadow:0 8px 22px rgba(0,0,0,.14);
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}
.future-letter-trigger-f36:active{transform:scale(.985)}
.future-letter-trigger-icon-f36{font-size:17px}

/* F37: time-machine entry at the bottom of the existing paper-picker page only */
#paperPicker .time-machine-entry-f37{
  position:absolute;
  left:50%;
  bottom:max(14px,env(safe-area-inset-bottom));
  transform:translateX(-50%);
  width:min(54vw,238px);
  z-index:12;
  display:block;
  line-height:0;
  border-radius:999px;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
#paperPicker .time-machine-entry-f37 img{display:block;width:100%;height:auto;object-fit:contain}
#paperPicker .time-machine-entry-f37:active{transform:translateX(-50%) scale(.97)}
html.is-android #paperPicker .time-machine-entry-f37{
  position:relative!important;
  left:auto!important;
  bottom:auto!important;
  transform:none!important;
  width:min(58vw,238px)!important;
  margin:12px auto calc(18px + env(safe-area-inset-bottom))!important;
}

/* F38 — smaller transparent time-machine entry on existing paper picker */
#paperPicker .time-machine-entry-f37{
  width:min(42vw,190px)!important;
  background:rgba(10,31,62,.10)!important;
  border-radius:999px!important;
  box-shadow:0 8px 22px rgba(0,0,0,.18)!important;
  -webkit-backdrop-filter:blur(4px)!important;
  backdrop-filter:blur(4px)!important;
  animation:f38TimeFloat 3.6s ease-in-out infinite!important;
}
#paperPicker .time-machine-entry-f37 img{
  display:block!important;width:100%!important;height:auto!important;
  background:transparent!important;border:0!important;box-shadow:none!important;
}
@keyframes f38TimeFloat{
  0%,100%{transform:translateX(-50%) translateY(0)}
  50%{transform:translateX(-50%) translateY(-3px)}
}
html.is-android #paperPicker .time-machine-entry-f37{
  width:min(46vw,190px)!important;
  background:rgba(10,31,62,.10)!important;
  animation:f38TimeFloatAndroid 3.6s ease-in-out infinite!important;
}
@keyframes f38TimeFloatAndroid{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-3px)}
}
@media (prefers-reduced-motion:reduce){
  #paperPicker .time-machine-entry-f37{animation:none!important}
}

/* V228 F45 — rotating vinyl light/shadow, rotating orange label, fixed spindle dot */
.memories-vinyl-disc{
  background:
    repeating-radial-gradient(circle at center,transparent 0 5px,rgba(255,255,255,.075) 6px,transparent 7px),
    conic-gradient(from 18deg,
      rgba(255,255,255,.02) 0deg,
      rgba(255,220,155,.20) 22deg,
      rgba(255,255,255,.025) 52deg,
      rgba(0,0,0,.22) 92deg,
      rgba(255,255,255,.035) 138deg,
      rgba(255,205,125,.14) 174deg,
      rgba(0,0,0,.20) 218deg,
      rgba(255,255,255,.07) 274deg,
      rgba(255,215,145,.16) 318deg,
      rgba(255,255,255,.02) 360deg),
    radial-gradient(circle at center,transparent 0 15%,rgba(7,8,10,.98) 15.5% 100%)!important;
}
.memories-vinyl-label{
  background:
    conic-gradient(from 35deg,rgba(255,218,154,.30),rgba(193,91,31,.08) 34%,rgba(255,226,167,.24) 58%,rgba(163,68,26,.10) 82%,rgba(255,218,154,.30)),
    radial-gradient(circle,#dc7d34 0 72%,#6e331d 73% 100%)!important;
  transform-origin:50% 50%!important;
}
.memories-vinyl-label:after{display:none!important}
.memories-vinyl:after{
  content:"";position:absolute;left:50%;top:50%;z-index:6;
  width:5px;height:5px;border-radius:50%;background:#24160f;
  transform:translate(-50%,-50%) scaleY(3.51);
  box-shadow:0 0 0 1px rgba(255,218,160,.10);
}
.memories-vinyl.is-playing .memories-vinyl-disc{animation:f45discspin 3.2s linear infinite!important}
.memories-vinyl.is-playing .memories-vinyl-label{animation:f45labelspin 3.2s linear infinite!important}
@keyframes f45discspin{to{transform:rotate(360deg)}}
@keyframes f45labelspin{
  from{transform:translate(-50%,-50%) scaleY(3.51) rotate(0deg)}
  to{transform:translate(-50%,-50%) scaleY(3.51) rotate(360deg)}
}


/* V228 F46 — pure black vinyl: no orange center, no spindle dot; light/shadow rotates with playback */
.memories-vinyl-label{display:none!important}
.memories-vinyl:after{display:none!important}
.memories-vinyl-disc{
  background:
    repeating-radial-gradient(circle at center,transparent 0 5px,rgba(255,255,255,.085) 6px,transparent 7px),
    conic-gradient(from 12deg,
      rgba(255,255,255,.015) 0deg,
      rgba(255,236,205,.24) 20deg,
      rgba(255,255,255,.035) 48deg,
      rgba(0,0,0,.28) 88deg,
      rgba(255,255,255,.04) 132deg,
      rgba(255,224,180,.18) 166deg,
      rgba(0,0,0,.26) 215deg,
      rgba(255,255,255,.09) 270deg,
      rgba(255,229,190,.20) 314deg,
      rgba(255,255,255,.015) 360deg),
    radial-gradient(circle at center,#050608 0 100%)!important;
}
.memories-vinyl.is-playing .memories-vinyl-disc{animation:f46discspin 3.2s linear infinite!important}
@keyframes f46discspin{to{transform:rotate(360deg)}}
/* F47 · 我们的时间 / 星星收藏 */
.f47-time-body{background:radial-gradient(circle at 50% 0,#16345a 0,#08182b 38%,#030b14 100%);color:#f7e9c9;min-height:100vh}.f47-time-shell{max-width:720px;margin:auto;padding:calc(28px + env(safe-area-inset-top)) 18px 130px}.f47-time-head{text-align:center;padding:18px 8px 30px}.f47-time-head>a{position:absolute;left:20px;color:#e9d5aa;text-decoration:none}.f47-time-head p{font-size:10px;letter-spacing:.28em;opacity:.65}.f47-time-head h1{font-family:serif;font-weight:400;letter-spacing:.18em;margin:12px 0}.f47-time-head>span{font-size:13px;opacity:.72}.f47-random-card{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:20px;border:1px solid rgba(240,202,125,.28);border-radius:24px;background:linear-gradient(135deg,rgba(255,222,153,.10),rgba(35,70,110,.20));box-shadow:0 14px 50px rgba(0,0,0,.18)}.f47-random-card div{display:flex;flex-direction:column;gap:5px;min-width:0}.f47-random-card small{color:#e8c77f}.f47-random-card strong{font-family:serif;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.f47-random-card em{font-size:11px;opacity:.6;font-style:normal}.f47-random-card a{flex:none;color:#f4d995;text-decoration:none;font-size:12px}.f47-stars,.f47-timeline{margin-top:32px}.f47-stars h2,.f47-timeline h2{font:400 20px/1.2 serif;letter-spacing:.12em;margin:0 0 5px}.f47-stars>p{font-size:12px;opacity:.55;margin:0 0 14px}.f47-star-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.f47-star-grid>a{min-height:92px;padding:14px;border-radius:18px;border:1px solid rgba(241,209,142,.18);background:rgba(8,25,44,.58);color:#f8e9c8;text-decoration:none;display:flex;flex-direction:column;gap:5px}.f47-star-grid>a>span{color:#f5cf72}.f47-star-grid strong{font:400 14px/1.35 serif}.f47-star-grid small{opacity:.5}.f47-empty{grid-column:1/-1;text-align:center;padding:24px;font-size:12px;line-height:1.8;opacity:.55}.f47-timeline{position:relative}.f47-timeline:before{content:"";position:absolute;left:7px;top:38px;bottom:10px;width:1px;background:linear-gradient(#d9b766,rgba(217,183,102,.08))}.f47-timeline article{position:relative;margin-left:0;padding:14px 42px 14px 28px;min-height:62px}.f47-timeline article>i{position:absolute;left:3px;top:23px;width:9px;height:9px;border-radius:50%;background:#e5c16c;box-shadow:0 0 15px #e5c16c}.f47-timeline time{display:block;font-size:10px;opacity:.48;margin-bottom:5px}.f47-timeline article>a{color:#f7e9c9;text-decoration:none;display:flex;flex-direction:column;gap:4px}.f47-timeline strong{font:400 15px/1.3 serif}.f47-timeline article>a span{font-size:11px;opacity:.55}.f47-star-btn{position:absolute;right:2px;top:23px;border:0;background:none;color:#e7c56e;font-size:24px;padding:4px}.f47-star-btn.is-starred{filter:drop-shadow(0 0 7px #e7c56e)}.f47-time-entry{position:absolute;left:50%;bottom:calc(150px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:8;color:#f6dfaa;text-decoration:none;font-size:12px;letter-spacing:.12em;padding:8px 15px;border:1px solid rgba(244,215,153,.32);border-radius:99px;background:rgba(4,15,28,.44);backdrop-filter:blur(8px)}
.f47-mail-time-link{display:inline-block;color:#d7b56b;text-decoration:none;font-size:12px;letter-spacing:.14em;padding:7px 14px;border:1px solid rgba(215,181,107,.28);border-radius:99px}.archive-card{position:relative}.f47-card-star{position:absolute;right:38px;top:50%;transform:translateY(-50%);font-size:22px;color:#e2bc63;z-index:3;padding:10px}.f47-card-star.is-starred{filter:drop-shadow(0 0 6px #e2bc63)}

/* =========================================================
   F55 — Xiaomi / Android compositor-only performance pass.
   Scoped strictly to html.is-android; iPhone/Safari rules are untouched.
   No geometry, sizing, colors, animation timing, or feature logic changes.
   ========================================================= */
html.is-android .fireworks-intro[data-home-period="butterfly"] #dayGardenScenes,
html.is-android .fireworks-intro[data-home-period="butterfly"] #dayButterflyStage{
  contain:layout paint style;
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
}
html.is-android .fireworks-intro[data-home-period="butterfly"] .day-garden-slide{
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
}
html.is-android .fireworks-intro[data-home-period="butterfly"] .day-garden-slide.is-active{
  transform:translateZ(0);
}
html.is-android .fireworks-intro[data-home-period="butterfly"] .v228-morpho{
  contain:layout paint style;
}
html.is-android .day-garden-arrow,
html.is-android .mailbox-entry-v105,
html.is-android .starlight-tabbar a,
html.is-android button,
html.is-android a[role="button"]{
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}


/* F57 — 13:00-17:00 independent rice-field homepage; iPhone 14 / Xiaomi 14 Ultra */
.rice-field-scenes{position:absolute;inset:0;z-index:1;overflow:hidden;background:#d7b86d;opacity:0;visibility:hidden;pointer-events:none;min-height:100vh;min-height:100dvh}
.fireworks-intro[data-home-period="rice"] .rice-field-scenes{opacity:1;visibility:visible;pointer-events:auto}
.rice-field-slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .72s ease;will-change:opacity}
.rice-field-slide.is-active{opacity:1;visibility:visible}
.rice-field-slide img{width:100%;height:100%;display:block;object-fit:cover;object-position:50% 50%;user-select:none;-webkit-user-drag:none;transform:translateZ(0)}
.fireworks-intro[data-home-period="rice"] #dayGardenScenes,.fireworks-intro[data-home-period="rice"] #dayButterflyStage,.fireworks-intro[data-home-period="rice"] #oceanSceneCarousel,.fireworks-intro[data-home-period="rice"] .ocean-scene-arrows,.fireworks-intro[data-home-period="rice"] .ocean-scene-dots,.fireworks-intro[data-home-period="rice"] .fireworks-nebula,.fireworks-intro[data-home-period="rice"] .fireworks-meteors,.fireworks-intro[data-home-period="rice"] .fireworks-twinkles,.fireworks-intro[data-home-period="rice"] #livingJellyStage,.fireworks-intro[data-home-period="rice"] #fireworksCanvas{opacity:0!important;visibility:hidden!important;pointer-events:none!important}
.fireworks-intro[data-home-period="rice"] .mailbox-entry-v105,.fireworks-intro[data-home-period="rice"] .ocean-player,.fireworks-intro[data-home-period="rice"] .love-letter-v105{z-index:20}
html.is-android .fireworks-intro[data-home-period="rice"] #riceFieldScenes{contain:layout paint style;-webkit-backface-visibility:hidden;backface-visibility:hidden}
@media (max-aspect-ratio:10/19){.rice-field-slide img{object-position:50% 50%}}

/* =========================================================
   V228 F58 — purple / transparent pink / blue / white jelly cycle
   New color cutouts share the exact same V203 outer swimming trajectory.
   ========================================================= */
.v138-jelly-test .v203-color-wrap{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  overflow:visible!important;
  pointer-events:none!important;
}
.v138-jelly-test .v203-color-jelly{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  object-position:50% 50%!important;
  display:block!important;
  opacity:.88!important;
  visibility:visible!important;
  pointer-events:none!important;
  user-select:none!important;
  -webkit-user-drag:none!important;
  transform-origin:50% 30%!important;
  backface-visibility:hidden!important;
  -webkit-backface-visibility:hidden!important;
  will-change:transform!important;
  filter:none!important;
  -webkit-filter:none!important;
  mix-blend-mode:normal!important;
}
.v138-jelly-test[data-jelly-color="white"] .v203-color-jelly{opacity:.92!important}
/* F60: iPhone 14 + Xiaomi 14 Ultra — full viewport, complete rice artwork, no crop */
.rice-field-slide{overflow:hidden;background:#111}
.rice-field-slide::before{content:"";position:absolute;inset:-4%;background-image:var(--rice-bg);background-size:cover;background-position:center;filter:blur(18px);transform:scale(1.08);opacity:.74}
.rice-field-slide img{position:relative;z-index:1;width:100%;height:100%;object-fit:contain!important;object-position:center!important;background:transparent!important}
@supports(height:100dvh){.rice-field-scenes,.rice-field-slide{height:100dvh;min-height:100dvh}}


/* =========================================================
   V228 F61 — definitive no-black-edge rice layout for iPhone 14 + Xiaomi 14 Ultra.
   Two real image layers per slide: blurred cover backdrop + uncropped contain foreground.
   This avoids URL-resolution issues from pseudo-element backgrounds.
   ========================================================= */
.rice-field-scenes{
  position:absolute!important; inset:0!important;
  width:100%!important; height:100%!important;
  min-height:100vh!important; min-height:100dvh!important;
  overflow:hidden!important; background:#7d6b45!important;
}
.rice-field-slide{
  position:absolute!important; inset:0!important;
  width:100%!important; height:100%!important;
  overflow:hidden!important; background:#7d6b45!important;
  isolation:isolate!important;
}
.rice-field-slide::before{display:none!important}
.rice-field-slide .rice-field-bg{
  position:absolute!important;
  z-index:0!important;
  left:-6%!important; top:-6%!important;
  width:112%!important; height:112%!important;
  object-fit:cover!important; object-position:center center!important;
  filter:blur(22px) saturate(.92) brightness(.78)!important;
  -webkit-filter:blur(22px) saturate(.92) brightness(.78)!important;
  transform:scale(1.08) translateZ(0)!important;
  opacity:1!important; display:block!important;
  user-select:none!important; -webkit-user-drag:none!important;
  pointer-events:none!important;
}
.rice-field-slide .rice-field-main{
  position:absolute!important;
  z-index:1!important;
  inset:0!important;
  width:100%!important; height:100%!important;
  object-fit:contain!important; object-position:center center!important;
  background:transparent!important;
  transform:translateZ(0)!important;
  display:block!important;
  user-select:none!important; -webkit-user-drag:none!important;
  pointer-events:none!important;
}
/* neutralize older generic rule so it cannot turn backdrop into contain */
.rice-field-slide img.rice-field-bg{object-fit:cover!important}
.rice-field-slide img.rice-field-main{object-fit:contain!important}
@supports(height:100dvh){
  .rice-field-scenes,.rice-field-slide{height:100dvh!important;min-height:100dvh!important}
}
@media (max-width:430px){
  .rice-field-slide .rice-field-bg{left:-8%!important;top:-8%!important;width:116%!important;height:116%!important}
}

/* F64: forced jelly preview must use original jelly background, not rice */
[data-home-period="jelly"] .rice-field-scenes,
html[data-home-period="jelly"] .rice-field-scenes,
body[data-home-period="jelly"] .rice-field-scenes{
  display:none !important;
  visibility:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
}

/* F65: jelly uses original deep-ocean scene only */
[data-home-period="jelly"] .rice-field-scenes{display:none!important;visibility:hidden!important;opacity:0!important;}
[data-home-period="jelly"] .ocean-carousel{display:block!important;visibility:visible!important;opacity:1!important;}


/* F66 — restore the approved deep-ocean jelly homepage.
   Rice-field final artwork remains untouched. Jelly V181/F58 motion code remains untouched. */
html[data-home-period="jelly"] #oceanSceneCarousel,
body[data-home-period="jelly"] #oceanSceneCarousel,
#fireworksIntro[data-home-period="jelly"] #oceanSceneCarousel{
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
  pointer-events:auto!important;
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
}
#fireworksIntro[data-home-period="jelly"] #riceFieldScenes,
#fireworksIntro[data-home-period="jelly"] #dayGardenScenes{
  display:none!important;
  visibility:hidden!important;
  opacity:0!important;
}



/* F68 — use the exact F58 jelly homepage visual layer. */
.fireworks-intro[data-home-period="jelly"] #oceanSceneCarousel{
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  background:#031a38!important;
}
.fireworks-intro[data-home-period="jelly"] #oceanSceneCarousel .v103-ocean-slide{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
}
.fireworks-intro[data-home-period="jelly"] #oceanSceneCarousel .v114-scene-fit{
  display:block!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center center!important;
  visibility:visible!important;
}
.fireworks-intro[data-home-period="jelly"] #riceFieldScenes{
  display:none!important;
  visibility:hidden!important;
  opacity:0!important;
  pointer-events:none!important;
}

/* F69 — visible left/right arrows for the 3 jelly-home images */
#fireworksIntro[data-home-period="jelly"] .f69-ocean-arrow,
html[data-home-period="jelly"] .f69-ocean-arrow,
body[data-home-period="jelly"] .f69-ocean-arrow{
  display:flex!important;
  position:absolute!important;
  top:50%!important;
  transform:translateY(-50%)!important;
  width:34px!important;
  height:46px!important;
  align-items:center!important;
  justify-content:center!important;
  border:0!important;
  background:rgba(4,18,40,.20)!important;
  color:rgba(255,245,205,.82)!important;
  font-size:34px!important;
  font-weight:300!important;
  line-height:1!important;
  z-index:65!important;
  opacity:.78!important;
  -webkit-tap-highlight-color:transparent!important;
  backdrop-filter:blur(2px);
}
#fireworksIntro[data-home-period="jelly"] .f69-ocean-prev{
  left:max(8px,env(safe-area-inset-left))!important;
  border-radius:0 20px 20px 0!important;
}
#fireworksIntro[data-home-period="jelly"] .f69-ocean-next{
  right:max(8px,env(safe-area-inset-right))!important;
  border-radius:20px 0 0 20px!important;
}
#fireworksIntro[data-home-period="jelly"] #oceanSceneCarousel .v103-ocean-slide{
  transition:opacity .45s ease!important;
}


/* F71 — all six colors use the SAME V181/V203 layered transparent-gel jelly.
   Only the optical tone changes; bell breathing, oral arms and segmented transparent
   tentacles remain the approved purple mechanics. */
.v203-gel-jelly.v203-tone-purple{
  filter:none!important;
}
.v203-gel-jelly.v203-tone-blue{
  filter:hue-rotate(42deg) saturate(1.18) brightness(1.08)!important;
}
.v203-gel-jelly.v203-tone-pink{
  filter:hue-rotate(-22deg) saturate(1.16) brightness(1.08)!important;
}
.v203-gel-jelly.v203-tone-white{
  filter:saturate(.18) brightness(1.48) contrast(.88)!important;
}
.v203-gel-jelly.v203-tone-green{
  filter:hue-rotate(108deg) saturate(1.08) brightness(1.13)!important;
}
.v203-gel-jelly.v203-tone-orange{
  filter:hue-rotate(-70deg) saturate(1.22) brightness(1.12)!important;
}

/* Preserve the glass/gel translucency of every layer. */
.v203-gel-jelly[class*="v203-tone-"] .v203-gel-bell{
  opacity:.90!important;
}
.v203-gel-jelly[class*="v203-tone-"] .v203-gel-oral{
  opacity:.78!important;
}
.v203-gel-jelly[class*="v203-tone-"] .v203-tseg{
  opacity:.72!important;
}


/* F74 performance tuning: isolate full-screen scenes and jelly animations. */
#oceanSceneCarousel,
#oceanSceneCarousel .v103-ocean-slide,
#livingJellyStage,
.v138-jelly-test,
.v203-swimmer{
  transform:translateZ(0);
  backface-visibility:hidden;
}
#oceanSceneCarousel .v103-ocean-slide{
  contain:layout paint style;
}
.v138-jelly-test{
  contain:layout paint style;
  will-change:transform,opacity;
}
.v203-gel-bell,.v203-gel-oral,.v203-tseg{
  backface-visibility:hidden;
}
@media (prefers-reduced-motion: reduce){
  #oceanSceneCarousel .v103-ocean-slide{transition-duration:.2s!important;}
}

/* F76 — mobile tap responsiveness */
html,body,button,a,[role="button"],#livingJellyStage,#oceanSceneCarousel{
  touch-action:manipulation;
}
button,a,[role="button"],.f69-ocean-arrow{
  -webkit-tap-highlight-color:transparent;
}
.f76-pressing{transform:scale(.985);}
#oceanSceneCarousel,.v138-jelly-test,.v203-swimmer{
  backface-visibility:hidden;
  transform:translateZ(0);
}
.v138-jelly-test{
  contain:layout paint style;
  will-change:transform,opacity;
}


/* F77 — transparent refined star switch on every homepage */
#fireworksIntro .home-mode-star{
  position:absolute!important;
  top:max(12px,env(safe-area-inset-top))!important;
  left:max(12px,env(safe-area-inset-left))!important;
  z-index:140!important;
  width:33px!important;
  height:33px!important;
  min-width:33px!important;
  min-height:33px!important;
  padding:0!important;
  border:1px solid rgba(255,255,255,.27)!important;
  border-radius:50%!important;
  background:rgba(5,18,38,.14)!important;
  box-shadow:0 2px 10px rgba(0,0,0,.12),inset 0 0 10px rgba(255,255,255,.05)!important;
  backdrop-filter:blur(6px) saturate(1.08)!important;
  -webkit-backdrop-filter:blur(6px) saturate(1.08)!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  color:rgba(255,248,214,.95)!important;
  opacity:.88!important;
  touch-action:manipulation!important;
  -webkit-tap-highlight-color:transparent!important;
  transition:transform .14s ease,opacity .14s ease,background .14s ease!important;
}
#fireworksIntro .home-mode-star:active{
  transform:scale(.90)!important;
  opacity:1!important;
  background:rgba(255,255,255,.11)!important;
}
#fireworksIntro .home-mode-star-core{
  display:block!important;
  font-size:18px!important;
  line-height:1!important;
  font-weight:400!important;
  pointer-events:none!important;
  text-shadow:0 0 6px rgba(255,244,183,.65),0 0 13px rgba(255,255,255,.28)!important;
}

/* F79: star always stays above scene canvases/stages and receives taps. */
#fireworksIntro #homeModeStar{
  z-index:999!important;
  pointer-events:auto!important;
  position:fixed!important;
}

/* F80: visible confirmation that one star tap was registered. */
@keyframes f80StarSwitchPulse{
  0%{transform:scale(1);}
  42%{transform:scale(.82) rotate(-8deg);}
  72%{transform:scale(1.10) rotate(5deg);}
  100%{transform:scale(1) rotate(0);}
}
#fireworksIntro #homeModeStar.f80-switched{
  animation:f80StarSwitchPulse .24s ease-out!important;
}




/* F82 — hard theme isolation without hiding the shared fireworks/jelly carousel incorrectly. */
#fireworksIntro[data-home-period="butterfly"] #riceFieldScenes,
#fireworksIntro[data-home-period="butterfly"] #oceanSceneCarousel,
#fireworksIntro[data-home-period="butterfly"] #livingJellyStage,
#fireworksIntro[data-home-period="rice"] #dayGardenScenes,
#fireworksIntro[data-home-period="rice"] #oceanSceneCarousel,
#fireworksIntro[data-home-period="rice"] #livingJellyStage,
#fireworksIntro[data-home-period="fireworks"] #dayGardenScenes,
#fireworksIntro[data-home-period="fireworks"] #riceFieldScenes,
#fireworksIntro[data-home-period="fireworks"] #livingJellyStage,
#fireworksIntro[data-home-period="jelly"] #dayGardenScenes,
#fireworksIntro[data-home-period="jelly"] #riceFieldScenes{
  display:none!important;
  visibility:hidden!important;
  opacity:0!important;
  pointer-events:none!important;
}
#fireworksIntro[data-home-period="jelly"] #fireworksCanvas,
#fireworksIntro[data-home-period="butterfly"] #fireworksCanvas,
#fireworksIntro[data-home-period="rice"] #fireworksCanvas{
  display:none!important;
  visibility:hidden!important;
  opacity:0!important;
  pointer-events:none!important;
}

/* F84 — pointer routing follows the visible theme. */
#fireworksIntro[data-home-period="butterfly"] #dayGardenScenes,
#fireworksIntro[data-home-period="butterfly"] #dayGardenStage{pointer-events:auto!important;}
#fireworksIntro:not([data-home-period="butterfly"]) #dayGardenScenes,
#fireworksIntro:not([data-home-period="butterfly"]) #dayGardenStage{pointer-events:none!important;}

#fireworksIntro[data-home-period="fireworks"] #fireworksCanvas{pointer-events:auto!important;}
#fireworksIntro:not([data-home-period="fireworks"]) #fireworksCanvas{pointer-events:none!important;}

#fireworksIntro[data-home-period="jelly"] #livingJellyStage{pointer-events:auto!important;}
#fireworksIntro:not([data-home-period="jelly"]) #livingJellyStage{pointer-events:none!important;}


/* F87 — jelly/fireworks carousel arrow cleanup. */
#fireworksIntro [data-f87-primary-arrow="1"]{
  box-shadow:0 3px 14px rgba(0,0,0,.22)!important;
  text-shadow:none!important;
  filter:none!important;
  backdrop-filter:blur(5px)!important;
  -webkit-backdrop-filter:blur(5px)!important;
}
#fireworksIntro .f69-ocean-arrow::before,
#fireworksIntro .f69-ocean-arrow::after{
  text-shadow:none!important;
  filter:none!important;
}


/* F88 — faster mobile taps and carousel transitions */
#fireworksIntro,
#fireworksIntro button,
#fireworksIntro [role="button"]{
  touch-action:manipulation!important;
  -webkit-tap-highlight-color:transparent!important;
}
#fireworksIntro .v103-ocean-slide,
#fireworksIntro .day-garden-slide,
#fireworksIntro .v205-day-slide,
#fireworksIntro .rice-field-slide,
#fireworksIntro .rice-slide{
  transition:opacity .18s ease!important;
  will-change:opacity!important;
  backface-visibility:hidden!important;
  transform:translateZ(0)!important;
}