:root{--joy-red:#e84948;--joy-ink:#242a31;--joy-gray:#c5c6c1;--joy-cream:#e5e3da}.joy-shell{position:relative;isolation:isolate;box-sizing:border-box;width:100%;height:100%;min-height:250px;overflow:hidden;border-radius:30px;background:linear-gradient(155deg,#ebe9e0,#b8bcb9);padding:22px 32px 16px;color:var(--joy-ink);font-family:'Segoe UI',Arial,sans-serif;border:3px solid #f1f0e9;box-shadow:inset 0 -7px 0 #949c9c,0 24px 60px #0005;user-select:none;-webkit-user-select:none;touch-action:none}.joy-header{display:flex;justify-content:space-between;align-items:center;height:48px;gap:12px}.joy-brand{display:flex;align-items:center;gap:9px;font-size:9px;letter-spacing:2px;line-height:1.4}.joy-brand>span{font-size:35px;color:#ae3638}.joy-brand b{font-size:11px}.joy-hero{font-size:17px;font-weight:650;border:1px solid #969e9d;border-radius:100px;padding:9px 22px}.joy-connection{font-size:9px;letter-spacing:1.4px;display:flex;gap:7px;align-items:center}.joy-connection i{width:7px;height:7px;border-radius:50%;background:#428479;box-shadow:0 0 0 4px #42847917}.joy-stripe{height:7px;background:var(--joy-red);margin:20px 0 12px;border-radius:2px}.joy-main{height:calc(100% - 129px);min-height:190px;display:grid;grid-template-columns:1fr .85fr 1fr;background:var(--joy-ink);border-radius:8px;padding:15px 24px 8px;color:#dddcd3;align-items:center;gap:15px;box-shadow:inset 0 3px 7px #0005}.joy-left,.joy-right{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}.joy-caption{color:#f16a62;font-size:10px;font-weight:700;letter-spacing:3px}.joy-cross{width:174px;height:174px;position:relative;cursor:pointer;touch-action:none;filter:drop-shadow(0 6px 1px #0005)}.joy-cross-surface{position:absolute;inset:0;background:linear-gradient(145deg,#555c61,#11171e);clip-path:polygon(34% 0,66% 0,66% 34%,100% 34%,100% 66%,66% 66%,66% 100%,34% 100%,34% 66%,0 66%,0 34%,34% 34%)}.joy-cross:before{content:'';position:absolute;inset:-7px;background:#121820;clip-path:polygon(34% 0,66% 0,66% 34%,100% 34%,100% 66%,66% 66%,66% 100%,34% 100%,34% 66%,0 66%,0 34%,34% 34%)}.joy-arrow{position:absolute;color:#899196;text-shadow:0 -1px #000;font-size:19px;pointer-events:none}.joy-up{top:10px;left:calc(50% - 10px)}.joy-down{bottom:9px;left:calc(50% - 10px)}.joy-left-arrow{left:10px;top:calc(50% - 13px)}.joy-right-arrow{right:10px;top:calc(50% - 13px)}.joy-center{position:absolute;left:37%;top:37%;width:26%;height:26%;border-radius:50%;background:radial-gradient(circle at 35% 30%,#555e64,#242c34);box-shadow:inset 0 1px 2px #ffffff25,0 2px 3px #0008}.joy-cross[data-axis="left"] .joy-left-arrow,.joy-cross[data-axis="right"] .joy-right-arrow{color:#ffd781;text-shadow:0 0 12px #ffd781}.joy-footnote{font-size:8px;letter-spacing:1.8px;color:#9ca4a9}.joy-middle{text-align:center;align-self:stretch;display:flex;flex-direction:column;justify-content:center;gap:16px}.joy-model{font-size:8px;letter-spacing:2.2px;color:#7d878d}.joy-status{font-size:16px;line-height:1.5;letter-spacing:1.5px;font-weight:650;min-height:48px;display:grid;place-items:center}.joy-menu{display:flex;justify-content:center;gap:17px;margin-top:4px}.joy-menu button{background:none;border:0;color:#9aa2a7;font:6px 'Segoe UI',sans-serif;letter-spacing:.8px;cursor:pointer;min-height:35px}.joy-menu i{display:block;margin:0 auto 9px;width:42px;height:11px;border-radius:10px;background:linear-gradient(#777c7d,#3f484c);box-shadow:0 3px 0 #141b22;transform:rotate(-15deg)}.joy-signal{display:flex;justify-content:center;gap:4px;margin-top:4px}.joy-signal span{width:5px;height:5px;background:#57948a;border-radius:50%;opacity:.5}.joy-button-ring{padding:12px;background:#151c24;border-radius:50%;box-shadow:inset 0 3px 8px #0007}.joy-jump{width:124px;height:124px;border-radius:50%;border:2px solid #ff8e7d;background:radial-gradient(circle at 35% 25%,#ff7866,#e84948 55%,#b52935);color:#76232c;font:bold italic 58px Arial,sans-serif;text-shadow:0 1px 1px #ffa28e;box-shadow:0 0 18px #0006;cursor:pointer;touch-action:none;outline-offset:6px}.joy-jump.held,.joy-jump:active{transform:scale(.97);box-shadow:0 0 12px #0006}.joy-footer{display:flex;justify-content:space-between;font-size:8px;font-weight:650;letter-spacing:1.5px;padding-top:13px;color:#5f696d}.joy-shell.waiting .joy-main{opacity:.65}.joy-shell.disconnected .joy-connection i{background:#d44444}.joy-shell.sneg .joy-hero{border-color:#4f8496;color:#296276}@media(max-height:430px){.joy-shell{padding:10px 22px 12px;border-radius:18px}.joy-header{height:35px}.joy-brand{font-size:7px}.joy-brand b{font-size:9px}.joy-brand>span{font-size:25px}.joy-hero{font-size:13px;padding:6px 17px}.joy-stripe{margin:11px 0 8px;height:5px}.joy-main{height:calc(100% - 88px);padding:7px 18px;min-height:165px}.joy-cross{width:138px;height:138px}.joy-jump{width:100px;height:100px;font-size:45px}.joy-status{font-size:12px}.joy-middle{gap:8px}.joy-footer{padding-top:8px;font-size:6px}.joy-left,.joy-right{gap:7px}.joy-caption{font-size:8px}.joy-footnote{font-size:6px}}@media(max-width:550px) and (orientation:portrait){.joy-shell{padding:12px 12px 15px}.joy-brand{font-size:6px;letter-spacing:1px}.joy-brand b{font-size:7px}.joy-brand>span{font-size:24px}.joy-hero{font-size:10px;padding:6px 10px}.joy-connection{font-size:6px}.joy-main{padding:14px 6px;gap:4px;grid-template-columns:1fr .65fr 1fr}.joy-cross{width:105px;height:105px}.joy-jump{width:76px;height:76px;font-size:38px}.joy-button-ring{padding:7px}.joy-caption{font-size:7px;letter-spacing:1px}.joy-status{font-size:10px;letter-spacing:.5px}.joy-model{font-size:5px}.joy-menu{gap:2px;flex-direction:column}.joy-menu button{font-size:5px}.joy-menu i{width:30px;height:8px}.joy-footnote{font-size:5px}.joy-footer{font-size:5px;letter-spacing:.5px}.joy-header{gap:5px}.joy-middle{gap:8px}}

/* Matching physical sizes for the cross and jump button; team palettes. */
.joy-shell{--joy-size:140px}.joy-cross,.joy-jump{width:var(--joy-size);height:var(--joy-size);flex-shrink:0}.joy-caption,.joy-hero,.joy-brand,.joy-model,.joy-status{color:#a82f35}.joy-caption{color:#ff827b}.joy-model{color:#d38c8c}.joy-status{color:#e6b5b1}.joy-shell.sneg{--joy-red:#459bdb;background:linear-gradient(155deg,#edf1f1,#b9c8d1)}.joy-shell.sneg .joy-brand,.joy-shell.sneg .joy-brand>span,.joy-shell.sneg .joy-hero{color:#256ca3}.joy-shell.sneg .joy-caption{color:#79caff}.joy-shell.sneg .joy-model{color:#88b3d0}.joy-shell.sneg .joy-status{color:#c0e5ff}.joy-shell.sneg .joy-jump{border-color:#a5e3ff;background:radial-gradient(circle at 35% 25%,#81d4ff,#459bdb 55%,#246399);color:#1c507e;text-shadow:0 1px 1px #bbe9ff;box-shadow:0 0 18px #0006}.joy-shell.sneg .joy-jump.held,.joy-shell.sneg .joy-jump:active{box-shadow:0 0 12px #0006}.joy-shell.sneg .joy-cross[data-axis="left"] .joy-left-arrow,.joy-shell.sneg .joy-cross[data-axis="right"] .joy-right-arrow{color:#79caff;text-shadow:0 0 12px #79caff}@media(max-height:430px){.joy-shell{--joy-size:110px}}@media(max-width:550px) and (orientation:portrait){.joy-shell{--joy-size:86px}}