.fx-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 1.4em 0; }
.fx-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.prose .fx-grid, .prose .fx-grid > * + * { margin-top: 0; }
.prose .fx-grid { margin: 1.4em 0; }
.prose .fx-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 12px 14px; margin: 0; }
.fx-card .fx-svg { width: 100%; max-width: 140px; margin: 0 auto 8px; }
.fx-card__name { display: block; color: var(--ink); font-weight: 600; font-size: 0.95rem; line-height: 1.3; margin-bottom: 0.25em; }
.fx-card__text { display: block; font-size: 0.86rem; line-height: 1.45; color: var(--ink-2, #4a4742); }
.fx-anatomy { margin: 1.8em 0; padding: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.fx-anatomy { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.fx-anatomy .fx-svg { width: 100%; min-width: 560px; }
.fx-svg .body { fill: #fff; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; }
.fx-svg .thr { stroke: var(--ink); stroke-width: 1.1; }
.fx-svg .hid { fill: none; stroke: var(--ink); stroke-width: 1.1; stroke-dasharray: 3 2.5; }
.fx-svg .surf { stroke: #a8a298; stroke-width: 1.6; stroke-dasharray: 5 3; }
.fx-svg .rec { fill: var(--accent); }
.fx-svg .rnd { stroke: var(--accent); stroke-width: 4; stroke-linejoin: round; }
.fx-svg .recl { stroke: var(--accent); stroke-width: 1.6; }
.fx-svg .pin { fill: #fff; }
.fx-svg .dim { stroke: var(--accent); stroke-width: 1.2; }
.fx-svg .arr { marker-start: url(#fx-arrow); marker-end: url(#fx-arrow); }
.fx-svg .ldr { stroke: var(--ink); stroke-width: 1; }
.fx-svg text { font-family: var(--font); font-size: 15px; font-weight: 600; fill: var(--ink); }
.fx-svg text.sm { font-size: 13px; }
.fx-svg text.acc { fill: var(--accent-ink); }
.fx-name { display: flex; flex-wrap: wrap; gap: 8px; margin: 1.2em 0; }
.fx-name__part { flex: 1 1 auto; min-width: 88px; background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--accent); border-radius: 8px; padding: 8px 10px; }
.fx-name__val { display: block; font-family: var(--mono); font-size: 1.05rem; font-weight: 600; }
.fx-name__key { display: block; font-size: 0.78rem; color: var(--ink-2, #4a4742); margin-top: 2px; }
.fx-examples { list-style: none; padding: 0; margin: 1em 0; }
.fx-examples li { font-family: var(--mono); font-size: 0.92rem; padding: 7px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); margin: 0 0 6px; }
@media (max-width: 640px) { .fx-grid, .fx-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }