.desktop-guide {
  position:fixed;bottom:92px;left:50%;transform:translateX(-50%);z-index:32;
  width:min(720px,calc(100% - 48px));padding:14px 20px 16px;
  color:#f3e2c6;background:linear-gradient(135deg,rgba(25,28,31,.96),rgba(34,24,36,.96));
  border:1px solid #827456;border-radius:20px;box-shadow:0 12px 42px #0007;
  pointer-events:none;user-select:none;animation:desktop-guide-in .3s ease-out;
}
.desktop-guide[hidden],.touch-mode .desktop-guide,.touch-cap .desktop-guide {display:none;}
.desktop-guide-heading {display:flex;align-items:center;justify-content:space-between;gap:14px;font-size:13px;}
.desktop-guide-heading>span {color:#b9ab98;}
.desktop-guide-heading strong {font-weight:500;font-size:17px;}
.desktop-guide kbd {display:inline-block;direction:ltr;font:600 12px "Segoe UI",sans-serif;color:#302a27;background:#f1d9ad;border:1px solid #cfac77;border-bottom-width:3px;border-radius:5px;padding:3px 7px;margin-inline-end:3px;}
.desktop-guide-heading kbd {background:#edb86a;font-size:15px;}
.desktop-guide-body {display:grid;grid-template-columns:minmax(0,1fr) 162px;direction:ltr;align-items:center;gap:10px;margin:10px 0 12px;}
.desktop-guide-art {display:block;direction:ltr;width:100%;height:auto;overflow:hidden;}
.desktop-guide-chat {display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:8px 0 8px 14px;border-left:1px solid #82745666;}
.desktop-guide .desktop-guide-enter {display:flex;align-items:center;justify-content:space-between;gap:12px;width:132px;height:68px;margin:0;padding:12px 15px;font-size:23px;border-radius:12px;border-color:#8fbaa7;border-bottom-width:6px;background:#b9dfcc;box-shadow:0 4px 0 #151d19,0 0 24px #b9dfcc12;}
.desktop-guide-enter svg {width:30px;height:24px;flex:none;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round;}
.desktop-guide-chat strong {font-size:18px;font-weight:600;}
.desktop-guide-chat p {margin:0;color:#c6baa9;font-size:12px;line-height:1.65;}
.dg-board {fill:#15151a;stroke:#645b57;stroke-width:1.5;}
.dg-key rect {fill:#36333a;stroke:#5b5457;stroke-width:1.5;}
.dg-key text {fill:#8e8482;text-anchor:middle;font:600 13px "Segoe UI",sans-serif;}
.dg-key-active rect {fill:#dbc6a4;stroke:#ab936d;stroke-width:2;}
.dg-key-active text {fill:#302a27;}
.dg-key-run rect {fill:#edb86a;stroke:#d19849;}
.dg-hand {fill:#98cabb15;stroke:#9acaba;stroke-width:2.5;}
.dg-fold {fill:none;stroke-width:1.5;opacity:.7;}
.dg-reach {fill:none;stroke-dasharray:4 5;}
.dg-mouse {fill:#37333d;stroke:#e3cda7;stroke-width:2;}
.dg-mouse rect {fill:#edb86a;stroke:none;}
.dg-caption {fill:#b4d6c8;text-anchor:middle;font:13px "Rubik","Segoe UI",sans-serif;}
.dg-caption-line {stroke:#83b0a0;stroke-width:1;fill:none;}
.desktop-guide-legend {display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;font-size:12px;white-space:nowrap;}
@keyframes desktop-guide-in {from {opacity:0;translate:0 6px;} to {opacity:1;translate:0 0;}}
@media(max-height:560px) {
  .desktop-guide {bottom:65px;width:min(500px,calc(100% - 32px));padding:10px 16px;}
  .desktop-guide-body {grid-template-columns:minmax(0,1fr) 132px;gap:6px;margin:8px 0;}
  .desktop-guide-chat {gap:6px;padding:4px 0 4px 10px;}
  .desktop-guide .desktop-guide-enter {width:112px;height:54px;padding:8px 10px;font-size:20px;}
  .desktop-guide-enter svg {width:24px;}
  .desktop-guide-chat strong {font-size:16px;}
  .desktop-guide-chat p {font-size:11px;}
  .desktop-guide-heading strong {font-size:14px;}
  .desktop-guide-legend {font-size:11px;gap:5px;}
}
@media(prefers-reduced-motion:reduce) {.desktop-guide {animation:none;}}