/* Concept A: Note from Monchi */
.mc-note .mc-panel{padding:18px 18px 16px;overflow:hidden;position:relative}
.mc-note .mc-head{display:flex;gap:12px;align-items:flex-start}
.mc-note .mc-face{flex:0 0 40px;width:40px;height:40px;border-radius:50%;object-fit:cover;filter:grayscale(1);
  box-shadow:0 0 0 1px rgba(205,213,222,.16)}
.mc-note .mc-hi{display:block;font-size:22px;line-height:1;margin:1px 0 6px}
.mc-note .mc-copy{color:rgba(205,213,222,.86)}
.mc-note .mc-stage{position:relative;margin-top:16px;min-height:46px}
.mc-note .mc-actions{transition:opacity .3s,transform .4s cubic-bezier(.2,.7,.2,1)}
.mc-note .mc-sig{position:absolute;inset:-14px 0 -8px;display:flex;align-items:center;justify-content:flex-end;gap:12px;opacity:0;pointer-events:none}
.mc-note .mc-sig .mc-hand{font-size:20px;color:var(--mc-muted);opacity:0;transition:opacity .5s .9s}
.mc-note .mc-sig svg{height:68px;width:auto;overflow:visible}
.mc-note .mc-sig path{fill:none;stroke:var(--mc-ink);stroke-width:13;stroke-linecap:round;stroke-linejoin:round}
.mc-note .mc-bye{position:absolute;left:70px;right:18px;top:38px;transform:translateY(-50%);font-size:26px;line-height:1;white-space:nowrap;opacity:0;pointer-events:none}
.mc-note .mc-swap{transition:opacity .3s}
/* accept */
.mc-note.is-yes .mc-actions{opacity:0;transform:translateY(6px);pointer-events:none}
.mc-note.is-yes .mc-sig{opacity:1}
.mc-note.is-yes .mc-sig .mc-hand{opacity:1}
.mc-note.is-yes .mc-sig path{animation:mc-draw var(--d) cubic-bezier(.45,.05,.55,.95) var(--t) both}
@keyframes mc-draw{from{stroke-dashoffset:var(--l)}to{stroke-dashoffset:0}}
.mc-note.is-yes.is-out{opacity:0;transform:translateY(8px);transition-duration:.6s}
/* decline */
.mc-note.is-no .mc-swap,.mc-note.is-no .mc-actions{opacity:0;pointer-events:none}
.mc-note.is-no .mc-bye{opacity:1;transition:opacity .35s .15s}
.mc-note.is-no .mc-panel{transition:height .45s cubic-bezier(.2,.7,.2,1)}
.mc-note.is-no.is-out{opacity:0;transform:translateX(-40px);transition:opacity .45s ease-in,transform .55s cubic-bezier(.5,0,.75,0)}
@media(max-width:809px){.mc-note.is-no.is-out{transform:translateY(110%)}.mc-note .mc-hi{font-size:23px}}
@media(prefers-reduced-motion:reduce){.mc-note.is-yes .mc-sig path{stroke-dashoffset:0!important}}