@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;
}
:root{
  color-scheme:dark;
  --ink:#f8f2e7;--muted:#cdd8e7;--sea:#06182d;--deep:#020a17;
  --glass:rgba(7,30,57,.72);--line:rgba(255,255,255,.17);--gold:#efd09b;
  --blue:#80c7ff;--radius:30px;
  --font-ocean:"OceanChinese","UoqMunThenKhung-Regular","Noto Sans TC","PingFang TC","Microsoft JhengHei",serif;
  font-family:var(--font-ocean);
}
*{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;background:var(--deep);color:var(--ink);min-height:100vh;overflow-x:hidden}
button,a{font:inherit;font-family:var(--font-ocean)} button{color:inherit}.shell{min-height:100vh;position:relative;isolation:isolate}
.bg{position:fixed;inset:0;z-index:-3;background:#041225 url('../portal-assets/starsea-entry-bg.jpeg') center/cover no-repeat}
.bg:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(1,7,19,.28),rgba(2,12,28,.74) 52%,#031020 100%)}
.ambient{position:fixed;inset:0;z-index:-2;pointer-events:none;background:radial-gradient(circle at 50% 22%,rgba(84,154,232,.13),transparent 28%),radial-gradient(circle at 18% 60%,rgba(117,88,226,.10),transparent 25%)}
.portal-header{position:fixed;z-index:50;top:max(14px,env(safe-area-inset-top));left:max(16px,env(safe-area-inset-left));right:max(16px,env(safe-area-inset-right));display:flex;justify-content:space-between;align-items:center;gap:14px;pointer-events:none}
.brand,.progress-pill{pointer-events:auto;border:1px solid var(--line);background:rgba(3,14,31,.62);backdrop-filter:blur(16px);border-radius:999px;padding:10px 14px;font-size:13px;letter-spacing:.06em}.brand{font-weight:800}.progress-pill{color:var(--muted)}
main{width:min(1120px,100%);margin:auto}.scene{min-height:100svh;padding:110px max(24px,env(safe-area-inset-right)) 64px max(24px,env(safe-area-inset-left));display:grid;place-items:center;position:relative}
.hero-inner{text-align:center;width:min(820px,100%)}.eyebrow{letter-spacing:.19em;font-size:12px;color:#d7e8ff;text-transform:uppercase}.hero h1{margin:.2em 0 .08em;font-family:var(--font-ocean);font-size:clamp(48px,9vw,96px);font-weight:500;letter-spacing:.04em}.tagline{font-size:clamp(18px,2.4vw,26px);line-height:1.7;color:#e0e9f5;margin:0 auto 28px}
.touch-stage{position:relative;height:310px;display:grid;place-items:center;margin-top:8px}.experience-star{width:clamp(108px,21vw,168px);aspect-ratio:1;border:0;background:transparent;cursor:pointer;position:relative;display:grid;place-items:center;filter:drop-shadow(0 0 22px rgba(255,255,255,.2));transition:transform .35s ease,filter .35s ease}.experience-star img{width:100%;height:100%;object-fit:contain}.experience-star:focus-visible{outline:3px solid var(--gold);outline-offset:8px;border-radius:50%}.experience-star:hover{transform:scale(1.05);filter:drop-shadow(0 0 34px rgba(208,231,255,.7))}.experience-star.touched{animation:starPulse 1.15s ease forwards}.experience-star.touched img{animation:starSink 1.5s .42s cubic-bezier(.3,.1,.2,1) forwards}.ripple{position:absolute;border:1px solid rgba(164,213,255,.64);border-radius:50%;width:60px;height:22px;opacity:0;pointer-events:none}.ripple.go{animation:ripple 1.9s ease-out forwards}.ripple.r2{animation-delay:.18s}.ripple.r3{animation-delay:.36s}.prompt{margin-top:-28px;color:#f6ecd8;font-size:16px}.skip{border:0;background:none;color:#adc4df;text-decoration:underline;text-underline-offset:4px;cursor:pointer;margin-top:12px}.experience-message{min-height:42px;color:#f7dcb0;font-family:var(--font-ocean);font-size:clamp(20px,3vw,30px);opacity:0;transform:translateY(8px);transition:.65s ease}.experience-message.show{opacity:1;transform:none}
.journeys{align-items:center}.section-head{text-align:center;max-width:760px;margin:0 auto 32px}.section-head h2,.sea-copy h2{font-family:var(--font-ocean);font-size:clamp(34px,6vw,62px);font-weight:500;margin:.2em 0}.section-head p,.sea-copy p{color:var(--muted);line-height:1.8}.journey-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;width:min(980px,100%)}.journey-card{position:relative;overflow:hidden;min-height:390px;padding:30px;border:1px solid var(--line);border-radius:var(--radius);background:linear-gradient(155deg,rgba(9,39,73,.82),rgba(5,21,43,.76));box-shadow:0 22px 70px rgba(0,0,0,.25);display:flex;flex-direction:column}.journey-card:before{content:"";position:absolute;inset:auto -30% -50% -30%;height:70%;background:radial-gradient(ellipse,rgba(91,170,245,.16),transparent 60%);pointer-events:none}.journey-icon{width:90px;height:90px;object-fit:contain;filter:drop-shadow(0 0 20px rgba(255,255,255,.25))}.journey-card h3{font-size:27px;margin:16px 0 6px}.journey-kicker{color:#a8cbed;font-size:13px;letter-spacing:.09em;text-transform:uppercase}.journey-card p{line-height:1.75;color:#d8e3ef;margin:0 0 20px}.facts{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px}.facts span{font-size:12px;padding:7px 10px;border-radius:999px;background:rgba(255,255,255,.08);color:#dbe8f8}.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:auto}.cta{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 18px;border-radius:999px;text-decoration:none;border:1px solid rgba(255,255,255,.18);font-weight:800;cursor:pointer}.cta.primary{background:var(--gold);color:#18344d;border-color:transparent}.cta.secondary{background:rgba(255,255,255,.07);color:#edf5ff}.device-note{font-size:12px;color:#9eb4ca;margin-top:13px}

/* V80.1.4 — Personal Journey uses only existing Single Mode assets; no generated artwork. */
.single-preview{margin:18px 0 22px;height:148px;border-radius:22px;overflow:hidden;border:1px solid rgba(255,255,255,.11);background:#06365b url('../portal-assets/single-preview-bg.png') center/cover no-repeat;position:relative;box-shadow:inset 0 0 0 1px rgba(5,27,50,.12),0 12px 30px rgba(0,0,0,.18)}
.single-preview:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(2,26,52,.08),rgba(2,18,39,.34));pointer-events:none}
.single-preview-head{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:center;padding:10px 14px 0;color:#fff2bf;font-size:11px;letter-spacing:.08em}
.single-preview-body{position:relative;z-index:2;height:72px;display:flex;align-items:center;justify-content:center;gap:15px;padding:4px 18px 0}
.single-preview-star{width:56px;height:56px;object-fit:contain;filter:drop-shadow(0 0 12px rgba(255,236,109,.88))}
.single-preview-copy{font-size:18px;color:#fff2c4;text-shadow:0 2px 9px rgba(0,20,45,.72)}
.single-preview-actions{position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:0 12px 10px}
.single-preview-actions span{height:34px;display:grid;place-items:center;background:transparent url('../portal-assets/single-preview-button.png') center/100% 100% no-repeat;color:#fff8e8;font-size:12px;font-weight:800;text-shadow:0 1px 4px rgba(0,20,45,.8)}

.mini-demo{margin:18px 0 22px;height:116px;border-radius:22px;background:rgba(2,13,30,.54);border:1px solid rgba(255,255,255,.09);position:relative;overflow:hidden}.demo-bag{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);width:84px;height:48px;border:3px solid rgba(237,208,155,.7);border-top:0;border-radius:0 0 28px 28px}.demo-star{position:absolute;font-size:22px;text-shadow:0 0 12px currentColor;animation:floatStar 5s ease-in-out infinite}.demo-star:nth-child(1){left:13%;top:18%;animation-delay:-.3s}.demo-star:nth-child(2){left:31%;top:50%;animation-delay:-1.4s}.demo-star:nth-child(3){right:28%;top:20%;animation-delay:-2.2s}.demo-star:nth-child(4){right:10%;top:48%;animation-delay:-3.1s}
.shared-sea{padding-top:160px;padding-bottom:130px}.sea-panel{width:min(820px,100%);min-height:430px;margin:34px auto 0;border-radius:30px;overflow:hidden;border:1px solid var(--line);background:rgba(3,17,38,.68) url('../portal-assets/starsea-entry-bg.jpeg') center bottom/cover no-repeat;position:relative;box-shadow:0 24px 72px rgba(0,0,0,.30)}.sea-copy{position:relative;z-index:3;padding:34px 38px 24px;text-align:center;max-width:660px;margin:auto}.shared-sea .sea-copy h2{font-size:clamp(32px,5vw,50px);line-height:1.08}.shared-sea .sea-copy p{font-size:14px;line-height:1.7}.sea-field{position:absolute;inset:138px 0 0}.sea-star{position:absolute;display:grid;place-items:center;width:46px;height:46px;background-size:contain;background-position:center;background-repeat:no-repeat;filter:drop-shadow(0 0 13px rgba(255,255,255,.5));animation:seaFloat 4.5s ease-in-out infinite}.sea-star.personal{background-image:url('../portal-assets/personal-star.png')}.sea-star.community{background-image:url('../portal-assets/community-star.png')}.sea-star.visitor{background-image:url('../portal-assets/personal-star.png');filter:drop-shadow(0 0 20px rgba(241,208,155,.95));width:54px;height:54px}.legend{position:absolute;z-index:4;left:24px;right:24px;bottom:22px;display:flex;gap:10px;justify-content:center;flex-wrap:wrap}.legend span{padding:7px 11px;border-radius:999px;background:rgba(2,12,28,.72);border:1px solid rgba(255,255,255,.12);font-size:12px}.privacy-strip{margin:28px auto 0;max-width:850px;text-align:center;color:#aebfd1;line-height:1.7;font-size:13px}.runtime-strip{margin-top:28px;display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
.sheet{position:fixed;z-index:80;inset:0;display:none;place-items:end center;background:rgba(0,5,13,.62);padding:24px}.sheet.open{display:grid}.sheet-card{width:min(760px,100%);border:1px solid var(--line);border-radius:28px;background:#071b34;padding:28px;box-shadow:0 30px 90px rgba(0,0,0,.5)}.sheet-card h3{margin:0 0 8px;font-size:28px}.sheet-card p{color:var(--muted);line-height:1.75}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:20px 0}.step{padding:16px;border-radius:18px;background:rgba(255,255,255,.06);text-align:center}.step strong{display:block;margin-bottom:5px}.close-sheet{width:100%;min-height:48px;border-radius:999px;background:var(--gold);color:#173650;border:0;font-weight:800;cursor:pointer}
@keyframes starPulse{35%{transform:scale(1.16);filter:drop-shadow(0 0 48px rgba(255,255,255,.92))}100%{transform:scale(1)}}@keyframes starSink{0%{transform:translateY(0) scale(1);opacity:1}70%{transform:translateY(102px) scale(.58);opacity:.78}100%{transform:translateY(135px) scale(.32);opacity:0}}@keyframes ripple{0%{opacity:.8;transform:scale(.45)}100%{opacity:0;transform:scale(7)}}@keyframes floatStar{50%{transform:translateY(20px) scale(.8);opacity:.65}}@keyframes seaFloat{50%{transform:translateY(-8px) scale(1.05)}}
@media(max-width:760px){.portal-header{align-items:flex-start}.progress-pill{display:none}.scene{padding-top:92px}.hero h1{font-size:52px}.touch-stage{height:280px}.journey-grid{grid-template-columns:1fr}.journey-card{min-height:350px;padding:24px}.sea-panel{min-height:500px;margin-top:18px}.sea-copy{padding:30px 22px 22px}.single-preview{height:158px}.single-preview-copy{font-size:16px}.single-preview-actions span{font-size:11px}.steps{grid-template-columns:1fr}.sheet{padding:12px}.sheet-card{padding:22px}.runtime-strip .cta{width:100%}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.experience-star.touched img{opacity:.2}}