/* The hero demonstration: ask, check, send, signed, as one loop. Mounted by demo.js into [data-demo]. */
.fd{--fd-line:transparent;position:relative;margin:0;background:var(--wash);color:var(--fg);border-radius:var(--r-card);font-family:var(--sans)}
@media (prefers-color-scheme:dark){.fd{--fd-line:var(--hair)}}
.fd-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.fd-stage{display:grid;grid-template-columns:minmax(0,1fr) 372px;gap:28px;padding:28px 28px 0}

/* The conversation */
.fd-chat{background:var(--ink);color:var(--on-ink);border:1px solid var(--fd-line);border-radius:var(--r-card);padding:22px 26px 20px;font:14px/1.7 var(--mono);display:flex;flex-direction:column}
.fd-bar{display:flex;justify-content:space-between;color:var(--on-ink-muted);font-size:11px;letter-spacing:.08em;padding-bottom:13px;margin-bottom:20px;border-bottom:1px solid var(--on-ink-rule)}
.fd-l{margin:0;display:grid;grid-template-columns:58px minmax(0,1fr);gap:0 10px;max-width:560px}
.fd-l+.fd-l{margin-top:22px}
.fd-input{margin-top:auto;display:flex;align-items:center;gap:10px;padding-top:16px;border-top:1px solid var(--on-ink-rule);color:var(--on-ink-muted);font-size:12.5px}
.fd-input i{width:7px;height:15px;background:var(--on-ink-muted);opacity:.6}
.fd-who,.fd-dim{color:var(--on-ink-muted)}
.fd-send{display:inline-block;padding:0 12px;border-radius:999px;background:var(--paper);color:var(--ink);font-weight:600}

/* The document: a paper sheet that stays paper in dark mode */
.fd-doc{position:relative;aspect-ratio:8.5/11;background:var(--paper);color:var(--ink);border-radius:2px;overflow:hidden;
  box-shadow:0 1px 2px rgb(18 26 34/.06),0 18px 44px rgb(18 26 34/.08);padding:26px 28px}
.fd-mh{display:flex;justify-content:space-between;align-items:flex-end;padding-bottom:9px;border-bottom:1.4px solid var(--ink);position:relative;font:9.5px/1 var(--mono);letter-spacing:.1em}
.fd-mh:after{content:"";position:absolute;left:0;right:0;bottom:-4.5px;border-top:.5px solid var(--ink)}
.fd-st{display:grid;text-align:right}
.fd-st span{grid-area:1/1}
.fd-t{margin:22px 0 0;font:400 24px/1.05 var(--serif);letter-spacing:-.015em}
.fd-s{margin:7px 0 0;font:italic 13px/1.3 var(--serif);color:var(--g700)}
.fd-bars{margin-top:26px}
.fd-bars i{display:block;height:5px;margin-top:10px;border-radius:3px;background:var(--g200)}
.w52{width:52%}.w58{width:58%}.w64{width:64%}.w72{width:72%}.w86{width:86%}.w88{width:88%}.w90{width:90%}.w92{width:92%}.w94{width:94%}
.fd-bars i.h{width:34%;margin-top:20px;background:var(--g300)}
.fd-sign{position:absolute;left:28px;right:28px;bottom:74px;display:grid;grid-template-columns:1.75fr 1fr;gap:20px}
.fd-slot{position:relative;height:52px;border-bottom:1px solid var(--ink)}
.fd-lb{position:absolute;left:0;top:calc(100% + 10px);font:9px/1 var(--mono);letter-spacing:.12em;color:var(--g600)}
.fd-field{position:absolute;inset:0;background:var(--g100);border:1px solid var(--g300);border-bottom:0;border-radius:4px 4px 0 0;display:flex;align-items:flex-end;padding:0 8px 7px}
.fd-field em{font:15px/1 var(--hand);color:var(--g600);font-style:normal}
.fd-slot [data-sig]{position:absolute;left:0;width:100%;bottom:0;transform:translateY(24%);pointer-events:none}
.fd-slot [data-sig] svg{display:block;width:100%;height:auto}
.fd-date{position:absolute;left:0;bottom:8px;font:14px/1 var(--sans)}
.fd-foot-doc{position:absolute;left:28px;right:28px;bottom:18px;display:grid;font:8.5px/1.5 var(--mono);letter-spacing:.06em;color:var(--g600)}
.fd-foot-doc>span{grid-area:1/1;align-self:end}
.fd-vf span{white-space:nowrap}
.fd-pg{transition:opacity 280ms var(--ease)}
.fd.is-verify .fd-pg{opacity:0}
.fd.is-out .fd-pg{opacity:1}

