/* Donor source: css/style.css */
*{box-sizing:border-box}
:root{
  --cream:#fff0c0;
  --cream-soft:#fff8e8;
  --white-blue:#e9f7ff;
}
html,
body{
  margin:0;
  padding:0;
  width:100%;
  min-height:100vh;
  overflow-x:hidden;
  color:var(--cream-soft);
  font-family:"Noto Sans TC","PingFang TC","Microsoft JhengHei","Nunito","Quicksand",sans-serif;
  text-align:center;
  background:#06365b url("../assets/backgrounds/ocean-touch-bg.webp") center/cover no-repeat;
}
[hidden]{display:none!important}
button{
  font-family:inherit;
  cursor:pointer;
  border:0;
  background:none;
}
.ocean-scene{
  position:relative;
  width:100%;
  min-height:100vh;
  background:#06365b url("../assets/backgrounds/ocean-touch-bg.webp") center/cover no-repeat;
}
.ocean-scene{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:40px 24px;
  overflow:hidden;
}
.shell-back,
button[aria-label="返回"],
button[title="返回"]{
  position: absolute !important;
  left: 24px !important;
  bottom: 24px !important;
  width: 98px !important;
  height: 78px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent url("../assets/buttons/back-shell.webp") center center / contain no-repeat !important;
  box-shadow: none !important;
  outline: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
  text-align: center !important;
  color: #5d5478 !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
  text-shadow:
    0 1px 0 rgba(255,245,252,.92),
    0 0 2px rgba(255,220,245,.45) !important;
  filter: drop-shadow(0 3px 8px rgba(0, 25, 55, .16)) !important;
  transform: none !important;
  z-index: 100 !important;
}
.shell-back,
button[aria-label="返回"],
button[title="返回"]{
  padding-top: 7px !important;
  padding-left: 1px !important;
}
.shell-back > *,
button[aria-label="返回"] > *,
button[title="返回"] > *{
  margin: 0 !important;
  padding: 0 !important;
  position: static !important;
  transform: none !important;
  line-height: 1 !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  text-align: center !important;
  pointer-events: none !important;
}
.shell-back:hover,
button[aria-label="返回"]:hover,
button[title="返回"]:hover{
  background: transparent url("../assets/buttons/back-shell.webp") center center / contain no-repeat !important;
  box-shadow: none !important;
  transform: translateY(-1px) !important;
  filter: brightness(1.03) drop-shadow(0 4px 10px rgba(0, 25, 55, .18)) !important;
}
.shell-back:active,
button[aria-label="返回"]:active,
button[title="返回"]:active{
  transform: translateY(1px) scale(.99) !important;
  filter: brightness(.98) drop-shadow(0 2px 6px rgba(0, 25, 55, .16)) !important;
}
html,
body,
h2,
p,
span,
div,
button{
  letter-spacing: 1.2px !important;
}
/* Donor source: css/animation.css */
.shell-back,
button[aria-label="返回"],
button[title="返回"]{
  position: absolute !important;
  left: 24px !important;
  bottom: 24px !important;
  width: 98px !important;
  height: 78px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent url("../assets/buttons/back-shell.webp") center center / contain no-repeat !important;
  box-shadow: none !important;
  outline: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
  text-align: center !important;
  color: #5d5478 !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
  text-shadow:
    0 1px 0 rgba(255,245,252,.92),
    0 0 2px rgba(255,220,245,.45) !important;
  filter: drop-shadow(0 3px 8px rgba(0, 25, 55, .16)) !important;
  transform: none !important;
  z-index: 100 !important;
}
.shell-back,
button[aria-label="返回"],
button[title="返回"]{
  padding-top: 7px !important;
  padding-left: 1px !important;
}
.shell-back > *,
button[aria-label="返回"] > *,
button[title="返回"] > *{
  margin: 0 !important;
  padding: 0 !important;
  position: static !important;
  transform: none !important;
  line-height: 1 !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  text-align: center !important;
  pointer-events: none !important;
}
.shell-back:hover,
button[aria-label="返回"]:hover,
button[title="返回"]:hover{
  background: transparent url("../assets/buttons/back-shell.webp") center center / contain no-repeat !important;
  box-shadow: none !important;
  transform: translateY(-1px) !important;
  filter: brightness(1.03) drop-shadow(0 4px 10px rgba(0, 25, 55, .18)) !important;
}
.shell-back:active,
button[aria-label="返回"]:active,
button[title="返回"]:active{
  transform: translateY(1px) scale(.99) !important;
  filter: brightness(.98) drop-shadow(0 2px 6px rgba(0, 25, 55, .16)) !important;
}
html,
body,
h2,
p,
span,
div,
button{
  letter-spacing: 1.2px !important;
}
/* Donor source: css/back-shell-v30.css */
.shell-back,
button[aria-label="返回"],
button[title="返回"]{
  position: absolute !important;
  left: 24px !important;
  bottom: 24px !important;
  width: 98px !important;
  height: 78px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent url("../assets/buttons/back-shell.webp") center center / contain no-repeat !important;
  box-shadow: none !important;
  outline: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
  text-align: center !important;
  color: #5d5478 !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
  text-shadow:
    0 1px 0 rgba(255,245,252,.92),
    0 0 2px rgba(255,220,245,.45) !important;
  filter: drop-shadow(0 3px 8px rgba(0, 25, 55, .16)) !important;
  transform: none !important;
  z-index: 100 !important;
}
.shell-back,
button[aria-label="返回"],
button[title="返回"]{
  padding-top: 7px !important;
  padding-left: 1px !important;
}
.shell-back > *,
button[aria-label="返回"] > *,
button[title="返回"] > *{
  margin: 0 !important;
  padding: 0 !important;
  position: static !important;
  transform: none !important;
  line-height: 1 !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  text-align: center !important;
  pointer-events: none !important;
}
.shell-back:hover,
button[aria-label="返回"]:hover,
button[title="返回"]:hover{
  background: transparent url("../assets/buttons/back-shell.webp") center center / contain no-repeat !important;
  box-shadow: none !important;
  transform: translateY(-1px) !important;
  filter: brightness(1.03) drop-shadow(0 4px 10px rgba(0, 25, 55, .18)) !important;
}
.shell-back:active,
button[aria-label="返回"]:active,
button[title="返回"]:active{
  transform: translateY(1px) scale(.99) !important;
  filter: brightness(.98) drop-shadow(0 2px 6px rgba(0, 25, 55, .16)) !important;
}
html,
body,
h2,
p,
span,
div,
button{
  letter-spacing: 1.2px !important;
}
/* Donor source: css/letter-spacing-v31.css */
html,
body,
h2,
p,
span,
div,
button{
  letter-spacing: 1.2px !important;
}
/* Donor source: css/group.css */
:root{
  --cream:#fff0c0;
  --cream-soft:#fff8e8;
  --white-blue:#e9f7ff;
  --deep:#06365b;
  --ink:#10233a;
  --panel:rgba(5,40,76,.36);
  --panel-strong:rgba(8,52,93,.56);
  --paper:rgba(255,248,232,.88);
  --line:rgba(226,248,255,.62);
}
body{
  overflow:hidden;
  background:#06365b url("../assets/backgrounds/ocean-touch-bg.webp") center/cover no-repeat !important;
}
.group-system{
  position:relative;
  width:100vw;
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:24px;
  overflow:hidden;
  background:#06365b url("../assets/backgrounds/ocean-touch-bg.webp") center/cover no-repeat;
  color:var(--cream-soft);
}
.group-system::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 18% 74%, rgba(255,240,190,.12), transparent 24%),
    radial-gradient(circle at 78% 22%, rgba(190,236,255,.14), transparent 30%),
    linear-gradient(180deg, rgba(0,14,38,.04), rgba(0,18,42,.34));
  pointer-events:none;
}
.group-screen{
  position:absolute;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  padding:34px 24px;
}
.group-screen.is-active{display:flex;}
html[data-initial-group-screen] .group-screen{display:none !important;}
html[data-initial-group-screen="starSeaHome"] #starSeaHome{display:flex !important;}
.group-scale{
  transform:scale(.8);
  transform-origin:center center;
}
.group-panel{
  position:relative;
  width:min(1120px,96vw);
  min-height:720px;
  z-index:2;
}
.ocean-button,
.group-start-button{
  background-color:transparent;
  background-image:url("../assets/buttons/button-normal.webp");
  background-repeat:no-repeat;
  background-position:center;
  background-size:100% 100%;
  border:0;
  outline:0;
  color:var(--cream-soft);
  text-align:center;
  text-shadow:0 2px 8px rgba(0,20,45,.68);
  filter:brightness(1) drop-shadow(0 0 10px rgba(255,210,120,.28));
  transition:transform .2s ease, filter .2s ease;
}
.ocean-button:hover,
.group-start-button:hover{
  transform:translateY(-2px);
  filter:brightness(1.07) drop-shadow(0 0 18px rgba(255,220,140,.55));
}
.ocean-button:active,
.group-start-button:active{
  background-image:url("../assets/buttons/button-pressed.webp");
  transform:scale(.97);
  filter:brightness(1.12) drop-shadow(0 0 24px rgba(255,235,170,.85));
}
.group-start-button{
  position:absolute;
  left:50%;
  bottom:38px;
  transform:translateX(-50%);
  width:260px;
  height:110px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
}
.group-start-button:hover{transform:translateX(-50%) translateY(-2px);}
.group-start-button:active{transform:translateX(-50%) scale(.97);}
.start-main{font-size:32px;font-weight:900;line-height:1;}
.start-lang{font-size:15px;font-weight:800;line-height:1.2;}
.group-back{
  z-index:50 !important;
}
@media (max-width: 980px){.group-scale{transform:scale(.86);}
.group-panel{min-height:660px;}}
.starsea-ocean-panel{
  position:relative;
  width:min(1120px, 96vw);
  min-height:720px;
  overflow:hidden;
  border-radius:38px;
  background:
    linear-gradient(180deg, rgba(2,20,52,.10), rgba(2,16,40,.28)),
    url("../assets/backgrounds/starsea-ocean-bg.webp") center/cover no-repeat;
  box-shadow:0 20px 54px rgba(0, 12, 40, .30);
}
.starsea-ocean-panel::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 50% 36%, rgba(150,228,255,.16), transparent 30%);
  pointer-events:none;
  z-index:1;
}
.starsea-home-panel{
  isolation:isolate;
}
.starsea-home-panel::after{
  content:"";
  position:absolute;
  left:14px;
  top:18px;
  width:250px;
  height:200px;
  background:
    radial-gradient(circle at 24% 24%, rgba(33,122,193,.34), rgba(25,110,183,.20) 40%, rgba(10,74,145,.08) 66%, transparent 88%);
  filter:blur(8px);
  z-index:2;
  pointer-events:none;
}
.starsea-home-stars,
.starsea-home-copy,
.starsea-start-button{
  position:absolute;
  z-index:3;
}
.starsea-home-stars{
  inset:0;
  pointer-events:none;
}
.starsea-home-copy{
  left:50%;
  top:48%;
  transform:translate(-50%, -50%);
  text-align:center;
  color:#07182b;
  text-shadow:0 2px 10px rgba(255,255,255,.18);
}
.starsea-home-copy h2{
  margin:0 0 8px;
  font-size:clamp(58px, 6vw, 82px);
  line-height:1.04;
  font-weight:900;
}
.starsea-home-copy p{
  margin:0;
  font-size:24px;
  line-height:1.18;
  font-weight:700;
}
.starsea-home-star{
  position:absolute;
  height:auto;
  pointer-events:none;
  animation:groupStarFloat 4.8s ease-in-out infinite;
}
.starsea-home-star.star-pink-top{width:120px; left:160px; top:74px; filter:drop-shadow(0 0 18px rgba(255,174,226,.42));}
.starsea-home-star.star-blue-top{width:128px; left:384px; top:48px; animation-delay:.25s; filter:drop-shadow(0 0 18px rgba(180,252,255,.45));}
.starsea-home-star.star-yellow-left{width:108px; left:154px; top:405px; animation-delay:.58s; filter:drop-shadow(0 0 18px rgba(255,238,120,.44));}
.starsea-home-star.star-orange-bottom{width:250px; left:124px; bottom:72px; animation-delay:.78s; filter:drop-shadow(0 0 18px rgba(255,186,90,.42));}
.starsea-home-star.star-pink-right{width:165px; right:138px; top:212px; animation-delay:.42s; filter:drop-shadow(0 0 18px rgba(255,178,225,.40));}
.starsea-home-star.star-white-right{width:88px; right:146px; bottom:136px; animation-delay:.95s; filter:drop-shadow(0 0 18px rgba(232,248,255,.46));}
.starsea-start-button{
  left:50%;
  bottom:108px;
  transform:translateX(-50%);
  width:230px;
  height:118px;
  z-index:4;
}
.starsea-start-button:hover{transform:translateX(-50%) translateY(-2px);}
.starsea-start-button:active{transform:translateX(-50%) scale(.97);}
.starsea-wave-track{
  left:-4%;
  bottom:-8px;
  width:108%;
  height:220px;
  pointer-events:none;
  overflow:hidden;
  z-index:4;
}
@media (max-width: 980px){.starsea-ocean-panel{width:min(980px, 96vw); min-height:660px;}
.starsea-home-copy{top:46%;}
.starsea-home-copy h2{font-size:54px;}
.starsea-home-copy p{font-size:20px;}
.starsea-home-star.star-orange-bottom{width:196px; left:96px; bottom:100px;}
.starsea-home-star.star-pink-right{right:90px; top:228px; width:146px;}
.starsea-wave-track{height:190px;}}
.starsea-wave-track{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  width:100%;
  height:158px;
  overflow:hidden;
  pointer-events:none;
  z-index:2;
}
.starsea-wave-track::before{
  content:"";
  position:absolute;
  left:-2%;
  bottom:-10px;
  width:104%;
  height:172px;
  background-image:url("../assets/waves/starsea-wave-strip-user-clean.webp");
  background-repeat:repeat-x;
  background-position:0 100%;
  background-size:760px 176px;
  will-change:background-position;
  opacity:1;
  filter:drop-shadow(0 -2px 10px rgba(215,240,255,.16));
  animation:starseaWaveBgA 18s ease-in-out infinite alternate;
}
.starsea-wave-track::after{ display:none; }
.starsea-start-button{ z-index:6; bottom:94px; }
.starsea-home-copy,
.starsea-home-stars{ z-index:4; }
#starSeaHome{
  padding:0 !important;
  align-items:stretch !important;
  justify-content:stretch !important;
}
#starSeaHome .starsea-ocean-panel{
  width:100vw !important;
  height:100vh !important;
  min-height:100vh !important;
  max-width:none !important;
  border-radius:0 !important;
  box-shadow:none !important;
  overflow:hidden !important;
  transform:none !important;
}
#starSeaHome .starsea-ocean-panel{
  background:
    linear-gradient(180deg, rgba(2,20,52,.06), rgba(2,16,40,.18)),
    url("../assets/backgrounds/starsea-entry-bg-nowave.webp") center center / cover no-repeat !important;
}
#starSeaHome .starsea-home-panel::after{
  display:none !important;
}
#starSeaHome .starsea-wave-track::before,
#starSeaHome .starsea-wave-track::after{
  content:none !important;
  background:none !important;
  display:none !important;
}
#starSeaHome .starsea-wave-track{
  display:block !important;
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  bottom:0 !important;
  width:100vw !important;
  height:240px !important;
  overflow:hidden !important;
  pointer-events:none !important;
  z-index:5 !important;
}
#starSeaHome .starsea-home-copy{
  top:43% !important;
  color:#07182b;
}
#starSeaHome .starsea-start-button{
  bottom:170px !important;
  z-index:8 !important;
}
#starSeaHome .starsea-home-stars,
#starSeaHome .starsea-home-copy,
#starSeaHome .starsea-start-button{
  z-index:6 !important;
}
@media (max-width: 980px){#starSeaHome .starsea-home-copy{ top:42% !important; }
#starSeaHome .starsea-start-button{ bottom:148px !important; }}
#starSeaHome .starsea-home-star.star-yellow-left{
  width:88px !important;
  left:198px !important;
  top:495px !important;
  z-index:7 !important;
}
#starSeaHome .starsea-home-star.star-orange-bottom{
  width:228px !important;
  left:252px !important;
  bottom:104px !important;
  z-index:6 !important;
}
#starSeaHome .starsea-wave-track{
  height:236px !important;
}
@media (max-width: 980px){#starSeaHome .starsea-home-star.star-yellow-left{ left:160px !important; top:480px !important; width:78px !important; }
#starSeaHome .starsea-home-star.star-orange-bottom{ left:206px !important; bottom:118px !important; width:190px !important; }}
#starSeaHome .starsea-home-star.star-yellow-top-right{
  width:86px !important;
  right:306px !important;
  top:94px !important;
  animation-delay:.33s !important;
  filter:drop-shadow(0 0 18px rgba(255,232,108,.44));
  z-index:6 !important;
}
#starSeaHome .starsea-home-star.star-orange-mid{
  width:82px !important;
  left:470px !important;
  top:412px !important;
  animation-delay:.51s !important;
  filter:drop-shadow(0 0 18px rgba(255,186,90,.42));
  z-index:6 !important;
}
@media (max-width: 980px){#starSeaHome .starsea-home-star.star-yellow-top-right{ right:232px !important; top:94px !important; width:74px !important; }
#starSeaHome .starsea-home-star.star-orange-mid{ left:404px !important; top:396px !important; width:70px !important; }}
/* Donor source: css/group-r46-initial-screen.css */
html[data-initial-group-screen] .group-screen.is-active{display:none;}
html[data-initial-group-screen="starSeaHome"] #starSeaHome{display:flex;}
/* Donor source: css/starsea-fonts-v9.css */
:root{
  --starsea-font-zh:"OceanMemoryChinese", "UoqMunThenKhung-Regular", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", serif;
  --starsea-font-other:"OceanMemoryOther", "Dreaming Outloud Sans", "Arial Rounded MT Bold", "Trebuchet MS", sans-serif;
}
#starSeaHome .starsea-home-copy h2,
#starSeaHome .starsea-start-button .start-main,
#starSeaHome .shell-back{
  font-family:var(--starsea-font-zh) !important;
  font-weight:400 !important;
  letter-spacing:1.2px !important;
}
#starSeaHome .starsea-home-copy p,
#starSeaHome .starsea-start-button .start-lang{
  font-family:var(--starsea-font-other) !important;
  font-weight:400 !important;
  letter-spacing:1.2px !important;
}
#starSeaHome .starsea-home-copy h2{
  line-height:1.04 !important;
}
#starSeaHome .starsea-home-copy p{
  line-height:1.18 !important;
}
/* Donor source: css/ipad-air-r65.css */
html,
body,
.group-screen{
  min-height:100dvh;
}
@supports (padding: max(0px)){.shell-back{
    margin-left:env(safe-area-inset-left);
    margin-bottom:env(safe-area-inset-bottom);
  }}
