/* Guide: /guides/upload-high-quality-tiktok/. One plain column like a help article: title, date,
   short intro, then numbered steps with the screenshot under its sentence. Site tokens only. */
.guide-page :is(a, button, summary):focus-visible { outline: 2px solid var(--blue-focus); outline-offset: 3px; }
.guide-main { padding: 64px 32px 104px; }
.guide-article { width: min(720px, 100%); margin-inline: auto; color: var(--ink); font-size: 17px; line-height: 1.5; }
.guide-article h1 { margin: 0; font-size: 40px; font-weight: 600; line-height: 1.15; letter-spacing: -.02em; color: var(--ink); }
.guide-article .guide-date { margin: 12px 0 0; color: var(--muted); font-size: 14px; line-height: 1.4; }
.guide-article .guide-intro { margin: 24px 0 0; font-size: 19px; line-height: 1.5; }
.guide-article p { margin: 0; }
.guide-article .guide-section > :is(p, ul) { margin-top: 12px; }
.guide-article .guide-section > h2 + p { margin-top: 0; }
.guide-section { scroll-margin-top: 64px; }
.guide-article h2 { margin: 56px 0 12px; font-size: 28px; font-weight: 600; line-height: 1.2; letter-spacing: -.015em; color: var(--ink); }
.guide-article b { font-weight: 600; }

/* Links: plain inline text links. */
.guide-article a:not(.guide-shot):not(.guide-app-tab) { color: var(--blue); text-decoration: none; }
.guide-article a:not(.guide-shot):not(.guide-app-tab):hover { text-decoration: underline; }

/* Export settings: an ordinary bullet list. */
.guide-settings { padding-left: 1.25em; }
.guide-settings li + li { margin-top: 4px; }

