/* Session 81 — the walk-through note (tutorial.js), top-left like the story
   lines so people learn to look there. Glass comes from glassifyChip()
   (inline backdrop-filter), so no backdrop-filter here. */
#tutorial {
  position: fixed; left: 22px; top: 26px; z-index: 40;
  width: min(420px, calc(100vw - 44px));
  display: flex; align-items: center; gap: 12px;
  padding: 12px 12px 12px 16px; border-radius: 14px;
  font-family: var(--font-major); font-size: 19px; line-height: 1.26; color: #f6efe4;
  background: linear-gradient(168deg, rgba(16,19,26,.30), rgba(16,19,26,.46));
  border: 1px solid rgba(255,226,138,.24);
  box-shadow: 0 22px 50px rgba(0,0,0,.40), inset 0 1px 1px rgba(255,255,255,.34), inset 0 0 0 1px rgba(255,255,255,.11);
  text-shadow: 0 1px 10px rgba(0,0,0,.5);
  opacity: 0; transform: translateY(-8px); pointer-events: none;
  transition: opacity .45s ease, transform .45s ease, border-color .3s ease;
}
#tutorial.show { opacity: .97; transform: none; pointer-events: auto; }
#tutorial.ok { border-color: rgba(150,230,170,.6); }
#tutorial .tutStep { font-size: 12px; letter-spacing: .12em; opacity: .6; white-space: nowrap; }
#tutorial.ok .tutStep { color: #9fe6b0; opacity: 1; }
#tutorial .tutText { flex: 1 1 auto; }
#tutorial .tutText b { font-weight: 700; }
#tutorial .tutText span { opacity: .5; margin: 0 4px; }
#tutorial .tutSkip {
  flex: none; border: none; cursor: pointer; font-family: var(--font-body, inherit); font-size: 12px; color: inherit;
  padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.12);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.25);
}
#tutorial .tutSkip:hover { background: rgba(255,255,255,.22); }
@media (max-width: 560px) { #tutorial { font-size: 16px; left: 14px; top: 16px; width: calc(100vw - 28px); } }
@media (prefers-reduced-motion: reduce) { #tutorial { transition: opacity .2s ease; transform: none; } }