@font-face {
  font-family: "Bubble About Pixel";
  src: url("品牌素材/英文像素字体.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: "Bubble About Chinese";
  src: url("品牌素材/中文像素字体.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

body.about-active { overflow: hidden; }
body.about-active .home { visibility: hidden; }

.about {
  position: fixed;
  z-index: 95;
  inset: 0;
  min-height: 100dvh;
  overflow: hidden;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  color: #fff;
  background: #54b7f5;
  transition: opacity 260ms ease, visibility 0s linear 260ms;
}

.about.is-visible { visibility: visible; opacity: 1; pointer-events: auto; transition-delay: 0s; }
.about.is-preparing { visibility: hidden; opacity: 0; pointer-events: none; }
.about__locker,
.about__locker img { position: absolute; inset: 0; width: 100%; height: 100%; }
.about__locker img { display: block; object-fit: cover; object-position: center; user-select: none; }

.about-note {
  position: absolute;
  z-index: 7;
  left: clamp(92px, 8.2vw, 150px);
  top: clamp(275px, 33vh, 320px);
  width: clamp(118px, 10vw, 145px);
  min-height: 0;
  aspect-ratio: 1;
  box-sizing: border-box;
  margin: 0;
  padding: 19px 18px 17px;
  display: grid;
  place-items: center;
  color: #5589bd;
  background: linear-gradient(154deg, rgba(255,255,250,.98), rgba(247,248,237,.96));
  box-shadow: 0 8px 12px rgba(23,91,163,.15), inset 0 0 0 1px rgba(255,255,255,.82);
  text-align: center;
  text-shadow: 0 1px 0 rgba(255,255,255,.9);
  transform: rotate(-2.5deg);
  font: 400 clamp(12px,.9vw,15px)/1.48 "Bubble About Pixel", ui-monospace, monospace;
  letter-spacing: .035em;
  pointer-events: none;
}
.about-note::before {
  content: "";
  position: absolute;
  z-index: 1;
  left: 53%;
  top: -7px;
  width: 48%;
  height: 16px;
  background: linear-gradient(180deg,rgba(255,255,255,.68),rgba(238,239,231,.54));
  box-shadow: 0 1px 2px rgba(55,104,155,.09);
  transform: translateX(-50%) rotate(1.5deg);
  pointer-events: none;
}

.about__topbar {
  position: fixed;
  z-index: 30;
  top: max(17px, env(safe-area-inset-top));
  left: clamp(30px, 4.2vw, 70px);
  right: clamp(30px, 4.2vw, 70px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
}

.about__topbar > * { pointer-events: auto; }
.about__top-actions { display: flex; align-items: center; gap: 12px; }
.about-control {
  display: grid;
  place-items: center;
  width: 56px;
  aspect-ratio: 1;
  padding: 0;
  border: 1px solid rgba(224,250,255,.72);
  border-radius: 50%;
  color: #f8ffff;
  background: radial-gradient(circle at 34% 24%, rgba(255,255,255,.92), rgba(155,222,249,.42) 43%, rgba(72,126,203,.34));
  box-shadow: inset 1px 1px 3px rgba(255,255,255,.96), 0 0 15px rgba(191,238,255,.42);
  cursor: inherit;
  transition: transform 150ms ease, filter 150ms ease;
}
.about-control--back { position: relative; border: 0; background: transparent; box-shadow: none; }
.about-control--back img { position: absolute; left: 50%; top: 50%; width: 126%; height: 126%; max-width: none; transform: translate(-50%,-50%); object-fit: contain; }
.about-control--music { position: relative; }
.about-control--music .closet-control__note { font: 700 20px/1 Georgia, serif; }
.about-control--music .closet-control__bars { right: 7px; bottom: 8px; }
.about-control--music.is-playing { filter: brightness(1.12) drop-shadow(0 0 8px rgba(207,244,255,.82)); }
.about-control--music.is-playing .closet-control__bars i { opacity: 1; animation: closetMusicBar 700ms steps(3,end) infinite; }
.about-control--music.is-playing .closet-control__bars i:nth-child(2) { animation-delay: -210ms; }
.about-control--music.is-playing .closet-control__bars i:nth-child(3) { animation-delay: -430ms; }
.about-control:hover,
.about-control:focus-visible { transform: translateY(-2px) scale(1.04); filter: brightness(1.12); }
.about-control:active { transform: translateY(2px) scale(.96); }
.about-control:focus-visible { outline: 0; box-shadow: 0 0 0 2px rgba(255,255,255,.86), 0 0 18px rgba(183,235,255,.94); }

.about-id-status {
  display: block;
  max-width: min(44vw,370px);
  padding: 0;
  border: 0;
  overflow: hidden;
  appearance: none;
  -webkit-appearance: none;
  color: rgba(255,255,255,.96);
  background: transparent;
  box-shadow: none;
  text-overflow: ellipsis;
  text-shadow: 0 0 5px rgba(255,255,255,.8), 0 0 13px rgba(35,121,215,.72);
  white-space: nowrap;
  font: 400 12px/1.2 "Bubble About Pixel", ui-monospace, monospace;
  letter-spacing: .08em;
}

.about-memory {
  position: absolute;
  z-index: 8;
  left: 50%;
  top: 51.5%;
  width: clamp(175px, 14vw, 220px);
  aspect-ratio: 1118/1407;
  padding: 0;
  border: 0;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  cursor: inherit;
  transform: translate(-50%,-50%);
  -webkit-tap-highlight-color: transparent;
  transition: filter 150ms ease, opacity 250ms ease;
}
.about-memory__visual { position:absolute; inset:0; display:block; transform:rotate(-2deg); transform-origin:center; animation:aboutMemoryFloat 3.2s ease-in-out infinite; transition:scale 220ms cubic-bezier(.2,.76,.3,1),filter 180ms ease; }
.about-memory img { position:relative; z-index:1; display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 9px 8px rgba(7,68,142,.28)); animation:aboutPhotoEdgeGlow 2.6s ease-in-out infinite; }
.about-memory:hover,
.about-memory:focus-visible { outline: 0; }
@media (hover:hover) and (pointer:fine) {
  .about-memory:hover .about-memory__visual,
  .about-memory:focus-visible .about-memory__visual { scale:1.05; filter:brightness(1.05) drop-shadow(0 0 5px rgba(255,255,255,.46)); }
  .about-memory:active .about-memory__visual { scale:.985; }
}
.about[data-state="dialogue"] .about-memory,
.about[data-state="exiting"] .about-memory { filter: brightness(.86); }
.about[data-state="dialogue"] .about-memory__visual,
.about[data-state="exiting"] .about-memory__visual { animation:none; }
.about[data-state="dialogue"] .about-memory img,
.about[data-state="exiting"] .about-memory img { animation:none; filter:drop-shadow(0 9px 8px rgba(7,68,142,.28)); }
.about-memory__sparkle { position: absolute; color: #fff; line-height: 1; pointer-events: none; opacity: 0; text-shadow: 0 0 5px #fff, 0 0 12px #dff8ff; animation: aboutMemorySparkle 3.2s steps(4,end) infinite; }
.about-memory__sparkle--one { top: 3%; right: -7%; font-size: 22px; }
.about-memory__sparkle--two { top: 47%; left: -8%; font-size: 20px; animation-delay: 1.05s; }
.about-memory__sparkle--three { right: -4%; bottom: 5%; font-size: 17px; animation-delay: 2.05s; }
.about[data-state="dialogue"] .about-memory__sparkle,
.about[data-state="exiting"] .about-memory__sparkle { animation:none; opacity:0; }

.about__reading-wash { position: absolute; z-index: 9; inset: 0; opacity: 0; pointer-events: none; background: rgba(22,91,177,.1); transition: opacity 220ms ease; }
.about[data-state="dialogue"] .about__reading-wash { opacity: 1; }

.about-dialogue { position: absolute; z-index: 20; inset: 0; pointer-events: none; }
.about-dialogue__module {
  position: absolute;
  left: clamp(28px,3.8vw,60px);
  right: clamp(28px,3.8vw,60px);
  bottom: max(24px, env(safe-area-inset-bottom));
  height: clamp(250px,33vh,315px);
  transform: translate3d(calc(-100vw - 120px),0,0);
  will-change: transform;
}
.about[data-state="dialogue"] .about-dialogue__module { pointer-events: auto; animation: aboutMechanicalIn 500ms cubic-bezier(.18,.8,.24,1.1) both; }
.about[data-state="exiting"] .about-dialogue__module { pointer-events: none; animation: aboutMechanicalOut 390ms cubic-bezier(.58,.02,.82,.35) both; }
.about-dialogue__box {
  position: absolute;
  left: clamp(92px,8vw,132px);
  right: 0;
  bottom: 0;
  height: 76%;
  border: 3px solid rgba(222,247,255,.96);
  border-radius: 22px 22px 30px 20px;
  background: linear-gradient(180deg,rgba(255,182,224,.83),rgba(247,139,202,.76));
  box-shadow: inset 0 0 0 3px rgba(75,150,225,.34), inset 0 0 0 7px rgba(255,255,255,.2), inset 0 10px 20px rgba(255,255,255,.12), 0 10px 26px rgba(18,77,150,.2);
}
.about-dialogue__box::before { content:""; position:absolute; inset:8px; border:1px solid rgba(255,255,255,.66); border-radius:16px 16px 23px 14px; pointer-events:none; }
.about-dialogue__box::after { content:""; position:absolute; inset:13px; border:1px solid rgba(66,146,224,.28); border-radius:13px 13px 20px 11px; pointer-events:none; }
.about-dialogue__frame-lines { position:absolute; z-index:1; inset:5px; pointer-events:none; background:linear-gradient(90deg,rgba(255,255,255,.76) 0 34px,transparent 34px calc(100% - 34px),rgba(255,255,255,.76) calc(100% - 34px)) top/100% 1px no-repeat,linear-gradient(90deg,rgba(74,153,226,.5) 0 18px,transparent 18px calc(100% - 18px),rgba(74,153,226,.5) calc(100% - 18px)) bottom/100% 1px no-repeat; }
.about-dialogue__portrait { position: absolute; z-index: 4; left: 0; bottom: -2px; width: clamp(215px,21vw,312px); height: 143%; overflow: hidden; pointer-events: none; }
.about-dialogue__portrait img { position: absolute; left: 50%; bottom: 0; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; transform: translateX(-50%); filter: drop-shadow(7px 10px 7px rgba(22,66,125,.2)); }
.about-dialogue__name {
  position: absolute;
  z-index: 3;
  right: clamp(28px,3vw,48px);
  top: 0;
  min-width: 150px;
  margin: 0;
  padding: 10px 25px 9px;
  border: 3px double rgba(223,249,255,.94);
  border-radius: 15px;
  color: #fff;
  background: linear-gradient(180deg,rgba(102,204,255,.96),rgba(45,137,226,.94));
  box-shadow: inset 0 2px 0 rgba(255,255,255,.62), 0 5px 12px rgba(12,76,165,.24);
  text-align: center;
  text-shadow: 0 1px 0 rgba(20,92,170,.5), 0 0 8px rgba(255,255,255,.6);
  transform: translateY(-55%);
  font: 400 18px/1 "Bubble About Pixel", ui-monospace, monospace;
  letter-spacing: .1em;
}
.about[data-state="dialogue"] .about-dialogue__name { animation: aboutNameInflate 330ms 510ms cubic-bezier(.2,.86,.26,1.25) both; }
.about-dialogue__text {
  position: absolute;
  z-index: 2;
  left: clamp(185px,16vw,250px);
  right: clamp(30px,4.2vw,68px);
  top: 31%;
  bottom: 39px;
  margin: 0;
  overflow: hidden;
  white-space: pre-line;
  color: #fff;
  text-shadow: 0 1px 1px rgba(93,40,94,.22), 0 0 7px rgba(255,255,255,.2);
  font: 400 clamp(15px,1.3vw,19px)/1.55 "Bubble About Chinese", "PingFang SC", sans-serif;
  letter-spacing: .025em;
}
.about-dialogue__text.is-changing { animation: aboutTextTick 150ms ease both; }
.about-dialogue__line { display:block; white-space:nowrap; }
.about-dialogue__nav,
.about-dialogue__continue {
  position: absolute;
  z-index: 4;
  bottom: 17px;
  min-height: 32px;
  padding: 5px 7px;
  border: 0;
  appearance: none;
  -webkit-appearance: none;
  color: rgba(255,255,255,.98);
  background: transparent;
  box-shadow: none;
  text-shadow: 0 0 5px rgba(255,255,255,.82), 0 0 11px rgba(183,235,255,.82);
  font: 400 clamp(11px,.95vw,14px)/1 "Bubble About Pixel", ui-monospace, monospace;
  letter-spacing: .06em;
  cursor: inherit;
  -webkit-tap-highlight-color: transparent;
  transition: transform 120ms ease, filter 120ms ease, text-shadow 120ms ease;
}
.about-dialogue__continue { right:clamp(22px,2.5vw,38px); }
.about-dialogue__back { left:clamp(185px,16vw,250px); color:rgba(255,255,255,.82); text-shadow:0 0 4px rgba(255,255,255,.62),0 0 9px rgba(183,235,255,.58); }
.about-dialogue__nav[hidden] { display:none; }
.about-dialogue__nav:hover,
.about-dialogue__nav:focus-visible,
.about-dialogue__continue:hover,
.about-dialogue__continue:focus-visible { outline: 0; filter: brightness(1.18); text-shadow: 0 0 6px #fff,0 0 16px rgba(205,245,255,.96); transform: translateY(-1px); }
.about-dialogue__nav:active,
.about-dialogue__continue:active { background: transparent; transform: translateY(2px); filter: brightness(1.3); }

@keyframes aboutMemorySparkle { 0%,62%,100%{opacity:0;transform:scale(.7)} 70%{opacity:1;transform:scale(1.08)} 79%{opacity:.25;transform:scale(.9)} }
@keyframes aboutPhotoEdgeGlow { 0%,100%{filter:drop-shadow(0 9px 8px rgba(7,68,142,.28)) drop-shadow(0 0 1px rgba(255,255,255,.12))} 42%{filter:drop-shadow(0 9px 8px rgba(7,68,142,.28)) drop-shadow(0 0 3px rgba(255,255,255,.7)) drop-shadow(0 0 5px rgba(199,240,255,.3))} 60%{filter:drop-shadow(0 9px 8px rgba(7,68,142,.28)) drop-shadow(0 0 2px rgba(255,255,255,.22))} }
@keyframes aboutMemoryFloat { 0%,100%{translate:0 0} 42%{translate:0 -4px} 72%{translate:0 1px} }
@keyframes aboutMechanicalIn { 0%{transform:translate3d(calc(-100vw - 120px),0,0)} 72%{transform:translate3d(9px,0,0)} 86%{transform:translate3d(-4px,0,0)} 100%{transform:translate3d(0,0,0)} }
@keyframes aboutMechanicalOut { 0%{transform:translate3d(0,0,0)} 18%{transform:translate3d(6px,0,0)} 100%{transform:translate3d(calc(-100vw - 120px),0,0)} }
@keyframes aboutTextTick { from{opacity:.35;transform:translateX(-2px)} to{opacity:1;transform:none} }
@keyframes aboutNameInflate { 0%{opacity:0;transform:translateY(-55%) scale(.88)} 64%{opacity:1;transform:translateY(-55%) scale(1.055)} 100%{opacity:1;transform:translateY(-55%) scale(1)} }

@media (hover:hover) and (pointer:fine) { .about, .about * { cursor:none !important; } }

@media (max-width:700px) {
  .about { min-height:100svh; }
  .about__topbar { top:max(10px,env(safe-area-inset-top)); left:10px; right:10px; }
  .about-control { width:48px; }
  .about-control--music .closet-control__note { font-size:18px; }
  .about__top-actions { gap:7px; overflow:visible; }
  .about-id-status { flex:0 0 auto; max-width:none; overflow:visible; padding-block:3px; font-size:7px; line-height:1.35; letter-spacing:.055em; text-overflow:clip; }
  .about__locker { overflow:hidden; background:#54b7f5; }
  .about__locker img { transform:translateY(-17%) scale(1.08); transform-origin:center top; -webkit-mask-image:linear-gradient(to bottom,#000 0 87%,rgba(0,0,0,.88) 93%,transparent 100%); mask-image:linear-gradient(to bottom,#000 0 87%,rgba(0,0,0,.88) 93%,transparent 100%); }
  .about-note { z-index:7; left:auto; right:20px; top:max(166px,calc(env(safe-area-inset-top) + 150px)); width:112px; min-height:0; aspect-ratio:1; padding:15px 13px 13px; font-size:9px; line-height:1.45; transform:rotate(-1.5deg); }
  .about-memory { top:51%; width:clamp(148px,42vw,178px); }
  .about-dialogue__module { left:8px; right:8px; bottom:max(10px,env(safe-area-inset-bottom)); height:min(47svh,390px); }
  .about-dialogue__box { left:8vw; height:75%; border-radius:17px 17px 22px 15px; }
  .about-dialogue__portrait { left:-18vw; bottom:0; width:60vw; height:calc(75% + 128px); }
  .about-dialogue__portrait img { bottom:0; height:auto; aspect-ratio:941/1373; object-fit:contain; object-position:center bottom; }
  .about-dialogue__name { right:13px; min-width:112px; padding:8px 15px 7px; font-size:13px; }
  .about-dialogue__text { left:31vw; right:13px; top:24%; bottom:47px; font-size:clamp(10.5px,2.9vw,12px); line-height:1.46; letter-spacing:0; }
  .about-dialogue__nav,
  .about-dialogue__continue { bottom:13px; min-height:34px; font-size:10px; }
  .about-dialogue__continue { right:13px; }
  .about-dialogue__back { left:31vw; }
}

@media (max-width:350px) {
  .about-id-status { font-size:6.4px; }
  .about-memory { width:144px; }
  .about-dialogue__module { height:min(49svh,350px); }
  .about-dialogue__box { left:7vw; }
  .about-dialogue__portrait { left:-19vw; width:61vw; }
  .about-dialogue__text { left:31vw; top:24%; font-size:9.4px; line-height:1.43; }
  .about-dialogue__name { min-width:100px; font-size:12px; }
}

@media (prefers-reduced-motion:reduce) {
  .about,
  .about-control,
  .about-memory,
  .about-dialogue__nav,
  .about-dialogue__continue { transition-duration:60ms; }
  .about-memory__visual { animation:none; transition-duration:60ms; }
  .about-memory__sparkle { animation-duration:6s; }
  .about-memory img { animation-duration:6s; }
  .about[data-state="dialogue"] .about-dialogue__name { animation:aboutNameInflate 100ms 120ms ease both; }
  .about[data-state="dialogue"] .about-dialogue__module { animation:aboutMechanicalIn 120ms ease both; }
  .about[data-state="exiting"] .about-dialogue__module { animation:aboutMechanicalOut 100ms ease both; }
}