/* Native account UI: preserve native light/dark theme, routes and interactions. */
#account-frame{font-family:var(--font)}.account-topbar{height:44px;background:#17233a;color:#dde7ff;display:flex;align-items:center;gap:24px;padding:0 24px;font-family:var(--font);font-size:11px}.account-topbar a{color:inherit;text-decoration:none}.account-topbar>a:last-child{margin-left:auto}.account-brand{display:flex;align-items:center;gap:7px;font-weight:650;font-size:21px;letter-spacing:-1px}.account-brand span{margin-left:-5px;color:#ccdafa}#account-frame #app{height:calc(100dvh - 44px)}#account-frame .n-card{border-radius:12px!important}#account-frame .n-button{border-radius:6px!important}#account-frame .n-menu-item-content{border-radius:6px!important}#account-frame .n-layout-sider{border-right:1px solid #8baba933}#account-frame article>header{box-shadow:0 1px 0 #8baba92b}#account-frame .n-card-header__main{font-weight:600!important;letter-spacing:-.3px}.dark #account-frame .n-layout{--n-color:#101827!important}.dark #account-frame .n-layout-sider,.dark #account-frame .n-card{--n-color:#1b2639!important;--n-border-color:#34435b!important}.dark #account-frame article>header{background:#1b2639!important}.dark #account-frame .n-menu{--n-item-text-color-active:#ccdcff!important;--n-item-icon-color-active:#ccdcff!important;--n-item-color-active:#2c4270!important;--n-item-color-active-hover:#345084!important}.dark #account-frame .n-layout-sider h2{color:#ccdafa!important}#app-error{padding:30px;text-align:center;font-family:var(--font);background:#f5f7fb;color:#17233a}
#account-frame article>section{background:#f5f7fb!important}.dark #account-frame article>section{background:#101827!important}.dark #account-frame .n-list{--n-color:#1b2639!important;--n-border-color:#34435b!important}#account-frame .n-card.max-w-md img[src$="/brand/mark.svg"]{width:64px;height:64px;display:block;margin:0 auto 22px}#account-frame .n-card.max-w-md{overflow:hidden;box-shadow:0 20px 90px #001e2522!important}#account-frame .n-card.max-w-md .n-button--primary-type{--n-color:#ccdcff!important;--n-color-hover:#dce7ff!important;--n-color-pressed:#aec6ff!important;--n-text-color:#142646!important;--n-text-color-hover:#142646!important;--n-text-color-pressed:#142646!important;--n-border:1px solid transparent!important;--n-border-hover:1px solid transparent!important;--n-border-pressed:1px solid transparent!important}#account-frame a[href="#/register"],#account-frame a[href="#/forgetpassword"],#account-frame :has(>a[href="#/register"])>.n-divider{display:none!important}#account-frame :has(>a[href="#/register"])::before{content:"邀请制 · 获取账号或找回密码请联系邀请人";font-size:11px;color:#4b576b;line-height:1.8;display:block;padding-right:18px}.dark #account-frame :has(>a[href="#/register"])::before{color:#bdcae1}#account-frame .n-card.max-w-md h5{font-size:15px;font-weight:500}.dark #account-frame .n-card.max-w-md h5{color:#dde7ff}

:root {
  --ink: #192536;
  --muted: #526175;
  --accent: #2854c5;
  --line: #d8dfeb;
  --surface: #f6f8fc;
  --font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; }
