.ink-coda{contain:layout paint;background:#f5f1e8;height:max(560px,100svh);position:relative;overflow:hidden}.ink-coda[data-state=off]{display:none}.ink-coda canvas{width:100%;height:100%;display:block;position:absolute;inset:0}.ink-coda:before{content:"";z-index:1;background:linear-gradient(var(--bg,#fff),#fff0);pointer-events:none;height:min(24vh,220px);position:absolute;inset:0 0 auto}.ink-drop{z-index:2;width:9px;height:9px;transition:opacity 1.8s var(--ease),transform 1.8s var(--ease),filter 1.8s var(--ease);background:radial-gradient(circle at 44% 40%,#181715 0 52%,#18171580 72%,#18171500 100%);border-radius:48% 52% 46% 54%;margin-left:-4.5px;position:absolute;top:clamp(84px,13vh,132px);left:50%}.ink-coda[data-state=painting] .ink-drop,.ink-coda[data-state=done] .ink-drop{opacity:0;filter:blur(3px);transform:scale(2.8)}.ink-seal{z-index:2;opacity:0;mix-blend-mode:multiply;pointer-events:none;position:absolute;top:0;left:0}.ink-coda[data-sealed] .ink-seal{animation:.55s cubic-bezier(.2,.7,.2,1) forwards ink-press}@keyframes ink-press{0%{opacity:0;transform:scale(1.16)}40%{opacity:.96;transform:scale(.97)}to{opacity:.92;transform:scale(1)}}.ink-note{z-index:2;left:max(var(--margin),env(safe-area-inset-left,0px));letter-spacing:.02em;color:#67625a;opacity:0;transition:opacity 2.4s var(--ease).8s;margin:0;font-size:12px;position:absolute;bottom:clamp(20px,4vh,36px)}.ink-coda[data-state=done] .ink-note{opacity:1}.ink-coda[data-side=right] .ink-note{left:auto;right:max(var(--margin),env(safe-area-inset-right,0px))}@media (prefers-reduced-motion:reduce){.ink-drop,.ink-note{transition:none}.ink-coda[data-sealed] .ink-seal{opacity:.92;animation:none}}