:root { color-scheme: dark; font-family: "Microsoft YaHei", "PingFang SC", sans-serif; background: #091430; color: #f7ecde; }
* { box-sizing: border-box; }
canvas { -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
html { scrollbar-width: none; }
html::-webkit-scrollbar { display: none; }
body { margin: 0; min-height: 100vh; background: radial-gradient(ellipse at 50% 22%, #183562, #091430 65%); }
#ambientCanvas { position: fixed; inset: 0; width: 100vw; height: 100dvh; z-index: 0; pointer-events: none; opacity: 0; transition: opacity 240ms ease; }
#ambientCanvas[data-ready="true"] { opacity: 1; }
#galleryHost { position: relative; z-index: 1; width: min(100%, 540px); margin: 0 auto; box-shadow: 0 0 0 1px #a7c3ff12, 0 24px 100px #03071570, 0 0 72px #78a5d020; }
#galleryCanvas { display: block; width: 100%; touch-action: pan-y; outline: none; opacity: 1; transform: translateY(0); transition: opacity var(--gallery-reveal-duration, 600ms) ease, transform var(--gallery-reveal-duration, 600ms) cubic-bezier(.2,.65,.3,1); }
#galleryLoadingCanvas { position: absolute; top: 0; left: 0; display: block; width: 100%; height: min(100dvh, 960px); pointer-events: none; opacity: 1; transition: opacity var(--gallery-reveal-duration, 600ms) ease, transform var(--gallery-reveal-duration, 600ms) ease; }
body[data-motion="off"] #ambientCanvas { transition: none; }
#galleryHost[data-load="loading"] { min-height: min(100dvh, 960px); box-shadow: none; }
#galleryHost[data-load="loading"] #galleryCanvas { opacity: 0; transform: translateY(16px); pointer-events: none; }
#galleryHost[data-load="revealing"] #galleryCanvas { pointer-events: none; }
#galleryHost[data-load="revealing"] #galleryLoadingCanvas { opacity: 0; transform: translateY(-8px); }
#galleryHost[data-load="failed"] { box-shadow: none; }
#galleryHost[data-load="failed"] #galleryCanvas { opacity: 0; pointer-events: none; }
#galleryCanvas:focus-visible { outline: 1px solid #ffe2b288; outline-offset: -1px; }
@media (min-width: 700px) {
  #galleryHost { overflow: hidden; border-radius: 18px; box-shadow: 0 24px 96px #03071555, 0 0 80px #78a5d01a; }
  #galleryCanvas {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 14px, #000 calc(100% - 14px), transparent);
    mask-image: linear-gradient(to right, transparent, #000 14px, #000 calc(100% - 14px), transparent);
  }
}
#overlayCanvas { position: fixed; inset: 0; width: 100vw; height: 100dvh; z-index: 1000; touch-action: none; outline: none; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
#status.error { position: fixed; top: 24px; left: 50%; transform: translateX(-50%); width: min(90%, 420px); height: auto; margin: 0; padding: 14px; clip-path: none; white-space: normal; background: #153c77; border: 1px solid #d8b67e; border-radius: 8px; }