/* The guide sits above reader controls and below full-page sheets. */
.walkthrough { position: fixed; inset: 0; z-index: 36; pointer-events: none; }
.walkthrough [hidden] { display: none !important; }
.walkthrough-card {
  position: fixed;
  box-sizing: border-box;
  width: 300px;
  max-width: calc(100vw - 24px);
  left: 12px;
  top: 76px;
  padding: 13px 16px 16px;
  overflow-y: auto;
  overscroll-behavior: contain;
  pointer-events: auto;
  border: 1px solid color-mix(in srgb, var(--ink, #1e1d1b) 18%, transparent);
  border-radius: 15px;
  color: var(--ink, #1e1d1b);
  background: color-mix(in srgb, var(--paper, #f4f2ed) 94%, #9b835d);
  box-shadow: 0 3px 16px var(--shadow, #0002);
  font-family: var(--reader-font, var(--serif, Georgia, serif));
  font-size: 15px;
  line-height: 1.45;
}
.walkthrough-card p { margin: 0; }
.walkthrough-card button { font: inherit; cursor: pointer; }
.walkthrough-card button:focus-visible { outline: 2px solid var(--ink, #1e1d1b); outline-offset: 2px; }
.walkthrough-card button:disabled { cursor: default; opacity: .45; }
.walkthrough-card .walkthrough-welcome {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  margin: -5px 0 5px -5px;
  padding: 4px 5px;
  border: 0;
  border-radius: 5px;
  color: var(--ink-soft, #6a665e);
  background: transparent;
  font-size: 12px;
}
.walkthrough-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 8px; margin-bottom: 8px; }
.walkthrough-card .walkthrough-progress { font-family: var(--sans, sans-serif); font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.walkthrough-actions { display: flex; gap: 2px; margin-right: -6px; }
.walkthrough-actions button { min-height: 32px; min-width: 38px; padding: 4px 6px; border: 0; border-radius: 5px; color: inherit; background: transparent; font-size: 13px; }
.walkthrough-card button:hover:not(:disabled) { background: color-mix(in srgb, var(--ink, #1e1d1b) 7%, transparent); }
.walkthrough-card .walkthrough-instruction { overflow-wrap: anywhere; }
.walkthrough-card .walkthrough-check { position: absolute; right: 18px; bottom: 12px; font-family: var(--sans, sans-serif); font-size: 30px; line-height: 1; }
.walkthrough-celebrating .walkthrough-instruction { opacity: .25; }
.walkthrough-card .walkthrough-done { display: block; width: 100%; min-height: 44px; margin-top: 14px; padding: 9px 14px; border: 0; border-radius: 8px; color: var(--paper, #f4f2ed); background: var(--ink, #1e1d1b); font-size: 15px; }
.walkthrough-card .walkthrough-done:hover { background: var(--accent, #4a4740); }
.walkthrough-arrow { position: fixed; pointer-events: none; color: var(--ink, #1e1d1b); filter: drop-shadow(0 1px 2px var(--paper, #f4f2ed)); }
.walkthrough-announcement { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-height: 450px) {
  .walkthrough-card { padding: 8px 12px 12px; font-size: 14px; }
  .walkthrough-card .walkthrough-welcome { margin-bottom: 0; }
  .walkthrough-heading { margin-bottom: 4px; }
}