/* The information dialog is scoped independently from playback and library panels. */
#help-panel{--help-surface:#191b1e;--help-raised:#23262b;--help-text:#eef2f8;--help-muted:#b4becb;--help-line:#343941;--help-accent:var(--archive-accent,#fff);padding:0;width:min(680px,calc(100vw - 40px));max-width:680px;max-height:calc(100dvh - 48px);margin:auto;border:1px solid var(--help-line);border-radius:22px;background:var(--help-surface);color:var(--help-text);font-size:16px;line-height:1.65;overflow:auto;overscroll-behavior:contain;scrollbar-width:none}
#help-panel .help-header{position:sticky;top:0;z-index:1;display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:25px 28px 19px;background:var(--help-surface)}
#help-panel h2{margin:0;font-size:24px;line-height:1.35;font-weight:750;letter-spacing:-.03em}
#help-panel .help-header>div{min-width:0}
#help-panel .help-header>button{display:grid;place-items:center;flex:none;width:40px;min-height:40px;padding:8px;border-radius:8px;color:var(--help-muted)}
#help-panel .help-header>button:hover{background:var(--help-raised)}
#help-panel p{margin:0;color:var(--help-muted)}
#help-panel .help-version{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:8px;font-size:13px}
#help-panel a{color:var(--help-accent)}#help-panel a:hover{text-decoration:underline}
#help-panel .help-content{padding:0 28px 24px}
#help-panel h3{display:flex;align-items:center;flex-wrap:wrap;gap:9px;margin:0 0 9px;font-size:16px;font-weight:700;line-height:1.45;color:var(--help-text)}
#help-panel h3>svg{width:20px;height:20px;flex:none;color:var(--help-accent)}
#help-panel .help-start{display:grid;grid-template-columns:1fr 1fr;gap:28px;padding:4px 0 20px;border-bottom:1px solid var(--help-line)}
#help-panel .help-start p{font-size:14px;line-height:1.7}#help-panel .help-start strong{color:var(--help-text);font-weight:600}
#help-panel .help-platform{margin-top:13px}
#help-panel .help-shortcuts{margin:10px 0 0}
#help-panel .help-shortcuts>div{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:5px 0;font-size:14px}
#help-panel dt{color:var(--help-muted)}#help-panel dd{margin:0}
#help-panel kbd{font:500 12px/1.5 Pretendard,system-ui,sans-serif;display:inline-block;padding:3px 7px;border:1px solid var(--help-line);border-radius:5px;background:#30343b;color:var(--help-text);white-space:nowrap}
#help-panel .help-lock{display:flex;align-items:flex-start;gap:12px;margin:20px 0;padding:16px 17px;background:var(--help-raised);border-radius:11px}
#help-panel .help-lock>svg{width:21px;height:21px;flex:none;margin-top:2px;color:var(--help-accent)}
#help-panel .help-lock h3{margin-bottom:5px;font-size:15px}#help-panel .help-lock p{font-size:14px;line-height:1.7}
#help-panel .help-library{padding:19px 20px;margin-bottom:23px;border:1px solid var(--help-line);border-radius:12px;background:color-mix(in srgb,var(--help-accent) 7%,var(--help-surface))}
#help-panel .help-library>p{font-size:14px;line-height:1.75}
#help-panel .help-optional{font-size:12px;font-weight:500;line-height:1.5;padding:3px 8px;border-radius:5px;background:#30343b;color:var(--help-muted)}
#help-panel .help-library .help-device-note{margin-top:8px;font-size:13px}
#help-panel .help-library-actions{display:flex;align-items:center;flex-wrap:wrap;gap:9px;margin-top:15px}
#help-panel .help-library-actions button,#help-panel .help-diagnostics button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:9px 13px;border:1px solid var(--help-line);border-radius:8px;background:var(--help-raised);color:var(--help-text);font-size:14px;font-weight:600}
#help-panel .help-library-actions button:hover,#help-panel .help-diagnostics button:hover{background:#2c3036}
#help-panel .help-library-actions button svg,#help-panel .help-diagnostics button svg{width:17px;height:17px;flex:none}
#help-panel #help-restore{color:var(--help-accent);background:transparent}
#help-panel .help-library .help-backup-note{margin-top:12px;font-size:13px}
#help-panel .help-diagnostics{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:16px}
#help-panel .help-diagnostics h3{margin-bottom:6px;font-size:15px}
#help-panel .help-diagnostics p{font-size:13px;line-height:1.75}
#help-panel .help-diagnostics button{white-space:nowrap}
#help-panel .help-footer{padding:16px 28px 20px;border-top:1px solid var(--help-line);font-size:12px;line-height:1.8}
#help-panel .help-footer p+p{margin-top:8px}
#help-panel .help-footer nav{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:8px}
#help-panel :focus-visible{outline:2px solid var(--help-accent);outline-offset:3px}
@media(max-width:600px){#help-panel{width:calc(100vw - 24px);max-height:calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));border-radius:16px}#help-panel .help-header{padding:22px 20px 17px}#help-panel h2{font-size:21px}#help-panel .help-content{padding:0 20px 23px}#help-panel .help-start{grid-template-columns:1fr;gap:24px}#help-panel .help-shortcuts{max-width:330px}#help-panel .help-library{padding:17px 16px}#help-panel .help-diagnostics{grid-template-columns:1fr;gap:11px}#help-panel .help-diagnostics button{justify-self:start}#help-panel .help-footer{padding:16px 20px 20px}}

/* Notes opt-in remains styled before the optional workspace loads. */
#help-panel .help-vocal{--vn-enable-accent:#30df56;--vn-enable-ink:#102015;margin:0 0 23px;padding:18px 20px;border:1px solid var(--help-line);border-radius:12px}
#help-panel .help-vocal p{font-size:15px}.vn-optin{display:flex;align-items:center;justify-content:space-between;gap:16px;font-weight:650;margin-bottom:8px}.vn-optin input{appearance:none;flex:none;width:42px;height:24px;border-radius:20px;background:#454a54;position:relative;cursor:pointer}.vn-optin input:before{content:'';position:absolute;left:3px;top:3px;width:18px;height:18px;background:#fff;border-radius:50%;transition:transform .15s}.vn-optin input:checked{background:#8cb6a1}.vn-optin input:checked:before{transform:translateX(18px)}.vn-optin input:disabled{opacity:.4;cursor:default}.vn-optin input:focus-visible{outline:2px solid white;outline-offset:3px}#vocal-option-state{margin-top:8px!important;font-size:13px!important}#vocal-login,#vocal-retry{margin-top:8px;border:1px solid #434852}

.vn-guide-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:13px}.vn-guide-actions>a,.vn-guide-actions>button{font-size:14px;border:1px solid #465a4d;border-radius:8px;padding:10px 13px;margin:0!important}.vn-guide-actions>a{background:#293b30;color:#d8ebdf!important}
.vn-bpm .vn-bpm-caution{font-size:12px;line-height:1.75;color:#c9d4c9;margin:10px 0 0}.vn-bpm-caution strong{font-weight:650;color:#e0e8dd}
#help-panel .vn-optin input:checked{background:var(--vn-enable-accent)}
#help-panel :is(#vocal-guide-open,#vocal-demo-open){background:var(--vn-enable-accent);border-color:var(--vn-enable-accent);color:var(--vn-enable-ink)!important}
#help-panel :is(#vocal-guide-open,#vocal-demo-open):hover{background:#2bd150;border-color:#2bd150}
#help-panel :is(#vocal-guide-open,#vocal-demo-open):focus-visible{outline:2px solid var(--vn-enable-accent);outline-offset:3px}