/* PCTwin motion. Start states only under html.mo; without it the page is the finished page. */
:root{--ease-settle:cubic-bezier(.22,1,.36,1);--ease-lift:cubic-bezier(.3,0,.2,1);--ease-exit:cubic-bezier(.4,0,1,1);--dir:1}
.mo-layer{position:absolute;left:0;top:0;width:0;height:0;overflow:visible;pointer-events:none;z-index:60;contain:size layout style}
.mo-layer svg{position:absolute;margin:0;will-change:transform,opacity}
.mo-check,.mo-line,.mo-ring{display:none}
.stage-buttons{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
@media screen{
/* Handover */
html.mo .setup-ends:not(.mo-done) .destination .ui-mark:not(.mo-in){color:transparent;background:transparent;outline:1px dashed #7699E6;outline-offset:-1px;border-radius:3px}
html.mo .scene-link>span{z-index:61}
html.mo .scene-link circle:not(.trace-dot){transform-box:fill-box;transform-origin:center}
html.mo .scene-link:not(.mo-done) circle:not(.trace-dot){opacity:.5;transform:scale(.96)}
/* Pick */
html.mo .pairing:not(.mo-run) :is(.pair-code,.pair-number,.pair-choice){opacity:0}
html.mo .pairing:not(.mo-done) .pair-choice[data-picked]{border:1px solid #BFD0ED;background:#F8FAFF;padding:7px 10px;color:inherit}
html.mo .pairing:not(.mo-done) .pair-choice[data-picked] small,html.mo .pairing:not(.mo-done) .pair-choice[data-picked] b:before{opacity:0}
html.mo .pair-choices{position:relative}
html.mo .mo-ring{display:block;position:absolute;box-sizing:border-box;border:2px solid #2454F2;border-radius:9px;pointer-events:none;transform-origin:0 0;opacity:0}
/* Review, Settle in */
html.mo .review-figure:not(.mo-done) .fig-check:after{opacity:0}
html.mo .settle-figure:not(.mo-done) :is(.fig-row,.fig-state){opacity:0}
/* Meter, note */
html.mo .meter>span{transform-origin:calc(50% - 50% * var(--dir)) 50%}
html.mo .meter:not(.mo-done)>span{transform:scaleX(0)}
html.mo .belonging-note:not(.mo-done) .note-step{opacity:0}
/* Reveals, events */
html.mo .mo-r{opacity:0}
html.mo .join-input-row{position:relative}
html.mo form[aria-busy=true] .mo-line{display:block;position:absolute;inset-inline:0;bottom:-7px;height:2px;overflow:hidden;border-radius:2px;background:#E4EBFA}
.mo-line i{display:block;width:30%;height:100%;background:#2454F2;animation:mo-busy 1.1s var(--ease-lift) infinite}
html.mo .mo-check{display:inline-block;width:.72em;height:.72em;margin-inline-start:.3em;vertical-align:-.02em;color:#176747;overflow:visible}
html.mo .demo-enter{animation:mo-fade .16s var(--ease-settle) both}
}
html:not(.mo) .demo-enter{animation:none}
@media screen and (max-width:900px){
html.mo .nav-row nav.is-open{animation:mo-menu .24s var(--ease-settle)}
html.mo .nav-row nav.mo-shut{display:flex;pointer-events:none}
}
@keyframes mo-busy{from{transform:translateX(calc(var(--dir) * -100%))}to{transform:translateX(calc(var(--dir) * 340%))}}
@keyframes mo-fade{from{opacity:0}}
@keyframes mo-menu{from{opacity:0;transform:translateY(-8px)}}
@media (prefers-reduced-motion:reduce){.mo-line i{animation:none}}
/* What moves. */
/* Start states also need html.wm (set by what-moves.js): if that script fails, the page is finished. */
@media screen{
html.mo.wm .imprint-new .imprint-tag{z-index:1}
html.mo.wm .imprint-new .mo-fly{z-index:0}
html.mo.wm .wm-matrix:not(.mo-done) .cell-mark{opacity:0}
.mo-dot{position:absolute;left:0;top:0;width:10px;height:10px;border-radius:50%;background:#2454F2;box-shadow:0 0 0 3px #fff;pointer-events:none;z-index:2}
html.mo.wm .wm-known{transform-origin:calc(50% - 50% * var(--dir)) 50%}
html.mo.wm .wm-horizon:not(.mo-done) .wm-known{transform:scaleX(0)}
html.mo.wm .wm-horizon:not(.mo-done) .wm-beyond{clip-path:inset(-6px 100% -6px 0)}
html.mo.wm .wm-horizon:not(.mo-done) .wm-beyond:dir(rtl){clip-path:inset(-6px 0 -6px 100%)}
html.mo.wm .mo-w :is(.wm-word,.wm-glyph,.wm-means,.wm-lede,.wm-you,.wm-items li){opacity:0}
}