/* The opening: after PRESS, a mochi stamps the K and then the name on paper. It waits for an explicit invitation to enter. */
.signature-opening{display:none}
html[data-signature] .signature-opening{position:fixed;inset:0;z-index:1000;display:block;overflow:hidden;background:#fbfaf6;color:#2b2b2b;font-family:Inter,Arial,sans-serif;isolation:isolate}
html[data-signature]{overflow:hidden}
.opening-canvas{position:absolute;inset:0;width:100%;height:100%}
.opening-fade{position:absolute;inset:0;background:#fbfaf6;opacity:0;pointer-events:none;transition:opacity .5s ease}
.opening-fade.on{opacity:1}
.opening-name{position:absolute;left:0;right:0;top:62%;display:flex;justify-content:center;margin:0;pointer-events:none;opacity:0;transform:translateY(5px);transition:opacity .85s ease,transform 1.1s cubic-bezier(.2,.7,.3,1)}
.opening-name svg{display:block;width:min(680px,86vw);height:auto;max-height:var(--opening-name-room,180px)}
.opening-name.on{opacity:1;transform:none}
.opening-press{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);min-width:44px;min-height:44px;padding:11px 20px;border:1px solid #00000026;border-radius:999px;background:none;color:#5a5a5a;font:400 11px/1 Inter,Arial,sans-serif;letter-spacing:.3em;cursor:pointer}
.opening-press[hidden]{display:none}
.opening-controls{position:absolute;left:40px;bottom:max(27px,env(safe-area-inset-bottom));display:flex;gap:18px}
.opening-controls[hidden]{display:none}
.opening-controls button,.signature-skip{min-height:44px;min-width:44px;text-align:center;border:0;border-bottom:1px solid #00000026;background:none;color:#5a5a5a;font:400 11px/1.6 Inter,Arial,sans-serif;cursor:pointer;padding:4px 0}
.signature-skip{position:absolute;bottom:max(27px,env(safe-area-inset-bottom));right:40px;letter-spacing:.03em}
.opening-press:focus,.opening-controls button:focus,.signature-skip:focus{outline:none}
.signature-opening[data-keyboard-focus] .opening-press:focus-visible,.signature-opening[data-keyboard-focus] .opening-controls button:focus-visible,.signature-opening[data-keyboard-focus] .signature-skip:focus-visible{outline:2px solid #1f6f4a;outline-offset:6px}
.signature-status{position:absolute;bottom:max(84px,calc(env(safe-area-inset-bottom) + 60px));left:24px;right:24px;margin:0;text-align:center;font:400 10px/1.6 Inter,Arial,sans-serif;letter-spacing:.08em;color:#666b65}
html[data-signature=revealing] .signature-opening{pointer-events:none;animation:signature-reveal .85s cubic-bezier(.2,.65,.3,1) forwards}
@keyframes signature-reveal{to{opacity:0;visibility:hidden}}
@media(max-width:600px){.opening-controls{left:24px;gap:14px}.signature-skip{right:24px}}
/* Short screens: the name needs the room, so the status is visually hidden but still announced. */
@media(max-height:580px){.signature-status{bottom:auto;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}}
@media(prefers-reduced-motion:reduce){.opening-name,.opening-name.on{transition:none;animation:none}.opening-fade{transition:none}html[data-signature=revealing] .signature-opening{animation:signature-reveal .12s linear forwards}}