@media (min-width:768px) and (max-width:1400px) and (pointer:coarse){button,
[role="button"]{
    touch-action:manipulation;
    -webkit-tap-highlight-color:rgba(255,255,255,.18);
  }
.group-start-button{
    min-height:52px;
  }}
/* Donor source: css/ipad-elder-landscape-v49.css */
:root{
  --ocean-safe-top: max(12px, env(safe-area-inset-top));
  --ocean-safe-right: max(16px, env(safe-area-inset-right));
  --ocean-safe-bottom: max(12px, env(safe-area-inset-bottom));
  --ocean-safe-left: max(16px, env(safe-area-inset-left));
}
html,
body{
  width: 100%;
  min-width: 100%;
  min-height: 100svh;
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;
}
button,
[role="button"]{
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0.16);
}
.shell-back,
.group-back{
  overflow: visible !important;
}
.shell-back::after,
.group-back::after{
  content: "";
  position: absolute;
  inset: -11px;
  border-radius: 22px;
}
@media (orientation: landscape) and (min-width: 700px) and (max-width: 1400px){html,
body,
.ocean-scene,
.group-system,
.group-screen{
    min-height: 100svh !important;
    max-height: 100svh;
  }
body,
.ocean-scene,
.group-system{
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-color: #06365b !important;
  }
.ocean-scene{
    padding:
      var(--ocean-safe-top)
      var(--ocean-safe-right)
      var(--ocean-safe-bottom)
      var(--ocean-safe-left) !important;
  }
.shell-back,
.group-back{
    left: calc(14px + env(safe-area-inset-left)) !important;
    bottom: calc(12px + env(safe-area-inset-bottom)) !important;
  }
.group-panel,
.group-scale{
    max-width: calc(100vw - var(--ocean-safe-left) - var(--ocean-safe-right) - 24px);
    max-height: calc(100svh - var(--ocean-safe-top) - var(--ocean-safe-bottom) - 12px);
  }
.group-start-button{
    min-height: 64px;
  }}
