/* Guide-only layout. Shared colors, navigation, and type come from main.css. */
:root {
  --guide-header-height: 6.25rem;
  --guide-jump-height: 3.5rem;
  --guide-screen-width: 17rem;
  scroll-padding-top: var(--guide-scroll-offset, calc(var(--guide-header-height) + var(--guide-jump-height) + 1rem));
}
.site-header { min-height: var(--guide-header-height); }
.guide-heading { padding-bottom: 2rem; }
.guide-heading h1 { max-width: none; }
.guide-heading .page-intro, .guide-lead, .guide-step h3 {
  font-size: clamp(1.15rem, 1.8vw, 1.35rem);
  font-weight: 650;
  line-height: 1.5;
  letter-spacing: -.02em;
  color: var(--ink);
}
.guide-jump {
  position: sticky;
  top: var(--guide-sticky-top, var(--guide-header-height));
  z-index: 4;
  display: flex;
  gap: 1.75rem;
  overflow-x: auto;
  scrollbar-width: none;
  min-height: var(--guide-jump-height);
  padding-block: .25rem;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}
.guide-jump::-webkit-scrollbar { display: none; }
.guide-jump a {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: .5rem;
  min-height: 2.75rem;
  padding-block: .35rem;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  font-size: .85rem;
  font-weight: 550;
  line-height: 1.4;
  text-decoration: none;
  white-space: nowrap;
}
.guide-jump a:hover { color: var(--ink); }
.guide-jump a:focus-visible { outline-offset: -3px; }
.guide-jump a[aria-current="location"] { color: var(--accent); border-bottom-color: currentColor; }
.guide-jump span { flex: none; font-size: .75rem; font-variant-numeric: tabular-nums; }
.guide-section { border-top: 1px solid var(--rule); padding-block: 4rem; }
.guide-section-heading { margin-bottom: 2.75rem; }
.guide-section-heading .eyebrow { margin-bottom: 1.1rem; }
.guide-section h2 { font-size: clamp(2rem, 3.5vw, 3rem); line-height: 1.15; }
.guide-lead { max-width: 49rem; margin-top: 1.4rem; }
html:lang(zh-Hant) .guide-heading .page-intro, html:lang(zh-Hant) .guide-lead { font-weight: 600; }
.guide-layout { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.5fr); gap: clamp(2.5rem, 5vw, 5rem); align-items: start; }
.guide-figure { width: calc(min(100%, var(--guide-screen-width)) * var(--demo-scale)); margin-inline: auto; }
.guide-camera { width: 100%; height: auto; border-radius: 2rem; }
.guide-screen { position: relative; overflow: hidden; border-radius: 1.5rem; border: 1px solid var(--rule); }
.guide-camera, .guide-screen, .guide-demo video, .widget-sizes img, .widget-settings-image { box-shadow: var(--media-shadow); }
.guide-screen > img { width: 100%; height: auto; }
.guide-annotations { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.guide-annotations path { fill: none; stroke: var(--ink); stroke-width: 4; }
.guide-annotations circle { fill: var(--ink); stroke: var(--paper); stroke-width: 5; }
.guide-annotations text { fill: var(--paper); font: 600 48px -apple-system, BlinkMacSystemFont, sans-serif; text-anchor: middle; }
.guide-steps { display: grid; gap: 1.75rem; margin: 0; padding: 0; list-style: none; }
.guide-step + .guide-step { border-top: 1px solid var(--rule); padding-top: 1.75rem; }
.guide-step h3 { display: flex; align-items: flex-start; gap: .6rem; }
.guide-number { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 1.8rem; height: 1.8rem; margin-top: .1rem; border-radius: 50%; background: var(--ink); color: var(--paper); font-size: 1rem; font-weight: 600; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.guide-icon { width: 1.75rem; height: 1.75rem; object-fit: contain; flex: none; margin-top: .15rem; }
.guide-step-copy { margin-top: .9rem; padding-left: 2.4rem; }
.guide-step p { font-size: 1rem; line-height: 1.8; }
.guide-step .guide-note { margin-top: .85rem; color: var(--muted); font-size: .86rem; line-height: 1.7; }
.guide-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.guide-modes h4 { display: inline-block; margin: 0 0 .65rem; padding: .25rem .6rem; background: var(--accent-soft); border-radius: .3rem; font-size: .95rem; font-weight: 600; }
.guide-control-reference { display: inline-flex; align-items: center; gap: .1rem; white-space: nowrap; }
.guide-inline-icon { width: 1.1rem; height: 1.1rem; margin: 0; }
.guide-demo { margin-top: 1.25rem; }
.guide-demo-compact { width: calc(min(80%, 24rem) * var(--demo-scale)); }
.guide-demo video { display: block; width: 100%; height: auto; border: 1px solid var(--rule); border-radius: .85rem; background: var(--surface); }
.guide-demo .demo-poster { border: 1px solid var(--rule); border-radius: .85rem; }
.guide-demo video:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; }
.guide-demo figcaption { margin-top: .5rem; color: var(--muted); font-size: .8rem; }
.guide-section-note { margin-top: 2rem; color: var(--muted); font-size: .9rem; line-height: 1.7; }
.widget-demo { width: calc(min(100%, var(--guide-screen-width)) * var(--demo-scale)); margin: 0 auto; }
.widget-demo video, .widget-demo .demo-poster { border-radius: 1.5rem; }
.widget-sizes { display: grid; grid-template-columns: 1fr 1fr; gap: calc(1rem * var(--demo-scale)); align-items: start; width: calc(100% * var(--demo-scale)); max-width: calc(29rem * var(--demo-scale)); margin-top: 1.25rem; }
.widget-sizes img { width: 100%; height: auto; border-radius: .75rem; }
.widget-sizes figcaption { margin-top: .5rem; font-size: .8rem; color: var(--muted); }
.widget-settings-image { width: calc(min(100%, 20rem) * var(--demo-scale)); height: auto; margin-top: 1rem; border-radius: .85rem; }

/* Quick start: one selected step, with all four readable without JavaScript. */
.quick-picker { display: flex; gap: clamp(.4rem, 2vw, 1.25rem); width: fit-content; max-width: 100%; margin-bottom: 1.25rem; border-bottom: 1px solid var(--rule); }
.quick-picker[hidden], .quick-panel[hidden] { display: none; }
.quick-picker button {
  font: inherit; font-size: .95rem; font-weight: 550; color: var(--muted); cursor: pointer;
  border: 0; border-bottom: 2px solid transparent; border-radius: 0;
  background: transparent; min-height: 2.75rem; padding: .65rem .25rem; white-space: nowrap;
}
.quick-picker button[aria-pressed="true"] { color: var(--accent); border-bottom-color: currentColor; }
.quick-picker button:hover { color: var(--ink); }
.quick-picker button:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
html:lang(en) .quick-picker { gap: clamp(.2rem, 1vw, .75rem); overflow-x: auto; scrollbar-width: none; }
html:lang(en) .quick-picker::-webkit-scrollbar { display: none; }
html:lang(en) .quick-picker button { flex: none; }
.quick-panel { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.5fr); gap: clamp(2.5rem, 5vw, 5rem); align-items: center; }
.quick-panel + .quick-panel:not([hidden]) { margin-top: 2rem; }
.quick-start.is-interactive .quick-panels { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.5fr); gap: clamp(2.5rem, 5vw, 5rem); align-items: center; }
.quick-media-stack, .quick-text-stack { display: grid; min-width: 0; }
.quick-media-stack > .quick-demo, .quick-text-stack > .quick-panel { grid-area: 1 / 1; }
.quick-copy-column { width: 100%; max-width: 29rem; min-width: 0; }
.quick-text-stack { overflow: clip; }
.quick-start.is-interactive .quick-panel { display: block; margin: 0; }
/* Inactive text contributes height but stays inert and hidden from readers. */
.quick-start.is-interactive .quick-panel[hidden] { visibility: hidden; pointer-events: none; }
.quick-start.is-interactive .quick-panel.is-leaving { visibility: visible; }
.quick-demo.is-leaving[hidden] { display: block; pointer-events: none; }
.quick-demo.is-leaving .quick-arrow { visibility: hidden; }
.quick-video-window { overflow: clip; border-radius: 1.5rem; box-shadow: var(--media-shadow); }
.quick-video-window video { box-shadow: none; }
.quick-demo { position: relative; width: calc(min(100%, var(--guide-screen-width)) * var(--demo-scale)); margin: 0 auto; }
.quick-start.is-interactive .quick-demo { width: calc(min(var(--guide-screen-width), calc(100% - 6.5rem)) * var(--demo-scale)); touch-action: pan-y pinch-zoom; }
.quick-arrow { position: absolute; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0; border: 0; border-radius: 50%; color: var(--muted); background: transparent; cursor: pointer; }
.quick-arrow svg { width: 1.5rem; height: 1.5rem; }
.quick-arrow-previous { right: calc(100% + .5rem); }
.quick-arrow-next { left: calc(100% + .5rem); }
.quick-arrow:disabled { visibility: hidden; }
.quick-arrow:hover { color: var(--accent); background: var(--accent-soft); }
.quick-arrow:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.quick-demo video, .quick-demo .demo-poster { border-radius: 1.5rem; }
/* Keep native controls above the cover when focused before the first frame.
   Move only the pending media content aside, leaving its poster background. */
