.accounts-page { --night:#071b2a; --ink:#fff8e7; --muted:#bdd2d0; --pink:#baff5e; --line:#33514f; min-height:100svh; background:var(--night); color:var(--ink); font-family:system-ui,sans-serif; }
.accounts-page .masthead { margin:0; height:72px; padding:0 max(24px,calc((100vw - 1080px)/2)); gap:24px; background:var(--night); }
.accounts-page .wordmark { display:flex; align-items:center; gap:12px; width:auto; margin:0; padding:0; text-decoration:none; font-family:Pixel,monospace; font-size:24px; }
.accounts-page .wordmark img { width:36px; height:36px; flex-shrink:0; object-fit:contain; image-rendering:pixelated; }
.accounts-page .wordmark img.brand-name { width:144px; height:64px; }
#account-link { display:flex; align-items:center; gap:10px; min-height:44px; color:var(--muted); text-decoration:none; font-size:14px; }
#account-link svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8; }
.account-landscape { height:230px; background:linear-gradient(0deg,var(--night),transparent 52%),url('/brand/landing/hero.webp') center 57%/cover no-repeat; }
.account-main { position:relative; max-width:1080px; margin:-76px auto 0; padding:0 24px 64px; line-height:1.6; }
.account-notices { position:relative; margin:0 0 20px; }
.account-notices:has(> :not([hidden]):not(:empty)) { padding:12px 16px; border:1px solid var(--line); border-radius:8px; background:var(--night); }
.account-notices p { margin:0; }
.account-card { background:#0b1c2d; border:1px solid #34516c; border-radius:10px; padding:28px; box-shadow:0 12px 32px #0003; }
.account-main h1,.account-main h2 { font-family:Pixel,monospace; font-weight:600; letter-spacing:0; text-transform:none; }
.account-main h1 { margin:0; font-size:clamp(30px,4vw,44px); line-height:1.15; overflow-wrap:anywhere; }
.account-main h2 { margin:0 0 24px; font-size:26px; line-height:1.2; }
.account-heading { display:flex; justify-content:space-between; align-items:center; gap:24px; margin:0 0 24px; }
.account-columns { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(240px,1fr); gap:24px; align-items:start; }
.account-main label { display:block; margin:24px 0 8px; font-size:16px; }
.account-main label:first-child { margin-top:0; }
.account-main label span { display:block; color:var(--muted); font-size:13px; margin-top:4px; line-height:1.5; }
.account-main input,.account-main textarea { display:block; width:100%; min-width:0; min-height:48px; border:1px solid #55718b; border-radius:5px; padding:12px; color:var(--ink); background:#071321; font:inherit; }
.account-main textarea { resize:vertical; min-height:120px; }
.account-main input:read-only { color:var(--muted); border-style:dashed; }
.account-main input:focus-visible,.account-main textarea:focus-visible { outline:3px solid #9cf8ec; outline-offset:3px; }
.account-main .next-button { min-height:48px; border:2px solid #d6ffab; border-radius:5px; padding:12px 24px; background:var(--pink); color:#071b2a; font-family:Pixel,monospace; font-size:20px; font-weight:600; line-height:1.2; }
.account-main .next-button:hover { background:#d0ff91; }
.account-main .text-button { display:inline-flex; align-items:center; justify-content:center; min-height:44px; margin:0; padding:8px 4px; font-size:14px; }
.account-actions { display:flex; flex-wrap:wrap; align-items:center; gap:12px 24px; margin-top:28px; }
.sign-in-card,.creator-card { max-width:620px; margin:0 auto; padding:36px; text-align:center; }
.account-illustration { display:block; width:96px; height:96px; margin:0 auto 20px; image-rendering:pixelated; }
.account-intro { margin:16px 0 28px; color:var(--muted); }
.sign-in-card #google,.email-choice { display:flex; align-items:center; justify-content:center; gap:10px; width:100%; max-width:360px; margin:0 auto 12px; }
.sign-in-card #google { padding-inline:12px; font-size:clamp(16px,4.5vw,20px); }
.auth-icon { width:28px; height:28px; flex-shrink:0; object-fit:contain; image-rendering:pixelated; }
.email-choice .auth-icon { width:36px; height:36px; margin-inline:-4px; }
.email-choice { min-height:48px; border:1px solid #88daba; background:transparent; color:#c0f6dd; border-radius:5px; font:inherit; }
#email-form { max-width:360px; margin:28px auto 12px; text-align:left; }
#email-form h2 { margin-bottom:20px; color:#b2ebcf; }
#email-form .next-button { width:100%; margin-top:24px; }
.email-options { display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px; }
#email-notice,.account-identity,#profile-status { color:var(--muted); overflow-wrap:anywhere; }
#profile-fields { border:0; margin:0; padding:0; min-width:0; }
#profile-fields:disabled { opacity:.55; }
.accounts-page button:disabled { cursor:wait; opacity:.6; }
.accounts-page :focus-visible { outline:3px solid #a6e8c8; outline-offset:3px; }
.accounts-page [hidden] { display:none!important; }
.profile-symbol { display:grid; place-items:center; width:80px; height:80px; margin:0 auto 20px; background:#112c42; border:2px solid #5dd7ec; border-radius:50%; color:#adf0f9; }
.profile-symbol svg { width:40px; height:40px; fill:none; stroke:currentColor; stroke-width:1.5; }
#creator-handle { color:#69ddec; margin:10px 0 20px; overflow-wrap:anywhere; }
#creator-bio { white-space:pre-wrap; overflow-wrap:anywhere; color:var(--muted); margin:0; }
.creator-card .account-actions { justify-content:center; }
#follow { min-width:180px; }
.following-card h2 span { color:var(--pink); }
#following-status { color:var(--muted); margin:0; }
#following-list { padding:0; margin:0; list-style:none; }
#following-list li + li { border-top:1px solid var(--line); }
#following-list a { display:block; min-height:48px; padding:14px 0; color:#b3ecf5; text-decoration:none; overflow-wrap:anywhere; }
#following-list a:hover { color:var(--pink); }
#following-list a:focus-visible { outline-offset:0; }
#error { color:#ffb6ad; overflow-wrap:anywhere; }
#development { color:#ffd78b; font-size:12px; }
#status:empty,#error:empty,#following-status:empty { display:none; }
.account-skip { position:fixed; z-index:100; top:8px; left:8px; padding:12px; color:var(--night); background:#9cf8ec; transform:translateY(-150%); }
.account-skip:focus { transform:none; }
@media(max-width:700px) {
 .accounts-page .masthead { height:64px; padding:0 20px; }
 .account-landscape { height:195px; background-position:center 60%; }
 .account-main { margin-top:-56px; padding:0 16px 40px; }
 .account-columns { grid-template-columns:1fr; gap:20px; }
 .account-card { padding:22px; }
 .account-heading { gap:16px; margin-bottom:20px; }
 .account-heading h1 { font-size:34px; }
 .sign-in-card,.creator-card { padding:28px 22px; }
 #account-link span { display:none; }
 #account-link { justify-content:center; width:44px; }
 .account-actions .next-button { flex:1; }
 .account-actions .text-button { flex:1; }
}
@media(prefers-reduced-motion:reduce) { .accounts-page * { scroll-behavior:auto; } }
.community-page .account-main { margin:40px auto 0; }
.community-page .account-columns { grid-template-columns:minmax(0,1fr) minmax(300px,1fr); }
.community-page .community-links { display:flex; flex-wrap:wrap; gap:24px; margin:0 0 24px; }
.community-links a { color:var(--ink); min-height:44px; display:inline-flex; align-items:center; text-decoration-thickness:1px; text-underline-offset:5px; }
.community-links a:hover { color:#78efc2; }
.community-inboxes { display:grid; gap:24px; }
.community-page .account-card { scroll-margin-top:24px; }
.community-page .account-card p { color:var(--muted); }
.community-page details summary { min-height:44px; cursor:pointer; padding-block:12px; }
.notification-options { border:0; border-bottom:1px solid var(--line); margin:0; padding:0 0 16px; }
.notification-options legend { margin-bottom:12px; font-weight:600; }
.community-page .notification-options label,.community-page .check-label { display:flex; align-items:center; gap:12px; margin:8px 0; min-height:44px; }
.community-page input[type=checkbox] { width:20px; height:20px; min-height:20px; accent-color:#78efc2; }
.community-page select { width:100%; min-height:44px; padding:10px; color:var(--ink); background:var(--night); border:1px solid var(--line); border-radius:5px; font:inherit; }
.community-page #preferences-status { min-height:24px; }
html[data-community-theme=light] .community-page { --night:#f5f5ed; --ink:#102b35; --muted:#405760; --line:#c3d3cf; color-scheme:light; }
html[data-community-theme=dark] .community-page { color-scheme:dark; }
html[data-community-theme=light] .community-page .masthead { background:#f5f5ed; }
html[data-community-theme=light] .community-page .account-card { background:#fffef8; border-color:var(--line); box-shadow:none; }
html[data-community-theme=light] .community-page .community-links a:hover { color:#086448; }
@media(max-width:700px) { .community-page .account-columns { grid-template-columns:1fr; } .community-page .account-main { margin-top:24px; } }
.accounts-page.own-profile-route .masthead { display:grid; grid-template-columns:auto minmax(0,1fr) auto; }
.account-page-title { text-align:center; font:600 clamp(20px,3vw,27px) Pixel,monospace; overflow-wrap:anywhere; }
#account-link img { width:24px; height:24px; object-fit:contain; }
.sign-in-card .account-neutral { display:block; width:96px; height:96px; margin:0 auto 20px; object-fit:contain; image-rendering:pixelated; }
.own-account .account-heading { justify-content:flex-end; margin:0; }
.own-account .account-heading h1 { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.own-account #profile-status { margin:0 0 16px; }
.own-summary { display:grid; grid-template-columns:96px minmax(0,1fr) auto; align-items:start; gap:20px; margin:0 0 28px; padding-bottom:24px; border-bottom:1px solid var(--line); }
.own-summary .account-neutral { width:96px; height:96px; object-fit:contain; image-rendering:pixelated; }
.own-summary-copy { min-width:0; overflow-wrap:anywhere; }
.own-summary h2 { margin:0; font-size:clamp(26px,4vw,40px); }
#summary-handle { margin:4px 0 12px; color:var(--muted); }
#summary-bio { margin:0; white-space:pre-wrap; }
#edit-open { border:1px solid #78efc2; border-radius:6px; padding:10px 16px; color:#a6f5d3; }
.own-account #profile-create { margin:8px 0 28px; }
.own-account #profile-form { margin:0 0 24px; }
.own-account .device-card,.own-account .following-card { margin:20px 0 0; box-shadow:none; }
.own-account .device-card h2,.own-account .following-card h2 { margin-bottom:14px; }
.device-card p { color:var(--muted); margin:0 0 12px; }
.device-card a { display:flex; justify-content:space-between; align-items:center; min-height:48px; gap:16px; padding:10px 0; border-top:1px solid var(--line); color:var(--ink); text-decoration:none; }
.device-card a:hover { color:#78efc2; }
.account-footer { display:none; }
@media(max-width:700px) {
 .accounts-page.own-profile-route .masthead { grid-template-columns:44px minmax(0,1fr) 44px; gap:8px; }
 .own-profile-route .wordmark { width:44px; min-height:44px; justify-content:center; }
 .own-profile-route .wordmark img.brand-name,.own-profile-route #account-link span { display:none; }
 .own-profile-route #account-link { width:44px; }
 .account-page-title { font-size:21px; }
 .own-account .account-heading { margin-bottom:4px; }
 .own-summary { grid-template-columns:96px minmax(0,1fr); gap:12px 16px; }
 .own-summary .account-neutral { grid-column:1; grid-row:1; }
 #edit-open { grid-column:2; grid-row:1; justify-self:end; align-self:center; }
 .own-summary-copy { grid-column:1 / -1; grid-row:2; }
 .own-account .device-card,.own-account .following-card { padding:18px 0; border:0; border-top:1px solid var(--line); border-radius:0; background:transparent; }
 .accounts-page.own-profile-route .account-main { padding-bottom:calc(96px + env(safe-area-inset-bottom)); }
 .account-footer:not([hidden]) { position:fixed; inset:auto 0 0; z-index:20; display:grid; grid-template-columns:repeat(5,1fr); align-items:center; min-height:64px; padding:5px max(10px,env(safe-area-inset-right)) calc(5px + env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left)); border-top:1px solid var(--line); background:#06111bed; }
 .account-footer a { display:grid; place-items:center; min-height:48px; min-width:44px; color:var(--ink); }
 .account-footer img { width:28px; height:28px; object-fit:contain; filter:brightness(0) invert(83%); }
 .account-footer [aria-current=page] img { filter:brightness(0) saturate(100%) invert(89%) sepia(37%) saturate(663%) hue-rotate(94deg); }
 .account-footer .wordmark-swords { width:42px; height:42px; transform:scale(.82); }
}