.joint-shell{color:#253735;position:relative;min-width:0}.joint-shell [hidden]{display:none!important}.joint-stage{height:320px;position:relative;background:radial-gradient(ellipse at 50% 35%,#faf8f2,#e4dfd1);border-radius:12px;overflow:hidden}.joint-stage canvas{display:block;width:100%;height:100%;touch-action:none}.joint-success{position:absolute;bottom:14px;right:15px;width:28px;height:28px;display:grid;place-items:center;border-radius:50%;color:#fff;background:#398466;font:bold 18px/1 Arial;box-shadow:0 2px 8px #254e3330;z-index:2}.joint-cards{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));padding:13px 4px 20px;margin-top:4px;perspective:1000px}.joint-card{position:relative;height:112px;perspective:600px;transform:translateY(var(--joint-drop)) rotate(var(--joint-turn)) scale(.87);transition:transform .85s cubic-bezier(.23,.77,.35,1);z-index:1;filter:drop-shadow(0 3px 3px #342b1c26)}.joint-cards.is-arranged .joint-card{transform:translateY(0) rotate(0) scale(1);filter:none}.joint-card-inner{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .68s cubic-bezier(.22,.72,.28,1)}.joint-card.is-flipped .joint-card-inner{transform:rotateY(180deg)}.joint-card-face{position:absolute;inset:0;backface-visibility:hidden;overflow:hidden;background:#f7eed9;border:1px solid #bcb49c;border-radius:4px;box-sizing:border-box}.joint-symbol-face{display:grid;place-items:center}.joint-symbol-grid{display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(3,1fr);gap:3px;width:calc(100% - 12px);height:calc(100% - 12px);font:21px/1.2 "Segoe UI",Arial,sans-serif;color:#8b897c}.joint-symbol-grid span{display:grid;place-items:center;border-radius:4px;transition:color .3s,background .3s,box-shadow .3s}.joint-symbol-grid span.is-selected{background:#2e7b63;color:#fff9df;box-shadow:0 0 0 2px #aacdb9;font-weight:700}.joint-line-face{transform:rotateY(180deg);background:#f4efdf;border-left:0;border-right:0;border-radius:0}.joint-line-face svg{display:block;width:100%;height:100%;overflow:visible}.joint-noise{fill:none;stroke:#b0a894;stroke-width:2.3;stroke-linecap:round;opacity:.8;transition:opacity .8s}.joint-route{fill:none;stroke:#687865;stroke-width:2.8;stroke-linejoin:round;stroke-linecap:butt;transition:stroke .8s,stroke-width .8s}.joint-cards.is-connected .joint-route{stroke:#247653;stroke-width:5.2}.joint-cards.is-connected .joint-noise{opacity:.37}.joint-cards.is-connected .joint-line-face{background:#edf3df;transition:background .8s}@media(max-width:500px){.joint-stage{height:300px}.joint-card{height:100px}.joint-symbol-grid{font-size:18px;gap:1px}}@media(prefers-reduced-motion:reduce){.joint-card,.joint-card-inner,.joint-symbol-grid span,.joint-route,.joint-noise{transition-duration:.01ms}}
.joint-line-face{background:#f7efdc;border:1px solid #aa9a7f;border-radius:3px;box-shadow:inset 2px 0 #fff8e8,inset -2px 0 #e2d5b8}.joint-line-face svg{position:absolute;inset:0;width:100%;height:100%}.joint-noise{fill:none;stroke-width:2.65;stroke-linecap:round;stroke-linejoin:round;opacity:1;transition:none}.joint-noise-orange{stroke:#b85d2e}.joint-noise-violet{stroke:#7956a3}.joint-noise-blue{stroke:#337fa8}.joint-route{stroke:#416d52;stroke-width:2.8}.joint-cards.is-connected .joint-route{stroke:#206843;stroke-width:4.6}.joint-cards.is-connected .joint-noise{opacity:1}.joint-cards.is-connected .joint-line-face{background:#f7efdc}