@import url("https://fonts.googleapis.com/css2?family=STIX+Two+Text:ital,wght@1,400;1,600&display=swap");
/* ═══════════════════════════════════════════════════════════════════════════
   วงกลมหนึ่งหน่วย (2 มิติ, 3 มิติ) และเกลียว sin cos ในบทเรียน ม.5 ฟังก์ชันไซน์
   นำมาจากชุด teachkit-conics-trig (trig/unit-circle.html, trig/unit-circle-3d.html)
   สีของแต่ละฟังก์ชันเป็นค่าเดิมของชุดนั้น ส่วนปุ่ม การ์ด และตัวอักษรใช้ของ TeachKit
   ธีม: สว่างเป็นค่าเริ่ม มืดเมื่อ <html data-theme="dark"> (ภาพ 3 มิติอ่านสีจากตัวแปรเหล่านี้ด้วย)
   ═══════════════════════════════════════════════════════════════════════════ */
.uc-card{
  --uc-sheet:#fff;--uc-ink:#1b2430;--uc-muted:#5b6878;--uc-axis:#5b6878;
  --uc-grid:#e3e9f1;--uc-grid-strong:#c9d3df;--uc-grid3:#dfe6ee;
  --uc-sin:#d3392f;--uc-cos:#1f63c6;--uc-tan:#198754;--uc-cot:#c26f00;--uc-sec:#7b3fb5;--uc-csc:#0e8585;
  --uc-arc:#f2b632;--uc-arc3:#e8a817;
  --uc-math:"STIX Two Text","Cambria Math","Times New Roman",serif;
}
[data-theme="dark"] .uc-card{
  --uc-sheet:#151f2a;--uc-ink:#e6edf5;--uc-muted:#9fb0c2;--uc-axis:#9fb0c2;
  --uc-grid:#1f2b38;--uc-grid-strong:#2c3b4c;--uc-grid3:#2a3848;
  --uc-sin:#ff6b5e;--uc-cos:#6aa6ff;--uc-tan:#4cc98a;--uc-cot:#ffb347;--uc-sec:#c08cff;--uc-csc:#40d0cf;
  --uc-arc:#ffcf5a;--uc-arc3:#ffcf5a;
}
.uc-card [hidden]{display:none!important}
.uc-lede{margin:0 0 .9rem;color:var(--t3);max-width:76ch}
.uc-tabs{margin:0 0 1rem;flex-wrap:wrap}
.uc-layout{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(300px,1fr);gap:1.25rem;align-items:start}
@media(max-width:1000px){.uc-layout{grid-template-columns:1fr}}

