:root {
      --bg: #080c12; --bg-2: #0d1420; --bg-3: #111c2e;
      --border: rgba(0,200,255,0.12); --border-hi: rgba(0,200,255,0.4);
      --cyan: #00c8ff; --cyan-dim: #0099cc; --amber: #f5a623; --green: #3dffa0;
      --text: #e8edf5; --text-muted: #7a90a8;
      --radius: 4px;
      --mono: 'DM Mono', monospace; --display: 'Bebas Neue', sans-serif; --body: 'Syne', sans-serif;
    }
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }
    body { font-family: var(--body); background: var(--bg); color: var(--text); line-height: 1.6; overflow-x: hidden; }
    a { color: inherit; text-decoration: none; }
    body::before { content: ''; position: fixed; inset: 0; background-image: linear-gradient(rgba(0,200,255,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(0,200,255,0.03) 1px, transparent 1px); background-size: 48px 48px; pointer-events: none; z-index: 0; }

    nav { position: sticky; top: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; padding: 0 2.5rem; height: 64px; background: rgba(8,12,18,0.92); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); }
    .nav-logo { display: flex; align-items: center; gap: 0.6rem; }
    .nav-logo-mark { width: 32px; height: 32px; border: 2px solid var(--cyan); border-radius: var(--radius); display: flex; align-items: center; justify-content: center; font-family: var(--display); font-size: 1rem; color: var(--cyan); }
    .nav-logo-text { font-family: var(--body); font-weight: 800; font-size: 0.95rem; letter-spacing: 0.08em; text-transform: uppercase; }
    .nav-logo-text span { color: var(--cyan); }
    .nav-links { display: flex; align-items: center; gap: 1.6rem; list-style: none; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; }
    .nav-links a { color: var(--text-muted); transition: color 0.2s; }
    .nav-links a:hover, .nav-links a.active { color: var(--cyan); }
    .nav-toggle { display: none; background: none; border: none; cursor: pointer; }
    .nav-toggle span { display: block; width: 22px; height: 2px; background: var(--text); margin: 5px 0; }

    .wrap { max-width: 820px; margin: 0 auto; padding: 0 2.5rem; position: relative; z-index: 1; }
    .page-header { padding: 5rem 0 2rem; }
    .breadcrumb { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 1.5rem; }
    .breadcrumb a { color: var(--cyan); }
    .breadcrumb span { margin: 0 0.5rem; }
    .eyebrow { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--cyan); margin-bottom: 1rem; }
    .page-title { font-family: var(--display); font-size: clamp(3rem, 6vw, 5rem); letter-spacing: 0.03em; text-transform: uppercase; line-height: 0.95; margin-bottom: 1.25rem; }
    .page-title em { font-style: normal; color: var(--cyan); }
    .lede { font-size: 1.05rem; color: var(--text); line-height: 1.75; margin-bottom: 1rem; }
    .meta { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
    .meta a { color: var(--cyan); }

    .startbox { background: var(--bg-2); border: 1px solid var(--border); border-left: 3px solid var(--cyan); border-radius: 0 var(--radius) var(--radius) 0; padding: 1.4rem 1.6rem; margin: 2rem 0 1rem; }
    .startbox p { font-size: 0.9rem; color: var(--text-muted); line-height: 1.7; }
    .startbox strong { color: var(--text); }
    .startbox a { color: var(--cyan); }

    .guide { padding: 1rem 0 3rem; }
    .guide h2 { font-family: var(--display); font-size: clamp(1.8rem, 3.5vw, 2.4rem); letter-spacing: 0.03em; text-transform: uppercase; margin: 3rem 0 1rem; scroll-margin-top: 84px; }
    .guide h2 .k { font-family: var(--mono); font-size: 0.85rem; color: var(--text-muted); margin-right: 0.6rem; letter-spacing: 0.1em; }
    .guide h3 { font-size: 1rem; font-weight: 700; letter-spacing: 0.02em; margin: 1.75rem 0 0.6rem; color: var(--text); }
    .guide p { font-size: 0.95rem; color: var(--text-muted); line-height: 1.85; margin-bottom: 1rem; }
    .guide p strong, .guide li strong { color: var(--text); }
    .guide ul { list-style: none; margin: 0 0 1.25rem; display: flex; flex-direction: column; gap: 0.55rem; }
    .guide ul li { position: relative; padding-left: 1.4rem; font-size: 0.95rem; color: var(--text-muted); line-height: 1.75; }
    .guide ul li::before { content: '→'; position: absolute; left: 0; color: var(--cyan); }
    .guide a { color: var(--cyan); }

    .model { display: flex; flex-direction: column; gap: 0.75rem; margin: 1.5rem 0; }
    .model-row { display: flex; gap: 1rem; align-items: baseline; background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 1.25rem; }
    .model-row b { font-family: var(--mono); color: var(--cyan); font-size: 0.8rem; flex-shrink: 0; }
    .model-row span { font-size: 0.9rem; color: var(--text-muted); line-height: 1.6; }
    .model-row span em { font-style: normal; color: var(--text); font-weight: 600; }

    .dim { border-top: 2px solid var(--c, var(--cyan)); background: linear-gradient(180deg, rgba(0,200,255,0.03), transparent 40%); padding: 0.25rem 0 0.5rem; margin-top: 2.5rem; }
    .block { background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem 1.5rem; margin-bottom: 1rem; }
    .block .lab { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 0.75rem; }
    .block.good .lab { color: var(--green); }
    .block.fail .lab { color: var(--amber); }
    .block.move .lab { color: var(--cyan); }
    .block ul { margin-bottom: 0; }
    .bands { display: flex; flex-direction: column; gap: 0.9rem; }
    .band b { display: block; font-size: 0.82rem; color: var(--text); margin-bottom: 0.2rem; }
    .band p { margin-bottom: 0; font-size: 0.9rem; }
    .toolnote { display: flex; gap: 0.8rem; align-items: flex-start; background: var(--bg-3); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 1.25rem; margin: 1rem 0 0; }
    .toolnote .ti { font-size: 1.1rem; flex-shrink: 0; }
    .toolnote p { font-size: 0.85rem; margin-bottom: 0; }

    .checklist { counter-reset: step; background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.75rem 1.75rem 1.5rem; margin: 1.5rem 0; }
    .guide .checklist li { counter-increment: step; position: relative; padding-left: 2.6rem; margin-bottom: 1rem; font-size: 0.95rem; color: var(--text-muted); line-height: 1.7; list-style: none; }
    .guide .checklist li:last-child { margin-bottom: 0; }
    .guide .checklist li::before { content: counter(step); position: absolute; left: 0; top: 0; width: 1.6rem; height: 1.6rem; border: 1px solid var(--border-hi); border-radius: var(--radius); color: var(--cyan); font-family: var(--mono); font-size: 0.8rem; display: flex; align-items: center; justify-content: center; }

    .backstop { background: var(--bg-3); border: 1px solid var(--border-hi); border-radius: var(--radius); padding: 2rem; margin: 2.5rem 0; }
    .backstop h3 { font-family: var(--display); font-size: 1.5rem; letter-spacing: 0.03em; text-transform: uppercase; margin: 0 0 0.6rem; }
    .backstop p { font-size: 0.92rem; margin-bottom: 1.25rem; }
    .btn { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 700; font-size: 0.82rem; letter-spacing: 0.03em; padding: 0.85rem 1.5rem; border-radius: var(--radius); }
    .guide a.btn-primary { background: var(--cyan); color: var(--bg); }
    .guide a.btn-primary:hover { background: #33d6ff; color: var(--bg); }
    .guide a.btn-outline { border: 1px solid var(--border-hi); color: var(--text); }
    .guide a.btn-outline:hover { border-color: var(--cyan); color: var(--cyan); }
    .btn-row { display: flex; gap: 0.9rem; flex-wrap: wrap; }

    .related { border-top: 1px solid var(--border); padding-top: 1.5rem; margin-top: 2rem; }
    .related h4 { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 0.9rem; }
    .related ul { list-style: none; display: flex; flex-direction: column; gap: 0.55rem; }
    .guide .related li { padding-left: 0; }
    .guide .related li::before { content: none; }
    .related a { font-size: 0.9rem; color: var(--text-muted); }
    .related a:hover { color: var(--cyan); }

    footer { background: var(--bg-2); border-top: 1px solid var(--border); padding: 3rem 2.5rem; margin-top: 2rem; position: relative; z-index: 1; }
    .footer-inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 2.5rem; }
    .footer-brand p { font-size: 0.85rem; color: var(--text-muted); line-height: 1.65; margin-top: 0.75rem; max-width: 280px; }
    .footer-col h4 { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 1rem; }
    .footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 0.6rem; }
    .footer-col a { font-size: 0.875rem; color: var(--text-muted); transition: color 0.2s; }
    .footer-col a:hover { color: var(--cyan); }
    .footer-bottom { max-width: 1200px; margin: 2rem auto 0; padding-top: 1.5rem; border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; }
    .footer-bottom p { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.1em; color: var(--text-muted); }
    .footer-bottom span { color: var(--cyan); }

    @media (max-width: 1080px) { .nav-links { gap: 1.1rem; font-size: 0.72rem; } }
    @media (max-width: 900px) { .footer-inner { grid-template-columns: 1fr 1fr; } }
    @media (max-width: 640px) {
      nav { padding: 0 1.25rem; }
      .nav-links { display: none; }
      .nav-links.open { display: flex; flex-direction: column; position: fixed; top: 64px; left: 0; right: 0; background: var(--bg); border-bottom: 1px solid var(--border); padding: 1.5rem; gap: 1.25rem; z-index: 99; }
      .nav-toggle { display: block; }
      .wrap { padding: 0 1.25rem; }
      .footer-inner { grid-template-columns: 1fr; }
    }
    /* ---- playbook ---- */
    /* .pb-toc is a <nav>, so it must opt out of the sticky site-nav chrome
       that the shared shell applies to the bare nav element. */
    .pb-toc { position: static; display: block; height: auto; z-index: auto;
      border: 1px solid var(--border); border-radius: var(--radius);
      background: var(--bg-2); padding: 1.6rem 1.8rem; margin: 2.5rem 0 3.5rem; }
    .pb-toc h2 { font-family: var(--display); font-size: 1.6rem; letter-spacing: 0.02em;
      margin: 0 0 1.1rem; color: var(--text); }
    .pb-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; }
    .pb-toc > ol > li { display: grid; grid-template-columns: 8.5rem 1fr; gap: 0.6rem 1.1rem;
      align-items: baseline; padding-bottom: 0.9rem; border-bottom: 1px solid var(--border); }
    .pb-toc > ol > li:last-child { border-bottom: 0; padding-bottom: 0; }
    .pb-mod-no { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.12em;
      text-transform: uppercase; color: var(--text-muted); }
    .pb-mod-name { font-weight: 700; color: var(--text); }
    .pb-mod-name a { color: inherit; text-decoration: none; }
    .pb-mod-name a:hover { color: var(--cyan); }
    .pb-days { grid-column: 2; display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.15rem; }
    .pb-days a { font-family: var(--mono); font-size: 0.68rem; min-width: 2rem; text-align: center;
      padding: 0.2rem 0.35rem; border: 1px solid var(--border); border-radius: var(--radius);
      color: var(--text-muted); text-decoration: none; }
    .pb-days a:hover { border-color: var(--cyan); color: var(--cyan); }

    .pb-module { margin: 0 0 1rem; }
    .pb-module > h2 { font-family: var(--display); font-size: clamp(1.8rem, 4vw, 2.6rem);
      letter-spacing: 0.02em; margin: 3.5rem 0 0.4rem; padding-top: 1.6rem;
      border-top: 1px solid var(--border-hi); color: var(--text); }
    .pb-module > h2 .pb-kicker { display: block; font-family: var(--mono); font-size: 0.7rem;
      letter-spacing: 0.14em; text-transform: uppercase; color: var(--cyan);
      margin-bottom: 0.4rem; }
    .pb-module > h2 .pb-range { font-family: var(--mono); font-size: 0.72rem;
      letter-spacing: 0.1em; color: var(--text-muted); margin-left: 0.6rem; }

    .day { border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-2);
      padding: 1.8rem; margin: 1.6rem 0; scroll-margin-top: 90px; }
    .day-meta { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.12em;
      text-transform: uppercase; color: var(--text-muted); margin: 0 0 0.7rem; }
    .day-meta .d { color: var(--cyan); }
    .day > h3 { font-family: var(--display); font-size: clamp(1.7rem, 4.2vw, 2.4rem);
      line-height: 1.02; letter-spacing: 0.01em; margin: 0 0 0.8rem; color: var(--text); }
    .day > h3 em { font-style: normal; color: var(--cyan); }
    .day-lede { font-size: 1rem; line-height: 1.65; color: var(--text); margin: 0 0 1.5rem;
      max-width: 62ch; }

    .cards { display: grid; gap: 1rem; margin: 0 0 1.3rem; }
    .cards.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cards.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .card { border: 1px solid var(--border); border-left: 2px solid var(--a, var(--cyan));
      border-radius: var(--radius); background: var(--bg-3); padding: 1.1rem 1.2rem; }
    .card[data-accent="green"] { --a: var(--green); }
    .card[data-accent="amber"] { --a: var(--amber); }
    .card[data-accent="cyan"]  { --a: var(--cyan); }
    .card[data-accent="blue"]  { --a: #7aa2ff; }
    .card[data-accent="red"]   { --a: #ff6b6b; }
    .card h4 { font-family: var(--display); font-size: 1.25rem; letter-spacing: 0.02em;
      margin: 0 0 0.2rem; color: var(--text); }
    .card-kicker { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.12em;
      text-transform: uppercase; color: var(--a, var(--cyan)); margin: 0 0 0.7rem; }
    .card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
    .card li { position: relative; padding-left: 1rem; font-size: 0.9rem; line-height: 1.5;
      color: var(--text); }
    .card li::before { content: "›"; position: absolute; left: 0; color: var(--a, var(--cyan)); }
    .card p { font-size: 0.9rem; line-height: 1.55; margin: 0 0 0.5rem; color: var(--text); }
    /* needs .card p specificity to beat the .card p colour above */
    .card p.card-eg { font-style: italic; color: var(--text-muted);
      border-left: 1px solid var(--a, var(--cyan)); padding-left: 0.7rem; margin: 0 0 0.7rem; }

    /* fallback rendering for bespoke one-off diagrams */
    .figure { border: 1px solid var(--border); border-radius: var(--radius);
      background: var(--bg-3); padding: 1.1rem 1.2rem; margin: 0 0 1.3rem; }
    .figure.labels { border: 0; background: none; padding: 0; margin: 0 0 0.6rem;
      display: flex; flex-wrap: wrap; gap: 0 1.4rem; }
    .figure.labels .card-kicker { margin: 0; }
    .figure h4 { font-family: var(--display); font-size: 1.15rem; letter-spacing: 0.02em;
      margin: 0.9rem 0 0.3rem; color: var(--text); }
    .figure h4:first-child { margin-top: 0; }
    .figure > p { font-size: 0.9rem; line-height: 1.55; margin: 0 0 0.5rem; color: var(--text); }
    .figure .card-kicker { color: var(--cyan); margin: 1rem 0 0.4rem; }
    .figure .card-kicker:first-child { margin-top: 0; }
    .figure ul { list-style: none; margin: 0 0 0.7rem; padding: 0; display: grid; gap: 0.45rem; }
    .figure li { position: relative; padding-left: 1rem; font-size: 0.9rem; line-height: 1.5;
      color: var(--text); }
    .figure li::before { content: "\203a"; position: absolute; left: 0; color: var(--cyan); }

    .cards .card.wide { grid-column: 1 / -1; }

    /* the three Agile charts: change curve, estimation range, cycle-time formula */
    .chart { margin: 0 0 1.3rem; border: 1px solid var(--border); border-radius: var(--radius);
      background: var(--bg-3); padding: 1rem; overflow-x: auto; }
    .chart svg { display: block; width: 100%; height: auto; max-width: 100%; }
    .card .chart, .figure .chart { margin: 0 0 0.7rem; padding: 0.6rem; }

    /* inline code chips: filenames, commands, flags inside a sentence */
    .day code { font-family: var(--mono); font-size: 0.85em; background: #060b13;
      border: 1px solid var(--border); border-radius: 3px; padding: 0.05em 0.35em;
      color: var(--text); overflow-wrap: anywhere; }
    .codeblock code { background: none; border: 0; padding: 0; font-size: 0.82rem; }

    /* monospace inset boxes: trees, .env, JSON, diffs, YAML, stack traces */
    .codeblock { border: 1px solid var(--border); border-radius: var(--radius);
      background: #060b13; padding: 1rem 1.1rem; margin: 0 0 1.3rem; overflow: hidden; }
    .codeblock figcaption { color: var(--cyan); margin: 0 0 0.6rem; }
    .codeblock pre { margin: 0; overflow-x: auto; }
    .codeblock code { font-family: var(--mono); font-size: 0.82rem; line-height: 1.6;
      color: var(--text); white-space: pre; display: block; }
    .codeblock .cl { display: flex; justify-content: space-between; gap: 2rem; }
    .codeblock .cn { color: var(--text-muted); font-style: italic; white-space: nowrap; }
    .card .codeblock, .figure .codeblock { margin: 0 0 0.7rem; }
    @media (max-width: 640px) {
      .codeblock code { font-size: 0.74rem; }
      .codeblock .cl { display: block; }
      .codeblock .cn { display: block; }
    }

    .casefile { border: 1px solid var(--border-hi); border-radius: var(--radius);
      background: var(--bg-3); padding: 1.2rem 1.3rem; margin: 0 0 1.3rem; }
    .casefile .card-kicker { color: var(--cyan); }
    .casefile h4 { font-family: var(--body); font-weight: 700; font-size: 1.05rem;
      margin: 0 0 0.9rem; color: var(--text); }
    .cf-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
    .cf-cols h5 { font-size: 0.85rem; margin: 0 0 0.25rem; color: var(--c, var(--cyan)); }
    .cf-cols div[data-accent="green"] { --c: var(--green); }
    .cf-cols div[data-accent="amber"] { --c: var(--amber); }
    .cf-cols div[data-accent="blue"]  { --c: #7aa2ff; }
    .cf-cols p { font-size: 0.85rem; line-height: 1.5; margin: 0; color: var(--text-muted); }

    .day-foot { display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: stretch; }
    .trap { border: 1px dashed var(--border-hi); border-radius: var(--radius);
      padding: 1rem 1.1rem; }
    .trap .card-kicker { color: var(--amber); }
    .trap p { font-size: 0.9rem; line-height: 1.55; margin: 0; color: var(--text); }
    .trap .trap-note { font-family: var(--mono); font-size: 0.7rem; color: var(--text-muted);
      margin-top: 0.6rem; }
    .takeaway { display: flex; align-items: center; background: var(--cyan); color: var(--bg);
      border-radius: var(--radius); padding: 1rem 1.3rem; font-family: var(--display);
      font-size: 1.3rem; letter-spacing: 0.02em; line-height: 1.1; max-width: 16rem; margin: 0; }

    @media (max-width: 900px) {
      .cards.three, .cf-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .pb-toc > ol > li { grid-template-columns: 1fr; }
      .pb-days { grid-column: 1; }
    }
    @media (max-width: 640px) {
      .cards.two, .cards.three, .cf-cols { grid-template-columns: 1fr; }
      .day { padding: 1.2rem; }
      .day-foot { grid-template-columns: 1fr; }
      .takeaway { max-width: none; }
    }

    .cf-source { margin: 0.9rem 0 0; font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.06em;
      color: var(--text-muted); line-height: 1.7; }
    .cf-source a { color: var(--cyan); text-decoration: none; border-bottom: 1px solid rgba(0,200,255,0.35); }
    .cf-source a:hover { border-bottom-color: var(--cyan); }
    .own-page { margin: 1.25rem 0 0; font-family: var(--mono); font-size: 0.68rem;
      letter-spacing: 0.08em; }
    .own-page a { color: var(--text-muted); }
    .own-page a:hover { color: var(--cyan); }

    /* ---- print: one day per page, brand colours preserved ---- */
    @media print {
      @page { size: A4 portrait; margin: 14mm; }
      nav, footer, .pb-toc, .breadcrumb, .pb-backstop, .own-page { display: none !important; }
      * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
      body { background: var(--bg); }
      .wrap { max-width: none; padding: 0; }
      .day { break-inside: avoid; page-break-inside: avoid; break-after: page;
        page-break-after: always; margin: 0; border: 0; }
      .pb-module > h2 { break-after: avoid; page-break-after: avoid; border-top: 0; }
      .day:last-child { break-after: auto; page-break-after: auto; }
      a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.7em;
        color: var(--text-muted); }
    }

    /* progress controls start hidden; the site's .btn/flex rules would otherwise show them */
    [hidden] { display: none !important; }
    .pb-crumb { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.15em;
      text-transform: uppercase; color: var(--text-muted); margin: 0 0 1.5rem; }
    .pb-crumb a { color: inherit; text-decoration: none; }
    .pb-crumb a:hover { color: var(--cyan); }
    .pb-crumb span { opacity: 0.5; margin: 0 0.35rem; }
    .day-page { padding-top: 4rem; padding-bottom: 3rem; }
    .day > h1 { font-family: var(--display); font-size: clamp(2rem, 5vw, 3rem);
      letter-spacing: 0.03em; line-height: 1; margin: 0.3rem 0 1rem; font-weight: 400; }
    .mod-dots { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0 0 1.25rem; }
    .mod-dots a { font-family: var(--mono); font-size: 0.66rem; min-width: 2rem; text-align: center;
      padding: 0.25rem 0.35rem; border: 1px solid var(--border); border-radius: 4px;
      color: var(--text-muted); text-decoration: none; }
    .mod-dots a:hover { color: var(--cyan); border-color: var(--cyan); }
    .mod-dots a[aria-current="page"] { background: var(--cyan); border-color: var(--cyan); color: #06111a; }
    .day-nav { display: grid; grid-template-columns: 1fr auto 1fr; gap: 0.75rem; align-items: center;
      margin: 2rem 0 0; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.08em;
      text-transform: uppercase; }
    .day-nav a { color: var(--cyan); text-decoration: none; }
    .day-nav a:hover { text-decoration: underline; }
    .day-nav .prev { justify-self: start; } .day-nav .up { justify-self: center; }
    .day-nav .next { justify-self: end; text-align: right; }
    .day-nav .none { color: var(--text-muted); opacity: 0.5; }
    .full-link { margin: 1.5rem 0 0; font-family: var(--mono); font-size: 0.7rem;
      letter-spacing: 0.08em; color: var(--text-muted); }
    .full-link a { color: inherit; }
    .pb-stats { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.12em;
      text-transform: uppercase; color: var(--cyan); margin: 0.25rem 0 1.25rem; }
    .pb-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 0 0 1.25rem; }
    .pb-actions .btn { text-decoration: none; }
    .pb-actions a.btn-primary { background: var(--cyan); color: var(--bg); }
    .pb-actions a.btn-primary:hover { background: #33d6ff; }
    .pb-actions a.btn-outline { border: 1px solid var(--border-hi); color: var(--text); }
    .pb-actions a.btn-outline:hover { border-color: var(--cyan); color: var(--cyan); }
    .pb-actions a:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
    .pb-related { font-size: 0.85rem; color: var(--text-muted); margin: 0; }
    .pb-related a { color: var(--text-muted); text-decoration: underline;
      text-decoration-color: var(--border-hi); text-underline-offset: 3px; }
    .pb-related a:hover { color: var(--cyan); }
    .pb-mods { display: grid; gap: 1rem; padding-bottom: 4rem; }
    .pb-mcard { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 0 1.5rem;
      background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius);
      padding: 1.6rem 1.6rem 1.4rem; transition: border-color 0.2s; scroll-margin-top: 80px; }
    .pb-mcard:hover, .pb-mcard:focus-within { border-color: var(--border-hi); }
    .pb-mnum .n { display: block; font-family: var(--display); font-size: 3.4rem; line-height: 0.9;
      color: var(--cyan); letter-spacing: 0.02em; }
    .pb-mnum .r { display: block; margin-top: 0.4rem; font-family: var(--mono); font-size: 0.66rem;
      letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); white-space: nowrap; }
    .pb-mbody h2 { font-family: var(--body); font-size: 1.3rem; font-weight: 700; margin: 0 0 0.4rem; }
    .pb-mbody h2 a { color: var(--text); text-decoration: none; }
    .pb-mbody h2 a:hover { color: var(--cyan); }
    .pb-mbody .outcome { margin: 0 0 1rem; color: var(--text); font-size: 0.95rem; line-height: 1.6; }
    .pb-daylist { list-style: none; margin: 0; padding: 0.9rem 0 0; border-top: 1px solid var(--border);
      display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(5, auto);
      grid-auto-flow: column; gap: 0.35rem 1.5rem; }
    .pb-daylist a { display: flex; gap: 0.6rem; align-items: baseline; font-size: 0.86rem;
      line-height: 1.45; color: var(--text-muted); text-decoration: none; }
    .pb-daylist a:hover { color: var(--text); }
    .pb-daylist a:hover .dn { color: var(--text); }
    .pb-daylist .dn { font-family: var(--mono); font-size: 0.7rem; color: var(--cyan); flex: none;
      min-width: 1.6rem; }
    .pb-progress { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem;
      margin: 1.25rem 0 0; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.08em;
      text-transform: uppercase; color: var(--text); }
    .pb-bar, .pb-mbar { display: block; height: 4px; background: var(--border); border-radius: 2px;
      overflow: hidden; }
    .pb-bar { flex: 1 1 10rem; max-width: 18rem; }
    .pb-bar i, .pb-mbar i { display: block; height: 100%; width: 0; background: var(--cyan); }
    .pb-mbar { margin: -0.4rem 0 1rem; max-width: 14rem; }
    .pb-reset { font: inherit; letter-spacing: inherit; text-transform: inherit; background: none;
      border: 0; padding: 0; color: var(--text-muted); text-decoration: underline; cursor: pointer; }
    .pb-reset:hover { color: var(--cyan); }
    .pb-reset.is-armed { color: #ffb86b; }
    .pb-daylist a.is-done .dn::after { content: " ¹3"; }
    .pb-daylist a.is-done { color: var(--text); }
    .mod-dots a.is-done { border-color: var(--border-hi); color: var(--cyan); }
    .mod-dots a.is-done::after { content: " ¹3"; }
    .mod-dots a[aria-current="page"].is-done { color: #06111a; }
    .pb-done-row { margin: 1.5rem 0 0; text-align: center; }
    .pb-done { font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase;
      padding: 0.7rem 1.2rem; border-radius: var(--radius); border: 1px solid var(--border-hi);
      background: transparent; color: var(--text); cursor: pointer; }
    .pb-done:hover { border-color: var(--cyan); color: var(--cyan); }
    .pb-done[aria-pressed="true"] { background: var(--cyan); border-color: var(--cyan); color: #06111a; }
    .pb-done:focus-visible, .pb-reset:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
    .pb-fast { margin: 0 0 1.5rem; padding: 1.5rem 1.6rem; border: 1px solid var(--border-hi);
      border-radius: var(--radius); background: linear-gradient(180deg, rgba(0,200,255,0.06), rgba(0,200,255,0) 70%); }
    .pb-fast h2 { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
      color: var(--cyan); margin: 0 0 0.3rem; font-weight: 500; }
    .pb-fast h2 span { display: block; font-family: var(--display); font-size: 2rem; letter-spacing: 0.03em;
      color: var(--text); text-transform: uppercase; margin-top: 0.2rem; font-weight: 400; }
    .pb-fast-sub { margin: 0 0 1.1rem; color: var(--text-muted); font-size: 0.92rem; }
    .pb-fast-steps { list-style: none; margin: 0; padding: 0; display: grid;
      grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); gap: 0.9rem; }
    .pb-fast-steps li { display: flex; flex-direction: column; gap: 0.25rem; padding: 0.9rem 1rem;
      background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius); }
    .pb-fast-steps .when { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.1em;
      text-transform: uppercase; color: var(--cyan); }
    .pb-fast-steps b { font-size: 1rem; color: var(--text); }
    .pb-fast-steps .what { font-size: 0.85rem; line-height: 1.5; color: var(--text-muted); }
    .pb-fast-steps .refs { margin-top: auto; padding-top: 0.35rem; font-family: var(--mono); font-size: 0.68rem;
      letter-spacing: 0.06em; color: var(--text-muted); }
    .pb-fast-steps .refs a { color: var(--cyan); }
    .pb-fast-all { display: inline-block; margin-top: 1rem; font-family: var(--mono); font-size: 0.72rem;
      letter-spacing: 0.08em; text-transform: uppercase; color: var(--cyan); text-decoration: none; }
    .pb-fast-all:hover { text-decoration: underline; }
    .cs .page-header { padding-bottom: 1rem; }
    .cs-mod { margin: 0 0 1.75rem; break-inside: avoid; }
    .cs-mod h2 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 0.8rem; margin: 0 0 0.3rem;
      font-family: var(--body); font-size: 1.2rem; font-weight: 700; }
    .cs-mod h2 .n { font-family: var(--display); font-size: 2rem; color: var(--cyan); font-weight: 400; line-height: 1; }
    .cs-mod h2 .r { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase;
      color: var(--text-muted); font-weight: 400; }
    .cs-mod .outcome { margin: 0 0 0.7rem; color: var(--text-muted); font-size: 0.9rem; }
    .cs-lines { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border); }
    .cs-lines a { display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: 0.1rem 0.8rem; padding: 0.55rem 0;
      border-bottom: 1px solid var(--border); text-decoration: none; }
    .cs-lines a:hover .tk { color: var(--cyan); }
    .cs-lines .dn { grid-row: span 2; font-family: var(--mono); font-size: 0.72rem; color: var(--cyan); padding-top: 0.2rem; }
    .cs-lines .tk { font-weight: 700; font-size: 1rem; color: var(--text); }
    .cs-lines .hd { font-size: 0.8rem; color: var(--text-muted); }
    @media print {
      .cs .pb-actions { display: none; }
      .cs-lines a { padding: 0.25rem 0; }
      .cs-lines .tk { font-size: 0.85rem; } .cs-lines .hd { font-size: 0.7rem; }
      .cs-mod { margin-bottom: 0.9rem; } .cs-mod .outcome { display: none; }
    }
    .pb-team { margin: -0.4rem 0 1rem; font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.08em; }
    .pb-team a { color: var(--cyan); text-decoration: none; }
    .pb-team a:hover { text-decoration: underline; }
    .tg-block { margin: 0 0 1.5rem; }
    .tg-block h2, .tg-paid h2 { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
      color: var(--cyan); font-weight: 500; margin: 0 0 0.5rem; }
    .tg-block p { margin: 0; color: var(--text); line-height: 1.6; }
    .tg-agenda { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
    .tg-agenda > li { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: 0.2rem 1rem; padding: 1rem 1.1rem;
      background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius); }
    .tg-agenda > li > .t { grid-row: span 3; font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.08em;
      color: var(--cyan); padding-top: 0.2rem; }
    .tg-agenda b { font-size: 1rem; }
    .tg-agenda p { margin: 0; color: var(--text-muted); font-size: 0.92rem; line-height: 1.55; }
    .tg-agenda ul { list-style: none; margin: 0.2rem 0 0; padding: 0; display: grid; gap: 0.5rem; }
    .tg-agenda ul li { display: grid; gap: 0.1rem; }
    .tg-agenda ul a { color: var(--text); font-weight: 600; font-size: 0.92rem; }
    .tg-agenda ul span { color: var(--text-muted); font-size: 0.88rem; }
    .tg-agenda .tg-rule { margin-top: 0.4rem; color: var(--text); font-weight: 600; }
    .tg-two { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
    .tg-next { margin: 0 0 2rem; color: var(--text-muted); font-size: 0.92rem; }
    .tg-next a { color: var(--cyan); }
    .tg-paid { margin: 0 0 4rem; padding: 1.4rem 1.5rem; border: 1px solid var(--border-hi); border-radius: var(--radius); }
    .tg-paid p { margin: 0 0 1rem; color: var(--text); }
    @media print { .tg-paid .pb-actions { display: none; } .tg-agenda > li { padding: 0.6rem 0.8rem; } .page-header { padding-top: 0; } }
    @media (prefers-reduced-motion: reduce) { .pb-mcard { transition: none; } }
    @media (max-width: 640px) {
      .pb-mcard { grid-template-columns: 1fr; padding: 1.25rem; }
      .pb-fast { padding: 1.25rem; }
      .pb-fast-steps { grid-template-columns: 1fr; }
      .tg-two { grid-template-columns: 1fr; }
      .tg-agenda > li { grid-template-columns: 1fr; }
      .tg-agenda > li > .t { grid-row: auto; }
      .pb-mnum { display: flex; align-items: baseline; gap: 0.75rem; margin-bottom: 0.5rem; }
      .pb-mnum .n { font-size: 2.4rem; }
      .pb-daylist { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; }
      .day-nav { grid-template-columns: 1fr 1fr; }
      .day-nav .up { grid-column: 1 / -1; grid-row: 2; }
    }
    @media print { .mod-dots, .day-nav, .full-link, .pb-crumb, .pb-actions, .pb-progress, .pb-mbar, .pb-done-row { display: none; } }