:root { color-scheme: light; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", sans-serif; color: #fff; background: #a496dd; }
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; min-height: 100%; }
body { min-height: 100svh; overflow: hidden; }
.painting { position: fixed; inset: 0; overflow: hidden; background: #a496dd; }
.painting__still, #paint { position: absolute; display: block; width: 100%; height: 100%; object-fit: cover; }
#paint { opacity: 0; transition: opacity 1s ease; }
#paint.is-ready { opacity: 1; }
.signature { min-height: 100svh; display: grid; place-items: center; position: relative; padding: 48px 24px 100px; pointer-events: none; }
.signature__mark { display: block; width: clamp(290px, 42vw, 560px); height: auto; max-width: 90vw; filter: drop-shadow(0 2px 18px rgb(66 41 72 / 8%)); }
.colophon { position: fixed; left: 0; right: 0; bottom: 0; padding: 24px 24px max(36px, env(safe-area-inset-bottom)); display: flex; justify-content: center; color: #332b41; text-align: center; }
.coming { margin: 0; padding-left: .32em; font-size: 11px; font-weight: 500; line-height: 1.5; letter-spacing: .32em; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media (max-width: 600px) {
  .signature { padding-bottom: 115px; }
  .signature__mark { width: min(88vw, 420px); }
}
@media (prefers-reduced-motion: reduce) { #paint { transition: none; } }