/* CSS 551 course text: shared chapter stylesheet (extracted from the Chapter 1 shell; chapters link it instead of inlining it). */
      :root {
        --ink: #1a1c22; --dim: #5c6270; --line: #d7dbe3; --bg: #ffffff;
        --accent: #0a7d5a; --accentbg: #e9f5f0; --box: #f6f8fb;
        --warn: #9a5b00; --warnbg: #fff5e6; --demo: #6b40d8; --demobg: #f3efff;
      }
      * { box-sizing: border-box; }
      body {
        margin: 0; background: #eef0f4; color: var(--ink);
        font: 16px/1.62 "Charter", "Iowan Old Style", "Palatino", Georgia, serif;
      }
      .page {
        max-width: 820px; margin: 28px auto; background: var(--bg);
        padding: 48px clamp(20px, 6vw, 64px) 64px;
        box-shadow: 0 1px 4px #0002; border-radius: 4px;
      }
      h1 { font-size: 27px; line-height: 1.25; margin: 0 0 4px; }
      .subtitle { color: var(--dim); font-size: 15.5px; margin: 0 0 4px; }
      .src {
        color: var(--dim); font-size: 13.5px; font-style: italic; margin: 0 0 26px;
        border-bottom: 1px solid var(--line); padding-bottom: 18px;
      }
      h2 { font-size: 20px; margin: 34px 0 10px; padding-top: 6px; }
      h3 { font-size: 16.5px; margin: 22px 0 6px; color: #2a2d36; }
      p { margin: 10px 0; }
      a { color: var(--accent); }
      code, .mono {
        font-family: "SF Mono", Menlo, Consolas, monospace; font-size: 0.92em;
        background: #f1f3f7; border-radius: 4px; padding: 0.5px 4px;
      }
      pre {
        font-family: "SF Mono", Menlo, Consolas, monospace; font-size: 13px;
        line-height: 1.5; background: #f6f8fb; border: 1px solid var(--line);
        border-left: 3px solid #b9c0d0; border-radius: 6px; padding: 12px 14px;
        margin: 14px 0; overflow-x: auto;
      }
      .lead { font-size: 16.5px; color: #33363f; }
      .def, .thm, .ex, .aside, .demo {
        border: 1px solid var(--line); border-radius: 8px;
        padding: 13px 16px; margin: 16px 0; background: var(--box);
      }
      .def { border-left: 4px solid var(--accent); background: var(--accentbg); }
      .thm { border-left: 4px solid #1f5fb0; background: #eef4fc; }
      .ex { border-left: 4px solid #777; background: #f6f7f9; }
      .aside { border-left: 4px solid var(--warn); background: var(--warnbg); }
      .demo { border-left: 4px solid var(--demo); background: var(--demobg); }
      .tag {
        font-variant: small-caps; letter-spacing: 0.4px; font-weight: 700;
        font-family: system-ui, sans-serif; font-size: 13px; margin-right: 8px;
      }
      .def .tag { color: var(--accent); } .thm .tag { color: #1f5fb0; }
      .ex .tag { color: #555; } .aside .tag { color: var(--warn); }
      .demo .tag { color: var(--demo); } .demo a { color: var(--demo); font-weight: 600; }
      table { border-collapse: collapse; width: 100%; margin: 14px 0; font-family: system-ui, sans-serif; font-size: 14.5px; }
      th, td { border: 1px solid var(--line); padding: 7px 10px; text-align: left; vertical-align: top; }
      th { background: #f0f2f6; }
      details { margin: 8px 0 8px 2px; font-size: 15px; }
      summary { cursor: pointer; color: var(--accent); font-family: system-ui, sans-serif; font-size: 14px; }
      details[open] summary { margin-bottom: 6px; }
      ul, ol { margin: 8px 0; padding-left: 24px; } li { margin: 5px 0; }
      footer { margin-top: 40px; border-top: 1px solid var(--line); padding-top: 14px; color: var(--dim); font-size: 13px; font-family: system-ui, sans-serif; }
      .toc { font-family: system-ui, sans-serif; font-size: 14.5px; background: var(--box); border: 1px solid var(--line); border-radius: 8px; padding: 12px 18px; margin: 18px 0; }
      .toc ol { margin: 4px 0; padding-left: 22px; } .toc a { text-decoration: none; }
      .note { font-size: 13.5px; color: var(--dim); }
      mjx-container[display="true"] { margin: 10px 0 !important; overflow-x: auto; }
      @media print {
        body { background: #fff; }
        .page { box-shadow: none; margin: 0; max-width: none; }
        details { display: block; } details summary { display: none; }
        .demo { break-inside: avoid; }
      }
    
      /* figures (added with the illustrated chapters) */
      figure { margin: 20px 0; }
      figure img { display: block; max-width: 100%; height: auto; margin: 0 auto; }
      figure img.pix { image-rendering: pixelated; image-rendering: crisp-edges; }
      figcaption { font-family: system-ui, sans-serif; font-size: 13.5px; color: var(--dim); margin-top: 8px; line-height: 1.5; }
      figcaption mjx-container { font-size: 0.95em; }
      .ex ol li, .ex ul li { margin: 4px 0; }
      .ex table { font-size: 14px; }
      .steps td:first-child { white-space: nowrap; font-weight: 600; color: #444; }

      /* hands-on blocks (added with the enhancement pass): runnable tasks against the course library or a demo */
      .hands { border: 1px solid var(--line); border-left: 4px solid #128a8a; border-radius: 8px; padding: 13px 16px; margin: 16px 0; background: #eef8f8; }
      .hands .tag { color: #128a8a; }
      .hands pre { background: #fff; margin: 10px 0; }
      .hands ol li, .hands ul li { margin: 6px 0; }
      /* pitfall blocks: where the method loses, with numbers */
      .pitfall { border: 1px solid var(--line); border-left: 4px solid #c0392b; border-radius: 8px; padding: 13px 16px; margin: 16px 0; background: #fdf0ee; }
      .pitfall .tag { color: #c0392b; }

      /* era labels and pipeline strips (history chapter; restored from the chapter 1 shell) */
      .era { color: var(--dim); font-family: system-ui, sans-serif; font-size: 12.5px;
             font-weight: 600; letter-spacing: .4px; background: #eef1f6;
             border: 1px solid var(--line); border-radius: 999px; padding: 2px 10px;
             vertical-align: 3px; margin-left: 8px; white-space: nowrap; }
      .pipe { display: flex; flex-wrap: wrap; gap: 6px; align-items: stretch;
              font-family: system-ui, sans-serif; font-size: 13px; margin: 16px 0; }
      .pipe .st { border: 1px solid var(--line); background: #f0f2f6; border-radius: 6px;
                  padding: 7px 11px; text-align: center; flex: 1 1 auto; min-width: 96px; }
      .pipe .st small { display: block; color: var(--dim); font-size: 11.5px; margin-top: 2px; }
      .pipe .st.prog { border-color: var(--demo); background: var(--demobg); }
      .pipe .st.prog strong { color: var(--demo); }
      .pipe .arr { align-self: center; color: var(--dim); flex: 0 0 auto; }

/* chapter epigraph: a quote or a fact in place of a subtitle */
.epigraph { margin: 6px 0 22px; padding: 4px 0 4px 16px; border-left: 3px solid #b9c0d0; color: #33363f; font-style: italic; font-size: 17px; }
.epigraph.fact { font-style: normal; font-size: 16px; }
.epigraph cite { display: block; font-style: normal; font-size: 13.5px; color: #5c6270; margin-top: 4px; }