/* ═══════════════════════════════════════════════════════════════════════════
   ภาคตัดกรวย ม.4 (math/m4-conic-*.php): ภาพเครื่องมือ ปุ่มควบคุม และกระดานคิด
   ส่วนแรกเป็น CSS ของชุดเครื่องมือ Anatomy (MIT License © 2026 Ryan) และของชุด teachkit-conics-trig
   แปลงอัตโนมัติจาก conics/*.html: ตัดกฎของ html/body ออก ตัวแปรสีย้ายจาก .iso มาที่ .cx-iso
   สว่างเป็นค่าเริ่ม มืดเมื่อ <html data-theme="dark"> ตามธีมของ TeachKit
   ส่วนท้าย "เข้ากับ TeachKit" เขียนเพิ่ม: ปุ่ม แท็บ และกระดานคิดในแผงขวา
   ═══════════════════════════════════════════════════════════════════════════ */
[data-theme="dark"] .cx-iso{
  --anatomy-page:#0b0b0b;--anatomy-card:#131313;--anatomy-text:#a3a3a3;--anatomy-strong:#e6e6e6;--anatomy-muted:#6e6e6e;
  --anatomy-paper:#131313;--anatomy-face:#1b1b1b;--anatomy-top:#1c1c1c;
  --anatomy-shade-0:#0f0f0f;--anatomy-shade-1:#121212;--anatomy-shade-2:#151515;--anatomy-shade-3:#181818;
  --anatomy-lit-top:#262626;--anatomy-lit-shade:#1d1d1d;
  --anatomy-hi:#d4d4d4;--anatomy-mid:#6a6a6a;--anatomy-lo:#3e3e3e;--anatomy-faint:#2a2a2a;--anatomy-lit:#ffffff;
  --anatomy-halo:#050505;--anatomy-halo-opacity:.9;--anatomy-dot:#e6e6e6;
  --anatomy-red:#ff6b6b;--anatomy-green:#6be0a0;--anatomy-blue:#6b9bff;
  --anatomy-weight:.6px;--anatomy-ease:cubic-bezier(.32,.72,0,1);
  --anatomy-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --anatomy-lift:inset 0 1px 0 0 #ffffff0a,inset 0 0 0 1px #ffffff06,0 0 0 1px #00000026,0 1px 1px -.5px #00000014,0 3px 3px -1.5px #00000014,0 6px 6px -3px #00000014,0 12px 12px -6px #00000014;
}
.cx-iso{
  --anatomy-page:#f2f2ef;--anatomy-card:#fbfbfa;--anatomy-text:#57575a;--anatomy-strong:#18181a;--anatomy-muted:#8c8c90;
  --anatomy-paper:#fbfbfa;--anatomy-face:#ffffff;--anatomy-top:#ffffff;
  --anatomy-shade-0:#dcdcd9;--anatomy-shade-1:#e5e5e2;--anatomy-shade-2:#ededea;--anatomy-shade-3:#f4f4f1;
  --anatomy-lit-top:#ffffff;--anatomy-lit-shade:#eeeeeb;
  --anatomy-hi:#26262a;--anatomy-mid:#8a8a8f;--anatomy-lo:#b4b4b8;--anatomy-faint:#d4d4d6;--anatomy-lit:#000000;
  --anatomy-halo:#8a8a80;--anatomy-halo-opacity:.32;--anatomy-dot:#3a3a3e;
  --anatomy-red:#e5484d;--anatomy-green:#30a46c;--anatomy-blue:#3e63dd;
  --anatomy-lift:inset 0 1px 0 0 #ffffff,0 0 0 1px #0000000f,0 1px 1px -.5px #0000000a,0 3px 3px -1.5px #0000000a,0 6px 6px -3px #0000000a,0 12px 12px -6px #0000000a;
}
.iso-svg{display:block;width:100%;height:auto;overflow:visible}
.iso-svg path,.iso-svg circle{vector-effect:non-scaling-stroke}
.iso-fill{fill:var(--anatomy-paper);stroke:none}
.iso-solid[data-lit]>.iso-fill{fill:var(--anatomy-face)}
.iso-shade,.iso-top{stroke:none}
.iso-shade[data-shade="0"]{fill:var(--anatomy-shade-0)}
.iso-shade[data-shade="1"]{fill:var(--anatomy-shade-1)}
.iso-shade[data-shade="2"]{fill:var(--anatomy-shade-2)}
.iso-shade[data-shade="3"]{fill:var(--anatomy-shade-3)}
.iso-top{fill:var(--anatomy-top)}
.iso-solid[data-lit]>.iso-top{fill:var(--anatomy-lit-top)}
.iso-solid[data-lit]>.iso-shade{fill:var(--anatomy-lit-shade)}
.iso-solid[data-seamless]>.iso-shade,.iso-solid[data-seamless]>.iso-top{stroke-width:.4;stroke-linejoin:round}
.iso-solid[data-seamless]>.iso-shade[data-shade="0"]{stroke:var(--anatomy-shade-0)}
.iso-solid[data-seamless]>.iso-shade[data-shade="1"]{stroke:var(--anatomy-shade-1)}
.iso-solid[data-seamless]>.iso-shade[data-shade="2"]{stroke:var(--anatomy-shade-2)}
.iso-solid[data-seamless]>.iso-shade[data-shade="3"]{stroke:var(--anatomy-shade-3)}
.iso-solid[data-seamless]>.iso-top{stroke:var(--anatomy-top)}
.iso-solid[data-seamless][data-lit]>.iso-top{stroke:var(--anatomy-lit-top)}
.iso-solid[data-seamless][data-lit]>.iso-shade{stroke:var(--anatomy-lit-shade)}
.iso-solid[data-lit]>.iso-edge{stroke:var(--anatomy-lit)}
.iso-halo{fill:var(--anatomy-halo);stroke:none;filter:blur(9px);opacity:var(--anatomy-halo-opacity);transform:translateY(3px)}
.iso-line{fill:none;stroke:var(--anatomy-lo);stroke-width:var(--anatomy-weight);stroke-linecap:round;stroke-linejoin:round}
.iso-line[data-tone="hi"]{stroke:var(--anatomy-hi)}
.iso-line[data-tone="mid"]{stroke:var(--anatomy-mid)}
.iso-line[data-tone="lo"]{stroke:var(--anatomy-lo)}
.iso-line[data-tone="faint"]{stroke:var(--anatomy-faint)}
.iso-line[data-tone="lit"]{stroke:var(--anatomy-lit)}
.iso-line[data-tone="red"]{stroke:var(--anatomy-red)}
.iso-line[data-tone="green"]{stroke:var(--anatomy-green)}
.iso-line[data-tone="blue"]{stroke:var(--anatomy-blue)}
.iso-line[data-dotted]{stroke-dasharray:.01 3.5;stroke-width:1}
.iso-line[data-dashed]{stroke-dasharray:3 3}
.iso-line[data-flow]{stroke-dasharray:2 6}
.iso-wire-end{fill:var(--anatomy-paper);stroke:var(--anatomy-lo);stroke-width:var(--anatomy-weight)}
.iso-wire[data-tone="hi"] .iso-wire-end{stroke:var(--anatomy-hi)}
.iso-wire[data-tone="mid"] .iso-wire-end{stroke:var(--anatomy-mid)}
.iso-wire[data-tone="faint"] .iso-wire-end{stroke:var(--anatomy-faint)}
.iso-wire[data-tone="lit"] .iso-wire-end{stroke:var(--anatomy-lit)}
.iso-dots circle{fill:var(--anatomy-dot);stroke:none;opacity:.32}
.iso-dots[data-tone="hi"] circle{opacity:.85}
.iso-dots[data-tone="mid"] circle{opacity:.45}
.iso-dots[data-tone="lo"] circle{opacity:.22}
.iso-dots[data-tone="faint"] circle{opacity:.12}
.iso-face-text{fill:var(--anatomy-mid);font-family:var(--anatomy-mono);letter-spacing:.04em}
.iso-face-text[data-tone="hi"]{fill:var(--anatomy-hi)}
.iso-face-text[data-tone="lo"]{fill:var(--anatomy-lo)}
.iso-face-text[data-tone="faint"]{fill:var(--anatomy-faint)}
.tb-body{fill:var(--anatomy-shade-2);stroke:none}
.tb-shine{fill:var(--anatomy-top);stroke:none}
.tb-shade{fill:var(--anatomy-shade-0);stroke:none}
.tb-ring{fill:none;stroke:var(--anatomy-lo);stroke-width:.45;stroke-linecap:butt;stroke-linejoin:round}
.tb-ring[data-tone="mid"]{stroke:var(--anatomy-mid)}
.tb-ring[data-tone="faint"]{stroke:var(--anatomy-faint)}
.tb-ring[data-tone="hi"]{stroke:var(--anatomy-hi)}
@keyframes iso-flow{to{stroke-dashoffset:-32}}
@keyframes iso-pulse{0%,100%{opacity:.18}12%{opacity:1}40%{opacity:.18}}
.iso-line[data-flow]{animation:iso-flow 1600ms linear infinite}
.iso-dots circle[data-pulse]{animation:iso-pulse 1600ms steps(1,end) infinite;animation-delay:var(--pulse-at,0ms)}
.iso-figure{margin:0}
.iso-plate{position:relative;padding:52px 24px;border-radius:0;background:var(--anatomy-card);box-shadow:0 0 0 1px var(--anatomy-mid);--anatomy-paper:var(--anatomy-card)}
.iso-plate-corners{position:absolute;inset:18px 20px;pointer-events:none}
.iso-plate-corner{position:absolute;color:var(--anatomy-muted);font-family:var(--anatomy-mono);font-size:10.5px;line-height:1;letter-spacing:.04em;white-space:nowrap}
.iso-plate-corner[data-corner="fig"]{top:0;left:0;color:var(--anatomy-text)}
.iso-plate-corner[data-corner="title"]{top:0;right:0;text-transform:uppercase;letter-spacing:.1em}
.iso-plate-corner[data-corner="hint"]{bottom:0;left:0;text-transform:uppercase;letter-spacing:.1em}
.iso-plate-corner[data-corner="readout"]{right:0;bottom:0;color:var(--anatomy-text);font-variant-numeric:tabular-nums}
.iso-plate .iso-svg{margin:0 auto}
.iso-legend{display:grid;gap:8px;margin-top:12px;color:var(--anatomy-muted);font-size:13px;line-height:1.55}
.iso-keys{display:flex;flex-wrap:wrap;gap:6px 18px}
.iso-key{display:inline-flex;align-items:center;gap:7px}
.iso-swatch{width:16px;height:10px;flex:none;overflow:visible}
.iso-swatch path{fill:none;stroke:var(--anatomy-hi);stroke-width:1;vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round}
.iso-swatch[data-mark="raised"] path,.iso-swatch[data-mark="flat"] path{stroke:var(--anatomy-mid)}
.iso-swatch[data-mark="lit"] path{stroke:var(--anatomy-lit)}
.iso-swatch[data-mark="dim"] path{stroke:var(--anatomy-lo)}
.iso-swatch[data-mark="dotted"] path{stroke-dasharray:.01 3;stroke-width:1.4}
.iso-swatch[data-mark="dashed"] path{stroke-dasharray:3 2.5}
.iso-swatch[data-mark="red"] path{stroke:var(--anatomy-red)}
.iso-swatch[data-mark="green"] path{stroke:var(--anatomy-green)}
.iso-swatch[data-mark="blue"] path{stroke:var(--anatomy-blue)}
.iso-swatch-crease{stroke:var(--anatomy-lo)!important}
@media (max-width:560px){.iso-plate{padding:48px 12px 70px}.iso-plate-corner[data-corner="hint"]{bottom:18px}}
@media (prefers-reduced-motion:reduce){.iso-line[data-flow],.iso-dots circle[data-pulse]{animation:none}}