[hidden] { display: none !important; }
#portal, #invite-dialog { font: 1rem/1.65 var(--font); color: var(--ink); }
#portal { background: #fff; }
#portal a, #invite-dialog a { color: var(--accent); text-decoration: none; }
#portal a:hover, #invite-dialog a:hover { text-decoration: underline; }
#portal button, #invite-dialog button { font: inherit; cursor: pointer; }
#portal :focus-visible, #invite-dialog :focus-visible { outline: 3px solid #4780ff; outline-offset: 3px; }
.wrap { width: min(74rem, calc(100% - 5rem)); margin-inline: auto; }
.site-header { border-bottom: 1px solid var(--line); }
.header-inner, .desktop-nav, .actions, .section-head { display: flex; align-items: center; gap: 1.25rem; }
.header-inner { min-height: 4.75rem; }
#portal .wordmark { display: inline-flex; align-items: center; gap: .6rem; font-weight: 700; font-size: 1.55rem; letter-spacing: -.04em; color: var(--ink); }
.desktop-nav { margin-left: auto; gap: 1.75rem; }
#portal .desktop-nav a { color: var(--muted); }
.header-login, .desktop-nav, #mobile-nav { font-size: .9rem; }
.header-login { font-weight: 600; margin-left: 1rem; }
.mobile-toggle { display: none; }
.hero { display: grid; grid-template-columns: 1fr 1.23fr; gap: 2rem; align-items: center; padding: 3rem 0; }
.hero-copy { padding-left: .5rem; }
#portal h1, #portal h2, #portal h3, #invite-dialog h2 { color: var(--ink); margin: 0; line-height: 1.24; }
#portal h1 { font-size: clamp(2.75rem,5.4vw,4.7rem); font-weight: 620; letter-spacing: -.045em; }
.hero-copy p { margin: 1.4rem 0 1.85rem; color: var(--muted); font-size: 1.075rem; line-height: 1.85; }
#portal .primary, #invite-dialog .primary, .secondary { padding: .78rem 1.15rem; display: inline-flex; align-items: center; gap: 1.2rem; font-weight: 600; border-radius: .65rem; font-size: .9375rem; line-height: 1.5; }
#portal .primary, #invite-dialog .primary { color: white; background: var(--accent); }
#portal .primary:hover, #invite-dialog .primary:hover { background: #2045a4; text-decoration: none; }
.secondary { color: var(--ink); border: 1px solid var(--line); background: #fff; }
.secondary:hover { background: var(--surface); }
.actions { flex-wrap: wrap; gap: .65rem; }
.world { position: relative; isolation: isolate; margin: 0; overflow: hidden; border-radius: 1.6rem; background: radial-gradient(at 65% 25%,#253d82,#101b3b 75%); }
.world::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .12; background: url("./brand/ocean.webp") center/cover; }
.world canvas { display: block; width: 100%; height: clamp(21rem,34vw,29rem); touch-action: pan-y; cursor: grab; }
.world canvas:active { cursor: grabbing; }
.world figcaption { display: flex; justify-content: space-between; align-items: center; padding: 0 1.35rem 1rem; font-size: .8125rem; color: #dfebff; }
.world button { min-height: 2.25rem; padding: .22rem .85rem; border-radius: 2rem; border: 1px solid #7b91ba; background: #192c56; color: white; }
.section-head { justify-content: space-between; }
#portal h2, #invite-dialog h2 { font-size: clamp(1.55rem,2.4vw,2.2rem); font-weight: 610; }
#portal h3 { font-size: 1.125rem; font-weight: 600; }
.guide { padding: 2.75rem; background: var(--surface); border-radius: 1.3rem; }
.guide a, .faq a { font-size: .9rem; font-weight: 550; }
.steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 2.25rem; padding: 0; margin: 2.25rem 0 0; counter-reset: step; list-style: none; }
.steps li { counter-increment: step; }
.steps li::before { content: counter(step); display: grid; place-items: center; width: 1.75rem; height: 1.75rem; margin-bottom: 1rem; border-radius: 50%; background: #e1eaff; color: #264999; font-weight: 650; font-size: .875rem; }
.steps p, .faq p, #invite-dialog p { color: var(--muted); line-height: 1.85; margin: .7rem 0 0; }
.faq { padding: 4.5rem 0; display: grid; grid-template-columns: 1fr 1.8fr; gap: 2.5rem; }
.faq h2 { margin-bottom: 1.1rem !important; }
details { border-bottom: 1px solid var(--line); padding: 1rem 0; }
details:first-child { border-top: 1px solid var(--line); }
summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 1rem; font-weight: 550; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; color: var(--accent); }
details[open] summary::after { content: "−"; }
#portal footer { border-top: 1px solid var(--line); padding-block: 1.6rem; font-size: .875rem; color: var(--muted); }
footer a { float: right; }
#invite-dialog { padding: 2.25rem; max-width: min(28rem,90vw); border: 0; border-radius: 1rem; box-shadow: 0 20px 90px #16223a40; }
#invite-dialog::backdrop { background: #101a3099; }
#invite-dialog form button { float: right; border: 0; background: none; color: var(--muted); font-size: 1.5rem; }
#invite-dialog .primary { margin-top: 1.5rem; }
.skip-link { position: fixed; top: -100px; left: 1rem; z-index: 10; background: white; color: var(--ink); padding: .6rem; }
.skip-link:focus { top: 4px; }
@media(max-width: 760px) {
  .wrap { width: calc(100% - 2.5rem); }
  .header-inner { min-height: 4rem; gap: .5rem; }
  .desktop-nav { display: none; }
  .header-login { margin-left: auto; }
  .mobile-toggle { display: block; border: 0; background: transparent; padding: .55rem; color: var(--ink); }
  #mobile-nav { padding: .5rem 1.25rem 1rem; }
  #mobile-nav a { margin-right: 1.5rem; }
  .hero { grid-template-columns: 1fr; padding: 2.3rem 0; gap: 1.6rem; }
  .hero-copy { padding: 0; }
  .world canvas { height: clamp(16rem,65vw,23rem); }
  .guide { padding: 1.5rem; }
  .steps, .faq { grid-template-columns: 1fr; gap: 1.5rem; }
  .steps { margin-top: 1.5rem; }
  .steps li { padding-left: 2.5rem; position: relative; }
  .steps li::before { position: absolute; left: 0; top: 0; }
  .faq { padding: 2.75rem 0; }
}

/* Anchor the two static studies to the page edges, clear of the login form. */
#account-frame .wh-full:has(> .max-w-md input[type="password"]) {
  --login-paper: #f1f3f7;
  background-color: var(--login-paper);
  background-image: url("./brand/planes.svg"), url("./brand/grid.svg");
  background-position: right top, left bottom;
  background-size: min(42vw, 680px) auto, min(36vw, 560px) auto;
  background-repeat: no-repeat;
}
.dark #account-frame .wh-full:has(> .max-w-md input[type="password"]) {
  --login-paper: #121927;
}
@media (max-width: 640px) {
  #account-frame .wh-full:has(> .max-w-md input[type="password"]) {
    background-size: 58vw auto, 51vw auto;
  }
}