:root { --red:#ff3b30; --amber:#f6b800; --green:#34c759; --blue:#2767b2; --ink:#19191d; --muted:#707078; --line:#e5e7eb; }
* { box-sizing: border-box; }
body { margin:0; min-width:1080px; background:radial-gradient(circle at 50% -10%,#fff 0,#f7f7f8 38%,#f1f2f4 100%); color:var(--ink); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif; }
button { font:inherit; cursor:pointer; }
.topbar { height:70px; position:sticky; top:0; z-index:10; display:flex; align-items:center; gap:42px; padding:0 5vw; background:#fff; box-shadow:0 1px 0 rgb(0 0 0 / 8%); direction:ltr; }
.network-mark { display:flex; align-items:center; gap:10px; color:var(--ink); font-size:18px; font-weight:760; letter-spacing:-.45px; text-decoration:none; }
.network-mark span { width:22px; height:22px; border-radius:50%; background:var(--red); box-shadow:inset 0 0 0 2px rgb(255 255 255 / 35%),0 4px 10px rgb(255 59 48 / 25%); }
.topbar nav { align-self:stretch; display:flex; align-items:stretch; gap:34px; }
.topbar nav a { display:flex; align-items:center; border-bottom:3px solid transparent; color:#5d636b; font-size:14px; }
.topbar nav .active { color:#111827; border-color:#1d68a7; }
.top-actions { margin-left:auto; display:flex; align-items:center; gap:16px; }
.top-actions button { border:1px solid #ffd1d9; border-radius:999px; padding:9px 15px; background:#fff5f6; color:#b71932; font-weight:700; }
.layout { width:min(1420px,92vw); margin:32px auto; display:grid; grid-template-columns:260px minmax(500px,680px) 350px; gap:24px; direction:ltr; align-items:start; }
.profile-card,.composer,.post,.extension-card { background:#fff; border:1px solid #e1e4e8; border-radius:14px; box-shadow:0 2px 8px rgb(0 0 0 / 3%); }
.profile-card { text-align:center; overflow:hidden; direction:ltr; }
.cover { height:78px; background:linear-gradient(135deg,#cae8f4,#6dafca 55%,#285d7c); }
.avatar { position:relative; display:grid; place-items:center; width:48px; height:48px; border-radius:50%; color:#fff; font-weight:800; }
.avatar-small { width:34px; height:34px; font-size:11px; }
.avatar-large { width:92px; height:92px; margin:-48px auto 12px; border:4px solid #fff; font-size:22px; }
.purple { background:linear-gradient(145deg,#6d5bd0,#2a2568); }
.profile-card h2 { margin:0; font-size:18px; }
.profile-card > p { margin:7px 15px 20px; color:var(--muted); font-size:12px; }
.profile-stat { display:flex; justify-content:space-between; padding:12px 18px; border-top:1px solid var(--line); color:var(--muted); font-size:12px; }
.profile-stat strong { color:#1f63a8; }
.feed { display:grid; gap:14px; }
.composer { height:86px; padding:18px; display:flex; align-items:center; gap:12px; }
.composer > div:last-child { flex:1; padding:14px 18px; border:1px solid #d7dbe0; border-radius:999px; color:#747981; }
.post { padding:18px 20px 0; direction:ltr; }
.post header { display:flex; align-items:center; gap:12px; }
.post header > div:nth-child(2) { flex:1; }
.post h3 { margin:0 0 4px; font-size:15px; }
.post header p { margin:0; color:var(--muted); font-size:11px; }
.post header > button { align-self:flex-start; border:0; background:transparent; color:#646971; letter-spacing:2px; }
.post > p { margin:15px 2px 22px; font-size:14px; line-height:1.55; }
.photo { position:relative; width:54px; height:54px; flex:0 0 auto; border-radius:50%; display:grid; place-items:center; color:#fff; font-weight:800; }
.maya { background:linear-gradient(145deg,#c75f7d,#64223b); }
.daniel { background:linear-gradient(145deg,#31a599,#155b64); }
.noa { background:linear-gradient(145deg,#e79c50,#8b4c19); }
.badge { width:29%; height:29%; min-width:10px; min-height:10px; max-width:36px; max-height:36px; position:absolute; right:-3px; bottom:-3px; border:2px solid #fff; border-radius:50%; display:grid; place-items:center; box-shadow:0 2px 6px rgb(0 0 0 / 20%); }
.badge svg { width:78%; height:78%; display:block; }
.badge.love { background:var(--red); }
.badge.coffee { background:#ffb400; }
.badge.partner { background:#32c55b; }
.photo em { position:absolute; z-index:2; right:-106px; bottom:-17px; width:max-content; padding:6px 9px; border-radius:7px; background:#202126; color:#fff; font-size:10px; font-style:normal; font-weight:650; }
.post-actions { height:47px; border-top:1px solid var(--line); display:flex; align-items:center; justify-content:space-around; color:#666b72; font-size:12px; }
.extension-card { position:sticky; top:94px; padding:18px 18px 14px; direction:ltr; background:#fdfdfd; box-shadow:0 12px 35px rgb(0 0 0 / 6%); }
.extension-title { display:flex; align-items:center; gap:9px; padding-bottom:16px; border-bottom:1px solid var(--line); color:var(--ink); text-decoration:none; }
.extension-title > span { width:18px; height:18px; border-radius:50%; background:var(--red); box-shadow:inset 0 0 0 2px rgb(255 255 255 / 35%),0 4px 10px rgb(255 59 48 / 25%); }
.extension-title strong { font-size:21px; font-weight:760; letter-spacing:-.6px; }
.extension-eyebrow { margin-top:18px; color:var(--red); font-size:9px; font-weight:800; letter-spacing:1.2px; }
.extension-card h1 { margin:6px 0 4px; font-size:22px; line-height:1.15; letter-spacing:-.6px; }
.extension-card > p { margin:0 0 16px; color:var(--muted); font-size:12px; }
.demo-signals { display:grid; gap:7px; }
.demo-signals button { position:relative; display:grid; grid-template-columns:39px minmax(0,1fr) 20px; align-items:center; gap:9px; min-height:59px; padding:7px 11px; border:1px solid var(--line); border-radius:16px; background:#fff; color:inherit; text-align:left; transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease,background .16s ease; }
.demo-signals button:hover { transform:translateY(-1px); box-shadow:0 5px 14px rgb(0 0 0 / 6%); }
.demo-signals button.selected { background:#fff9f9; box-shadow:0 6px 18px rgb(0 0 0 / 6%); }
.demo-signals button[data-signal="love"].selected { border-color:rgb(255 59 48 / 55%); background:rgb(255 59 48 / 6%); }
.demo-signals button[data-signal="coffee"].selected { border-color:rgb(246 184 0 / 60%); background:rgb(246 184 0 / 8%); }
.demo-signals button[data-signal="partner"].selected { border-color:rgb(52 199 89 / 60%); background:rgb(52 199 89 / 7%); }
.status-icon { width:39px; height:39px; display:grid; place-items:center; border-radius:50%; }
.status-icon.love { background:#ff3b45; }.status-icon.coffee { background:#ffb400; }.status-icon.partnership { background:#32c55b; }
.status-icon svg { width:23px; height:23px; display:block; }
.demo-signals button span { min-width:0; display:grid; gap:2px; }.demo-signals b { font-size:14px; }.demo-signals small { color:var(--muted); font-size:10px; white-space:nowrap; }
.demo-signals mark { width:19px; height:19px; display:none; place-items:center; border-radius:50%; background:#1c1c20; color:#fff; font-size:11px; }
.demo-signals button[data-signal="love"] mark { background:var(--red); }.demo-signals button[data-signal="coffee"] mark { background:var(--amber); }.demo-signals button[data-signal="partner"] mark { background:var(--green); }
.demo-signals button.selected mark { display:grid; }
.demo-visible { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:10px; padding:10px 12px; border:1px solid #e2e7f3; border-radius:17px; background:#fafbfe; cursor:pointer; }
.demo-visible > span { min-width:0; display:grid; gap:3px; }.demo-visible b { font-size:12px; }.demo-visible small { color:var(--muted); font-size:9px; line-height:1.25; }
.demo-visible input { position:absolute; opacity:0; }.demo-visible i { flex:0 0 auto; width:38px; height:22px; padding:3px; border-radius:999px; background:#c9ccd2; transition:.15s; }
.demo-visible i::after { content:""; display:block; width:16px; height:16px; border-radius:50%; background:#fff; box-shadow:0 1px 4px rgb(0 0 0 / 20%); transition:.15s; }
.demo-visible input:checked + i { background:#32c55b; }.demo-visible input:checked + i::after { transform:translateX(16px); }
.demo-feedback { min-height:20px; padding-top:8px; color:#1a7a49; text-align:center; font-size:10px; }
.extension-card footer { margin-top:3px; padding:10px 7px 0; display:flex; justify-content:space-between; border-top:1px solid #e4e5e8; color:#9b9ca2; font-size:9px; }
.extension-card footer a { color:#1771d0; font-weight:700; text-decoration:none; }
.site-footer { width:min(1420px,92vw); margin:8px auto 0; padding:0 0 34px; }
.site-footer .footer-inner { padding-top:22px; display:flex; align-items:center; justify-content:space-between; gap:24px; border-top:1px solid #d9d9de; color:#8b8b92; font-size:11px; }
.site-footer .footer-links { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:8px; }
.site-footer .footer-links a { padding:9px 12px; border:1px solid #dcdce1; border-radius:11px; background:#ffffffa8; color:#4d4d53; font-weight:650; text-decoration:none; transition:background .18s ease,border-color .18s ease,color .18s ease,transform .18s ease; }
.site-footer .footer-links a:hover { transform:translateY(-1px); border-color:#c5c5cb; background:#fff; color:var(--ink); }
.site-footer .footer-links a:focus-visible { outline:2px solid #1771d0; outline-offset:2px; }
.site-footer .back-top { white-space:nowrap; }
.signals-hidden .badge,.signals-hidden .photo em { display:none; }
.toast { position:fixed; left:50%; bottom:30px; transform:translate(-50%,20px); padding:12px 18px; border-radius:999px; background:#1d1d21; color:#fff; font-size:12px; opacity:0; pointer-events:none; transition:.2s; box-shadow:0 8px 25px rgb(0 0 0 / 22%); }
.toast.show { opacity:1; transform:translate(-50%,0); }
@media (max-width:1200px) { .layout { grid-template-columns:220px minmax(460px,1fr) 330px; gap:16px; } .topbar { padding:0 3vw; } }