.help-toggle{
  position:relative;
  display:grid;
  place-content:center;
  min-width:44px;
  min-height:44px;
  padding:4px 7px;
  border:1px solid #9ebbd64a;
  color:#dcecff;
  background:#06101bc7;
  box-shadow:inset 0 -2px rgba(var(--rgb),.22);
  font-family:Arial,"Hiragino Kaku Gothic ProN",sans-serif;
  line-height:1;
}
.help-toggle>span{font-size:18px;font-weight:900;color:var(--accent);text-shadow:0 0 8px var(--accent)}
.help-toggle>small{margin-top:2px;font-size:6px;letter-spacing:1px;color:#9eb3c9}
.help-toggle:hover,.help-toggle[aria-expanded=true]{border-color:var(--accent);background:rgba(var(--rgb),.18)}

.help-dialog{
  width:min(860px,calc(100vw - 28px));
  max-width:none;
  max-height:min(760px,calc(100dvh - 28px));
  margin:auto;
  padding:0;
  border:0;
  color:#edf6ff;
  background:transparent;
  overflow:visible;
}
.help-dialog::backdrop{background:#01040bd6;backdrop-filter:blur(5px)}
.help-sheet{
  position:relative;
  max-height:min(760px,calc(100dvh - 28px));
  padding:24px;
  overflow:auto;
  overscroll-behavior:contain;
  border:1px solid #85b7e969;
  background:
    linear-gradient(135deg,rgba(var(--rgb),.12),transparent 34%),
    linear-gradient(155deg,#071323f7,#030810fa 72%);
  box-shadow:0 24px 90px #000c,inset 0 0 45px rgba(var(--rgb),.06);
  clip-path:polygon(0 0,calc(100% - 26px) 0,100% 26px,100% 100%,26px 100%,0 calc(100% - 26px));
}
.help-sheet::before{content:"";position:absolute;inset:0 auto auto 0;width:38%;height:2px;background:linear-gradient(90deg,var(--accent),transparent);box-shadow:0 0 14px var(--accent)}
.help-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:18px}
.help-kicker{margin:0 0 5px;color:var(--accent);font-size:8px;font-weight:900;letter-spacing:3px}
.help-head h2{margin:0;font-family:Impact,"Arial Narrow",sans-serif;font-size:clamp(27px,4vw,45px);font-style:italic;font-weight:400;letter-spacing:1px}
.help-close{flex:0 0 44px;width:44px;height:44px;border:1px solid #a6bed856;background:#07111edd;color:#e6f2ff;font-size:26px;line-height:1}
.help-close:hover{border-color:var(--accent);color:#fff}
.help-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.help-card{position:relative;min-height:112px;padding:13px 14px 12px;border:1px solid #95b7d52e;background:#ffffff08}
.help-card h3{display:flex;align-items:center;gap:8px;margin:0 0 9px;color:#fff;font-size:12px;letter-spacing:1px}
.help-card h3::before{content:"";width:4px;height:16px;background:var(--accent);box-shadow:0 0 8px var(--accent)}
.help-card ul{display:grid;gap:6px;margin:0;padding:0;list-style:none;color:#bfcfe0;font-size:11px;line-height:1.55}
.help-card li{padding-left:12px;position:relative}
.help-card li::before{content:"//";position:absolute;left:0;top:0;color:var(--accent);font-size:8px;font-weight:900;letter-spacing:-2px}
.help-card b{color:#edf6ff;font-weight:800}
.help-key{display:inline-block;min-width:23px;margin:0 2px;padding:3px 5px;border:1px solid #8eabc44f;background:#050b14;color:#ddecff;font-size:8px;line-height:1;text-align:center}
.help-foot{margin:13px 2px 0;color:#74879b;font-size:9px;line-height:1.5;text-align:right}

@media(min-width:761px) and (min-height:521px){
  /* The desktop utility rail belongs above the footer stacking context. */
  .shell:not(.art-only) .topbar{z-index:42}
  .shell:not(.art-only) .help-toggle{
    width:34px;
    min-width:34px;
    min-height:30px;
    height:30px;
    padding:2px 5px;
    border:0;
    border-right:1px solid #d8ebff2e;
    background:transparent;
    box-shadow:none;
  }
  .shell:not(.art-only) .help-toggle>span{font-size:15px}
  .shell:not(.art-only) .help-toggle>small{display:none}
}

@media(max-width:760px){
  .help-toggle{padding:3px;min-width:44px;width:44px}
  .help-toggle>small{display:none}
  .help-dialog{width:100%;max-height:88dvh;margin:auto 0 0}
  .help-sheet{
    max-height:88dvh;
    padding:18px 13px calc(14px + env(safe-area-inset-bottom,0px));
    border-left:0;
    border-right:0;
    border-bottom:0;
    clip-path:polygon(0 0,calc(100% - 19px) 0,100% 19px,100% 100%,0 100%);
    animation:help-sheet-in .22s cubic-bezier(.16,1,.3,1) both;
  }
  .help-head{position:sticky;top:-18px;z-index:2;margin:-1px -1px 12px;padding:1px 1px 10px;background:linear-gradient(#071323 82%,transparent)}
  .help-kicker{font-size:7px;letter-spacing:2px}.help-head h2{font-size:28px}
  .help-close{width:44px;height:44px}
  .help-grid{grid-template-columns:1fr;gap:7px}
  .help-card{min-height:0;padding:11px 12px}.help-card h3{margin-bottom:7px;font-size:11px}
  .help-card ul{gap:4px;font-size:10px;line-height:1.5}
  .help-foot{font-size:8px;text-align:left}
}
@keyframes help-sheet-in{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.help-sheet{animation:none}}