.mobile-guide {
  position:fixed;top:calc(max(12px,env(safe-area-inset-top)) + 58px);left:50%;transform:translateX(-50%);
  width:min(360px,calc(100% - 28px));box-sizing:border-box;padding:10px 14px 14px;z-index:32;
  color:#f1dfc4;background:#1b1921f5;border:1px solid #84705b66;border-radius:20px;
  box-shadow:0 10px 35px #0004;font-family:inherit;pointer-events:none;user-select:none;
  animation:mobile-guide-in .22s ease-out;
}
.mobile-guide[hidden] {display:none;}
.mobile-guide-heading {display:flex;align-items:center;justify-content:space-between;height:30px;}
.mobile-guide-heading strong {font-size:15px;font-weight:500;}
.mobile-guide-heading button {display:grid;place-items:center;flex:none;width:44px;height:44px;margin:-6px -8px -6px 0;padding:10px;
  border:0;background:transparent;color:#c5b6a1;pointer-events:auto;touch-action:manipulation;cursor:pointer;}
.mobile-guide-heading button:focus-visible {outline:2px solid #9dd5c0;border-radius:9px;}
.mobile-guide-heading button svg {width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;}
.mobile-guide-phones {display:grid;grid-template-columns:1fr 1fr;direction:ltr;gap:6px;margin:7px 0 12px;}
.mobile-guide-phones figure {margin:0;min-width:0;}
.mobile-guide-phones svg {display:block;width:100%;height:auto;overflow:visible;}
.mobile-guide-phones figcaption {font-size:11px;text-align:center;color:#beaf9c;direction:rtl;margin-top:3px;}
.mobile-guide-legend {display:flex;direction:ltr;justify-content:space-around;gap:10px;font-size:12px;}
.mobile-guide-legend span {display:flex;direction:rtl;align-items:center;gap:5px;white-space:nowrap;}
.mobile-guide-legend b {font-weight:600;}
.mobile-guide-legend i {width:6px;height:6px;border-radius:50%;background:currentColor;}
.mg-left-label {color:#a0dac4;}.mg-right-label {color:#edc28b;}
.mg-grip {fill:#35303b;stroke:#7e6c74;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.mg-phone {fill:#100e17;stroke:#c6b6a0;stroke-width:2.5;}
.mg-screen {fill:#24283c;}
.mg-land {fill:#354a4a;}
.mg-moon {fill:#cbbb8d;opacity:.8;}
.mg-stars {stroke:#bfcbb9;stroke-width:2;stroke-linecap:round;}
.mg-speaker {fill:#100e17;}
.mg-left {color:#9dd5c0;}.mg-right {color:#edbd80;}
.mg-ring {fill:#9dd5c014;stroke:currentColor;stroke-width:1.8;}
.mg-arrow,.mg-trail {fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.mg-trail {stroke-dasharray:3 4;opacity:.6;}
.mg-thumb {fill:currentColor;stroke:#25212c;stroke-width:1.8;stroke-linejoin:round;}
.mg-nail {fill:#fff2da45;stroke:#25212c66;stroke-width:1;}
.mg-thumb-left {animation:mobile-thumb-move 2.8s ease-in-out infinite;}
.mg-thumb-right {animation:mobile-thumb-look 2.8s ease-in-out infinite;}
@keyframes mobile-thumb-move {0%,20%,100% {transform:translateY(0);}45%,65% {transform:translateY(-7px);}}
@keyframes mobile-thumb-look {0%,20%,100% {transform:translateX(0);}45% {transform:translateX(-8px);}65% {transform:translateX(7px);}}
@keyframes mobile-guide-in {from {opacity:0;}to {opacity:1;}}
@media(orientation:landscape) {
  .mobile-guide {top:max(10px,env(safe-area-inset-top));width:min(340px,calc(100% - 248px));padding:8px 12px 12px;border-radius:17px;}
  .mobile-guide-heading strong {font-size:14px;}
  .mobile-guide-phones {margin:3px 0 8px;}
  .mobile-guide-phones svg {max-height:112px;}
  .mobile-guide-legend {font-size:11px;gap:4px;}
}
@media(orientation:landscape) and (max-width:680px) {
  .mobile-guide {top:calc(max(10px,env(safe-area-inset-top)) + 54px);}
}
@media(prefers-reduced-motion:reduce) {.mobile-guide,.mg-thumb {animation:none;}}