.illo{--arch-ink:var(--foreground);--arch-neutral:var(--fg-faint);--arch-surface:var(--canvas);--arch-side:color-mix(in srgb, var(--foreground) 6%, var(--canvas));--arch-shade:color-mix(in srgb, var(--foreground) 11%, var(--canvas));--arch-recess:color-mix(in srgb, var(--fg-faint) 14%, var(--canvas));--arch-active:0;width:100%;height:auto;display:block;overflow:hidden}.illo path{stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}.arch-surface{fill:var(--arch-surface);stroke:var(--arch-ink);stroke-width:1.4px;stroke-opacity:.72}.arch-side{fill:var(--arch-side);stroke:var(--arch-neutral);stroke-width:1px;stroke-opacity:.7}.arch-joint,.arch-bevel{fill:none;stroke:var(--arch-neutral);stroke-width:.9px;stroke-opacity:.65}.arch-bevel{stroke-opacity:.4}.arch-recess{fill:var(--arch-recess);stroke:none}.arch-recess-wall{fill:var(--arch-side);stroke:var(--arch-neutral);stroke-width:.9px;stroke-opacity:.65}.arch-shade{fill:var(--arch-shade)}.arch-inset{fill:var(--subtle);stroke:var(--arch-neutral);stroke-width:1px;stroke-opacity:.65}.arch-shadow{fill:var(--arch-ink);opacity:.05}.arch-accent{fill:none;stroke:var(--brand);stroke-width:1.6px;stroke-opacity:calc(.7 + var(--arch-active) * .3)}.arch-accent-fill{fill:var(--brand);fill-opacity:calc(.8 + var(--arch-active) * .2);stroke:var(--brand);stroke-width:1px}.arch-segment :is(.arch-side,.arch-surface){stroke-opacity:var(--seg-ink)}.arch-draft :is(.arch-side,.arch-surface){fill:var(--arch-surface)}.identity-art:focus-visible{outline:2px solid var(--brand);outline-offset:4px;border-radius:.5rem}.arch-enter{--arch-delay:0s}.arch-enter-2{--arch-delay:60ms}.arch-enter-3{--arch-delay:.12s}.arch-enter-4{--arch-delay:.18s}.arch-enter-west{--arch-delay:60ms}.arch-enter-north{--arch-delay:.12s}.arch-enter-east{--arch-delay:.18s}.arch-enter-south{--arch-delay:.24s}@media (prefers-reduced-motion:no-preference){.illo-figure[data-state=idle] .arch-enter{opacity:0}.illo-figure[data-state=in] .arch-enter{animation:architecture-resolve .6s cubic-bezier(.22, 1, .36, 1) var(--arch-delay) both}.arch-hover{transition:transform .36s cubic-bezier(.22,1,.36,1)}.arch-accent,.arch-accent-fill{transition:stroke-opacity .36s ease-out,fill-opacity .36s ease-out}.arch-tap-layer-2{transform:translateY(calc(var(--arch-active) * -2px))}.arch-tap-layer-3{transform:translateY(calc(var(--arch-active) * -4px))}.arch-tap-plate{transform:translateY(calc(var(--arch-active) * -6px))}.arch-tap-core{transform:translateY(calc(var(--arch-active) * 4px))}.arch-rail-west{transform:translate(calc(var(--arch-active) * 6px), calc(var(--arch-active) * 3px))}.arch-rail-north{transform:translate(calc(var(--arch-active) * -6px), calc(var(--arch-active) * 3px))}.arch-rail-east{transform:translate(calc(var(--arch-active) * -6px), calc(var(--arch-active) * -3px))}.arch-rail-south{transform:translate(calc(var(--arch-active) * 6px), calc(var(--arch-active) * -3px))}.arch-segment{transform:translate(calc(var(--arch-active) * var(--seg-step) * 1.6px), calc(var(--arch-active) * var(--seg-step) * -.8px))}.identity-art:focus-visible .illo{--arch-active:1}@media (hover:hover) and (pointer:fine){.identity-art:hover .illo{--arch-active:1}}}@keyframes architecture-resolve{0%{opacity:0;translate:0 5px}to{opacity:1;translate:0}}
