/* Hylē v4 · app-core lane · figure specimens (assets/app-core/specimens.js). One spec for every template figure. */
.spx { --fg: var(--ink-2); --fg-t: color-mix(in srgb, var(--fg) 9%, #fff); --hi: var(--brand-orange); --hi-ink: #c66f12; position: relative; display: block; width: 100%; aspect-ratio: 16 / 10; border-radius: 10px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--fg) 5%, #fff), #fff 70%); box-shadow: inset 0 0 0 1px rgba(20,20,19,.07); overflow: hidden; }
.spx-svg { position: absolute; inset: 0; width: 100%; height: 100%; padding: 6%; overflow: visible; }
.spx.is-flat { background: transparent; box-shadow: none; }
.spx.is-flat .spx-svg { padding: 0; }
.spx[data-f="bio"] { --fg: var(--field-bio); } .spx[data-f="med"] { --fg: var(--field-med); } .spx[data-f="aiml"] { --fg: var(--field-aiml); }
.spx[data-f="eng"] { --fg: var(--field-eng); } .spx[data-f="sci"] { --fg: var(--field-sci); } .spx[data-f="quant"] { --fg: var(--field-quant); }
.spx[data-f="biz"] { --fg: var(--field-biz); --hi: #b6452f; --hi-ink: #a33a26; } .spx[data-f="policy"] { --fg: var(--field-policy); } .spx[data-f="ir"] { --fg: var(--field-ir); }
.spx[data-f="soc"] { --fg: var(--field-soc); } .spx[data-f="law"] { --fg: var(--field-law); --hi: #c98a1a; --hi-ink: #9a6508; } .spx[data-f="hum"] { --fg: #6f7d3f; }
.spx[data-f="shared"] { --fg: var(--brand-blue); }
.spx-svg * { vector-effect: non-scaling-stroke; }
.spx-svg .sx-g { stroke: rgba(20,20,19,.08); stroke-width: 1; fill: none; }
.spx-svg .sx-ax { stroke: rgba(20,20,19,.32); stroke-width: 1; fill: none; }
.spx-svg .sx-ref { stroke: rgba(20,20,19,.42); stroke-width: 1; stroke-dasharray: 3 3; fill: none; }
.spx-svg .sx-l { stroke: var(--fg); stroke-width: 1.75; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.spx-svg .sx-l2 { stroke: #8f8a80; stroke-width: 1.25; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.spx-svg .sx-l3 { stroke: var(--hi); stroke-width: 1.75; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.spx-svg .sx-a { fill: var(--fg); fill-opacity: .14; stroke: none; }
.spx-svg .sx-a2 { fill: rgba(20,20,19,.05); stroke: none; }
.spx-svg .sx-ah { fill: var(--hi); fill-opacity: .2; stroke: none; }
.spx-svg .sx-st { fill: var(--fg); stroke: #fff; stroke-width: .75; }
.spx-svg .sx-st[data-h] { fill: var(--hi); }
.spx-svg .sx-d { fill: var(--fg); }
.spx-svg .sx-d2 { fill: #b9b4a9; }
.spx-svg .sx-d3 { fill: color-mix(in srgb, var(--fg) 45%, #8f8a80); }
.spx-svg .sx-dh { fill: var(--hi); }
.spx-svg .sx-o { fill: #fff; stroke: var(--fg); stroke-width: 1.5; }
.spx-svg .sx-c { fill: var(--fg); }
.spx-svg .sx-ch { fill: var(--hi); }
.spx-svg .sx-cell { fill: rgba(20,20,19,.025); stroke: rgba(20,20,19,.08); stroke-width: 1; }
.spx-svg .sx-b { fill: var(--fg); fill-opacity: .82; }
.spx-svg .sx-b2 { fill: color-mix(in srgb, var(--fg) 30%, #ddd8cc); }
.spx-svg .sx-bh { fill: var(--hi); }
.spx-svg .sx-box { fill: #fff; stroke: var(--fg); stroke-width: 1.25; }
.spx-svg .sx-med { stroke: var(--ink); stroke-width: 1.5; }
.spx-svg .sx-e { stroke: color-mix(in srgb, var(--fg) 35%, #b9b4a9); stroke-width: 1; stroke-opacity: .8; }
.spx-svg .sx-eh { stroke: var(--hi); stroke-width: 1.5; }
.spx-svg .sx-n { fill: var(--fg); stroke: #fff; stroke-width: 1.25; }
.spx-svg .sx-n2 { fill: color-mix(in srgb, var(--fg) 45%, #8f8a80); stroke: #fff; stroke-width: 1.25; }
.spx-svg .sx-nh { fill: var(--hi); stroke: #fff; stroke-width: 1.25; }
.spx-svg .sx-nsq { fill: #fff; stroke: var(--fg); stroke-width: 1.5; }
.spx-svg .sx-iso { fill: none; stroke: var(--fg); stroke-width: 1; stroke-opacity: .55; }
.spx-svg .sx-isoh { fill: none; stroke: var(--hi); stroke-width: 1; stroke-dasharray: 3 3; }
.spx-svg .sx-mol { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linejoin: round; }
.spx-svg .sx-mol2 { fill: none; stroke: var(--ink); stroke-width: 1.2; }