.quick-demo video { background-size: contain; background-position: center; background-repeat: no-repeat; }
.quick-demo .demo-media:has(> .demo-poster) video[controls] { object-position: -10000px 0; }
.quick-copy { max-width: 29rem; }
.quick-copy h3 { font-size: 1.65rem; margin-bottom: 1rem; }
.quick-copy > p { font-size: 1.05rem; line-height: 1.85; }

/* Chapter Pill Badge */
.guide-section-badge {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .32rem .85rem;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--ink);
  font-size: .84rem;
  font-weight: 600;
  letter-spacing: .06em;
  line-height: 1.35;
  margin-bottom: 1.15rem;
  border: 1px solid rgba(67, 94, 71, 0.16);
}

/* Q&A Accordion Components */
.guide-qa-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .85rem;
}
.guide-qa-item {
  border: 1px solid var(--rule);
  border-radius: .85rem;
  background: #ffffff;
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
  overflow: hidden;
}
.guide-qa-item:hover {
  border-color: #bcc6b8;
}
.guide-qa-item[open] {
  border-color: #9cb099;
  box-shadow: 0 4px 16px -4px rgba(41, 55, 46, 0.08);
  background: #fffefa;
}

.guide-qa-summary {
  list-style: none;
  cursor: pointer;
  padding: 1.1rem 1.25rem;
  display: flex;
  align-items: center;
  gap: .85rem;
  user-select: none;
  position: relative;
  transition: background-color .15s ease;
}
.guide-qa-summary::-webkit-details-marker {
  display: none;
}
.guide-qa-summary:hover {
  background-color: rgba(231, 236, 226, 0.45);
}
.guide-qa-summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.guide-qa-item .guide-number {
  flex: none;
  margin-top: 0;
}

