:root { color-scheme: light dark; --ink:#172033; --muted:#63708a; --surface:#fffdf9; --tint:#f0edff; --line:#dcdcea; --accent:#7357e8; --accent-soft:#e6e0ff; --glow:#ffca76; }
:root[data-theme="dark"] { --ink:#f3f0ff; --muted:#b7b2ca; --surface:#151322; --tint:#211d35; --line:#36304f; --accent:#a996ff; --accent-soft:#332b5d; --glow:#f7b65f; }
* { box-sizing:border-box; } body { margin:0; min-width:320px; background:var(--surface); color:var(--ink); font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; transition:background .25s,color .25s; }
.landing-shell { min-height:100svh; max-width:1180px; margin:auto; padding:28px clamp(24px, 7vw, 88px) 34px; display:flex; flex-direction:column; background:radial-gradient(circle at 78% 36%, var(--accent-soft) 0, transparent 23rem), radial-gradient(circle at 12% 95%, color-mix(in srgb, var(--glow) 20%, transparent) 0, transparent 20rem); }
.topbar { display:flex; justify-content:space-between; align-items:center; }.brand { color:var(--ink); text-decoration:none; font-size:1.12rem; font-weight:760; letter-spacing:-.04em; }.brand-mark { color:var(--accent); font-size:1.42rem; vertical-align:-2px; margin-right:4px; }
.theme-toggle { appearance:none; border:1px solid var(--line); background:color-mix(in srgb, var(--surface) 72%, transparent); color:var(--ink); border-radius:99px; padding:9px 13px; display:flex; gap:7px; align-items:center; cursor:pointer; font:inherit; font-size:.85rem; }.theme-toggle:hover { border-color:var(--accent); }
.nav-actions { display:flex; gap:10px; align-items:center; }.nav-actions form { margin:0; }.text-link { color:var(--ink); border:0; background:transparent; font:inherit; font-size:.88rem; text-decoration:none; cursor:pointer; padding:8px 5px; }.text-link:hover { color:var(--accent); }
.hero { flex:1; display:flex; flex-direction:column; justify-content:center; padding:clamp(78px, 14vh, 145px) 0 80px; }.eyebrow { color:var(--accent); font-weight:750; font-size:.76rem; letter-spacing:.15em; text-transform:uppercase; margin:0 0 20px; }.hero h1 { font-size:clamp(3.25rem, 8vw, 7.3rem); line-height:.93; letter-spacing:-.075em; margin:0; max-width:850px; }.hero h1 em { font-family:Georgia, serif; font-weight:400; letter-spacing:-.09em; color:var(--accent); }.intro { font-size:clamp(1rem, 1.5vw, 1.2rem); color:var(--muted); line-height:1.65; max-width:520px; margin:32px 0; }.status-card { display:flex; gap:14px; align-items:flex-start; max-width:460px; padding:18px 20px; border:1px solid var(--line); border-radius:16px; background:color-mix(in srgb, var(--surface) 87%, transparent); box-shadow:0 12px 35px color-mix(in srgb, var(--ink) 7%, transparent); }.status-card strong { font-size:.95rem; }.status-card p { margin:4px 0 0; color:var(--muted); font-size:.9rem; line-height:1.45; }.status-dot { width:10px; height:10px; flex:0 0 auto; margin-top:5px; border-radius:50%; background:#49ba7a; box-shadow:0 0 0 5px color-mix(in srgb, #49ba7a 17%, transparent); } footer { color:var(--muted); font-size:.78rem; } footer span { margin:0 7px; color:var(--line); }
@media (max-width:560px) { .landing-shell { padding-top:20px; }.hero { padding-top:80px; }.theme-toggle span:last-child { display:none; }.theme-toggle { padding:9px 11px; } footer span, footer { line-height:1.7; } }
.auth-shell { min-height:100svh; padding:28px clamp(24px, 7vw, 88px); background:radial-gradient(circle at 80% 15%, var(--accent-soft), transparent 29rem), var(--surface); }.auth-card { width:min(100%, 510px); margin:clamp(60px, 12vh, 130px) auto 30px; padding:clamp(26px, 5vw, 44px); border:1px solid var(--line); border-radius:22px; background:color-mix(in srgb, var(--surface) 91%, transparent); box-shadow:0 18px 50px color-mix(in srgb, var(--ink) 9%, transparent); }.auth-card h1 { margin:0; letter-spacing:-.05em; font-size:clamp(2rem, 4vw, 2.7rem); }.auth-intro { color:var(--muted); line-height:1.55; }.auth-card form { margin-top:25px; display:grid; gap:14px; }.auth-card label { display:grid; gap:6px; font-weight:650; font-size:.9rem; }.auth-card label span { color:var(--muted); font-size:.78rem; font-weight:400; }.auth-card input { min-height:46px; border:1px solid var(--line); border-radius:10px; padding:10px 12px; color:var(--ink); background:var(--surface); font:inherit; }.auth-card input:focus { outline:3px solid color-mix(in srgb, var(--accent) 24%, transparent); border-color:var(--accent); }.primary-button { margin-top:7px; min-height:47px; border:0; border-radius:10px; background:var(--accent); color:white; cursor:pointer; font:inherit; font-weight:720; }.primary-button:hover { filter:brightness(1.08); }.form-error { padding:11px 13px; border-radius:10px; background:#fce6e8; color:#9d2636; }.field-error { color:#b12b40; line-height:1.35; margin-top:-9px; }
.auth-card textarea { resize:vertical; min-height:110px; border:1px solid var(--line); border-radius:10px; padding:10px 12px; color:var(--ink); background:var(--surface); font:inherit; line-height:1.45; }.auth-card textarea:focus { outline:3px solid color-mix(in srgb, var(--accent) 24%, transparent); border-color:var(--accent); }.profile-shell { min-height:100svh; padding:28px clamp(24px, 7vw, 88px); background:radial-gradient(circle at 84% 22%, var(--accent-soft), transparent 26rem), var(--surface); }.profile-card { width:min(100%, 650px); margin:clamp(58px, 11vh, 120px) auto; padding:clamp(30px, 6vw, 58px); border:1px solid var(--line); border-radius:24px; background:color-mix(in srgb, var(--surface) 92%, transparent); box-shadow:0 18px 50px color-mix(in srgb, var(--ink) 9%, transparent); }.avatar-placeholder { display:grid; place-items:center; width:76px; height:76px; margin-bottom:30px; border-radius:50%; background:var(--accent-soft); color:var(--accent); font-size:2rem; font-weight:760; }.profile-card h1 { margin:0; letter-spacing:-.05em; font-size:clamp(2rem, 4vw, 3rem); }.handle { color:var(--accent); font-weight:650; margin:8px 0 28px; }.bio { min-height:54px; color:var(--muted); line-height:1.65; white-space:normal; }.button-link { display:inline-grid; place-items:center; padding:0 18px; text-decoration:none; margin-top:18px; }
.profile-avatar { width:76px; height:76px; margin-bottom:30px; border-radius:50%; object-fit:cover; border:3px solid var(--accent-soft); }.avatar-form { display:grid; gap:10px; margin-top:27px; padding:18px; border:1px solid var(--line); border-radius:14px; }.avatar-form label { display:grid; gap:4px; font-weight:680; font-size:.9rem; }.avatar-form label span { color:var(--muted); font-size:.78rem; font-weight:400; }.avatar-form input { max-width:100%; color:var(--muted); }.secondary-button { justify-self:start; min-height:39px; padding:0 13px; border:1px solid var(--line); border-radius:9px; color:var(--ink); background:var(--surface); cursor:pointer; font:inherit; font-size:.88rem; }.secondary-button:hover { border-color:var(--accent); }.profile-notice { color:#187448; font-weight:620; }
.public-link { display:grid; gap:5px; margin:24px 0 0; padding:14px 16px; border-radius:12px; background:var(--tint); font-size:.86rem; }.public-link span { color:var(--muted); font-size:.76rem; font-weight:650; text-transform:uppercase; letter-spacing:.08em; }.public-link a { color:var(--accent); font-weight:700; overflow-wrap:anywhere; }.public-profile .avatar-placeholder, .public-profile .profile-avatar { margin-top:8px; }