.guide-welcome { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin: 0 0 24px; padding: 18px 22px; background: #14203f; color: #f1f5ff; border: 1px solid #354b7b; border-radius: 10px; }
.guide-welcome strong { font-size: 15px; font-weight: 650; }
.guide-welcome p { margin: 4px 0 0; color: #c5d4f5; font-size: 14px; line-height: 1.5; }
.guide-welcome-actions { display: flex; align-items: center; gap: 10px; }
.guide-button { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #414653; border-radius: 7px; background: #20232b; color: #f6f5f2; padding: 10px 15px; font: inherit; font-size: 14px; font-weight: 600; line-height: 1.3; cursor: pointer; transition: background-color 140ms ease, border-color 140ms ease; }
.guide-button:hover { background: #2b303c; border-color: #70798b; }
.guide-button.guide-primary { background: #2d5bff; border-color: #2d5bff; color: #fff; }
.guide-button.guide-primary:hover { background: #224ce6; border-color: #224ce6; }
.guide-button.guide-quiet { background: transparent; border-color: transparent; color: #c5d4f5; }
.guide-button:disabled { opacity: 0.45; cursor: default; }
.guide-panel { position: fixed; inset: auto 24px 24px auto; width: min(420px, calc(100vw - 32px)); max-height: min(720px, calc(100dvh - 48px)); margin: 0; overflow: auto; overscroll-behavior: contain; border: 0; border-radius: 12px; padding: 25px; color: #f4f5f8; background: #20242f; box-shadow: 0 20px 70px #0009; z-index: 10000; font-family: var(--font, "Geist", sans-serif); }
.guide-panel:not([open]) { display: none; }
.guide-panel h2 { margin: 16px 0 10px; font-size: 24px; font-weight: 650; line-height: 1.2; letter-spacing: -0.025em; text-wrap: balance; }
.guide-panel p { font-size: 15px; color: #c6ccda; line-height: 1.65; margin: 0 0 22px; }
.guide-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #c0c8dc; font-size: 12px; }
.guide-close { min-height: 36px; padding: 6px 10px; color: #d7dcea; background: transparent; border: 1px solid #454c5c; border-radius: 6px; cursor: pointer; font: inherit; font-size: 12px; }
.guide-close:hover { color: #fff; background: #343b4a; }
.guide-panel .guide-step-count { margin: 16px 0 0; color: #bacbff; font-size: 12px; font-variant-numeric: tabular-nums; }
.guide-step-progress { display: flex; gap: 5px; margin-top: 18px; }
.guide-step-progress span { height: 3px; flex: 1; background: #485061; border-radius: 2px; }
.guide-step-progress span.is-done { background: #8aa5ff; }
.guide-controls { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
.guide-library-back { display: block; padding: 10px 0 0; margin-top: 6px; background: none; border: 0; color: #bacbff; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font: inherit; font-size: 12px; }
.guide-library-back:hover { color: #fff; }
.guide-highlight { outline: 3px solid #8aa5ff !important; outline-offset: 6px; scroll-margin-top: 115px; scroll-margin-bottom: 340px; }
.guide-dock-left { right: auto; left: 24px; }
.guide-tour-list { display: grid; margin: 8px 0 20px; }
.guide-tour-link { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 16px; text-align: left; padding: 17px 2px; border: 0; border-bottom: 1px solid #3b4252; border-radius: 0; background: none; color: #f4f5f8; cursor: pointer; font: inherit; }
.guide-tour-link:hover { background: #2b3343; }
.guide-tour-link strong { display: block; font-size: 15px; font-weight: 600; }
.guide-tour-link small { display: block; margin-top: 5px; color: #c0c8d9; font-size: 12px; line-height: 1.5; }
.guide-tour-status { flex-shrink: 0; color: #bacbff; font-size: 11px; font-weight: 600; }
.guide-tour-status.is-complete { color: #81dbaf; }
.guide-glossary { border-bottom: 1px solid #3b4252; padding-bottom: 16px; }
.guide-glossary summary { cursor: pointer; color: #f2f4f9; min-height: 36px; font-size: 14px; font-weight: 600; }
.guide-glossary dl { margin: 14px 0 0; }
.guide-glossary dt { margin-top: 17px; color: #f4f5f8; font-size: 14px; font-weight: 600; }
.guide-glossary dd { margin: 4px 0 0; color: #c0c8d9; font-size: 13px; line-height: 1.55; }
.guide-panel .guide-footnote { margin: 18px 0 0; color: #b6bece; font-size: 12px; }
.guide-panel :focus-visible, .guide-welcome :focus-visible { outline: 2px solid #c0d0ff; outline-offset: 3px; }
@media (max-width: 760px) {
  .guide-panel { inset: auto 12px max(12px, env(safe-area-inset-bottom)) 12px; width: auto; max-height: 52dvh; padding: 20px; border-radius: 12px; }
  .guide-panel.guide-library { max-height: 80dvh; }
  .guide-panel h2 { font-size: 22px; }
  .guide-panel p { font-size: 14px; line-height: 1.6; }
  .guide-head { font-size: 11px; }
  .guide-welcome { padding: 16px; gap: 12px; }
  .guide-welcome-actions { width: 100%; }
  .guide-highlight { scroll-margin-top: 95px; scroll-margin-bottom: 52dvh; outline-offset: 3px; }
}
@media (prefers-reduced-motion: reduce) { .guide-button { transition: none; } }