@media (orientation: portrait) and (min-width: 700px){body::after{
    content: "請將 iPad 橫放";
    position: fixed;
    left: 50%;
    bottom: calc(18px + env(safe-area-inset-bottom));
    z-index: 2147482500;
    transform: translateX(-50%);
    padding: 10px 20px;
    border-radius: 999px;
    background: rgba(5, 40, 70, 0.9);
    color: #fff8e8;
    font-size: 20px;
    font-weight: 900;
    box-shadow: 0 7px 20px rgba(0, 0, 0, 0.26);
    pointer-events: none;
  }}
img{
  -webkit-touch-callout: none !important;
  -webkit-user-drag: none !important;
  -webkit-user-select: none !important;
  user-select: none !important;
}
@media (orientation: landscape) and (min-width: 700px) and (max-width: 1400px){html,
body,
.ocean-scene,
.group-system,
.group-screen{
    width: 100% !important;
    min-width: 100% !important;
    min-height: 100svh !important;
    height: 100svh;
    max-height: 100svh;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
  }
.ocean-scene,
.group-system{
    padding:
      var(--ocean-safe-top)
      var(--ocean-safe-right)
      var(--ocean-safe-bottom)
      var(--ocean-safe-left) !important;
  }}
#starSeaHome{
  padding: 0 !important;
  min-height: 100svh !important;
  height: 100svh !important;
  background: #06365b !important;
}
#starSeaHome .starsea-ocean-panel{
  width: 100vw !important;
  height: 100svh !important;
  min-height: 100svh !important;
  max-height: 100svh !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}
