/* Iteration 2 line-art style: quiet hairlines, dot textures, a few turquoise accents.
   Context sets --bg (face fill) and the line tones; dark is the default. */
.ia-wrap { position: relative; --bg: #050607; --a: 255, 255, 255; --t: var(--i2a, #2fd4b4); }
.i2-light .ia-wrap, .ia-wrap.on-light { --bg: #ffffff; --a: 5, 6, 7; }
.ia { display: block; width: 100%; height: auto; overflow: visible; }
.ia path { fill: none; stroke-width: 1; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.ia .f { fill: var(--bg); stroke: rgba(var(--a), .42); }
.ia .l { stroke: rgba(var(--a), .42); }
.ia .l2 { stroke: rgba(var(--a), .24); }
.ia .l3 { stroke: rgba(var(--a), .13); }
.ia .w { stroke: rgba(var(--a), .26); }
.ia .tex { fill: var(--tx); stroke: rgba(var(--a), .3); }
.ia .txd { fill: rgba(var(--a), .32); }

.ia .acc { stroke: var(--t) !important; }
.ia .accf { fill: rgba(var(--i2a-rgb), .14) !important; stroke: var(--t) !important; }
.ia .glow { stroke: var(--t) !important; filter: drop-shadow(0 0 3px rgba(var(--i2a-rgb), .8)); }
.ia .route { stroke: var(--t); stroke-opacity: .7; stroke-dasharray: 2 4; }
.ia .flow { stroke: var(--t); stroke-opacity: .8; stroke-dasharray: 2 6; animation: ia-flow 1.6s linear infinite; }
.ia .plate { stroke: none !important; }
.ia circle.dot-m, .ia .dot-m { fill: var(--t); filter: drop-shadow(0 0 4px rgba(var(--i2a-rgb), .9)); }
.ia .led { fill: var(--t); stroke: none; }
.ia .logo { opacity: .85; }
@keyframes ia-flow { to { stroke-dashoffset: -16; } }
/* Draw-in when the figure scrolls into view (figure gets .in from home.js [data-reveal]) */
[data-reveal] .ia .f, [data-reveal] .ia .l, [data-reveal] .ia .l2, [data-reveal] .ia .tex { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s cubic-bezier(.22, 1, .36, 1); transition-delay: calc(var(--o) * 22ms); }
[data-reveal].in .ia .f, [data-reveal].in .ia .l, [data-reveal].in .ia .l2, [data-reveal].in .ia .tex { stroke-dashoffset: 0; }
/* Small labels on a drawing */
.ia-tag { position: absolute; transform: translate(-50%, -150%); padding: .28rem .55rem; border-radius: 4px; background: rgba(var(--a), .08); font: 500 10.5px/1.2 var(--f-t, system-ui); letter-spacing: .06em; text-transform: uppercase; color: rgba(var(--a), .8); white-space: nowrap; pointer-events: none; }
.ia-tag--i2a { color: var(--t); background: rgba(var(--i2a-rgb), .1); }
.ia-tag--r { transform: translate(calc(-100% + 10px), -150%); }
.ia-tag--l { transform: translate(-10px, -150%); }
@media (prefers-reduced-motion: reduce) { [data-reveal] .ia .f, [data-reveal] .ia .l, [data-reveal] .ia .l2, [data-reveal] .ia .tex { stroke-dashoffset: 0; transition: none; } .ia .flow { animation: none; } .ia circle.dot-m { display: none; } }
.ia .dot { stroke-dasharray: 1 4; }
.ia .dash { stroke: rgba(var(--a), .3); stroke-dasharray: 4 4; }
.ia .acc, .ia .accf { color: inherit; }
/* Phones: the drawing shrinks but labels don't, so labels at the very top sit just below their point */
@media (max-width: 47.99rem) { .ia--network .nw-tag:first-of-type { transform: translate(-50%, 30%); } .ia--vault .ia-tag--l { transform: translate(-10px, 40%); } }