.guide-page .app-shell { display: block; min-block-size: 100vh; }
.guide-page .app-main-wrap { margin: 0; min-inline-size: 0; }
.guide-page .app-content { max-inline-size: none; padding: 0; }
.guide-page { background: var(--surface-application); color: var(--text-primary); }
.guide-page a:focus-visible, .guide-page summary:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 4px; }
.guide-skip { position: absolute; inset-block-start: -8rem; inset-inline-start: var(--space-4); z-index: 10; padding: var(--space-3) var(--space-4); background: var(--surface-panel); }
.guide-skip:focus { inset-block-start: var(--space-4); }
.guide-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); padding: var(--space-4) var(--space-7); border-block-start: 4px solid var(--color-brand-accent); border-block-end: 1px solid var(--border-subtle); background: var(--surface-panel); }
.guide-brand { display: inline-flex; align-items: center; gap: var(--space-3); color: var(--text-primary); text-decoration: none; white-space: nowrap; }
.guide-brand:hover { color: var(--text-primary); }
.guide-brand strong { font-size: 1.25rem; letter-spacing: -.04em; }
.guide-brand > span { color: var(--text-secondary); font-size: var(--font-size-control); }
.guide-brand-divider { padding-inline: var(--space-2); }
.guide-header-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--space-5); }
.guide-language { display: flex; gap: var(--space-1); }
.guide-language a { display: inline-flex; align-items: center; min-block-size: 2.5rem; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); font-size: var(--font-size-control); color: var(--text-secondary); text-decoration: none; }
.guide-language a:hover { background: var(--surface-panel-secondary); }
.guide-language [aria-current] { background: var(--color-interactive-selected); color: var(--color-interactive-selected-text); font-weight: 600; }
.guide-container { inline-size: min(100% - 6rem, 76rem); margin-inline: auto; }
.guide-topics { gap: var(--space-2); padding-block-start: var(--space-5); }
.guide-topics .nav-link { border: 1px solid var(--border-subtle); border-radius: var(--radius-md); color: var(--text-secondary); }
.guide-topics [aria-current] { background: var(--color-interactive-selected); color: var(--color-interactive-selected-text); border-color: var(--color-interactive-selected-edge); }
.guide-hero { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(18rem, 1fr); gap: var(--space-7); align-items: center; padding-block: calc(var(--space-7) * 2); border-block-end: 1px solid var(--border-subtle); }
.guide-eyebrow { display: flex; align-items: center; gap: var(--space-2); font-size: .75rem; font-weight: 650; letter-spacing: .12em; margin-block-end: var(--space-5); }
.guide-eyebrow > span { inline-size: .75rem; block-size: .75rem; background: var(--color-brand-accent); border-radius: var(--radius-xs); }
.guide-hero h1 { font-size: clamp(2.5rem, 4.25vw, 3.5rem); line-height: 1.08; letter-spacing: -.045em; font-weight: 650; max-inline-size: 13ch; margin-block: 0 var(--space-5); }
.guide-intro { font-size: 1.125rem; line-height: 1.6; max-inline-size: 43ch; color: var(--text-secondary); margin-block-end: var(--space-6); }
.guide-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
.guide-hero-actions > span { font-size: .8rem; color: var(--text-secondary); }
.guide-page .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-3); min-block-size: 2.5rem; }
.guide-route { background: var(--surface-panel); border: 1px solid var(--border-subtle); border-block-start: 4px solid var(--color-brand-accent); padding: var(--space-5); border-radius: var(--radius-md); }
.guide-small-heading { font-size: .7rem; font-weight: 650; line-height: 1.5; letter-spacing: .12em; color: var(--text-secondary); margin-block: 0 var(--space-3); }
.guide-route ol { list-style: none; padding: 0; margin: 0; }
.guide-route li + li { border-block-start: 1px solid var(--border-subtle); }
.guide-route a { display: flex; align-items: center; gap: var(--space-4); padding-block: var(--space-4); color: var(--text-primary); font-size: .95rem; text-decoration: none; }
.guide-route a:hover { color: var(--color-link); }
.guide-route a > span:first-child { color: var(--text-secondary); font-size: .75rem; font-variant-numeric: tabular-nums; }
.guide-route-arrow { margin-inline-start: auto; color: var(--color-link); }
.guide-layout { display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: var(--space-7); padding-block-start: var(--space-7); }
.guide-sidebar { align-self: start; position: sticky; inset-block-start: var(--space-6); font-size: var(--font-size-control); }
.guide-sidebar nav > a { display: block; padding-block: var(--space-3); }
.guide-sidebar a { color: var(--text-secondary); text-decoration: none; }
.guide-sidebar a:hover { color: var(--color-link); }
.guide-sidebar ol { list-style: none; padding: 0; margin: var(--space-2) 0; }
.guide-sidebar li a { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); border-inline-start: 2px solid var(--border-subtle); border-radius: 0 var(--radius-xs) var(--radius-xs) 0; }
.guide-sidebar [aria-current] { color: var(--color-interactive-selected-text); background: var(--color-interactive-selected); border-inline-start-color: var(--color-interactive-selected-edge); }
.guide-sidebar li span { font-size: .75rem; min-inline-size: 1rem; }
.guide-sidebar-note { border-block-start: 1px solid var(--border-subtle); padding-block-start: var(--space-5); margin-block-start: var(--space-5); color: var(--text-secondary); font-size: .8rem; line-height: 1.6; }
.guide-article { min-inline-size: 0; max-inline-size: 56rem; }
.guide-article section, .guide-article details { scroll-margin-block-start: var(--space-6); }
.guide-article h2 { font-size: 1.75rem; font-weight: 620; line-height: 1.2; letter-spacing: -.03em; margin-block: 0 var(--space-4); }
.guide-article p { line-height: 1.7; }
.guide-before { padding-block-end: var(--space-7); }
.guide-before > p:not(.guide-small-heading) { max-inline-size: 65ch; color: var(--text-secondary); }
.guide-access { background: var(--surface-panel); padding: var(--space-5); border: 1px solid var(--border-subtle); border-inline-start: 4px solid var(--color-brand-accent); border-radius: var(--radius-xs); margin-block-start: var(--space-5); font-size: var(--font-size-body); }
.guide-access p { margin-block: var(--space-2) var(--space-3); }
.guide-access .guide-access-note { margin-block: var(--space-3) 0; font-size: .8rem; }
.guide-step { padding-block: var(--space-7); border-block-start: 1px solid var(--border-subtle); }
.guide-step-header { display: flex; align-items: center; gap: var(--space-5); margin-block-end: var(--space-5); }
.guide-step-header h2, .guide-step-header p { margin: 0; }
.guide-step-header p { margin-block-end: var(--space-1); }
.guide-step-number { display: flex; align-items: center; justify-content: center; flex-shrink: 0; inline-size: 3rem; block-size: 3rem; background: var(--color-brand-accent); color: var(--brand-on-primary); font-size: 1.125rem; font-weight: 650; border-radius: var(--radius-md); }
.guide-step-intro { max-inline-size: 65ch; color: var(--text-secondary); }
.guide-actions { padding-inline-start: var(--space-5); margin-block: var(--space-5); }
.guide-actions li { padding-inline-start: var(--space-2); margin-block-end: var(--space-3); line-height: 1.7; }
.guide-actions li::marker { font-weight: 600; color: var(--text-secondary); }
.guide-figure { margin-block: var(--space-6) var(--space-5); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--surface-panel); }
.guide-figure > a { display: block; border-radius: var(--radius-md) var(--radius-md) 0 0; }
.guide-figure img { display: block; inline-size: 100%; block-size: auto; border-radius: var(--radius-md) var(--radius-md) 0 0; }
.guide-figure figcaption { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); border-block-start: 1px solid var(--border-subtle); padding: var(--space-3) var(--space-4); font-size: .8rem; line-height: 1.6; color: var(--text-secondary); }
.guide-figure figcaption a { white-space: nowrap; padding-block: var(--space-1); }
.guide-done { display: flex; gap: var(--space-3); padding: var(--space-4); background: var(--status-success-surface); border-inline-start: 2px solid var(--status-success-border); color: var(--status-success-text); font-size: .875rem; margin: var(--space-5) 0 0; }
.guide-done > span:first-child { font-weight: 700; }
.guide-tip { padding: var(--space-4); background: var(--surface-panel-secondary); font-size: .875rem; }
.guide-tip strong { display: block; }
.guide-control-note { margin-block: var(--space-6); padding: var(--space-5); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--surface-panel); }
.guide-control-note h3 { font-size: 1.125rem; font-weight: 600; margin-block: 0 var(--space-3); }
.guide-control-note h3:not(:first-child) { margin-block-start: var(--space-6); }
.guide-control-scope { font-size: .8rem; color: var(--text-secondary); }
/* Show the real toolbar at a readable scale, using the unchanged full capture. */
.guide-figure .guide-toolbar-detail { position: relative; overflow: hidden; aspect-ratio: 934 / 155; }
.guide-toolbar-detail img { position: absolute; inline-size: calc(100% * 1440 / 934); max-inline-size: none; inset-inline-start: calc(-100% * 256 / 934); inset-block-start: calc(-100% * 12 / 155); border-radius: 0; }
.guide-questions { border-block-start: 1px solid var(--border-subtle); padding-block: var(--space-7); }
.guide-questions details { border-block-end: 1px solid var(--border-subtle); }
.guide-questions summary { padding-block: var(--space-5); font-weight: 550; cursor: pointer; }
.guide-questions summary:hover { color: var(--color-link); }
.guide-questions details p { margin-block: 0 var(--space-5); color: var(--text-secondary); max-inline-size: 65ch; }
.guide-finish { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-5); border: 1px solid var(--border-subtle); border-block-start: 4px solid var(--color-brand-accent); padding: var(--space-5); background: var(--surface-panel); }
.guide-finish h2 { font-size: 1.25rem; margin-block-end: var(--space-2); }
.guide-finish p { font-size: .875rem; margin: 0; color: var(--text-secondary); }
.guide-capture-note { font-size: .75rem; color: var(--text-secondary); margin-block: var(--space-5) var(--space-7); }
.guide-footer { border-block-start: 1px solid var(--border-subtle); padding-block: var(--space-5); display: flex; flex-wrap: wrap; gap: var(--space-5); align-items: center; font-size: .8rem; color: var(--text-secondary); }
.guide-footer > span { margin-inline-end: auto; }
@media (max-width: 1100px) {
  .guide-header { padding-inline: var(--space-6); gap: var(--space-4); }
  .guide-header-actions { gap: var(--space-3); }
  .guide-container { inline-size: calc(100% - 4rem); }
  .guide-layout { grid-template-columns: 11rem minmax(0, 1fr); gap: var(--space-6); }
  .guide-hero { padding-block: var(--space-7); }
}
@media (max-width: 900px) {
  .guide-header { flex-wrap: wrap; }
  .guide-header-actions { justify-content: flex-start; }
  .guide-hero { grid-template-columns: 1fr; gap: var(--space-6); }
  .guide-hero h1 { max-inline-size: 16ch; }
  .guide-route { padding-block: var(--space-4); }
  .guide-route a { padding-block: var(--space-3); }
  .guide-layout { display: block; }
  .guide-sidebar { display: none; }
  .guide-article { max-inline-size: none; }
}
@media (max-width: 540px) {
  .guide-control-note { padding: var(--space-4); }
  .guide-container { inline-size: calc(100% - 2rem); }
  .guide-header { padding: var(--space-4); }
  .guide-header-actions { inline-size: 100%; justify-content: space-between; gap: var(--space-2); }
  .guide-open { inline-size: 100%; }
  .guide-hero h1 { font-size: 2.5rem; }
  .guide-intro { font-size: 1rem; }
  .guide-article h2 { font-size: 1.5rem; }
  .guide-step-header { gap: var(--space-4); }
  .guide-figure figcaption { flex-wrap: wrap; gap: var(--space-2); }
  .guide-finish { padding: var(--space-4); }
  .guide-footer { gap: var(--space-4); }
}
@media print {
  .guide-header-actions, .guide-sidebar, .guide-route, .guide-hero-actions, .guide-finish, .guide-skip { display: none; }
  .guide-container { inline-size: 100%; }
  .guide-hero, .guide-layout { display: block; }
  .guide-hero { padding-block: var(--space-5); }
  .guide-article { max-inline-size: none; }
  .guide-step, .guide-figure { break-inside: avoid; }
  .guide-questions details::details-content { content-visibility: visible; }
}