/* dessin.css — STRIKE · the frame of a Dessin (dessin.js draws inside it). A raised paper card with a hairline edge,
   the canvas over it, the still image for no-JavaScript, the mono state label (top right, it counts live) and the
   figure caption (bottom left). The drawings erase (they do not paint) what an object hides, so the card may be any
   colour, or none at all (.dessin--bare, in base.css): the page and its halo show through. The stills are transparent
   too. Sizes: set --ar on the figure (4/5, 5/4, 4/3…). */
.dessin { position: relative; margin: 0; aspect-ratio: var(--ar, 4 / 3); overflow: hidden; border-radius: var(--r-lg, 24px);
  background: var(--raised, #FBFAF4); box-shadow: inset 0 0 0 1px var(--line, rgba(21, 23, 21, .12));
  -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
.dessin > canvas { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; display: block; }
.dessin__still { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: contain; display: none; pointer-events: none; }
html:not(.js) .dessin__still { display: block; }
.dessin__state { position: absolute; z-index: 1; top: 14px; right: 16px; font: 500 11px/1 var(--mono, ui-monospace, monospace); letter-spacing: .08em;
  color: var(--ink-2, rgba(21, 23, 21, .62)); font-variant-numeric: tabular-nums; white-space: nowrap; pointer-events: none; }
.dessin__cap { position: absolute; z-index: 1; left: 16px; right: 16px; bottom: 13px; font: 500 11px/1.4 var(--mono, ui-monospace, monospace);
  letter-spacing: .12em; text-transform: uppercase; color: rgba(21, 23, 21, .44); pointer-events: none; }   /* a caption: quieter than the drawing's own state label */
@media (max-width: 600px) {
  .dessin__state, .dessin__cap { font-size: 10px; }
  .dessin__state { top: 11px; right: 12px; } .dessin__cap { left: 12px; bottom: 10px; }
}
/* the corner label shows once the drawing is on screen and tracing (never alone above an empty frame) */
html.js .dessin__state { opacity: 0; transition: opacity .6s ease .7s; }
html.js .dessin.is-on .dessin__state { opacity: 1; }