#starSeaHome > .group-back{
  z-index: 30 !important;
}
#starSeaHome .starsea-home-copy{
  color: #fff0c0 !important;
  text-shadow: 0 3px 14px rgba(0, 20, 45, 0.72) !important;
}
#starSeaHome .starsea-home-copy p{
  color: #f3fbff !important;
  text-shadow: 0 2px 10px rgba(0, 20, 45, 0.72) !important;
}
/* Donor source: css/ipad-elder-landscape-v52.css */
:root{
  --ocean-visual-height: 100dvh;
  --ocean-visual-width: 100vw;
}
html,
body{
  width: 100%;
  height: var(--ocean-visual-height, 100dvh);
  min-height: var(--ocean-visual-height, 100dvh);
  max-height: var(--ocean-visual-height, 100dvh);
  overflow: hidden;
}
img{
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
  user-select: none;
}
#starSeaHome .starsea-wave-track{
  display: block !important;
  position: absolute !important;
  inset: auto 0 0 0 !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1536 / 355;
  overflow: hidden !important;
  pointer-events: none !important;
  z-index: 4 !important;
  background: none !important;
  background-image: none !important;
}
#starSeaHome .starsea-wave-track::before,
#starSeaHome .starsea-wave-track::after{
  content: none !important;
  display: none !important;
  background: none !important;
}
#starSeaHome .starsea-wave-strip{
  display: flex !important;
  position: absolute !important;
  left: 0 !important;
  bottom: 0 !important;
  width: 200% !important;
  height: 100% !important;
  transform: translate3d(0, 0, 0);
  animation: oceanWaveLoopV52 18s linear infinite !important;
  will-change: transform;
}
#starSeaHome .starsea-wave-v52{
  display: block !important;
  position: static !important;
  flex: 0 0 50% !important;
  width: 50% !important;
  height: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  object-fit: contain !important;
  object-position: center bottom !important;
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
  filter: none !important;
}
#starSeaHome .starsea-wave-track > :not(.starsea-wave-strip){
  display: none !important;
}
#starSeaHome > .group-back{
  z-index: 40 !important;
  filter: drop-shadow(0 3px 10px rgba(0, 24, 52, 0.82));
}
@media (orientation: landscape) and (min-width: 700px) and (max-width: 1400px){html,
body,
.ocean-scene,
.group-system,
.group-screen{
    width: var(--ocean-visual-width, 100vw) !important;
    height: var(--ocean-visual-height, 100dvh) !important;
    min-height: var(--ocean-visual-height, 100dvh) !important;
    max-height: var(--ocean-visual-height, 100dvh) !important;
  }
body,
.ocean-scene,
.group-system{
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-color: #06365b !important;
  }
.ocean-scene,
.group-system,
.group-screen{
    padding: 0 !important;
  }
.shell-back,
.group-back{
    left: calc(18px + env(safe-area-inset-left)) !important;
    bottom: calc(16px + env(safe-area-inset-bottom)) !important;
  }
#starSeaHome{
    position: absolute !important;
    inset: 0 !important;
    width: var(--ocean-visual-width, 100vw) !important;
    height: var(--ocean-visual-height, 100dvh) !important;
    min-height: var(--ocean-visual-height, 100dvh) !important;
    max-height: var(--ocean-visual-height, 100dvh) !important;
  }
