@font-face { font-family:"Bubble Chinese Pixel"; src:url("品牌素材/中文像素字体.ttf") format("truetype"); font-display:swap; }

:root {
  --ice: #eefdff;
  --sky: #8ee2ff;
  --blue: #397fee;
  --lavender: #d8d6ff;
  --ink: #245ba9;
}

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; }
html { overflow-x:hidden; }

body {
  overflow-x: hidden;
  color: var(--ink);
  background: var(--ice);
  font-family: "Courier New", ui-monospace, monospace;
}

body.intro-active { overflow: hidden; }

.home {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  min-height: 100dvh;
  overflow: hidden;
  isolation: isolate;
  background: #dff7ff;
  opacity: 0;
  transition: opacity 480ms ease;
}

.home.is-visible { opacity: 1; }

.home__composition {
  position:absolute;
  z-index:1;
  inset:0;
}

.home__field {
  position: absolute;
  z-index: -3;
  inset: -2%;
  background: #dff7ff url("品牌素材/网页背景.png") center / cover no-repeat;
}

.home__field::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 30% 59%, rgba(255,255,255,.52), transparent 42%),
    linear-gradient(90deg, rgba(255,255,255,.15), transparent 32% 76%, rgba(219,247,255,.18));
}

.home__brand {
  position: absolute;
  z-index: 8;
  top: clamp(12px, 2.2dvh, 25px);
  left: 50%;
  display: block;
  width: clamp(270px, 27vw, 420px);
  transform: translateX(-50%);
  transform-origin: 50% 30%;
  transition: transform 280ms cubic-bezier(.2,.75,.22,1), filter 280ms ease;
}
.home__brand-zone{display:contents}

.home__logo {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 8px 14px rgba(44,122,210,.13));
}

.home-id-status {
  position:absolute;
  z-index:10;
  top:max(18px,env(safe-area-inset-top));
  right:clamp(24px,3vw,48px);
  max-width:min(34vw,330px);
  padding:6px 4px;
  border:0;
  appearance:none;
  -webkit-appearance:none;
  -webkit-tap-highlight-color:transparent;
  color:rgba(255,255,255,.96);
  background:transparent;
  text-shadow:0 0 5px rgba(255,255,255,.86),0 0 13px rgba(52,135,215,.74);
  font:400 11px/1.2 "Bubble Chinese Pixel",ui-monospace,monospace;
  letter-spacing:.065em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  cursor:inherit;
  transition:transform 140ms ease,filter 140ms ease;
}
.home-id-status::before,.home-id-status::after{content:none}
.home-id-status:focus:not(:focus-visible){outline:0;background:transparent;box-shadow:none}
[data-input-modality="touch"] .home-nav__entry:focus{outline:0}
.home-id-status:hover,.home-id-status:focus-visible{outline:0;transform:translateY(-1px);filter:brightness(1.14) drop-shadow(0 0 7px rgba(91,201,255,.62))}.home-id-status:active{transform:translateY(2px) scale(.97)}

.home__brand:hover,
.home__brand:focus-visible {
  transform: translateX(-50%) scale(1.055);
  filter: brightness(1.035);
  outline: none;
}

.home__scene {
  position: absolute;
  z-index: 3;
  inset: clamp(108px, 16dvh, 145px) clamp(38px, 5vw, 86px) clamp(18px, 2.8dvh, 30px);
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(360px, .88fr);
  align-items: stretch;
  gap: clamp(20px, 3vw, 64px);
}

.character-stage {
  position: relative;
  min-width: 0;
  height: 100%;
}

.character-stage__orbit {
  position: absolute;
  z-index: 0;
  left: 49%;
  bottom: 6%;
  width: min(43vw, 560px);
  aspect-ratio: 1;
  border: 1px solid rgba(73,158,222,.18);
  border-radius: 50%;
  transform: translateX(-50%) scaleY(.72);
}

.character-stage__orbit::before,
.character-stage__orbit::after {
  content: "";
  position: absolute;
  inset: 9%;
  border: 1px dashed rgba(99,167,224,.2);
  border-radius: 50%;
}

.character-stage__orbit::after {
  inset: 25%;
  border-style: solid;
  background: radial-gradient(circle, rgba(255,255,255,.34), transparent 67%);
}

.character-stage__platform {
  position: absolute;
  z-index: 1;
  left: 49%;
  bottom: 1.5%;
  width: min(40vw, 520px);
  height: clamp(56px, 8dvh, 76px);
  border: 1px solid rgba(78,157,220,.32);
  border-radius: 50%;
  transform: translateX(-50%);
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.2) 0 2px, transparent 2px 5px),
    radial-gradient(ellipse, rgba(244,253,255,.8), rgba(182,226,251,.23) 58%, transparent 72%);
  box-shadow: inset 0 0 25px rgba(255,255,255,.82), 0 0 22px rgba(75,169,229,.18);
}

.character-stage__platform::before {
  content: "";
  position: absolute;
  inset: 9px 5%;
  border: 1px dashed rgba(52,137,214,.32);
  border-radius: 50%;
  animation: platformSignal 14s linear infinite;
}

.character-stage__platform i {
  position: absolute;
  inset: 22px 18%;
  border-top: 1px solid rgba(255,255,255,.82);
  border-radius: 50%;
}

.home-character {
  position: absolute;
  z-index: 3;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  pointer-events: none;
  animation: characterFloat 5.8s cubic-bezier(.45,.05,.55,.95) infinite both;
  will-change: transform;
}

.home-character__pose {
  position: absolute;
  bottom: 3.5%;
  left: 50%;
  display: block;
  width: auto;
  height: min(76dvh, 690px);
  max-width: 92%;
  object-fit: contain;
  object-position: center bottom;
  transform: translateX(-50%);
  opacity: 0;
  filter: drop-shadow(0 18px 28px rgba(42,114,190,.13));
  transition: opacity 170ms ease;
  user-select: none;
}

.home-character__pose[data-pose-image="stand"] {
  height: min(79dvh, 720px);
  bottom: 1.2%;
}

.home-character__pose.is-active { opacity: 1; }

.pose-switch {
  position: absolute;
  z-index: 5;
  right: clamp(42px, 4.2vw, 62px);
  top: 47%;
  display: grid;
  gap: 7px;
  width: 86px;
  padding: 8px;
  border: 1px solid rgba(255,255,255,.78);
  border-radius: 22px;
  background: linear-gradient(150deg, rgba(244,253,255,.68), rgba(196,234,255,.42));
  box-shadow: inset 0 0 0 1px rgba(56,143,216,.12), 0 9px 24px rgba(53,123,191,.1);
  backdrop-filter: blur(8px);
}

.pose-switch__button {
  min-height: 35px;
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: 999px;
  color: rgba(38,91,155,.68);
  background: transparent;
  font: 800 8px/1 "Courier New", ui-monospace, monospace;
  letter-spacing: .035em;
  cursor: inherit;
}

.pose-switch__button.is-active {
  color: #2466a9;
  border-color: rgba(60,143,215,.24);
  background: rgba(255,255,255,.7);
  box-shadow: inset 0 1px 0 #fff, 0 3px 8px rgba(68,139,204,.1);
}

.pose-switch__button:focus-visible,
.home-nav__entry:focus-visible,
.module-shell button:focus-visible {
  outline: 2px solid #338bd6;
  outline-offset: 3px;
}

.home-nav {
  position: relative;
  z-index: 5;
  align-self: center;
  justify-self: center;
  display: grid;
  gap: clamp(12px, 1.8dvh, 18px);
  width: min(35vw, 440px);
  padding-top: 1dvh;
}

.home-nav__entry {
  position: relative;
  width: 100%;
  aspect-ratio: 5.55 / 1;
  padding: 0;
  border: 0;
  border-radius: 999px;
  color: #fff;
  background: transparent;
  cursor: inherit;
  isolation: isolate;
  transform: translateZ(0);
  transition: transform 180ms ease, filter 180ms ease;
}

