/* Superior logo moment, v1 (2026-10-20). Mount contract: README.md.
   The logo is 680 px wide, so it never shows wider than 680 px divided by the screen's pixel ratio
   (340 CSS px on phones). On a dark ground use .wash--plate: the cloud's white is transparent in the file. */
.wash { position: relative; display: block; box-sizing: border-box; width: fit-content; max-width: 100%; min-width: 0; margin: 0; }
.wash--plate { background: #fff; border-radius: var(--wash-radius, 12px); padding: 10px 9px; box-shadow: var(--wash-shadow, none); }
.wash-stage { position: relative; width: 340px; max-width: 100%; aspect-ratio: 680 / 365; }
@media (max-resolution: 1.3dppx) { .wash-stage { width: 523px; } }
@media (max-resolution: 1.05dppx) { .wash-stage { width: 680px; } }
.wash-stage img { display: block; width: 100%; height: auto; }
.wash-canvas { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0; transition: opacity .25s ease-out; }
.wash-live .wash-canvas { opacity: 1; transition: none; } /* shown at once; at the end it fades over the real logo */

/* Armed (an inline line in the mount, before first paint): the clean logo waits under the dirty canvas.
   If the script never takes over, the logo shows after 3 s anyway; with reduced motion or no script it shows at once. */
.wash-armed .wash-stage img { opacity: 0; animation: wash-failsafe .01s linear 3s both; }
.wash-live .wash-stage img { opacity: 0; animation: none; }
@keyframes wash-failsafe { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .wash-armed .wash-stage img { opacity: 1; animation: none; } }

/* The replay row is reserved before first paint (.wash-js, set by the mount's inline line), so it never shifts the page. */
.wash-js { padding-bottom: 52px; }
.wash--plate.wash-js { padding-bottom: 60px; }
.wash-replay {
  position: absolute; right: 6px; bottom: 6px; display: inline-flex; align-items: center; gap: 7px;
  min-height: 44px; min-width: 160px; justify-content: center; padding: 0 14px; border-radius: 999px; border: 1.5px solid rgba(20, 33, 46, .28);
  background: #fff; color: var(--wash-ink, #14212E); font: 700 14px/1 inherit; font-family: inherit;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: transform .15s ease-out, border-color .15s ease-out, opacity .15s ease-out;
}
.wash-replay[hidden] { display: none; }
.wash-replay[aria-disabled="true"] { opacity: .45; cursor: default; }
.wash-replay:active { transform: scale(.97); }
@media (hover: hover) { .wash-replay:not([aria-disabled="true"]):hover { border-color: rgba(20, 33, 46, .6); } }
.wash-replay:focus-visible { outline: 2px solid var(--wash-focus, #DE2A12); outline-offset: 2px; }
.wash-replay svg { flex: none; width: 16px; height: 16px; }
@media (prefers-reduced-motion: reduce) { .wash-canvas { transition: none; } }