#starSeaHome .starsea-ocean-panel{
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    max-height: 100% !important;
    transform: none !important;
    border-radius: 0 !important;
    background-size: cover !important;
    background-position: center center !important;
  }
#starSeaHome .starsea-home-copy{
    top: 38% !important;
  }
#starSeaHome .starsea-home-copy h2{
    font-size: clamp(48px, 8dvh, 72px) !important;
  }
#starSeaHome .starsea-home-copy p{
    font-size: clamp(19px, 2.7dvh, 25px) !important;
  }
#starSeaHome .starsea-start-button{
    bottom: clamp(214px, 25vw, 288px) !important;
    z-index: 12 !important;
  }
#starSeaHome > .group-back{
    bottom: calc(clamp(188px, 23vw, 274px) + env(safe-area-inset-bottom)) !important;
  }}
@media (prefers-reduced-motion: reduce){#starSeaHome .starsea-wave-strip{
    animation-duration: 30s !important;
  }}
/* Donor source: css/ipad-layout-calibration-v53.css */
:root{
  --starsea-wave-overlap: 160px;
  --ocean-wave-strip-width: calc(200vw - var(--starsea-wave-overlap));
  --ocean-wave-cycle-x: calc(-100vw + var(--starsea-wave-overlap));
}
#starSeaHome .starsea-wave-strip{
  display: flex !important;
  width: var(--ocean-wave-strip-width) !important;
  height: 100% !important;
  gap: 0 !important;
  animation: oceanWaveLoopV53 18s linear infinite !important;
}
#starSeaHome .starsea-wave-v52{
  flex: 0 0 var(--ocean-visual-width, 100vw) !important;
  width: var(--ocean-visual-width, 100vw) !important;
  min-width: var(--ocean-visual-width, 100vw) !important;
  height: 100% !important;
}
#starSeaHome .starsea-wave-v52 + .starsea-wave-v52{
  margin-left: calc(-1 * var(--starsea-wave-overlap)) !important;
}
#starSeaHome > .group-back{
  bottom: calc(clamp(246px, 26vw, 330px) + env(safe-area-inset-bottom)) !important;
}
@media (prefers-reduced-motion: reduce){#starSeaHome .starsea-wave-strip{
    animation-duration: 30s !important;
  }}