.home-nav__art {
  position: absolute;
  z-index: -1;
  inset: -2%;
  overflow: hidden;
  border-radius: inherit;
  background-image: url("品牌素材/导航button.png");
  background-size: 132% 761%;
  background-position: center var(--sprite-pos);
  background-repeat: no-repeat;
  mix-blend-mode: multiply;
  filter: saturate(.91) hue-rotate(-3deg);
  transition: filter 180ms ease, transform 180ms ease;
}
.home-nav__entry:nth-child(1) { --sprite-pos:4.3%; }
.home-nav__entry:nth-child(2) { --sprite-pos:24.7%; }
.home-nav__entry:nth-child(3) { --sprite-pos:45.9%; }
.home-nav__entry:nth-child(4) { --sprite-pos:66.7%; }
.home-nav__entry:nth-child(5) { --sprite-pos:87.9%; }

.home-nav__label {
  position: relative;
  z-index: 2;
  display: block;
  width: 76%;
  padding-left: 9%;
  color: #fff;
  font: 900 clamp(16px, 1.45vw, 20px)/1 "Courier New", ui-monospace, monospace;
  letter-spacing: .055em;
  text-align: center;
  text-shadow: 0 1px 0 rgba(184,49,128,.35), 0 0 5px rgba(196,55,139,.52);
}

@media (hover:hover) and (pointer:fine) {
  .home-nav__entry:hover {
    transform: translateY(-3px) scale(1.018);
    filter: drop-shadow(0 10px 13px rgba(204,75,158,.19)) drop-shadow(0 0 14px rgba(255,255,255,.85));
  }
  .home-nav__entry:hover .home-nav__art { filter: saturate(1.05) brightness(1.035); }
}

.home-nav__entry:active { transform: translateY(3px) scale(.97); }
.home-nav__entry.is-pressed { animation: homeButtonBoing 240ms cubic-bezier(.2,.78,.28,1) both; }

.home__icons { position: absolute; z-index: 2; inset: 0; pointer-events: none; }
.world-icon {
  position: absolute;
  width: var(--icon-size);
  aspect-ratio: var(--icon-ratio, 1);
  background: var(--icon-image) center / contain no-repeat;
  filter: drop-shadow(0 7px 9px rgba(72,127,220,.13));
  animation: iconFloat var(--icon-duration) ease-in-out var(--icon-delay) infinite both;
}
.world-icon--bubble { --icon-image:url("品牌素材/home-icons/bubble.png"); --icon-ratio:1; --icon-size:clamp(78px,7.2vw,102px); --icon-duration:7.4s; --icon-delay:-2.8s; left:1.8%; top:59%; }
.world-icon--bubble-small { --icon-image:url("品牌素材/home-icons/bubble.png"); --icon-ratio:1; --icon-size:clamp(34px,3.2vw,46px); --icon-duration:8.6s; --icon-delay:-5.7s; left:20%; top:12%; opacity:.78; }
.world-icon--bubble-tiny { --icon-image:url("品牌素材/home-icons/bubble.png"); --icon-ratio:1; --icon-size:clamp(22px,2vw,30px); --icon-duration:9.2s; --icon-delay:-1.9s; right:5%; top:56%; opacity:.66; }
.world-icon--window { --icon-image:url("品牌素材/home-icons/window.png"); --icon-ratio:1.08; --icon-size:clamp(58px,5.4vw,76px); --icon-duration:6.8s; --icon-delay:-4.6s; right:2.2%; top:12%; }
.world-icon--heart { --icon-image:url("品牌素材/home-icons/heart.png"); --icon-ratio:1.08; --icon-size:clamp(32px,2.8vw,40px); --icon-duration:5.9s; --icon-delay:-1.2s; right:42%; top:24%; }
.world-icon--dolphin { --icon-image:url("品牌素材/home-icons/dolphin.png"); --icon-ratio:1; --icon-size:clamp(66px,6.3vw,90px); --icon-duration:6.2s; --icon-delay:-1.3s; left:3.2%; top:18%; }
.world-icon--cloud { --icon-image:url("品牌素材/home-icons/cloud.png"); --icon-ratio:1.35; --icon-size:clamp(50px,5.2vw,72px); --icon-duration:7s; --icon-delay:-4.2s; left:12%; top:6%; }
.world-icon--disc { --icon-image:url("品牌素材/home-icons/disc.png"); --icon-ratio:1.08; --icon-size:clamp(40px,3.6vw,52px); --icon-duration:5.6s; --icon-delay:-2.4s; left:3.5%; bottom:7%; }
.world-icon--shell { --icon-image:url("品牌素材/home-icons/shell.png"); --icon-ratio:1.17; --icon-size:clamp(48px,4.6vw,66px); --icon-duration:6.7s; --icon-delay:-3.5s; left:52%; bottom:3%; }
.world-icon--console { --icon-image:url("品牌素材/home-icons/console.png"); --icon-ratio:.8; --icon-size:clamp(46px,4.1vw,60px); --icon-duration:5.2s; --icon-delay:-.8s; right:2.5%; bottom:7%; }
.world-icon--fish { --icon-image:url("品牌素材/home-icons/fish.png"); --icon-ratio:1.17; --icon-size:clamp(36px,3.4vw,48px); --icon-duration:7.8s; --icon-delay:-5.1s; left:43%; top:27%; }
.world-icon--fish-two { --icon-image:url("品牌素材/home-icons/fish.png"); --icon-ratio:1.17; --icon-size:clamp(24px,2.3vw,34px); --icon-duration:9.4s; --icon-delay:-2.4s; left:5%; top:48%; opacity:.72; }
.world-icon--fish-three { --icon-image:url("品牌素材/home-icons/fish.png"); --icon-ratio:1.17; --icon-size:clamp(20px,1.8vw,27px); --icon-duration:10.2s; --icon-delay:-7.1s; right:31%; top:16%; opacity:.65; }
.world-icon--jelly { --icon-image:url("品牌素材/home-icons/jelly.png"); --icon-ratio:.92; --icon-size:clamp(44px,4.2vw,60px); --icon-duration:8.2s; --icon-delay:-3.1s; left:53.5%; bottom:15%; }
.world-icon--drink { --icon-image:url("品牌素材/home-icons/drink.png"); --icon-ratio:.68; --icon-size:clamp(27px,2.5vw,36px); --icon-duration:6.3s; --icon-delay:-2.1s; left:25%; top:19%; }

