/* THE PAPER'S VIDEOS: the tutorial's window, its plate in the rail and its pill in the head (partials/_tutorial.html).
   In the page's head since 2026-10-13 (the founder: "opening in a flashy way: massive flashing to the eye for a fraction
   of a second, a rectangle play button jumping at you and then finding its right place, similar for the buttons").
   These rules sat in a <style> after the whole paper, so on a slow line the head and the rail painted before them: the
   pill as a bare button with a full-size play mark, the plate as a 1280 by 720 picture, both then jumping into place and
   fading to their colours. Linked in the head, the pill and the plate are in place and styled from the first paint, and
   the plate's picture sits in its 16:9 box. One tone; Cormorant Garamond and DM Sans only, as the listening bar. */
#qlTutorial[hidden] { display: none !important; }
.qlt { position: fixed; inset: 0; z-index: 980; background: rgba(4, 8, 12, 0.78);
  display: flex; align-items: center; justify-content: center; padding: 24px; }
.qlt-box { width: min(1120px, 100%); max-height: 100%; overflow: auto; background: #0e131b;
  border: 1px solid #2b3645; color: #e8ecf2; font-family: 'DM Sans', sans-serif; }
.qlt :where(button) { -webkit-appearance: none; appearance: none; cursor: pointer; font: inherit; color: inherit; margin: 0; }
.qlt-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 18px 20px 14px; }
.qlt-kicker { font-size: 0.8rem; color: #9ba8bc; margin-bottom: 4px; }
.qlt-title { font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif; font-size: 1.7rem; font-weight: 600;
  line-height: 1.15; color: #e8ecf2; }
.qlt-close { width: 36px; height: 36px; padding: 0; border: 1px solid transparent; border-radius: 6px;
  background: transparent; color: #9ba8bc; display: grid; place-items: center; flex: 0 0 auto; }
.qlt-close svg { width: 18px; height: 18px; }
.qlt-close:hover { border-color: #6b7688; color: #e8ecf2; }
.qlt-video { display: block; width: 100%; aspect-ratio: 16 / 9; background: #0b0e14; border-top: 1px solid #222c3a;
  border-bottom: 1px solid #222c3a; }
.qlt-foot { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 14px 20px 18px; }
.qlt-foot p { margin: 0; max-width: 62ch; font-size: 0.92rem; line-height: 1.55; color: #9ba8bc; }
.qlt-build { flex: 0 0 auto; display: inline-flex; align-items: center; padding: 10px 18px; border-radius: 8px;
  background: #e8ecf2; color: #0b0e14; border: 1px solid #e8ecf2; font-size: 0.92rem; font-weight: 600;
  text-decoration: none; }
.qlt-build:hover { background: #ffffff; }
.qlt button:focus-visible, .qlt-build:focus-visible { outline: 2px solid #e8ecf2; outline-offset: 2px; }
html.qlt-open { overflow: hidden; }
/* the plate in the rail: set as the result plate above it (the same line and 3px corner), the video's first frame
   behind a play mark, one line under it */
.rs-tut { margin: 0 0 22px; max-width: 420px; }
.rs-tut-open { -webkit-appearance: none; appearance: none; display: block; width: 100%; margin: 0; padding: 0;
  border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.rs-tut-frame { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #0b0e14;
  border: 1px solid var(--rs-line, #2b3645); border-radius: 3px; }
.rs-tut-frame img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0.88;
  transition: opacity .2s ease; }
/* the play mark in the head pill's teal (2026-10-06), so the picture and the button read as one thing */
.rs-tut-play { position: absolute; left: 50%; top: 50%; width: 48px; height: 48px; margin: -24px 0 0 -24px;
  border-radius: 50%; display: grid; place-items: center; color: #0b1414; background: #4fc1b0;
  border: 1px solid #4fc1b0; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
  transition: background .2s ease, transform .2s ease; }
.rs-tut-play svg { width: 18px; height: 18px; margin-left: 2px; }
.rs-tut-open:hover .rs-tut-frame img { opacity: 1; }
.rs-tut-open:hover .rs-tut-play { background: #6fd0c2; border-color: #6fd0c2; transform: scale(1.06); }
/* THE HEAD PILL (founder, 2026-10-06: "make it like a claude button on the landing page but instead of orange it would
   be like green/blue ish"): the landing page's Claude pill (landing.css .use-with-pill: 44px, round, filled, dark
   type, a lighter lead word) in teal, beside Open in the lab */
.research-orient button.rs-tut-pill { -webkit-appearance: none; appearance: none; display: inline-flex;
  align-items: center; gap: 10px; box-sizing: border-box; min-height: 44px; margin: 0; padding: 0 22px 0 16px;
  border-radius: 999px; border: 1px solid #4fc1b0; background: #4fc1b0; color: #0b1414; cursor: pointer;
  font-family: 'DM Sans', sans-serif; font-size: 0.94rem; font-weight: 600; line-height: 1; white-space: nowrap;
  transition: background .16s ease, transform .15s ease, box-shadow .16s ease; }
.rs-tut-pill .rs-tut-lead { font-weight: 500; opacity: 0.82; }
.rs-tut-pill svg { width: 18px; height: 18px; flex-shrink: 0; }
.research-orient button.rs-tut-pill:hover { background: #6fd0c2; border-color: #6fd0c2; transform: translateY(-1px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25); }
.research-orient button.rs-tut-pill:focus-visible { outline: 2px solid #e8ecf2; outline-offset: 2px; }
.rs-tut-open:focus-visible { outline: 2px solid #e8ecf2; outline-offset: 3px; }
.rs-tut-title { display: block; margin: 10px 0 2px; font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  font-size: 1.12rem; font-weight: 600; line-height: 1.2; color: var(--text-primary, #e8ecf2); }
.rs-tut-sub { display: block; font-size: 0.75rem; line-height: 1.45; color: var(--text-tertiary, #6b7688); }
@media (prefers-reduced-motion: reduce) { .rs-tut-frame img, .rs-tut-play { transition: none; } }
/* a desk only: the rail that carries the plate is hidden on a phone, and a small touch screen gets neither */
@media (max-width: 768px), (pointer: coarse) and (max-width: 1024px) {
  .qlt, .rs-tutorial { display: none !important; }
}
@media print { .qlt, .rs-tutorial { display: none !important; } }
/* THE FILM'S WINDOW (partials/_paper_film.html, 2026-10-13): the tutorial's window around YouTube's player, as wide as
   the screen's height lets a 16:9 picture be, so the whole film shows without scrolling; "Open on YouTube" small, under
   it on the right */
.qlf .qlt-box { width: min(1120px, 100%, calc((100vh - 190px) * 16 / 9)); }
#qlFilm[hidden] { display: none !important; }
.qlf-stage { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; background: #0b0e14;
  border-top: 1px solid #222c3a; border-bottom: 1px solid #222c3a; }
.qlf-stage iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.qlf-foot { display: flex; justify-content: flex-end; padding: 10px 20px 14px; }
.qlf-out { font-size: 0.82rem; color: #9ba8bc; text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: rgba(155, 168, 188, 0.45); }
.qlf-out:hover { color: #e8ecf2; text-decoration-color: #e8ecf2; }
.qlf-out:focus-visible { outline: 2px solid #e8ecf2; outline-offset: 2px; }
@media print { .qlf { display: none !important; } }