/* A quiet chapter reader. Existing demonstration controls retain their styles. */
.tutorial-main { padding-block: 30px 48px; }
.tutorial-masthead { display: flex; justify-content: space-between; align-items: end; gap: 20px; padding-block: 14px 28px; border-bottom: 1px solid var(--line); }
.tutorial-masthead h1 { font: 600 30px/1.3 var(--sans); letter-spacing: -.04em; }
.tutorial-masthead p { color: var(--muted); font-size: 14px; margin-top: 8px; }
.tutorial-scope { font-size: 12px; color: var(--green); white-space: nowrap; }
.tutorial-layout { display: grid; grid-template-columns: 204px minmax(0, 1fr); gap: 48px; align-items: start; padding-top: 32px; }
.tutorial-sidebar { position: sticky; top: 92px; min-width: 0; }
.tutorial-directory { border-bottom: 1px solid var(--line); }
.tutorial-directory summary { display: flex; align-items: center; gap: 8px; min-height: 44px; font-size: 14px; cursor: pointer; list-style: none; }
.tutorial-directory summary::-webkit-details-marker { display: none; }
.tutorial-directory summary > svg { width: 16px; height: 16px; margin-left: auto; fill: none; stroke: currentColor; stroke-width: 1.4; transition: transform 160ms ease; }
.tutorial-directory[open] summary > svg { transform: rotate(180deg); }
#tutorial-mobile-current { display: none; font: 12px/1.5 var(--mono); color: var(--muted); }
.tutorial-toc { display: flex; flex-direction: column; padding-block: 8px 12px; gap: 4px; }
.tutorial-toc > a { display: flex; align-items: baseline; gap: 12px; min-height: 44px; padding: 10px 8px; border-left: 2px solid transparent; color: var(--muted); font-size: 14px; line-height: 1.7; }
.tutorial-toc > a[aria-current="page"] { background: var(--sage); border-left-color: var(--green); color: var(--green); }
.tutorial-chapter-number { flex: 0 0 20px; font: 12px/1.8 var(--mono); }
.tutorial-directory-note { color: var(--muted); font-size: 12px; line-height: 1.8; margin: 4px 8px 20px; }
.tutorial-reader { min-width: 0; min-height: 0; }
.tutorial-article { scroll-margin-top: 90px; padding-bottom: 12px; }
/* With no script, all articles remain readable and real anchor links work. */
.tutorial-article + .tutorial-article { border-top: 1px solid var(--line); padding-top: 36px; margin-top: 36px; }
.tutorial-enhanced .tutorial-article { margin-top: 0; padding-top: 0; border-top: 0; }
.tutorial-chapter-heading { margin-bottom: 22px; }
.tutorial-kicker { display: block; color: var(--muted); font: 12px/1.8 var(--mono); margin-bottom: 10px; }
.tutorial-chapter-heading h2 { font: 500 30px/1.5 var(--display); letter-spacing: -.03em; scroll-margin-top: 90px; }
.tutorial-prose { max-width: 46em; }
.tutorial-prose p { margin-block: 0 18px; line-height: 1.95; }
.tutorial-prose .tutorial-lead { font-size: 18px; color: var(--ink); line-height: 1.85; margin-bottom: 22px; }
.tutorial-prose h3 { font-size: 19px; line-height: 1.65; font-weight: 500; margin-block: 30px 12px; }
.tutorial-prose ol { margin: 0 0 22px; padding-left: 1.5em; }
.tutorial-prose li { padding-left: .2em; margin-block: 8px; line-height: 1.9; }
.tutorial-note { border-left: 2px solid var(--green); background: var(--sage); padding: 17px 20px 1px; margin-block: 26px; }
.tutorial-note strong { font-size: 14px; font-weight: 600; }
.tutorial-note p { font-size: 14px; margin-top: 8px; color: var(--muted); }
.tutorial-glossary { margin-block: 22px 32px; }
.tutorial-glossary > div { display: grid; grid-template-columns: 126px minmax(0, 1fr); gap: 24px; padding-block: 16px; border-top: 1px solid var(--line); }
.tutorial-glossary dt { font-size: 14px; font-weight: 600; color: var(--green); }
.tutorial-glossary dd { margin: 0; font-size: 14px; line-height: 1.9; color: var(--muted); }
.tutorial-after-demo { margin-top: 30px; }
.tutorial-pager { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; border-top: 1px solid var(--line); margin-top: 36px; padding-top: 20px; }
.tutorial-pager > a { display: flex; flex-direction: column; gap: 5px; padding-block: 8px; min-height: 56px; }
.tutorial-pager > a:last-child { text-align: right; align-items: end; }
.tutorial-pager > a > span { font-size: 12px; color: var(--muted); }
.tutorial-pager strong { font-weight: 500; font-size: 15px; color: var(--green); }
.tutorial-prompts blockquote { margin: 0; padding: 15px 0 15px 18px; border-left: 2px solid var(--line); font-size: 15px; line-height: 1.9; }
.tutorial-prompts blockquote + blockquote { margin-top: 12px; }
.tutorial-privacy-note { font-size: 13px; color: var(--muted); margin-top: 24px; line-height: 1.9; }
.tutorial-privacy-note a { display: inline-flex; align-items: center; min-height: 44px; margin-inline: 4px; color: var(--green); text-decoration: underline; text-underline-offset: 4px; }
.tutorial-nojs { margin-top: 24px; padding: 16px 20px; background: var(--sage); color: var(--muted); font-size: 14px; }
.tutorial-page .demo-panel { scroll-margin-top: 90px; }
.tutorial-page .hero-experiment { padding-inline: 22px; }
.tutorial-page .experiment-flow { grid-template-columns: 74px minmax(0, 1fr) 88px; gap: 20px; }
.tutorial-page .experiment-input > svg { width: 74px; height: 74px; }
.tutorial-page .experiment-heading h2 { font-size: 21px; }
.tutorial-page .experiment-toolbar { padding-block: 12px; }
.tutorial-page .signal-description { grid-template-columns: 1fr; gap: 12px; }
.tutorial-page .signal-topics { grid-column: 1; }
.tutorial-page .experience-panel { gap: 24px; }
@media (hover: hover) and (pointer: fine) {
  .tutorial-toc > a:hover { color: var(--green); background: var(--sage); }
  .tutorial-pager > a:hover strong { text-decoration: underline; text-underline-offset: 4px; }
}
@media (max-width: 1000px) {
  .tutorial-layout { grid-template-columns: 180px minmax(0, 1fr); gap: 30px; }
  .tutorial-page .experiment-flow { grid-template-columns: 64px minmax(0, 1fr) 64px; gap: 12px; }
  .tutorial-page .experiment-choices { grid-template-columns: repeat(2, 28px); gap: 6px; }
  .tutorial-page .experiment-choices li { height: 28px; font-size: 13px; }
  .tutorial-page .experiment-input > svg { width: 64px; height: 64px; }
}
@media (max-width: 860px) {
  .tutorial-main { padding-top: 22px; }
  .tutorial-masthead { align-items: start; padding-block: 10px 22px; }
  .tutorial-masthead h1 { font-size: 27px; }
  .tutorial-layout { grid-template-columns: minmax(0, 1fr); gap: 26px; padding-top: 20px; }
  .tutorial-sidebar { position: static; }
  .tutorial-directory { border-top: 1px solid var(--line); }
  .tutorial-directory summary { min-height: 52px; }
  #tutorial-mobile-current { display: inline; margin-left: auto; }
  .tutorial-directory summary > svg { margin-left: 6px; }
  .tutorial-toc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px 12px; }
  .tutorial-directory-note { margin-bottom: 16px; }
  .tutorial-chapter-heading h2 { font-size: 27px; }
  .tutorial-page .experience-panel { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .tutorial-masthead { flex-direction: column; gap: 12px; }
  .tutorial-masthead h1 { font-size: 26px; }
  .tutorial-masthead p { font-size: 13px; }
  .tutorial-scope { font-size: 12px; }
  .tutorial-layout { gap: 24px; }
  .tutorial-toc { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .tutorial-toc > a { min-height: 44px; padding-block: 10px; font-size: 14px; }
  .tutorial-chapter-heading { margin-bottom: 18px; }
  .tutorial-chapter-heading h2 { font-size: 25px; }
  .tutorial-kicker { margin-bottom: 8px; }
  .tutorial-prose .tutorial-lead { font-size: 17px; margin-bottom: 18px; }
  .tutorial-prose p { margin-bottom: 16px; }
  .tutorial-prose h3 { margin-top: 26px; font-size: 18px; }
  .tutorial-note { padding: 14px 16px 1px; margin-block: 22px; }
  .tutorial-note p { font-size: 13px; }
  .tutorial-glossary > div { grid-template-columns: minmax(0, 1fr); gap: 6px; padding-block: 15px; }
  .tutorial-glossary dd { font-size: 14px; }
  .tutorial-pager { gap: 16px; margin-top: 28px; }
  .tutorial-pager strong { font-size: 14px; line-height: 1.8; }
  .tutorial-page .hero-experiment { padding-inline: 12px; }
  .tutorial-page .experiment-heading h2 { font-size: 19px; }
  .tutorial-page .experiment-flow { grid-template-columns: 46px minmax(0, 1fr) 54px; gap: 8px; }
  .tutorial-page .experiment-input > svg { width: 46px; height: 54px; }
  .tutorial-page .experiment-choices { grid-template-columns: repeat(2, 24px); }
  .tutorial-page .experiment-choices li { height: 26px; }
  .tutorial-page .experiment-signal > svg { height: 110px; }
  .tutorial-page .experiment-controls { flex-direction: column; align-items: stretch; gap: 8px; }
  .tutorial-page .experiment-controls label { justify-content: space-between; }
  .tutorial-page .experiment-controls button { justify-content: start; min-height: 44px; }
  .tutorial-page .experience-panel { grid-template-columns: minmax(0, 1fr); }
  .tutorial-prompts blockquote { padding-left: 14px; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .tutorial-page { scroll-behavior: auto; }
  .tutorial-directory summary > svg { transition: none; }
}