.greeting-bubble {
  position:absolute;
  z-index:5;
  isolation:isolate;
  left:clamp(14px,3vw,38px);
  top:40%;
  width:178px;
  max-width:none;
  height:38px;
  padding:0 12px 0 8px;
  border:0;
  border-radius:0;
  color:#a63c88;
  background:transparent;
  filter:drop-shadow(0 7px 10px rgba(200,76,156,.13)) drop-shadow(0 0 9px rgba(255,255,255,.7));
  font:900 clamp(10px,1vw,13px)/1.15 "Courier New",ui-monospace,monospace;
  letter-spacing:0;
  text-align:center;
  white-space:nowrap;
  display:flex;
  align-items:center;
  justify-content:center;
  animation:greetingFloat 6.4s ease-in-out -1.8s infinite both;
  transition:transform 220ms cubic-bezier(.2,.75,.22,1),box-shadow 220ms ease,filter 220ms ease;
}
.greeting-bubble__shape {
  position:absolute;
  z-index:-1;
  inset:0;
  width:100%;
  height:100%;
  overflow:visible;
  pointer-events:none;
  fill:url(#greetingBubbleGradient);
  stroke:rgba(255,255,255,.92);
  stroke-width:2.4;
  vector-effect:non-scaling-stroke;
  filter:drop-shadow(0 0 1px rgba(80,153,225,.14));
}
.greeting-bubble span { position:relative; z-index:1; transform:translateX(-3px); }
#homeCharacter[data-pose="stand"] ~ .greeting-bubble { left:clamp(28px,5vw,64px); top:31%; }
@media (hover:hover) and (pointer:fine) {
  .greeting-bubble:hover { transform:scale(1.05); filter:brightness(1.025) drop-shadow(0 9px 11px rgba(200,76,156,.16)) drop-shadow(0 0 13px rgba(255,245,253,.95)); }
}

.music-toggle {
  position:absolute;
  z-index:9;
  left:calc(50% + clamp(112px,9vw,138px));
  top:clamp(138px,18dvh,175px);
  right:auto;
  bottom:auto;
  display:flex;
  align-items:center;
  gap:5px;
  min-height:29px;
  padding:5px 8px;
  border:1px solid rgba(255,255,255,.62);
  border-radius:12px;
  color:rgba(43,103,164,.7);
  background:linear-gradient(145deg,rgba(249,254,255,.52),rgba(195,234,255,.34));
  box-shadow:inset 0 0 0 1px rgba(54,139,210,.08),0 3px 10px rgba(45,111,180,.06);
  backdrop-filter:blur(7px);
  font:900 8px/1 "Courier New",ui-monospace,monospace;
  letter-spacing:.035em;
  white-space:nowrap;
  cursor:inherit;
}
.music-toggle:focus-visible { outline:2px solid #338bd6; outline-offset:3px; }
.music-toggle__signal { display:flex; align-items:flex-end; gap:1px; width:11px; height:10px; }
.music-toggle__signal i { width:2px; height:4px; border-radius:1px 1px 0 0; background:#5eaee7; opacity:.42; transform-origin:bottom; }
.music-toggle.is-playing .music-toggle__signal i { opacity:1; animation:musicSignal 760ms steps(3,end) infinite; }
.music-toggle.is-playing .music-toggle__signal i:nth-child(2) { animation-delay:-250ms; }
.music-toggle.is-playing .music-toggle__signal i:nth-child(3) { animation-delay:-470ms; }

.home-particles { position: fixed; z-index: 70; inset: 0; pointer-events: none; }
.closet-active .home-particles { z-index: 10001; }
.archive-active .home-particles { z-index: 10001; }
.home-particle {
  position: fixed;
  left: var(--particle-x);
  top: var(--particle-y);
  width: var(--particle-size);
  aspect-ratio: 1;
  border: 2px solid rgba(39,126,214,.78);
  border-radius: 50%;
  background: rgba(239,253,255,.72);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.92), inset 2px 2px 0 #fff, 0 0 8px rgba(70,184,237,.3);
  animation: homeClickBubble var(--particle-time) ease-out forwards;
}

.home-cursor {
  position: fixed;
  z-index: 10000;
  left: 0;
  top: 0;
  display: none;
  width: 42px;
  height: 39px;
  overflow:visible;
  pointer-events: none;
  background: url("品牌素材/cursor.png?v=20260917-latest") center / contain no-repeat;
  transform: translate3d(-100px,-100px,0);
  filter:drop-shadow(0 0 1px rgba(255,255,255,.95)) drop-shadow(0 1px 2px rgba(75,163,226,.32));
  will-change: transform;
}

@media (hover:hover) and (pointer:fine) {
  .home, .home * { cursor: none !important; }
  body:not(.intro-active) .home-cursor { display: block; }
}

.module-shell {
  --origin-x: 50vw;
  --origin-y: 50dvh;
  position: fixed;
  z-index: 60;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  visibility: hidden;
  pointer-events: none;
  background: rgba(219,247,255,.18);
  opacity: 0;
  transition: opacity 180ms ease, background 220ms ease;
}
.module-shell.is-open { visibility: visible; pointer-events: auto; opacity: 1; background: rgba(219,247,255,.58); backdrop-filter: blur(7px); }
.module-shell.is-closing { visibility: visible; opacity: 0; }
.module-shell__bubble {
  position: fixed;
  left: var(--origin-x);
  top: var(--origin-y);
  width: 16px;
  aspect-ratio: 1;
  border: 1px solid rgba(58,148,221,.42);
  border-radius: 50%;
  background: rgba(235,252,255,.8);
  transform: translate(-50%,-50%) scale(.3);
  opacity: 0;
}
.module-shell.is-open .module-shell__bubble { animation: homeBubbleInflate 430ms ease-out both; }
.module-shell__window {
  width: min(600px, calc(100vw - 40px));
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.95);
  border-radius: 34px;
  background: linear-gradient(145deg, rgba(250,254,255,.94), rgba(196,235,255,.83));
  box-shadow: inset 0 0 0 1px rgba(57,143,215,.16), 0 25px 65px rgba(44,111,181,.18);
  opacity: 0;
  transform: translateY(5px) scale(.97);
}
.module-shell.is-open .module-shell__window { animation: moduleAppear 300ms ease 130ms forwards; }
.module-shell__bar { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; min-height:54px; padding:0 20px; border-bottom:1px solid rgba(60,142,209,.15); }
.module-shell__bar > span { width:10px; aspect-ratio:1; border:1px solid #65b8eb; border-radius:50%; background:#eafeff; box-shadow:0 0 8px rgba(69,176,234,.32); }
.module-shell__bar h1 { margin:0; color:#2f75b9; font:700 12px/1 "Courier New",monospace; letter-spacing:.14em; }
.module-shell__close { justify-self:end; display:grid; place-items:center; width:32px; aspect-ratio:1; border:1px solid rgba(61,141,211,.25); border-radius:50%; color:#357bb9; background:rgba(255,255,255,.62); font:20px/1 Arial,sans-serif; cursor:inherit; }
.module-shell__content { display:grid; place-items:center; padding:54px 24px 58px; text-align:center; }
.module-shell__content i { width:70px; aspect-ratio:1; border:1px solid rgba(62,149,220,.36); border-radius:50%; background:radial-gradient(circle at 32% 28%,#fff 0 10%,#e0f8ff 17% 50%,rgba(95,189,238,.28) 70%); box-shadow:inset 6px 6px 12px rgba(255,255,255,.8),0 0 28px rgba(73,174,232,.2); }
.module-shell__content p { margin:18px 0 7px; color:#2b6daf; font:700 clamp(24px,4vw,38px)/1.1 "Arial Rounded MT Bold","Trebuchet MS",sans-serif; letter-spacing:.03em; }
.module-shell__content span { color:rgba(39,102,170,.55); font:700 10px/1 "Courier New",monospace; letter-spacing:.12em; }
.module-shell__back { min-height:42px; margin-top:28px; padding:0 20px; border:1px solid rgba(58,142,214,.3); border-radius:999px; color:#286bad; background:rgba(255,255,255,.65); font:700 10px/1 "Courier New",monospace; letter-spacing:.08em; cursor:inherit; }

@keyframes platformSignal { to { transform:rotate(360deg); } }
@keyframes iconFloat { 0%,100% { transform:translate3d(0,0,0) rotate(-.25deg); } 48% { transform:translate3d(2px,-6px,0) rotate(.35deg); } 73% { transform:translate3d(-1px,2px,0) rotate(0); } }
@keyframes greetingFloat { 0%,100% { transform:translate3d(0,0,0); } 48% { transform:translate3d(1px,-3px,0); } 76% { transform:translate3d(-1px,2px,0); } }
@keyframes musicSignal { 0%,100% { transform:scaleY(.55); } 45% { transform:scaleY(1.8); } 72% { transform:scaleY(1.12); } }
@keyframes homeButtonBoing { 0% { transform:translateY(0) scale(1); } 30% { transform:translateY(3px) scale(.965); } 68% { transform:translateY(-2px) scale(1.035); } 100% { transform:translateY(0) scale(1); } }
@keyframes homeClickBubble { to { opacity:0; transform:translate(var(--particle-drift),var(--particle-rise)) scale(1.45); } }
@keyframes homeBubbleInflate { 0% { opacity:0; transform:translate(-50%,-50%) scale(.3); } 22% { opacity:1; } 100% { opacity:0; transform:translate(-50%,-50%) scale(22); } }
@keyframes moduleAppear { to { opacity:1; transform:translateY(0) scale(1); } }
}

.opening {
  position: fixed;
  z-index: 9999;
  inset: 0;
  width: 100%;
  height: 100dvh;
  min-height: 100dvh;
  overflow: hidden;
  isolation: isolate;
  cursor: url("品牌素材/cursor.png?v=20260917-latest") 14 14, auto;
  background: var(--ice);
  opacity: 1;
}

.opening.is-leaving {
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 420ms ease, transform 420ms ease;
  pointer-events: none;
}

.opening__background {
  position: absolute;
  inset: -2%;
  z-index: -4;
  background: #dff7ff url("品牌素材/网页背景.png") center / cover no-repeat;
  animation: wakeBrightness 4s linear both;
}

.opening__scanlines {
  position: absolute;
  z-index: 4;
  inset: 0;
  pointer-events: none;
  opacity: .09;
  background: repeating-linear-gradient(to bottom, rgba(255,255,255,.48) 0 1px, rgba(31,125,215,.2) 2px, transparent 4px);
  mix-blend-mode: normal;
  animation: scanDrift 5s linear infinite, scanEvents 4s steps(2,end) both;
}

.opening__signal { position: absolute; z-index: 1; inset: 0; pointer-events: none; }

.opening__signal span {
  position: absolute;
  left: var(--left, 4%);
  width: var(--width, 72%);
  height: var(--height, 4px);
  opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(34,142,232,.6), rgba(255,255,255,.98), rgba(72,190,247,.7), transparent);
  box-shadow: 0 0 8px rgba(64,172,240,.65), 0 0 18px rgba(255,255,255,.9);
  animation: signalSweep var(--speed, 520ms) steps(4,end) var(--delay, .2s) 1 both;
}

.opening__signal span:nth-child(1) { top: 18%; --left: 8%; --width: 52%; --delay: .72s; }
.opening__signal span:nth-child(2) { top: 34%; --left: 35%; --width: 61%; --height: 6px; --delay: 1.46s; --speed: 440ms; }
.opening__signal span:nth-child(3) { top: 48%; --left: 3%; --width: 88%; --delay: 1.58s; }
.opening__signal span:nth-child(4) { top: 61%; --left: 54%; --width: 39%; --height: 5px; --delay: 2.62s; --speed: 420ms; }
.opening__signal span:nth-child(5) { top: 73%; --left: 16%; --width: 58%; --delay: 2.78s; }
.opening__signal span:nth-child(6) { top: 84%; --left: 44%; --width: 49%; --height: 3px; --delay: 3.48s; --speed: 360ms; }

.opening__slices { position: absolute; z-index: 0; inset: 0; pointer-events: none; }
.opening__slices i {
  position: absolute;
  left: 0;
  right: 0;
  height: var(--h, 7%);
  top: var(--top);
  opacity: 0;
  background: inherit;
  backdrop-filter: brightness(1.1) saturate(1.15);
  border-block: 1px solid rgba(91,191,245,.16);
  animation: localShift 460ms steps(3,end) var(--delay) 1 both;
}
.opening__slices i:nth-child(1) { --top: 13%; --h: 5%; --delay: .76s; }
.opening__slices i:nth-child(2) { --top: 31%; --h: 8%; --delay: 1.5s; }
.opening__slices i:nth-child(3) { --top: 47%; --h: 4%; --delay: 1.63s; }
.opening__slices i:nth-child(4) { --top: 65%; --h: 7%; --delay: 2.68s; }
.opening__slices i:nth-child(5) { --top: 79%; --h: 5%; --delay: 3.5s; }

.opening__pixels { position: absolute; z-index: 2; inset: 0; pointer-events: none; }
.opening__pixels i {
  position: absolute;
  width: var(--w, 14px);
  height: var(--h, 7px);
  left: var(--x);
  top: var(--y);
  opacity: 0;
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(50,159,232,.6);
  box-shadow: 7px 0 rgba(102,211,255,.38), -5px 0 rgba(80,149,239,.25);
  animation: pixelBlink 380ms steps(2,end) var(--delay) 1 both;
}
.opening__pixels i:nth-child(1) { --x: 12%; --y: 27%; --delay: .82s; }
.opening__pixels i:nth-child(2) { --x: 72%; --y: 22%; --w: 22px; --delay: 1.5s; }
.opening__pixels i:nth-child(3) { --x: 42%; --y: 44%; --h: 10px; --delay: 1.66s; }
.opening__pixels i:nth-child(4) { --x: 84%; --y: 58%; --delay: 2.7s; }
.opening__pixels i:nth-child(5) { --x: 24%; --y: 71%; --w: 19px; --delay: 2.84s; }
.opening__pixels i:nth-child(6) { --x: 63%; --y: 82%; --delay: 3.52s; }

.opening__wake { position: absolute; inset: 0; z-index: 1; pointer-events: none; }

.wake-line {
  position: absolute;
  left: 50%;
  width: min(68vw, 880px);
  height: 2px;
  transform: translateX(-50%) scaleX(.05);
  background: rgba(255,255,255,.95);
  box-shadow: 0 0 12px #fff, 0 0 30px var(--sky);
  animation: wakeLine 2.7s cubic-bezier(.2,.8,.2,1) both;
}

.wake-line--one { top: 43%; }
.wake-line--two { top: 50%; animation-delay: .18s; opacity: .65; }
.wake-line--three { top: 57%; animation-delay: .36s; opacity: .4; }

.opening__enter {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
  cursor: inherit;
  opacity: 0;
  pointer-events: none;
}

.opening.is-bubble .opening__enter,
.opening.is-enter-ready .opening__enter {
  opacity: 1;
  transition: opacity 520ms ease, transform 520ms ease;
}
.opening.is-enter-ready .opening__enter { pointer-events: auto; }

.opening.is-bubble .opening__scanlines,
.opening.is-enter-ready .opening__scanlines,
.opening.is-loading .opening__scanlines {
  opacity: .075;
  animation: scanDrift 7s linear infinite;
  transition: opacity 260ms ease;
}

.opening__portrait {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  overflow: hidden;
}

.opening__prompt {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: clamp(82px, 13dvh, 132px);
  transform: translateX(-50%);
  padding: 7px 12px;
  white-space: nowrap;
  color: #f8fdff;
  font-size: clamp(17px, 1.45vw, 22px);
  font-weight: 700;
  letter-spacing: .11em;
  -webkit-text-stroke: .65px rgba(31,103,181,.9);
  text-shadow: 0 1px 0 #fff, 0 0 5px rgba(44,125,205,.88), 0 0 13px rgba(211,247,255,.95), 0 0 22px rgba(84,178,240,.5);
  background: radial-gradient(ellipse at center, rgba(239,251,255,.86), rgba(239,251,255,.36) 48%, rgba(239,251,255,0) 74%);
  opacity: 0;
  animation: none;
}

.opening.is-enter-ready .opening__prompt {
  animation: promptIn 620ms ease forwards, promptPulse 2.2s ease-in-out 900ms infinite;
}

.opening.is-repeat .opening__background { animation: none; }
.opening.is-repeat .opening__wake,
.opening.is-repeat .opening__signal { display: none; }
.opening.is-repeat .opening__prompt { animation-delay: 0ms, 650ms; }

.opening__loading {
  position: absolute;
  z-index: 5;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 18px;
  opacity: 0;
  pointer-events: none;
}

.opening.is-loading .opening__enter { opacity: 0; pointer-events: none; transition: opacity 220ms ease; }
.opening.is-loading .opening__loading { opacity: 1; transition: opacity 220ms ease 210ms; }

/* Shared page-entry loading: the canonical Opening blue-fish scene. */
.page-entry-loading {
  position: fixed;
  z-index: 240;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 18px;
  min-height: 100dvh;
  color: #285fa5;
  isolation: isolate;
  overflow: hidden;
  background: #dff7ff;
  font-family: "Bubble System Pixel", "Courier New", ui-monospace, monospace;
  opacity: 1;
  transition: opacity 220ms ease;
}
.page-entry-loading[hidden] { display: none; }
.page-entry-loading[aria-hidden="true"] { opacity: 0; pointer-events: none; }
.page-entry-loading > .opening__background { z-index: -2; inset: 0; animation: none; filter: none; opacity: 1; }
.page-entry-loading > .opening__scanlines { z-index: -1; opacity: .075; animation: scanDrift 7s linear infinite; }
.page-entry-loading > .fish-wrap,
.page-entry-loading > .thinking { position: relative; z-index: 1; }

.fish-wrap { position: relative; width: clamp(187px, 24.65vw, 332px); }

.fish {
  display: block;
  width: 100%;
  height: auto;
  animation: fishFloat 1.25s ease-in-out infinite;
  filter: drop-shadow(0 12px 22px rgba(52,127,234,.18));
}

.fish-bubble {
  position: absolute;
  left: 5%;
  top: 42.5%;
  width: 13px;
  aspect-ratio: 1;
  border: 2px solid rgba(42,139,230,.82);
  border-radius: 50%;
  background: rgba(255,255,255,.48);
  opacity: 0;
  box-shadow: inset 2px 2px 0 rgba(255,255,255,.9), 0 0 7px rgba(54,161,235,.32);
  animation: fishBubble 1.65s ease-out infinite;
}

.fish-bubble--two { width: 9px; animation-delay: .42s; --drift: -13px; }
.fish-bubble--three { width: 17px; animation-delay: .84s; --drift: -35px; }

.thinking { display: flex; align-items: center; gap: 9px; font-size: clamp(12px, 1.2vw, 15px); letter-spacing: .045em; }
.bubble-ellipsis { display: inline-flex; align-items: center; gap: 5px; height: 18px; }
.bubble-ellipsis i { width: 9px; aspect-ratio: 1; border: 2px solid #459fe2; border-radius: 50%; background: radial-gradient(circle at 32% 28%, #fff 0 18%, rgba(211,246,255,.85) 22% 55%, rgba(101,189,240,.35)); box-shadow: 0 0 7px rgba(68,168,232,.28); animation: ellipsisBubble 1.25s ease-in-out infinite; }
.bubble-ellipsis i:nth-child(2) { width: 11px; animation-delay: .18s; }
.bubble-ellipsis i:nth-child(3) { width: 13px; animation-delay: .36s; }

.click-particle {
  position: absolute;
  z-index: 10;
  width: var(--size);
  aspect-ratio: 1;
  border: 2px solid rgba(68,160,238,.65);
  border-radius: 50%;
  background: rgba(255,255,255,.55);
  box-shadow: inset 2px 2px 0 rgba(255,255,255,.9), 0 0 8px rgba(79,187,245,.4);
  pointer-events: none;
  animation: clickBubble 520ms ease-out forwards;
}

.opening__flash { position: absolute; z-index: 20; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.opening.is-flashing .opening__flash { animation: finalFlash 430ms ease-out both; }

.opening-debug {
  display: none;
  position: absolute;
  z-index: 40;
  top: 12px;
  left: 12px;
  padding: 6px 8px;
  border: 1px solid rgba(35,105,177,.45);
  color: #174f98;
  background: rgba(239,252,255,.88);
  font: 11px/1.45 "Courier New",ui-monospace,monospace;
  white-space: pre;
  pointer-events: none;
}
.opening.is-debug .opening-debug { display: block; }

@keyframes wakeBrightness { 0%,14% { opacity: .72; filter: brightness(1.02) saturate(.86); transform: none; } 18% { opacity: .9; filter: brightness(1.12) saturate(1.08); transform: translateX(4px); } 22%,34% { opacity: .8; transform: none; } 39% { opacity: .58; filter: brightness(1.18) saturate(1.14); transform: translateX(-10px); } 43% { opacity: .94; transform: translateX(7px); } 48%,66% { opacity: .86; filter: brightness(1.04) saturate(.96); transform: none; } 70% { opacity: .68; transform: translateX(12px); } 74% { opacity: 1; transform: translateX(-5px); } 80%,100% { opacity: 1; filter: brightness(1) saturate(1); transform: none; } }
@keyframes scanDrift { to { background-position-y: 40px; } }
@keyframes scanEvents { 0%,14%,24%,34%,49%,65%,78%,100% { opacity: .08; } 18%,21% { opacity: .34; } 39%,45% { opacity: .48; } 69%,74% { opacity: .4; } }
@keyframes signalSweep { 0%,100% { opacity: 0; transform: translate(-12px,-8px) scaleX(.45); } 32% { opacity: .92; transform: translate(15px,0) scaleX(1); } 58% { opacity: .38; transform: translate(-8px,8px) scaleX(.72); } }
@keyframes localShift { 0%,100% { opacity: 0; transform: translateX(0); } 22% { opacity: .62; transform: translateX(8px); } 45% { opacity: .36; transform: translateX(-12px); } 68% { opacity: .52; transform: translateX(15px); } }
@keyframes pixelBlink { 0%,100% { opacity: 0; transform: translateX(0); } 35% { opacity: .9; transform: translateX(9px); } 65% { opacity: .32; transform: translateX(-5px); } }
@keyframes wakeLine { 0% { opacity: 0; transform: translateX(-50%) scaleX(.03); } 15% { opacity: .85; } 55% { transform: translateX(-50%) scaleX(1); } 82%,100% { opacity: 0; transform: translateX(-50%) scaleX(.7); } }
@keyframes promptIn { to { opacity: 1; } }
@keyframes promptPulse { 0%,100% { opacity: .82; } 50% { opacity: 1; } }
@keyframes fishFloat { 0%,100% { transform: translateY(2px) rotate(-.5deg); } 50% { transform: translateY(-5px) rotate(.6deg); } }
@keyframes fishBubble { 0% { opacity: 0; transform: translate(0,0) scale(.48); } 16% { opacity: .95; } 68% { opacity: .72; } 100% { opacity: 0; transform: translate(var(--drift, -24px),-68px) scale(1.5); } }
@keyframes ellipsisBubble { 0%,70%,100% { opacity: .42; transform: translateY(3px) scale(.72); } 30% { opacity: 1; transform: translateY(-4px) scale(1.1); } }
@keyframes clickBubble { to { opacity: 0; transform: translate(var(--x), var(--y)) scale(1.65); } }
@keyframes finalFlash { 0% { opacity: 0; } 45% { opacity: .86; } 100% { opacity: 0; } }

@media (max-width: 700px) {
  .opening__scanlines { opacity: .27; }
  .opening__signal span:nth-child(6), .opening__pixels i:nth-child(6), .opening__slices i:nth-child(5) { display: none; }
  .home__logo { width: min(72vw, 360px); }
  .home__bubble { width: min(96vw, 560px); max-height: 82dvh; }
  .fish-wrap { width: clamp(174px, 52.7vw, 238px); }
  .opening__prompt { bottom: clamp(72px, 11dvh, 104px); font-size: clamp(16px, 4.4vw, 19px); }
}

@media (max-height: 620px) and (orientation: landscape) {
  .opening__prompt { bottom: 18px; }
  .fish-wrap { width: 145px; }
  .opening__loading { gap: 8px; }
}

@media (hover: none), (pointer: coarse) { .opening { cursor: auto; } }

@media (prefers-reduced-motion: reduce) {
  .opening__background { animation: none; }
  .opening__scanlines, .opening__signal, .opening__wake, .opening__slices, .opening__pixels { display: none; }
  .opening__prompt { animation: none; }
  .opening.is-enter-ready .opening__prompt { animation: promptIn 250ms ease forwards; }
  .fish { animation: fishFloat 2.5s ease-in-out infinite; }
  .fish-bubble, .click-particle { display: none; }
  .bubble-ellipsis i { animation-duration: 2s; }
  .opening.is-flashing .opening__flash { animation-duration: 180ms; }
  .opening.is-leaving { transition-duration: 180ms; transform: none; }
}

/* Development-only runtime freezes, reachable only through debug query parameters. */
.opening.is-debug-freeze .opening__background,
.opening.is-debug-freeze .wake-composition,
.opening.is-debug-freeze .wake-composition * { animation: none !important; }
.opening.is-debug-freeze .opening__background { opacity: 1; filter: none; transform: none; }
.opening.is-debug-freeze .wake-composition { display: block; opacity: 1; }
.opening.is-debug-freeze .signal-event,
.opening.is-debug-freeze .signal-echo,
.opening.is-debug-freeze .signal-loss,
.opening.is-debug-freeze .signal-fragments,
.opening.is-debug-freeze .signal-lock { opacity: 0; transform: none; }
.opening.is-debug-freeze[data-debug-wake="first"] .signal-event--first { opacity: .78; transform: translateX(12px); }
.opening.is-debug-freeze[data-debug-wake="searching"] .signal-event--search { opacity: .8; transform: translateX(15px); }
.opening.is-debug-freeze[data-debug-wake="strong"] .signal-event--strong { opacity: 1; transform: translateX(32px); }
.opening.is-debug-freeze[data-debug-wake="strong"] .signal-echo { opacity: .88; transform: translateX(25px); }
.opening.is-debug-freeze[data-debug-wake="strong"] .signal-loss { opacity: .84; transform: translateX(-14px); }
.opening.is-debug-freeze[data-debug-wake="lock"] .signal-lock { opacity: .8; filter: none; transform: scaleX(1); }
.opening.is-debug-freeze[data-debug-character] .wake-composition { display: none; }
.opening.is-debug-freeze[data-debug-character] .opening__enter { opacity: 1; }
.opening.is-debug-freeze[data-debug-character] .bubble-character { opacity: 1; transition: none; }

/* Rebuilt event-driven Electronic Wake */
.opening__background { animation: wakeField 2.65s linear both; }

.wake-composition {
  position: absolute;
  z-index: 3;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  animation: wakeComposition 2.7s linear both;
}

.wake-standby {
  position: absolute;
  inset: 8% 6%;
  border: 1px solid rgba(225,251,255,.48);
  box-shadow: inset 0 0 80px rgba(255,255,255,.2), 0 0 45px rgba(87,192,244,.12);
  opacity: .35;
  animation: standbyBreath .7s ease-in-out 2;
}

.wake-raster {
  position: absolute;
  inset: 0;
  opacity: .07;
  background: repeating-linear-gradient(to bottom, rgba(255,255,255,.5) 0 1px, rgba(45,128,206,.28) 2px, transparent 4px);
  animation: rasterEvents 2.6s steps(2,end) both, scanDrift 5s linear infinite;
}

.signal-event { position: absolute; inset: 0; opacity: 0; }
.signal-event i {
  position: absolute;
  display: block;
  height: var(--slice-height, 7%);
  width: var(--slice-width, 72%);
  left: var(--slice-left, 8%);
  top: var(--slice-top, 30%);
  background: url("品牌素材/网页背景.png") center / 100vw 100dvh no-repeat;
  border-block: 1px solid rgba(235,253,255,.88);
  box-shadow: 13px 0 rgba(70,194,244,.24), -9px 0 rgba(129,119,235,.14), 0 0 20px rgba(67,164,235,.34);
  filter: brightness(1.14) contrast(1.08) saturate(1.15);
}

.signal-event--first { animation: interruptionEvent 250ms steps(3,end) .35s 1 both; }
.signal-event--first i:nth-child(1) { --slice-top: 28%; --slice-left: 7%; --slice-width: 58%; --slice-height: 5%; }
.signal-event--first i:nth-child(2) { --slice-top: 61%; --slice-left: 43%; --slice-width: 48%; --slice-height: 3%; }

.signal-event--search { animation: searchEvent 500ms steps(5,end) .85s 1 both; }
.signal-event--search i:nth-child(1) { --slice-top: 18%; --slice-left: 31%; --slice-width: 64%; --slice-height: 4%; }
.signal-event--search i:nth-child(2) { --slice-top: 45%; --slice-left: 4%; --slice-width: 86%; --slice-height: 9%; }
.signal-event--search i:nth-child(3) { --slice-top: 77%; --slice-left: 48%; --slice-width: 43%; --slice-height: 5%; }

.signal-event--strong { animation: strongEvent 550ms steps(5,end) 1.55s 1 both; }
.signal-event--strong i:nth-child(1) { --slice-top: 13%; --slice-left: 0%; --slice-width: 92%; --slice-height: 8%; }
.signal-event--strong i:nth-child(2) { --slice-top: 38%; --slice-left: 17%; --slice-width: 83%; --slice-height: 13%; }
.signal-event--strong i:nth-child(3) { --slice-top: 71%; --slice-left: 0%; --slice-width: 76%; --slice-height: 7%; }

.signal-echo,
.signal-loss {
  position:absolute;
  inset:0;
  opacity:0;
  pointer-events:none;
}
.signal-echo {
  background:url("品牌素材/网页背景.png") center / cover no-repeat;
  clip-path:polygon(0 16%,100% 12%,100% 27%,0 31%,0 58%,100% 54%,100% 72%,0 76%);
  filter:brightness(1.18) contrast(1.1) saturate(1.16);
  animation:echoFailure 620ms steps(5,end) 1.48s both;
}
.signal-loss {
  background:linear-gradient(90deg,rgba(211,246,255,.92),rgba(255,255,255,.98) 48%,rgba(170,225,255,.88));
  clip-path:polygon(0 34%,100% 29%,100% 63%,0 69%);
  animation:signalLoss 450ms steps(4,end) 1.65s both;
}

.signal-fragments { position: absolute; inset: 0; opacity: 0; animation: fragmentEvents 1.7s steps(2,end) .42s 1 both; }
.signal-fragments i { position: absolute; width: var(--fw, 18px); height: var(--fh, 8px); left: var(--fx); top: var(--fy); background: rgba(238,253,255,.88); border: 1px solid rgba(45,143,219,.6); box-shadow: 8px 0 rgba(72,197,244,.35), -5px 0 rgba(99,118,227,.18); }
.signal-fragments i:nth-child(1) { --fx: 11%; --fy: 24%; }
.signal-fragments i:nth-child(2) { --fx: 76%; --fy: 19%; --fw: 29px; }
.signal-fragments i:nth-child(3) { --fx: 39%; --fy: 49%; --fh: 13px; }
.signal-fragments i:nth-child(4) { --fx: 85%; --fy: 64%; }
.signal-fragments i:nth-child(5) { --fx: 23%; --fy: 76%; --fw: 24px; }

.signal-lock { position: absolute; inset: 0; opacity: 0; animation: signalLock .4s ease 2.1s 1 both; }
.signal-lock::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 45%, rgba(255,255,255,.82), rgba(205,244,255,.2) 36%, transparent 68%); }
.signal-lock i { position: absolute; left: 50%; top: 50%; width: min(52vw,680px); height: 1px; transform: translate(-50%,-50%); background: rgba(255,255,255,.94); box-shadow: 0 0 14px #fff, 0 0 32px rgba(81,188,240,.62); }
.signal-lock i:last-child { transform: translate(-50%,-50%) rotate(90deg); width: min(24vw,310px); opacity: .5; }

.opening.is-repeat .wake-composition { display: none; }
.opening.is-bubble .wake-composition,
.opening.is-enter-ready .wake-composition {
  opacity:0;
  animation:none;
  transition:opacity 80ms linear;
}
.opening.is-bubble .opening__enter { transition:opacity 70ms linear; }

/* One registered coordinate system for all Bubble character variants */
.bubble-character {
  position: relative;
  display: block;
  flex: 0 0 auto;
  align-self: flex-end;
  width: auto;
  height: min(94dvh, 780px);
  aspect-ratio: 1146 / 1372;
  transform: translateY(30%);
  transform-origin: 50% 48%;
  opacity: 0;
  filter: drop-shadow(0 18px 32px rgba(75,151,225,.13));
}
.opening:not(.is-character-ready) .bubble-character { visibility:hidden; }
.opening.is-character-ready .bubble-character { visibility:visible; }

.bubble-character__motion { position: absolute; inset: 0; transform-origin: 50% 42%; }
.character-frame {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
  object-position: center;
  transform: none;
  opacity: 0;
  filter: none;
  animation: none;
  transition: opacity 105ms ease;
  user-select: none;
}
.opening .opening__portrait .character-frame,
.opening.is-bubble .opening__portrait .character-frame,
.opening.is-enter-ready .opening__portrait .character-frame {
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  object-fit:contain !important;
  object-position:center !important;
  animation:none !important;
  filter:none !important;
  transform:none !important;
}
.character-frame.is-active { opacity: 1; }
.character-frame--base { z-index:1; }
.character-eye-frame {
  z-index:2;
  clip-path:inset(17% 25% 66% 33%);
  -webkit-mask-image:radial-gradient(ellipse 24% 11% at 52% 25%, #000 52%, rgba(0,0,0,.9) 63%, transparent 82%);
  mask-image:radial-gradient(ellipse 24% 11% at 52% 25%, #000 52%, rgba(0,0,0,.9) 63%, transparent 82%);
  transition:none;
}
.character-eye-negative{position:absolute;z-index:5;left:36%;top:20%;width:32%;height:8%;opacity:0;pointer-events:none;background:rgba(119,220,255,.42);border:1px solid rgba(255,255,255,.96);mix-blend-mode:difference;-webkit-backdrop-filter:invert(1) contrast(1.55) saturate(1.25);backdrop-filter:invert(1) contrast(1.55) saturate(1.25);box-shadow:4px 0 rgba(79,216,255,.7),-3px 0 rgba(134,121,239,.48),0 0 8px rgba(226,252,255,.78)}
.bubble-character[data-character-state="blink"] .character-eye-negative{animation:eyeNegativeSignal 190ms steps(2,end) both}
.character-frame--future { display:none; }
.character-signal-layer {
  position:absolute;
  z-index:3;
  inset:0;
  overflow:hidden;
  opacity:0;
  pointer-events:none;
}
.character-signal-layer i {
  position:absolute;
  inset:0;
  background:url("品牌素材/Bubble look-half body.png") center / 100% 100% no-repeat;
  opacity:.34;
  filter:sepia(.1) saturate(1.35) hue-rotate(155deg) brightness(1.08);
  box-shadow:4px 0 rgba(110,220,255,.28), -3px 0 rgba(130,140,255,.14);
}
.character-signal-layer i:first-child { clip-path:inset(23% 0 70% 0); }
.character-signal-layer i:last-child { clip-path:inset(42% 0 54% 0); opacity:.22; }
.bubble-character.is-signal-glitch .character-signal-layer { animation:characterSignalGlitch 130ms steps(2,end) both; }
.character-frame--hair { background: url("品牌素材/bubble-hair-swing.png") 0 0 / 200% 200% no-repeat; }
.character-frame--hair.is-active { animation: hairSprite 920ms steps(1,end) both; }

.opening.is-bubble .bubble-character {
  opacity: 1;
  animation:none !important;
  filter:drop-shadow(0 18px 32px rgba(75,151,225,.13));
  transition: opacity 70ms linear;
}
.opening.is-enter-ready .bubble-character { opacity:1; filter:none; }
.opening.is-awake .bubble-character { filter: none; }
.opening.is-awake .bubble-character__motion { animation:none; }
.opening.is-awake.is-floating .bubble-character__motion {
  animation:characterFloat 5.8s cubic-bezier(.45,.05,.55,.95) infinite both;
  will-change:transform;
}
.bubble-character.is-head-tilt .bubble-character__motion { animation: headTilt 2.8s ease-in-out both; }

.opening.is-bubble .character-frame,
.opening.is-enter-ready .character-frame { animation-name: none; }
.opening.is-loading .bubble-character { opacity: 0; transition: opacity 220ms ease; }
.opening.is-loading .bubble-character__motion { animation:none; will-change:auto; }

.floating-debug-toggle {
  display:none;
  position:fixed;
  z-index:42;
  left:14px;
  top:108px;
  border:1px solid rgba(55,139,199,.45);
  background:rgba(245,253,255,.9);
  color:#225d88;
  padding:5px 8px;
  font:11px/1.2 "Courier New",monospace;
  cursor:pointer;
}
.opening.is-debug .floating-debug-toggle { display:block; }

@keyframes wakeField {
  0%,15% { opacity:.76; filter:brightness(1.01) saturate(.88); transform:none; }
  18% { opacity:.9; filter:brightness(1.13) saturate(1.05); transform:translateX(5px); }
  23%,38% { opacity:.82; filter:brightness(1.03); transform:none; }
  42% { opacity:.63; filter:brightness(1.18) saturate(1.12); transform:translateX(-11px); }
  47%,68% { opacity:.9; transform:none; }
  72% { opacity:.68; filter:brightness(1.22); transform:translateX(15px); }
  77% { opacity:1; transform:translateX(-6px); }
  84%,100% { opacity:1; filter:brightness(1) saturate(1); transform:none; }
}
@keyframes wakeComposition { 0%,82% { opacity:1; } 88% { opacity:.92; } 94%,100% { opacity:0; } }
@keyframes standbyBreath { 0%,100% { opacity:.22; transform:scale(.998); } 50% { opacity:.44; transform:scale(1.002); } }
@keyframes rasterEvents { 0%,16%,25%,38%,50%,68%,81%,100% { opacity:.06; } 18%,22% { opacity:.28; } 41%,47% { opacity:.36; } 71%,77% { opacity:.45; } }
@keyframes interruptionEvent { 0%,100% { opacity:0; transform:translateX(0); } 25% { opacity:.78; transform:translateX(12px); } 52% { opacity:.36; transform:translateX(-15px); } 76% { opacity:.68; transform:translateX(6px); } }
@keyframes searchEvent { 0%,18%,48%,68%,100% { opacity:0; transform:none; } 23% { opacity:.62; transform:translateX(-10px); } 34% { opacity:.8; transform:translateX(15px); } 74% { opacity:.75; transform:translateX(9px); } 84% { opacity:.3; transform:translateX(-7px); } }
@keyframes strongEvent { 0%,100% { opacity:0; transform:none; } 12% { opacity:1; transform:translateX(32px); } 31% { opacity:.55; transform:translateX(-28px); } 48% { opacity:1; transform:translateX(20px); } 64% { opacity:.82; transform:translateX(-17px); } 82% { opacity:.42; transform:translateX(8px); } }
@keyframes echoFailure { 0%,100% { opacity:0; transform:none; } 13% { opacity:.88; transform:translateX(25px); } 31% { opacity:.28; transform:translateX(-18px); } 48% { opacity:.82; transform:translateX(31px); } 67% { opacity:.5; transform:translateX(-25px); } 84% { opacity:.72; transform:translateX(12px); } }
@keyframes signalLoss { 0%,100% { opacity:0; transform:none; } 18% { opacity:.84; transform:translateX(-14px); } 43% { opacity:.28; transform:translateX(18px); } 64% { opacity:.96; transform:translateX(7px); } 83% { opacity:.4; transform:translateX(-6px); } }
@keyframes fragmentEvents { 0%,16%,35%,48%,67%,79%,100% { opacity:0; transform:none; } 20%,29% { opacity:.82; transform:translateX(8px); } 52%,61% { opacity:.55; transform:translateX(-9px); } 83%,91% { opacity:.9; transform:translateX(13px); } }
@keyframes signalLock { 0% { opacity:0; filter:blur(5px); transform:scaleX(.82); } 35% { opacity:.8; } 72% { opacity:.38; filter:blur(1px); transform:scaleX(1); } 100% { opacity:0; filter:blur(0); transform:scaleX(1.04); } }
@keyframes characterFloat {
  0%,100% { transform:translate3d(0,0,0); }
  18% { transform:translate3d(.7px,-2.4px,0); }
  38% { transform:translate3d(1.5px,-4px,0); }
  55% { transform:translate3d(1px,-2px,0); }
  72% { transform:translate3d(-.5px,1.5px,0); }
  88% { transform:translate3d(-1.2px,2.5px,0); }
}
@keyframes characterFloatMobile {
  0%,100% { transform:translate3d(0,0,0); }
  18% { transform:translate3d(.5px,-1.4px,0); }
  38% { transform:translate3d(1px,-2.7px,0); }
  55% { transform:translate3d(.6px,-1.3px,0); }
  72% { transform:translate3d(-.4px,1px,0); }
  88% { transform:translate3d(-.8px,1.6px,0); }
}
@keyframes characterSignalGlitch {
  0%,100% { opacity:0; transform:translateX(0); }
  22% { opacity:.82; transform:translateX(4px); }
  52% { opacity:.36; transform:translateX(-3px); }
  76% { opacity:.68; transform:translateX(2px); }
}
@keyframes eyeNegativeSignal{0%,100%{opacity:0;transform:translateX(0)}12%{opacity:1;transform:translateX(3px)}48%{opacity:.88;transform:translateX(-3px)}78%{opacity:1;transform:translateX(2px)}}
@keyframes headTilt { 0%,100% { transform:rotate(0) translateY(0); } 35%,68% { transform:rotate(var(--tilt-angle, .85deg)) translateY(-1px); } }
@keyframes hairSprite { 0%,20% { background-position:0 0; } 21%,45% { background-position:100% 0; } 46%,70% { background-position:0 100%; } 71%,90% { background-position:100% 100%; } 91%,100% { background-position:0 0; } }

@media (min-width:960px) and (min-height:621px) {
  .bubble-character {
    height:min(108.1dvh,897px);
    transform:translateY(12%);
  }
}

@media (max-width:700px) {
  .bubble-character { width:min(122vw,650px); height:auto; transform:translateY(2%) scale(1.06); }
  .opening.is-awake.is-floating .bubble-character__motion { animation-name:characterFloatMobile; }
  .signal-event--search i:nth-child(1), .signal-fragments i:nth-child(5) { display:none; }
  .signal-echo { animation-duration:620ms; }
  .signal-loss { clip-path:polygon(0 38%,100% 34%,100% 62%,0 67%); }
}

@media (max-height:620px) and (orientation:landscape) {
  .bubble-character { width:auto; height:min(112dvh,680px); transform:translateY(45%); }
}

@media (prefers-reduced-motion:reduce) {
  .wake-composition { display:none; }
  .opening__background { animation:none; }
  .opening.is-bubble .bubble-character { transition:opacity 90ms linear; }
  .opening.is-enter-ready .bubble-character { animation:none; opacity:1; filter:none; }
  .opening.is-awake .bubble-character__motion { animation:none; }
  .opening.is-enter-ready .bubble-character__motion { animation:none; }
  .opening.is-awake.is-floating .bubble-character__motion { animation:none; will-change:auto; }
  .character-signal-layer { display:none; }
  .bubble-character.is-head-tilt .bubble-character__motion { animation:none; }
}

/* HOME reference composition: the visual stage scales as one game-like scene. */
@media (min-width:701px) {
  .home__composition {
    inset:auto;
    left:50%;
    top:50%;
    width:1440px;
    height:900px;
    overflow:visible;
    transform:translate(-50%,-50%) scale(var(--home-stage-scale,1));
    transform-origin:center;
  }
  .home__brand { top:20px; width:388px; }
  .home__scene {
    inset:130px 72px 25px;
    grid-template-columns:minmax(0,1.12fr) minmax(360px,.88fr);
    gap:43px;
  }
  .character-stage__orbit { width:560px; }
  .character-stage__platform { width:520px; height:72px; }
  .home-character__pose { height:684px; }
  .home-character__pose[data-pose-image="stand"] { height:711px; }
  .pose-switch { right:60px; }
  .home-nav { width:440px; gap:16px; padding-top:9px; }
  .home-nav__label { font-size:20px; }
  .greeting-bubble { left:38px; }
  #homeCharacter[data-pose="stand"] ~ .greeting-bubble { left:64px; }
  .music-toggle { left:calc(50% + 130px); top:162px; }
  .world-icon--bubble { --icon-size:102px; }
  .world-icon--bubble-small { --icon-size:46px; }
  .world-icon--bubble-tiny { --icon-size:30px; }
  .world-icon--window { --icon-size:76px; }
  .world-icon--heart { --icon-size:40px; }
  .world-icon--dolphin { --icon-size:90px; }
  .world-icon--cloud { --icon-size:72px; }
  .world-icon--disc { --icon-size:52px; }
  .world-icon--shell { --icon-size:66px; }
  .world-icon--console { --icon-size:60px; }
  .world-icon--fish { --icon-size:48px; }
  .world-icon--fish-two { --icon-size:34px; }
  .world-icon--fish-three { --icon-size:27px; }
  .world-icon--jelly { --icon-size:60px; }
  .world-icon--drink { --icon-size:36px; }
}

@media (min-width:701px) and (max-width:1100px) {
  .world-icon--bubble-tiny,
  .world-icon--fish-three,
  .world-icon--drink { display:none; }
}

/* HOME mobile composition remains independent from the desktop reference stage. */
@media (max-width:700px) {
  .home {
    height:100svh;
    min-height:100svh;
  }
  .home__brand-zone{display:contents}
  .home__brand {top:max(10px,calc(env(safe-area-inset-top) + 4px));left:50%;width:min(69vw,276px);transform:translateX(-50%)}
  .home-id-status{position:absolute;top:max(5px,env(safe-area-inset-top));right:max(8px,env(safe-area-inset-right));left:auto;width:max-content;max-width:calc(100vw - 16px - env(safe-area-inset-left) - env(safe-area-inset-right));padding:3px 0;font-size:clamp(6.4px,1.75vw,7.4px);letter-spacing:.01em;overflow:hidden;text-overflow:clip;text-align:right;pointer-events:auto}
  .home__composition { inset:0; width:auto; height:auto; transform:none; }
  .home__scene {
    --mobile-character-y-seated:.8%;
    --mobile-character-y-standing:-.8%;
    inset:clamp(136px,17.5svh,148px) 10px max(54px,calc(env(safe-area-inset-bottom) + 48px));
    grid-template-columns:1fr;
    grid-template-rows:40svh 1fr;
    gap:8px;
  }
  .character-stage__orbit {
    left:48%;
    bottom:1%;
    width:min(90vw,352px);
  }
  .character-stage__platform {
    left:48%;
    bottom:var(--mobile-character-y-seated);
    width:min(69.3vw,270px);
    height:45px;
  }
  .home-character { animation-name:characterFloatMobile; }
  .home-character__pose {
    bottom:var(--mobile-character-y-seated);
    height:min(40svh,330px);
    max-width:84vw;
  }
  .home-character__pose[data-pose-image="stand"] {
    bottom:var(--mobile-character-y-standing);
    height:min(41.5svh,350px);
  }
  .pose-switch {
    right:2px;
    top:42%;
    width:82px;
    gap:4px;
    padding:6px;
    border-radius:19px;
  }
  .pose-switch__button { min-height:31px; font-size:7px; padding-inline:4px; }
  .home-nav {
    align-self:end;
    width:min(64vw,252px);
    gap:6px;
    padding:0 0 4px;
  }
  .home-nav__entry { aspect-ratio:6.65 / 1; }
  .home-nav__label { font-size:clamp(13px,3.7vw,15px); letter-spacing:.04em; }
  .greeting-bubble { left:9px; top:31%; width:146px; max-width:none; height:30px; padding:0 9px 0 5px; font-size:9px; letter-spacing:-.035em; }
  #homeCharacter[data-pose="stand"] ~ .greeting-bubble { left:7px; top:37%; }
  .music-toggle { left:50%; right:auto; top:calc(env(safe-area-inset-top) + 108px); bottom:auto; width:76px; min-height:26px; padding:4px 6px; justify-content:center; font-size:7px; transform:translateX(-50%); }
  .world-icon--bubble { --icon-size:36px; left:2%; top:40%; }
  .world-icon--window { --icon-size:42px; right:2%; top:18%; }
  .world-icon--heart { --icon-size:24px; right:6%; top:39%; }
  .world-icon--cloud { --icon-size:42px; left:2%; top:10%; }
  .world-icon--fish { --icon-size:29px; left:87%; top:42%; }
  .world-icon--dolphin,
  .world-icon--disc,
  .world-icon--shell,
  .world-icon--console,
  .world-icon--jelly,
  .world-icon--drink,
  .world-icon--fish-two,
  .world-icon--fish-three,
  .world-icon--bubble-small,
  .world-icon--bubble-tiny { display:none; }
  .module-shell__window { border-radius:28px; }
  .module-shell__content { padding:42px 18px 46px; }
}

@media (max-width:700px) and (max-height:740px) {
  .home__scene {
    top:146px;
    bottom:max(28px,calc(env(safe-area-inset-bottom) + 22px));
    gap:4px;
  }
  .music-toggle { top:calc(env(safe-area-inset-top) + 106px); }
  .home-nav {
    width:min(61vw,238px);
    gap:5px;
  }
  .home-nav__entry { aspect-ratio:6.7 / 1; }
}

@media (hover:none), (pointer:coarse) {
  .home, .home * { cursor:auto; }
  .home-cursor { display:none; }
}

@media (prefers-reduced-motion:reduce) {
  .home-character,
  .world-icon,
  .greeting-bubble,
  .music-toggle__signal i,
  .character-stage__platform::before { animation:none; }
  .home__brand,
  .home-nav__entry,
  .home-nav__art { transition-duration:80ms; }
  .home-nav__entry.is-pressed { animation:none; }
  .home-particle { display:none; }
  .module-shell.is-open .module-shell__bubble { animation:none; }
  .module-shell.is-open .module-shell__window { animation:none; opacity:1; transform:none; }
}