.sf-hero{padding:clamp(28px,4vw,44px) 0 clamp(20px,3vw,32px)}.sf-hero h1{margin:14px 0;max-width:20ch;font-size:clamp(2rem,4.6vw,3.1rem);font-weight:800;line-height:1.08;letter-spacing:-.03em}.sf-hero .lede{margin:0 0 24px;max-width:62ch;font-size:clamp(1rem,1.8vw,1.14rem);line-height:1.55;color:var(--ink-soft)}.sf-hero .lede mark{background:#ec0b8c29;color:var(--magenta-deep);padding:0 .2em;border-radius:3px;font-weight:600}.sf-hero .answer-box{margin-inline:0;max-width:74ch}.sf-filters{position:sticky;top:var(--header-h);z-index:40;background:#fffffff0;backdrop-filter:blur(10px);border-bottom:1px solid var(--line);padding:14px 0}.sf-chips{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.sf-chip{font-family:var(--font-display);font-size:.86rem;font-weight:650;border:1px solid var(--line);background:var(--white);color:var(--ink-soft);border-radius:var(--r-pill);padding:8px 15px;cursor:pointer;transition:border-color .15s var(--ease),background .15s var(--ease),color .15s var(--ease)}.sf-chip:hover{border-color:var(--violet);color:var(--ink)}.sf-chip[aria-pressed=true]{background:var(--magenta);border-color:var(--magenta);color:#fff}.sf-chip.all{border-color:var(--ink);color:var(--ink)}.sf-chip.all[aria-pressed=true]{background:var(--ink);border-color:var(--ink)}.sf-cols{display:grid;grid-template-columns:230px 1fr;gap:clamp(32px,4vw,52px);padding:24px 0 clamp(40px,5vw,56px)}@media(max-width:980px){.sf-cols{grid-template-columns:1fr;gap:0}}.sf-toc{position:sticky;top:calc(var(--header-h) + 68px);align-self:start;font-size:.9rem}@media(max-width:980px){.sf-toc{display:none}}.sf-toc h3{font-family:var(--font-mono);font-size:.68rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);margin:0 0 12px}.sf-toc ul{list-style:none;margin:0;padding:0}.sf-toc li{margin:0 0 9px}.sf-toc a{color:var(--ink-soft);text-decoration:none;font-weight:600;display:flex;justify-content:space-between;gap:10px}.sf-toc a span{font-family:var(--font-mono);font-size:.75rem;color:var(--magenta)}.sf-toc a:hover{color:var(--violet)}.sf-howto{background:var(--white);border:1px solid var(--line);border-radius:var(--r-card);padding:26px 28px;margin-bottom:clamp(32px,4vw,44px)}.sf-howto h2{font-size:1.3rem;margin:0 0 14px}.sf-howto ol{margin:0;padding-left:20px}.sf-howto li{margin-bottom:10px;font-size:1rem;line-height:1.55;color:var(--ink-soft)}.sf-howto li:last-child{margin-bottom:0}.sf-howto mark{background:#ec0b8c29;color:var(--magenta-deep);padding:0 .2em;border-radius:3px;font-weight:600}.sf-cat{margin-bottom:clamp(36px,5vw,52px);scroll-margin-top:calc(var(--header-h) + 80px)}.sf-cat h2{font-size:clamp(1.3rem,2.4vw,1.7rem);margin:0 0 6px}.sf-cat .sf-why{color:var(--ink-soft);font-size:.98rem;max-width:62ch;margin:0 0 18px}.sf-hooks{list-style:none;margin:0;padding:0}.sf-hook{display:grid;grid-template-columns:32px 1fr auto;gap:14px;align-items:start;background:var(--white);border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin-bottom:9px;transition:border-color .15s var(--ease)}.sf-hook.sf-hide{display:none}.sf-hook .num{font-family:var(--font-mono);font-size:.78rem;color:var(--magenta);padding-top:3px}.sf-hook .txt{font-size:1rem;font-weight:650;line-height:1.45;letter-spacing:-.005em}.sf-copy{font-family:var(--font-display);font-size:.72rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;border:1px solid var(--line);background:transparent;color:var(--ink-soft);border-radius:7px;padding:7px 12px;cursor:pointer;transition:border-color .15s var(--ease),color .15s var(--ease),background .15s var(--ease)}.sf-copy:hover{border-color:var(--violet);color:var(--violet)}.sf-copy.sf-done{background:#128a4e;border-color:#128a4e;color:#fff}.sf-byline{display:flex;gap:12px;align-items:center;font-size:.88rem;color:var(--ink-soft);border-top:1px solid var(--line);padding-top:20px;margin-bottom:clamp(32px,4vw,44px)}.sf-byline .avatar{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--violet),var(--magenta));flex:none}.sf-byline strong{color:var(--ink)}@media(max-width:640px){.sf-hook{grid-template-columns:24px 1fr;grid-template-rows:auto auto}.sf-copy{grid-column:1/-1;justify-self:start}}