.tutorial-tip {
  position: fixed; inset: auto; margin: 0; box-sizing: border-box;
  width: min(350px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow: auto;
  padding: 20px; border: 1px solid var(--gold-700); border-radius: 12px;
  background: var(--paper); color: var(--paper-ink); box-shadow: 0 12px 36px #08132166;
  font-family: Barlow, sans-serif;
}
.tutorial-tip h2 { margin: 0 0 10px; color: var(--paper-ink); font: 700 max(var(--desktop-text-min, 0px), calc(25px * var(--desktop-text-scale, 1))) 'Barlow Condensed', sans-serif; }
.tutorial-tip p { margin: 0 0 14px; font-size: max(var(--desktop-text-min, 0px), calc(15px * var(--desktop-text-scale, 1))); line-height: 1.5; color: var(--paper-ink); }
.tutorial-tip .tutorial-progress { font-size: max(var(--desktop-text-min, 0px), calc(12px * var(--desktop-text-scale, 1))); color: var(--paper-ink); }
.tutorial-actions { display: flex; flex-wrap:wrap; gap: 8px; justify-content: flex-end; }
.tutorial-actions [data-tutorial-skip] { margin-right:auto; }
.tutorial-actions [hidden] { display:none !important; }
.tutorial-actions button { min-height: 44px; padding: 8px 12px; cursor: pointer; font: 700 max(var(--desktop-text-min, 0px), calc(14px * var(--desktop-text-scale, 1))) Barlow, sans-serif; border-radius: 6px; }
.tutorial-actions button { background: transparent; border: 1px solid var(--gold-700); color: var(--paper-ink); }
.tutorial-actions [data-tutorial-next] { background: var(--blue-900); color: var(--ink); border-color: var(--blue-900); }
.tutorial-actions button:hover { filter: brightness(.92); }
.tutorial-highlight { outline: 3px solid var(--gold-500) !important; outline-offset: 4px; }
.tutorial-actions button:focus-visible { outline: 3px solid var(--gold-700); outline-offset: 3px; }
@media (max-width: 600px) { .tutorial-tip { padding: 16px; } .tutorial-tip h2 { font-size: max(var(--desktop-text-min, 0px), calc(22px * var(--desktop-text-scale, 1))); } }