:root { color-scheme: light; font-family: "Inter", "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; color: #10234d; background: #edf5ff; -webkit-font-smoothing: antialiased; }
* { box-sizing: border-box; }
body { margin: 0; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
.home-header { height: 72px; padding: 0 clamp(24px, 4vw, 64px); display: flex; justify-content: space-between; align-items: center; background: #fff; border-bottom: 1px solid #dce9fa; position: relative; z-index: 2; }
.home-logo { width: 210px; height: 44px; overflow: hidden; position: relative; }
.home-logo img { width: 225px; height: auto; display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.home-account { display: flex; align-items: center; gap: 16px; font-size: 12px; color: #687b9d; }
.login-trigger { border: 1px solid #cfe1fc; border-radius: 10px; color: #176cf1; background: #f4f8ff; padding: 9px 24px; font-size: 12px; font-weight: 600; }
.login-trigger:hover { background: #e4efff; }
.universe { position: relative; isolation: isolate; height: calc(100svh - 72px); min-height: 660px; overflow: hidden; background: radial-gradient(ellipse at 50% 43%, #ccdcff 0, #dceaff 30%, #e7f2ff 58%, #f3f8ff 100%); }
.universe::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at 38% 26%, #d7e5ff88, transparent 47%), radial-gradient(ellipse at 75% 70%, #b5d9ff30, transparent 50%); }
#galaxy { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.orbital-ring { position: absolute; width: min(51vw, 720px); height: min(51vw, 720px); top: 43%; left: 50%; transform: translate(-50%, -50%) rotate(-24deg) scaleY(.76); border: 1px solid #539aff0b; border-radius: 50%; box-shadow: 0 0 0 65px #539aff03, 0 0 0 130px #539aff02; pointer-events: none; }
.galaxy-title { position: absolute; top: 40%; left: 0; right: 0; margin: 0; padding: 0 clamp(30px, 5vw, 88px); display: flex; justify-content: space-between; align-items: center; font-size: clamp(32px, 3.5vw, 60px); font-weight: 500; line-height: 1.2; letter-spacing: -.055em; pointer-events: none; }
.title-left { color: #183562; }
.title-right { color: #176cf1; }
.title-dot { color: #60b3ff; }
.galaxy-caption { position: absolute; left: 50%; bottom: 166px; transform: translateX(-50%); display: flex; align-items: center; gap: 16px; font-size: 11px; letter-spacing: .3em; color: #7891b5; white-space: nowrap; pointer-events: none; }
.galaxy-caption > span { width: 28px; height: 1px; background: #aec9ed; }
.home-action { position: absolute; bottom: 85px; left: 0; right: 0; display: flex; justify-content: center; }
.enter-prediction { display: inline-flex; align-items: center; justify-content: center; gap: 30px; min-width: 196px; height: 52px; padding: 0 28px; background: linear-gradient(110deg, #1268ff, #218bff); border: 1px solid #1976ff; border-radius: 12px; color: #fff; font-size: 14px; font-weight: 600; letter-spacing: .05em; box-shadow: 0 7px 24px #1873ff2c, inset 0 1px 0 #ffffff30; transition: transform .2s, box-shadow .2s; }
.enter-prediction:hover { transform: translateY(-3px); box-shadow: 0 12px 32px #1873ff40; }
.enter-prediction svg { transition: transform .2s; }
.enter-prediction:hover svg { transform: translateX(4px); }
a:focus-visible, button:focus-visible { outline: 3px solid #639eff; outline-offset: 5px; border-radius: 12px; }
.home-footer { position: absolute; bottom: 24px; left: 16px; right: 16px; text-align: center; color: #8b9cba; font-size: 9px; letter-spacing: .12em; }
.login-dialog { width: min(420px, calc(100% - 32px)); padding: 30px 32px 34px; border: 1px solid #e0ebfa; border-radius: 20px; color: #10234d; background: #fff; box-shadow: 0 24px 90px #17427e25; }
.login-dialog::backdrop { background: #15356038; backdrop-filter: blur(9px); }
.dialog-close { position: absolute; right: 15px; top: 12px; width: 30px; height: 30px; border: 0; background: #f2f7ff; border-radius: 9px; color: #687b9d; font-size: 23px; }
.dialog-logo { width: 155px; height: 37px; position: relative; overflow: hidden; margin: 0 auto 24px; }
.dialog-logo img { width: 170px; height: auto; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.login-dialog h2 { margin: 0 0 9px; font-size: 26px; letter-spacing: -.03em; }
.login-dialog p { font-size: 12px; color: #687b9d; line-height: 1.7; margin: 0 0 24px; }
.login-dialog label { display: block; font-size: 12px; font-weight: 600; margin-bottom: 8px; }
.login-dialog input { width: 100%; height: 44px; border: 1px solid #dce8fa; background: #f5f9ff; border-radius: 9px; padding: 0 13px; color: #10234d; margin-bottom: 20px; font-size: 14px; }
.login-dialog input:focus { outline: 2px solid #1878ff20; border-color: #69a6ff; }
.login-dialog .login-error { margin: 0 0 16px; color: #b91c1c; background: #fff1f2; padding: 10px 12px; border-radius: 8px; }
.login-submit { width: 100%; height: 46px; }
.login-submit:disabled { opacity: .6; cursor: wait; transform: none; }
.home-notice { position: fixed; bottom: 24px; right: 24px; z-index: 10; max-width: calc(100% - 48px); padding: 12px 18px; background: #fff; border: 1px solid #d6e7ff; border-radius: 12px; box-shadow: 0 8px 28px #17427e18; color: #245da6; font-size: 13px; }
@media (min-width: 1600px) { .galaxy-title { padding-inline: 8vw; } }
@media (max-width: 760px) {
  .home-header { height: 64px; padding-inline: 22px; }
  .home-logo { width: 164px; height: 40px; }
  .home-logo img { width: 176px; }
  .home-account { gap: 10px; }
  .home-account > span { max-width: 70px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .login-trigger { padding-inline: 18px; }
  .universe { height: calc(100svh - 64px); min-height: 580px; }
  .galaxy-title { top: 9%; font-size: clamp(28px, 6vw, 44px); padding-inline: 26px; }
  .orbital-ring { width: 80vw; height: 80vw; }
  .galaxy-caption { bottom: 152px; }
  .home-action { bottom: 76px; }
  .home-footer { font-size: 8px; letter-spacing: .04em; }
}
@media (max-height: 700px) and (min-width: 761px) { .universe { min-height: 520px; } .home-action { bottom: 64px; } .galaxy-caption { bottom: 135px; } }
@media (prefers-reduced-motion: reduce) { .enter-prediction, .enter-prediction svg { transition: none; } }

.language-trigger { padding-inline: 13px; min-width: 46px; }
.galaxy-caption b { font-weight: 400; }
@media (max-width: 480px) { .home-header { padding-inline: 12px; } .home-logo { width: 138px; } .home-logo img { width: 150px; } .home-account { gap: 7px; } .login-trigger { padding-inline: 12px; } .home-account > span { max-width: 48px; } .galaxy-caption { letter-spacing: .12em; gap: 10px; } }