/* Guide (article) pages: one video turned into a step-by-step text guide. Loads after pages.css. */
.article { max-width: 760px; padding: 8px 0 40px; }
.article h1 { font-size: clamp(32px, 5vw, 50px); }
.article .lede { max-width: none; }
.article h2 { font-size: 26px; margin: 42px 0 10px; }
.article p, .article li { max-width: 68ch; }
.article ul, .article ol { padding-left: 22px; }
.article li { margin: 4px 0; }
.article a { color: var(--cyan-ink); }
.meta { color: var(--muted); font-size: 15px; margin: 0 0 22px; }
.embed { position: relative; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: #000; box-shadow: var(--shadow); margin: 6px 0 28px; }
.embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
pre.code {
  margin: 10px 0 16px; padding: 14px 16px; border: 1px solid var(--line); border-left: 4px solid var(--cyan);
  border-radius: 10px; background: var(--surface); overflow-x: auto; white-space: pre-wrap; word-break: break-word;
  font: 15px/1.55 "JetBrains Mono", ui-monospace, Consolas, monospace; font-variant-ligatures: none;
}
.box { margin: 26px 0; padding: 18px 20px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.box p { margin: 0 0 12px; }
.box .row { display: flex; flex-wrap: wrap; gap: 10px; }
.box .btn { font-size: 15px; padding: 10px 16px; }
.note { padding: 12px 16px; border-radius: 10px; background: var(--cyan-soft); }
.related { list-style: none; padding: 0 !important; display: grid; gap: 8px; }