/* Guide content only. Header, footer, controls and design tokens use the tool stylesheet. */
.guide-page { --ink:var(--color-text); --muted:var(--color-muted); --green:var(--color-primary); --paper:var(--color-background); --line:var(--color-border); --hero:var(--color-soft); --guide-gutter:var(--page-gutter);
}
.guide-page .guide-shell { width:100%; max-width:1200px; margin-inline:auto; padding-inline:var(--guide-gutter); }
.guide-page :is(.eyebrow,.guide-step-number) { color:var(--green); font-size:12px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; }
.guide-page .guide-practice { padding-block:64px; }
.guide-page .guide-practice-image { padding-block:26px 32px; border-bottom:1px solid var(--line); }
.guide-page .guide-practice-heading { max-width:800px; }
.guide-page .guide-practice-image .guide-practice-heading { margin-inline:auto; text-align:center; }
.guide-page .guide-practice h1 { margin:0 0 8px; font-size:clamp(26px,3vw,32px); line-height:1.25; letter-spacing:-.9px; }
.guide-page:dir(rtl) .guide-practice h1 { letter-spacing:normal; }
.guide-page .guide-practice h2 { margin:12px 0; }
.guide-page .guide-practice-heading>p:not(.guide-step-number) { color:var(--muted); font-size:16px; line-height:1.6; }
.guide-page .guide-practice-image .guide-practice-heading>p { max-width:760px; margin-inline:auto; font-size:15px; }
.guide-page .guide-practice-media { max-width:860px; margin:24px 0 0; }
.guide-page .guide-practice-image .guide-practice-media { width:min(100%,860px,calc(max(280px,100svh - 300px) * 1.723)); margin:20px auto 0; }
.guide-page .guide-practice-stage { border:1px solid var(--line); border-radius:16px; overflow:hidden; background:#fff; box-shadow:0 12px 40px rgb(36 33 29 / 6%); }
.guide-page .guide-practice-media :is(img,video) { display:block; width:100%; height:auto; }
.guide-page .guide-practice-media video { aspect-ratio:16/9; border:1px solid var(--line); border-radius:16px; background:#fff; }
.guide-page .guide-practice-media figcaption { margin-top:12px; color:var(--muted); font-size:13px; line-height:1.6; }
.guide-page .guide-practice-media .guide-practice-hint { display:flex; justify-content:center; align-items:center; gap:8px; min-height:42px; margin-top:6px; text-align:center; }
.guide-page .guide-practice-hint svg { flex:none; width:18px; height:24px; color:var(--green); }
.guide-page .guide-setup { max-width:760px; margin:8px auto 0; text-align:center; color:var(--muted); font-size:12px; line-height:1.7; }
.guide-page .guide-setup a,.guide-page .guide-secondary a { color:var(--green); text-decoration:underline; text-underline-offset:3px; }
.guide-page .guide-setup strong { font-weight:600; }
.guide-page .guide-more { display:flex; align-items:center; justify-content:space-between; gap:24px; padding-block:28px; border-top:1px solid var(--line); }
.guide-page .guide-more nav { display:flex; flex-wrap:wrap; gap:12px 24px; color:var(--green); font-size:13px; font-weight:600; }
.guide-page .guide-more nav a:hover { color:#a33623; }
.guide-page .guide-step { padding-block:72px; scroll-margin-top:24px; }
.guide-page .guide-step-tinted { background:var(--hero); border-block:1px solid var(--line); }
.guide-page .guide-step-heading { max-width:800px; }
.guide-page .guide-step h2 { margin:16px 0 20px; }
.guide-page .guide-step-heading>p:not(.guide-step-number) { color:var(--muted); font-size:16px; line-height:1.75; }
.guide-page .guide-step-heading>p+p { margin-top:16px; }
.guide-page .guide-step-heading .guide-secondary { font-size:14px; }
.guide-page .guide-mode { display:inline-block; margin-top:18px; padding:4px 9px; border:1px solid var(--line); border-radius:6px; background:var(--paper); color:var(--muted); font-size:11px; font-weight:600; }
.guide-page .guide-export-list { margin-top:32px; border-top:1px solid var(--line); }
.guide-page .guide-export-list figure { display:grid; grid-template-columns:minmax(160px,1fr) minmax(0,2fr); align-items:center; gap:32px; margin:0; padding:24px 0; border-bottom:1px solid var(--line); }
.guide-page .guide-export-list figure>div>span { color:var(--muted); font-size:11px; }
.guide-page .guide-export-list h3 { margin-top:4px; font-size:22px; line-height:1.4; letter-spacing:-.5px; }
.guide-page .guide-export-list p { color:var(--muted); font-size:14px; }
@media(max-width:600px) {
  .guide-page .guide-practice { padding-block:40px; }
  .guide-page .guide-practice-image { padding-block:22px 28px; }
  .guide-page .guide-practice-image .guide-practice-heading>p { font-size:14px; }
  .guide-page .guide-practice-image .guide-practice-media { width:100%; margin-top:18px; }
  .guide-page .guide-practice-stage,.guide-page .guide-practice-media video { border-radius:10px; }
  .guide-page .guide-practice-media .guide-practice-hint { min-height:58px; font-size:12px; }
  .guide-page .guide-setup { margin-top:6px; }
  .guide-page .guide-more { align-items:flex-start; flex-direction:column; gap:12px; padding-block:24px; }
  .guide-page .guide-more nav { gap:10px 20px; }
  .guide-page .guide-step { padding-block:44px; }
  .guide-page .guide-step-heading>p:not(.guide-step-number) { font-size:15px; }
  .guide-page .guide-step-heading .guide-secondary { font-size:13px; }
  .guide-page .guide-export-list figure { grid-template-columns:1fr; gap:10px; padding-block:20px; }
}
@media(prefers-reduced-motion:no-preference) {
  .guide-page .guide-practice-image .guide-practice-heading { animation:guide-enter .24s ease-out both; }
  .guide-page .guide-practice-image .guide-practice-media { animation:guide-enter .32s .04s ease-out both; }
  @keyframes guide-enter { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
}
@media(prefers-reduced-motion:reduce) {
  .guide-page * { transition:none!important; }
}