.demo-figure{margin:2rem 0 0}.demo-stage{border:1px solid var(--color-line);background:var(--color-parchment);border-radius:1.25rem;max-width:34rem;padding:1.25rem;position:relative;overflow:hidden}.demo-chip{white-space:nowrap;background:var(--color-green);color:var(--color-chalk);border-radius:999px;align-items:center;padding:.3rem .75rem;font-size:12px;font-weight:700;display:inline-flex}.demo-chip--clay{background:var(--color-clay)}.cd-cursor{z-index:3;background:var(--color-ink);clip-path:polygon(0 0,0 100%,30% 76%,52% 100%,68% 92%,46% 68%,82% 66%);opacity:0;width:16px;height:20px;animation:9s infinite cd-cursor;position:absolute;top:45%;right:28%}.cd{--row:2.35rem;gap:1rem;display:grid}.cd-board{grid-template-columns:2rem minmax(0,1fr);gap:.5rem;padding-right:6.75rem;display:grid}.cd-rungs{margin:0;padding:0;list-style:none}.cd-rungs li{height:var(--row);font-variant-numeric:tabular-nums;color:var(--color-umber);justify-content:center;align-items:center;font-size:13px;font-weight:700;display:flex}.cd-track{height:calc(var(--row) * 12);position:relative}.cd-range-label{left:calc(100% + .6rem);top:calc(var(--row) * 3 + 3px);width:6rem;height:calc(var(--row) * 5 - 6px);border-left:2px solid var(--color-clay);color:var(--color-clay);opacity:0;align-items:center;padding-left:.5rem;font-size:12px;font-weight:700;line-height:1.2;animation:9s infinite cd-range;display:flex;position:absolute}.cd-row{left:0;right:0;top:calc(var(--row) * var(--i));height:calc(var(--row) - 6px);border:1px solid var(--color-line-soft);background:var(--color-chalk);color:var(--color-ink);border-radius:.6rem;justify-content:space-between;align-items:center;margin-top:3px;padding:0 .85rem;font-size:14px;display:flex;position:absolute}.cd-points{font-variant-numeric:tabular-nums;font-weight:600;position:relative}.cd-points-before{opacity:0;animation:9s infinite cd-before;position:absolute;right:0}.cd-points-after{animation:9s infinite cd-after}.cd-row--range:before{content:"";border-radius:inherit;opacity:0;background:#be4b251a;border:1px solid #be4b2573;animation:9s infinite cd-range;position:absolute;inset:-1px}.cd-row--target:after{content:"";border:2px solid var(--color-clay);opacity:0;border-radius:.75rem;animation:9s infinite cd-target;position:absolute;inset:-3px}.cd-row--shift{transform:translateY(var(--row));animation:cd-shift 9s var(--ease-fluid) infinite}.cd-row--you{z-index:2;background:var(--color-green);color:var(--color-chalk);transform:translateY(calc(var(--row) * -4));animation:cd-you 9s var(--ease-fluid) infinite;border-color:#0000;font-weight:700}.cd-chips{height:2rem;position:relative}.cd-chip{opacity:0;position:absolute;top:0;left:0}.cd-chip--sent{animation:9s infinite cd-sent}.cd-chip--accepted{animation:9s infinite cd-accepted}.cd-chip--score{animation:9s infinite cd-score}.cd-chip--points{opacity:1;animation:9s infinite cd-points}@keyframes cd-range{0%,11%{opacity:0}14%,52%{opacity:1}58%,to{opacity:0}}@keyframes cd-target{0%,22%{opacity:0}25%,70%{opacity:1}76%,to{opacity:0}}@keyframes cd-cursor{0%,17%{opacity:0;transform:translate(26px,18px)}23%{opacity:1;transform:translate(0)}26%{transform:scale(.82)}29%,44%{opacity:1;transform:none}48%,to{opacity:0}}@keyframes cd-sent{0%,30%{opacity:0;transform:translateY(4px)}33%,43%{opacity:1;transform:none}46%,to{opacity:0}}@keyframes cd-accepted{0%,45%{opacity:0;transform:translateY(4px)}48%,55%{opacity:1;transform:none}58%,to{opacity:0}}@keyframes cd-score{0%,57%{opacity:0;transform:translateY(4px)}60%,64%{opacity:1;transform:none}67%,to{opacity:0}}@keyframes cd-points{0%,65%{opacity:0;transform:translateY(4px)}68%,93%{opacity:1;transform:none}97%,to{opacity:0}}@keyframes cd-before{0%,70%{opacity:1}74%,to{opacity:0}}@keyframes cd-after{0%,70%{opacity:0}74%,to{opacity:1}}@keyframes cd-shift{0%,72%{transform:translateY(0)}82%,to{transform:translateY(var(--row))}}@keyframes cd-you{0%,72%{transform:translateY(0)}82%,to{transform:translateY(calc(var(--row) * -4))}}.pd{--prow:2.2rem}.pd-all{z-index:2;background:var(--color-parchment);opacity:0;flex-direction:column;gap:.5rem;animation:9.5s infinite pd-all;display:flex;position:absolute;inset:1.25rem}.pd-all-label,.pd-band-label{letter-spacing:.12em;text-transform:uppercase;font-size:12px;font-weight:700}.pd-all-label{color:var(--color-umber)}.pd-not{opacity:0;align-self:flex-start;animation:9.5s infinite pd-not}.pd-all-window{border-radius:.75rem;flex:1;overflow:hidden}.pd-all-list{flex-direction:column;gap:6px;animation:9.5s linear infinite pd-scroll;display:flex}.pd-bar{background:var(--color-line);border-radius:.4rem;height:1.1rem;display:block}.pd-bands{gap:.75rem;animation:9.5s infinite pd-bands;display:grid}.pd-band--edge{background:var(--color-limestone);border-radius:.9rem;gap:6px;padding:.75rem;display:grid}.pd-band--yours{border:2px solid var(--color-green);background:var(--color-chalk);border-radius:1rem;padding:.9rem;position:relative}.pd-band-head{justify-content:space-between;align-items:center;gap:.5rem;margin-bottom:.6rem;display:flex}.pd-band-label{color:var(--color-green)}.pd-this{animation:9.5s infinite pd-this}.pd-rows{height:calc(var(--prow) * 5);position:relative}.pd-row{left:0;right:0;top:calc(var(--prow) * var(--i));height:calc(var(--prow) - 6px);border:1px solid var(--color-line-soft);background:var(--color-parchment);color:var(--color-ink);border-radius:.55rem;align-items:center;margin-top:3px;padding:0 .8rem;font-size:14px;display:flex;position:absolute}.pd-row:not(.pd-row--you):before{content:"";border-radius:inherit;background:#be4b251a;border:1px solid #be4b2573;animation:9.5s infinite pd-light;position:absolute;inset:-1px}.pd-row--shift{transform:translateY(var(--prow));animation:pd-shift 9.5s var(--ease-fluid) infinite}.pd-row--you{z-index:2;background:var(--color-green);color:var(--color-chalk);transform:translateY(calc(var(--prow) * -3));animation:pd-you 9.5s var(--ease-fluid) infinite;border-color:#0000;font-weight:700}.pd-cursor{animation:9.5s infinite pd-cursor}.pd-first{white-space:normal;margin-top:.7rem;animation:9.5s infinite pd-first}@keyframes pd-all{0%,18%{opacity:1}24%,to{opacity:0}}@keyframes pd-not{0%,6%{opacity:0}9%,19%{opacity:1}24%,to{opacity:0}}@keyframes pd-scroll{0%{transform:translateY(0)}22%,to{transform:translateY(-40%)}}@keyframes pd-bands{0%,20%{opacity:0;transform:scale(.97)}27%,to{opacity:1;transform:none}}@keyframes pd-this{0%,26%{opacity:0}30%,to{opacity:1}}@keyframes pd-you{0%,33%{opacity:0;transform:translateY(calc(var(--prow) * -6))}41%{opacity:1;transform:translateY(0)}66%{transform:translateY(0)}74%,to{opacity:1;transform:translateY(calc(var(--prow) * -3))}}@keyframes pd-light{0%,46%{opacity:0}51%,to{opacity:1}}@keyframes pd-first{0%,46%{opacity:0}51%,to{opacity:1}}@keyframes pd-cursor{0%,54%{opacity:0;transform:translate(26px,18px)}59%{opacity:1;transform:translate(0)}62%{transform:scale(.82)}65%{opacity:1;transform:none}69%,to{opacity:0}}@keyframes pd-shift{0%,66%{transform:translateY(0)}74%,to{transform:translateY(var(--prow))}}@media (prefers-reduced-motion:reduce){.demo-stage *,.demo-stage :before,.demo-stage :after{animation:none!important}}