:root {
  color-scheme: dark;
  font-family: "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", sans-serif;
  color: #f4ffff;
  background: #083f4c;
  font-synthesis: none;
  letter-spacing: 0;
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 280px; }
button { font: inherit; color: inherit; cursor: pointer; }
button:focus-visible { outline: 3px solid #fff1bc; outline-offset: 5px; }
[hidden] { display: none !important; }
::selection { background: #f2bdc3; color: #153f46; }
.lagoon-scene { position: fixed; inset: 0; overflow: hidden; pointer-events: none; }
/* Overscan excludes the decorative UI baked into the supplied artwork edges. */
.lagoon-art { position: absolute; inset: -10% -12%; transform-origin: 50% 38%; animation: tidal-drift 20s ease-in-out infinite alternate; }
.lagoon-art img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.lagoon-scene::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(3, 34, 43, .12) 0%, transparent 55%, rgba(3, 28, 37, .66) 88%, #083f4c calc(100% - 40px)), linear-gradient(110deg, rgba(3, 35, 47, .65), transparent 49%); }
.page-shell { position: relative; display: flex; flex-direction: column; min-height: 100svh; padding: 36px 48px 54px; }
.masthead { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.identity { display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px 7px 8px; font-size: 12px; background: rgba(6, 49, 63, .78); border: 1px solid rgba(209, 246, 246, .45); border-radius: 30px; }
.identity img { display: block; width: 28px; height: 28px; object-fit: contain; }
.motion-toggle { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; flex: 0 0 44px; border-radius: 50%; border: 1px solid rgba(230, 255, 255, .6); background: rgba(6, 49, 63, .8); }
.motion-toggle:hover { background: #196274; }
.main-layout { display: flex; flex-direction: column; flex: 1; }
.heading { margin-top: 56px; max-width: 510px; }
h1 { margin: 0; font-family: "Songti SC", "STSong", "SimSun", serif; font-size: 60px; font-weight: 700; line-height: 1.18; color: #ecfffa; text-shadow: 0 2px 16px rgba(0, 45, 56, .8); }
.heading p { margin: 16px 0 0; font-size: 16px; line-height: 1.8; color: #e1f7f5; text-shadow: 0 1px 7px #003341; }
.entry-hub { position: relative; width: min(100%, 1152px); margin: auto auto 0; padding-top: 280px; }
.links { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; }
.links button { display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 60px; padding: 14px 18px; border: 1px solid rgba(215, 251, 246, .66); border-radius: 8px; background: linear-gradient(130deg, rgba(11, 77, 91, .86), rgba(8, 57, 72, .82)); box-shadow: inset 0 1px 9px rgba(204, 255, 246, .14), 0 6px 18px rgba(1, 32, 43, .18); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-size: 16px; font-weight: 500; text-align: left; transition: border-color .2s, background-color .2s; }
.links button:hover { border-color: #fff1da; background: rgba(20, 98, 112, .96); }
.links button:active { background: #134958; }
.links button:disabled { cursor: wait; opacity: .7; }
.pearl { flex: 0 0 5px; height: 5px; border-radius: 50%; background: #b7f2e7; }
.links button:nth-child(3) .pearl { background: #ffc9bf; }
.entry-arrow { margin-left: auto; color: #cef8f1; font-size: 21px; line-height: 1; }
#nav-status, .script-notice { margin: 14px 0 0; padding: 12px 16px; border-left: 3px solid #edb6a9; border-radius: 4px; background: #103b47; color: #fff5ec; font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }
html[data-motion="paused"] .lagoon-art, html[data-motion="hidden"] .lagoon-art { animation-play-state: paused; }
@keyframes tidal-drift { from { transform: scale(1.012) translate3d(-2px, 0, 0); } to { transform: scale(1.025) translate3d(2px, 3px, 0); } }
@media (min-width: 701px) and (max-width: 1100px) {
  .page-shell { padding: 28px 32px 36px; }
  .heading { margin-top: 40px; }
  h1 { font-size: 48px; }
  .links { gap: 10px; }
  .links button { padding: 14px 10px; gap: 6px; font-size: 14px; }
  .pearl { display: none; }
}
@media (max-width: 700px) {
  .page-shell { padding: 18px 20px max(22px, env(safe-area-inset-bottom)); min-height: 100svh; }
  .lagoon-art { inset: 150px -3% 140px; }
  .lagoon-art img { object-position: 50% 35%; }
  .lagoon-scene::after { background: linear-gradient(180deg, #083f4c 0, #083f4c 138px, rgba(8, 63, 76, 0) 205px, rgba(8, 63, 76, 0) 62%, rgba(8, 63, 76, .4) 75%, #083f4c calc(100% - 125px)); }
  .identity { font-size: 11px; gap: 8px; padding-right: 12px; }
  .heading { margin-top: 24px; max-width: 100%; }
  h1 { font-size: 38px; line-height: 1.2; }
  .heading p { margin-top: 9px; font-size: 12px; line-height: 1.7; }
  .entry-hub { padding-top: 340px; }
  .links { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .links button { min-height: 50px; padding: 12px; gap: 8px; font-size: 14px; }
  .links button:last-child { grid-column: 1 / -1; }
}
@media (max-width: 350px) {
  .page-shell { padding-inline: 16px; }
  h1 { font-size: 34px; }
  .heading p { font-size: 11px; }
  .links button { padding-inline: 10px; gap: 6px; font-size: 13px; }
  .entry-hub { padding-top: 300px; }
}
@media (max-height: 600px) and (min-width: 701px) {
  .page-shell { padding-block: 20px; }
  .heading { margin-top: 24px; }
  h1 { font-size: 42px; }
  .entry-hub { padding-top: 100px; }
}