#instructions{width:min(94vw,680px);padding:0;overflow:hidden;border-radius:16px;background:#0c1b34}
#instructions[open]{display:flex;flex-direction:column}
.help-header{flex:none;padding:20px 26px 16px;background:linear-gradient(120deg,#1c385b,#10233e);border-bottom:1px solid #8cb6e23d}
.panel-eyebrow{margin:0 0 6px;font:650 11px var(--mono);text-transform:uppercase;letter-spacing:.08em;color:#b4deff}
.help-header>p:last-child{margin:6px 0 0;color:#c1d7ed;font-size:13px;line-height:1.5}
.help-content{overflow-y:auto;min-height:0;overscroll-behavior:contain;overflow-wrap:anywhere;padding:18px 26px;scroll-padding-block:8px;scrollbar-color:#5c85b3 #0c1b34}
#save-status{margin:0 0 16px;font-size:12px;line-height:1.5;color:#bed5ec;border-left:2px solid #8cd1ff;padding-left:10px}
#save-status[data-state="warning"]{border-color:#ffdb86;color:#ffdb86}
#save-status[data-state="success"]{border-color:#93e4c1;color:#93e4c1}
#instructions .help-steps{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:14px}
#instructions .help-steps li{display:flex;gap:12px;margin:0}
.step-number{display:grid;place-items:center;flex:0 0 28px;height:28px;border-radius:50%;color:#bce3ff;background:#213f61;font:700 12px var(--mono)}
.help-steps h3{font-size:15px;margin:2px 0 4px;letter-spacing:-.02em}
.help-content p,.help-tips dd{font-size:13px;line-height:1.55;color:#bed3e9}
.help-steps p{margin:0}.help-content strong{color:#edf6ff}
.help-section,.help-privacy{border-top:1px solid #8fb9df30;margin:0}
.help-section summary,.help-privacy summary{padding:13px 4px;min-height:46px;font-size:13px;font-weight:650;color:#e4f1ff;cursor:pointer;line-height:1.5}
.help-section summary:hover,.help-privacy summary:hover{background:#142b46}
.help-section summary:focus-visible,.help-privacy summary:focus-visible{outline:2px solid #bce3ff;outline-offset:-2px;border-radius:4px}
.help-tips{margin:0 0 16px;display:grid;gap:14px}.help-tips dt{font-size:13px;font-weight:750;color:#d6ebff}.help-tips dd{margin:3px 0 0}
.shortcut-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 20px;margin:0 0 14px}
.shortcut-grid>div{display:flex;align-items:center;justify-content:space-between;gap:8px;border-bottom:1px solid #87b5df24;padding:9px 0;font-size:13px}
.shortcut-grid dd{margin:0;white-space:nowrap}.shortcut-grid kbd{padding:3px 6px;color:#d5edff}.shortcut-grid dt{color:#c5daef}
.help-content .help-rating{font-size:11px;color:#a9c2db;margin:14px 0 0}
#instructions .dialog-actions{flex:none;justify-content:space-between;padding:12px 26px;border-top:1px solid #8cb6e23d;background:#10243e}
#instructions .dialog-actions .fire{min-height:44px;padding-inline:18px;font-size:12px}
#instructions #restart{background:transparent;border-color:#8bbce051;color:#d9ebff;font-weight:550}
#instructions #restart:hover{background:#233f60}
@media(max-width:540px){
  #instructions{width:calc(100vw - 16px);max-height:calc(100dvh - var(--top) - var(--bottom) - 16px)}
  .help-header{padding:14px 16px}.help-header h2{font-size:25px}
  .help-content{padding:14px 16px}
  #instructions .help-steps li{gap:10px}
  .shortcut-grid{grid-template-columns:1fr}
  #instructions .dialog-actions{padding:10px 12px;gap:6px}
  #instructions .dialog-actions .fire{padding-inline:12px}
}
@media(max-height:520px){.help-header{padding-block:10px}.help-header>p:last-child{display:none}.help-content{padding-block:12px}#instructions .dialog-actions{padding-block:8px}}
