/* Public illustrative page only; no private-workspace selectors or overrides. */
.walkthrough { line-height: 1.6; }
.walkthrough a { color: var(--accent-text); text-underline-offset: .2em; }
.walkthrough a:focus-visible,
.walkthrough summary:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 4px; }
.walkthrough__skip {
  position: absolute;
  top: var(--space-3);
  left: var(--space-4);
  z-index: 1;
  padding: var(--space-3) var(--space-4);
  background: var(--surface);
  transform: translateY(-200%);
}
.walkthrough__skip:focus { transform: none; }
.walkthrough__header,
.walkthrough main,
.walkthrough__footer { width: min(100% - 2rem, 72rem); margin-inline: auto; }
.walkthrough__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-6);
  border-bottom: 1px solid var(--line);
}
.walkthrough__header a { display: inline-flex; align-items: center; min-height: 2.75rem; }
.walkthrough__header .mark { color: var(--ink); text-decoration: none; }
.walkthrough h1,
.walkthrough h2 { margin: 0; font: 400 1.75rem/1.15 var(--serif); }
.walkthrough p { margin: 0; }
.walkthrough p + p { margin-top: var(--space-3); }
.walkthrough__intro { padding-block: var(--space-8) var(--space-7); }
.walkthrough__intro h1 { max-width: 22ch; margin-block: var(--space-3); font-size: clamp(2.25rem, 4.5vw, 3.5rem); }
.walkthrough__lede { max-width: 42rem; color: var(--ink-dim); font-size: var(--text-lg); }
.walkthrough .walkthrough__eyebrow,
.walkthrough .walkthrough__label {
  margin: 0;
  color: var(--accent-text);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.walkthrough__notice {
  padding: var(--space-5);
  border: 1px solid var(--accent-line);
  border-radius: var(--radius-md);
  background: var(--accent-soft);
}
.walkthrough__notice h2 { margin-bottom: var(--space-3); font: 600 var(--text-md)/1.4 var(--sans); }
.walkthrough__navigation {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-6);
  margin-block: var(--space-5);
}
.walkthrough__navigation a { display: inline-flex; align-items: center; min-height: 2.75rem; }
.walkthrough__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: var(--space-5);
  align-items: start;
}
.walkthrough__panel {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: clamp(1rem, 2.5vw, 2rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  overflow-wrap: anywhere;
  scroll-margin-top: var(--space-5);
}
.walkthrough__panel--dialogue { grid-row: 1 / 3; }
.walkthrough__panel--forward { border-color: var(--accent-line); }
.walkthrough__panel header { padding-bottom: var(--space-4); border-bottom: 1px solid var(--line); }
.walkthrough__panel h2 { margin-block: var(--space-2); }
.walkthrough__panel h3 { margin: 0; font-size: var(--text-lg); }
.walkthrough .walkthrough__caption { color: var(--ink-faint); font-size: var(--text-sm); }
.walkthrough__turn { padding-block: var(--space-3); }
.walkthrough__turn--human { align-self: flex-end; max-width: 92%; }
.walkthrough blockquote { margin: var(--space-3) 0; line-height: 1.6; }
.walkthrough__turn--human blockquote {
  margin-bottom: 0;
  padding: var(--space-4);
  border-radius: var(--radius-md) var(--radius-md) var(--space-1) var(--radius-md);
  background: var(--surface-muted);
  font-size: var(--text-lg);
}
.walkthrough .walkthrough__reply { font: 400 1.375rem/1.45 var(--serif); }
.walkthrough__turn .walkthrough__reply { margin-block: var(--space-3); }
.walkthrough .walkthrough__boundary { padding-top: var(--space-5); border-top: 1px solid var(--line); color: var(--ink-dim); }
.walkthrough__detail { border-top: 1px solid var(--line); padding-top: var(--space-2); }
.walkthrough__detail summary { min-height: 2.75rem; padding-block: var(--space-3); color: var(--accent-text); font-weight: 500; cursor: pointer; }
.walkthrough__detail blockquote { padding: var(--space-4); border-left: 3px solid var(--accent); background: var(--surface-muted); }
.walkthrough mark { color: var(--ink); background: var(--accent-soft); }
.walkthrough__next { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-6); margin-block: var(--space-8); }
.walkthrough__next > div { flex: 1 1 32rem; }
.walkthrough__next h2 { margin-bottom: var(--space-3); }
.walkthrough__next p { max-width: 46rem; color: var(--ink-dim); }
.walkthrough__next .welcome__button { color: var(--ink); }
.walkthrough__footer { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); border-top: 1px solid var(--line); padding-block: var(--space-5) var(--space-7); font-size: var(--text-sm); }
.walkthrough__footer p { color: var(--ink-faint); }
@media (max-width: 54rem) {
  .walkthrough__grid { grid-template-columns: minmax(0, 1fr); }
  .walkthrough__panel--dialogue { grid-row: auto; }
  .walkthrough__intro { padding-top: var(--space-7); }
}