.account { color: #e4e5d6; }
#account-ui.account { position: static; z-index: auto; }
.auth-open #account-ui.account { position: fixed; inset: 0; z-index: 80; }
.account [hidden] { display: none !important; }
.auth-open .interface:not(#account-ui), .auth-open .photo-control, .auth-open #loading { visibility: hidden; pointer-events: none; }
.auth-open #account-ui { visibility: visible; opacity: 1; pointer-events: auto; }
.account .account-gate { position: fixed; inset: 0; z-index: 80; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 410px); align-content: safe center; align-items: center; column-gap: 8vw; overflow-y: auto; padding: max(35px, env(safe-area-inset-top)) 7vw max(80px, env(safe-area-inset-bottom)); }
.account .account-welcome { max-width: 570px; padding: 18px 0; }
.account .account-panel { position: relative; width: 100%; padding: 31px; border: 1px solid rgb(166 196 178 / 27%); border-radius: 7px; background: linear-gradient(145deg, rgb(34 52 48 / 80%), rgb(9 23 25 / 91%)); box-shadow: 0 24px 90px rgb(0 0 0 / 25%); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.account .account-panel::before { content: ''; position: absolute; pointer-events: none; top: -1px; left: 12%; width: 38%; height: 1px; background: linear-gradient(90deg, transparent, rgb(203 231 202 / 85%), transparent); opacity: .45; animation: account-panel-signal 8s ease-in-out infinite; }
.auth-open .account-welcome > *, .auth-open .account-panel { animation: account-arrive .65s cubic-bezier(.2,.65,.25,1) both; }
.auth-open .account-welcome > :nth-child(2) { animation-delay: .09s; }
.auth-open .account-welcome > :nth-child(3) { animation-delay: .18s; }
.auth-open .account-panel { animation-delay: .14s; }
@keyframes account-arrive { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes account-panel-signal { 0%, 100% { opacity: .25; transform: translateX(0); } 50% { opacity: .8; transform: translateX(94%); } }
.account .account-eyebrow { margin: 0 0 16px; color: #a0c9ba; font-size: 9px; letter-spacing: 1.9px; text-transform: uppercase; }
.account h1 { margin: 0 0 13px; font: 400 30px/1.14 Georgia, serif; letter-spacing: -.6px; color: #efe9d7; }
.account .account-intro { margin: 0; color: #b5c6ba; font-size: 12px; line-height: 1.75; }
.account .account-tabs { display: flex; gap: 5px; margin: 23px 0 17px; padding: 3px; border: 1px solid rgb(167 199 180 / 14%); border-radius: 4px; background: rgb(3 15 18 / 18%); }
.account .account-tab { min-height: 42px; flex: 1; border: 1px solid transparent; border-radius: 3px; color: #a7bdb0; background: transparent; font-size: 11px; cursor: pointer; transition: color .2s, background .2s, border-color .2s; }
.account .account-tab:hover:not(:disabled) { color: #e2ecdb; background: rgb(146 189 167 / 7%); }
.account .account-tab[aria-pressed="true"] { color: #e2ecdb; background: rgb(146 189 167 / 12%); border-color: rgb(150 191 170 / 20%); }
.account .account-form { display: grid; gap: 9px; }
.account label { margin-top: 8px; color: #d1dacc; font-size: 11px; }
.account input { width: 100%; min-height: 48px; padding: 11px 13px; border: 1px solid rgb(157 191 174 / 31%); border-radius: 3px; background: rgb(3 15 18 / 35%); color: #eceddd; font: inherit; font-size: 16px; transition: border-color .2s, background .2s, box-shadow .25s; }
.account input:focus { border-color: #8ab6a1; background: rgb(3 15 18 / 60%); box-shadow: inset 0 0 15px rgb(141 193 169 / 4%), 0 0 17px rgb(125 184 154 / 8%); }
.account input::placeholder { color: #7e978b; }
.account .account-password-wrap { position: relative; }
.account .account-password-wrap input { padding-right: 48px; }
.account .account-password-reveal { position: absolute; right: 2px; top: 2px; width: 44px; height: 44px; display: grid; place-items: center; padding: 12px; border: 0; border-radius: 3px; background: transparent; color: #adbeaf; cursor: pointer; transition: background .2s, color .2s; }
.account .account-password-reveal:hover:not(:disabled) { background: rgb(146 189 167 / 9%); color: #edf0dd; }
.account .account-password-eye { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.account .account-hint { margin: 1px 0 4px; font-size: 10px; color: #9ab0a3; }
.account .account-error { margin: 5px 0; padding: 10px 12px; border-left: 2px solid #d5ac78; background: rgb(158 102 49 / 9%); color: #e3cda8; font-size: 11px; line-height: 1.6; }
.account .account-submit { position: relative; isolation: isolate; overflow: hidden; min-height: 48px; margin-top: 10px; padding: 11px 32px; border: 1px solid #d4ddc4; border-radius: 3px; background: #d0d9bd; color: #1c322e; font-size: 12px; font-weight: 500; letter-spacing: .2px; cursor: pointer; transition: background .2s, box-shadow .2s; }
.account .account-submit:hover { background: #e1e5ce; box-shadow: 0 0 24px rgb(179 215 174 / 8%); }
.account .account-form[aria-busy="true"] .account-submit { opacity: .9; }
.account .account-form[aria-busy="true"] .account-submit::before { content: ''; position: absolute; pointer-events: none; z-index: -1; top: 0; bottom: 0; left: 0; width: 40%; background: linear-gradient(90deg, transparent, rgb(246 255 231 / 50%), transparent); animation: account-connecting-sweep 1.9s ease-in-out infinite; }
.account .account-form[aria-busy="true"] .account-submit::after { content: ''; position: absolute; pointer-events: none; top: 50%; left: 14px; width: 12px; height: 12px; margin-top: -6px; border: 1.5px solid rgb(28 50 46 / 22%); border-top-color: #1c322e; border-radius: 50%; animation: account-connecting-spin .9s linear infinite; }
@keyframes account-connecting-sweep { from { transform: translateX(-110%); } to { transform: translateX(360%); } }
@keyframes account-connecting-spin { to { transform: rotate(360deg); } }
.account .account-note { margin: 23px 0 0; padding-top: 17px; border-top: 1px solid rgb(157 184 166 / 16%); color: #a0b4a7; font-size: 10px; line-height: 1.6; text-align: center; }
.account :is(button,input):focus-visible { outline: 2px solid #a7cdb8; outline-offset: 3px; }
.account button:disabled, .account input:disabled { opacity: .55; cursor: wait; }
.account .account-hud { position: fixed; z-index: 6; right: var(--edge, 22px); bottom: max(20px, env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 12px; max-width: 260px; padding: 7px 8px 7px 12px; border: 1px solid rgb(158 190 174 / 19%); border-radius: 4px; background: rgb(14 25 26 / 82%); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.account .account-identity { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px 10px; min-width: 0; }
.account .account-name { max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #d9e0d1; font-size: 10px; }
.account .account-status { color: #a4c8b8; font-size: 9px; white-space: nowrap; }
.account .account-notice { grid-column: 1/-1; max-width: 190px; color: #d9b887; font-size: 8px; line-height: 1.5; }
.account .account-hud[data-connection="offline"] .account-status, .account .account-hud[data-connection="conflict"] .account-status { color: #d9b887; }
.account .account-logout { display: grid; place-items: center; flex: 0 0 36px; width: 36px; height: 36px; padding: 0; border: 1px solid rgb(153 185 169 / 15%); border-radius: 3px; background: transparent; color: #b8c8b9; font-size: 21px; cursor: pointer; }
.clean-view .account-hud { visibility: hidden; opacity: 0; pointer-events: none; }
@media (max-width: 720px) { .account .account-panel { padding: 25px; } .account .account-hud { bottom: max(12px, env(safe-area-inset-bottom)); padding-top: 3px; padding-bottom: 3px; } .account .account-logout { width: 44px; height: 44px; flex-basis: 44px; } }
@media (max-height: 600px) { .account .account-panel { padding-top: 22px; padding-bottom: 22px; } .account .account-tabs { margin-top: 14px; margin-bottom: 12px; } .account .account-note { margin-top: 12px; } }

@media (min-width: 721px) { .halo-preview:not(.auth-open) #movement-help { max-width: calc(100% - 310px); } }
@media (max-width: 720px) { .halo-preview:not(.auth-open) #movement-help { display: none; } }

@media (max-width: 960px) and (min-width: 761px) { .account .account-gate { gap: 5vw; padding-left: 5vw; padding-right: 5vw; grid-template-columns: minmax(0, 1fr) 360px; } .account .account-panel { padding: 27px; } .account .entry-title { font-size: 61px; } }
@media (max-width: 760px) { .account .account-gate { display: flex; flex-direction: column; justify-content: safe center; align-items: center; gap: 25px; padding: max(32px, env(safe-area-inset-top)) 20px 84px; } .account .account-welcome { width: min(418px, 100%); padding: 0; } .account .entry-story { display: none; } .account .entry-title br { display: none; } .account .entry-title { font-size: clamp(31px, 7.8vw, 53px); line-height: 1.05; letter-spacing: -1.3px; } .account .entry-title span + br + span::before { content: ' '; } .account .account-welcome .entry-eyebrow { margin-bottom: 13px; } .account .account-panel { width: min(418px, 100%); padding: 26px; flex: none; } .account .entry-signal { width: min(418px, 100%); margin: 0; font-size: 8px; } .account .entry-scenery { background-position: 27% center; } .account .entry-scenery::before { background: linear-gradient(180deg, rgb(4 13 15 / 35%), rgb(4 13 15 / 64%)); } }
@media (max-height: 670px) and (min-width: 761px) { .account .account-gate { padding-top: 26px; padding-bottom: 72px; } .account .account-panel { padding: 24px 29px; } .account .account-tabs { margin-top: 17px; margin-bottom: 13px; } .account .account-note { margin-top: 18px; padding-top: 13px; } }
.entry-paused .account-gate *, .entry-paused .account-gate *::before, .entry-paused .account-gate *::after, body:not(.auth-open) .account-gate *, body:not(.auth-open) .account-gate *::before, body:not(.auth-open) .account-gate *::after { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .account-gate *, .account-gate *::before, .account-gate *::after { animation: none !important; transition: none !important; } }