/* The Fractal Seed — one geometry, five plates.
   Warm field, hairlines, iris accent: same vocabulary as every other figure. */

.sd-cap{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);font-size:14.5px;line-height:1.6;color:var(--ink-3);min-height:2.6em;text-wrap:pretty}

/* the spiral */
.sd-ghost{fill:none;stroke:#C9C7D2;stroke-width:.9}
.sd-arc{fill:none;stroke:#3A3745;stroke-width:1.6;stroke-dasharray:1400;stroke-dashoffset:1400;animation:sd-draw 1.6s var(--ease) forwards}
.sd-arc.sd-still{stroke-dasharray:none;stroke-dashoffset:0;animation:none}
@keyframes sd-draw{to{stroke-dashoffset:0}}
.sd-inner{fill:none;stroke:#8B8895;stroke-width:1.05}
.sd-sel{fill:none;stroke:#5B21B6;stroke-width:2.5}
.sd-hit{fill:none;stroke:transparent;stroke-width:44}
.sd-travel{fill:#6D28D9}
.sd-node{fill:#6D28D9}
.sd-node-q{fill:#9A97A6}

.sd-face{cursor:pointer}
.sd-face:hover .sd-arc,.sd-face.on .sd-arc{stroke:#5B21B6;stroke-width:2.4}
.sd-face:focus-visible{outline:none}
.sd-face:focus-visible .sd-arc{stroke:#5B21B6;stroke-width:2.8}
.sd-face-k{font-family:var(--display);font-size:40px;font-style:italic;font-weight:400;fill:var(--ink)}
.sd-face.on .sd-face-k,.sd-face:hover .sd-face-k{fill:var(--iris-deep)}
.sd-face-term{font-family:var(--body);font-size:12.5px;font-weight:600;letter-spacing:.11em;fill:var(--ink-4)}
.sd-face.on .sd-face-term{fill:var(--iris)}

/* the file */
.sd-file{fill:#FFFFFF;stroke:#5E5B69;stroke-width:1.2}
.sd-file-lit{stroke:#5B21B6;stroke-width:1.7}
.sd-file-line{stroke:#6D28D9;stroke-width:1;opacity:.5}
.sd-core-lbl{font-family:var(--body);font-size:12.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;fill:var(--ink)}

/* annotation */
.sd-quiet{font-family:var(--body);font-size:13px;font-weight:400;fill:var(--ink-4)}
.sd-tick{stroke:#A6A3B2;stroke-width:1}
.sd-tick.on{stroke:#5B21B6;stroke-width:1.6}
.sd-lad{font-family:var(--body);font-size:15px;font-weight:400;fill:var(--ink-3)}
.sd-lad.on{fill:var(--iris-deep);font-weight:600}
.sd-ring-term{font-family:var(--body);font-size:14px;font-weight:500;fill:var(--ink)}

/* traces */
.sd-leader{stroke:#5B21B6;stroke-width:1.2;fill:none;stroke-dasharray:4 5;animation:sd-march 2s linear infinite}
@keyframes sd-march{to{stroke-dashoffset:-18}}
.sd-boundary{fill:none;stroke:#B9B6C4;stroke-width:1;stroke-dasharray:2 7}
.sd-spine-thin{stroke:#B9B6C4;stroke-width:1;fill:none;stroke-dasharray:2 6}
.sd-text-line{stroke:#3A3745;stroke-width:1.15}
.sd-chip{fill:#FFFFFF;stroke:#8B8895;stroke-width:1}
.sd-chip.on{fill:rgba(109,40,217,.16);stroke:rgba(109,40,217,.85);stroke-width:1.3}
.sd-open{fill:none;stroke:#6D28D9;stroke-width:1.3;stroke-dasharray:5 5}
.sd-prop{font-family:var(--body);font-size:15px;font-weight:500;fill:var(--iris-deep)}

/* capsule */
.sd-capsule{fill:rgba(109,40,217,.045);stroke:rgba(109,40,217,.5);stroke-width:1.3}
.sd-frag{font-family:var(--body);font-size:15px;font-weight:500;fill:var(--ink)}
.sd-frag-line{stroke:#5B21B6;stroke-width:1.25;fill:none;opacity:.9;stroke-dasharray:4 5;animation:sd-march 2.6s linear infinite}
.sd-ret-thin{stroke:#4A4754;stroke-width:1;fill:none;opacity:.75}
.sd-ret-dash{stroke:#6D28D9;stroke-width:1.3;fill:none;stroke-dasharray:5 5}
.sd-ret-solid{stroke:#5B21B6;stroke-width:2.2;fill:none}

/* loops */
.sd-act{fill:#5B21B6;transform-origin:center;transform-box:fill-box;animation:sd-act 7s var(--ease) infinite}
@keyframes sd-act{0%{opacity:.4;transform:scale(1)}5%{opacity:1;transform:scale(1.6)}20%,100%{opacity:.4;transform:scale(1)}}
.sd-between{stroke:#B9B6C4;stroke-width:1;fill:none;stroke-dasharray:3 6}

/* the altitude selector */
.sd-alts{display:flex;flex-wrap:wrap;justify-content:center;gap:7px;margin:0 0 clamp(14px,1.8vw,24px)}
.sd-alts button{font-family:var(--body);font-size:13px;font-weight:400;letter-spacing:.03em;color:var(--ink-3);background:transparent;border:1px solid var(--line-2);border-radius:999px;padding:6px 15px;cursor:pointer;transition:all .16s var(--ease)}
.sd-alts button:hover{color:var(--ink);border-color:#A6A3B2}
.sd-alts button.on{color:#fff;background:var(--iris);border-color:var(--iris)}
.sd-alts button:focus-visible{outline:1px solid var(--iris);outline-offset:2px}

@media (prefers-reduced-motion:reduce){
  .sd-arc{animation:none;stroke-dashoffset:0;stroke-dasharray:none}
  .sd-leader,.sd-frag-line,.sd-act{animation:none}
  .sd-travel{display:none}
}

/* the golden circle, and the same three set in motion */
.sd-gold{fill:none;stroke:#3A3745;stroke-width:1.5;stroke-dasharray:1800;stroke-dashoffset:1800;animation:sd-draw 1.7s var(--ease) forwards}
.sd-gold-core{fill:rgba(109,40,217,.1);stroke:#5B21B6;stroke-width:1.8;stroke-dasharray:1800;stroke-dashoffset:1800;animation:sd-draw 1.7s var(--ease) forwards}
.sd-gold-k{font-family:var(--display);font-size:30px;font-style:italic;font-weight:400;fill:var(--ink-2)}
.sd-hinge{stroke:#8B8895;stroke-width:1.2;fill:none}
.sd-ven-k{font-family:var(--display);font-size:44px;font-style:italic;font-weight:400;fill:var(--ink)}
.sd-ven-q{font-family:var(--body);font-size:14px;font-weight:400;fill:var(--ink-3)}
.sd-conv{stroke:#5B21B6;stroke-width:1.3;fill:none;stroke-dasharray:5 5;animation:sd-march 1.8s linear infinite}
@media (prefers-reduced-motion:reduce){.sd-gold,.sd-gold-core{animation:none;stroke-dashoffset:0;stroke-dasharray:none}}
.sd-halo{fill:none;stroke:rgba(109,40,217,.35);stroke-width:1.2;animation:sd-pulse 5s ease-in-out infinite}
@keyframes sd-pulse{0%,100%{opacity:.45}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){.sd-ven{animation:none;stroke-dashoffset:0;stroke-dasharray:none}.sd-lens,.sd-conv,.sd-halo{animation:none}}

/* how far one movement reaches */
.sd-axis{stroke:#4A4754;stroke-width:1.2;fill:none}
.sd-reach{fill:none;stroke:#3A3745;stroke-width:1.35;stroke-dasharray:2600;stroke-dashoffset:2600;animation:sd-draw 2s var(--ease) forwards}
.sd-env{stroke:#5B21B6;stroke-width:1.1;fill:none;stroke-dasharray:5 6;opacity:.75;animation:sd-march 2.4s linear infinite}
.sd-tick-d{stroke:#8B8895;stroke-width:1;stroke-dasharray:3 5}
.sd-reach-k{font-family:var(--body);font-size:14.5px;font-weight:500;fill:var(--ink-2)}
.sd-reach-on{font-family:var(--body);font-size:16px;font-weight:600;fill:var(--iris-deep)}
.sd-origin{fill:#FFFFFF;stroke:#5B21B6;stroke-width:2}
@media (prefers-reduced-motion:reduce){.sd-reach{animation:none;stroke-dashoffset:0;stroke-dasharray:none}.sd-env{animation:none}}

/* the seed, made into a document */
.sd-comp-k{font-family:var(--display);font-size:36px;font-style:italic;font-weight:400;fill:var(--iris-deep)}
.sd-page{fill:none;stroke:#5E5B69;stroke-width:1.3}
.sd-band-w{fill:rgba(109,40,217,.055)}
.sd-band-w2{fill:rgba(109,40,217,.085)}
.sd-band-rule{stroke:#C9C7D2;stroke-width:1}
.sd-doc-h{font-family:var(--display);font-size:21px;font-weight:500;fill:var(--ink)}
.sd-doc-s{font-family:var(--body);font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;fill:var(--ink-4)}
.sd-doc-line{stroke:#8B8895;stroke-width:1.4}
.sd-doc-lit{stroke:#5B21B6;stroke-width:2.6}
.sd-brace{fill:none;stroke:#8B8895;stroke-width:1.1}