.ljp-demo [hidden]{display:none!important}.ljp-note{color:var(--color-muted);margin:-1rem 0 1.5rem;font-size:.8125rem}.ljp-grid{grid-template-areas:"side""stage""status";gap:1.5rem;display:grid}@media (width>=960px){.ljp-grid{grid-template:"side stage""status stage"1fr/300px 1fr;align-items:start;column-gap:3rem}}.ljp-side{grid-area:side}.ljp-stage{flex-direction:column;grid-area:stage;align-items:flex-start;gap:1rem;min-width:0;display:flex}.ljp-status{min-height:3.2em;color:var(--color-body);grid-area:status;margin:0;font-size:.9375rem;line-height:1.8}.ljp-steps{gap:.5rem;margin:0;padding:0;list-style:none;display:grid}.ljp-step{text-align:left;border:1px solid var(--color-hair);background:var(--color-card);width:100%;color:var(--color-ink);font:inherit;cursor:pointer;border-radius:10px;align-items:center;gap:.75rem;padding:.7rem .9rem;font-size:.9375rem;font-weight:600;display:flex}.ljp-step:hover{background:var(--color-primary-tint)}.ljp-step[aria-current=step]{border-color:var(--color-primary-deep);background:var(--color-primary-tint)}.ljp-step__n{background:var(--color-primary-tint);width:1.6rem;height:1.6rem;color:var(--color-primary-deep);border-radius:7px;flex:none;place-items:center;font-size:.8125rem;display:grid}.ljp-step[aria-current=step] .ljp-step__n{background:var(--color-primary);color:#fff}.ljp-keys{margin-top:.75rem}.ljp-reset{border:1px solid var(--color-hair);background:var(--color-card);color:var(--color-body);font:inherit;cursor:pointer;border-radius:999px;padding:.4rem 1rem;font-size:.8125rem}.ljp-desk{aspect-ratio:16/10;border:1px solid var(--color-hair);background:var(--color-band);border-radius:16px;width:100%;max-width:640px;position:relative;overflow:hidden}.ljp-mon{border:3px solid var(--color-ink);background:var(--color-card);border-radius:7px;position:absolute}.ljp-mon--left{width:21%;height:68%;box-shadow:0 0 0 4px var(--color-primary-tint), 0 0 0 6px var(--color-primary);top:9%;left:5%}.ljp-mon--top{width:52%;height:34%;top:7%;left:33%}.ljp-mon--laptop{width:36%;height:30%;top:49%;left:41%}.ljp-base{background:var(--color-ink);border-radius:0 0 10px 10px;width:44%;height:3.5%;position:absolute;top:79.5%;left:37%}.ljp-cam{background:var(--color-muted);border-radius:50%;width:6px;height:6px;margin-left:-3px;position:absolute;top:3px;left:50%}.ljp-demo[data-phase=press] .ljp-cam{background:var(--color-primary);box-shadow:0 0 0 3px var(--color-primary-tint)}.ljp-gaze{background:var(--color-primary-deep);color:#fff;white-space:nowrap;border-radius:999px;align-items:center;gap:4px;padding:2px 8px;font-size:11px;font-weight:600;display:inline-flex;position:absolute;top:8px;left:50%;transform:translate(-50%)}.ljp-gaze svg{width:14px;height:14px}@media (width<=560px){.ljp-gaze{padding:3px}.ljp-gaze__t{display:none}}.ljp-pointer{width:24px;height:24px;transition:left .38s cubic-bezier(.2,0,.2,1),top .38s cubic-bezier(.2,0,.2,1);position:absolute;transform:translate(-21%,-10%)}.ljp-pointer path{fill:#fff;stroke:var(--color-ink);stroke-width:1.4px;stroke-linejoin:round}.ljp-ring{aspect-ratio:1;pointer-events:none;border:5px solid var(--color-primary);width:7%;box-shadow:0 0 0 2px var(--color-primary-deep);opacity:0;border-radius:50%;position:absolute;transform:translate(-50%,-50%)}.ljp-demo[data-ring=on] .ljp-ring{opacity:1}.ljp-demo[data-spot=lost] .ljp-pointer,.ljp-demo[data-spot=lost] .ljp-ring{top:72%;left:72%}.ljp-demo[data-spot=left] .ljp-pointer,.ljp-demo[data-spot=left] .ljp-ring{top:43%;left:15.5%}.ljp-demo[data-spot=top] .ljp-pointer,.ljp-demo[data-spot=top] .ljp-ring{top:24%;left:59%}.ljp-ring.is-focus{animation:.42s cubic-bezier(.2,0,.2,1) ljp-focus}@keyframes ljp-focus{0%{width:64%}to{width:7%}}.ljp-press{border:1px solid var(--color-hair);background:var(--color-card);color:var(--color-ink);font:inherit;cursor:pointer;border-radius:999px;align-items:center;gap:.5rem;padding:.5rem 1.1rem .5rem .6rem;font-size:.9375rem;font-weight:600;display:inline-flex}.ljp-press:disabled{cursor:default;color:var(--color-muted)}.ljp-demo[data-phase=look] .ljp-press,.ljp-demo[data-phase=miss] .ljp-press{box-shadow:0 0 0 2px var(--color-primary)}.ljp-key{border:1px solid var(--color-hair);background:var(--color-band);min-width:1.9rem;height:1.9rem;color:var(--color-ink);border-radius:7px;place-items:center;font-size:1rem;display:inline-grid}.ljp-demo[data-phase=press] .ljp-key{background:var(--color-primary);border-color:var(--color-primary);color:#fff;animation:.36s 2 ljp-tap}@keyframes ljp-tap{50%{transform:translateY(2px)}}@media (prefers-reduced-motion:reduce){.ljp-pointer{transition:none}.ljp-ring.is-focus,.ljp-demo[data-phase=press] .ljp-key{animation:none}}