/* ===========================================
    DESIGN TOKENS ระบบ Taxonomy Grid (DESIGN.md v1.0 ส่วนที่ 2)
    กระดาษกราฟกับปากกาหมึกน้ำเงินเข้ม ใช้ร่วมกับชุดสไลด์ Bloom, Johari และ PICCA
    สีรองสี่สีแทนหมวดที่เท่าเทียมกัน ในเด็คนี้แทนองก์ที่ 1 ถึง 4
    =========================================== */
    :root {
      /* ── สี ── */
      --paper: #f6f4ec;
      --ink: #14203c;
      --cobalt: #1F49C7;
      --red: #E8555A;
      --green: #1E9E6A;
      --amber: #C77E00;
      --muted: #5a6377;
      --card: #ffffff;
      --grid-line: rgba(31, 73, 199, 0.07);
      --grid-line-major: rgba(31, 73, 199, 0.16);
      --stage-bg: #d9d5c9;
      --slide-bg: #f6f4ec;

      /* ── สีเข้มคู่กัน ใช้กับข้อความขนาดปกติที่ต้องผ่านคอนทราสต์ 4.5:1 ── */
      --cobalt-deep: #17389a;
      --red-deep: #b0272e;
      --green-deep: #146f4b;
      --amber-deep: #8f5a00;
      --violet: #6B3FA0;
      /* ควอดรันท์ Unknown ของหน้าต่างโจฮารี ให้ตรงกับเด็ค Johari Window */
      --violet-deep: #55307f;
      --danger: #b0272e;

      /* ── โทนกระดาษและเส้น ── */
      --stone: var(--paper);
      --stone-deep: #ece8d9;
      --stone-card: #fbfaf4;
      --stone-line: rgba(20, 32, 60, 0.22);
      --ink-soft: var(--muted);
      --ink-faint: #7a8296;

      /* ── ชื่อโทเคนเดิมของเด็คนี้ map มาที่สีของสเปก ── */
      --bronze: var(--cobalt);
      --bronze-deep: var(--cobalt-deep);
      --bronze-soft: rgba(31, 73, 199, 0.10);
      --bronze-line: rgba(31, 73, 199, 0.38);
      --patina: var(--green);
      --patina-soft: rgba(30, 158, 106, 0.12);
      --lapis: var(--green);
      --lapis-soft: rgba(30, 158, 106, 0.10);
      --lapis-line: rgba(30, 158, 106, 0.34);
      --tyrian: var(--red);
      --tyrian-soft: rgba(232, 85, 90, 0.12);
      --tyrian-line: rgba(232, 85, 90, 0.36);

      /* ── ตัวอักษร ── */
      --font-display: 'Bai Jamjuree', sans-serif;
      --font-body: 'IBM Plex Sans Thai', sans-serif;
      --font-mono: 'JetBrains Mono', monospace;

      --ease: cubic-bezier(0.16, 1, 0.3, 1);
      --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
      --duration-normal: 0.6s;

      /* ── ชุดควบคุมสองโหมด ── */
      --gutter-x: 0px;
      --gutter-y: 0px;
      --dock-bottom: 8px;
      --chrome-btn: 42px;
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    /* ===========================================
   FIXED 16:9 STAGE ฐานบังคับ (DESIGN.md ส่วนที่ 3)
   =========================================== */
    html,
    body {
      width: 100%;
      height: 100%;
      margin: 0;
      overflow: hidden;
      background: var(--stage-bg, #000);
    }

    .deck-viewport {
      position: fixed;
      inset: 0;
      overflow: hidden;
      background: var(--stage-bg, #000);
    }

    .deck-stage {
      position: absolute;
      left: 0;
      top: 0;
      width: 1920px;
      height: 1080px;
      overflow: hidden;
      transform-origin: 0 0;
      background: var(--slide-bg, #fff);
    }

    .slide {
      position: absolute;
      inset: 0;
      width: 1920px;
      height: 1080px;
      overflow: hidden;
      display: block;
      visibility: hidden;
      opacity: 0;
      pointer-events: none;
      background: var(--slide-bg, #fff);
    }

    .slide.active,
    .slide.visible {
      visibility: visible;
      opacity: 1;
      pointer-events: auto;
      z-index: 1;
    }

    img,
    video,
    canvas,
    svg {
      max-width: 100%;
      max-height: 100%;
    }

    /* ===========================================
   BACKGROUND ATMOSPHERE หินอ่อนอุ่น + เส้นตาราง 40px
   เส้นตารางนี้คือหน่วยจังหวะของทั้งเด็ค ระยะห่างควรเป็นพหุคูณของ 20 หรือ 40
   =========================================== */
    .deck-stage {
      background: var(--paper);
    }

    .slide::before {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background:
        linear-gradient(var(--grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid-line) 1px, transparent 1px),
        linear-gradient(var(--grid-line-major) 1.5px, transparent 1.5px),
        linear-gradient(90deg, var(--grid-line-major) 1.5px, transparent 1.5px);
      background-size: 40px 40px, 40px 40px, 200px 200px, 200px 200px;
    }

    /* ===========================================
   โครงกระดูกสามชั้น แถบบน / พื้นที่เนื้อหา / แถบล่าง
   (DESIGN.md ส่วนที่ 4) ค่า inset ของ .slide-pad ต้องตรงกับความสูงแถบเสมอ
   =========================================== */
    .bar-top {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 72px;
      z-index: 3;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 64px;
      border-bottom: 3px solid var(--ink);
      background: rgba(246, 244, 236, 0.92);
      font-family: var(--font-mono);
      font-weight: 500;
      font-size: 20px;
      letter-spacing: 0.1em;
      color: var(--ink-soft);
    }

    .bar-top .chapter {
      display: inline-flex;
      align-items: center;
      gap: 14px;
      text-transform: uppercase;
    }

    .bar-top .dot {
      display: inline-block;
      width: 13px;
      height: 13px;
      border-radius: 50%;
      background: var(--act);
      vertical-align: middle;
    }

    .bar-top .deck-tag {
      font-family: var(--font-mono);
      font-size: 18px;
      letter-spacing: 0.06em;
      color: var(--muted);
      text-transform: none;
    }

    .bar-bot {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 62px;
      z-index: 3;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 124px;
      border-top: 3px solid var(--ink);
      background: rgba(246, 244, 236, 0.92);
      font-family: var(--font-body);
      font-size: 21px;
      color: var(--ink-faint);
    }

    .bar-bot .pg {
      font-family: var(--font-mono);
      font-variant-numeric: tabular-nums;
      letter-spacing: 0.06em;
    }

    .slide-pad {
      position: absolute;
      inset: 72px 120px 62px;
      z-index: 2;
      padding-top: 40px;
      padding-bottom: 20px;
    }

    /* หน้าที่ต้องการพื้นที่กว้างเป็นพิเศษ ปรับเฉพาะซ้ายขวา ห้ามลดบนล่าง */
    .slide-pad.wide {
      inset: 72px 80px 62px;
    }

    .slide-pad.cover {
      inset: 72px 140px 62px;
      padding-top: 80px;
    }

    /* ── แถบบอกองก์ปัจจุบัน ── */
    .act-strip {
      display: inline-flex;
      gap: 8px;
      margin-left: 18px;
      vertical-align: middle;
    }

    .act-strip span {
      font-family: var(--font-mono);
      font-size: 19px;
      font-weight: 700;
      padding: 3px 11px;
      border: 2px solid var(--ink);
      background: var(--card);
      color: var(--muted);
      letter-spacing: 0.04em;
    }

    .act-strip span.on {
      background: var(--act);
      border-color: var(--act);
      color: #fff;
    }

    /* ===========================================
   สีประจำองก์ ตั้งค่า --act ที่ระดับ .slide แล้วทุกชิ้นในหน้าสืบทอด
   สีเดียวกันหมายถึงหมวดเดียวกันเสมอในทุกหน้า
   =========================================== */
    .slide {
      --act: var(--cobalt);
      --act-deep: var(--cobalt-deep);
      --act-soft: rgba(31, 73, 199, 0.10);
      --act-line: rgba(31, 73, 199, 0.38);
    }

    .slide[data-act="valid"] {
      --act: var(--green);
      --act-deep: var(--green-deep);
      --act-soft: rgba(30, 158, 106, 0.10);
      --act-line: rgba(30, 158, 106, 0.38);
    }

    .slide[data-act="design"] {
      --act: var(--amber);
      --act-deep: var(--amber-deep);
      --act-soft: rgba(199, 126, 0, 0.12);
      --act-line: rgba(199, 126, 0, 0.40);
    }

    .slide[data-act="case"] {
      --act: var(--red);
      --act-deep: var(--red-deep);
      --act-soft: rgba(232, 85, 90, 0.12);
      --act-line: rgba(232, 85, 90, 0.40);
    }

    /* ===========================================
   TYPOGRAPHY PRIMITIVES
   เพดานล่างของขนาดตัวอักษรคือ 17px บนเวที 1920
   =========================================== */
    body {
      font-family: var(--font-body);
      color: var(--ink);
    }

    /* จุดนำหน้าป้ายกำกับหมวด แทนสัญลักษณ์เดิมของผิว Delphic */
    .glyph {
      display: inline-block;
      width: 12px;
      height: 12px;
      background: var(--act);
      font-size: 0;
      line-height: 0;
      flex: none;
    }

    .kicker {
      display: inline-flex;
      align-items: center;
      gap: 14px;
      font-family: var(--font-mono);
      font-size: 19px;
      font-weight: 700;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--act-deep);
      border: 2px solid var(--act);
      background: var(--card);
      padding: 9px 22px;
      box-shadow: 5px 5px 0 var(--act-soft);
    }

    .kicker.demo {
      color: var(--card);
      background: var(--ink);
      border-color: var(--ink);
      box-shadow: 5px 5px 0 rgba(43, 38, 32, 0.2);
    }

    .kicker.demo .live {
      color: #8fd3b4;
    }

    h1.deck-title {
      font-family: var(--font-display);
      font-weight: 700;
      font-size: 138px;
      line-height: 1.02;
      color: var(--ink);
      letter-spacing: -.01em;
    }

    h1.deck-title .accent {
      color: var(--cobalt);
      font-weight: 700;
    }

    h2.slide-title {
      font-family: var(--font-display);
      font-weight: 700;
      font-size: 60px;
      line-height: 1.12;
      color: var(--ink);
      letter-spacing: -.005em;
      margin-top: 22px;
      margin-bottom: 24px;
    }

    h2.slide-title .accent {
      color: var(--act-deep);
      font-weight: 700;
    }

    .lede {
      font-family: var(--font-body);
      font-weight: 400;
      font-size: 29px;
      color: var(--ink-soft);
      line-height: 1.55;
      max-width: 1500px;
    }

    .lede strong,
    .lede b {
      font-weight: 600;
      color: var(--ink);
    }

    .note-line {
      font-size: 21px;
      color: var(--ink-faint);
      line-height: 1.55;
      max-width: 1560px;
    }

    /* ตัวเลขเด่นและกล่องสถิติ */
    .stat-row {
      display: flex;
      gap: 22px;
    }

    .stat-box {
      flex: 1;
      background: var(--card);
      border: 2.5px solid var(--ink);
      box-shadow: 6px 6px 0 rgba(20, 32, 60, 0.18);
      padding: 22px 18px;
      text-align: center;
    }

    .stat-box .big {
      font-family: var(--font-mono);
      font-size: 44px;
      font-weight: 700;
      color: var(--ink);
      line-height: 1.1;
    }

    .stat-box .lbl {
      font-size: 21px;
      color: var(--ink-soft);
      margin-top: 8px;
      line-height: 1.4;
    }

    /* ===========================================
   LISTS diamond-marker content lists
   =========================================== */
    .content-list {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 22px;
    }

    .content-list li {
      position: relative;
      padding-left: 38px;
      font-size: 34px;
      line-height: 1.5;
      color: var(--ink);
    }

    .content-list li::before {
      content: "";
      position: absolute;
      left: 0;
      top: 13px;
      width: 11px;
      height: 11px;
      background: var(--act);
      transform: rotate(45deg);
    }

    .content-list li b,
    .content-list li strong {
      color: var(--act-deep);
      font-weight: 600;
    }

    .content-list.tight li {
      font-size: 30px;
    }

    .content-list .sub {
      display: block;
      font-size: 26px;
      color: var(--ink-soft);
      margin-top: 4px;
      font-weight: 400;
    }

    .content-list .sub-list {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 9px;
      margin-top: 12px;
    }

    .content-list .sub-list li {
      position: relative;
      padding-left: 28px;
      font-size: 26px;
      color: var(--ink-soft);
      line-height: 1.42;
    }

    .content-list .sub-list li::before {
      content: "";
      position: absolute;
      left: 0;
      top: 9px;
      width: 7px;
      height: 7px;
      background: var(--patina);
      transform: rotate(45deg);
    }

    /* ===========================================
   CARD GRID
   =========================================== */
    .card-grid {
      display: grid;
      gap: 28px;
    }

    .card-grid.cols-2 {
      grid-template-columns: 1fr 1fr;
    }

    .card-grid.cols-3 {
      grid-template-columns: 1fr 1fr 1fr;
    }

    .card-grid.cols-4 {
      grid-template-columns: 1fr 1fr 1fr 1fr;
    }

    .card-grid.cols-5 {
      grid-template-columns: repeat(5, 1fr);
    }

    .card {
      background: var(--stone-card);
      border: 1.5px solid var(--stone-line);
      border-radius: 6px;
      padding: 32px 28px;
      position: relative;
      overflow: hidden;
    }

    .card::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      height: 6px;
      background: var(--act);
    }

    .card.patina::before {
      background: var(--patina);
    }

    .card .card-num {
      font-family: var(--font-display);
      font-style: italic;
      font-size: 30px;
      color: var(--act);
      margin-bottom: 10px;
      display: block;
    }

    .card h3 {
      font-family: var(--font-display);
      font-weight: 600;
      font-size: 34px;
      color: var(--ink);
      margin-bottom: 14px;
      line-height: 1.15;
    }

    .card p {
      font-family: var(--font-body);
      font-size: 28px;
      color: var(--ink-soft);
      line-height: 1.48;
    }

    /* ===========================================
   TABLE
   =========================================== */
    table.data-table {
      width: 100%;
      border-collapse: collapse;
      font-family: var(--font-body);
    }

    table.data-table thead th {
      background: var(--act);
      color: #fdf9f0;
      font-weight: 600;
      font-size: 26px;
      text-align: left;
      padding: 17px 20px;
      letter-spacing: .02em;
    }

    table.data-table thead th:first-child {
      border-top-left-radius: 5px;
    }

    table.data-table thead th:last-child {
      border-top-right-radius: 5px;
    }

    table.data-table tbody td {
      padding: 17px 20px;
      font-size: 28px;
      color: var(--ink);
      border-bottom: 1.5px solid var(--stone-line);
      line-height: 1.42;
    }

    table.data-table tbody tr:nth-child(even) {
      background: var(--stone-card);
    }

    table.data-table tbody td b {
      color: var(--act-deep);
    }

    /* ===========================================
   TWO COLUMN COMPARE
   =========================================== */
    .compare-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 36px;
    }

    .compare-col {
      border: 1.5px solid var(--stone-line);
      border-radius: 6px;
      overflow: hidden;
      background: var(--stone-card);
    }

    .compare-col .compare-head {
      padding: 20px 28px;
      font-family: var(--font-display);
      font-weight: 600;
      font-size: 34px;
      color: #fdf9f0;
    }

    .compare-col.good .compare-head {
      background: var(--patina);
    }

    .compare-col.bad .compare-head {
      background: var(--danger);
    }

    .compare-col ul {
      list-style: none;
      padding: 26px 28px;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .compare-col li {
      position: relative;
      padding-left: 30px;
      font-size: 28px;
      line-height: 1.45;
      color: var(--ink);
    }

    .compare-col.good li::before {
      content: "+";
      position: absolute;
      left: 0;
      top: -2px;
      color: var(--patina);
      font-weight: 700;
      font-size: 26px;
    }

    .compare-col.bad li::before {
      content: "–";
      position: absolute;
      left: 0;
      top: -2px;
      color: var(--danger);
      font-weight: 700;
      font-size: 26px;
    }

    /* ===========================================
   TIMELINE (3-round case study)
   =========================================== */
    .timeline {
      display: flex;
      align-items: stretch;
      gap: 0;
      position: relative;
    }

    .timeline::before {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      top: 76px;
      height: 2px;
      background: var(--act-line);
    }

    .tl-step {
      flex: 1;
      text-align: center;
      position: relative;
      padding: 0 14px;
    }

    .tl-dot {
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background: var(--act);
      border: 5px solid var(--stone);
      margin: 64px auto 22px;
      position: relative;
      z-index: 2;
      box-shadow: 0 0 0 2px var(--act-line);
    }

    .tl-step .tl-label {
      font-family: var(--font-body);
      font-weight: 600;
      font-size: 19px;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: var(--ink-faint);
      margin-bottom: 8px;
    }

    .tl-step .tl-num {
      font-family: var(--font-display);
      font-size: 56px;
      color: var(--act-deep);
      font-weight: 600;
      margin-bottom: 8px;
    }

    .tl-step .tl-desc {
      font-size: 26px;
      color: var(--ink-soft);
      line-height: 1.42;
      max-width: 290px;
      margin: 0 auto;
    }

    /* ===========================================
   CALLOUT BOX
   =========================================== */
    .callout {
      background: var(--patina-soft);
      border-left: 6px solid var(--patina);
      border-radius: 4px;
      padding: 28px 34px;
      font-size: 30px;
      line-height: 1.55;
      color: var(--ink);
    }

    .callout.warn {
      background: rgba(163, 55, 47, 0.08);
      border-left-color: var(--danger);
    }

    .callout b {
      color: var(--patina);
    }

    .callout.warn b {
      color: var(--danger);
    }

    /* ===========================================
   QUOTE SLIDE
   =========================================== */
    .quote-frame {
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      padding: 0 260px;
    }

    .quote-mark {
      font-family: var(--font-display);
      font-style: italic;
      font-size: 160px;
      color: var(--act);
      opacity: .55;
      line-height: 1;
      margin-bottom: 10px;
    }

    .quote-text {
      font-family: var(--font-display);
      font-style: italic;
      font-weight: 500;
      font-size: 56px;
      line-height: 1.3;
      color: var(--ink);
    }

    .quote-attr {
      margin-top: 34px;
      font-size: 26px;
      color: var(--ink-soft);
      font-weight: 500;
    }

    /* ===========================================
   MEANDER DIVIDER (Greek key motif abstract geometric only)
   =========================================== */
    .meander-strip {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 44px;
    }

    /* ===========================================
   REVEAL ANIMATION
   =========================================== */
    .reveal {
      opacity: 0;
      transform: translateY(22px);
      transition: opacity .7s var(--ease), transform .7s var(--ease);
    }

    .slide.visible .reveal {
      opacity: 1;
      transform: translateY(0);
    }

    .reveal.d1 {
      transition-delay: .05s;
    }

    .reveal.d2 {
      transition-delay: .15s;
    }

    .reveal.d3 {
      transition-delay: .25s;
    }

    .reveal.d4 {
      transition-delay: .35s;
    }

    .reveal.d5 {
      transition-delay: .45s;
    }

    .reveal.d6 {
      transition-delay: .55s;
    }


    .reveal-pop {
      opacity: 0;
      transform: scale(0.9);
      transition: opacity .5s var(--ease), transform .5s var(--ease);
    }

    .slide.visible .reveal-pop {
      opacity: 1;
      transform: scale(1);
    }

    @media (prefers-reduced-motion: reduce) {

      *,
      *::before,
      *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.2s !important;
        scroll-behavior: auto !important;
      }
    }

    /* ===========================================
   ชุดควบคุมที่รู้ตำแหน่งเวที (DESIGN.md ส่วนที่ 8)
   โหมด gutter เมื่อขอบว่างข้างกว้างพอ ปุ่มย้ายออกนอกกระดาษสไลด์
   โหมด dock เมื่อไม่มีขอบว่าง ยุบเป็นแถบเดียวกลางขอบล่าง
   ห้ามใส่ transform ให้กล่องที่ครอบปุ่ม position:fixed ในโหมด gutter
   =========================================== */
    .progress-track {
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      height: 5px;
      background: rgba(43, 38, 32, 0.16);
      z-index: 1200;
    }

    .progress-fill {
      height: 100%;
      width: 0;
      background: var(--bronze);
      transition: width 0.35s var(--ease);
    }

    .deck-chrome {
      position: fixed;
      z-index: 1200;
      left: 50%;
      bottom: var(--dock-bottom);
      transform: translateX(-50%);
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 10px;
      padding: 5px 10px;
      background: rgba(242, 236, 224, 0.94);
      border: 1.5px solid var(--stone-line);
      border-radius: 10px;
      box-shadow: 0 3px 12px rgba(0, 0, 0, .18);
      transition: opacity 0.35s ease, visibility 0.35s ease;
    }

    .deck-chrome.idle {
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
    }

    .chrome-div {
      flex: none;
      width: 1.5px;
      align-self: stretch;
      background: var(--stone-line);
    }

    .nav-btns,
    .font-controls {
      position: static;
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 8px;
    }

    .nav-btn {
      width: var(--chrome-btn);
      height: var(--chrome-btn);
      min-width: 44px;
      min-height: 44px;
      border: 1.5px solid var(--stone-line);
      border-radius: 8px;
      background: rgba(248, 244, 234, 0.96);
      color: var(--ink);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      text-decoration: none;
      transition: background 0.15s, border-color 0.15s;
    }

    .nav-btn:hover {
      background: #fff;
      border-color: var(--bronze-line);
    }

    .nav-btn:disabled {
      opacity: .35;
      cursor: not-allowed;
    }

    .nav-btn svg {
      width: 22px;
      height: 22px;
    }

    .nav-counter {
      font-family: var(--font-mono);
      font-variant-numeric: tabular-nums;
      font-size: 15px;
      font-weight: 600;
      color: var(--ink-soft);
      letter-spacing: .06em;
      min-width: 62px;
      text-align: center;
    }

    .font-controls .fs-label {
      font-family: var(--font-mono);
      font-size: 13px;
      font-weight: 700;
      color: var(--ink-soft);
      letter-spacing: 0.04em;
    }

    .font-controls .fs-pct {
      font-family: var(--font-mono);
      font-variant-numeric: tabular-nums;
      font-size: 14px;
      font-weight: 700;
      color: var(--ink);
      min-width: 62px;
      width: auto;
      padding: 0 10px;
      text-align: center;
    }

    /* ── โหมด gutter ── */
    body.chrome-gutter {
      --chrome-btn: 46px;
    }

    body.chrome-gutter .deck-chrome {
      left: auto;
      right: calc((var(--gutter-x) - var(--chrome-btn)) / 2);
      top: 0;
      bottom: 0;
      transform: none;
      flex-direction: column;
      justify-content: center;
      gap: 12px;
      padding: 0;
      background: none;
      border: none;
      box-shadow: none;
      border-radius: 0;
    }

    body.chrome-gutter .chrome-div {
      width: 100%;
      height: 1.5px;
      align-self: auto;
    }

    body.chrome-gutter .font-controls {
      flex-direction: column-reverse;
    }

    body.chrome-gutter .nav-btns {
      flex-direction: column;
    }

    body.chrome-gutter .font-controls .fs-pct {
      min-width: 0;
      width: var(--chrome-btn);
      padding: 0;
    }

    body.chrome-gutter .nav-counter {
      min-width: 0;
      width: var(--chrome-btn);
      font-size: 13px;
    }

    body.chrome-gutter .fab-settings {
      left: calc((var(--gutter-x) - 52px) / 2);
      top: calc(50% - 40px);
      bottom: auto;
    }

    body.chrome-gutter .fab-chat {
      right: auto;
      left: calc((var(--gutter-x) - 56px) / 2);
      top: calc(50% + 26px);
      bottom: auto;
    }

    /* ── คำใบ้คีย์ลัด แสดงครั้งเดียวต่อเครื่อง ── */
    .key-hint {
      position: fixed;
      left: 50%;
      bottom: 84px;
      transform: translateX(-50%);
      z-index: 1300;
      background: rgba(43, 38, 32, 0.93);
      color: var(--stone);
      font-family: var(--font-body);
      font-size: 16px;
      letter-spacing: .02em;
      padding: 12px 22px;
      border-radius: 999px;
      box-shadow: 0 6px 20px rgba(0, 0, 0, .3);
      opacity: 0;
      visibility: hidden;
      transition: opacity .4s ease, visibility .4s ease;
    }

    .key-hint.show {
      opacity: 1;
      visibility: visible;
    }

    .key-hint kbd {
      font-family: var(--font-mono);
      font-size: 14px;
      font-weight: 700;
      background: rgba(242, 236, 224, .17);
      border: 1px solid rgba(242, 236, 224, .32);
      border-radius: 5px;
      padding: 2px 7px;
      margin: 0 2px;
    }

    /* ── โหมดแก้ข้อความหน้างาน ── */
    .edit-hotzone {
      position: fixed;
      left: 0;
      top: 0;
      width: 90px;
      height: 90px;
      z-index: 1150;
    }

    .edit-toggle {
      position: fixed;
      left: 16px;
      top: 16px;
      z-index: 1250;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-height: 44px;
      padding: 10px 16px;
      font-family: var(--font-body);
      font-size: 15px;
      font-weight: 600;
      color: var(--ink);
      background: rgba(248, 244, 234, 0.96);
      border: 1.5px solid var(--stone-line);
      border-radius: 8px;
      cursor: pointer;
      opacity: 0;
      visibility: hidden;
      transition: opacity .25s ease, visibility .25s ease;
    }

    .edit-toggle svg {
      width: 18px;
      height: 18px;
    }

    .edit-hotzone:hover+.edit-toggle,
    .edit-toggle:hover,
    .edit-toggle:focus-visible,
    body.editing .edit-toggle {
      opacity: 1;
      visibility: visible;
    }

    body.editing .edit-toggle {
      background: var(--ink);
      color: var(--stone);
      border-color: var(--ink);
    }

    body.editing [data-editable] {
      outline: 2px dashed var(--bronze-line);
      outline-offset: 3px;
      cursor: text;
    }

    /* ===========================================
   หน้าสาธิต AI แบบโต้ตอบสด (DESIGN.md ส่วนที่ 11)
   กฎเหล็กสามข้อ: min-height:0 ทุกระดับ, flex 1 1 0 สำหรับกล่องที่ยอมหด,
   ห้ามใช้ความสูงพิกเซลตายตัวกับกล่องผลลัพธ์
   =========================================== */
    .slide-pad.demo-pad {
      display: flex;
      flex-direction: column;
      padding-top: 22px;
      padding-bottom: 8px;
      overflow: hidden;
    }

    .demo-grid {
      display: grid;
      grid-template-columns: 1fr 1.15fr;
      gap: 40px;
      margin-top: 18px;
      align-items: start;
    }

    .demo-grid.fill {
      flex: 1 1 auto;
      min-height: 0;
      align-items: stretch;
    }

    .demo-grid>* {
      min-width: 0;
      min-height: 0;
    }

    .demo-col {
      display: flex;
      flex-direction: column;
      min-height: 0;
    }

    .demo-col>* {
      flex: 0 0 auto;
    }

    .demo-col>.flex-fill {
      flex: 1 1 auto;
      min-height: 0;
      display: flex;
      flex-direction: column;
    }

    .demo-col>.demo-field-wrap {
      flex: 0 0 auto;
    }

    .demo-col>.demo-field-wrap>.demo-field {
      height: 172px;
      min-height: 96px;
      overflow-y: auto;
    }

    .demo-input-label {
      font-family: var(--font-body);
      font-weight: 600;
      font-size: 23px;
      color: var(--ink-soft);
      display: block;
      margin-bottom: 10px;
    }

    .demo-field {
      width: 100%;
      font-family: var(--font-body);
      font-size: 23px;
      line-height: 1.5;
      padding: 14px 18px;
      border: 1.5px solid var(--stone-line);
      border-radius: 8px;
      background: #fff;
      outline: none;
      color: var(--ink);
      resize: none;
    }

    .demo-field:focus {
      border-color: var(--bronze);
      box-shadow: 0 0 0 3px var(--bronze-soft);
    }

    .demo-run-btn {
      margin-top: 18px;
      width: 100%;
      min-height: 62px;
      background: var(--bronze);
      color: #fdf9f0;
      border: none;
      border-radius: 10px;
      padding: 14px 0;
      font-size: 25px;
      font-weight: 700;
      cursor: pointer;
      font-family: var(--font-body);
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      transition: background .2s;
    }

    .demo-run-btn:hover {
      background: var(--bronze-deep);
    }

    .demo-run-btn:disabled {
      opacity: .6;
      cursor: not-allowed;
    }

    .demo-run-btn svg {
      width: 22px;
      height: 22px;
    }

    .demo-note {
      margin-top: 18px;
      font-size: 21px;
      color: var(--ink-soft);
      line-height: 1.55;
      background: var(--stone-card);
      border: 1px solid var(--stone-line);
      border-radius: 8px;
      padding: 14px 16px;
    }

    .demo-output-panel {
      background: var(--stone-card);
      border: 1.5px solid var(--stone-line);
      border-radius: 10px;
      padding: 22px 26px;
      overflow-y: auto;
      min-height: 0;
      flex: 1 1 0;
    }

    .demo-output-panel::-webkit-scrollbar {
      width: 8px;
    }

    .demo-output-panel::-webkit-scrollbar-thumb {
      background: var(--stone-line);
      border-radius: 4px;
    }

    .demo-placeholder {
      color: var(--ink-soft);
      text-align: center;
      padding-top: 22%;
      font-size: 24px;
      line-height: 1.6;
    }

    @keyframes qArrive {
      0% {
        background: #efe4cf;
      }

      100% {
        background: var(--stone-card);
      }
    }

    .demo-output-panel.arrive {
      animation: qArrive .75s ease-out;
    }

    /* ===========================================
   พิมพ์เป็นเอกสาร หน้าละหนึ่งสไลด์ ซ่อนชุดควบคุมทั้งหมด
   =========================================== */
    @media print {

      html,
      body {
        width: 1920px;
        height: auto;
        overflow: visible;
        background: #fff;
      }

      .deck-viewport {
        position: static;
        overflow: visible;
        background: #fff;
      }

      .deck-stage {
        position: static;
        width: auto;
        height: auto;
        transform: none !important;
        background: none;
      }

      .slide {
        position: relative;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        width: 1920px;
        height: 1080px;
        break-after: page;
        page-break-after: always;
      }

      .slide:last-child {
        break-after: auto;
        page-break-after: auto;
      }

      .reveal,
      .reveal-pop {
        opacity: 1 !important;
        transform: none !important;
      }

      .deck-chrome,
      .progress-track,
      .key-hint,
      .edit-hotzone,
      .edit-toggle,
      .fab-settings,
      .fab-chat,
      .chat-panel,
      .setup-overlay,
      .api-modal-overlay {
        display: none !important;
      }
    }

    /* ===========================================
   ส่วนขยายสำหรับหน้าเนื้อหาใหม่
   =========================================== */
    /* ตารางแบบแน่น สำหรับตารางที่มีมากกว่า 5 แถว */
    table.data-table.compact thead th {
      font-size: 21px;
      padding: 12px 14px;
    }

    table.data-table.compact tbody td {
      font-size: 22px;
      padding: 12px 14px;
      line-height: 1.38;
    }

    table.data-table .yes {
      color: var(--patina);
      font-weight: 700;
    }

    table.data-table .no {
      color: var(--danger);
      font-weight: 700;
    }

    table.data-table .partial {
      color: var(--ink-faint);
      font-weight: 700;
    }

    table.data-table tbody tr.hi {
      background: var(--act-soft) !important;
    }

    table.data-table tbody tr.hi td {
      font-weight: 500;
    }

    /* กราฟแท่งแนวตั้งแบบ CSS ล้วน */
    .bar-chart {
      display: flex;
      align-items: flex-end;
      gap: 26px;
      height: 250px;
    }

    .bar-chart .bc-col {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      align-items: center;
      height: 100%;
    }

    .bar-chart .bc-val {
      font-family: var(--font-display);
      font-size: 24px;
      font-weight: 600;
      color: var(--act-deep);
      margin-bottom: 8px;
    }

    .bar-chart .bc-bar {
      width: 100%;
      background: var(--act);
      border-radius: 4px 4px 0 0;
      opacity: .85;
    }

    .bar-chart .bc-lbl {
      font-family: var(--font-mono);
      font-size: 19px;
      color: var(--ink-soft);
      margin-top: 10px;
      letter-spacing: .04em;
    }

    /* แถวเงื่อนไข ใช้กับหน้าเงื่อนไข 4 ข้อ */
    .cond-row {
      display: flex;
      gap: 20px;
      align-items: flex-start;
      background: var(--stone-card);
      border: 1.5px solid var(--stone-line);
      border-left: 6px solid var(--act);
      border-radius: 6px;
      padding: 20px 24px;
    }

    .cond-row .cond-num {
      flex: none;
      width: 46px;
      height: 46px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--font-display);
      font-size: 24px;
      font-weight: 700;
      color: #fdf9f0;
      background: var(--act);
      border-radius: 50%;
    }

    .cond-row .cond-body h3 {
      font-family: var(--font-display);
      font-weight: 600;
      font-size: 28px;
      color: var(--ink);
      margin-bottom: 6px;
    }

    .cond-row .cond-body p {
      font-size: 22px;
      color: var(--ink-soft);
      line-height: 1.48;
    }

    .cond-row .cond-body .evid {
      display: block;
      margin-top: 6px;
      font-size: 20px;
      color: var(--act-deep);
      line-height: 1.45;
    }

    /* กล่องเทมเพลตประโยค */
    .template-box {
      background: var(--card);
      border: 2px solid var(--act-line);
      border-radius: 8px;
      box-shadow: 8px 8px 0 var(--act-soft);
      padding: 26px 32px;
      font-family: var(--font-display);
      font-size: 32px;
      line-height: 1.5;
      color: var(--ink);
    }

    .template-box .fill {
      background: var(--act-soft);
      color: var(--act-deep);
      font-weight: 600;
      padding: 2px 10px;
      border-radius: 5px;
    }

    /* ป้ายกำกับเล็กแบบชิป */
    .chip-row {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
    }

    .chip {
      font-family: var(--font-body);
      font-size: 21px;
      font-weight: 500;
      color: var(--ink);
      background: var(--card);
      border: 1.5px solid var(--stone-line);
      border-radius: 999px;
      padding: 8px 18px;
    }

    .chip.on {
      background: var(--act-soft);
      border-color: var(--act-line);
      color: var(--act-deep);
      font-weight: 600;
    }

    /* หน้าสำรอง ทำเครื่องหมายให้ผู้นำเสนอรู้ว่าอยู่นอกลำดับหลัก */
    .slide[data-backup] .bar-top {
      border-bottom-color: var(--ink-faint);
    }

    .backup-tag {
      font-family: var(--font-mono);
      font-size: 17px;
      font-weight: 700;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: #fdf9f0;
      background: var(--ink-soft);
      border-radius: 4px;
      padding: 4px 12px;
      margin-left: 14px;
    }

    /* รายการย่อยแบบยืนเดี่ยว ใช้ในการ์ดผลลัพธ์ที่ไม่ได้อยู่ใน .content-list */
    .card .sub-list {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 9px;
    }

    .card .sub-list li {
      position: relative;
      padding-left: 28px;
      font-size: 24px;
      color: var(--ink-soft);
      line-height: 1.42;
    }

    .card .sub-list li::before {
      content: "";
      position: absolute;
      left: 0;
      top: 10px;
      width: 7px;
      height: 7px;
      background: var(--patina);
      transform: rotate(45deg);
    }

    /* ===========================================
   AI SETTINGS FAB + MODAL + SETUP OVERLAY
   (edu-ai-slides-builder pattern, themed to Delphic palette)
   =========================================== */
    .fab-settings {
      position: fixed;
      bottom: 24px;
      left: 24px;
      z-index: 8000;
      width: 52px;
      height: 52px;
      border-radius: 50%;
      background: var(--ink);
      color: var(--stone);
      border: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4px 14px rgba(0, 0, 0, .3);
      transition: transform .2s, background .2s;
    }

    .fab-settings:hover {
      transform: scale(1.08);
      background: var(--bronze-deep);
    }

    .fab-settings svg {
      width: 24px;
      height: 24px;
    }

    /* ===========================================
   AI Q&A CHATBOT มุมล่างขวา
   (ถามเกี่ยวกับ Delphi Technique, ใช้ callLLM()/API key ร่วมกับ AI Demo)
   =========================================== */
    .fab-chat {
      position: fixed;
      bottom: 24px;
      right: 24px;
      z-index: 8000;
      width: 56px;
      height: 56px;
      border-radius: 50%;
      background: var(--bronze-deep);
      color: var(--stone);
      border: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4px 14px rgba(0, 0, 0, .3);
      transition: transform .2s, background .2s;
    }

    .fab-chat:hover {
      transform: scale(1.08);
      background: var(--patina);
    }

    .fab-chat svg {
      width: 26px;
      height: 26px;
    }

    .chat-panel {
      position: fixed;
      bottom: 92px;
      right: 24px;
      z-index: 7999;
      width: min(400px, calc(100vw - 32px));
      height: min(560px, calc(100vh - 140px));
      background: var(--stone-card);
      border: 1.5px solid var(--stone-line);
      border-radius: 18px;
      box-shadow: 0 25px 60px rgba(0, 0, 0, .35);
      display: flex;
      flex-direction: column;
      overflow: hidden;
      opacity: 0;
      transform: translateY(16px) scale(.97);
      pointer-events: none;
      transition: opacity .25s var(--ease), transform .25s var(--ease);
    }

    .chat-panel.show {
      opacity: 1;
      transform: translateY(0) scale(1);
      pointer-events: auto;
    }

    .chat-panel-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      padding: 18px 18px 14px;
      border-bottom: 1px solid var(--stone-line);
      background: var(--ink);
      color: var(--stone);
      flex-shrink: 0;
    }

    .chat-panel-title {
      font-family: var(--font-display);
      font-weight: 600;
      font-size: 17px;
    }

    .chat-panel-sub {
      font-family: var(--font-body);
      font-size: 12px;
      color: var(--stone-line);
      margin-top: 3px;
    }

    .chat-panel-close {
      background: none;
      border: none;
      color: var(--stone);
      font-size: 22px;
      cursor: pointer;
      line-height: 1;
      padding: 2px 6px;
    }

    .chat-messages {
      flex: 1;
      overflow-y: auto;
      padding: 16px 18px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      font-family: var(--font-body);
      font-size: 14.5px;
      line-height: 1.55;
    }

    .chat-msg {
      max-width: 88%;
      padding: 10px 13px;
      border-radius: 12px;
      white-space: pre-wrap;
    }

    .chat-msg.bot {
      align-self: flex-start;
      background: var(--bronze-soft);
      color: var(--ink);
      border-bottom-left-radius: 3px;
    }

    .chat-msg.user {
      align-self: flex-end;
      background: var(--ink);
      color: var(--stone);
      border-bottom-right-radius: 3px;
    }

    .chat-msg.error {
      align-self: flex-start;
      background: rgba(163, 55, 47, .12);
      color: var(--danger);
      border-bottom-left-radius: 3px;
    }

    .chat-msg.loading {
      align-self: flex-start;
      background: var(--bronze-soft);
      color: var(--ink-faint);
      font-style: italic;
    }

    .chat-input-row {
      display: flex;
      gap: 8px;
      padding: 12px 14px;
      border-top: 1px solid var(--stone-line);
      background: var(--stone-card);
      flex-shrink: 0;
    }

    .chat-input {
      flex: 1;
      resize: none;
      max-height: 90px;
      padding: 10px 12px;
      border-radius: 10px;
      border: 1.5px solid var(--stone-line);
      font-family: var(--font-body);
      font-size: 14px;
      color: var(--ink);
      background: var(--stone);
      outline: none;
    }

    .chat-input:focus {
      border-color: var(--bronze);
    }

    .chat-input:disabled {
      opacity: .6;
      cursor: not-allowed;
    }

    .chat-send-btn {
      width: 42px;
      height: 42px;
      border-radius: 10px;
      border: none;
      background: var(--bronze-deep);
      color: var(--stone);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: background .2s;
    }

    .chat-send-btn:hover {
      background: var(--patina);
    }

    .chat-send-btn:disabled {
      opacity: .5;
      cursor: not-allowed;
    }

    .chat-send-btn svg {
      width: 18px;
      height: 18px;
    }

    /* ── header action buttons (ล้างการสนทนา ฯลฯ) ── */
    .chat-panel-actions {
      display: flex;
      gap: 4px;
      align-items: center;
      flex-shrink: 0;
    }

    .chat-header-btn {
      background: none;
      border: none;
      color: var(--stone-line);
      cursor: pointer;
      padding: 5px;
      border-radius: 7px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: color .2s, background .2s;
    }

    .chat-header-btn:hover {
      color: var(--stone);
      background: rgba(255, 255, 255, .12);
    }

    .chat-header-btn svg {
      width: 17px;
      height: 17px;
    }

    /* ── Markdown ในบับเบิลบอท ── */
    .chat-msg.bot p {
      margin: 0 0 8px;
    }

    .chat-msg.bot p:last-child {
      margin-bottom: 0;
    }

    .chat-msg.bot ul,
    .chat-msg.bot ol {
      margin: 0 0 8px 20px;
    }

    .chat-msg.bot ul:last-child,
    .chat-msg.bot ol:last-child {
      margin-bottom: 0;
    }

    .chat-msg.bot li {
      margin-bottom: 4px;
    }

    .chat-msg.bot h4 {
      font-family: var(--font-display);
      font-size: 15px;
      font-weight: 600;
      margin: 2px 0 6px;
      color: var(--bronze-deep);
    }

    .chat-msg.bot blockquote {
      border-left: 3px solid var(--bronze-line);
      padding-left: 10px;
      color: var(--ink-soft);
      margin: 0 0 8px;
      font-style: italic;
    }

    .chat-msg.bot hr {
      border: none;
      border-top: 1px solid var(--stone-line);
      margin: 10px 0;
    }

    .chat-msg.bot a {
      color: var(--bronze-deep);
      text-decoration: underline;
      text-underline-offset: 2px;
    }

    .chat-msg.bot .chat-code-inline {
      background: rgba(43, 38, 32, .08);
      padding: 1px 5px;
      border-radius: 4px;
      font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
      font-size: 13px;
    }

    .chat-msg.bot .chat-code-block {
      background: var(--ink);
      color: var(--stone);
      padding: 10px 12px;
      border-radius: 8px;
      overflow-x: auto;
      font-size: 12.5px;
      margin: 0 0 8px;
    }

    .chat-msg.bot .chat-code-block code {
      font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
      white-space: pre;
    }

    /* ── streaming cursor + typing indicator ── */
    .stream-cursor {
      display: inline-block;
      width: 2px;
      height: 1em;
      background: var(--ink);
      margin-left: 2px;
      vertical-align: text-bottom;
      animation: chatBlink 1s step-start infinite;
    }

    @keyframes chatBlink {
      50% {
        opacity: 0;
      }
    }

    .typing-dots {
      display: inline-flex;
      gap: 4px;
      padding: 3px 2px;
    }

    .typing-dots span {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--ink-faint);
      animation: chatTypingBounce 1.2s infinite ease-in-out;
    }

    .typing-dots span:nth-child(2) {
      animation-delay: .15s;
    }

    .typing-dots span:nth-child(3) {
      animation-delay: .3s;
    }

    @keyframes chatTypingBounce {

      0%,
      60%,
      100% {
        transform: translateY(0);
        opacity: .5;
      }

      30% {
        transform: translateY(-4px);
        opacity: 1;
      }
    }

    /* ── copy button + regenerate + stopped note ── */
    .chat-msg-actions {
      display: flex;
      gap: 6px;
      margin-top: 8px;
    }

    .chat-copy-btn {
      background: none;
      border: none;
      cursor: pointer;
      color: var(--ink-faint);
      font-size: 11px;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 3px 6px;
      border-radius: 6px;
      transition: color .2s, background .2s;
    }

    .chat-copy-btn:hover {
      color: var(--bronze-deep);
      background: var(--bronze-soft);
    }

    .chat-copy-btn svg {
      width: 12px;
      height: 12px;
    }

    .chat-regenerate-row {
      display: flex;
      justify-content: flex-start;
      align-self: flex-start;
    }

    .chat-regenerate-btn {
      background: none;
      border: 1px solid var(--stone-line);
      color: var(--ink-soft);
      font-size: 12px;
      padding: 5px 12px;
      border-radius: 999px;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 5px;
      transition: border-color .2s, color .2s;
    }

    .chat-regenerate-btn:hover {
      border-color: var(--bronze-line);
      color: var(--bronze-deep);
    }

    .chat-regenerate-btn svg {
      width: 13px;
      height: 13px;
    }

    .chat-stopped-note {
      font-size: 11px;
      color: var(--ink-faint);
      margin-top: 6px;
      font-style: italic;
    }

    /* ── quick-start chips ── */
    .chat-chips {
      display: flex;
      flex-direction: column;
      gap: 6px;
      align-self: flex-start;
      max-width: 92%;
    }

    .chat-chip {
      text-align: left;
      background: var(--stone);
      border: 1px solid var(--stone-line);
      color: var(--ink);
      font-size: 13px;
      padding: 9px 13px;
      border-radius: 10px;
      cursor: pointer;
      transition: border-color .2s, background .2s;
      font-family: var(--font-body);
    }

    .chat-chip:hover {
      border-color: var(--bronze-line);
      background: var(--bronze-soft);
    }

    @media (max-width: 480px) {
      .chat-panel {
        right: 16px;
        bottom: 84px;
      }

      .fab-chat {
        right: 16px;
        bottom: 16px;
      }
    }

    .api-modal-overlay {
      display: none;
      position: fixed;
      z-index: 9000;
      inset: 0;
      background: rgba(23, 19, 16, .7);
      backdrop-filter: blur(4px);
      opacity: 0;
      transition: opacity .3s ease;
      align-items: center;
      justify-content: center;
    }

    .api-modal-overlay.show {
      display: flex;
      opacity: 1;
    }

    .api-modal-box {
      background: var(--stone-card);
      border-radius: 14px;
      padding: 34px;
      width: 90%;
      max-width: 520px;
      max-height: 88vh;
      overflow-y: auto;
      box-shadow: 0 25px 60px rgba(0, 0, 0, .4);
      transform: scale(.94);
      transition: transform .3s ease;
      font-family: var(--font-body);
      border: 1.5px solid var(--stone-line);
    }

    .api-modal-overlay.show .api-modal-box {
      transform: scale(1);
    }

    .api-modal-box h2 {
      font-family: var(--font-display);
      font-weight: 600;
      font-size: 26px;
      color: var(--ink);
    }

    .api-modal-close {
      background: none;
      border: none;
      font-size: 26px;
      cursor: pointer;
      color: var(--ink-faint);
      width: 36px;
      height: 36px;
    }

    .setup-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(23, 19, 16, .92);
      z-index: 9999;
      align-items: center;
      justify-content: center;
    }

    .setup-overlay.show {
      display: flex;
    }

    .setup-card {
      background: var(--stone-card);
      padding: 44px;
      border-radius: 16px;
      max-width: 420px;
      width: 90%;
      text-align: center;
      box-shadow: 0 25px 60px rgba(0, 0, 0, .4);
      font-family: var(--font-body);
    }

    .setup-card h2 {
      font-family: var(--font-display);
      font-weight: 600;
      font-size: 26px;
      color: var(--ink);
      margin-bottom: 12px;
    }

    .setup-card p {
      color: var(--ink-soft);
      font-size: 16px;
      margin-bottom: 22px;
      line-height: 1.6;
    }

    .setup-icon {
      width: 52px;
      height: 52px;
      margin: 0 auto 18px;
      color: var(--bronze);
    }

    .api-field {
      margin-bottom: 16px;
    }

    .api-field label {
      display: block;
      font-size: 14px;
      font-weight: 600;
      color: var(--ink-soft);
      margin-bottom: 6px;
    }

    .api-field input,
    .api-field select {
      width: 100%;
      border: 1.5px solid var(--stone-line);
      border-radius: 8px;
      padding: 10px 14px;
      font-size: 15px;
      outline: none;
      transition: border-color .2s;
      box-sizing: border-box;
      font-family: var(--font-body);
      background: #fff;
      color: var(--ink);
    }

    .api-field input:focus,
    .api-field select:focus {
      border-color: var(--bronze);
      box-shadow: 0 0 0 3px var(--bronze-soft);
    }

    .api-save-btn {
      width: 100%;
      background: var(--patina);
      color: #fff;
      border: none;
      border-radius: 10px;
      padding: 13px;
      font-size: 16px;
      font-weight: 700;
      cursor: pointer;
      margin-top: 8px;
      transition: background .2s;
      font-family: var(--font-body);
    }

    .api-save-btn:hover {
      background: #3f5f53;
    }

    .api-status {
      text-align: center;
      font-size: 14px;
      color: var(--patina);
      margin-top: 10px;
      min-height: 20px;
    }

    .setup-btn {
      background: var(--bronze);
      color: #fff;
      border: none;
      border-radius: 10px;
      padding: 13px 24px;
      font-size: 15px;
      font-weight: 700;
      cursor: pointer;
      width: 100%;
      font-family: var(--font-body);
    }

    .preset-btn {
      background: var(--stone);
      border: 1px solid var(--stone-line);
      border-radius: 6px;
      padding: 6px 10px;
      font-size: 13px;
      cursor: pointer;
      text-align: left;
      transition: background .15s;
      font-family: var(--font-body);
      color: var(--ink);
    }

    .preset-btn:hover {
      background: var(--stone-deep);
    }

    .demo-round-label {
      font-family: var(--font-display);
      font-weight: 600;
      font-style: italic;
      font-size: 30px;
      color: var(--bronze-deep);
      margin: 20px 0 16px;
    }

    .demo-round-label:first-child {
      margin-top: 0;
    }

    .expert-card {
      background: #fff;
      border: 1.5px solid var(--stone-line);
      border-radius: 8px;
      padding: 18px 22px;
      margin-bottom: 14px;
    }

    .expert-card .exp-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 8px;
    }

    .expert-card .exp-role {
      font-weight: 700;
      font-size: 24px;
      color: var(--ink);
    }

    .expert-card .exp-stance {
      font-size: 17px;
      font-weight: 600;
      padding: 4px 12px;
      border-radius: 999px;
      background: var(--patina-soft);
      color: var(--patina);
      white-space: nowrap;
    }

    .expert-card .exp-stance.shifted {
      background: var(--bronze-soft);
      color: var(--bronze-deep);
    }

    .expert-card p {
      font-size: 22px;
      color: var(--ink-soft);
      line-height: 1.5;
    }

    .feedback-box {
      background: var(--bronze-soft);
      border-left: 5px solid var(--bronze);
      border-radius: 4px;
      padding: 16px 20px;
      font-size: 22px;
      color: var(--ink);
      line-height: 1.55;
      margin: 6px 0 8px;
    }

    .convergence-box {
      background: var(--patina-soft);
      border-left: 5px solid var(--patina);
      border-radius: 4px;
      padding: 18px 22px;
      font-size: 23px;
      color: var(--ink);
      line-height: 1.55;
      margin-top: 18px;
    }

    .demo-error {
      color: var(--danger);
      font-weight: 600;
      font-size: 22px;
    }

    .demo-spinner {
      display: inline-block;
      width: 22px;
      height: 22px;
      border: 3px solid rgba(255, 255, 255, .4);
      border-top-color: #fff;
      border-radius: 50%;
      animation: spin 0.8s linear infinite;
    }

    @keyframes spin {
      to {
        transform: rotate(360deg);
      }
    }

    /* ===========================================
   REFERENCE SLIDE
   =========================================== */
    .ref-list {
      columns: 2;
      column-gap: 60px;
      font-size: 22px;
      line-height: 1.58;
      color: var(--ink-soft);
    }

    .ref-list p {
      break-inside: avoid;
      margin-bottom: 20px;
    }

    .ref-list b {
      color: var(--ink);
    }

    /* ===========================================
   ไวยากรณ์องค์ประกอบตามสเปก Taxonomy Grid (DESIGN.md ส่วนที่ 6)
   กรอบหมึกหนา เงาทึบแบบ offset สามระดับ ไม่มีมุมโค้ง
   บล็อกนี้เขียนทับสไตล์เดิมที่มาจากผิว Delphic
   =========================================== */

    /* ── การ์ด ── */
    .card {
      background: var(--card);
      border: 2.5px solid var(--ink);
      border-radius: 0;
      box-shadow: 6px 6px 0 rgba(20, 32, 60, 0.18);
      padding: 28px 26px;
    }

    .card.hero {
      box-shadow: 8px 8px 0 var(--ink);
    }

    .card::before {
      height: 8px;
      background: var(--act);
    }

    .card.patina::before {
      background: var(--green);
    }

    .card .card-num {
      font-family: var(--font-mono);
      font-style: normal;
      font-size: 22px;
      font-weight: 700;
      letter-spacing: 0.08em;
      color: var(--act-deep);
    }

    .card h3 {
      font-family: var(--font-display);
      font-weight: 600;
    }

    /* ── ตาราง ── */
    table.data-table {
      background: var(--card);
      border-collapse: collapse;
    }

    table.data-table thead th {
      background: var(--ink);
      color: var(--paper);
      font-family: var(--font-display);
      font-weight: 600;
      border: 2px solid var(--ink);
      letter-spacing: 0;
    }

    table.data-table thead th:first-child,
    table.data-table thead th:last-child {
      border-radius: 0;
    }

    table.data-table tbody td {
      border: 2px solid var(--ink);
      vertical-align: top;
    }

    table.data-table tbody tr:nth-child(even) {
      background: rgba(20, 32, 60, 0.035);
    }

    table.data-table tbody tr.hi {
      background: var(--act-soft) !important;
    }

    table.data-table .yes {
      color: var(--green-deep);
    }

    table.data-table .no {
      color: var(--red-deep);
    }

    table.data-table .partial {
      color: var(--muted);
    }

    /* ── กล่องเปรียบเทียบสองคอลัมน์ ── */
    .compare-col {
      background: var(--card);
      border: 2.5px solid var(--ink);
      border-radius: 0;
      box-shadow: 6px 6px 0 rgba(20, 32, 60, 0.18);
    }

    .compare-col .compare-head {
      font-family: var(--font-display);
      font-weight: 600;
      color: var(--paper);
      border-bottom: 2.5px solid var(--ink);
    }

    .compare-col.good .compare-head {
      background: var(--green-deep);
    }

    .compare-col.bad .compare-head {
      background: var(--red-deep);
    }

    /* ── กล่องข้อความเน้น ── */
    .callout {
      background: var(--card);
      border: 2.5px solid var(--ink);
      border-left: 10px solid var(--green);
      border-radius: 0;
      box-shadow: 6px 6px 0 rgba(20, 32, 60, 0.18);
    }

    .callout b {
      color: var(--green-deep);
    }

    .callout.warn {
      background: var(--card);
      border-left-color: var(--red);
    }

    .callout.warn b {
      color: var(--red-deep);
    }

    /* ── ไทม์ไลน์ ── */
    .timeline::before {
      background: var(--ink);
      height: 2.5px;
      opacity: .35;
    }

    .tl-dot {
      border-radius: 0;
      width: 20px;
      height: 20px;
      background: var(--act);
      border: 3px solid var(--paper);
      box-shadow: 0 0 0 2.5px var(--ink);
    }

    .tl-step .tl-label {
      font-family: var(--font-mono);
      letter-spacing: 0.12em;
      color: var(--muted);
    }

    .tl-step .tl-num {
      font-family: var(--font-mono);
      font-weight: 700;
      color: var(--ink);
    }

    /* ── รายการหัวข้อ ── */
    .content-list li::before {
      background: var(--act);
      transform: none;
      width: 12px;
      height: 12px;
      top: 15px;
    }

    .content-list li b,
    .content-list li strong {
      color: var(--act-deep);
    }

    .card .sub-list li::before {
      background: var(--act);
      transform: none;
      width: 8px;
      height: 8px;
    }

    /* ── แถวเงื่อนไข กล่องเทมเพลต ชิป ── */
    .cond-row {
      background: var(--card);
      border: 2.5px solid var(--ink);
      border-left: 10px solid var(--act);
      border-radius: 0;
      box-shadow: 6px 6px 0 rgba(20, 32, 60, 0.18);
    }

    .cond-row .cond-num {
      border-radius: 0;
      font-family: var(--font-mono);
      font-weight: 700;
      background: var(--ink);
      color: var(--paper);
      border: 2px solid var(--ink);
      box-shadow: 4px 4px 0 var(--act-soft);
    }

    .cond-row .cond-body h3 {
      font-family: var(--font-display);
      font-weight: 600;
    }

    .cond-row .cond-body .evid {
      color: var(--act-deep);
    }

    .template-box {
      background: var(--card);
      border: 2.5px solid var(--ink);
      border-radius: 0;
      box-shadow: 8px 8px 0 var(--act-soft);
      font-family: var(--font-body);
      font-weight: 400;
    }

    .template-box .fill {
      border-radius: 0;
      background: var(--act-soft);
      color: var(--act-deep);
      border-bottom: 2px solid var(--act);
    }

    .chip {
      border-radius: 0;
      border: 2px solid var(--ink);
      background: var(--card);
      box-shadow: 3px 3px 0 rgba(20, 32, 60, 0.14);
    }

    .chip.on {
      background: var(--act-soft);
      border-color: var(--act);
      color: var(--act-deep);
    }

    .backup-tag {
      border-radius: 0;
      background: var(--ink);
      color: var(--paper);
    }

    /* ── กราฟแท่ง ── */
    .bar-chart .bc-bar {
      border-radius: 0;
      background: var(--act);
      border: 2px solid var(--ink);
      border-bottom: none;
      opacity: 1;
    }

    .bar-chart .bc-val {
      font-family: var(--font-mono);
      color: var(--ink);
    }

    .bar-chart .bc-lbl {
      font-family: var(--font-mono);
    }

    /* ── คำพูดยกมา ── */
    .quote-mark {
      font-family: var(--font-display);
      font-style: normal;
      color: var(--act);
      opacity: .35;
    }

    .quote-attr {
      font-family: var(--font-mono);
      font-size: 22px;
      letter-spacing: 0.06em;
      color: var(--muted);
    }

    /* ── หน้าสาธิต AI ── */
    .demo-field {
      border: 2.5px solid var(--ink);
      border-radius: 0;
      background: var(--card);
    }

    .demo-field:focus {
      border-color: var(--cobalt);
      box-shadow: 4px 4px 0 rgba(31, 73, 199, 0.25);
    }

    .demo-run-btn {
      background: var(--cobalt);
      color: #fff;
      border: 2.5px solid var(--ink);
      border-radius: 0;
      box-shadow: 6px 6px 0 var(--ink);
      font-family: var(--font-display);
      transition: transform .15s, box-shadow .15s;
    }

    .demo-run-btn:hover {
      background: var(--cobalt-deep);
      transform: translate(2px, 2px);
      box-shadow: 4px 4px 0 var(--ink);
    }

    .demo-note {
      background: var(--stone-card);
      border: 2px solid var(--ink);
      border-radius: 0;
    }

    .demo-output-panel {
      background: var(--card);
      border: 2.5px solid var(--ink);
      border-radius: 0;
      box-shadow: 8px 8px 0 rgba(20, 32, 60, 0.18);
    }

    .demo-round-label {
      font-family: var(--font-display);
      font-style: normal;
      font-weight: 600;
      color: var(--cobalt-deep);
    }

    .expert-card {
      background: var(--stone-card);
      border: 2px solid var(--ink);
      border-radius: 0;
    }

    .expert-card .exp-stance {
      border-radius: 0;
      background: rgba(30, 158, 106, 0.14);
      color: var(--green-deep);
      font-family: var(--font-mono);
      border: 1.5px solid var(--green);
    }

    .expert-card .exp-stance.shifted {
      background: rgba(199, 126, 0, 0.16);
      color: var(--amber-deep);
      border-color: var(--amber);
    }

    .feedback-box {
      background: rgba(31, 73, 199, 0.08);
      border-left: 6px solid var(--cobalt);
      border-radius: 0;
    }

    .convergence-box {
      background: rgba(30, 158, 106, 0.10);
      border-left: 6px solid var(--green);
      border-radius: 0;
    }

    .demo-error {
      color: var(--red-deep);
    }

    /* ── รายการอ้างอิง ── */
    .ref-list b {
      color: var(--ink);
    }

    /* ── ชุดควบคุมและปุ่มลอย ให้เข้ากับไวยากรณ์หมึกหนา ── */
    .deck-chrome {
      background: rgba(246, 244, 236, 0.94);
      border: 2px solid var(--ink);
      border-radius: 0;
      box-shadow: 3px 3px 0 rgba(20, 32, 60, 0.16);
    }

    .chrome-div {
      background: rgba(20, 32, 60, 0.18);
    }

    .nav-btn {
      border: 2px solid var(--ink);
      border-radius: 0;
      background: rgba(246, 244, 236, 0.95);
    }

    .nav-btn:hover {
      background: #fff;
      border-color: var(--cobalt);
    }

    .progress-fill {
      background: var(--cobalt);
    }

    .edit-toggle {
      border: 2px solid var(--ink);
      border-radius: 0;
      background: rgba(246, 244, 236, 0.96);
    }

    body.editing [data-editable] {
      outline: 2px dashed rgba(31, 73, 199, 0.5);
    }

    .key-hint {
      background: var(--ink);
      border-radius: 0;
      color: var(--paper);
    }

    .key-hint kbd {
      border-radius: 0;
      font-family: var(--font-mono);
    }

    .fab-settings,
    .fab-chat {
      border-radius: 0;
      border: 2px solid var(--ink);
    }

    .fab-settings:hover {
      background: var(--cobalt-deep);
    }

    .fab-chat {
      background: var(--cobalt);
    }

    .fab-chat:hover {
      background: var(--cobalt-deep);
    }

    /* แถบเส้นปิดท้ายหน้าปก แทนลาย meander ของผิวเดิม */
    .rule-strip {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 26px;
      height: 10px;
      border-top: 3px solid var(--ink);
      border-bottom: 1.5px solid rgba(20, 32, 60, 0.35);
      background: linear-gradient(90deg, var(--cobalt) 0 220px, transparent 220px);
    }

    /* ═══════════════════════════════════════════════════════════════
       UNIFIED SIDE CHROME v3  ชุดควบคุมขวาและปุ่มลอยซ้าย
       บล็อกนี้อยู่ท้ายสุดของ style จึงชนะทุกกฎก่อนหน้า
       ยกเว้นกฎในโหมดพิมพ์ซึ่งใช้ !important
       ═══════════════════════════════════════════════════════════════ */
    :root {
      --chrome-btn: 42px;
      --fab-size: 52px;
    }

    body.chrome-gutter {
      --chrome-btn: 46px;
    }

    /* ── ตัวนับหน้าในแถบข้าง ถูกยกเลิก เลขหน้าอยู่ที่แถบล่างของสไลด์แล้ว ── */
    .nav-counter {
      display: none !important;
    }

    /* ── กล่องชุดควบคุม โหมด dock ── */
    .deck-chrome {
      gap: 10px;
      padding: 5px 10px;
      background: rgba(246, 244, 236, 0.94);
      border: 2px solid var(--ink);
      border-radius: 0;
      box-shadow: 3px 3px 0 rgba(20, 32, 60, 0.16);
    }

    .nav-btns,
    .font-controls {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .chrome-div {
      background: rgba(20, 32, 60, 0.20);
    }

    /* ── ปุ่มในชุดควบคุม เหลี่ยมตามไวยากรณ์หมึกหนา ── */
    .nav-btn {
      width: var(--chrome-btn);
      height: var(--chrome-btn);
      min-width: 44px;
      min-height: 44px;
      padding: 0;
      border: 2px solid var(--ink);
      border-radius: 0;
      background: rgba(246, 244, 236, 0.95);
      color: var(--ink);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      text-decoration: none;
      transition: background 0.15s ease, border-color 0.15s ease;
    }

    .nav-btn:hover {
      background: #fff;
      border-color: var(--cobalt);
    }

    .nav-btn:disabled {
      opacity: .35;
      cursor: not-allowed;
    }

    .nav-btn svg {
      width: 22px;
      height: 22px;
    }

    /* ── ตัวเลขเปอร์เซ็นต์ขนาดอักษร เป็นปุ่มกดรีเซ็ตได้ ── */
    .font-controls .fs-pct {
      font-family: var(--font-mono);
      font-variant-numeric: tabular-nums;
      font-size: 14px;
      font-weight: 700;
      letter-spacing: 0;
      color: var(--ink);
      width: auto;
      min-width: 58px;
      padding: 0 8px;
      text-align: center;
    }

    /* ── โหมด gutter แถบตั้งด้านขวา ── */
    body.chrome-gutter .deck-chrome {
      left: auto;
      right: calc((var(--gutter-x) - var(--chrome-btn)) / 2);
      top: 0;
      bottom: 0;
      transform: none;
      flex-direction: column;
      justify-content: center;
      gap: 12px;
      padding: 0;
      background: none;
      border: none;
      border-radius: 0;
      box-shadow: none;
    }

    body.chrome-gutter .chrome-div {
      width: 100%;
      height: 2px;
      align-self: auto;
    }

    body.chrome-gutter .font-controls {
      flex-direction: column-reverse;
    }

    body.chrome-gutter .nav-btns {
      flex-direction: column;
    }

    body.chrome-gutter .font-controls .fs-pct {
      width: var(--chrome-btn);
      min-width: 0;
      padding: 0;
      font-size: 13px;
    }

    /* ── ปุ่มลอยด้านซ้าย ทรงกลม ── */
    .fab-settings,
    .fab-chat {
      position: fixed;
      z-index: 8000;
      width: var(--fab-size);
      height: var(--fab-size);
      padding: 0;
      border-radius: 50%;
      border: 2.5px solid var(--ink);
      box-shadow: 3px 3px 0 rgba(20, 32, 60, 0.28);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      line-height: 0;
      transform: none;
      transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
    }

    .fab-settings {
      left: 24px;
      right: auto;
      bottom: 24px;
      top: auto;
      background: var(--ink);
      color: var(--paper);
    }

    .fab-chat {
      left: auto;
      right: 24px;
      bottom: 24px;
      top: auto;
      background: var(--cobalt);
      color: #fff;
    }

    .fab-settings:hover,
    .fab-chat:hover {
      transform: translate(-1px, -1px);
      box-shadow: 5px 5px 0 rgba(20, 32, 60, 0.28);
      background: var(--cobalt-deep);
    }

    .fab-settings:focus-visible,
    .fab-chat:focus-visible {
      outline: 3px solid var(--cobalt);
      outline-offset: 3px;
    }

    .fab-settings svg,
    .fab-chat svg {
      width: 24px;
      height: 24px;
      display: block;
    }

    /* ── ปุ่มลอยในโหมด gutter เรียงตั้งกลางแถบซ้าย ── */
    body.chrome-gutter .fab-settings {
      left: calc((var(--gutter-x) - var(--fab-size)) / 2);
      right: auto;
      bottom: auto;
      top: calc(50% - var(--fab-size) - 6px);
      transform: none;
    }

    body.chrome-gutter .fab-chat {
      left: calc((var(--gutter-x) - var(--fab-size)) / 2);
      right: auto;
      bottom: auto;
      top: calc(50% + 6px);
      transform: none;
    }

    body.chrome-gutter .fab-settings:hover,
    body.chrome-gutter .fab-chat:hover {
      transform: translate(-1px, -1px);
    }


    /* ═══════════════════════════════════════════════════════════════
       UNIFIED API SETTINGS MODAL v3
       ผิวเดียวกันทั้ง 4 เด็ค กรอบหมึกหนา เงาทึบ ไม่มีมุมโค้ง
       แตะเฉพาะเปลือกและ CSS ไม่แตะ id ฟังก์ชัน หรือ API_PREFIX
       ═══════════════════════════════════════════════════════════════ */
    .api-modal-overlay {
      background: rgba(20, 32, 60, 0.68);
      backdrop-filter: blur(4px);
    }

    .api-modal-box {
      background: #fff;
      border: 3px solid var(--ink);
      border-radius: 0;
      box-shadow: 10px 10px 0 var(--ink);
      padding: 2rem;
      width: 90%;
      max-width: 500px;
      max-height: 90vh;
      overflow-y: auto;
      font-family: var(--font-body);
    }

    .api-modal-box h2 {
      font-family: var(--font-body);
      font-size: 1.2rem;
      font-weight: 700;
      color: var(--ink);
      margin: 0;
    }

    .api-modal-close {
      background: none;
      border: none;
      border-radius: 0;
      font-size: 1.5rem;
      line-height: 1;
      color: var(--muted);
      cursor: pointer;
      width: auto;
      height: auto;
      padding: 0 4px;
    }

    .api-modal-close:hover {
      color: var(--ink);
    }

    .api-field {
      margin-bottom: 1rem;
    }

    .api-field label {
      display: block;
      font-size: 0.85rem;
      font-weight: 600;
      color: #374151;
      margin-bottom: 0.35rem;
    }

    .api-field input,
    .api-field select {
      width: 100%;
      border: 2px solid var(--ink);
      border-radius: 0;
      padding: 0.55rem 0.75rem;
      font-size: 0.95rem;
      outline: none;
      box-sizing: border-box;
      font-family: var(--font-body);
      background: #fff;
      color: var(--ink);
      box-shadow: none;
    }

    .api-field input:focus,
    .api-field select:focus {
      border-color: var(--cobalt);
      box-shadow: 3px 3px 0 rgba(31, 73, 199, 0.20);
    }

    .api-save-btn {
      width: 100%;
      background: var(--green-deep);
      color: #fff;
      border: 2px solid var(--ink);
      border-radius: 0;
      box-shadow: 4px 4px 0 var(--ink);
      padding: 0.7rem;
      font-size: 1rem;
      font-weight: 700;
      cursor: pointer;
      margin-top: 0.5rem;
      font-family: var(--font-body);
      transition: transform 0.15s ease, box-shadow 0.15s ease;
    }

    .api-save-btn:hover {
      background: var(--green-deep);
      transform: translate(1px, 1px);
      box-shadow: 3px 3px 0 var(--ink);
    }

    .api-status {
      text-align: center;
      font-size: 0.85rem;
      color: var(--green-deep);
      margin-top: 0.5rem;
      min-height: 1.2rem;
    }

    .preset-btn {
      background: #eef1f6;
      border: 1.5px solid var(--ink);
      border-radius: 0;
      padding: 0.35rem 0.6rem;
      font-size: 0.8rem;
      cursor: pointer;
      text-align: left;
      font-family: var(--font-body);
      color: var(--ink);
      transition: background 0.15s ease;
    }

    .preset-btn:hover {
      background: #dde3ec;
    }

    /* ── หน้าต่างชวนตั้งค่าครั้งแรก มีเฉพาะบางเด็ค ── */
    .setup-overlay {
      background: rgba(20, 32, 60, 0.92);
    }

    .setup-card {
      background: #fff;
      border: 3px solid var(--ink);
      border-radius: 0;
      box-shadow: 10px 10px 0 rgba(20, 32, 60, 0.35);
      padding: 2.5rem;
      max-width: 420px;
      width: 90%;
      text-align: center;
      font-family: var(--font-body);
    }

    .setup-card h2 {
      font-family: var(--font-body);
      font-size: 1.2rem;
      font-weight: 700;
      color: var(--ink);
    }

    .setup-card p {
      color: var(--muted);
    }

    .setup-icon {
      color: var(--cobalt);
    }

    .setup-btn,
    .setup-go-btn {
      background: var(--cobalt);
      color: #fff;
      border: 2px solid var(--ink);
      border-radius: 0;
      box-shadow: 4px 4px 0 var(--ink);
      padding: 0.75rem 1.5rem;
      font-size: 1rem;
      font-weight: 700;
      cursor: pointer;
      width: 100%;
      font-family: var(--font-body);
    }


    /* ===========================================
       สีประจำองก์ของเด็คนี้ (DESIGN.md ส่วนที่ 2.3)
       ห้าองก์ สี่สีรองบวกสีหมึกสำหรับองก์สุดท้าย
       องก์ที่ 5 ใช้สีหมึกโดยตั้งใจ เพราะเป็นการสังเคราะห์กลับสู่แกนของเรื่อง
       ไม่ใช่หมวดที่เท่าเทียมกับอีกสี่หมวด จึงไม่ต้องเพิ่มโทเคนสีใหม่เข้าระบบ
       =========================================== */
    .slide[data-act="a1"] {
      --act: var(--cobalt);
      --act-deep: var(--cobalt-deep);
      --act-soft: rgba(31, 73, 199, 0.10);
      --act-line: rgba(31, 73, 199, 0.38);
    }

    .slide[data-act="a2"] {
      --act: var(--green);
      --act-deep: var(--green-deep);
      --act-soft: rgba(30, 158, 106, 0.10);
      --act-line: rgba(30, 158, 106, 0.38);
    }

    .slide[data-act="a3"] {
      --act: var(--amber);
      --act-deep: var(--amber-deep);
      --act-soft: rgba(199, 126, 0, 0.12);
      --act-line: rgba(199, 126, 0, 0.40);
    }

    .slide[data-act="a5"] {
      --act: var(--cobalt);
      --act-deep: var(--cobalt-deep);
      --act-soft: rgba(31, 73, 199, 0.10);
      --act-line: rgba(31, 73, 199, 0.38);
    }

    .slide[data-act="a4"] {
      --act: var(--red);
      --act-deep: var(--red-deep);
      --act-soft: rgba(232, 85, 90, 0.12);
      --act-line: rgba(232, 85, 90, 0.40);
    }

    .slide[data-act="a5"] {
      --act: var(--ink);
      --act-deep: var(--ink);
      --act-soft: rgba(20, 32, 60, 0.10);
      --act-line: rgba(20, 32, 60, 0.40);
    }

    /* แถบบอกตำแหน่งองก์ห้าช่อง ย่อช่องไฟลงเล็กน้อยให้พอดีแถวเดียว */
    .act-strip.five span {
      padding: 3px 9px;
    }

    /* กับดักที่หนึ่งของ DESIGN.md ส่วนที่ 11.2
       .reveal ใช้ translateY(28px) ก่อนหน้าจะปรากฏ ระยะนี้ถูกนับรวมใน scrollHeight
       ของ .slide-pad ที่เป็น flex กับ overflow hidden ทำให้ตรวจพบว่าล้นทั้งที่จริงไม่ล้น */
    .demo-pad .reveal {
      transform: none;
    }

    /* ===========================================
       หน้า Interactive ที่ไม่ใช้ปัญญาประดิษฐ์
       ใช้โครงเดียวกับหน้าสาธิต AI คือ flex เต็มความสูงและเลื่อนอ่านในกล่องตัวเอง
       แต่ไม่มีการเรียกเครือข่ายเลย จึงใช้บนเวทีได้แม้อินเทอร์เน็ตล่ม
       =========================================== */
    .ix-pad {
      display: flex;
      flex-direction: column;
      padding-top: 22px;
      padding-bottom: 8px;
      overflow: hidden;
    }

    .ix-pad .reveal {
      transform: none;
    }

    .ix-pad>* {
      flex: 0 0 auto;
    }

    .ix-fill {
      flex: 1 1 0;
      min-height: 0;
      display: flex;
      flex-direction: column;
      margin-top: 18px;
    }

    .kicker.ix {
      color: var(--card);
      background: var(--act-deep);
      border-color: var(--act-deep);
      box-shadow: 5px 5px 0 var(--act-soft);
    }

    .kicker.ix .glyph {
      background: var(--paper);
    }

    /* ── แบบฝึกจับคู่วัตถุประสงค์กับยุทธวิธี ── */
    .qz-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      margin-bottom: 14px;
      flex: 0 0 auto;
    }

    .qz-progress {
      font-family: var(--font-mono);
      font-size: 20px;
      font-weight: 700;
      letter-spacing: .06em;
      color: var(--muted);
    }

    .qz-score {
      font-family: var(--font-mono);
      font-size: 20px;
      font-weight: 700;
      color: var(--paper);
      background: var(--ink);
      border: 2px solid var(--ink);
      padding: 5px 14px;
    }

    .qz-stem {
      background: var(--card);
      border: 2.5px solid var(--ink);
      box-shadow: 8px 8px 0 rgba(20, 32, 60, 0.18);
      padding: 24px 28px;
      font-size: 29px;
      line-height: 1.48;
      color: var(--ink);
      flex: 0 0 auto;
    }

    .qz-choices {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 24px;
      margin-top: 22px;
      flex: 0 0 auto;
    }

    /* สามตัวเลือกเรียงแถวเดียว เพื่อคืนพื้นที่แนวตั้งให้กล่องเหตุผล */
    .qz-choices.three {
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
      margin-top: 16px;
    }

    .qz-choices.three .qz-btn {
      font-size: 26px;
      padding: 16px 12px;
      box-shadow: 5px 5px 0 rgba(20, 32, 60, 0.18);
      hyphens: none;
      overflow-wrap: break-word;
    }


    /* หกตัวเลือก เรียงสองแถวสามคอลัมน์ ให้พอดีกับหกกลุ่มยุทธวิธีของ Print */
    .qz-choices.six {
      grid-template-columns: repeat(3, 1fr);
      gap: 14px;
      margin-top: 16px;
    }

    .qz-choices.six .qz-btn {
      font-size: 23px;
      padding: 14px 10px;
      box-shadow: 5px 5px 0 rgba(20, 32, 60, 0.18);
      line-height: 1.22;
      hyphens: none;
      overflow-wrap: break-word;
    }

    .qz-choices.six .qz-btn .qz-en {
      display: block;
      font-family: var(--font-mono);
      font-size: 18px;
      font-weight: 700;
      letter-spacing: .04em;
      color: var(--ink-faint);
      margin-top: 4px;
    }

    .qz-choices.six .qz-btn.right .qz-en {
      color: var(--green-deep);
    }

    .qz-choices.six .qz-btn.wrong .qz-en {
      color: var(--red-deep);
    }

    .qz-btn {
      font-family: var(--font-display);
      font-weight: 600;
      font-size: 30px;
      color: var(--ink);
      background: var(--card);
      border: 2.5px solid var(--ink);
      box-shadow: 6px 6px 0 rgba(20, 32, 60, 0.18);
      padding: 20px 16px;
      cursor: pointer;
      transition: transform .14s, box-shadow .14s, background .14s;
    }

    .qz-btn:hover:not(:disabled) {
      transform: translate(2px, 2px);
      box-shadow: 4px 4px 0 rgba(20, 32, 60, 0.18);
      background: var(--act-soft);
    }

    .qz-btn:disabled {
      cursor: default;
    }

    .qz-btn.right {
      background: rgba(30, 158, 106, 0.18);
      border-color: var(--green);
      color: var(--green-deep);
    }

    .qz-btn.wrong {
      background: rgba(232, 85, 90, 0.16);
      border-color: var(--red);
      color: var(--red-deep);
    }

    .qz-feedback {
      margin-top: 20px;
      flex: 1 1 0;
      min-height: 0;
      overflow-y: auto;
      background: var(--card);
      border: 2.5px solid var(--ink);
      border-left: 10px solid var(--act);
      box-shadow: 6px 6px 0 rgba(20, 32, 60, 0.18);
      padding: 20px 26px;
      font-size: 24px;
      line-height: 1.5;
      color: var(--muted);
    }

    .qz-feedback b {
      color: var(--act-deep);
    }

    .qz-feedback .qz-verdict {
      font-family: var(--font-display);
      font-weight: 700;
      font-size: 27px;
      display: block;
      margin-bottom: 8px;
    }

    .qz-feedback.ok {
      border-left-color: var(--green);
    }

    .qz-feedback.ok .qz-verdict {
      color: var(--green-deep);
    }

    .qz-feedback.no {
      border-left-color: var(--red);
    }

    .qz-feedback.no .qz-verdict {
      color: var(--red-deep);
    }

    .qz-feedback .qz-idle {
      color: var(--ink-faint);
      text-align: center;
      display: block;
      padding: 18px 0;
    }

    .qz-nav {
      display: flex;
      gap: 14px;
      margin-top: 16px;
      flex: 0 0 auto;
    }

    .ix-btn {
      font-family: var(--font-display);
      font-weight: 600;
      font-size: 22px;
      color: #fff;
      background: var(--cobalt);
      border: 2.5px solid var(--ink);
      box-shadow: 5px 5px 0 var(--ink);
      padding: 11px 26px;
      cursor: pointer;
      transition: transform .14s, box-shadow .14s, background .14s;
    }

    .ix-btn:hover:not(:disabled) {
      background: var(--cobalt-deep);
      transform: translate(2px, 2px);
      box-shadow: 3px 3px 0 var(--ink);
    }

    .ix-btn.ghost {
      background: var(--card);
      color: var(--ink);
    }

    .ix-btn.ghost:hover:not(:disabled) {
      background: var(--act-soft);
    }

    .ix-btn:disabled {
      opacity: .4;
      cursor: not-allowed;
    }


    /* ── ภาพ 8.2 ฉบับปรับปรุง v2.4 ──
       ของเดิมใช้แถบเลื่อนเดียวแล้วอธิบายสามแกนด้วยข้อความ ซึ่งผู้ฟังต้องจินตนาการเอง
       ของใหม่ให้กดเลือกจุดโดยตรง แล้วให้สามแกนขยับให้เห็นจริง โดยเฉพาะแกนครูที่หดสวนทาง */
    .ax-wrap {
      display: flex;
      flex-direction: column;
      gap: 14px;
      flex: 1 1 0;
      min-height: 0;
    }

    .ax-stepper {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 10px;
      flex: 0 0 auto;
    }

    .ax-node {
      background: var(--card);
      border: 2.5px solid var(--ink);
      box-shadow: 4px 4px 0 rgba(20, 32, 60, .16);
      padding: 9px 10px;
      text-align: left;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      gap: 1px;
      font-family: var(--font-body);
      color: var(--ink);
      transition: transform .12s var(--ease), background .12s;
    }

    .ax-node:hover {
      transform: translate(-2px, -2px);
      box-shadow: 6px 6px 0 rgba(20, 32, 60, .22);
    }

    .ax-node.on {
      background: var(--cobalt);
      color: #fff;
      box-shadow: 4px 4px 0 var(--ink);
    }

    .ax-node .ax-no {
      font-family: var(--font-mono);
      font-size: 16px;
      color: var(--ink-faint);
    }

    .ax-node .ax-en {
      font-family: var(--font-mono);
      font-size: 17px;
      font-weight: 700;
      line-height: 1.15;
    }

    .ax-node .ax-th {
      font-size: 18px;
      line-height: 1.2;
      color: var(--muted);
    }

    .ax-node.on .ax-no,
    .ax-node.on .ax-th {
      color: rgba(255, 255, 255, .88);
    }

    .ax-meters {
      flex: 0 0 auto;
      border: 2.5px solid var(--ink);
      background: var(--card);
      box-shadow: 6px 6px 0 rgba(20, 32, 60, .16);
      padding: 13px 20px 11px;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .ax-row {
      display: grid;
      grid-template-columns: 260px 44px 1fr 44px;
      align-items: center;
      gap: 12px;
    }

    .ax-name {
      font-size: 19px;
      font-weight: 600;
      line-height: 1.18;
    }

    .ax-name em {
      display: block;
      font-family: var(--font-mono);
      font-size: 15px;
      font-style: normal;
      color: var(--ink-faint);
    }

    .ax-end {
      font-family: var(--font-mono);
      font-size: 16px;
      color: var(--ink-faint);
      text-align: center;
    }

    .ax-bar {
      display: block;
      height: 21px;
      border: 2.5px solid var(--ink);
      background: var(--paper);
      overflow: hidden;
    }

    .ax-fill {
      /* ต้องเป็น block เพราะ span แบบ inline จะไม่สนใจค่า width ที่ตั้งให้
         บั๊กนี้มองไม่เห็นใน jsdom ซึ่งไม่คำนวณเลย์เอาต์ ต้องเปิดในเบราว์เซอร์จริงจึงเจอ */
      display: block;
      height: 100%;
      width: 0;
      transition: width .45s var(--ease);
    }

    .ax-fill.a1 {
      background: var(--cobalt);
    }

    .ax-fill.a2 {
      background: var(--red);
    }

    .ax-fill.a3 {
      background: var(--green);
    }

    .ax-note {
      font-family: var(--font-mono);
      font-size: 16px;
      color: var(--ink-faint);
      line-height: 1.35;
      margin-top: 2px;
    }

    .ax-panes {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 18px;
      flex: 1 1 0;
      min-height: 0;
    }

    .ax-pane {
      border: 2.5px solid var(--ink);
      border-left: 10px solid var(--cobalt);
      background: var(--card);
      box-shadow: 6px 6px 0 rgba(20, 32, 60, .16);
      display: flex;
      flex-direction: column;
      min-height: 0;
    }

    .ax-pane.right {
      border-left-color: var(--green);
    }

    .ax-pane-head {
      flex: 0 0 auto;
      font-family: var(--font-mono);
      font-size: 17px;
      font-weight: 700;
      letter-spacing: .05em;
      padding: 9px 18px;
      border-bottom: 2.5px solid var(--ink);
      background: rgba(20, 32, 60, .05);
    }

    .ax-pane-body {
      flex: 1 1 0;
      min-height: 0;
      overflow-y: auto;
      padding: 14px 18px;
      font-size: 22px;
      line-height: 1.5;
      color: var(--ink);
    }

    .ax-pane-body b {
      color: var(--cobalt-deep);
    }

    .ax-cite {
      display: block;
      margin-top: 12px;
      font-family: var(--font-mono);
      font-size: 16px;
      color: var(--ink-faint);
    }


    /* ── การ์ดพลิกหลักการเรียนรู้ 12 ข้อของ Wheeler ── */
    .wc-bar {
      display: flex;
      align-items: center;
      gap: 14px;
      flex: 0 0 auto;
      margin-bottom: 14px;
    }

    .wc-count {
      font-family: var(--font-mono);
      font-size: 21px;
      font-weight: 700;
      letter-spacing: .06em;
      color: var(--muted);
      margin-left: auto;
    }

    .wc-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      grid-template-rows: repeat(3, 1fr);
      gap: 14px;
      flex: 1 1 0;
      min-height: 0;
    }

    .wc-cell {
      perspective: 1200px;
      min-height: 0;
    }

    .wc-card {
      position: relative;
      width: 100%;
      height: 100%;
      transform-style: preserve-3d;
      transition: transform .45s var(--ease-out-expo, ease);
      cursor: pointer;
      background: none;
      border: none;
      padding: 0;
      text-align: left;
      font-family: var(--font-body);
    }

    .wc-card.flipped {
      transform: rotateY(180deg);
    }

    .wc-face {
      position: absolute;
      inset: 0;
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
      border: 2.5px solid var(--ink);
      box-shadow: 5px 5px 0 rgba(20, 32, 60, 0.16);
      padding: 12px 14px;
      overflow-y: auto;
      display: flex;
      flex-direction: column;
    }

    .wc-front {
      background: var(--card);
    }

    .wc-back {
      background: var(--act-soft);
      transform: rotateY(180deg);
    }

    .wc-card.key .wc-front {
      background: var(--act-soft);
      border-color: var(--act);
      box-shadow: 5px 5px 0 var(--act-line);
    }

    .wc-no {
      font-family: var(--font-mono);
      font-size: 20px;
      font-weight: 700;
      letter-spacing: .08em;
      color: var(--act-deep);
      flex: 0 0 auto;
      margin-bottom: 5px;
    }

    .wc-front p {
      font-size: 19px;
      line-height: 1.36;
      color: var(--ink);
      margin: 0;
    }

    .wc-back .wc-strat {
      font-family: var(--font-display);
      font-weight: 700;
      font-size: 20px;
      line-height: 1.24;
      color: var(--ink);
      margin-bottom: 6px;
    }

    .wc-back p {
      font-size: 18px;
      line-height: 1.38;
      color: var(--muted);
      margin: 0;
    }

    .wc-themes {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 10px;
      flex: 0 0 auto;
      margin-top: 14px;
    }

    .wc-theme {
      border: 2px solid var(--ink);
      background: var(--card);
      padding: 9px 12px;
      font-size: 20px;
      line-height: 1.3;
      color: var(--muted);
    }

    .wc-theme b {
      display: block;
      font-family: var(--font-display);
      font-weight: 700;
      font-size: 21px;
      color: var(--act-deep);
      margin-bottom: 2px;
    }

    /* ── เครื่องกรองสี่ชั้น แปลงจากภาพ 8.3 ── */
    .pf-grid {
      display: grid;
      grid-template-columns: 0.82fr 1.18fr;
      gap: 30px;
      flex: 1 1 0;
      min-height: 0;
    }

    .pf-grid>* {
      min-height: 0;
      min-width: 0;
    }

    .pf-panel {
      display: flex;
      flex-direction: column;
      gap: 12px;
      overflow-y: auto;
      min-height: 0;
    }

    .pf-layer {
      border: 2.5px solid var(--ink);
      background: var(--card);
      box-shadow: 5px 5px 0 rgba(20, 32, 60, 0.16);
      padding: 12px 16px;
      flex: 0 0 auto;
    }

    .pf-layer-head {
      display: flex;
      align-items: baseline;
      gap: 10px;
      margin-bottom: 8px;
    }

    .pf-layer-no {
      font-family: var(--font-mono);
      font-size: 19px;
      font-weight: 700;
      letter-spacing: .08em;
      color: #fff;
      background: var(--act);
      border: 2px solid var(--ink);
      padding: 1px 8px;
      flex: none;
    }

    .pf-layer-name {
      font-family: var(--font-display);
      font-weight: 700;
      font-size: 21px;
      color: var(--ink);
      line-height: 1.15;
    }

    .pf-layer-en {
      font-family: var(--font-mono);
      font-size: 18px;
      letter-spacing: .04em;
      color: var(--ink-faint);
      margin-left: auto;
    }

    .pf-opts {
      display: flex;
      flex-wrap: wrap;
      gap: 7px;
    }

    .pf-opt {
      font-family: var(--font-body);
      font-size: 21px;
      line-height: 1.2;
      color: var(--ink);
      background: var(--paper);
      border: 2px solid var(--ink);
      padding: 6px 11px;
      cursor: pointer;
      transition: background .14s, color .14s;
    }

    .pf-opt:hover {
      background: var(--act-soft);
    }

    .pf-opt.on {
      background: var(--act);
      border-color: var(--act);
      color: #fff;
      font-weight: 600;
    }

    .pf-stage {
      display: flex;
      flex-direction: column;
      min-height: 0;
    }

    .pf-strats {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 14px;
      flex: 0 0 auto;
    }

    .pf-strat {
      position: relative;
      border: 2.5px solid var(--ink);
      background: var(--card);
      box-shadow: 5px 5px 0 rgba(20, 32, 60, 0.16);
      padding: 12px 14px;
      min-height: 118px;
      transition: opacity .35s ease, transform .35s ease, background .25s ease;
    }

    .pf-strat .pf-sname {
      font-family: var(--font-display);
      font-weight: 700;
      font-size: 21px;
      line-height: 1.16;
      color: var(--ink);
    }

    .pf-strat .pf-sen {
      font-family: var(--font-mono);
      font-size: 18px;
      letter-spacing: .03em;
      color: var(--ink-faint);
      margin-top: 3px;
    }

    .pf-strat .pf-why {
      font-size: 20px;
      line-height: 1.34;
      color: var(--muted);
      margin-top: 8px;
    }

    .pf-strat.pass {
      background: rgba(30, 158, 106, 0.14);
      border-color: var(--green);
      box-shadow: 5px 5px 0 rgba(30, 158, 106, 0.35);
    }

    .pf-strat.pass .pf-sname {
      color: var(--green-deep);
    }

    .pf-strat.pass .pf-why {
      color: var(--green-deep);
    }

    .pf-strat.out {
      opacity: .34;
      transform: translateY(10px);
      background: rgba(20, 32, 60, 0.05);
    }

    .pf-strat.out .pf-why {
      color: var(--red-deep);
      font-weight: 600;
    }

    .pf-cut {
      position: absolute;
      top: 10px;
      right: 12px;
      font-family: var(--font-mono);
      font-size: 17px;
      font-weight: 700;
      letter-spacing: .06em;
      border: 2px solid var(--red);
      background: rgba(232, 85, 90, 0.16);
      color: var(--red-deep);
      padding: 1px 7px;
    }

    .pf-strat.pass .pf-cut {
      border-color: var(--green);
      background: rgba(30, 158, 106, 0.20);
      color: var(--green-deep);
    }

    .pf-summary {
      flex: 1 1 0;
      min-height: 0;
      overflow-y: auto;
      margin-top: 16px;
      background: var(--card);
      border: 2.5px solid var(--ink);
      border-left: 10px solid var(--act);
      box-shadow: 6px 6px 0 rgba(20, 32, 60, 0.18);
      padding: 16px 22px;
      font-size: 23px;
      line-height: 1.48;
      color: var(--muted);
    }

    .pf-summary b {
      color: var(--act-deep);
    }

    .pf-summary .pf-step {
      display: block;
      margin-top: 8px;
    }

    .pf-summary .pf-step:first-child {
      margin-top: 0;
    }

    .pf-summary .pf-cite {
      display: block;
      margin-top: 12px;
      font-family: var(--font-mono);
      font-size: 19px;
      letter-spacing: .04em;
      color: var(--ink-faint);
    }

    .pf-actions {
      display: flex;
      gap: 12px;
      align-items: center;
      flex: 0 0 auto;
      margin-top: 12px;
    }

    /* ── ตารางหกกลุ่มยุทธวิธี ใช้ในหน้าสรุปและภาคผนวก ── */
    .fam-tag {
      font-family: var(--font-mono);
      font-size: 15px;
      font-weight: 700;
      letter-spacing: .04em;
      border: 2px solid var(--ink);
      padding: 1px 7px;
      white-space: nowrap;
    }

    .fam-tag.t-eff {
      background: rgba(31, 73, 199, 0.12);
      color: var(--cobalt-deep);
      border-color: var(--cobalt);
    }

    .fam-tag.t-lrn {
      background: rgba(30, 158, 106, 0.16);
      color: var(--green-deep);
      border-color: var(--green);
    }

    .fam-tag.t-mix {
      background: rgba(199, 126, 0, 0.16);
      color: var(--amber-deep);
      border-color: var(--amber);
    }

    /* ── ผังสามแกนของภาพ 8.2 ใช้ในหน้าเนื้อหาปกติด้วย ── */
    .axis-row {
      display: grid;
      grid-template-columns: auto 1fr auto;
      align-items: center;
      gap: 18px;
      border: 2px solid var(--ink);
      background: var(--card);
      padding: 10px 16px;
      margin-bottom: 10px;
    }

    .axis-row .axis-end {
      font-family: var(--font-mono);
      font-size: 18px;
      font-weight: 700;
      letter-spacing: .03em;
      color: var(--ink);
      white-space: nowrap;
    }

    .axis-row .axis-line {
      height: 3px;
      background: linear-gradient(90deg, var(--act-line), var(--act));
    }

    /* ===========================================
       องค์ประกอบเฉพาะของเด็คแปล (DESIGN.md v2.3)
       1) .src-locator แถบระบุตำแหน่งในหนังสือ
       2) .bi บล็อกคู่ภาษา ต้นฉบับกับคำแปล
       3) .bi-gloss กล่องเรียบเรียงไทยของส่วนที่เหลือ
       ทุกชิ้นออกแบบให้รอดที่ขนาดอักษร 130% โดยให้กล่องเลื่อนในตัวเอง
       =========================================== */

    /* ── หน้าเนื้อหาของเด็คแปล ใช้ flex เต็มความสูงเหมือนหน้ากิจกรรม ── */
    .tr-pad {
      display: flex;
      flex-direction: column;
      padding-top: 22px;
      padding-bottom: 8px;
      overflow: hidden;
    }

    .tr-pad .reveal {
      transform: none;
    }

    .tr-pad>* {
      flex: 0 0 auto;
    }

    /* ── แถบระบุตำแหน่งในหนังสือ ── */
    .src-locator {
      display: flex;
      flex-wrap: wrap;
      align-items: stretch;
      border: 2.5px solid var(--ink);
      background: var(--card);
      box-shadow: 5px 5px 0 var(--act-soft);
      margin-top: 14px;
      flex: 0 0 auto;
    }

    .src-locator .sl-seg {
      display: flex;
      align-items: baseline;
      gap: 9px;
      padding: 9px 18px;
      border-right: 2px solid var(--ink);
      font-family: var(--font-mono);
      font-size: 20px;
      color: var(--ink);
      white-space: nowrap;
    }

    .src-locator .sl-seg:last-child {
      border-right: none;
      flex: 1 1 auto;
      white-space: normal;
      min-width: 0;
    }

    .src-locator .sl-key {
      font-size: 17px;
      font-weight: 700;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--act-deep);
    }

    .src-locator .sl-val {
      font-weight: 700;
      font-variant-numeric: tabular-nums;
    }

    .src-locator .sl-seg.sl-head {
      background: var(--act);
      color: #fff;
      font-weight: 700;
    }

    .src-locator .sl-seg.sl-head .sl-key {
      color: rgba(255, 255, 255, 0.82);
    }

    /* ── บล็อกคู่ภาษา ── */
    .bi {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 26px;
      margin-top: 18px;
      flex: 1 1 0;
      min-height: 0;
    }

    .bi.stack {
      grid-template-columns: 1fr;
    }

    .bi>* {
      min-width: 0;
      min-height: 0;
    }

    .bi-col {
      display: flex;
      flex-direction: column;
      background: var(--card);
      border: 2.5px solid var(--ink);
      box-shadow: 6px 6px 0 rgba(20, 32, 60, 0.18);
      min-height: 0;
      overflow: hidden;
    }

    .bi-label {
      flex: 0 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 9px 18px;
      font-family: var(--font-mono);
      font-size: 18px;
      font-weight: 700;
      letter-spacing: .16em;
      text-transform: uppercase;
      border-bottom: 2.5px solid var(--ink);
    }

    .bi-col.en .bi-label {
      background: var(--ink);
      color: var(--paper);
    }

    .bi-col.th .bi-label {
      background: var(--act);
      color: #fff;
    }

    .bi-label .bi-page {
      font-size: 17px;
      letter-spacing: .06em;
      font-variant-numeric: tabular-nums;
      opacity: .86;
    }

    .bi-body {
      flex: 1 1 0;
      min-height: 0;
      overflow-y: auto;
      padding: 18px 22px;
    }

    /* ต้นฉบับภาษาอังกฤษ ใช้ฟอนต์เนื้อความเพราะมีชุดอักขระละตินครบ
       และเว้นบรรทัดกว้างกว่าปกติเล็กน้อยเพื่อให้อ่านออกจากแถวหลัง */
    .bi-col.en .bi-body {
      font-family: var(--font-body);
      font-size: 24px;
      line-height: 1.58;
      color: var(--ink);
    }

    .bi-col.en .bi-body p+p {
      margin-top: 12px;
    }

    .bi-col.en .bi-body b {
      font-weight: 600;
      background: var(--act-soft);
      box-shadow: 0 -2px 0 var(--act-line) inset;
    }

    .bi-col.th .bi-body {
      font-family: var(--font-body);
      font-size: 26px;
      line-height: 1.62;
      color: var(--ink);
    }

    .bi-col.th .bi-body p+p {
      margin-top: 12px;
    }

    .bi-col.th .bi-body b {
      color: var(--act-deep);
      font-weight: 600;
    }

    /* รายการเลขข้อในบล็อกคู่ภาษา ใช้กับสี่ขั้นของ inquiry และหกกลุ่มยุทธวิธี */
    .bi-body ol.bi-list {
      list-style: none;
      counter-reset: bil;
      display: flex;
      flex-direction: column;
      gap: 9px;
      margin-top: 8px;
    }

    .bi-body ol.bi-list li {
      counter-increment: bil;
      position: relative;
      padding-left: 34px;
    }

    .bi-body ol.bi-list li::before {
      content: counter(bil);
      position: absolute;
      left: 0;
      top: 2px;
      width: 24px;
      height: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--font-mono);
      font-size: 17px;
      font-weight: 700;
      color: #fff;
      background: var(--act);
      border: 2px solid var(--ink);
    }

    .bi-col.en .bi-body ol.bi-list li::before {
      background: var(--ink);
    }

    /* ── กล่องเรียบเรียงไทยของสาระส่วนที่เหลือ ── */
    .bi-gloss {
      flex: 0 0 auto;
      margin-top: 16px;
      background: var(--card);
      border: 2.5px solid var(--ink);
      border-left: 10px solid var(--act);
      box-shadow: 6px 6px 0 rgba(20, 32, 60, 0.18);
      padding: 15px 22px;
      font-size: 24px;
      line-height: 1.55;
      color: var(--muted);
      max-height: 240px;
      overflow-y: auto;
    }

    .bi-gloss b {
      color: var(--act-deep);
    }

    .bi-gloss .gloss-tag {
      display: inline-block;
      font-family: var(--font-mono);
      font-size: 17px;
      font-weight: 700;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--act-deep);
      border: 2px solid var(--act);
      background: var(--act-soft);
      padding: 1px 9px;
      margin-right: 10px;
      vertical-align: 2px;
    }

    /* ── หัวเรื่องประจำหน้าของเด็คแปล มีชื่ออังกฤษกำกับใต้ชื่อไทย ── */
    .tr-title {
      flex: 0 0 auto;
      margin-top: 12px;
      margin-bottom: 0;
    }

    .tr-title .tr-en {
      display: block;
      font-family: var(--font-mono);
      font-size: 22px;
      font-weight: 500;
      letter-spacing: .04em;
      color: var(--ink-faint);
      margin-top: 5px;
      text-transform: none;
    }

    /* ── ป้ายบอกว่าหน้านี้เป็นคำเรียบเรียง ไม่ใช่คำแปลตรงตัว ── */
    .para-note {
      font-family: var(--font-mono);
      font-size: 16px;
      letter-spacing: .04em;
      color: var(--ink-faint);
      margin-top: 8px;
      flex: 0 0 auto;
    }

    /* ── การ์ด Wheeler ฉบับสองภาษา ปรับจากการ์ดเดิม ── */
    .wc-card .wc-en {
      font-size: 18px;
      line-height: 1.34;
      color: var(--ink);
      margin: 0;
    }

    .wc-card .wc-th {
      font-size: 19px;
      line-height: 1.38;
      color: var(--ink);
      margin: 0;
    }

    .wc-card .wc-note {
      font-size: 16px;
      line-height: 1.34;
      color: var(--muted);
      margin-top: 7px;
      padding-top: 7px;
      border-top: 2px solid var(--act-line);
    }

    /* ===========================================
       ผลลัพธ์ของหน้าสาธิต AI
       =========================================== */
    .oi-lead {
      font-size: 21px;
      line-height: 1.55;
      color: var(--muted);
      border-left: 8px solid var(--act);
      padding-left: 16px;
      margin-bottom: 20px;
    }

    .oi-card {
      background: var(--card);
      border: 2.5px solid var(--ink);
      box-shadow: 5px 5px 0 rgba(20, 32, 60, 0.16);
      padding: 18px 20px;
      margin-bottom: 18px;
    }

    .oi-card .oi-name {
      font-family: var(--font-display);
      font-weight: 700;
      font-size: 25px;
      color: var(--ink);
      line-height: 1.25;
      margin-bottom: 10px;
      display: flex;
      align-items: baseline;
      gap: 10px;
      flex-wrap: wrap;
    }

    .oi-card .oi-tag {
      font-family: var(--font-mono);
      font-size: 15px;
      font-weight: 700;
      letter-spacing: .06em;
      border: 2px solid var(--ink);
      padding: 2px 8px;
      white-space: nowrap;
    }

    .oi-tag.t-viv {
      background: rgba(31, 73, 199, 0.12);
      color: var(--cobalt-deep);
      border-color: var(--cobalt);
    }

    .oi-tag.t-nism {
      background: rgba(30, 158, 106, 0.16);
      color: var(--green-deep);
      border-color: var(--green);
    }

    .oi-tag.t-both {
      background: rgba(199, 126, 0, 0.16);
      color: var(--amber-deep);
      border-color: var(--amber);
    }

    .oi-card .oi-field {
      font-size: 20px;
      line-height: 1.5;
      color: var(--muted);
      margin-bottom: 8px;
    }

    .oi-card .oi-field b {
      font-family: var(--font-mono);
      font-size: 16px;
      letter-spacing: 0.06em;
      color: var(--act-deep);
      display: block;
      margin-bottom: 2px;
    }

    .oi-card .oi-lock {
      margin-top: 12px;
      border-top: 2px solid rgba(20, 32, 60, 0.14);
      padding-top: 10px;
      font-size: 20px;
      line-height: 1.5;
      color: var(--ink);
    }

    .oi-card .oi-lock b {
      color: var(--red-deep);
    }

    .oi-close {
      background: var(--act-soft);
      border: 2px solid var(--act);
      padding: 16px 20px;
      font-size: 21px;
      line-height: 1.55;
      color: var(--ink);
    }

    .oi-close b {
      color: var(--act-deep);
    }

    /* ===========================================
       ผู้ช่วยถาม-ตอบประจำเด็ค สเปกกลาง (DESIGN.md v2.2 ส่วนที่ 12)
       บล็อกนี้เหมือนกันทุกตัวอักษรในทุกชุดสไลด์ของคลัง
       วางไว้ท้ายสุดของบล็อกสไตล์เสมอ เพื่อเขียนทับกฎเดิมของแต่ละชุดด้วยลำดับที่มาทีหลัง
       ใช้เฉพาะโทเคนที่มีครบทุกชุด จึงย้ายข้ามเด็คได้โดยไม่ต้องแก้อะไร
       =========================================== */

    /* ── ปุ่มแชตตรึงมุมล่างขวาเสมอ ──
       เดิมโหมด gutter ย้ายปุ่มลอยทั้งสองไปเรียงกลางขอบว่างฝั่งซ้าย
       แต่หน้าต่างแชตยึดมุมล่างขวา ปุ่มกับหน้าต่างจึงแยกกันคนละฝั่งจอ
       จึงตรึงเฉพาะปุ่มแชตไว้ที่เดิม ส่วนปุ่มฟันเฟืองยังย้ายไปซ้ายตาม DESIGN.md
       และถูกจัดกึ่งกลางแนวตั้งใหม่ เพราะไม่มีปุ่มแชตมาต่อท้ายให้เว้นที่อีกแล้ว */
    body.chrome-gutter .fab-chat {
      left: auto;
      right: calc(var(--gutter-x) + 24px);
      top: auto;
      bottom: 24px;
      transform: none;
    }

    body.chrome-gutter .fab-chat:hover {
      transform: translate(-1px, -1px);
    }

    body.chrome-gutter .fab-settings {
      top: calc(50% - (var(--fab-size) / 2));
    }

    /* ── ตัวหน้าต่าง ── */
    .chat-panel {
      position: fixed;
      left: auto;
      top: auto;
      right: calc(var(--gutter-x) + 24px);
      bottom: 88px;
      /* ขอบขวาวัดจากขอบกระดาษสไลด์ ไม่ใช่ขอบจอ ในโหมด dock ค่า --gutter-x เป็น 0
         จึงเท่ากับ 24px ตามปกติ ส่วนโหมด gutter จะถอยเข้ามาให้พ้นคอลัมน์ชุดควบคุม
         ที่ไปเรียงอยู่ในขอบว่างฝั่งขวา ปุ่มแชตถอยตามด้วยระยะเดียวกัน จึงยังอยู่ติดกันเสมอ
         ระยะล่าง 88 = 24 ขอบล่าง บวก 52 ความสูงปุ่มลอย บวก 12 ช่องไฟ */
      z-index: 7999;
      width: min(440px, calc(100vw - 48px));
      height: min(620px, calc(100vh - 112px));
      background: var(--stone-card);
      border: 2px solid var(--ink);
      border-radius: 0;
      box-shadow: 8px 8px 0 rgba(20, 32, 60, 0.22);
      display: flex;
      flex-direction: column;
      overflow: hidden;
      opacity: 0;
      transform: translateY(16px) scale(.97);
      pointer-events: none;
      transition: opacity .25s var(--ease), transform .25s var(--ease);
    }

    body.chrome-gutter .chat-panel {
      left: auto;
      right: calc(var(--gutter-x) + 24px);
      bottom: 88px;
    }

    .chat-panel.show {
      opacity: 1;
      transform: translateY(0) scale(1);
      pointer-events: auto;
    }

    /* ── แถบหัวหน้าต่าง พื้นหมึก ตัวอักษรสีกระดาษ ── */
    .chat-panel-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 10px;
      padding: 16px 16px 13px;
      border-bottom: 2px solid var(--ink);
      background: var(--ink);
      color: var(--paper);
      flex-shrink: 0;
    }

    .chat-panel-title {
      font-family: var(--font-display);
      font-weight: 600;
      font-size: 17px;
      line-height: 1.3;
      color: var(--paper);
    }

    /* สองกฎนี้คือจุดที่เคยพลาด เดิมสองชุดใช้ var(--stone-line) ซึ่งเป็นหมึกโปร่งแสง
       วางบนพื้นหมึกจึงกลายเป็นล่องหน ต้องใช้สีกระดาษโปร่งแสงเท่านั้น */
    .chat-panel-sub {
      font-family: var(--font-body);
      font-size: 12px;
      color: rgba(246, 244, 236, 0.72);
      margin-top: 3px;
    }

    .chat-header-btn {
      background: none;
      border: none;
      color: rgba(246, 244, 236, 0.72);
      cursor: pointer;
      padding: 5px;
      border-radius: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: color .2s, background .2s;
    }

    .chat-header-btn:hover {
      color: var(--paper);
      background: rgba(246, 244, 236, .14);
    }

    .chat-header-btn svg {
      width: 17px;
      height: 17px;
    }

    .chat-panel-actions {
      display: flex;
      gap: 4px;
      align-items: center;
      flex-shrink: 0;
    }

    .chat-panel-close {
      background: none;
      border: none;
      color: var(--paper);
      font-size: 22px;
      line-height: 1;
      cursor: pointer;
      padding: 2px 6px;
      border-radius: 0;
    }

    .chat-panel-close:hover {
      background: rgba(246, 244, 236, .14);
    }

    /* ── พื้นที่ข้อความ ── */
    .chat-messages {
      flex: 1;
      min-height: 0;
      overflow-y: auto;
      padding: 16px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      font-family: var(--font-body);
      font-size: 14.5px;
      line-height: 1.55;
    }

    .chat-msg {
      max-width: 88%;
      padding: 10px 13px;
      border-radius: 0;
      white-space: pre-wrap;
    }

    .chat-msg.bot {
      align-self: flex-start;
      background: rgba(31, 73, 199, 0.10);
      color: var(--ink);
      border-left: 3px solid var(--cobalt);
    }

    .chat-msg.user {
      align-self: flex-end;
      background: var(--ink);
      color: var(--paper);
      border-left: none;
    }

    .chat-msg.error {
      align-self: flex-start;
      background: rgba(232, 85, 90, .14);
      color: var(--danger);
      border-left: 3px solid #E8555A;
      border-bottom-left-radius: 0;
    }

    /* ── ชิปคำถามชวนเริ่ม ── */
    .chat-chips {
      display: flex;
      flex-direction: column;
      gap: 6px;
      align-self: flex-start;
      max-width: 92%;
    }

    .chat-chip {
      text-align: left;
      background: var(--paper);
      border: 1.5px solid var(--stone-line);
      border-radius: 0;
      color: var(--ink);
      font-family: var(--font-body);
      font-size: 13px;
      padding: 9px 13px;
      cursor: pointer;
      transition: border-color .2s, background .2s;
    }

    .chat-chip:hover {
      border-color: var(--cobalt);
      background: rgba(31, 73, 199, 0.10);
    }

    /* ── ปุ่มคัดลอกและถามใหม่ ── */
    .chat-copy-btn,
    .chat-regenerate-btn {
      border-radius: 0;
      font-family: var(--font-body);
    }

    .chat-regenerate-btn {
      border: 1.5px solid var(--stone-line);
    }

    .chat-regenerate-btn:hover {
      border-color: var(--cobalt);
      color: var(--cobalt-deep);
    }

    /* ── แถวช่องพิมพ์ ── */
    .chat-input-row {
      display: flex;
      gap: 8px;
      padding: 12px;
      border-top: 2px solid var(--ink);
      background: var(--stone-card);
      flex-shrink: 0;
    }

    .chat-input {
      flex: 1;
      resize: none;
      max-height: 90px;
      padding: 10px 12px;
      border: 2px solid var(--ink);
      border-radius: 0;
      font-family: var(--font-body);
      font-size: 14px;
      color: var(--ink);
      background: #fff;
      outline: none;
    }

    .chat-input:focus {
      border-color: var(--cobalt);
      box-shadow: 3px 3px 0 rgba(31, 73, 199, 0.20);
    }

    .chat-send-btn {
      width: 44px;
      height: 44px;
      border: 2px solid var(--ink);
      border-radius: 0;
      background: var(--cobalt);
      color: #fff;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: background .2s;
    }

    .chat-send-btn:hover {
      background: var(--cobalt-deep);
    }

    .chat-send-btn:disabled {
      opacity: .5;
      cursor: not-allowed;
    }

    /* ── จอแคบ ── */
    @media (max-width: 560px) {

      .chat-panel,
      body.chrome-gutter .chat-panel {
        right: 12px;
        bottom: 80px;
        width: calc(100vw - 24px);
        height: min(620px, calc(100vh - 104px));
      }

      body.chrome-gutter .fab-chat {
        right: 12px;
        bottom: 12px;
      }
    }

    /* ── โหมดสลับชุดคำถาม และแถบสร้างข้อสอบด้วยปัญญาประดิษฐ์ ── */
    .qz-mode-row {
      display: flex;
      gap: 10px;
      margin-bottom: 10px;
    }

    .qz-mode-btn {
      font-family: var(--font-display);
      font-size: 20px;
      font-weight: 600;
      padding: 8px 18px;
      border: 2.5px solid var(--ink);
      background: var(--card);
      color: var(--muted);
      cursor: pointer;
      box-shadow: 4px 4px 0 rgba(20, 32, 60, 0.16);
      transition: background 0.16s, color 0.16s;
    }

    .qz-mode-btn.on {
      background: var(--act-deep);
      border-color: var(--ink);
      color: var(--paper);
    }

    .qz-genbar {
      display: flex;
      gap: 10px;
      margin-bottom: 10px;
      align-items: stretch;
    }

    .qz-gen-input {
      flex: 1;
      font-family: var(--font-body);
      font-size: 20px;
      padding: 10px 14px;
      border: 2.5px solid var(--ink);
      background: var(--card);
      color: var(--ink);
      outline: none;
    }

    .qz-gen-input:focus {
      box-shadow: 4px 4px 0 var(--act-soft);
    }

    .qz-gen-note {
      font-family: var(--font-body);
      font-size: 18px;
      color: var(--muted);
      margin-bottom: 8px;
    }

    .qz-gen-note.err {
      color: var(--red-deep);
      font-weight: 600;
    }

    /* ว่างเมื่อใด ให้ยุบพื้นที่ทิ้ง จะได้ไม่กินความสูงของกล่องเหตุผล */
    .qz-gen-note:empty {
      display: none;
    }

    /* ── ตัวเลือกโหมดของผู้ช่วยถามตอบ ── */
    .chat-ctx-row {
      display: flex;
      gap: 8px;
      padding: 10px 18px 0;
      flex-wrap: wrap;
      align-items: center;
    }

    .chat-ctx-btn {
      font-family: inherit;
      font-size: 12.5px;
      font-weight: 600;
      padding: 5px 12px;
      border: 1.5px solid #cbd5e1;
      border-radius: 0;
      background: #fff;
      color: #64748b;
      cursor: pointer;
      transition: all 0.15s;
    }

    .chat-ctx-btn.on {
      background: #1F49C7;
      border-color: #1F49C7;
      color: #fff;
    }

    .chat-ctx-here {
      font-size: 12px;
      color: #94a3b8;
      margin-left: 2px;
      max-width: 100%;
    }

    /* ── ป้ายกำกับแหล่งนอกวรรณกรรมที่อาจารย์กำหนด และลิงก์ต้นฉบับ ── */
    .src-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-family: var(--font-mono);
      font-size: 16px;
      font-weight: 700;
      letter-spacing: 0.04em;
      color: var(--paper);
      background: var(--amber-deep);
      border: 2.5px solid var(--ink);
      padding: 5px 14px;
      margin-left: 14px;
      box-shadow: 4px 4px 0 rgba(20, 32, 60, 0.2);
    }

    .src-badge::before {
      content: "!";
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 18px;
      height: 18px;
      background: var(--paper);
      color: var(--amber-deep);
      font-weight: 700;
      flex: 0 0 auto;
    }

    .src-link {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-family: var(--font-mono);
      font-size: 0.8em;
      font-weight: 700;
      color: var(--cobalt-deep);
      background: rgba(31, 73, 199, 0.08);
      border: 1.5px solid var(--cobalt-deep);
      padding: 2px 9px;
      text-decoration: none;
      white-space: nowrap;
      cursor: pointer;
      transition: background .16s, color .16s;
    }

    /* ลูกศรทแยง บอกให้รู้ว่าลิงก์นี้เปิดในแท็บใหม่ */
    .src-link::after {
      content: "\2197";
      font-size: 1.05em;
      line-height: 1;
    }

    .src-link:hover,
    .src-link:focus-visible {
      background: var(--cobalt-deep);
      color: var(--paper);
    }

    .src-link:focus-visible {
      outline: 3px solid var(--amber);
      outline-offset: 2px;
    }

    /* ===========================================
       โมดัลกลางจอที่ใช้ร่วมกันทั้งเด็ค (DESIGN.md v2.4)
       ต้องวางไว้นอก .deck-stage เหมือนปุ่มลอย เพราะ element ที่มี transform
       จะกลายเป็น containing block ของลูกหลานที่เป็น position fixed
       =========================================== */
    .dk-modal-overlay {
      position: fixed;
      inset: 0;
      z-index: 4000;
      display: none;
      align-items: center;
      justify-content: center;
      background: rgba(20, 32, 60, 0.55);
      padding: 40px;
    }

    .dk-modal-overlay.show {
      display: flex;
    }

    .dk-modal-box {
      width: min(1180px, 94vw);
      max-height: 86vh;
      display: flex;
      flex-direction: column;
      background: var(--paper);
      border: 3px solid var(--ink);
      box-shadow: 14px 14px 0 rgba(20, 32, 60, 0.35);
    }

    .dk-modal-head {
      flex: 0 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 16px 26px;
      background: var(--ink);
      color: var(--paper);
      border-bottom: 3px solid var(--ink);
    }

    .dk-modal-head .dk-modal-title {
      font-family: var(--font-display);
      font-weight: 700;
      font-size: 26px;
      line-height: 1.2;
    }

    .dk-modal-head .dk-modal-src {
      font-family: var(--font-mono);
      font-size: 15px;
      letter-spacing: .06em;
      color: rgba(246, 244, 236, 0.78);
      margin-top: 4px;
    }

    .dk-modal-actions {
      display: flex;
      align-items: center;
      gap: 10px;
      flex: none;
    }

    .dk-modal-btn {
      font-family: var(--font-mono);
      font-size: 15px;
      font-weight: 700;
      letter-spacing: .06em;
      color: var(--paper);
      background: transparent;
      border: 2px solid rgba(246, 244, 236, 0.55);
      padding: 7px 14px;
      cursor: pointer;
      transition: background .15s, border-color .15s;
    }

    .dk-modal-btn:hover:not(:disabled) {
      background: rgba(246, 244, 236, 0.14);
      border-color: var(--paper);
    }

    .dk-modal-btn:disabled {
      opacity: .35;
      cursor: not-allowed;
    }

    .dk-modal-close {
      font-family: var(--font-display);
      font-size: 26px;
      line-height: 1;
      color: var(--paper);
      background: transparent;
      border: 2px solid rgba(246, 244, 236, 0.55);
      width: 40px;
      height: 40px;
      cursor: pointer;
    }

    .dk-modal-close:hover {
      background: rgba(246, 244, 236, 0.14);
    }

    .dk-modal-body {
      flex: 1 1 auto;
      min-height: 0;
      overflow-y: auto;
      padding: 26px 30px 30px;
    }

    .dk-modal-foot {
      flex: 0 0 auto;
      padding: 12px 26px;
      border-top: 2px solid var(--stone-line, rgba(20, 32, 60, .22));
      font-family: var(--font-mono);
      font-size: 15px;
      letter-spacing: .04em;
      color: var(--ink-faint, #7a8296);
      display: flex;
      justify-content: space-between;
      gap: 14px;
    }

    /* ── บล็อกเนื้อหามาตรฐานภายในโมดัล ── */
    .dkm-en {
      font-family: var(--font-body);
      font-size: 34px;
      line-height: 1.42;
      color: var(--ink);
      background: var(--card);
      border: 2.5px solid var(--ink);
      border-left: 10px solid var(--ink);
      box-shadow: 6px 6px 0 rgba(20, 32, 60, 0.16);
      padding: 22px 26px;
    }

    .dkm-th {
      font-family: var(--font-body);
      font-size: 32px;
      line-height: 1.5;
      color: var(--ink);
      background: var(--card);
      border: 2.5px solid var(--ink);
      border-left: 10px solid var(--cobalt);
      box-shadow: 6px 6px 0 rgba(20, 32, 60, 0.16);
      padding: 22px 26px;
      margin-top: 20px;
    }

    .dkm-note {
      font-size: 24px;
      line-height: 1.5;
      color: var(--muted);
      background: var(--card);
      border: 2px solid var(--ink);
      border-left: 8px solid var(--green);
      padding: 16px 22px;
      margin-top: 20px;
    }

    .dkm-note b {
      color: var(--green-deep);
    }

    .dkm-tag {
      display: inline-block;
      font-family: var(--font-mono);
      font-size: 15px;
      font-weight: 700;
      letter-spacing: .12em;
      text-transform: uppercase;
      border: 2px solid var(--ink);
      background: var(--stone, #f6f4ec);
      padding: 2px 10px;
      margin-bottom: 10px;
    }

    /* ── โมดัลสองฝั่ง สำหรับผลลัพธ์ของสถาปัตยกรรมคู่ขนาน ── */
    .dkm-split {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 24px;
    }

    .dkm-split>* {
      min-width: 0;
    }

    .dkm-pane {
      background: var(--card);
      border: 2.5px solid var(--ink);
      box-shadow: 6px 6px 0 rgba(20, 32, 60, 0.16);
      display: flex;
      flex-direction: column;
      min-height: 0;
    }

    .dkm-pane-head {
      flex: 0 0 auto;
      font-family: var(--font-mono);
      font-size: 16px;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
      padding: 10px 18px;
      border-bottom: 2.5px solid var(--ink);
      color: #fff;
    }

    .dkm-pane.designer .dkm-pane-head {
      background: var(--cobalt);
    }

    .dkm-pane.evaluator .dkm-pane-head {
      background: var(--green-deep);
    }

    .dkm-pane.blocked .dkm-pane-head {
      background: var(--red-deep);
    }

    .dkm-pane-body {
      padding: 16px 20px;
      font-size: 22px;
      line-height: 1.48;
      color: var(--ink);
    }

    .dkm-item {
      border-top: 2px solid rgba(20, 32, 60, .16);
      padding-top: 12px;
      margin-top: 12px;
    }

    .dkm-item:first-child {
      border-top: none;
      padding-top: 0;
      margin-top: 0;
    }

    .dkm-item b {
      color: var(--cobalt-deep);
    }

    .dkm-verdict {
      font-family: var(--font-mono);
      font-size: 16px;
      font-weight: 700;
      letter-spacing: .06em;
      border: 2px solid var(--ink);
      padding: 2px 9px;
      white-space: nowrap;
      margin-left: 8px;
    }

    .dkm-verdict.pass {
      background: rgba(30, 158, 106, .20);
      color: var(--green-deep);
      border-color: var(--green);
    }

    .dkm-verdict.partial {
      background: rgba(199, 126, 0, .20);
      color: var(--amber-deep);
      border-color: var(--amber);
    }

    .dkm-verdict.fail {
      background: rgba(232, 85, 90, .18);
      color: var(--red-deep);
      border-color: var(--red);
    }

    .dkm-conf {
      font-family: var(--font-mono);
      font-size: 15px;
      color: var(--ink-faint);
      margin-left: 8px;
    }

    /* ปุ่มที่เรียกใช้ปัญญาประดิษฐ์ ต้องแยกสีจากปุ่มที่ทำงานด้วยกฎ
       เพื่อให้ผู้ฟังเห็นได้ทันทีว่าจังหวะไหนใช้โมเดล จังหวะไหนไม่ใช้ */
    .ix-btn.demo {
      background: var(--cobalt);
      border-color: var(--cobalt-deep);
      color: #fff;
    }

    .ix-btn.demo:hover:not(:disabled) {
      background: var(--cobalt-deep);
    }

    .pf-ai-note {
      font-family: var(--font-mono);
      font-size: 17px;
      color: var(--ink-faint);
      margin-left: 10px;
    }

    @media (max-width: 900px) {
      .dkm-split {
        grid-template-columns: 1fr;
      }

      .dkm-en {
        font-size: 26px;
      }

      .dkm-th {
        font-size: 25px;
      }
    }

    /* ── การ์ด Wheeler ฉบับปรับปรุง v2.4 ──
       ทุกใบหน้าตาเหมือนกันหมด ไม่มีการเน้นบางใบ เพราะเป็นการตัดสินแทนผู้ฟัง
       การ์ดทำหน้าที่เป็นดัชนี ไม่ต้องอ่านจบในใบ เนื้อหาเต็มอยู่ในโมดัล ── */
    .wc-card.key .wc-front {
      background: var(--card);
      border-color: var(--ink);
      box-shadow: 5px 5px 0 rgba(20, 32, 60, 0.16);
    }

    .wc-front p,
    .wc-back p,
    .wc-card .wc-en,
    .wc-card .wc-th {
      font-size: 21px;
      line-height: 1.36;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 4;
      line-clamp: 4;
      overflow: hidden;
    }

    .wc-card .wc-note {
      display: none;
    }

    .wc-more {
      flex: 0 0 auto;
      margin-top: auto;
      padding-top: 6px;
      font-family: var(--font-mono);
      font-size: 16px;
      font-weight: 700;
      letter-spacing: .06em;
      color: var(--act-deep);
    }

    .wc-card:hover .wc-face,
    .wc-card:focus-visible .wc-face {
      border-color: var(--act);
      box-shadow: 5px 5px 0 var(--act-line);
    }

    /* ===========================================
       องค์ประกอบเฉพาะของเด็คบทที่ 9 Zepeda
       ตารางสี่ควอดรันท์ของหน้าต่างโจฮารี
       สีทั้งสี่ยึดตามเด็ค Johari Window ของรายวิชาเดียวกัน เพื่อให้ผู้ฟังจำได้ตรงกัน
       cobalt คือ Arena/Open, red คือ Blind Spot, green คือ Facade/Hidden, violet คือ Unknown
       =========================================== */
    .jw-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
      margin-top: 14px;
    }

    .jw-cell {
      background: var(--card);
      border: 2.5px solid var(--ink);
      box-shadow: 6px 6px 0 rgba(20, 32, 60, 0.18);
      padding: 18px 22px 16px;
      position: relative;
      overflow: hidden;
      --q: var(--cobalt);
      --q-deep: var(--cobalt-deep);
    }

    .jw-cell::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      height: 8px;
      background: var(--q);
    }

    .jw-cell.q-blind {
      --q: var(--red);
      --q-deep: var(--red-deep);
    }

    .jw-cell.q-hidden {
      --q: var(--green);
      --q-deep: var(--green-deep);
    }

    .jw-cell.q-unknown {
      --q: var(--violet);
      --q-deep: var(--violet-deep);
    }

    .jw-cell .jw-head {
      font-family: var(--font-display);
      font-weight: 700;
      font-size: 30px;
      color: var(--q-deep);
      line-height: 1.15;
      margin-bottom: 8px;
    }

    .jw-cell .jw-head span {
      font-family: var(--font-mono);
      font-size: 17px;
      font-weight: 700;
      letter-spacing: .06em;
      color: var(--muted);
      margin-left: 10px;
    }

    .jw-cell .jw-en {
      font-family: var(--font-mono);
      font-size: 19px;
      color: var(--ink);
      line-height: 1.35;
    }

    .jw-cell .jw-th {
      font-size: 24px;
      color: var(--q-deep);
      font-weight: 600;
      line-height: 1.35;
      margin-top: 6px;
    }