.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: #44223870; backdrop-filter: blur(8px); font: 11px var(--sans); }
.account-button svg { width: 17px; height: 17px; }
.account-button[data-member=true] { border-color: #e5adcd90; color: #fce5f0; }
.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: light; 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 #8a466947; border-radius: 22px; background: radial-gradient(ellipse at top right, #f4b8d747, transparent 55%), linear-gradient(145deg, #fff8f1fa, #fbedf3fc); color: #48253b; box-shadow: 0 28px 100px #16091999; backdrop-filter: blur(20px); }
#account-dialog[open] { display: flex; flex-direction: column; }
#account-dialog::backdrop { background: #1d0e24af; 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 #89556b26; background: #f5dfeb80; }
.account-toolbar > span { display: flex; gap: 9px; align-items: center; color: #6f4058; 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 #8a466945; 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: #97567466 transparent; scroll-padding-block: 20px; }
.account-eyebrow { margin: 0 0 12px; font-size: 9px; letter-spacing: 1.7px; text-transform: uppercase; color: #8b3f66; }
#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: #694355; }
.account-tabs { display: flex; border-bottom: 1px solid #89556b33; gap: 24px; margin: 18px 0; }
.account-tabs button { position: relative; min-height: 44px; padding: 10px 1px; font-size: 12px; color: #805269; }
.account-tabs button[aria-selected=true] { color: #62314e; }
.account-tabs button[aria-selected=true]::after { content: ''; position: absolute; inset: auto 0 -1px; height: 2px; background: #ad4a78; }
#account-dialog fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
#account-dialog label { display: block; margin: 15px 0 7px; color: #62384f; 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 #98617a66; border-radius: 9px; background: #fffaf6; color: #48253b; padding: 10px 12px; font: 16px/1.5 var(--sans); scroll-margin-block: 22px; }
#account-dialog input::placeholder { color: #856774; }
#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 #a23c70; 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: #745267; }
.account-field-note a { text-underline-offset: 3px; }
#account-intro a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.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 #733952; border-radius: 24px 8px 24px 8px; background: #733952; color: #fff9f5; font: 400 13px/1.5 var(--sans); }
.account-primary:hover { background: #854664; }
.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: #684357; }
.account-consent input { flex: none; width: 19px; height: 19px; margin: 3px 0 0; accent-color: #733952; cursor: pointer; }
.account-center { text-align: center; }
.account-message, .account-error { padding: 12px 14px; border: 1px solid #b277932b; border-radius: 9px; color: #694055; background: #f3dce820; font-size: 12px; line-height: 1.6; margin: 18px 0 0; }
.account-error { border-color: #ba4b6666; color: #822744; background: #f9dce340; }
#account-sent { padding-top: 18px; }
#account-sent > p { font-size: 13px; line-height: 1.75; color: #694355; }
#account-sent-email { font-weight: 400; color: #4b273c; overflow-wrap: anywhere; }
.account-letter { display: grid; place-items: center; margin: 3px 0 19px; width: 68px; height: 68px; border: 1px solid #89556b33; border-radius: 24px 10px 24px 10px; background: #f2d3e33d; color: #733952; }
.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: #744059; 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 #89556b26; 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: #733952; }
.account-unlocks span:last-child svg { color: #567ba4; }
.account-footnote { margin: 23px 0 0; padding-top: 17px; border-top: 1px solid #89556b22; text-align: center; color: #82556b; 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; } }
/* Site names never split at their hyphen (m-ew.com, celeb-i.com). */
#account-intro a, .account-field-note a { white-space: nowrap; }