.account-button { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 24px; background: #15332560; backdrop-filter: blur(8px); font: 11px var(--sans); }
.account-button svg { width: 17px; height: 17px; }
.account-button[data-member=true] { border-color: #c7dca56b; color: #dfebc8; }
.kit-actions #account-button { grid-column: 1 / -1; }
body[data-compact=true][data-mode=intro] .forest-kit { display: block; }
#account-dialog { --account-inset: max(12px, env(safe-area-inset-top), env(safe-area-inset-bottom)); color-scheme: dark; position: fixed; inset: var(--account-viewport-top, 0px) 0 auto; margin: var(--account-inset) auto 0; width: min(480px, calc(100% - 24px - env(safe-area-inset-left) - env(safe-area-inset-right))); max-width: 480px; max-height: calc(var(--account-viewport-height, 100dvh) - var(--account-inset) * 2); padding: 0; overflow: hidden; border: 1px solid #b8cf9d52; border-radius: 22px; background: radial-gradient(ellipse at top right, #59794420, transparent 55%), linear-gradient(145deg, #1b3e2ff7, #102b22fc); color: #f0efdc; box-shadow: 0 28px 100px #02130dd9; backdrop-filter: blur(20px); }
#account-dialog[open] { display: flex; flex-direction: column; }
#account-dialog::backdrop { background: #03150daf; backdrop-filter: blur(6px); }
#account-dialog [hidden] { display: none !important; }
.account-toolbar { flex: none; min-height: 64px; padding: 9px 16px 9px 24px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #b7d1a82b; background: #0e2b235c; }
.account-toolbar > span { display: flex; gap: 9px; align-items: center; color: #bdcfa8; font-size: 11px; }
.account-toolbar > span svg { height: 21px; width: 21px; }
.account-toolbar button { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border: 1px solid #b6c69d45; border-radius: 50%; }
.account-toolbar button svg { width: 18px; height: 18px; }
.account-scroll { min-height: 0; padding: 26px 30px 20px; overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: #829b715c transparent; scroll-padding-block: 20px; }
.account-eyebrow { margin: 0 0 12px; font-size: 9px; letter-spacing: 1.7px; text-transform: uppercase; color: #bed3a3; }
#account-title { margin: 0 0 15px; font: 400 clamp(29px, 5vw, 36px)/1.12 var(--serif); letter-spacing: -.7px; text-wrap: balance; outline: none; }
#account-intro { margin: 0; font-size: 13px; line-height: 1.75; color: #cedbc5; }
.account-tabs { display: flex; border-bottom: 1px solid #b7d1a833; gap: 24px; margin: 18px 0; }
.account-tabs button { position: relative; min-height: 44px; padding: 10px 1px; font-size: 12px; color: #b2c6a6; }
.account-tabs button[aria-selected=true] { color: #e5eed0; }
.account-tabs button[aria-selected=true]::after { content: ''; position: absolute; inset: auto 0 -1px; height: 2px; background: #cbdca9; }
#account-dialog fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
#account-dialog label { display: block; margin: 15px 0 7px; color: #dbe5cf; font-size: 11px; line-height: 1.5; }
#account-dialog fieldset > label:first-child, .account-fields:first-child label { margin-top: 0; }
#account-dialog input:not([type=checkbox]), #account-dialog select { display: block; width: 100%; min-width: 0; min-height: 48px; border: 1px solid #bad0a447; border-radius: 9px; background: #0a211a8c; color: #f0efdc; padding: 10px 12px; font: 16px/1.5 var(--sans); scroll-margin-block: 22px; }
#account-dialog input::placeholder { color: #acbca59c; }
#account-dialog select { padding-right: 24px; }
#account-dialog input:focus-visible, #account-dialog select:focus-visible, #account-dialog button:focus-visible, #account-dialog a:focus-visible { outline: 2px solid #d4e5ae; outline-offset: 3px; }
.account-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.account-fields > div { min-width: 0; }
#account-dialog .account-field-note { margin: 9px 0 15px; font-size: 11px; line-height: 1.65; color: #b4c6a8; }
.account-field-note a { text-underline-offset: 3px; }
#account-intro a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
/* Site names never split at their hyphen (m-ew.com, celeb-i.com). */
#account-intro a, .account-field-note a { white-space: nowrap; }
.account-primary { display: flex; align-items: center; justify-content: center; gap: 15px; min-height: 48px; width: 100%; padding: 12px 18px; margin-top: 19px; border: 1px solid #cbdcac; border-radius: 24px 8px 24px 8px; background: #cbdcac; color: #173524; font: 400 13px/1.5 var(--sans); }
.account-primary:hover { background: #dfeac5; }
.account-primary span { font-size: 17px; }
#account-dialog button:disabled, #account-dialog fieldset:disabled { opacity: .55; cursor: wait; }
#account-dialog .account-consent { display: flex; gap: 10px; align-items: flex-start; min-height: 44px; margin-top: 20px; font-size: 11px; line-height: 1.65; cursor: pointer; color: #c0d0b6; }
.account-consent input { flex: none; width: 19px; height: 19px; margin: 3px 0 0; accent-color: #cbdcac; cursor: pointer; }
.account-center { text-align: center; }
.account-message, .account-error { padding: 12px 14px; border: 1px solid #c7dca33b; border-radius: 9px; color: #d7e4c9; background: #b6d1920c; font-size: 12px; line-height: 1.6; margin: 18px 0 0; }
.account-error { border-color: #d5aaac66; color: #f0cfd0; background: #7c454c26; }
#account-sent { padding-top: 18px; }
#account-sent > p { font-size: 13px; line-height: 1.75; color: #d0dbc8; }
#account-sent-email { font-weight: 400; color: #eef1dc; overflow-wrap: anywhere; }
.account-letter { display: grid; place-items: center; margin: 3px 0 19px; width: 68px; height: 68px; border: 1px solid #b7d1a833; border-radius: 24px 10px 24px 10px; background: #bad3980c; color: #cbdcac; }
.account-letter svg { width: 46px; height: 46px; }
.account-secondary-actions { display: flex; justify-content: space-between; gap: 10px; margin-top: 8px; }
.account-secondary-actions button, .account-signout { min-height: 44px; padding: 10px 0; color: #b8c9ac; font-size: 11px; text-decoration: underline; text-underline-offset: 4px; }
.account-signout { display: block; margin: 5px auto 0; }
.account-unlocks { display: grid; gap: 12px; border-block: 1px solid #b7d1a82b; margin: 25px 0 15px; padding: 20px 0; }
.account-unlocks span { display: flex; align-items: center; gap: 11px; font: 400 19px var(--serif); }
.account-unlocks svg { width: 20px; height: 20px; color: #cbdcac; }
.account-unlocks span:last-child svg { color: #dfb8ca; }
.account-footnote { margin: 23px 0 0; padding-top: 17px; border-top: 1px solid #b7d1a822; text-align: center; color: #9bb493; font: italic 12px/1.5 var(--serif); }
@media (min-width: 650px) and (min-height: 700px) { #account-dialog { --account-inset: max(24px, min(80px, calc((var(--account-viewport-height, 100dvh) - 680px) / 2))); } }
@media (max-width: 380px) { .account-scroll { padding: 23px 20px 18px; } .account-fields { grid-template-columns: 1fr; gap: 0; } .account-fields:first-child > div + div label { margin-top: 15px; } }
@media (max-height: 500px) { .account-toolbar { min-height: 56px; padding-block: 5px; } .account-scroll { padding-top: 20px; } }