/* Shattered Moments: clear typography, electric blue, and one warm accent. */
:root,html[data-theme=light]{--page:#f2f5fa;--surface:#fff;--ink:#14213d;--line:#dce3ef;--muted:#53647b;--accent:#4b38ec;--soft:#efedff;--on-accent:#fff;--fuse:#e35c48}
html[data-theme=dark]{--page:#0e1422;--surface:#182236;--ink:#f4f7ff;--line:#34425a;--muted:#b3c0d5;--accent:#b9adff;--soft:#30294e;--on-accent:#101b34;--fuse:#ff947f}
html[data-theme=midnight]{--fuse:#ff947f}
body{font-family:Inter,ui-sans-serif,system-ui,-apple-system,sans-serif}
header{border-bottom:1px solid var(--line);box-shadow:none}
.logo{font-size:32px;letter-spacing:-1.2px;gap:11px;font-weight:800;line-height:1.2}
.brand-name{white-space:nowrap;color:var(--ink)}
.brand-fuse{color:var(--fuse,#e35c48)}
html[data-theme] .mark{width:42px;height:42px;border-radius:12px;background:#4b38ec;color:#fff;font-size:27px;font-weight:850;letter-spacing:-1px;box-shadow:none;position:relative}
.mark:after{content:"";position:absolute;right:-2px;bottom:-2px;width:11px;height:11px;border:2px solid var(--surface);border-radius:50%;background:#ff745d}
.shell{gap:28px;margin-top:26px}
.card{border-radius:16px;box-shadow:0 3px 12px #14213d03}
.nav button{font-size:15px;min-height:46px}
.nav button.active{box-shadow:none}
.nav .label{letter-spacing:1px;color:var(--muted)}
.topline h1{font-size:30px;font-weight:750;letter-spacing:-.8px}
.topline>.tiny{font-weight:700;letter-spacing:1px}
.topline p{font-size:16px;line-height:1.5}
.primary,.security-signin{border-radius:10px;font-weight:700;min-height:44px;background:var(--accent);color:var(--on-accent)}
.follow,.theme-toggle{min-height:40px}
.primary:hover,.security-signin:hover{filter:brightness(.94)}
.compose textarea{font-size:16px;line-height:1.5;min-height:78px}
.compose textarea::placeholder{color:var(--muted)}
.community-profile .circle{outline-color:var(--accent)}
.right .welcome,html[data-theme] .right .welcome{background:#231c4c;color:#fff;min-height:190px;border:0;padding:25px}
.welcome h2{font-size:29px;line-height:1.2;letter-spacing:-.8px;font-weight:750}
.welcome h2:after{content:"";display:block;width:30px;height:4px;background:#ff745d;border-radius:3px;margin-top:16px}
.welcome p,html[data-theme] .welcome p{color:#e5ecff;font-size:16px;line-height:1.5;margin-bottom:0}
.welcome .ring{display:none}
.right h2{letter-spacing:-.2px}
.right .footer{font-size:13px;line-height:1.65;color:var(--muted)}
.signin-card h2,.security-card h2,.age-card h2{letter-spacing:-.6px}
.security-card>p,.age-card>p{font-size:16px;line-height:1.6}
.legal-brand{color:var(--ink)}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
@media(max-width:700px){.logo{font-size:27px;gap:9px}html[data-theme] .mark{width:36px;height:36px;font-size:24px;border-radius:10px}.shell{margin-top:20px}.topline h1{font-size:26px}.topline p{font-size:16px}.card{border-radius:13px}.header-tools{gap:8px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important}}

/* Shattered Moments: the fractured M is the persistent brand anchor. */
.logo{gap:12px;min-width:0;align-items:center}
.brand-mark{display:block;width:48px;height:48px;flex-shrink:0;object-fit:contain}
.brand-name{display:flex;flex-direction:column;gap:1px;white-space:normal;font-size:23px;line-height:1.04;font-weight:800;letter-spacing:-.65px}
.brand-moments{color:var(--fuse,#e35c48);font-size:21px;letter-spacing:-.5px}
.signin-brand{display:block;width:76px;height:76px;object-fit:contain;margin:0 auto 18px}
.legal-brand-icon{width:34px;height:34px;vertical-align:middle;object-fit:contain;margin-right:9px}
@media(max-width:480px){.logo{gap:9px}.brand-mark{width:42px;height:42px}.brand-name{font-size:21px}.brand-moments{font-size:19px}}

.brand-mark,.signin-brand,.legal-brand-icon{background:#fff;border-radius:12px;padding:4px;box-sizing:border-box}.signin-brand{padding:8px;border-radius:18px}.legal-brand-icon{padding:2px;border-radius:8px}

/* Supplied logo v2: preserve the exact artwork and correct sizing across containers. */
.logo{max-inline-size:100%;min-inline-size:0;gap:clamp(8px,1.5vw,12px)}
.brand-mark{inline-size:clamp(40px,5vw,52px);block-size:auto;aspect-ratio:1;max-inline-size:100%;object-fit:contain;flex:0 0 auto;padding:0;background:#11132b;border-radius:12px}
.brand-name{min-inline-size:0;white-space:normal;font-size:clamp(18px,2.4vw,23px);overflow-wrap:anywhere}
.brand-moments{font-size:.92em;color:var(--fuse,#e35c48)}
.signin-brand,.legal-brand-icon{object-fit:contain;aspect-ratio:1;background:#11132b;padding:0;block-size:auto}
.signin-brand.brand-lockup{inline-size:min(280px,100%);block-size:auto;max-block-size:310px;max-inline-size:100%;aspect-ratio:auto;border-radius:16px;margin-inline:auto}
.brand-lockup.brand-compact-fallback{inline-size:96px;block-size:auto;aspect-ratio:1}
.legal-brand-icon{display:inline-block;inline-size:36px;max-inline-size:36px;flex-shrink:0;border-radius:9px}
@media(max-width:360px){.logo{gap:8px}.brand-mark{inline-size:40px}.brand-name{font-size:18px}.header-tools{max-inline-size:100%;flex-wrap:wrap}}

@media(max-height:700px){.signin-brand.brand-lockup{inline-size:min(220px,100%)}}