.dx{--dx-w:18.5rem;width:100%}.dx-stage{justify-items:center;gap:1.25rem;display:grid}@media (min-width:48rem){.dx-stage{grid-template-columns:repeat(2, minmax(0, var(--dx-w)));justify-content:start;align-items:start;column-gap:clamp(1.25rem,3vw,2.5rem)}.dx-owner{margin-top:3.5rem}}@media (min-width:80rem){.dx-stage{justify-content:end}}@media (min-width:120rem){.dx{--dx-w:21.5rem}}.dx-hand{width:100%;max-width:var(--dx-w);gap:.875rem;display:grid}.dx-stage:has(.dx-hand){row-gap:2.5rem}@media (min-width:48rem){.dx-hand:has(>.dx-owner){margin-top:3.5rem}.dx-hand>.dx-owner{margin-top:0}}.dx-who{text-align:left;gap:.25rem;padding-inline:.25rem;display:grid}.dx-who-role{font-family:var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--color-signal);font-size:.75rem}.dx-who-line{color:var(--color-ink);font-size:.9375rem;line-height:1.35}.dx-phone{width:100%;max-width:var(--dx-w);aspect-ratio:9/18;background:var(--color-paper-2);border:1px solid var(--color-line-strong);border-radius:2.75rem;padding:.3125rem;position:relative}.dx-screen{background:var(--color-paper);border:1px solid var(--color-line);border-radius:2.375rem;flex-direction:column;height:100%;padding:0 1.125rem 1.25rem;display:flex;position:relative;overflow:hidden}.dx-bar{font-variant-numeric:tabular-nums;height:2.75rem;color:var(--color-ink);flex:none;justify-content:space-between;align-items:center;padding-inline:.5rem;font-size:.8125rem;font-weight:600;display:flex}.dx-island{z-index:1;background:#000;border-radius:999px;width:20%;height:1.125rem;position:absolute;top:.75rem;left:50%;translate:-50%}.dx-battery{border:1px solid color-mix(in oklab, var(--color-ink) 55%, transparent);width:1.375rem;height:.6875rem;box-shadow:inset 0 0 0 1.5px var(--color-paper), inset 0 0 0 9px var(--color-ink);border-radius:.2rem}.dx-call-head{text-align:center;justify-items:center;padding-top:1.75rem;display:grid}.dx-call-avatar{background:var(--color-paper-2);border:1px solid var(--color-line-strong);width:4.25rem;height:4.25rem;color:var(--color-ink-2);border-radius:999px;place-items:center;margin-bottom:.875rem;font-size:1.375rem;font-weight:500;display:grid}.dx-call-line{color:var(--color-ink-3);align-items:center;gap:.375rem;font-size:.8125rem;display:inline-flex}.dx-call-line svg{flex:none;width:.875rem;height:.875rem}.dx-call-name{letter-spacing:-.01em;color:var(--color-ink);margin-top:.375rem;font-size:1.625rem;font-weight:500;line-height:1.15}.dx-call-time{color:var(--color-ink-2);margin-top:.375rem;font-size:.875rem}.dx-caption{text-align:center;flex-direction:column;justify-content:flex-start;gap:.375rem;min-height:7.25rem;margin-block:auto;padding-top:1rem;display:flex}.dx-caption-who{color:var(--color-ink-3);font-size:.75rem}.dx-caption-text{color:var(--color-ink);text-align:left;align-self:center;width:100%;max-width:15rem;font-size:1.0625rem;line-height:1.4}.dx-keys{grid-template-columns:repeat(3,1fr);place-items:center;margin-top:1rem;display:grid}.dx-key-label{color:var(--color-ink-3);white-space:nowrap;margin-top:.4375rem;font-size:.6875rem}.dx-key{background:var(--color-paper-2);border:1px solid var(--color-line);width:3rem;height:3rem;color:var(--color-ink);cursor:pointer;transition:background-color .16s var(--ease-out);border-radius:999px;place-items:center;display:grid}.dx-key svg{width:1rem;height:1rem}.dx-key:hover{background:color-mix(in oklab, var(--color-ink) 12%, var(--color-paper-2))}.dx-key:focus-visible{outline:2px solid var(--color-ink);outline-offset:3px}.dx-key-play{background:var(--color-ink);width:3.75rem;height:3.75rem;color:var(--color-paper);border-color:#0000}.dx-key-play:hover{background:var(--color-ink-2)}.dx-key-play svg{width:1.125rem;height:1.125rem}.dx-lock{text-align:center;flex-direction:column;flex:1;padding:1.75rem 0 2.5rem;display:flex}.dx-lock-day{color:var(--color-ink-2);font-size:.875rem}.dx-lock-time{letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--color-ink);margin-top:.125rem;font-size:4rem;font-weight:500;line-height:1}.dx-notice{background:var(--color-paper-2);border:1px solid var(--color-line);text-align:left;transition:opacity .32s var(--ease-out), translate .42s var(--ease-out);border-radius:1.125rem;margin-top:auto;padding:.75rem .875rem .875rem}.dx-lock-wait{max-width:15rem;color:var(--color-ink-2);text-wrap:balance;margin:2.5rem auto 0;font-size:1rem;line-height:1.45}.dx-notice[data-waiting]{opacity:0;translate:0 -.75rem}.dx-notice-head{color:var(--color-ink-3);align-items:center;gap:.5rem;font-size:.75rem;display:flex}.dx-notice-app{background:var(--color-ink);width:1.25rem;height:1.25rem;color:var(--color-paper);border-radius:.3rem;place-items:center;display:grid}.dx-notice-app svg{fill:currentColor;width:.75rem;height:.75rem}.dx-notice-when{margin-left:auto}.dx-notice-title{color:var(--color-ink);margin-top:.5rem;font-size:.875rem;font-weight:600}.dx-notice-body{color:var(--color-ink);margin-top:.125rem;font-size:.875rem;line-height:1.4}.dx-thread-head{border-bottom:1px solid var(--color-line);justify-items:center;gap:.375rem;margin-inline:-1.125rem;padding:.5rem 0 .875rem;display:grid}.dx-avatar{background:var(--color-paper-2);border:1px solid var(--color-line-strong);width:2.5rem;height:2.5rem;color:var(--color-ink-2);border-radius:999px;place-items:center;font-size:.8125rem;font-weight:600;display:grid}[data-brand] .dx-avatar{background:var(--brand);color:var(--brand-2)}.dx-thread-name{color:var(--color-ink);font-size:.8125rem}.dx-msgs{flex-direction:column;gap:.5rem;margin-top:auto;padding-top:1rem;display:flex}.dx-msg{border-radius:1.125rem;max-width:84%;padding:.5625rem .8125rem;font-size:.875rem;line-height:1.38}.dx-msg[data-from=business]{background:var(--color-paper-2);border:1px solid var(--color-line);color:var(--color-ink);border-bottom-left-radius:.375rem;align-self:flex-start}.dx-msg[data-from=customer]{background:var(--color-ink);color:var(--color-paper);border-bottom-right-radius:.375rem;align-self:flex-end}.dx-sys{max-width:none;color:var(--color-ink-3);align-self:center;padding:.25rem 0 0;font-size:.6875rem}.dx-link{color:var(--brand-text,inherit);text-underline-offset:.2em;text-decoration:underline;text-decoration-thickness:1px}.dx-alert-wrap{flex-direction:column;flex:1;display:flex}@keyframes dx-land{0%{opacity:0;translate:0 .5rem}}.dx-thread[data-play] :is(.dx-msg,.dx-alert-wrap .dx-notice){animation:dx-land .42s var(--ease-out) both;animation-delay:calc(var(--i) * .9s + .3s)}.dx-thread[data-play] .dx-alert-wrap .dx-notice{animation-delay:calc(var(--i) * .9s + .6s)}.dx-note{color:var(--color-ink-3);margin-top:1.25rem;font-size:.8125rem}@media (min-width:80rem){.dx-note{text-align:right}}.dx-more{margin-top:1rem}.dx-tx-note{color:var(--color-ink-3);font-size:.8125rem}.dx-tx{gap:.75rem;max-width:60ch;margin-top:.875rem;display:grid}.dx-tx li{color:var(--color-ink-2);font-size:.9375rem;line-height:1.5}.dx-tx b{color:var(--color-ink);font-weight:500}.dx-tx-early{opacity:.75}.dx-tx-early+li:not(.dx-tx-early){margin-top:.5rem}.dx-wide{margin-top:var(--story-head-gap,clamp(2.5rem, 5vw, 4.5rem))}.dx-lead{max-width:40ch;color:var(--color-ink-2);margin-top:1.75rem}@media (min-width:48rem){.dx-wide{--dx-w:19.5rem}}@media (48rem<=width<64rem){.dx-wide>:is(.dx-note,.dx-more){max-width:calc(2 * var(--dx-w) + clamp(1.25rem, 3vw, 2.5rem))}}@media (min-width:64rem){.dx-wide{--dx-w:17.5rem;grid-template:"stage lead""stage note""stage more""stage."1fr/max-content minmax(0,1fr);justify-content:start;column-gap:clamp(2.5rem,5.5vw,5.5rem);display:grid}.dx-wide .dx-stage{grid-area:stage;justify-content:start}.dx-wide .dx-lead{grid-area:lead;margin-top:7rem;font-size:1.125rem;line-height:1.55}.dx-wide .dx-note{text-align:left;grid-area:note}.dx-wide .dx-more{grid-area:more}}@media (min-width:80rem){.dx-wide{--dx-w:19.5rem}}@media (min-width:120rem){.dx-wide{--dx-w:22.5rem}}.dx-wide{--dx-fit:calc((100svh - var(--header-h,70px) - 2rem) / 2)}.dx-wide .dx-hand,.dx-wide .dx-phone{max-width:min(var(--dx-w), var(--dx-fit))}.dx-pin,.dx-pin-frame{display:contents}.dx-steps{display:none}@media (max-width:37.5rem){.dx-wide{--dx-fit:var(--dx-w)}.dx-wide .dx-stage{zoom:var(--dx-zoom,1)}}@media (max-width:37.5rem) and (prefers-reduced-motion:no-preference){.dx-wide .dx-pin{height:calc(200svh - var(--header-h,70px));display:block}.dx-wide .dx-pin-frame{top:var(--header-h,70px);height:calc(100svh - var(--header-h,70px));grid-template-rows:auto minmax(0,1fr);align-content:start;gap:1rem;padding-top:.75rem;display:grid;position:sticky}.dx-steps{gap:.75rem;width:100%;max-width:24rem;margin-inline:auto;display:grid}.dx-step{opacity:0;transition:opacity .36s var(--ease-out), translate .36s var(--ease-out);grid-area:1/1;align-content:start;translate:0 .5rem}.dx-wide[data-step="0"] .dx-step[data-i="0"],.dx-wide[data-step="1"] .dx-step[data-i="1"],.dx-wide[data-step="2"] .dx-step[data-i="2"]{opacity:1;translate:0}.dx-dots{gap:.375rem;padding-inline:.25rem;display:flex}.dx-dots span{background:var(--color-line-strong);width:1.25rem;height:2px;transition:background-color .36s var(--ease-out);border-radius:1px}.dx-wide[data-step="0"] .dx-dots [data-i="0"],.dx-wide[data-step="1"] .dx-dots [data-i="1"],.dx-wide[data-step="2"] .dx-dots [data-i="2"]{background:var(--color-accent)}.dx-wide .dx-stage{grid-template-columns:minmax(0,1fr);align-content:start;row-gap:0}.dx-wide .dx-hand{transition:opacity .42s var(--ease-out), translate .42s var(--ease-out), visibility 0s linear 0s;grid-area:1/1}.dx-wide .dx-hand:has(>.dx-owner){opacity:0;visibility:hidden;transition:opacity .42s var(--ease-out), translate .42s var(--ease-out), visibility 0s linear .42s}.dx-wide[data-step="2"] .dx-hand:has(>.dx-call){opacity:0;visibility:hidden;transition:opacity .42s var(--ease-out), translate .42s var(--ease-out), visibility 0s linear .42s}.dx-wide .dx-hand:has(>.dx-owner){translate:0 1.5rem}.dx-wide[data-step="2"] .dx-hand:has(>.dx-call){translate:0 -1.5rem}.dx-wide[data-step="2"] .dx-hand:has(>.dx-owner){opacity:1;visibility:visible;transition:opacity .42s var(--ease-out), translate .42s var(--ease-out), visibility 0s linear 0s;translate:0}.dx-wide .dx-hand>.dx-who,.dx-wide .dx-lead{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.dx-wide .dx-hand{gap:0}.dx-wide .dx-owner{aspect-ratio:9/18;-webkit-mask-image:none;mask-image:none}.dx-wide .dx-owner .dx-lock{padding-bottom:2.5rem}.dx-wide .dx-owner .dx-notice{margin-top:auto}.dx-wide .dx-note{margin-top:1.5rem}:root[data-depth] .demo-depth .dx-wide :is(.dx-call,.dx-owner){animation:none}}@media (37.5625rem<=width<64rem) and (orientation:landscape) and (max-height:32rem){.dx-wide{--dx-w:19.5rem;--dx-fit:var(--dx-w)}.dx-wide .dx-stage{grid-template-columns:repeat(2,max-content);justify-content:start;align-items:start;column-gap:1.5rem}.dx-wide .dx-hand{grid-template-columns:8.5rem max-content;align-items:start;column-gap:1rem;max-width:none}.dx-wide .dx-hand:has(>.dx-owner){margin-top:0}.dx-wide .dx-hand>.dx-phone{width:var(--dx-w);zoom:var(--dx-zoom,1);max-width:none}.dx-wide .dx-owner{aspect-ratio:9/18;-webkit-mask-image:none;mask-image:none}.dx-wide .dx-owner .dx-lock{padding-bottom:2.5rem}.dx-wide .dx-owner .dx-notice{margin-top:auto}}@media (max-width:47.99rem){.dx-owner{aspect-ratio:auto;-webkit-mask-image:linear-gradient(#000 calc(100% - 3.5rem),#0000);mask-image:linear-gradient(#000 calc(100% - 3.5rem),#0000)}.dx-owner .dx-lock{padding-bottom:4rem}.dx-owner .dx-notice{margin-top:1.75rem}}@media (46rem<=width<48rem){.dx-stage{grid-template-columns:repeat(2, minmax(0, var(--dx-w)));justify-content:start;align-items:start;column-gap:1.75rem}.dx-hand:has(>.dx-owner){margin-top:3.5rem}.dx-owner{aspect-ratio:9/18;-webkit-mask-image:none;mask-image:none}.dx-owner .dx-lock{padding-bottom:2.5rem}.dx-owner .dx-notice{margin-top:auto}}@media (max-width:22.5rem){.dx-lock-time{font-size:3.5rem}.dx-call-name{font-size:1.4375rem}}@media (prefers-reduced-motion:reduce){.dx-notice,.dx-key{transition:none}.dx-thread[data-play] :is(.dx-msg,.dx-alert-wrap .dx-notice){animation:none}}@media (37.5625rem<=width<64rem) and (orientation:landscape) and (max-height:32rem){.dx-key{position:relative}.dx-key:after{content:"";border-radius:999px;position:absolute;inset:-50%}}