/* ═══════════════════════════════════════════════════════════════
   The walkthrough video on the guide page.

   Dressed like the tool cards below it — the same ground, the same
   corners — with the one difference that it is the thing to start
   with: a little more light behind it, and the width of the page.
   Loaded by guide.html alone.
   ═══════════════════════════════════════════════════════════════ */

.tut {
  max-width: 980px;
  margin: 28px auto 46px;
  padding: 22px 22px 20px;
  border-radius: var(--r-big);
  border: 1px solid rgba(47,217,190,.2);
  background:
    radial-gradient(720px 260px at 50% -12%, rgba(47,217,190,.1), transparent 70%),
    linear-gradient(168deg, var(--bg-100), var(--bg-050));
  box-shadow: var(--sink);
  scroll-margin-top: 84px;
}

.tut-hd { text-align: center; margin-bottom: 16px; }

.tut-tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px; border-radius: var(--r-pill);
  font-size: 12.5px; font-weight: 600; color: var(--red-soft);
  background: rgba(47,217,190,.09);
  border: 1px solid rgba(47,217,190,.24);
}
.tut-tag svg { width: 13px; height: 13px; flex: none; }

.tut-t {
  margin: 10px 0 4px;
  font-size: clamp(20px, 2.4vw, 26px); font-weight: 700; letter-spacing: -.02em;
}
.tut-p { margin: 0 auto; max-width: 54ch; color: var(--tx-3); font-size: 15px; line-height: 1.7; }

/* The frame holds its shape before the file has said anything, so
   the buttons under it do not jump down when the picture arrives. */
.tut-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-card);
  overflow: hidden;
  background: #000;
  border: 1px solid var(--line-lift);
}
.tut-frame video { display: block; width: 100%; height: 100%; background: #000; }

/* signed out: the frame offers the video for an account (free) */
.tut-lock {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding: 18px; text-align: center;
  background: radial-gradient(120% 90% at 50% 0%, rgba(217, 107, 162, .28), transparent 60%), linear-gradient(180deg, #17121c, #0b0a0d);
}
.tut-lock b { font-size: clamp(16px, 2.4vw, 22px); color: #fff; }
.tut-lock span { font-size: 14px; color: rgba(255, 255, 255, .72); max-width: 34em; }
.tut-lock .btn { margin-top: 6px; }

/* ── the chapters ─────────────────────────────────────────────
   Small on purpose: twenty of them sit under the player without
   pushing the written guide off the screen. The time leads, in the
   figures face, because it is what the eye scans down. */

.tut-chaps {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
  margin-top: 16px;
}

.tut-ch {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 12px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-lift);
  background: var(--bg-200);
  color: var(--tx-2);
  font-family: var(--ff); font-size: 13.2px; line-height: 1.2;
  white-space: nowrap; cursor: pointer;
  transition: color .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease);
}
.tut-ch b {
  font-family: var(--num); font-size: 12.5px; font-weight: 600;
  color: var(--red-soft);
  direction: ltr; unicode-bidi: isolate;
  font-variant-numeric: tabular-nums;
}
.tut-ch:hover { color: var(--tx); background: var(--bg-300); border-color: var(--tx-4); }
.tut-ch:focus-visible { outline: 2px solid var(--red-lift); outline-offset: 2px; }
.tut-ch.on {
  color: #fff; font-weight: 600;
  border-color: transparent;
  background: linear-gradient(140deg, var(--red-ink-a), var(--red-ink-b));
}
.tut-ch.on b { color: #fff; }

/* ── phones ───────────────────────────────────────────────────
   Wrapped, twenty buttons are ten rows on a phone. Two rows that
   slide sideways keep the video and the list on one screen, and
   the fading edge says there is more. */
@media (max-width: 640px) {
  .tut { margin: 22px auto 34px; padding: 14px 14px 12px; border-radius: var(--r-card); }
  .tut-frame { border-radius: 12px; }
  .tut-p { font-size: 14.2px; }

  .tut-chaps {
    display: grid; grid-auto-flow: column; grid-template-rows: repeat(2, auto);
    justify-content: start; gap: 7px;
    overflow-x: auto; overscroll-behavior-x: contain;
    margin-inline: -14px; padding: 0 14px 2px;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to left, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
            mask-image: linear-gradient(to left, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
  }
  .tut-chaps::-webkit-scrollbar { display: none; }
  .tut-ch { padding: 7px 11px; font-size: 13px; }
}