/* Copy of cople/maqueta/piezas.css: the demo's image is built from cople/demo alone and cannot reach the
   original. Change the original and copy it again. */
/* The visual vocabulary's drawing rules, shared by diccionario.html and b.html. A drawing takes its
   colours from --ink and --paper, so a dark section only swaps the two. Line is loose, fill is fitted;
   the diamond only appears inside a fit, the hollow is a hook that is missing. */
svg.art { --fit-ease: cubic-bezier(.2, .9, .25, 1.06); overflow: visible; }
svg.art .loose, svg.art .fits { fill: var(--paper); stroke: var(--ink); stroke-width: 2; stroke-linejoin: round;
                                vector-effect: non-scaling-stroke; transition: fill 200ms ease 520ms; }
svg.art .solid { fill: var(--ink); stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
svg.art.on .fits { fill: var(--ink); }
svg.art .hollow { fill: none; stroke: var(--ink); stroke-width: 2; stroke-dasharray: 5 4; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
svg.art .guide { fill: none; stroke: var(--ink); stroke-width: 1.2; stroke-dasharray: 3 3; opacity: .55; vector-effect: non-scaling-stroke; }
svg.art.on .guide.fade { opacity: 0; transition: opacity 300ms linear 600ms; }
svg.art .thin { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; vector-effect: non-scaling-stroke; }
svg.art .dia { fill: var(--ink); }
/* Every moving part goes from --t0/--o0 to --t1/--o1 when its drawing turns on */
svg.art .m { transform-box: fill-box; transform-origin: center; transform: var(--t0, none); opacity: var(--o0, 1);
             transition: transform 520ms var(--fit-ease) var(--d, 0ms), opacity 240ms linear var(--d, 0ms); }
svg.art.on .m { transform: var(--t1, none); opacity: var(--o1, 1); }
svg.art .draw { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 700ms ease-out var(--d, 0ms); }
svg.art.on .draw { stroke-dashoffset: 0; }
svg.art .late { opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(.3) rotate(-45deg);
                transition: opacity 200ms linear var(--d, 640ms), transform 300ms var(--fit-ease) var(--d, 640ms); }
svg.art.on .late { opacity: 1; transform: none; }
svg.art .fill-late { transition: fill 200ms ease var(--d, 520ms); }
@media (prefers-reduced-motion: reduce) { svg.art, svg.art * { transition: none !important; } }