:root{
  --bg:#050607; --bg2:#0d1114; --card:#0d1114; --line:#1c2329;
  --ink:#f2f5f7; --sub:#9aa8b4; --dim:#5d6b78;
  --acc:#34f5c5; --acc2:#5ab0ff; --acc3:#b78cff; --warn:#ffd166; --hot:#ff6b6b;
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{ background:var(--bg); color:var(--ink); font-family:'Manrope','Noto Sans SC',-apple-system,sans-serif; margin:0; overflow-x:hidden; }
a{ color:inherit; text-decoration:none; }
.mono{ font-family:'Geist Mono','JetBrains Mono',monospace; }
.glow-orb{ position:absolute; border-radius:50%; filter:blur(90px); opacity:.14; pointer-events:none; }
.card{ background:var(--card); border:1px solid var(--line); border-radius:18px; }
.card-hover{ transition:transform .35s cubic-bezier(0.22,1,0.36,1), border-color .35s, box-shadow .35s; }
.card-hover:hover{ transform:translateY(-4px); border-color:rgba(110,231,183,.35); box-shadow:0 18px 50px -18px rgba(56,189,248,.25); }
.tag{ font-size:11px; letter-spacing:.14em; padding:4px 10px; border-radius:99px; border:1px solid var(--line); color:var(--sub); display:inline-block; }
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .8s ease, transform .8s cubic-bezier(0.22,1,0.36,1); }
.reveal.on{ opacity:1; transform:none; }
.nav-blur{ backdrop-filter:blur(14px); background:rgba(10,14,20,.72); }
.btn-glow{ transition:all .3s ease; }
.btn-glow:hover{ box-shadow:0 0 28px rgba(110,231,183,.35); transform:translateY(-1px); }
::-webkit-scrollbar{ width:10px; } ::-webkit-scrollbar-thumb{ background:#1e2a42; border-radius:8px; }

/* ===== 课程页排版 ===== */
.lesson-body{ max-width:820px; margin:0 auto; }
.lesson-body h2{ font-size:26px; font-weight:700; margin:48px 0 16px; padding-top:8px; border-top:1px solid var(--line); }
.lesson-body h2:first-child{ border-top:none; margin-top:0; }
.lesson-body h3{ font-size:18px; font-weight:700; margin:28px 0 12px; color:var(--acc); }
.lesson-body p{ color:var(--sub); line-height:1.9; margin:12px 0; font-size:15px; }
.lesson-body strong{ color:var(--ink); }
.lesson-body ul,.lesson-body ol{ color:var(--sub); line-height:1.9; padding-left:22px; font-size:15px; }
.lesson-body li{ margin:6px 0; }
.lesson-body code:not(pre code){ background:#131c33; border:1px solid var(--line); padding:2px 7px; border-radius:6px; font-family:'Geist Mono','JetBrains Mono',monospace; font-size:12.5px; color:var(--acc); }
pre.code{ background:#0a0f16; border:1px solid #2a343d; border-left:3px solid var(--acc); border-radius:12px; font-size:13px; line-height:1.8; padding:18px 20px; overflow-x:auto; font-family:'Geist Mono','JetBrains Mono',monospace; color:#d5e1f8; margin:16px 0; box-shadow:0 4px 20px -8px rgba(0,0,0,.5); }
pre.code .c{ color:#7c8fb5; } pre.code .k{ color:#c084fc; } pre.code .s{ color:#6ee7b7; } pre.code .f{ color:#38bdf8; } pre.code .n{ color:#fbbf24; }
.callout{ border-left:3px solid var(--acc); background:rgba(110,231,183,.06); border-radius:0 12px 12px 0; padding:14px 18px; margin:18px 0; font-size:14px; color:var(--sub); line-height:1.8; }
.callout.warn{ border-color:var(--warn); background:rgba(251,191,36,.06); }
.callout.key{ border-color:var(--acc2); background:rgba(56,189,248,.06); }
.callout b{ color:var(--ink); }
table.cmp{ width:100%; border-collapse:collapse; margin:16px 0; font-size:13.5px; }
table.cmp th{ text-align:left; padding:10px 12px; border-bottom:1px solid var(--line); color:var(--dim); font-weight:500; font-size:12px; letter-spacing:.05em; }
table.cmp td{ padding:10px 12px; border-bottom:1px solid #16203a; color:var(--sub); line-height:1.6; }
table.cmp td:first-child{ color:var(--ink); font-weight:600; white-space:nowrap; }
.formula{ text-align:center; font-family:'Geist Mono','JetBrains Mono',monospace; font-size:15px; color:var(--acc); background:#0b101c; border:1px solid var(--line); border-radius:12px; padding:16px; margin:18px 0; }
.flow{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:16px 0; font-size:13px; }
.flow .step{ background:#0b101c; border:1px solid var(--line); border-radius:10px; padding:8px 14px; color:var(--ink); }
.flow .arr{ color:var(--dim); }
/* 自测题 */
.quiz-item{ border:1px solid var(--line); border-radius:14px; padding:16px 18px; margin:12px 0; }
.quiz-q{ font-weight:600; font-size:14.5px; display:flex; gap:10px; align-items:flex-start; }
.quiz-toggle{ margin-top:10px; font-size:12px; color:var(--acc2); cursor:pointer; user-select:none; }
.quiz-toggle:hover{ text-decoration:underline; }
.quiz-ans{ display:none; margin-top:10px; padding-top:10px; border-top:1px dashed var(--line); color:var(--sub); font-size:13.5px; line-height:1.8; }
.quiz-item.open .quiz-ans,.quiz-item[open] .quiz-ans{ display:block; }
.quiz-item summary{cursor:pointer;list-style:none}.quiz-item summary::-webkit-details-marker{display:none}.quiz-item summary:focus-visible{outline:2px solid var(--acc);outline-offset:4px}
.legacy-tabs{display:flex;gap:12px;overflow-x:auto;margin-top:28px;border-bottom:1px solid var(--line)}.legacy-tabs button{appearance:none;border:0;border-bottom:2px solid transparent;background:none;color:#93a8bc;white-space:nowrap;padding:13px 18px;cursor:pointer}.legacy-tabs button[aria-selected="true"]{color:#9ff5dd;border-bottom-color:#58e6cf}.legacy-tabs button:focus-visible,.legacy-mechanism button:focus-visible,.legacy-link:focus-visible{outline:2px solid #58e6cf;outline-offset:3px}.legacy-panel{padding:28px 0;min-height:350px}.legacy-panel[hidden]{display:none}.legacy-panel#legacy-panel-code pre{white-space:pre-wrap;overflow:auto;background:#101c2a;border:1px solid #304861;padding:20px;margin:18px 0}.legacy-panel#legacy-panel-code p,.legacy-caption{color:#a8c4d5;line-height:1.8}.legacy-mechanism{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin:24px 0}.legacy-mechanism button{text-align:left;color:#e3f3fc;border:1px solid #375970;background:linear-gradient(130deg,#102b3f,#111927);padding:22px;min-height:165px;cursor:pointer}.legacy-mechanism button:hover{border-color:#58e6cf}.legacy-mechanism small,.legacy-mechanism span{display:block;color:#81d5ed}.legacy-mechanism strong{display:block;font-size:18px;margin:20px 0}.legacy-link{color:#75e8db;text-decoration:underline}#legacyProgress{color:#a5d6d3}@media(max-width:690px){.legacy-tabs{gap:0}.legacy-tabs button{font-size:12px;padding:12px 9px}.legacy-panel{padding:15px 0}.legacy-mechanism{grid-template-columns:1fr}.legacy-mechanism button{min-height:110px}}
/* 完成打卡 */
.lesson-done-btn{ transition:all .3s ease; }
.lesson-done-btn.done{ background:var(--acc)!important; color:#06281c!important; border-color:var(--acc)!important; }
/* 课程卡 */
.lcard .prog{ height:3px; border-radius:99px; background:#1e2a42; overflow:hidden; margin-top:12px; }
.lcard-done{ position:absolute; top:14px; right:14px; font-size:11px; color:#06281c; background:var(--acc); border-radius:99px; padding:3px 10px; font-weight:700; display:none; }
.lcard.is-done .lcard-done{ display:block; }
@media (max-width:640px){ .lesson-body h2{ font-size:21px; } }

/* ===== landing-page-design 规范补充 ===== */
h1,h2,h3,h4{ text-wrap:balance; }
p,li{ text-wrap:pretty; }
a,button,.card-hover,.check{ transition-property:transform,opacity,background-color,border-color,color; transition-duration:300ms; transition-timing-function:cubic-bezier(0.22,1,0.36,1); }
a:focus-visible,button:focus-visible,[onclick]:focus-visible{ outline:2px solid var(--acc); outline-offset:2px; border-radius:6px; }
button:active,.card-hover:active{ transform:scale(0.98); }
.glow-orb{ display:none; }  /* B4: 背景去渐变装饰 */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation:none!important; transition:opacity 200ms linear!important; }
}