/* ─── ภาพ ─── */
.uc-fig{min-width:0;background:var(--uc-sheet);border:1px solid var(--bd);border-radius:var(--r);padding:10px}
.uc-fig svg{display:block;width:100%;max-width:640px;height:auto;margin:0 auto;touch-action:none;user-select:none;-webkit-user-select:none;cursor:pointer}
.uc-fig svg:focus-visible,.uc-3d:focus-visible{outline:3px solid var(--c-500);outline-offset:4px;border-radius:10px}
.uc-m{font-family:var(--uc-math);font-style:italic}
.uc-lbl{font-size:23px;paint-order:stroke;stroke:var(--uc-sheet);stroke-width:6px;stroke-linejoin:round}
.uc-pt{font-size:20px;paint-order:stroke;stroke:var(--uc-sheet);stroke-width:5px;stroke-linejoin:round;fill:var(--uc-ink)}
.uc-tick{font-size:15px;fill:var(--uc-muted);font-family:var(--f-b)}
.uc-hint{font-size:.86rem;color:var(--t3);margin:.45rem .35rem .1rem}
.uc-3d{position:relative;width:100%;aspect-ratio:4/3;border-radius:10px;overflow:hidden;touch-action:none;background:var(--uc-sheet);cursor:grab}
.uc-3d:active{cursor:grabbing}
.uc-3d canvas{display:block;width:100%;height:100%}
.uc-tags{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.uc-tl{position:absolute;left:0;top:0;font-family:var(--uc-math);font-style:italic;font-size:21px;font-weight:600;line-height:1.2;white-space:nowrap;text-shadow:0 0 3px var(--uc-sheet),0 0 3px var(--uc-sheet),0 0 6px var(--uc-sheet)}
.uc-tl.pt{font-size:18px;font-weight:400;color:var(--uc-ink)}
.uc-tl.tick{font-family:var(--f-b);font-style:normal;font-weight:400;font-size:14px;color:var(--uc-muted)}
.uc-3d.endon .uc-tl.th{visibility:hidden}
.uc-3d-msg{position:absolute;inset:0;display:grid;place-items:center;padding:1.2rem;text-align:center;color:var(--t3);font-size:.95rem}

/* ─── แผงค่า ─── */
.uc-panel{display:grid;gap:1rem;min-width:0}
.uc-angle{font-size:1.35rem;font-weight:600;line-height:1.35;font-variant-numeric:tabular-nums}
.uc-angle small{display:block;font-size:.9rem;color:var(--t3);font-weight:400}
.uc-bridge{margin:-.35rem 0 0;padding:.5rem .75rem;border-radius:var(--rs);background:var(--tk-tint);color:var(--tk-tint-ink);font-size:.9rem;font-variant-numeric:tabular-nums}
.uc-label{font-size:.84rem;color:var(--t3);margin:0 0 .4rem}
.uc-range{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .8rem}
.uc-range input{flex:1 1 180px;min-width:0;accent-color:var(--c-600)}
.uc-range .uc-note{flex:0 0 auto}
/* experience.css ทำให้ชิปไม่มีพื้นและขอบ แผงนี้พื้นเดียวกับการ์ด จึงใส่พื้นจาง ๆ ให้ยังเห็นเป็นปุ่ม */
.uc-panel .tk-chips{gap:.4rem}
.uc-panel .tk-chip:not([aria-pressed="true"]){background:var(--bg-m)}
[data-theme="dark"] .uc-panel .tk-chip:not([aria-pressed="true"]){background:#0F172A}
.uc-fn .tk-chip i{width:12px;height:12px;border-radius:3px;display:inline-block;background:var(--c)}
.tk-body .uc-fn .tk-chip[aria-pressed="true"]{background:var(--bg-m);border-color:var(--c);color:var(--t1);font-weight:600}
[data-theme="dark"] .tk-body .uc-fn .tk-chip[aria-pressed="true"]{background:#0F172A}
.tk-body .uc-fn .tk-chip[aria-pressed="true"]:hover{color:var(--t1)} /* experience.css ให้ตัวอักษรขาวตอนชี้ */
.uc-fn .tk-chip[aria-pressed="false"]{color:var(--t3)}
.uc-fn .tk-chip[aria-pressed="false"] i{background:transparent;box-shadow:inset 0 0 0 2px var(--c)}
.uc-vals{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}
.uc-val{border-left:5px solid var(--c);padding:.3rem 0 .3rem .7rem;min-width:0}
.uc-val .nm{font-size:.86rem;color:var(--t3)}
.uc-val .num{font-size:1.5rem;font-weight:600;font-variant-numeric:tabular-nums;line-height:1.25}
.uc-val .ex{font-size:.95rem;color:var(--t3);min-height:1.45em}
.uc-val.off{opacity:.38}
.uc-ident{font-size:1rem;font-variant-numeric:tabular-nums}
.uc-say{font-size:1.02rem;margin:0}
.uc-note{font-size:.88rem;color:var(--t3);margin:0}
@media(max-width:560px){.uc-lbl{font-size:26px}.uc-pt{font-size:24px}.uc-tick{font-size:19px}.uc-val .num{font-size:1.25rem}.uc-tl{font-size:18px}}