.guide-qa-question {
  flex: 1;
  font-size: clamp(1.02rem, 1.5vw, 1.18rem);
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: -.02em;
  color: var(--ink);
  margin: 0;
}
html:lang(zh-Hant) .guide-qa-question {
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  line-height: 1.5;
}
.guide-qa-item[open] .guide-qa-question {
  color: #1f2c23;
}

/* Chevron Indicator (Placed on right) */
.guide-qa-chevron {
  flex: none;
  margin-left: auto;
  width: 1.5rem;
  height: 1.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  transition: color .18s ease;
}
.guide-qa-chevron svg {
  width: .9rem;
  height: .9rem;
  transition: transform .24s cubic-bezier(.2, 0, 0, 1);
}
.guide-qa-item[open] .guide-qa-chevron {
  color: var(--accent);
}
.guide-qa-item[open] .guide-qa-chevron svg {
  transform: rotate(180deg);
}
.guide-qa-summary:hover .guide-qa-chevron {
  color: var(--ink);
}

.guide-symbol-icon {
  display: inline-block;
  width: 1.05em;
  height: 1.05em;
  vertical-align: -0.15em;
  margin-right: .08em;
  object-fit: contain;
}

/* Answer Content - aligned with question text */
.guide-qa-answer {
  padding: 0 1.25rem 1.4rem calc(1.25rem + 1.8rem + .85rem);
  animation: qaExpand .2s ease-out;
}
.guide-qa-answer p {
  font-size: 1rem;
  line-height: 1.8;
  color: #29372e;
  margin: 0;
}
.guide-qa-answer p + p {
  margin-top: .65rem;
}
.guide-qa-answer .guide-note {
  margin-top: .75rem;
  color: var(--muted);
  font-size: .88rem;
  line-height: 1.7;
  background: rgba(231, 236, 226, 0.4);
  padding: .55rem .85rem;
  border-radius: .45rem;
  border-left: 3px solid var(--accent);
}

@keyframes qaExpand {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 900px) {
  :root { --guide-header-height: 7.75rem; --guide-screen-width: 14rem; }
  .guide-jump { gap: 1.25rem; }
  .guide-layout { grid-template-columns: 1fr; gap: 2.75rem; }
  .quick-panel { grid-template-columns: 1fr; gap: 1.75rem; }
  .quick-start.is-interactive .quick-panels { grid-template-columns: 1fr; gap: 1.75rem; }
  .quick-copy-column { margin-inline: auto; }
  .quick-copy { width: 100%; margin-inline: auto; }
  .guide-steps, .guide-qa-steps { max-width: 42rem; width: 100%; margin-inline: auto; }
}
@media (max-width: 650px) {
  :root { --guide-screen-width: min(66vw, 16rem); }
  .widget-sizes { grid-template-columns: 1fr; max-width: calc(14rem * var(--demo-scale)); }
  .guide-section { padding-block: 2.75rem; }
  .guide-section-heading { margin-bottom: 2rem; }
  .guide-jump a { font-size: .8rem; }
  .guide-step-copy { padding-left: 0; }
  .guide-modes { grid-template-columns: 1fr; gap: 1.2rem; }
  .guide-qa-summary { padding: .95rem 1rem; gap: .75rem; }
  .guide-qa-chevron { width: 1.25rem; height: 1.25rem; }
  .guide-qa-answer { padding: 0 1rem 1.2rem 1rem; }
  .guide-qa-question { font-size: 1rem; }
}

@media (max-width: 360px) {
  html:lang(en) .quick-picker { gap: .2rem; }
  html:lang(en) .quick-picker button { font-size: .8rem; padding-inline: .125rem; }
}