/* Donor source: css/ipad-low-reading-v54.css */
#starSeaHome .starsea-home-star.star-yellow-left{
  top: auto !important;
  bottom: clamp(282px, 34dvh, 316px) !important;
}
#starSeaHome .starsea-home-star.star-orange-mid{
  top: auto !important;
  bottom: clamp(290px, 35dvh, 324px) !important;
}
#starSeaHome .starsea-home-star.star-orange-bottom{
  bottom: clamp(278px, 33dvh, 310px) !important;
}
@media (orientation: landscape) and (max-height: 560px){#starSeaHome .starsea-home-star.star-yellow-left{
    bottom: 270px !important;
  }
#starSeaHome .starsea-home-star.star-orange-mid{
    bottom: 278px !important;
  }
#starSeaHome .starsea-home-star.star-orange-bottom{
    bottom: 262px !important;
  }}
/* Donor source: css/ipad-layout-safety-v55.css */
:root{
  --ocean-v55-side-gap: max(18px, env(safe-area-inset-left));
  --ocean-v55-panel-gap: 24px;
  --ocean-v55-back-gutter: 108px;
}
#starSeaHome .starsea-home-copy{
  width: min(720px, 72vw) !important;
}
#starSeaHome .starsea-home-copy h2{
  margin-bottom: 10px !important;
}
#starSeaHome .starsea-home-subtitles{
  display: grid;
  gap: 2px;
}
#starSeaHome .starsea-home-subtitles p{
  margin: 0 !important;
  font-size: clamp(17px, 2.35dvh, 22px) !important;
  line-height: 1.2 !important;
  font-weight: 760 !important;
}
#starSeaHome .starsea-home-star.star-yellow-left{
  left: clamp(104px, 14vw, 190px) !important;
  right: auto !important;
}
#starSeaHome .starsea-home-star.star-orange-mid{
  left: clamp(258px, 28vw, 390px) !important;
  right: auto !important;
  top: auto !important;
  bottom: clamp(300px, 38dvh, 338px) !important;
}
#starSeaHome .starsea-home-star.star-orange-bottom{
  left: clamp(92px, 12vw, 160px) !important;
  right: auto !important;
  width: clamp(188px, 22vw, 230px) !important;
}
#starSeaHome .starsea-start-button{
  z-index: 14 !important;
}
@media (orientation: landscape) and (max-width: 860px){:root{
    --ocean-v55-back-gutter: 94px;
  }}