/* Editor switcher: a plain text row, the open editor underlined in blue. ARIA tabs once guide.js runs. */
.guide-apps { margin-top: 28px; }
.guide-app-tabs { display: flex; flex-wrap: wrap; column-gap: 24px; row-gap: 4px; border-bottom: 1px solid var(--hairline); }
.guide-app-tab { display: inline-flex; align-items: center; min-height: 44px; color: var(--muted); font-size: 15px; line-height: 1.2; text-decoration: none; white-space: nowrap; }
.guide-app-tab:hover { color: var(--ink); }
.guide-app-tab[aria-selected="true"] { color: var(--ink); box-shadow: inset 0 -2px 0 #0071e3; }

/* Without JS: After Effects shows, other apps open through their #hash link. */
.guide-app-panel:target { display: block; }
.guide-apps:has(.guide-app-panel:target) .guide-app-panel:not(:target) { display: none; }
.guide-apps.is-ready .guide-app-panel[hidden] { display: none; }
.guide-app-tabs { scroll-margin-top: 72px; }
.guide-app-panel { scroll-margin-top: 132px; }
.guide-app-panel:focus-visible { outline: none; }
.guide-app-panel .guide-steps { margin-top: 20px; }

/* Steps: a plain ordered list. The browser's own list numbers ("1.") in body text colour, the same size and
   weight as the step sentence, hang to the left; list semantics stay intact for screen readers. 36 px between steps. */
.guide-steps { margin: 16px 0 0; padding-left: 28px; list-style: decimal outside; }
.guide-steps > li { padding-left: 0; }
.guide-steps > li::marker { color: var(--ink); font-size: inherit; font-weight: 400; font-variant-numeric: tabular-nums; }
.guide-step + .guide-step { margin-top: 36px; }
.guide-article .guide-steps + p { margin-top: 36px; }

/* Shot: under its sentence, 1 px hairline border, 8 px radius (the site's --radius-sm), no shadow, no frame.
   Natural size, at most 520 px wide (Nil) and never wider than the column. Dialog shots stay under
   520 px tall. Phone shots are 320 px on desktop and the column width on a phone. */
.guide-shot { position: relative; display: block; width: fit-content; max-width: min(100%, 520px); margin-top: 14px; color: inherit; text-decoration: none; cursor: zoom-in; }
.guide-shot picture { display: block; }
.guide-shot img { display: block; max-width: 100%; max-height: 520px; width: auto; height: auto; border-radius: 8px; }
.guide-shot::after { content: ""; position: absolute; inset: 0; z-index: 1; border: 1px solid var(--hairline); border-radius: 8px; pointer-events: none; }
.guide-shot .guide-marks { z-index: 2; }
.guide-step--phone .guide-shot img { width: 320px; max-height: none; }

/* Marks: SVG layer drawn by guide.js from data-guide-marks. */
.guide-marks { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }

/* Questions: the shared .faq-item rows, set in body size. */
.guide-faq-list .faq-item summary { font-size: 17px; font-weight: 600; }
.guide-faq-list .faq-item p { color: var(--ink); font-size: 17px; line-height: 1.5; }

/* Full screenshot dialog. */
.guide-lightbox { width: min(1400px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 0; border: 1px solid var(--hairline); border-radius: var(--radius-sm); background: var(--pearl); color: var(--ink); }
.guide-lightbox::backdrop { background: rgba(0, 0, 0, .7); }
.guide-lightbox-bar { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 14px; border-bottom: 1px solid var(--hairline); background: var(--pearl); }
.guide-lightbox-title { margin: 0; font-size: 15px; font-weight: 600; }
.guide-lightbox-body { padding: 14px; text-align: center; }
.guide-full-frame { position: relative; display: inline-block; max-width: 100%; vertical-align: top; }
.guide-lightbox-body img { display: block; max-width: 100%; height: auto; margin-inline: auto; }

@media (max-width: 833px) {
  .guide-section { scroll-margin-top: 116px; }
  .guide-app-tabs { scroll-margin-top: 150px; }
  .guide-app-panel { scroll-margin-top: 160px; }
}
@media (max-width: 760px) {
  .guide-main { padding: 40px 24px 72px; }
  .guide-article h1 { font-size: 30px; }
  .guide-article .guide-intro { font-size: 17px; }
  .guide-article h2 { font-size: 24px; }
  .guide-step--phone .guide-shot img { width: min(320px, 100%); }
  /* Four editors in a 2 x 2 tab bar on phones: every name whole, each row on its own hairline. */
  .guide-app-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-bottom: 0; }
  .guide-app-tab { border-bottom: 1px solid var(--hairline); }
  .guide-steps { padding-left: 26px; }
}

/* With JS the selected tab wins over any #hash. */
.guide-apps.is-ready > .guide-app-panel.guide-app-panel:not([hidden]) { display: block; }

/* motion:start. Only transform and opacity, each plays once, at most 220 ms. guide.js adds every class
   used here, and only when the reader has not asked for reduced motion. The step shots themselves are
   plain: no zoom, ring or fade-in (PR 493, Mina, William's call). */
/* Marks wait for their picture (guide.js adds is-marks-waiting until the image has loaded, and keeps it
   on an image that fails), then fade in over 150 ms. Opacity only, so nothing moves. */
.guide-marks { transition: opacity 150ms ease-out; }
.is-marks-waiting .guide-marks { opacity: 0; }
.guide-app-tabs.has-bar { position: relative; }
.guide-app-tabs.has-bar .guide-app-tab[aria-selected="true"] { box-shadow: none; }
.guide-tab-bar { position: absolute; top: 0; left: 0; width: 1px; height: 2px; background: #0071e3; transform-origin: 0 0; pointer-events: none; transition: transform 150ms cubic-bezier(.2, 0, 0, 1); }
.guide-tab-bar.no-slide { transition: none; }
.guide-app-panel.is-entering { animation: guide-fade-in 150ms ease-out 1 both; }
.guide-lightbox.is-moving { overflow: visible; }
.guide-lightbox.is-opening[open], .guide-lightbox.is-opening[open]::backdrop { animation: guide-fade-in 220ms ease-out 1 both; }
.guide-lightbox.is-closing[open], .guide-lightbox.is-closing[open]::backdrop { animation: guide-fade-out 220ms cubic-bezier(.4, 0, 1, 1) 1 both; }
@keyframes guide-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes guide-fade-out { from { opacity: 1; } to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .guide-marks, .guide-tab-bar { transition: none; }
  .guide-app-panel.is-entering, .guide-lightbox[open], .guide-lightbox[open]::backdrop { animation: none; }
}
/* motion:end */