.fans { --fan-accent:var(--primary); }
.fan-hero { margin:2rem 0; padding:clamp(1.3rem,4vw,2.5rem); background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); border-top:5px solid var(--fan-accent); }
.fan-hero h1 { font-size:clamp(1.9rem,4.5vw,2.8rem); line-height:1.18; margin:.6rem 0 1.2rem; }
.fan-hero .lead { max-width:55ch; }
.fan-byline,.fan-small,.fan-citations,.fan-diagram figcaption { font-size:.85rem; color:var(--text-muted); }
.fan-answer { font-size:1.1rem; line-height:1.8; margin-bottom:0; }
.fan-start,.fan-toc { display:grid; gap:.7rem; padding:1.4rem; background:var(--surface-2); border-radius:var(--radius); margin-bottom:2rem; }
.fan-start h2 { margin:0 0 .3rem; }
.fan-toc a { text-underline-offset:3px; }
.fan-group { margin:2.5rem 0; }
.fan-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
.fan-card { display:flex; flex-direction:column; gap:.5rem; border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); padding:1.4rem; color:var(--text); text-decoration:none; }
.fan-card:hover,.fan-card:focus-visible { border-color:var(--primary); }
.fan-card h3 { font-size:1.15rem; line-height:1.4; margin:0; }
.fan-card p { color:var(--text-muted); font-size:.92rem; line-height:1.65; margin:.2rem 0; }
.fan-card-link { margin-top:auto; padding-top:.7rem; color:var(--primary); font-weight:700; }
.fan-article section { margin:2.6rem 0; scroll-margin-top:6rem; }
.fan-article section h2 { font-size:1.5rem; line-height:1.4; }
.fan-article p,.fan-article li { line-height:1.85; }
.fan-article li { margin:.5rem 0; }
.fan-table-wrap { overflow-x:auto; border:1px solid var(--border); border-radius:.6rem; margin:1.3rem 0; }
.fan-table-wrap table { border-collapse:collapse; width:100%; font-size:.94rem; }
.fan-table-wrap th,.fan-table-wrap td { text-align:left; padding:.9rem; min-width:125px; border-bottom:1px solid var(--border); vertical-align:top; }
.fan-table-wrap th { background:var(--surface-2); }
.fan-table-wrap tr:last-child td { border-bottom:0; }
.fan-citations a,.fan-method a { overflow-wrap:anywhere; }
.fan-method { border:1px solid var(--border); border-radius:var(--radius); background:var(--surface-2); padding:1.4rem; margin:2rem 0; }
.fan-method h2 { margin-top:0; }
.fan-next { border-top:1px solid var(--border); padding-top:1.4rem; }
.fan-tool { background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius); padding:1.3rem; }
.fan-inputs { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; margin-bottom:1.3rem; }
.fan-inputs label { display:flex; flex-direction:column; gap:.4rem; font-weight:600; font-size:.9rem; }
.fan-inputs input { width:100%; box-sizing:border-box; background:var(--surface); color:var(--text); border:1px solid var(--border); padding:.7rem; border-radius:.4rem; font:inherit; }
.fan-tool button { cursor:pointer; font:inherit; }
#grid-result { font-weight:700; }
#grid-preview { display:block; width:100%; max-height:340px; background:var(--surface); margin:1rem 0; overflow:visible; }
.fan-diagram { margin:1.5rem 0; }
.fan-diagram svg { display:block; width:100%; height:auto; background:var(--surface-2); border-radius:var(--radius); }
.fan-diagram text { font:16px system-ui,sans-serif; fill:var(--text); }
@media(max-width:600px) { .fan-grid,.fan-inputs { grid-template-columns:1fr; } .fan-hero { margin-top:1rem; } .fan-table-wrap th,.fan-table-wrap td { padding:.65rem; min-width:110px; } }