/* ============================================================
 * 动图模型提分大师 · 教研试点「sympy 内核讲题页」样式
 * cg-unified 深空科技设计 + 自包含工具类子集（替代 Tailwind CDN，满足严格 CSP）
 * 零内联样式、零内联脚本
 * ============================================================ */
:root{
  --bg:#070b17; --bg2:#0a1122;
  --card:rgba(255,255,255,.05);
  --line:rgba(148,163,184,.20);
  --ink:#e8eefb; --gray:#94a3b8;
  --primary:#3b82f6; --cyan:#22d3ee; --purple:#a78bfa;
  --accent:#fbbf24; --green:#34d399;
  --grad-main:linear-gradient(135deg,#22d3ee 0%,#3b82f6 50%,#a78bfa 100%);
  --r-lg:18px; --r-md:12px;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{font-size:16px;scroll-behavior:smooth}
body{
  font-family:"PingFang SC","Microsoft YaHei","HarmonyOS Sans SC","Helvetica Neue",sans-serif;
  background:
    radial-gradient(1100px 560px at 85% -8%, rgba(124,58,237,.16), transparent 62%),
    radial-gradient(950px 520px at 8% 0%, rgba(34,211,238,.11), transparent 58%),
    radial-gradient(900px 620px at 50% 112%, rgba(59,130,246,.10), transparent 62%),
    var(--bg);
  background-attachment:fixed;
  color:var(--ink); line-height:1.65; -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
a{color:var(--cyan);text-decoration:none}
a:hover{color:#7dd3fc}
button{font-family:inherit}
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:rgba(148,163,184,.10)}
::-webkit-scrollbar-thumb{background:rgba(148,163,184,.35);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:rgba(148,163,184,.55)}

/* ---------- cg-unified 顶部导航 ---------- */
.topnav{position:sticky;top:0;z-index:50;background:rgba(7,11,23,.86);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);box-shadow:0 4px 30px rgba(0,0,0,.35)}
.topnav .in{max-width:1280px;margin:0 auto;display:flex;align-items:center;gap:10px;padding:10px 16px;flex-wrap:wrap}
.topnav .logo{font-weight:800;font-size:16px;color:#fff;letter-spacing:.5px;display:flex;align-items:center;gap:8px;margin-right:auto}
.topnav .logo .dot{width:26px;height:26px;border-radius:8px;flex-shrink:0;background:var(--grad-main);
  display:inline-flex;align-items:center;justify-content:center;color:#fff;font-size:13px;font-weight:900;
  box-shadow:0 0 22px rgba(34,211,238,.30)}
.topnav a.nav{font-size:13.5px;padding:7px 13px;border-radius:9px;color:var(--gray);font-weight:600;white-space:nowrap;transition:.15s}
.topnav a.nav.on{background:rgba(34,211,238,.14);color:var(--cyan);box-shadow:inset 0 0 0 1px rgba(34,211,238,.35)}
.topnav a.nav:hover{background:rgba(148,163,184,.12);color:var(--ink)}
.topnav .cta{background:var(--grad-main);color:#fff;border-radius:10px;padding:8px 16px;font-size:13px;font-weight:700;
  box-shadow:0 0 24px rgba(59,130,246,.35);white-space:nowrap}
.topnav .cta:hover{filter:brightness(1.12)}

/* ---------- 试点首页 ---------- */
.pilot-hero{max-width:1080px;margin:0 auto;padding:36px 18px 8px}
.pilot-hero h1{font-size:26px;font-weight:800;color:#fff;letter-spacing:.5px}
.pilot-hero p{color:var(--gray);font-size:14px;margin-top:8px}
.badge-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.badge{font-size:12px;padding:4px 10px;border-radius:999px;border:1px solid var(--line);
  background:rgba(34,211,238,.10);color:var(--cyan);font-weight:600}
.card-grid{max-width:1080px;margin:0 auto;padding:18px;display:grid;gap:16px;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.lesson-card{display:block;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:20px;box-shadow:0 10px 40px rgba(0,0,0,.35);transition:.2s}
.lesson-card:hover{background:rgba(255,255,255,.08);border-color:rgba(34,211,238,.45);transform:translateY(-2px)}
.lesson-card .no{font-size:12px;color:var(--cyan);font-weight:800;letter-spacing:1px}
.lesson-card h2{font-size:18px;color:#fff;margin:6px 0 8px;font-weight:700}
.lesson-card p{font-size:13.5px;color:var(--gray);line-height:1.7}
.lesson-card .ans{margin-top:12px;font-size:13px;color:#6ee7b7}
.site-foot{max-width:1080px;margin:0 auto;padding:10px 18px 40px;color:#64748b;font-size:12.5px;line-height:1.8}

/* ---------- 自包含工具类子集 ---------- */
.flex{display:flex}.inline-block{display:inline-block}.hidden{display:none}
.flex-col{flex-direction:column}.flex-grow{flex-grow:1}.flex-shrink-0{flex-shrink:0}
.items-center{align-items:center}.items-start{align-items:start}.justify-center{justify-content:center}
.justify-between{justify-content:space-between}
.gap-1{gap:4px}.gap-2{gap:8px}.gap-3{gap:12px}.gap-4{gap:16px}
.relative{position:relative}.absolute{position:absolute}.inset-0{top:0;right:0;bottom:0;left:0}
.z-10{z-index:10}.top-0{top:0}.top-4{top:16px}.top-1\/2{top:50%}
.bottom-0{bottom:0}.bottom-4{bottom:16px}.left-4{left:16px}.right-4{right:16px}
.-translate-y-1\/2{transform:translateY(-50%)}
.w-full{width:100%}.h-full{height:100%}.w-px{width:1px}
.w-2\.5{width:10px}.w-3{width:12px}.w-4{width:16px}.w-5{width:20px}.w-8{width:32px}.w-14{width:56px}.w-\[18px\]{width:18px}
.h-1\.5{height:6px}.h-2{height:8px}.h-2\.5{height:10px}.h-4{height:16px}.h-5{height:20px}.h-8{height:32px}.h-\[18px\]{height:18px}
.min-h-screen{min-height:100vh}.min-h-\[360px\]{min-height:360px}.min-w-0{min-width:0}
.overflow-hidden{overflow:hidden}
.p-1\.5{padding:6px}.p-3{padding:12px}.p-4{padding:16px}.p-5{padding:20px}
.px-2\.5{padding-left:10px;padding-right:10px}.px-3{padding-left:12px;padding-right:12px}.px-4{padding-left:16px;padding-right:16px}
.py-1{padding-top:4px;padding-bottom:4px}.py-3{padding-top:12px;padding-bottom:12px}
.pb-2{padding-bottom:8px}.pt-0\.5{padding-top:2px}.pt-1{padding-top:4px}.pt-4{padding-top:16px}
.mb-1{margin-bottom:4px}.mb-2{margin-bottom:8px}.mb-4{margin-bottom:16px}
.mt-1\.5{margin-top:6px}.mt-6{margin-top:24px}.mx-0\.5{margin-left:2px;margin-right:2px}
.ml-auto{margin-left:auto}
.space-y-1>*+*{margin-top:4px}.space-y-3>*+*{margin-top:12px}
.space-y-5>*+*{margin-top:20px}.space-y-6>*+*{margin-top:24px}
.pl-5{padding-left:20px}.list-decimal{list-style:decimal inside}
.text-center{text-align:center}.prose{max-width:none}.max-w-none{max-width:none}
.leading-relaxed{line-height:1.75}.tracking-widest{letter-spacing:.1em}
.font-bold{font-weight:700}.font-semibold{font-weight:600}.font-medium{font-weight:500}
.font-mono{font-family:"JetBrains Mono",Menlo,Consolas,monospace}
.text-\[11px\]{font-size:11px}.text-xs{font-size:12px}.text-sm{font-size:13.5px}
.text-base{font-size:15px}.text-lg{font-size:17px}.text-xl{font-size:20px}
.rounded{border-radius:6px}.rounded-md{border-radius:8px}.rounded-lg{border-radius:10px}
.rounded-xl{border-radius:14px}.rounded-2xl{border-radius:18px}.rounded-full{border-radius:9999px}
.shadow-sm{box-shadow:0 1px 3px rgba(0,0,0,.35)}
.shadow-md{box-shadow:0 6px 18px rgba(0,0,0,.45)}
.shadow-lg{box-shadow:0 12px 34px rgba(0,0,0,.5)}
.shadow-inner{box-shadow:inset 0 2px 12px rgba(0,0,0,.55)}
.cursor-pointer{cursor:pointer}.pointer-events-none{pointer-events:none}
.appearance-none{-webkit-appearance:none;appearance:none}
.accent-blue-600{accent-color:#3b82f6}.accent-white{accent-color:#fff}
.focus\:outline-none:focus{outline:none}
.backdrop-blur-md{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.transition-colors{transition:color .15s,background-color .15s,border-color .15s}
.transition-all{transition:all .2s}.transition-transform{transition:transform .3s}
.transition-\[width\]{transition:width .3s}
.duration-75{transition-duration:75ms}.duration-300{transition-duration:300ms}
.ring-1{box-shadow:0 0 0 1px var(--ring,rgba(148,163,184,.5))}
.ring-2{box-shadow:0 0 0 2px var(--ring,rgba(148,163,184,.5))}
.ring-slate-600{--ring:#475569}.ring-white{--ring:#fff}
.\[writing-mode\:vertical-rl\]{writing-mode:vertical-rl}

/* 深色语义色板（覆盖模板原浅色类名） */
.bg-white{background:rgba(255,255,255,.05);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.bg-slate-50{background:rgba(148,163,184,.10)}
.bg-slate-100{background:rgba(148,163,184,.18)}
.bg-slate-200{background:rgba(148,163,184,.28)}
.bg-slate-700{background:#334155}
.bg-slate-900{background:#0b1220}
.bg-slate-900\/80{background:rgba(11,18,32,.80)}
.bg-slate-900\/85{background:rgba(11,18,32,.85)}
.bg-blue-50{background:rgba(59,130,246,.14)}
.bg-blue-500{background:#3b82f6}
.bg-emerald-50{background:rgba(52,211,153,.12)}
.bg-emerald-200\/80{background:rgba(110,231,183,.80)}
.bg-indigo-50{background:rgba(99,102,241,.14)}
.bg-indigo-100{background:rgba(99,102,241,.18)}
.bg-indigo-500{background:#6366f1}
.bg-indigo-600{background:#4f46e5}
.bg-teal-50{background:rgba(20,184,166,.14)}
.bg-teal-600{background:#0d9488}
.bg-rose-600{background:#e11d48}
.bg-gradient-to-r{background-image:linear-gradient(to right,var(--g1,#fca5a5),var(--g2,#fcd34d),var(--g3,#6ee7b7))}
.from-red-200{--g1:#fca5a5}.via-amber-200{--g2:#fcd34d}.to-emerald-200{--g3:#6ee7b7}

.border{border:1px solid var(--line)}
.border-2{border:2px solid var(--line)}
.border-b{border-bottom:1px solid var(--line)}
.border-t{border-top:1px solid var(--line)}
.border-dashed{border-style:dashed}
.border-white{border-color:#fff}
.border-slate-100{border-color:rgba(148,163,184,.14)}
.border-slate-200{border-color:rgba(148,163,184,.24)}
.border-slate-200\/60{border-color:rgba(148,163,184,.20)}
.border-slate-300{border-color:rgba(148,163,184,.30)}
.border-slate-700{border-color:#334155}
.border-blue-100{border-color:rgba(59,130,246,.32)}
.border-emerald-100{border-color:rgba(52,211,153,.32)}
.border-emerald-200{border-color:rgba(52,211,153,.45)}
.border-indigo-100{border-color:rgba(99,102,241,.32)}
.border-teal-200{border-color:rgba(20,184,166,.45)}

.text-slate-300{color:#cbd5e1}.text-slate-400{color:#94a3b8}.text-slate-500{color:#94a3b8}
.text-slate-600{color:#b6c2d9}.text-slate-700{color:#ccd6ea}.text-slate-800{color:#dbe4f5}
.text-slate-900{color:#e8eefb}
.text-blue-600{color:#60a5fa}.text-emerald-600{color:#34d399}.text-emerald-700{color:#6ee7b7}
.text-emerald-900{color:#a7f3d0}.text-indigo-600{color:#818cf8}.text-indigo-900{color:#c7d2fe}
.text-teal-700{color:#5eead4}
.hover\:bg-indigo-50:hover{background:rgba(99,102,241,.14)}
.hover\:bg-slate-700:hover{background:#334155}
.hover\:bg-rose-600:hover{background:#e11d48}
.hover\:border-indigo-300:hover{border-color:rgba(129,140,248,.6)}
.hover\:text-indigo-600:hover{color:#818cf8}
.hover\:text-indigo-800:hover{color:#c7d2fe}
.hover\:text-white:hover{color:#fff}

/* 响应式 */
@media (min-width:768px){.md\:text-sm{font-size:13.5px}.md\:text-base{font-size:15px}}
@media (min-width:1024px){
  .lg\:flex-row{flex-direction:row}
  .lg\:flex-col{flex-direction:column}
  .lg\:flex-1{flex:1 1 0%}
  .lg\:h-screen{height:100vh}
  .lg\:min-h-0{min-height:0}
  .lg\:overflow-hidden{overflow:hidden}
  .lg\:overflow-y-auto{overflow-y:auto}
  .lg\:w-\[340px\]{width:340px}
  .lg\:w-\[360px\]{width:360px}
  .lg\:w-14{width:56px}
  .lg\:px-2{padding-left:8px;padding-right:8px}
  .lg\:gap-3{gap:12px}
  .lg\:hidden{display:none}
  .lg\:block{display:block}
}

/* 画笔层：指针事件 / 光标由类切换（严格 CSP，无内联样式） */
#draw-canvas{pointer-events:none;touch-action:none}
#draw-canvas.pen-active{pointer-events:auto}
#draw-canvas.cur-cross{cursor:crosshair}
#draw-canvas.cur-cell{cursor:cell}
/* 读数行 / 图例：语义色类（数据 color 字段映射） */
.ro-c-default{color:#e8eefb}
.ro-c-curve{color:#facc15}.ro-c-curve2{color:#f472b6}.ro-c-line{color:#2dd4bf}.ro-c-line2{color:#38bdf8}
.ro-c-aux{color:#94a3b8}.ro-c-asymptote{color:#64748b}.ro-c-directrix{color:#a3a3a3}
.ro-c-ptA{color:#f87171}.ro-c-ptB{color:#60a5fa}.ro-c-point{color:#e2e8f0}.ro-c-given{color:#a78bfa}
.ro-c-fixed{color:#34d399}.ro-c-focus{color:#e2e8f0}.ro-c-vecA{color:#f87171}.ro-c-vecB{color:#60a5fa}
.ro-c-vec{color:#fbbf24}.ro-c-locus{color:#38bdf8}.ro-c-area{color:#2dd4bf}
.ro-ok{color:#34d399}.ro-bad{color:#f87171}
.sw-default{background:#e2e8f0}.sw-curve{background:#facc15}.sw-curve2{background:#f472b6}
.sw-line{background:#2dd4bf}.sw-line2{background:#38bdf8}.sw-aux{background:#94a3b8}
.sw-asymptote{background:#64748b}.sw-directrix{background:#a3a3a3}
.sw-ptA{background:#f87171}.sw-ptB{background:#60a5fa}.sw-point{background:#e2e8f0}
.sw-given{background:#a78bfa}.sw-fixed{background:#34d399}.sw-focus{background:#e2e8f0}
.sw-vecA{background:#f87171}.sw-vecB{background:#60a5fa}.sw-vec{background:#fbbf24}
.sw-locus{background:#38bdf8}.sw-area{background:rgba(45,212,191,.85)}
/* 原模板内联 style 的等价 CSS（严格 CSP 下不允许 style 属性） */
.rb-track{left:6%;right:6%}
#rangebar-ptr,#answerband-ptr{left:50%}
#answerband-fill{left:0;right:0}
.draw-swatch[data-color="#ffffff"]{background:#ffffff}
.draw-swatch[data-color="#2dd4bf"]{background:#2dd4bf}
.draw-swatch[data-color="#fbbf24"]{background:#fbbf24}
.draw-swatch[data-color="#fb7185"]{background:#fb7185}

/* KaTeX 微调 */
.katex{font-size:1.02em}
#prob-body p,#solution-body p{margin:2px 0}