/* Inline account card: only the illustration area changes. */
.hero-visual{position:relative;max-width:558px;width:100%;justify-self:end;display:grid;align-items:center;min-width:0}
.hero-visual>.hero-art,.hero-account{grid-area:1/1}
.hero-account{position:relative;z-index:2;width:calc(100% - 24px);max-width:432px;justify-self:center;padding:29px 32px 23px;background:#fffefa;border:1px solid #e2ded5;border-radius:24px;box-shadow:0 10px 28px #302d2306,0 2px 5px #302d2303;font-family:var(--sans);color:#292923;scroll-margin-top:110px}
.hero-visual.is-account-open>.hero-art{visibility:hidden;pointer-events:none}
.ha-close{position:absolute;top:12px;right:12px;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;color:#8c877c}
.ha-close svg{width:16px;height:16px}.ha-close:hover{background:#f1eee7;color:#38392e}
.ha-header{text-align:center;margin-bottom:24px}.ha-header>img{width:32px;height:32px;margin:0 auto 13px}
.hero-account .ha-header h2{font:700 26px/1.3 var(--sans);letter-spacing:-.045em;margin:0;outline-offset:5px}.ha-header>p{font-size:12px;line-height:1.75;color:#82796a;margin-top:8px;overflow-wrap:anywhere}
.hero-account form{display:flex;flex-direction:column}.hero-account label{font-size:12px;font-weight:500;line-height:1.5;margin-bottom:6px;color:#625d52}
.hero-account input{font:400 14px/1.5 var(--sans);width:100%;min-width:0;height:46px;padding:11px 12px;border:1px solid #ded9cf;background:#fffefa;border-radius:9px;color:#34352f;margin:0 0 16px;transition:border-color .15s,box-shadow .15s;box-sizing:border-box}
.hero-account input::placeholder{color:#a69c8d;font-size:12px}.hero-account input:focus{outline:none;border-color:#aa8467;box-shadow:0 0 0 3px #c4997920}
.ha-password{position:relative}.ha-password input{padding-right:58px}.ha-password button{position:absolute;right:4px;top:4px;height:38px;min-width:44px;font-size:11px;color:#89785f;border-radius:6px}.ha-password button:hover{background:#f3efe6}
.hero-account .ha-submit{width:100%;display:block;min-height:46px;padding:10px 16px;border:1px solid #292923;border-radius:9px;background:#292923;color:#fffefa;font-size:13px;font-weight:600;line-height:1.6;text-align:center}.ha-submit:hover{background:#424338}.hero-account button:disabled{opacity:.65;cursor:wait}.hero-account button:active{transform:translateY(1px)}
.ha-switch{text-align:center;color:#938675;font-size:12px;margin:18px 0 0;line-height:1.8}.ha-switch button,.ha-verify-actions button,.ha-logout{font-size:12px;color:#856342;padding:4px 3px}.ha-switch button:hover,.ha-verify-actions button:hover,.ha-logout:hover{text-decoration:underline;text-underline-offset:4px}
.ha-environment{font-size:10px;line-height:1.8;color:#968b7b;text-align:center;border-top:1px solid #ece7de;padding-top:14px;margin-top:18px}
.ha-status,.ha-error{font-size:12px;line-height:1.7;padding:9px 11px;margin:0 0 14px;border-radius:8px;overflow-wrap:anywhere}.ha-status{background:#f2eee5;color:#81715d}.ha-error{background:#f9eee7;color:#a04430;border:1px solid #eed7c8}
.ha-code-preview{background:#f4efe2;border:1px solid #e8ddc5;border-radius:9px;padding:12px 14px;margin-bottom:18px}.ha-code-preview>span{font-size:10px;color:#8e7858}.ha-code-preview code{display:block;font:600 26px/1.4 ui-monospace,Consolas,monospace;letter-spacing:.18em;color:#665336;margin-top:4px}
.ha-verify-actions{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:13px}.ha-verify-actions button{font-size:11px}.ha-preview-link{display:block;text-align:center;font-size:12px;color:#966849;margin-top:14px;text-decoration:underline}
.ha-identity{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:11px;align-items:center;border:1px solid #dfe0da;background:#f5f5f1;padding:14px;border-radius:11px;margin-bottom:18px}.ha-avatar{display:grid!important;place-items:center;width:34px;height:34px;border-radius:50%;background:#e7e4dc;color:#625d52!important;font-size:13px!important;font-weight:700}.ha-identity strong{display:block;font-size:14px;font-weight:600}.ha-identity div>span{display:block;font-size:11px;color:#818079;overflow-wrap:anywhere}.ha-switch-account{border:0;background:transparent;color:#7f5e43;font-size:11px;padding:4px;cursor:pointer}.ha-switch-account:hover{text-decoration:underline;text-underline-offset:4px}.ha-quota{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:22px}.ha-quota>div{border:1px solid #e4ded3;border-radius:9px;padding:13px}.ha-quota span{display:block;font-size:10px;color:#8e816d}.ha-quota strong{display:block;font-size:25px;font-weight:600;font-variant-numeric:tabular-nums;line-height:1.8}.ha-logout{display:block;margin:12px auto 0}
.ha-desktop-note{margin:0 0 14px;color:#817b73;font:400 12px/1.55 var(--sans);text-align:center}.ha-desktop-cancel{display:block;margin:12px auto 0;border:0;background:transparent;color:#837563;font:500 12px/1.6 var(--sans);cursor:pointer}.ha-desktop-cancel:hover{text-decoration:underline;text-underline-offset:4px}.ha-desktop-complete{text-align:center;padding:10px 0 4px}.ha-desktop-complete>span{display:grid;width:44px;height:44px;margin:0 auto 15px;place-items:center;border-radius:50%;background:#eef2e8;color:#667a57;font-size:23px}.ha-desktop-complete h3{margin:0;font-size:22px;letter-spacing:-.035em}.ha-desktop-complete p{margin:8px 0 20px;color:#7d776e;font-size:13px}.hero-account[data-desktop-auth="authorize"] .ha-quota,.hero-account[data-desktop-auth="authorize"] .ha-logout,.hero-account[data-desktop-auth="authorize"] .ha-dashboard,.hero-account[data-desktop-auth="authorize"] [data-auth-close]{display:none!important}.hero-account[data-desktop-auth="done"]>.ha-header,.hero-account[data-desktop-auth="done"]>#heroDesktopNotice,.hero-account[data-desktop-auth="done"]>[data-auth-view]{display:none!important}
.hero-account[data-view="register"]{padding-block:22px 18px}.hero-account[data-view="register"] .ha-header{margin-bottom:17px}.hero-account[data-view="register"] .ha-header>img{display:none}.hero-account[data-view="register"] input{height:41px;margin-bottom:11px}.hero-account[data-view="register"] .ha-password button{height:33px}.hero-account[data-view="register"] .ha-switch{margin-top:11px}.hero-account[data-view="register"] .ha-environment{margin-top:12px;padding-top:11px}
@media(max-width:800px){.hero-account{width:100%;padding-inline:22px}.hero-account .ha-header h2{font-size:23px}.hero:has(.is-account-open){align-items:start}.hero:has(.is-account-open) .hero-copy{padding-top:28px}}
@media(max-width:560px){.hero-visual{max-width:390px;align-self:center;margin-top:30px}.hero-visual>.hero-art{margin-top:0;max-width:350px;justify-self:center}.hero-account{width:100%;padding:28px 24px 22px}.hero-account input{font-size:16px}.hero-account[data-view="register"] input{height:44px}.hero:has(.is-account-open) .hero-copy{padding-top:0}.hero-account{scroll-margin-top:88px}}
@media(prefers-reduced-motion:reduce){.hero-account input{transition:none}.hero-account button:active{transform:none}}

/* 批注：打开登录卡片时首屏高度不变。桌面端卡片刚好嵌入插画区域（同高、居中），内容垂直居中；内容更高时卡片内部滚动。 */
@media(min-width:801px){
  .hero-visual.is-account-open{position:relative}
  .hero-visual.is-account-open>.hero-account{position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%);width:calc(100% - 24px);max-width:456px;height:100%;max-height:100%;overflow:auto;overscroll-behavior:contain;display:flex;flex-direction:column;justify-content:center;padding:20px 30px 14px;z-index:5}
  .hero-visual.is-account-open>.hero-account .ha-header{margin-bottom:16px}
  .hero-visual.is-account-open>.hero-account .ha-header>img{margin-bottom:10px}
  .hero-visual.is-account-open>.hero-account input{margin-bottom:12px}
  .hero-visual.is-account-open>.hero-account .ha-switch{margin-top:12px}
}

/* 批注：登录卡片开合动效。插画先淡出并轻微后退、模糊，卡片由略小、略低的位置上浮放大到位，
   卡片内标题与表单再依次浮现（Apple 式的层次感）。关闭时由脚本反向播放。 */
@media(prefers-reduced-motion:no-preference){
  .hero-visual.is-account-open>.hero-art{visibility:visible;animation:heroArtRecede .32s cubic-bezier(.4,0,.2,1) both}
  .hero-visual.is-account-open>.hero-account{animation:heroCardRise .46s cubic-bezier(.22,1,.36,1) both;transform-origin:50% 60%}
  .hero-visual.is-account-open>.hero-account .ha-header{animation:heroCardItem .5s cubic-bezier(.22,1,.36,1) .08s both}
  .hero-visual.is-account-open>.hero-account [data-auth-view]:not([hidden]){animation:heroCardItem .5s cubic-bezier(.22,1,.36,1) .14s both}
  .hero-visual.is-account-open>.hero-account.is-closing{animation:heroCardSink .2s cubic-bezier(.4,0,1,1) both}
  .hero-visual>.hero-art.is-returning{animation:heroArtReturn .38s cubic-bezier(.22,1,.36,1) both}
  .hero-visual.is-account-open>.hero-account.is-closing .ha-header,.hero-visual.is-account-open>.hero-account.is-closing [data-auth-view]{animation:none}
}
@keyframes heroArtReturn{from{opacity:0;scale:.95;filter:blur(6px)}to{opacity:1;scale:1;filter:blur(0)}}
@keyframes heroArtRecede{from{opacity:1;scale:1;filter:blur(0)}to{opacity:0;scale:.94;filter:blur(8px);visibility:hidden}}
@keyframes heroCardRise{from{opacity:0;scale:.92;translate:0 22px;box-shadow:0 0 0 #302d2300}to{opacity:1;scale:1;translate:0 0}}
@keyframes heroCardItem{from{opacity:0;translate:0 10px}to{opacity:1;translate:0 0}}
@keyframes heroCardSink{from{opacity:1;scale:1;translate:0 0}to{opacity:0;scale:.95;translate:0 12px}}

.ha-invite-result{font-size:13px;line-height:1.8;color:#6f654f}#heroInviteField[hidden]{display:none}#heroInviteCode{text-transform:uppercase}