#controls-help { box-sizing:border-box; width:min(880px,calc(100vw - 24px)); max-width:none; height:min(850px,calc(100dvh - 32px)); max-height:calc(100dvh - 32px); padding:0; border:1px solid var(--friend-border,#557895); border-radius:16px; background:var(--friend-surface,#101b2d); color:var(--friend-text,#edf5ff); font:15px/1.55 system-ui,sans-serif; box-shadow:0 20px 80px #0007; }
#controls-help[open] { display:flex; flex-direction:column; }
#controls-help::backdrop { background:#060c19a6; }
#controls-help header { display:flex; gap:16px; align-items:flex-start; justify-content:space-between; padding:18px 24px 12px; }
#controls-help h2 { margin:0; font-size:23px; } #controls-help header p { margin:4px 0 0; font-size:13px; }
#controls-help button { min-height:44px; border:1px solid var(--friend-border,#557895); border-radius:8px; padding:8px 12px; background:var(--friend-button,#1b3046); color:inherit; font:inherit; cursor:pointer; }
#controls-help [data-help-close] { font-size:24px; min-width:44px; line-height:1; }
#controls-help nav { display:flex; flex-wrap:wrap; gap:6px; padding:0 24px 14px; border-bottom:1px solid var(--friend-border,#557895); }
#controls-help nav button { font-size:13px; }
#controls-help .help-body { min-height:0; overflow:auto; overscroll-behavior:contain; padding:0 24px 24px; }
#controls-help section { scroll-margin-top:12px; padding:10px 0 14px; border-bottom:1px solid var(--friend-border,#557895); }
#controls-help h3 { margin:14px 0 10px; font-size:20px; } #controls-help h4 { margin:10px 0; }
#controls-help p { margin:8px 0 14px; } #controls-help dl { margin:0; }
#controls-help dl > div { display:grid; grid-template-columns:minmax(145px,1fr) 2fr; gap:18px; padding:11px 0; }
#controls-help dt { font-weight:650; } #controls-help dd { margin:0; }
#controls-help details { margin-top:18px; } #controls-help summary { cursor:pointer; padding:10px 0; font-weight:650; }
#controls-help .help-input-groups { display:flex; flex-direction:column; } #controls-help .help-mouse { order:-1; }
#controls-help .help-preferences { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
#controls-help .help-preferences label { display:flex; align-items:center; gap:16px; justify-content:space-between; padding:14px; border:1px solid var(--friend-border,#557895); border-radius:10px; }
#controls-help .help-preferences label span span, #controls-help small { display:block; font-size:13px; margin-top:4px; }
#controls-help small { opacity:.8; } #controls-help input { flex-shrink:0; width:44px; height:32px; cursor:pointer; accent-color:#548dc2; }
#controls-help :focus-visible { outline:3px solid #559fc9; outline-offset:3px; }
@media (pointer:coarse) { #controls-help .help-touch { order:-2; } }
@media (max-width:600px) {
  #controls-help { width:calc(100vw - 12px); height:calc(100dvh - 16px); max-height:calc(100dvh - 16px); border-radius:10px; }
  #controls-help header { padding:14px; } #controls-help nav { padding:0 14px 10px; gap:5px; }
  #controls-help .help-body { padding:0 14px 20px; } #controls-help h2 { font-size:20px; }
  #controls-help dl > div { display:block; } #controls-help dd { margin-top:4px; }
  #controls-help .help-preferences { grid-template-columns:1fr; }
}