/* Donor source: css/ipad-dialog-legibility-v56.css */
.ocean-button,
.group-start-button{
  -webkit-appearance: none !important;
  appearance: none !important;
  -webkit-tap-highlight-color: transparent !important;
  background-color: transparent !important;
}
/* Donor source: css/ipad-touch-recovery-v57.css */
#starSeaHome .starsea-home-star.star-orange-bottom{
  top: auto !important;
  bottom: clamp(160px, 21dvh, 198px) !important;
  z-index: 7 !important;
}
@media (orientation: landscape) and (max-height: 560px){#starSeaHome .starsea-home-star.star-orange-bottom{
    bottom: 148px !important;
  }}
/* Donor source: css/ipad-interaction-safety-v59.css */
#starSeaHome .starsea-home-star{
  z-index: 9 !important;
}
#starSeaHome .starsea-home-star.star-orange-bottom{
  left: clamp(32px, 6vw, 86px) !important;
}
#starSeaHome .starsea-wave-track{
  z-index: 4 !important;
}
#starSeaHome > .group-back,
#starSeaHome .starsea-start-button{
  z-index: 30 !important;
}
/* Donor source: css/ipad-next-corrections-v60.css */
#starSeaHome .starsea-home-star.star-orange-bottom{
  top: auto !important;
  bottom: clamp(128px, 18dvh, 170px) !important;
  z-index: 10 !important;
}
#starSeaHome .starsea-wave-track{
  z-index: 4 !important;
}
@media (orientation: landscape) and (max-height: 560px){#starSeaHome .starsea-home-star.star-orange-bottom{
    bottom: 124px !important;
  }}