.iso-face-text{font-family:var(--f-b);letter-spacing:0}
.iso-plate-corner{font-family:var(--f-b)}
.cx{margin-top:22px;display:grid;gap:16px}
.cx-tabs{display:flex;gap:8px;flex-wrap:wrap}
.cx button{font:inherit;font-size:15px;border:0;border-radius:10px;padding:9px 14px;cursor:pointer;background:var(--anatomy-card);color:var(--anatomy-strong);box-shadow:var(--anatomy-lift)}
.cx button:hover{filter:brightness(.97)}
.cx button[aria-pressed="true"],.cx button[aria-selected="true"]{background:var(--anatomy-strong);color:var(--anatomy-card)}
.cx button:focus-visible,.iso-stage:focus-visible{outline:2px solid var(--anatomy-strong);outline-offset:3px}
.cx-tabs button{font-size:16px;padding:10px 16px}
.cx-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.cx-row .cx-label{font-size:14px;color:var(--anatomy-muted);margin-right:4px}
.cx-step{display:inline-flex;align-items:center;gap:4px;background:var(--anatomy-card);border-radius:12px;padding:3px;box-shadow:var(--anatomy-lift)}
.cx-step button{box-shadow:none;padding:6px 12px;font-size:18px;line-height:1}
.cx-step output{min-width:64px;text-align:center;font-size:16px;color:var(--anatomy-strong);font-variant-numeric:tabular-nums}
.cx-board{background:var(--anatomy-card);box-shadow:var(--anatomy-lift);border-radius:16px;padding:20px 22px;display:grid;gap:10px}
.cx-board h2{margin:0;font-size:15px;font-weight:500;color:var(--anatomy-muted)}
.cx-line{font-size:21px;line-height:1.5;color:var(--anatomy-strong);font-variant-numeric:tabular-nums}
.cx-line small{display:block;font-size:14px;color:var(--anatomy-muted);line-height:1.4}
.cx-line.dim{color:var(--anatomy-muted)}
.cx-line.big{font-size:27px;font-weight:600}
.cx-steps{margin:0;padding-left:1.4em;display:grid;gap:6px}
.cx-steps li{font-size:20px;line-height:1.5;color:var(--anatomy-strong);font-variant-numeric:tabular-nums}
.cx-steps li.hidden{color:transparent;text-shadow:none;background:var(--anatomy-page);border-radius:8px}
.cx-note{font-size:14px;color:var(--anatomy-muted);margin:0}
.cx-nav{display:flex;gap:14px;flex-wrap:wrap;font-size:14px;margin:0 0 14px}
.cx-nav a{color:var(--anatomy-text)}
.cx-nav a[aria-current="page"]{color:var(--anatomy-strong);font-weight:600;text-decoration:none}
.cx-iso [hidden]{display:none!important}
@media (max-width:640px){.cx-line{font-size:18px}.cx-line.big{font-size:22px}.cx-steps li{font-size:17px}}
.lamp-light{fill:#ffc94d;fill-opacity:.55}.lamp-beam{fill:#ffd36a;fill-opacity:.16}.lamp-lens{fill:#fff1bf}[data-theme="dark"] .lamp-light{fill:#ffd166;fill-opacity:.32}[data-theme="dark"] .lamp-beam{fill:#ffe08a;fill-opacity:.07}[data-theme="dark"] .lamp-lens{fill:#ffe7a3}

/* ─── เข้ากับ TeachKit ─── */
.cx-iso{color:var(--anatomy-text)}
.cx-lab{display:grid;gap:1rem;min-width:0}
.cx-lab .iso-plate{border-radius:var(--rs)}
.cx-lab .iso-stage:focus-visible{outline:3px solid var(--c-500);outline-offset:3px;border-radius:6px}
.cx-lab .iso-legend{color:var(--t3);font-size:.86rem}
.cx-lab .cx{margin-top:0;gap:.8rem}
.cx-lab .cx-row{gap:.45rem}
.cx-lab .cx-row .cx-label{font-size:.86rem;color:var(--t3);margin-right:.2rem}
/* ปุ่มของเครื่องมือ: หน้าตาแบบชิปของ TeachKit (ต้นฉบับเป็นปุ่มสีเทาของ Anatomy) */
.cx-lab .cx button{font:500 .9rem/1.3 var(--f-b);min-height:40px;padding:.4rem .85rem;border-radius:999px;border:1px solid var(--bd);background:var(--bg-m);color:var(--t2);box-shadow:none;transition:background-color .2s,color .2s,border-color .2s}
.cx-lab .cx button:hover{filter:none;border-color:var(--c-400);color:var(--c-700)}
.cx-lab .cx button[aria-pressed="true"]{background:var(--c-700);border-color:var(--c-700);color:#fff}
.cx-lab .cx button:focus-visible{outline:3px solid var(--c-500);outline-offset:2px}
[data-theme="dark"] .cx-lab .cx button{background:#0F172A}
[data-theme="dark"] .cx-lab .cx button:hover{color:var(--c-300)}
[data-theme="dark"] .cx-lab .cx button[aria-pressed="true"]{background:var(--c-600);border-color:var(--c-600);color:#fff}
/* แท็บคาบเรียน: แบบ tk-seg */
.cx-lab .cx-tabs{display:inline-flex;flex-wrap:wrap;justify-self:start;max-width:100%;padding:3px;gap:2px;background:var(--bg-m);border:1px solid var(--bd);border-radius:var(--rs)}
.cx-lab .cx-tabs button{border:0;border-radius:7px;background:transparent;color:var(--t3);font-size:.9rem;padding:.42rem .8rem}
.cx-lab .cx-tabs button[aria-selected="true"]{background:var(--bg-c);color:var(--c-700);box-shadow:var(--sh);font-weight:600}
[data-theme="dark"] .cx-lab .cx-tabs{background:#0F172A}
[data-theme="dark"] .cx-lab .cx-tabs button{background:transparent}
[data-theme="dark"] .cx-lab .cx-tabs button[aria-selected="true"]{background:var(--bd);color:#fff}
/* ตัวปรับค่า − ค่า + */
.cx-lab .cx-step{background:var(--bg-m);box-shadow:none;border:1px solid var(--bd);border-radius:999px;gap:2px}
.cx-lab .cx-step button{border:0;background:transparent;min-height:36px;min-width:36px;padding:.2rem .6rem;font-size:1.05rem}
[data-theme="dark"] .cx-lab .cx-step{background:#0F172A}
[data-theme="dark"] .cx-lab .cx-step button{background:transparent}
.cx-lab .cx-step output{color:var(--t1);font-size:.95rem;min-width:60px}
.cx-lab .cx-note{color:var(--t3);font-size:.88rem}
.cx-lab .cx-credit{margin:0;font-size:.8rem}
@media(pointer:coarse){.cx-lab .cx button{min-height:44px}.cx-lab .cx-step button{min-width:44px}}
/* กระดานคิดในแผงขวา: ตัวอักษรและพื้นของ TeachKit */
.cx-board.cx-iso{background:none;box-shadow:none;padding:0;border-radius:0;gap:.7rem;color:var(--t2)}
.cx-board h2{margin:0;font:600 .92rem/1.5 var(--f-b);color:var(--t3)}
.cx-board .cx-line{color:var(--t1);font-size:1.15rem}
.cx-board .cx-line.big{font-size:1.45rem}
.cx-board .cx-line.dim{color:var(--t2);font-size:1rem}
.cx-board .cx-line small{color:var(--t3);font-size:.86rem}
.cx-board .cx-steps li{color:var(--t1);font-size:1.08rem}
.cx-board .cx-steps li.hidden{background:var(--bg-m);color:transparent}
.cx-board .cx-note{color:var(--t3);font-size:.88rem}
@media(max-width:640px){.cx-board .cx-line{font-size:1.02rem}.cx-board .cx-line.big{font-size:1.2rem}.cx-board .cx-steps li{font-size:.98rem}}
/* แผงกระดานคิดแคบ (ราว 300 px): ตัวอักษรเล็กลงอีกขั้น */
.cx-panel .cx-board .cx-line{font-size:1.02rem}
.cx-panel .cx-board .cx-line.big{font-size:1.25rem}
.cx-panel .cx-board .cx-steps li{font-size:.98rem}
.cx-panel .cx-keys{margin-top:1rem;padding-top:.6rem;border-top:1px solid var(--bd)}
.cx-keys>summary{cursor:pointer;min-height:44px;display:flex;align-items:center;gap:.45rem;font:600 .86rem/1.6 var(--f-b);color:var(--t2)}
.cx-keys>summary i{color:var(--c-500)}
.cx-keys .tk-keys{padding:.3rem 0 .4rem;font-size:.85rem}
/* สรุปสูตร: การ์ดย่อยเรียงตามความกว้างจอ */
.cx-sum{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:.9rem}
.cx-sum .tk-frow{border:1px solid var(--bd);border-radius:var(--rs);background:var(--bg-c);min-width:0}
.cx-sum .tk-frow h3{display:flex;align-items:center;gap:.5rem;margin:0 0 .4rem;font-size:.95rem}
.cx-sum .tk-frow h3 i{color:var(--c-600)}
.cx-sum .tk-math{font-size:1.05rem;overflow-wrap:anywhere}
.cx-sum .tk-frow p{margin:.35rem 0 0;color:var(--t2);font-size:.9rem}