.topbar{grid-template-columns:2.65rem minmax(0,1fr) 5.2rem}
.header-actions{grid-column:3;grid-row:1;display:flex;gap:.3rem;justify-self:end}
.guide-dialog{color:var(--text);background:radial-gradient(ellipse at top right,rgba(155,108,255,.14),transparent 65%),var(--surface);border:1px solid rgba(155,108,255,.35);border-radius:var(--radius);padding:0;width:min(32rem,calc(100% - 1.5rem));max-height:calc(100dvh - 2rem - env(safe-area-inset-top) - env(safe-area-inset-bottom));overflow:hidden;box-shadow:0 1rem 5rem #0009}
.guide-dialog[open]{display:flex;flex-direction:column}
.guide-dialog::backdrop{background:rgba(6,5,10,.85)}
.guide-body{padding:1.4rem;overflow:auto;overscroll-behavior:contain;min-height:0;overflow-wrap:anywhere}
.guide-body h2{margin:.5rem 0;font-size:clamp(1.6rem,7vw,2.25rem);line-height:1.1;letter-spacing:-.035em}
.guide-body p{color:var(--muted);font-size:.94rem;line-height:1.5;text-wrap:pretty}
.guide-icon{display:block;object-fit:contain;border-radius:1rem;margin-bottom:1rem}
.guide-dialog[data-step="1"] .guide-icon,.guide-dialog[data-step="2"] .guide-icon{display:none}
.guide-mode{border:1px solid var(--line);border-radius:1rem;padding:.75rem;margin-top:.65rem;background:#ffffff03}
.guide-mode strong{display:block;color:#cbb4ff;font-size:.76rem;letter-spacing:.08em}
.guide-mode b{display:block;margin:.25rem 0;font-size:.93rem}
.guide-mode p{font-size:.83rem;margin:0}
.guide-chips{display:flex;flex-wrap:wrap;gap:.5rem}
.guide-chips span{padding:.45rem .65rem;border:1px solid var(--line);border-radius:.7rem;font-size:.8rem;color:#cbb4ff}
.guide-actions{padding:.9rem 1.4rem max(.9rem,env(safe-area-inset-bottom));flex-shrink:0;border-top:1px solid var(--line);background:var(--surface)}
.guide-secondary{display:flex;justify-content:space-between;margin-top:.45rem}
.guide-secondary button{background:none;border:0;color:var(--muted);min-height:2.5rem;padding:.4rem;cursor:pointer}
.guide-dots{display:flex;justify-content:center;gap:.4rem;margin:0 0 .8rem}
.guide-dots span{width:.45rem;height:.45rem;border-radius:50%;background:#ffffff30}
.guide-dots .active{background:var(--purple)}
.guide-body details{border:1px solid var(--line);border-radius:.9rem;padding:.85rem;margin:.65rem 0}
.guide-body summary{cursor:pointer;font-weight:750;font-size:.9rem;line-height:1.5}
.guide-body .guide-highlight{color:#ddcfff;border-left:2px solid var(--purple);padding-left:.75rem}
@media(max-width:350px){.brand{font-size:.65rem;gap:.2rem}.guide-body{padding:1rem}.guide-actions{padding:.75rem 1rem}}

/* A readable guide with one scroll area and a persistent action footer. */
.guide-dialog{border-radius:1rem;border-color:#51405f;background:#17121f;box-shadow:0 1.5rem 4rem #0007}
.guide-body{padding:1.4rem;scrollbar-width:thin;scrollbar-color:#705c83 transparent}
.guide-body h2{font-size:clamp(1.5rem,6.4vw,2rem);line-height:1.15;letter-spacing:-.03em;font-weight:750}
.guide-body h2:focus{outline:none}
.guide-body>.eyebrow{font-size:.6875rem;letter-spacing:.055em;color:#bcabc9}
.guide-body>p{font-size:.9375rem;line-height:1.6;color:#c3b8d0}
.guide-icon{width:4rem;height:4rem;margin-bottom:1.25rem}
.guide-mode{padding:.9rem 0;border:0;border-top:1px solid #3c3048;border-radius:0;background:none;margin-top:.8rem}
.guide-mode strong{color:#edacd0;font-size:.75rem;letter-spacing:.055em}
.guide-mode:nth-of-type(2) strong{color:#edc67d}.guide-mode:nth-of-type(3) strong{color:#ffad93}
.guide-mode b{margin:.4rem 0;font-size:1rem;line-height:1.35;font-weight:700}
.guide-mode p{font-size:.875rem;line-height:1.5;color:#c3b8d0}
.guide-actions{padding:1rem 1.4rem max(1rem,env(safe-area-inset-bottom));background:#17121f;border-color:#3c3048}
.guide-actions .primary-button{min-height:3rem;border-radius:.75rem;font-size:.9375rem;text-transform:none}
.guide-secondary button{min-height:2.75rem;color:#c8bad5;font-size:.8125rem;padding:.5rem .25rem}
.guide-dots{gap:.4rem;margin-bottom:1rem}.guide-dots span{height:3px;width:1.5rem;border-radius:3px;background:#4a3c57}.guide-dots .active{background:#cba8fa}
.guide-body details{padding:0;border:0;border-top:1px solid #44364f;border-radius:0;margin:.8rem 0 0}
.guide-body summary{min-height:3rem;padding:.9rem 0;font-size:.9375rem;line-height:1.5;color:#f1e8fa}
.guide-body details>p{margin:.25rem 0 .85rem;font-size:.875rem;line-height:1.6;color:#c3b8d0}
.guide-body .guide-highlight{border:0;border-radius:.65rem;background:#2b2036;padding:.85rem;color:#e3cef8}
.guide-chips{gap:.4rem;margin-top:1rem}.guide-chips span{font-size:.75rem;border-color:#51405f;background:#211829;border-radius:.5rem;color:#d9c4ec;padding:.45rem .6rem}
@media(max-width:350px){.guide-body{padding:1rem}.guide-actions{padding:.85rem 1rem max(.85rem,env(safe-area-inset-bottom))}.guide-body summary{font-size:.875rem}.guide-body>p{font-size:.875rem}}