/* Donor source: css/ipad-orange-star-right-v61.css */
#starSeaHome .starsea-home-star.star-orange-bottom{
  left: clamp(138px, 15vw, 210px) !important;
  right: auto !important;
  z-index: 10 !important;
}
/* Donor source: css/ipad-second-corrections-v62.css */
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto !important;}}
/* Donor source: css/font-unified-r64.css */
@font-face{
  font-family: "OceanChinese";
  src: local("UoqMunThenKhung-Regular"),
       url("https://cdn.jsdelivr.net/gh/MoonlitOwen/ThenKhung@main/fonts/ttf/UoqMunThenKhung-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face{
  font-family: "OceanChinese";
  src: local("UoqMunThenKhung-Regular"),
       url("https://cdn.jsdelivr.net/gh/MoonlitOwen/ThenKhung@main/fonts/ttf/UoqMunThenKhung-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}
@font-face{
  font-family: "OceanChinese";
  src: local("UoqMunThenKhung-Regular"),
       url("https://cdn.jsdelivr.net/gh/MoonlitOwen/ThenKhung@main/fonts/ttf/UoqMunThenKhung-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}
@font-face{
  font-family: "OceanChinese";
  src: local("UoqMunThenKhung-Regular"),
       url("https://cdn.jsdelivr.net/gh/MoonlitOwen/ThenKhung@main/fonts/ttf/UoqMunThenKhung-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}
@font-face{
  font-family: "OceanChinese";
  src: local("UoqMunThenKhung-Regular"),
       url("https://cdn.jsdelivr.net/gh/MoonlitOwen/ThenKhung@main/fonts/ttf/UoqMunThenKhung-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 800;
  font-display: swap;
}
@font-face{
  font-family: "OceanChinese";
  src: local("UoqMunThenKhung-Regular"),
       url("https://cdn.jsdelivr.net/gh/MoonlitOwen/ThenKhung@main/fonts/ttf/UoqMunThenKhung-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 900;
  font-display: swap;
}
html,
body,
button,
h2,
p,
span,
div,
[lang="zh"],
[lang="zh-TW"],
[lang="zh-Hant"]{
  font-synthesis: none;
}
:root{
  --font-zh: "OceanChinese", "UoqMunThenKhung-Regular", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  --font-other: "Dreaming Outloud Sans", "Arial Rounded MT Bold", "Trebuchet MS", Arial, sans-serif;
  --starsea-font-zh: var(--font-zh);
  --starsea-font-other: var(--font-other);
}
html,
body,
button,
h2,
p,
span,
div,
[lang="zh"],
[lang="zh-TW"],
[lang="zh-Hant"]{
  font-family: var(--font-zh) !important;
}
[lang="en"],
[lang="en-US"],
[lang="id"],
[lang="vi"],
.start-lang{
  font-family: var(--font-other) !important;
}
#starSeaHome h2,
#starSeaHome button,
.group-screen button{
  font-family: var(--font-zh) !important;
}
#starSeaHome [lang="en"],
#starSeaHome [lang="id"],
#starSeaHome [lang="vi"],
.group-screen [lang="en"],
.group-screen [lang="id"],
.group-screen [lang="vi"]{
  font-family: var(--font-other) !important;
}
/* Donor source: css/memory-starsea-a103-cleanup.css */
#starSeaHome .starsea-wave-track{
  
  height: clamp(148px, 15.02vw, 278px) !important;
  aspect-ratio: auto !important;
}
#starSeaHome .starsea-wave-v52{
  height: 100% !important;
  object-fit: fill !important;
  object-position: center bottom !important;
}
.starsea-wave-desktop-extra{
  display: none !important;
}
@media (min-width: 768px){#starSeaHome .starsea-wave-track{
    --starsea-rf11-tile-width: clamp(640px, 65vw, 1203px);
    --starsea-rf11-step: calc(var(--starsea-rf11-tile-width) - 160px);
  }
#starSeaHome .starsea-wave-strip{
    width: max-content !important;
    height: 100% !important;
    align-items: flex-end !important;
    animation: oceanWaveLoopRF11 18s linear infinite !important;
  }
#starSeaHome .starsea-wave-v52{
    display: block !important;
    flex: 0 0 var(--starsea-rf11-tile-width) !important;
    width: var(--starsea-rf11-tile-width) !important;
    min-width: var(--starsea-rf11-tile-width) !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: center bottom !important;
  }
#starSeaHome .starsea-wave-desktop-extra{
    display: block !important;
  }}
@keyframes groupStarFloat{
  0%,100%{transform:translateY(0) rotate(-5deg);}
  50%{transform:translateY(-14px) rotate(-1deg);}
}
@keyframes starseaWaveBgA{
  from{ background-position:0 100%; }
  to{ background-position:760px 100%; }
}
@keyframes oceanWaveLoopV52{
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}
@keyframes oceanWaveLoopV53{
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(var(--ocean-wave-cycle-x), 0, 0);
  }
}
@keyframes oceanWaveLoopRF11{
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(calc(160px - var(--starsea-rf11-tile-width)), 0, 0); }
}
