/* The 3D view (assets/viewer3d.js): its button on the walkthroughs' Check steps, and the dialog on the
 * body. The dialog sits outside the walkthroughs, where their --c-* colors do not reach, so it takes the
 * theme's own (with the same fallbacks). Full screen on a phone; a large sheet, centered, on a wide one. */
.hp-v3d, .hp-v3d__open { --v-ink: var(--wp--preset--color--ink, #1D1D1F); --v-quiet: var(--wp--preset--color--quiet, #6E6E73); --v-line: var(--wp--preset--color--line-strong, #D2D2D7); --v-ground: var(--wp--preset--color--tile, #F5F5F7); --v-surface: var(--wp--preset--color--surface, #fff); --v-brand: var(--wp--preset--color--brand-deep, #5B46C7); --v-ease: cubic-bezier(0.2, 0.7, 0.2, 1); }

/* The button: a quiet pill beside the tools, never a row of its own on a phone. (The class twice: a walkthrough's own "button { font: inherit }" must not reach it.) */
.hp-v3d__open.hp-v3d__open { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; min-height: 44px; margin: 0; padding: calc(0.6rem - 1px) calc(1.05rem - 1px); border: 1px solid var(--v-line); border-radius: 999px; background: transparent; color: var(--v-ink); font: inherit; font-size: 0.95rem; font-weight: 500; line-height: 1.2; white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: border-color 160ms var(--v-ease), background-color 160ms var(--v-ease); }
.hp-v3d__open:hover { border-color: var(--v-ink); background: var(--v-surface); }
.hp-v3d__open:focus-visible { outline: 2px solid var(--v-brand); outline-offset: 2px; }
@media (max-width: 430px) { .hp-v3d__open.hp-v3d__open { font-size: 0.9rem; padding: calc(0.6rem - 1px) calc(0.85rem - 1px); } }

/* The dialog. */
.hp-v3d { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 2rem; background: rgba(29, 29, 31, 0.45); color: var(--v-ink); }
.hp-v3d *, .hp-v3d *::before, .hp-v3d *::after { box-sizing: border-box; }
.hp-v3d [hidden] { display: none !important; }
.hp-v3d__sheet { position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; width: min(100%, 68rem); height: min(100%, 48rem); background: var(--v-ground); border-radius: 24px; overflow: hidden; }
.hp-v3d__head { padding: 1.25rem 4.5rem 0 1.5rem; }
.hp-v3d__title { margin: 0; font-size: 1.15rem; font-weight: 700; line-height: 1.3; letter-spacing: normal; color: var(--v-ink); }
.hp-v3d__caption { margin: 0.15rem 0 0; font-size: 0.9rem; line-height: 1.4; color: var(--v-quiet); }
.hp-v3d__stage { position: relative; min-height: 0; touch-action: none; cursor: grab; outline: none; user-select: none; -webkit-user-select: none; }
.hp-v3d__stage.is-dragging { cursor: grabbing; }
.hp-v3d__stage:focus-visible { box-shadow: inset 0 0 0 2px var(--v-brand); }
.hp-v3d__stage canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.hp-v3d__note { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; padding: 1.5rem; text-align: center; font-size: 0.95rem; color: var(--v-quiet); pointer-events: none; }
.hp-v3d__foot { display: grid; gap: 0.5rem; justify-items: center; padding: 0 1.5rem calc(1rem + env(safe-area-inset-bottom, 0px)); }
.hp-v3d__controls { display: flex; justify-content: center; }
.hp-v3d__controls:empty { display: none; }
.hp-v3d__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.25rem 1rem; }
.hp-v3d__hint { margin: 0; font-size: 0.85rem; color: var(--v-quiet); }
.hp-v3d__pill, .hp-v3d__arrow, .hp-v3d__close { font: inherit; color: var(--v-ink); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.hp-v3d__pill { min-height: 44px; padding: calc(0.6rem - 1px) calc(1.1rem - 1px); border: 1px solid var(--v-line); border-radius: 999px; background: transparent; font-size: 0.95rem; font-weight: 500; white-space: nowrap; transition: border-color 160ms var(--v-ease), background-color 160ms var(--v-ease); }
.hp-v3d__pill:hover:not(:disabled) { border-color: var(--v-ink); background: var(--v-surface); }
.hp-v3d__pill:disabled { opacity: 0.45; cursor: default; }
.hp-v3d__pill--ink { border-color: var(--v-ink); background: var(--v-ink); color: #fff; }
.hp-v3d__pill--ink:hover:not(:disabled) { background: var(--v-brand); border-color: var(--v-brand); color: #fff; }
/* A book's pages: Previous, where it is open, Next. */
.hp-v3d__turn { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; gap: 0.75rem; width: min(100%, 30rem); }
.hp-v3d__label { margin: 0; text-align: center; font-weight: 500; font-size: 0.95rem; line-height: 1.3; }
.hp-v3d__arrow { width: 44px; height: 44px; padding: 0 0 0.1em; border: 1px solid var(--v-line); border-radius: 999px; background: transparent; font-size: 1.5rem; line-height: 1; }
.hp-v3d__arrow:hover:not(:disabled) { border-color: var(--v-ink); background: var(--v-surface); }
.hp-v3d__arrow:disabled { opacity: 0.35; cursor: default; }
.hp-v3d__close { position: absolute; top: 0.75rem; right: 0.75rem; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 999px; background: rgba(29, 29, 31, 0.07); font-size: 1.5rem; line-height: 1; }
.hp-v3d__close:hover { background: rgba(29, 29, 31, 0.14); }
.hp-v3d button:focus-visible { outline: 2px solid var(--v-brand); outline-offset: 2px; }

/* A phone: the whole screen, the safe areas kept clear. */
@media (max-width: 700px) {
  .hp-v3d { padding: 0; }
  .hp-v3d__sheet { width: 100%; height: 100%; border-radius: 0; padding-top: env(safe-area-inset-top, 0px); }
  .hp-v3d__head { padding: 1rem 4rem 0 1rem; }
  .hp-v3d__close { top: calc(0.5rem + env(safe-area-inset-top, 0px)); right: 0.5rem; }
  .hp-v3d__foot { padding: 0 1rem calc(0.75rem + env(safe-area-inset-bottom, 0px)); }
}
@supports (height: 1dvh) { @media (max-width: 700px) { .hp-v3d__sheet { height: 100dvh; } } }

@media (prefers-reduced-motion: reduce) {
  .hp-v3d *, .hp-v3d__open { transition: none !important; }
}