.account-body { background: #fbfaf9; color: #191817; }
.account-main { width: min(1080px, calc(100% - 48px)); margin: 64px auto 80px; }
.account-hero { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.account-hero > div { min-width: 0; }
.account-body .site-header > #account-login { justify-self: end; }
.account-hero h1 { font-size: clamp(48px, 7vw, 88px); line-height: .95; margin: 12px 0 20px; letter-spacing: -.04em; }
.account-hero h1 span { color: #7750ae; }
.account-hero img { object-fit: contain; flex-shrink: 0; }
.account-intro { max-width: 580px; color: #5b5651; line-height: 1.6; }
.account-message { min-height: 22px; margin: 18px 0 24px; font-size: 14px; color: #5b5651; }
.account-guest-callout { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px; border: 1px solid #dfd3c4; border-radius: 22px; background: #f3ebe0; margin: 24px 0; }
.account-guest-callout strong { font-size: 21px; }.account-guest-callout p { max-width: 590px; margin: 8px 0 0; line-height: 1.5; }
.account-guest-callout button { flex-shrink: 0; }
.account-tabs { display: flex; gap: 8px; border-bottom: 1px solid #ddd4cb; padding: 12px 0; margin: 26px 0 20px; }
.account-tabs button { border: 0; border-radius: 24px; background: transparent; color: #514c46; padding: 13px 19px; font: inherit; font-weight: 700; cursor: pointer; }
.account-tabs button.active { background: #211e22; color: white; }.account-tabs span { margin-left: 7px; opacity: .8; }
.notebook-list { display: grid; gap: 12px; }.notebook-row { display: flex; justify-content: space-between; gap: 24px; padding: 23px 25px; border: 1px solid #e3dcd4; border-radius: 20px; background: #fff; }
.notebook-info { min-width: 0; }.notebook-meta { color: #755c96; text-transform: uppercase; letter-spacing: .05em; font-size: 11px; font-weight: 800; margin: 0 0 7px; }
.notebook-row h2 { font-size: 26px; line-height: 1.12; margin: 0 0 8px; overflow-wrap: anywhere; }.notebook-row h2 a { color: inherit; text-decoration: none; }.notebook-row h2 a:hover { text-decoration: underline; }
.notebook-row p:not(.notebook-meta) { font-size: 14px; line-height: 1.5; margin: 5px 0; color: #625c56; }
.notebook-actions { display: flex; flex-wrap: wrap; align-content: center; justify-content: flex-end; gap: 6px 12px; flex-basis: 260px; flex-shrink: 0; }
.notebook-actions a,.notebook-actions button { display: inline-flex; align-items: center; min-height: 44px; background: none; border: 0; padding: 4px 0; font: inherit; font-size: 13px; font-weight: 700; color: #44394e; cursor: pointer; }
.notebook-actions [data-visit] { background: #efe7f8; border-radius: 18px; padding: 8px 13px; }.notebook-actions [data-visit][aria-pressed=true] { background: #e0f0e4; color: #215535; }
.notebook-actions [data-remove] { color: #7a4a43; font-weight: 400; }
.archive-label,.visited-label { display: inline-block; font-size: 11px; border-radius: 12px; padding: 4px 9px; background: #f0ebe6; color: #665c50; margin: 4px 6px 4px 0; }.visited-label { background: #e5f2e8; color: #275235; }
.notebook-row .private-note { border-left: 3px solid #dbcde9; padding: 6px 12px; white-space: pre-wrap; overflow-wrap: anywhere; margin-top: 12px; }
.notebook-empty { text-align: center; padding: 40px 20px 52px; background: #f5f0e9; border-radius: 22px; }.notebook-empty img { object-fit: contain; }.notebook-empty h2 { font-size: 32px; margin: 12px 0; }.notebook-empty p { max-width: 450px; margin: 0 auto 22px; line-height: 1.6; }
.badge-intro { color: #625c56; font-size: 14px; line-height: 1.6; max-width: 680px; }.badge-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; margin-top: 24px; }
.badge-card { text-align: center; border: 1px solid #e0d7cd; border-radius: 24px; background: #f6f1ea; padding: 24px 18px; }.badge-card.earned { background: #f1e9fb; border-color: #c7b2e2; }.badge-card.locked img { opacity: .58; filter: grayscale(.65); }.badge-card img { object-fit: contain; }.badge-card h2 { font-size: 29px; margin: 7px 0 12px; }.badge-card p:not(.section-kicker) { font-size: 14px; min-height: 44px; line-height: 1.5; }.badge-card small { display: block; margin-top: 7px; }.badge-card progress { width: 100%; height: 9px; accent-color: #7450a5; }
.badge-celebration { padding: 18px 22px; border-radius: 18px; background: #e5f1d9; color: #34532a; margin: 20px 0; font-weight: 700; }
.account-settings { margin-top: 42px; border-top: 1px solid #ddd4cb; padding-top: 24px; }.account-settings summary { cursor: pointer; font-size: 23px; font-weight: 700; padding: 12px 0; }.account-settings h2 { font-size: 25px; }.account-form { display: grid; gap: 12px; margin: 22px 0; max-width: 660px; }.account-form label,.account-form legend { font-size: 14px; font-weight: 700; }.account-form small { font-weight: 400; color: #625c56; }
.account-form input:not([type=checkbox]):not([type=radio]),.account-form textarea,.account-form select { width: 100%; box-sizing: border-box; padding: 13px 15px; border: 1px solid #c9bfb4; border-radius: 12px; background: white; color: #191817; font: inherit; font-size: 16px; }.account-form textarea { resize: vertical; }.account-form .pill-button { justify-self: start; }.account-form fieldset { border: 0; padding: 0; min-width: 0; margin: 10px 0; }
.avatar-options { display: grid; grid-template-columns: repeat(6,1fr); gap: 8px; margin-top: 12px; }.avatar-option { display: flex; flex-direction: column; align-items: center; gap: 5px; border: 2px solid transparent; border-radius: 14px; padding: 8px; cursor: pointer; }.avatar-option:has(input:checked) { background: #ede2f8; border-color: #8962b9; }.avatar-option img { max-width: 100%; height: auto; }.avatar-option input { accent-color: #7750ae; }
.account-tools { border-top: 1px solid #e3dcd4; padding: 20px 0; }.account-tools p { max-width: 650px; line-height: 1.6; }.account-tools .pill-button { margin: 6px 6px 6px 0; }.account-tools li { margin: 16px 0; }.account-tools li small { display: block; overflow-wrap: anywhere; color: #625c56; max-width: 600px; margin-top: 5px; }
.account-delete { border-top: 1px solid #e3dcd4; padding: 12px 0; max-width: 700px; }.account-delete summary { font-size: 16px; color: #914331; }.account-delete p { font-size: 14px; line-height: 1.6; }.pill-button.danger { background: #923d31; color: white; }
.account-privacy { border-top: 1px solid #e3dcd4; margin-top: 46px; padding-top: 24px; max-width: 800px; color: #625c56; }.account-privacy h2 { font-size: 22px; }.account-privacy p { font-size: 13px; line-height: 1.7; }
.login-dialog,.entry-dialog { width: min(480px, calc(100% - 32px)); box-sizing: border-box; padding: 34px; border: 1px solid #d9cdc0; border-radius: 26px; background: #fbfaf9; color: #191817; max-height: calc(100dvh - 32px); overflow-y: auto; }.login-dialog::backdrop,.entry-dialog::backdrop { background: rgb(24 19 31 / .5); }.login-dialog h2,.entry-dialog h2 { font-size: 35px; line-height: 1.05; margin: 12px 0; }.login-dialog p,.entry-dialog p { line-height: 1.5; }.login-dialog>img { object-fit: contain; }.login-dialog>small { color: #625c56; line-height: 1.5; }.dialog-close { position: absolute; right: 15px; top: 12px; width: 44px; height: 44px; border: 0; background: transparent; font-size: 30px; cursor: pointer; }
.checkbox-label { display: flex; align-items: center; gap: 10px; line-height: 1.5; }.checkbox-label input { width: 20px; height: 20px; flex-shrink: 0; accent-color: #7750ae; }.text-button { border: 0; background: transparent; padding: 10px 0; font: inherit; font-size: 14px; font-weight: 700; color: #674393; text-align: left; cursor: pointer; }
#login-code { font-size: 26px; letter-spacing: .25em; } #login-message,#entry-message { color: #8b3d2e; font-size: 14px; }
.account-toast { position: fixed; z-index: 10000; bottom: 24px; left: 50%; transform: translateX(-50%); width: max-content; max-width: calc(100% - 32px); box-sizing: border-box; background: #28222e; color: white; border-radius: 16px; padding: 15px 20px; box-shadow: 0 8px 30px #0002; font-size: 14px; line-height: 1.5; }
.account-body [hidden],.account-toast[hidden] { display: none !important; }.account-body button:disabled { opacity: .55; cursor: wait; }.account-body :focus-visible { outline: 3px solid #7450a5; outline-offset: 4px; }
@media(max-width:700px) { .account-main { width: calc(100% - 32px); margin-top: 36px; }.account-hero img { width: 100px; height: 100px; }.account-hero h1 { font-size: 55px; }.account-guest-callout { flex-direction: column; align-items: flex-start; gap: 17px; }.notebook-row { flex-direction: column; gap: 12px; padding: 20px; }.notebook-actions { flex-basis: auto; justify-content: flex-start; border-top: 1px solid #eee8e2; padding-top: 8px; }.badge-grid { grid-template-columns: 1fr; }.badge-card { display: grid; grid-template-columns: 95px 1fr; gap: 0 15px; text-align: left; }.badge-card img { grid-row: 1 / 6; width: 95px; height: 120px; align-self: center; }.badge-card h2 { font-size: 27px; }.badge-card p:not(.section-kicker) { min-height: 0; margin: 4px 0 14px; }.account-tabs { gap: 2px; }.account-tabs button { padding: 12px 11px; font-size: 14px; }.account-tabs span { margin-left: 4px; }.avatar-options { grid-template-columns: repeat(4,1fr); }.account-body .site-header { gap: 14px; }.login-dialog,.entry-dialog { padding: 28px 23px; } }
@media(max-width:380px) { .account-hero img { width: 72px; height: 72px; }.account-hero h1 { font-size: 45px; }.account-tabs button { padding: 12px 9px; }.account-tabs span { margin-left: 2px; } }
@media(max-width:700px) { .account-hero { display: block; position: relative; }.account-hero img { position: absolute; top: 10px; right: 0; width: 56px; height: 56px; }.account-hero .section-kicker { max-width: calc(100% - 70px); }.account-hero h1 span { display: block; }.badge-grid { grid-template-columns: minmax(0,1fr); }.badge-card { min-width: 0; grid-template-columns: 95px minmax(0,1fr); } }
@media(max-width:420px) { .badge-card { display: block; text-align: center; padding: 20px; }.badge-card img { width: 84px; height: 84px; }.badge-card h2 { font-size: 26px; }.account-tabs button { white-space: nowrap; padding: 12px 7px; font-size: 13px; } }
@media(prefers-reduced-motion:reduce) { .account-body * { scroll-behavior: auto !important; } }

@media(max-width:420px) { .site-header { width: calc(100% - 32px); grid-template-columns: minmax(0,1fr) auto; column-gap: 8px; }.site-header .brand { gap: 6px; font-size: 13px; }.site-header .brand-mark { width: 25px; height: 25px; flex-shrink: 0; }.site-header .header-actions { gap: 6px; }.site-header .pill-button { padding-inline: 10px; font-size: 12px; }.site-header .header-nav { gap: 4px; font-size: 12px; }.site-header .header-nav a { padding-inline: 4px; } }

@media(max-width:420px) { .site-header .favorites-trigger { max-width: 124px; } }
@media(max-width:380px) { .site-header .brand { font-size: 12px; }.site-header .favorites-trigger { max-width: 116px; font-size: 11px; }.site-header .favorites-trigger span { min-width: 18px; padding-inline: 3px; margin-left: 3px; } }