/* Footer: the four beats and the control */
.fd-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 28px 16px}
.fd-beats{display:flex;gap:22px;margin:0;padding:0;list-style:none;font:10.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--fg)}
.fd-beats li{opacity:.38}
.fd-beats b{font-weight:400;color:var(--muted);margin-right:7px}
.fd-ctl{display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 13px 0 11px;border:1px solid var(--rule);border-radius:999px;background:none;color:var(--fg);font:500 12.5px/1 var(--sans);cursor:pointer;transition:border-color var(--t) var(--ease)}
.fd-ctl:hover{border-color:var(--fg)}
.fd-ctl:focus-visible{outline:2px solid var(--fg);outline-offset:3px}
.fd-ctl svg{width:10px;height:10px;fill:currentColor}
.fd-ctl .i-play,.fd.is-user-paused .fd-ctl .i-pause{display:none}
.fd.is-user-paused .fd-ctl .i-play{display:block}

/* Motion: everything that arrives starts hidden; state classes on .fd reveal it. */
.fd-in{opacity:0;transform:translateY(6px);transition:opacity 220ms var(--ease),transform 220ms var(--ease)}
.fd-field.fd-in{transform:translateY(-8px);transition-duration:260ms}
.fd-vf.fd-in{transform:translateY(4px);transition-duration:280ms}
.fd-beats li,.fd-st span{transition:opacity 260ms var(--ease)}
.fd-st span{opacity:0}
.fd:not(.is-check) .st0,.fd.is-check:not(.is-sent) .st1,.fd.is-sent:not(.is-date) .st2,.fd.is-date .st3{opacity:1}
.fd.is-ask .l1,.fd.is-check .l2,.fd.is-send .l3,.fd.is-sent .l4,.fd.is-done .l5,
.fd.is-f1 .f1,.fd.is-f2 .f2,.fd.is-date .dt,.fd.is-verify .fd-vf{opacity:1;transform:none}
.fd.is-sign .f1,.fd.is-date .f2{opacity:0;transform:none}
.fd[data-beat="1"] .b1,.fd[data-beat="2"] .b2,.fd[data-beat="3"] .b3,.fd[data-beat="4"] .b4{opacity:1}
.fd:not(.is-sign) .fd-slot .sig path{stroke-dashoffset:var(--len)}
.fd.is-paused .sig path{animation-play-state:paused}
.fd.is-out .fd-in,.fd.is-out .fd-slot [data-sig]{opacity:0;transition:opacity 420ms var(--ease)}
.fd.is-snap *{transition:none!important}
.fd.is-still *{transition:none!important;animation:none!important}
.fd.is-still .fd-ctl{visibility:hidden}

@media (max-width:640px){
  .fd-stage{grid-template-columns:minmax(0,1fr);gap:14px;padding:14px 14px 0}
  .fd-chat{padding:16px 16px 18px;font-size:12px;line-height:1.6}
  .fd-bar{font-size:10px;margin-bottom:14px;padding-bottom:10px}
  .fd-l{grid-template-columns:46px minmax(0,1fr);gap:0 6px}
  .fd-l+.fd-l{margin-top:10px}
  .fd-input{display:none}
  .fd-doc{aspect-ratio:auto;height:300px;padding:20px 20px}
  .fd-t{font-size:21px;margin-top:18px}
  .fd-bars{margin-top:20px}
  .fd-bars i:nth-child(n+5){display:none}
  .fd-sign{left:20px;right:20px;bottom:66px;gap:14px}
  .fd-foot-doc{left:20px;right:20px;bottom:14px;font-size:8px;letter-spacing:.03em}
  .fd-date{font-size:12.5px}
  .fd-foot{padding:12px 14px 14px}
  .fd-beats{gap:12px;font-size:9.5px;letter-spacing:.08em}
  .fd-beats b{display:none}
}