:root{
  --ink:#0f172a;--muted:#526173;--line:#dbe7f3;--soft:#f5f9fd;--blue:#2f9df4;--cyan:#15b8d0;--teal:#10b981;--amber:#f59e0b;--rose:#f43f5e;--violet:#8b5cf6;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:"Microsoft YaHei","PingFang SC","Noto Sans SC",Arial,sans-serif;color:var(--ink);background:radial-gradient(circle at 18% 0%,rgba(47,157,244,.13),transparent 34%),radial-gradient(circle at 88% 8%,rgba(16,185,129,.12),transparent 32%),#f4f8fc}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto}
button,input,select,textarea{font:inherit}
.jamie-watermark{position:fixed;right:22px;bottom:18px;z-index:99999;pointer-events:none;padding:8px 14px;border:1px solid rgba(47,157,244,.22);border-radius:999px;background:rgba(255,255,255,.72);backdrop-filter:blur(12px);box-shadow:0 12px 28px rgba(15,23,42,.08);color:rgba(15,23,42,.46);font-weight:900;font-size:13px;letter-spacing:.02em}
.course-home-link{position:fixed;left:18px;bottom:18px;z-index:99998;display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:999px;background:rgba(255,255,255,.84);border:1px solid rgba(219,231,243,.95);box-shadow:0 14px 34px rgba(15,23,42,.12);font-weight:900;color:#0f172a}
.course-home-link:hover{transform:translateY(-1px);border-color:rgba(47,157,244,.55)}
.fa::before,.fas::before,.far::before{content:"";display:inline-block;width:.62em;height:.62em;border-radius:999px;background:currentColor;margin-right:.18em;vertical-align:.08em}
.code-font{font-family:"Cascadia Mono","Consolas","Microsoft YaHei",monospace}
.font-black{font-weight:900}.font-bold{font-weight:700}.font-semibold{font-weight:600}.font-medium{font-weight:500}
.text-center{text-align:center}.text-left{text-align:left}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.break-all{word-break:break-all}.uppercase{text-transform:uppercase}
.hidden{display:none}.block{display:block}.inline-block{display:inline-block}.inline-flex{display:inline-flex}.flex{display:flex}.grid{display:grid}
.items-center{align-items:center}.items-start{align-items:flex-start}.items-stretch{align-items:stretch}.items-end{align-items:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.justify-start{justify-content:flex-start}.justify-end{justify-content:flex-end}.shrink-0{flex-shrink:0}.flex-1{flex:1}
.flex-col{flex-direction:column}.flex-row{flex-direction:row}.flex-wrap{flex-wrap:wrap}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-5{gap:1.25rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}.gap-10{gap:2.5rem}.gap-12{gap:3rem}.gap-14{gap:3.5rem}.gap-16{gap:4rem}
.space-y-2>*+*{margin-top:.5rem}.space-y-3>*+*{margin-top:.75rem}.space-y-4>*+*{margin-top:1rem}.space-y-5>*+*{margin-top:1.25rem}.space-y-6>*+*{margin-top:1.5rem}
.mx-auto{margin-left:auto;margin-right:auto}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-5{margin-top:1.25rem}.mt-6{margin-top:1.5rem}.mt-8{margin-top:2rem}.mt-10{margin-top:2.5rem}.mt-12{margin-top:3rem}.mt-16{margin-top:4rem}
.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.mb-5{margin-bottom:1.25rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.mb-10{margin-bottom:2.5rem}.mb-12{margin-bottom:3rem}.mb-14{margin-bottom:3.5rem}.mb-16{margin-bottom:4rem}.mr-1{margin-right:.25rem}.mr-2{margin-right:.5rem}.ml-2{margin-left:.5rem}
.p-2{padding:.5rem}.p-3{padding:.75rem}.p-4{padding:1rem}.p-5{padding:1.25rem}.p-6{padding:1.5rem}.p-7{padding:1.75rem}.p-8{padding:2rem}.p-10{padding:2.5rem}.p-12{padding:3rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.px-8{padding-left:2rem;padding-right:2rem}.px-10{padding-left:2.5rem;padding-right:2.5rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-1\.5{padding-top:.375rem;padding-bottom:.375rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-4{padding-top:1rem;padding-bottom:1rem}.py-6{padding-top:1.5rem;padding-bottom:1.5rem}.py-10{padding-top:2.5rem;padding-bottom:2.5rem}.py-12{padding-top:3rem;padding-bottom:3rem}.py-16{padding-top:4rem;padding-bottom:4rem}.py-20{padding-top:5rem;padding-bottom:5rem}.py-24{padding-top:6rem;padding-bottom:6rem}.py-32{padding-top:8rem;padding-bottom:8rem}.pt-16{padding-top:4rem}.pt-20{padding-top:5rem}.pt-24{padding-top:6rem}.pt-28{padding-top:7rem}.pt-32{padding-top:8rem}.pb-16{padding-bottom:4rem}.pb-20{padding-bottom:5rem}.pb-24{padding-bottom:6rem}
.w-full{width:100%}.h-full{height:100%}.w-6{width:1.5rem}.w-8{width:2rem}.h-8{height:2rem}.w-10{width:2.5rem}.h-10{height:2.5rem}.w-11{width:2.75rem}.h-11{height:2.75rem}.w-12{width:3rem}.h-12{height:3rem}.w-14{width:3.5rem}.h-14{height:3.5rem}.w-16{width:4rem}.h-16{height:4rem}.w-20{width:5rem}.h-20{height:5rem}.w-24{width:6rem}.w-32{width:8rem}.h-1\.5{height:.375rem}.h-\[380px\]{height:380px}.h-\[440px\]{height:440px}.h-\[500px\]{height:500px}.h-\[520px\]{height:520px}.h-\[560px\]{height:560px}.h-\[600px\]{height:600px}.h-\[650px\]{height:650px}.h-\[700px\]{height:700px}.min-h-screen{min-height:100vh}.min-h-\[120px\]{min-height:120px}.min-h-\[160px\]{min-height:160px}.min-h-\[170px\]{min-height:170px}.min-h-\[180px\]{min-height:180px}.min-h-\[220px\]{min-height:220px}.min-h-\[230px\]{min-height:230px}.min-h-\[260px\]{min-height:260px}.min-h-\[270px\]{min-height:270px}.min-h-\[300px\]{min-height:300px}.min-h-\[360px\]{min-height:360px}.min-h-\[370px\]{min-height:370px}.min-h-\[380px\]{min-height:380px}.min-h-\[420px\]{min-height:420px}.min-h-\[430px\]{min-height:430px}.min-h-\[440px\]{min-height:440px}.min-h-\[460px\]{min-height:460px}.min-h-\[520px\]{min-height:520px}.min-h-\[530px\]{min-height:530px}.min-h-\[560px\]{min-height:560px}.min-h-\[610px\]{min-height:610px}.min-h-\[620px\]{min-height:620px}.min-h-\[640px\]{min-height:640px}.min-h-\[680px\]{min-height:680px}.min-h-\[690px\]{min-height:690px}.min-w-\[34px\]{min-width:34px}.min-w-\[110px\]{min-width:110px}.min-w-\[112px\]{min-width:112px}.min-w-\[620px\]{min-width:620px}.min-w-\[780px\]{min-width:780px}.max-w-sm{max-width:24rem}.max-w-xl{max-width:36rem}.max-w-2xl{max-width:42rem}.max-w-3xl{max-width:48rem}.max-w-4xl{max-width:56rem}.max-w-5xl{max-width:64rem}.max-w-6xl{max-width:72rem}.max-w-7xl{max-width:80rem}.max-w-8xl{max-width:88rem}
.rounded{border-radius:.25rem}.rounded-lg{border-radius:.5rem}.rounded-xl{border-radius:.75rem}.rounded-2xl{border-radius:1rem}.rounded-3xl{border-radius:1.5rem}.rounded-full{border-radius:999px}.rounded-\[28px\]{border-radius:28px}.rounded-\[40px\]{border-radius:40px}
.border{border:1px solid var(--line)}.border-2{border-width:2px;border-style:solid}.border-t{border-top:1px solid var(--line)}.border-b{border-bottom:1px solid var(--line)}.border-y{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.border-dashed{border-style:dashed}.border-collapse{border-collapse:collapse}
.bg-white{background:#fff}.bg-slate-50{background:#f8fafc}.bg-slate-100{background:#f1f5f9}.bg-slate-900{background:#0f172a}.bg-slate-950{background:#020617}.bg-blue-50{background:#eff6ff}.bg-emerald-50{background:#ecfdf5}.bg-purple-50{background:#f5f3ff}.bg-amber-50{background:#fffbeb}.bg-rose-50{background:#fff1f2}
.text-white{color:#fff}.text-slate-900{color:#0f172a}.text-slate-800{color:#1e293b}.text-slate-700{color:#334155}.text-slate-600{color:#475569}.text-slate-500{color:#64748b}.text-slate-400{color:#94a3b8}.text-slate-300{color:#cbd5e1}.text-slate-200{color:#e2e8f0}.text-gray-700{color:#374151}.text-gray-600{color:#4b5563}.text-gray-500{color:#6b7280}.text-gray-400{color:#9ca3af}
.text-blue-500{color:#3b82f6}.text-blue-600{color:#2563eb}.text-blue-700{color:#1d4ed8}.text-cyan-500{color:#06b6d4}.text-emerald-400{color:#34d399}.text-emerald-500{color:#10b981}.text-emerald-700{color:#047857}.text-purple-500{color:#8b5cf6}.text-amber-500{color:#f59e0b}.text-amber-700{color:#b45309}.text-rose-500{color:#f43f5e}.text-orange-300{color:#fdba74}
.text-\[10px\]{font-size:10px}.text-\[11px\]{font-size:11px}.text-\[13px\]{font-size:13px}.text-\[300px\]{font-size:300px}.text-xs{font-size:.75rem}.text-sm{font-size:.875rem}.text-base{font-size:1rem}.text-lg{font-size:1.125rem}.text-xl{font-size:1.25rem}.text-2xl{font-size:1.5rem}.text-3xl{font-size:1.875rem}.text-4xl{font-size:2.25rem}.text-5xl{font-size:3rem}
.leading-tight{line-height:1.15}.leading-relaxed{line-height:1.75}.leading-loose{line-height:2}.tracking-tight{letter-spacing:-.01em}.tracking-tighter{letter-spacing:-.02em}.tracking-widest{letter-spacing:.18em}.tracking-\[0\.3em\]{letter-spacing:.3em}.whitespace-nowrap{white-space:nowrap}.font-mono{font-family:"Cascadia Mono","Consolas","Microsoft YaHei",monospace}.italic{font-style:italic}
.sticky{position:sticky}.top-0{top:0}.z-10{z-index:10}.z-50{z-index:50}.z-\[100\]{z-index:100}.z-\[200\]{z-index:200}.overflow-hidden{overflow:hidden}.overflow-auto{overflow:auto}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}
.shadow-sm{box-shadow:0 1px 2px rgba(15,23,42,.06)}.shadow-xl{box-shadow:0 20px 45px rgba(15,23,42,.13)}.shadow-2xl{box-shadow:0 28px 70px rgba(15,23,42,.18)}.transition-all{transition:all .2s ease}.duration-500{transition-duration:.5s}.hover\:bg-blue-600:hover,.hover\:bg-slate-800:hover{background:#1a91da}.hover\:bg-\[\#1a91da\]:hover{background:#1a91da}.hover\:text-black:hover{color:#0b1b33}
.glass-card,.soft-card,.card{background:rgba(255,255,255,.86);border:1px solid rgba(219,231,243,.92);box-shadow:0 18px 46px rgba(15,23,42,.08);backdrop-filter:blur(16px)}
.gradient-text{background:linear-gradient(120deg,#2f9df4,#14b8a6,#f59e0b);-webkit-background-clip:text;background-clip:text;color:transparent}
.nav-link{display:inline-flex;align-items:center;justify-content:center;padding:.62rem 1rem;border:1px solid rgba(219,231,243,.9);border-radius:999px;background:rgba(255,255,255,.75);font-weight:900;color:#475569;transition:all .2s ease}
.nav-link:hover,.nav-link.active{background:#e8f6ff;color:#0f82db;border-color:#b9e6ff}
.tag{display:inline-flex;align-items:center;gap:.35rem;padding:.35rem .7rem;border-radius:999px;font-size:.78rem;font-weight:900;border:1px solid rgba(219,231,243,.9);background:#fff;color:#2563eb}
.mini-input,.mini-select,.mini-textarea{width:100%;border:1px solid #dbe7f3;border-radius:14px;background:#fff;padding:.8rem 1rem;color:#0f172a;outline:none}.mini-textarea{min-height:110px}
.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2,.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3,.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-4,.md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.grid-cols-12,.md\:grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}
.col-span-1{grid-column:span 1/span 1}.col-span-2{grid-column:span 2/span 2}.col-span-3{grid-column:span 3/span 3}.col-span-4{grid-column:span 4/span 4}.col-span-5{grid-column:span 5/span 5}.col-span-6{grid-column:span 6/span 6}.col-span-7{grid-column:span 7/span 7}.col-span-8{grid-column:span 8/span 8}.col-span-9{grid-column:span 9/span 9}.col-span-10{grid-column:span 10/span 10}.col-span-11{grid-column:span 11/span 11}.col-span-12{grid-column:span 12/span 12}
@media(max-width:860px){.grid,.grid-cols-2,.grid-cols-3,.grid-cols-4,.md\:grid-cols-2,.md\:grid-cols-3,.md\:grid-cols-4{grid-template-columns:1fr}.md\:inline-flex{display:none}.md\:text-5xl{font-size:2.4rem}.text-4xl{font-size:2rem}.course-home-link{left:12px;bottom:12px}.jamie-watermark{right:12px;bottom:12px}}

/* Jamie blue studio theme: restore local responsive layouts and keep lesson-specific UI intact. */
:root{
  --ink:#0b1b33;--muted:#486078;--line:#d8e8f6;--soft:#f5fbff;--blue:#1d9bf0;--cyan:#38bdf8;--teal:#0ea5e9;--amber:#1d9bf0;--rose:#2563eb;--violet:#2563eb;
}
body{
  background:
    radial-gradient(circle at 78% 8%,rgba(125,211,252,.22),transparent 30%),
    radial-gradient(circle at 9% 18%,rgba(29,155,240,.14),transparent 28%),
    linear-gradient(180deg,#f8fcff 0%,#eef7ff 46%,#f9fcff 100%) !important;
  color:#0b1b33;
}
.gradient-text{
  background:linear-gradient(90deg,#0f82db,#1d9bf0,#06b6d4) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  color:transparent !important;
  -webkit-text-fill-color:transparent;
}
.cursor-pointer{cursor:pointer}.backdrop-blur-xl{backdrop-filter:blur(20px)}.bg-white\/80{background:rgba(255,255,255,.86)}
.bg-gray-50{background:#f9fafb}.bg-slate-50\/80{background:rgba(248,250,252,.8)}
.leading-light{line-height:1.12}
.nav-blur{
  background:rgba(255,255,255,.88) !important;
  border-bottom:1px solid rgba(216,232,246,.95) !important;
  box-shadow:0 10px 30px rgba(15,77,130,.06);
}
.nav-blur .nav-link{
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  padding:1.25rem 0 !important;
  color:#486078 !important;
  box-shadow:none !important;
}
.nav-blur .nav-link.active,.nav-blur .nav-link:hover{color:#1d9bf0 !important}
.nav-blur .nav-link.active::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:4px;border-radius:999px;background:#1d9bf0;
}
.hero-shell{background:linear-gradient(120deg,#ffffff 0%,#f7fbff 46%,#eaf7ff 100%) !important}
.hero-shell,.py-16,.py-20{scroll-margin-top:5rem}
main>section,body>section{margin-bottom:2.8rem}
.studio-panel{border-color:rgba(186,230,253,.72) !important;box-shadow:0 26px 60px -42px rgba(15,77,130,.42) !important}
.glass-card,.soft-card,.flow-node,.scene-card,.quiz-option,.choice-card{
  border-color:rgba(186,230,253,.72) !important;
  box-shadow:0 18px 40px -34px rgba(15,77,130,.46) !important;
}
.glass-card:hover,.flow-node.active,.scene-card.active,.quiz-option:hover{border-color:#7dd3fc !important;box-shadow:0 24px 46px -32px rgba(29,155,240,.55) !important}
.tag-blue,.tag-purple,.tag-green,.tag-amber,.tag-rose{color:#0f82db !important;background:#eef8ff !important;border-color:#b9e6ff !important}
.btn-primary,.btn-blue,.lesson-link:hover,.topbar .nav-link.active,.topbar .nav-link:hover{
  background:linear-gradient(135deg,#1d9bf0,#0ea5e9) !important;
  color:#fff !important;
  border-color:transparent !important;
  box-shadow:0 14px 28px -18px rgba(29,155,240,.75);
}
.nav-blur .nav-link.active,.nav-blur .nav-link:hover{
  background:transparent !important;
  color:#1d9bf0 !important;
  border-color:transparent !important;
  box-shadow:none !important;
}
body>nav.fixed.top-0{
  height:72px !important;
  background:rgba(255,255,255,.92) !important;
  backdrop-filter:blur(18px);
  border-bottom:1px solid #d8e8f6 !important;
  box-shadow:0 10px 32px rgba(15,77,130,.06);
}
body>nav.fixed.top-0>div{
  height:72px !important;
  max-width:1280px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:24px !important;
}
body>nav.fixed.top-0>div>div:first-child,
body>nav.fixed.top-0>div>a:first-child{
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
  min-width:260px;
}
body>nav.fixed.top-0>div>div:first-child>div:first-child,
body>nav.fixed.top-0>div>a:first-child>div:first-child{
  width:36px !important;
  height:36px !important;
  border-radius:12px !important;
  background:linear-gradient(135deg,#38bdf8,#1d9bf0) !important;
  box-shadow:0 12px 26px -18px rgba(29,155,240,.8) !important;
  color:#fff !important;
  display:grid !important;
  place-items:center !important;
  flex:0 0 auto !important;
}
body>nav.fixed.top-0 span.font-black{
  color:#0b1b33 !important;
  font-size:20px !important;
  letter-spacing:0 !important;
  white-space:nowrap;
}
body>nav.fixed.top-0>div>div:last-child{
  height:100% !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:28px !important;
  min-width:0;
  overflow-x:auto;
  overflow-y:hidden;
}
body>nav.fixed.top-0 .nav-link{
  height:100% !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:0 2px !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  color:#486078 !important;
  box-shadow:none !important;
  white-space:nowrap !important;
  font-weight:900 !important;
}
body>nav.fixed.top-0 .nav-link.active,
body>nav.fixed.top-0 .nav-link:hover{
  color:#1d9bf0 !important;
  background:transparent !important;
  box-shadow:none !important;
}
body>nav.fixed.top-0 .nav-link.active::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:4px;
  border-radius:999px;
  background:#1d9bf0;
}
body.pt-16,body[class~="pt-16"]{padding-top:72px !important}
body>nav.fixed.top-0+section[id]{padding-top:5.5rem !important}
.btn-ghost,.lesson-link{
  background:rgba(255,255,255,.9) !important;
  border-color:#cfe7f8 !important;
  color:#0b1b33 !important;
}
.flow-rail,.hero-rail{
  background:linear-gradient(90deg,#1d9bf0,#38bdf8,#0ea5e9) !important;
}
.bg-\[\#0b0f19\],.bg-\[\#0f1419\],.bg-\[\#0f1522\],.bg-\[\#0f172a\],.bg-\[\#1e293b\],.code-window,.bg-slate-900,.bg-slate-950{
  background:linear-gradient(145deg,#0e2a47,#123d63) !important;
  border-color:rgba(125,211,252,.22) !important;
}
.bg-\[\#131b2c\],.bg-\[\#15181c\],.code-header{background:rgba(8,32,55,.82) !important;border-bottom-color:rgba(125,211,252,.18) !important}
.code-window,.code-window pre,.code-window code,.code-window .code-font,.bg-slate-900,.bg-slate-950,.bg-\[\#0b0f19\],.bg-\[\#0f1419\],.bg-\[\#0f1522\],.bg-\[\#0f172a\],.bg-\[\#1e293b\]{color:#dbeafe !important}
.code-window .text-slate-500,.code-window .text-slate-400,.bg-slate-900 .text-slate-500,.bg-slate-950 .text-slate-500{color:#a8c7e6 !important}
button.bg-slate-900,a.bg-slate-900,button.bg-slate-950,a.bg-slate-950,button.bg-\[\#0f172a\],a.bg-\[\#0f172a\],button.bg-\[\#0b0f19\],a.bg-\[\#0b0f19\],.action-btn{
  background:linear-gradient(135deg,#1d9bf0,#0ea5e9) !important;
  color:#fff !important;
  border-color:transparent !important;
  box-shadow:0 16px 32px -22px rgba(29,155,240,.8);
}
button.bg-slate-900:hover,a.bg-slate-900:hover,button.bg-slate-950:hover,a.bg-slate-950:hover,.action-btn:hover{filter:brightness(.98);transform:translateY(-1px)}
.bg-\[\#1da1f2\]{background:#1d9bf0 !important}.bg-\[\#f0f7ff\]{background:#eff8ff !important}.bg-\[\#ff5f56\]{background:#fb7185 !important}.bg-\[\#ffbd2e\]{background:#facc15 !important}.bg-\[\#27c93f\]{background:#34d399 !important}
.text-\[\#14171a\]{color:#0b1b33 !important}.text-\[\#1da1f2\]{color:#1d9bf0 !important}.text-\[\#657786\]{color:#486078 !important}.text-\[\#7ee787\]{color:#86efac !important}.text-\[\#a5d6ff\]{color:#bfdbfe !important}.text-\[\#d2a8ff\]{color:#dbeafe !important}.text-\[\#ff7b72\]{color:#fecaca !important}
.border-\[\#1da1f2\]\/20{border-color:rgba(29,155,240,.2) !important}.border-\[\#1e293b\],.border-\[\#2f3336\],.border-\[\#334155\]{border-color:rgba(125,211,252,.22) !important}
section.bg-slate-900,section.bg-\[\#0f1419\],section.bg-\[\#0b0f19\],section.bg-\[\#0f1522\]{
  background:linear-gradient(180deg,#f8fcff,#edf8ff) !important;
  color:#0b1b33 !important;
  border-top:1px solid #d8e8f6;
  border-bottom:1px solid #d8e8f6;
}
section.bg-slate-900 h1,section.bg-slate-900 h2,section.bg-slate-900 h3,
section.bg-\[\#0f1419\] h1,section.bg-\[\#0f1419\] h2,section.bg-\[\#0f1419\] h3,
section.bg-\[\#0b0f19\] h1,section.bg-\[\#0b0f19\] h2,section.bg-\[\#0b0f19\] h3{
  color:#0b1b33 !important;
}
section.bg-slate-900 .text-white,section.bg-\[\#0f1419\] .text-white,section.bg-\[\#0b0f19\] .text-white{color:#0b1b33 !important}
section.bg-slate-900 .text-gray-400,section.bg-\[\#0f1419\] .text-gray-400,section.bg-\[\#0b0f19\] .text-gray-400{color:#486078 !important}
section.bg-slate-900 .code-window .text-white,section.bg-\[\#0f1419\] .code-window .text-white,section.bg-\[\#0b0f19\] .code-window .text-white{color:#fff !important}
.workflow-node-panel{
  height:auto !important;
  min-height:520px;
  overflow:visible !important;
}
.workflow-node-body{
  justify-content:flex-start !important;
  gap:0;
  min-height:0;
  overflow:visible !important;
}
#desc-code{
  display:block;
  width:100%;
  max-height:190px;
  overflow:auto !important;
  white-space:pre-wrap;
  word-break:break-word;
  line-height:1.7;
  margin-bottom:4px;
}

/* Course-wide button clarity: keep secondary controls readable on light and code panels. */
.btn-ghost,
.ghost-btn,
.copy-btn,
.shot-btn,
.selector-btn:not(.active),
.workflow-tab:not(.active),
.demo-stage-btn:not(.active),
.module-btn:not(.active),
button.bg-slate-100,
button.bg-slate-200,
button.bg-slate-700,
button.bg-slate-800,
button.bg-black,
button.bg-gray-100,
button.bg-gray-200,
button[class*="bg-slate-200"],
button[class*="bg-slate-700"],
button[class*="bg-slate-800"],
button[class*="bg-black"],
button[class*="bg-gray-200"]{
  background:linear-gradient(180deg,#ffffff 0%,#eef8ff 100%) !important;
  color:#0b355b !important;
  border:1px solid #a7daf8 !important;
  opacity:1 !important;
  box-shadow:0 12px 26px -20px rgba(29,155,240,.62) !important;
  text-shadow:none !important;
}
.btn-ghost:hover,
.ghost-btn:hover,
.copy-btn:hover,
.shot-btn:hover,
.selector-btn:not(.active):hover,
.workflow-tab:not(.active):hover,
.demo-stage-btn:not(.active):hover,
.module-btn:not(.active):hover,
button.bg-slate-100:hover,
button.bg-slate-200:hover,
button.bg-slate-700:hover,
button.bg-slate-800:hover,
button.bg-black:hover,
button.bg-gray-100:hover,
button.bg-gray-200:hover{
  background:linear-gradient(180deg,#eaf7ff 0%,#d8f0ff 100%) !important;
  color:#075985 !important;
  border-color:#6ec8f6 !important;
  transform:translateY(-1px);
}
.copy-btn i,
.btn-ghost i,
.ghost-btn i,
.shot-btn i{
  color:inherit !important;
}
.btn-ghost *,
.ghost-btn *,
.copy-btn *,
.shot-btn *,
.selector-btn:not(.active) *,
.workflow-tab:not(.active) *,
.demo-stage-btn:not(.active) *,
.module-btn:not(.active) *,
button.bg-slate-700 *,
button.bg-slate-800 *,
button.bg-black *,
button.bg-slate-200 *,
button.bg-gray-200 *{
  color:inherit !important;
  text-shadow:none !important;
}
.selector-btn.active,
.workflow-tab.active,
.demo-stage-btn.active,
.module-btn.active,
.tab.active,
.copy-btn.active,
button.bg-\[\#1da1f2\],
button.bg-blue-500,
a.bg-blue-500{
  background:linear-gradient(135deg,#1d9bf0,#0ea5e9) !important;
  color:#fff !important;
  border-color:transparent !important;
  opacity:1 !important;
  box-shadow:0 16px 32px -22px rgba(29,155,240,.78) !important;
}
.selector-btn.active *,
.workflow-tab.active *,
.demo-stage-btn.active *,
.module-btn.active *,
.tab.active *,
.copy-btn.active *,
button.bg-\[\#1da1f2\] *,
button.bg-blue-500 *,
a.bg-blue-500 *{
  color:#fff !important;
  text-shadow:none !important;
}
button:disabled,
button[disabled],
.copy-btn:disabled,
.btn-ghost:disabled,
.ghost-btn:disabled,
.shot-btn:disabled{
  background:linear-gradient(180deg,#f8fbfe 0%,#e8f1f8 100%) !important;
  color:#526a82 !important;
  border:1px solid #bfd8ea !important;
  opacity:1 !important;
  cursor:not-allowed !important;
  box-shadow:0 8px 18px -16px rgba(15,77,130,.55) !important;
}
.hover\:bg-slate-200:hover,
.hover\:bg-slate-300:hover,
.hover\:bg-gray-200:hover,
.hover\:bg-gray-300:hover{
  background:#dff3ff !important;
  color:#0b355b !important;
}
.bg-purple-50,.bg-violet-50,.bg-emerald-50,.bg-amber-50,.bg-rose-50,.bg-green-50{background:#f3faff !important}
.bg-purple-100,.bg-violet-100,.bg-emerald-100,.bg-amber-100,.bg-rose-100,.bg-green-100{background:#e4f5ff !important}

.relative{position:relative}.absolute{position:absolute}.fixed{position:fixed}.inset-0{inset:0}.w-full{width:100%}.h-16{height:4rem}.w-10{width:2.5rem}.h-10{height:2.5rem}.w-11{width:2.75rem}.h-11{height:2.75rem}
.pt-24{padding-top:6rem}.pt-28{padding-top:7rem}.pb-16{padding-bottom:4rem}.pb-20{padding-bottom:5rem}.py-12{padding-top:3rem;padding-bottom:3rem}.py-14{padding-top:3.5rem;padding-bottom:3.5rem}.py-20{padding-top:5rem;padding-bottom:5rem}
.lg\:p-7{padding:1.75rem}.min-h-\[120px\]{min-height:120px}.max-w-2xl{max-width:42rem}.max-w-7xl{max-width:80rem}
.shadow-lg{box-shadow:0 10px 22px rgba(15,77,130,.12)}.shadow-blue-200{box-shadow:0 12px 24px rgba(29,155,240,.18)}
.text-6xl{font-size:3.75rem}.text-7xl{font-size:4.5rem}
.dot.bg-red-400{background:#fb7185}.dot.bg-yellow-400{background:#facc15}.dot.bg-green-400{background:#34d399}

@media(min-width:640px){
  .sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(min-width:768px){
  .md\:block{display:block}
  .md\:flex{display:flex}
  .md\:inline-flex{display:inline-flex}
  .md\:flex-row{flex-direction:row}
  .md\:items-center{align-items:center}
  .md\:items-end{align-items:flex-end}
  .md\:justify-between{justify-content:space-between}
  .md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .md\:grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}
  .md\:col-span-5{grid-column:span 5/span 5}
  .md\:col-span-7{grid-column:span 7/span 7}
  .md\:p-12{padding:3rem}
  .md\:w-72{width:18rem}
  .md\:w-80{width:20rem}
  .md\:text-xl{font-size:1.25rem}
  .md\:text-5xl{font-size:3rem}
  .md\:text-6xl{font-size:3.75rem}
  .md\:text-7xl{font-size:4.5rem}
}
@media(min-width:1024px){
  .lg\:flex{display:flex}
  .lg\:flex-row{flex-direction:row}
  .hidden.lg\:flex{display:flex}
  .lg\:grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}
  .lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .lg\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}
  .lg\:grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}
  .lg\:grid-cols-\[\.72fr_1\.28fr\]{grid-template-columns:.72fr 1.28fr}
  .lg\:grid-cols-\[\.78fr_1\.22fr\]{grid-template-columns:.78fr 1.22fr}
  .lg\:grid-cols-\[\.85fr_1\.15fr\]{grid-template-columns:.85fr 1.15fr}
  .lg\:grid-cols-\[\.9fr_1\.1fr\]{grid-template-columns:.9fr 1.1fr}
  .lg\:grid-cols-\[\.95fr_1\.05fr\]{grid-template-columns:.95fr 1.05fr}
  .lg\:grid-cols-\[1\.03fr_\.97fr\]{grid-template-columns:1.03fr .97fr}
  .lg\:grid-cols-\[1\.05fr_\.95fr\]{grid-template-columns:1.05fr .95fr}
  .lg\:grid-cols-\[1\.1fr_\.9fr\]{grid-template-columns:1.1fr .9fr}
  .lg\:grid-cols-\[1fr_1fr\]{grid-template-columns:1fr 1fr}
  .lg\:col-span-1{grid-column:span 1/span 1}.lg\:col-span-2{grid-column:span 2/span 2}.lg\:col-span-3{grid-column:span 3/span 3}.lg\:col-span-4{grid-column:span 4/span 4}.lg\:col-span-5{grid-column:span 5/span 5}.lg\:col-span-6{grid-column:span 6/span 6}.lg\:col-span-7{grid-column:span 7/span 7}.lg\:col-span-8{grid-column:span 8/span 8}.lg\:col-span-9{grid-column:span 9/span 9}.lg\:col-span-10{grid-column:span 10/span 10}.lg\:col-span-11{grid-column:span 11/span 11}.lg\:col-span-12{grid-column:span 12/span 12}
  .lg\:p-7{padding:1.75rem}
}
@media(min-width:1280px){
  .xl\:grid-cols-\[1\.05fr_\.95fr\]{grid-template-columns:1.05fr .95fr}
  .xl\:grid-cols-\[1\.1fr_\.9fr\]{grid-template-columns:1.1fr .9fr}
}
@media(max-width:767px){
  .hidden.md\:inline-flex{display:none}
  .hero-title{font-size:2.7rem !important}
  body>nav.fixed.top-0>div{padding-left:16px !important;padding-right:16px !important}
  body>nav.fixed.top-0 span.font-black{font-size:17px !important;white-space:normal}
  body>nav.fixed.top-0>div>div:first-child,body>nav.fixed.top-0>div>a:first-child{min-width:0}
  body>nav.fixed.top-0>div>div:last-child{display:none !important}
}

/* Course maps dashboard refinement */
.page .topbar{
  background:rgba(255,255,255,.92) !important;
  border-bottom-color:#d8e8f6 !important;
  box-shadow:0 10px 32px rgba(15,77,130,.06);
}
.page .brand-mark{
  background:linear-gradient(135deg,#38bdf8,#1d9bf0) !important;
  box-shadow:0 14px 30px -20px rgba(29,155,240,.72) !important;
}
.page .tab{
  color:#486078 !important;
  background:rgba(255,255,255,.9) !important;
  border-color:#cfe7f8 !important;
  border-radius:14px !important;
}
.page .tab:hover,.page .tab.active{
  color:#fff !important;
  background:linear-gradient(135deg,#1d9bf0,#0ea5e9) !important;
  border-color:transparent !important;
  box-shadow:0 16px 30px -22px rgba(29,155,240,.8) !important;
}
.page .hero{
  background:
    linear-gradient(135deg,rgba(255,255,255,.86),rgba(235,248,255,.82)),
    radial-gradient(circle at 82% 18%,rgba(56,189,248,.24),transparent 28rem) !important;
  border-color:#cfe7f8 !important;
}
.page .brand-card,.page .summary-card,.page .metric-card,.page .overview-card,.page .panel{
  border-color:#cfe7f8 !important;
  box-shadow:0 22px 56px -40px rgba(15,77,130,.48) !important;
}
.page .brand-card .tile,.page .overview-card,.page .metric-card{
  background:linear-gradient(180deg,#ffffff,#f4fbff) !important;
}
.page .accent-blue,.page .blue,.page [style*="--node-color"]{
  --node-color:#1d9bf0 !important;
}
.page .hero-title span,.page .metric strong,.page .panel-head h2,.page .panel-head h3{
  color:#0b1b33;
}

/* Dark teaching panels: prevent low-contrast dark text inside code/demo boxes. */
.code-window :is(h1,h2,h3,h4,h5,h6,p,li,div,span,strong,label,pre,code,.text-slate-900,.text-slate-800,.text-slate-700,.text-slate-600,.text-slate-500,.text-gray-700,.text-gray-600,.text-gray-500),
.bg-\[\#0b0f19\] :is(h1,h2,h3,h4,h5,h6,p,li,div,span,strong,label,pre,code,.text-slate-900,.text-slate-800,.text-slate-700,.text-slate-600,.text-slate-500,.text-gray-700,.text-gray-600,.text-gray-500),
.bg-\[\#0f1419\] :is(h1,h2,h3,h4,h5,h6,p,li,div,span,strong,label,pre,code,.text-slate-900,.text-slate-800,.text-slate-700,.text-slate-600,.text-slate-500,.text-gray-700,.text-gray-600,.text-gray-500),
.bg-\[\#0f1522\] :is(h1,h2,h3,h4,h5,h6,p,li,div,span,strong,label,pre,code,.text-slate-900,.text-slate-800,.text-slate-700,.text-slate-600,.text-slate-500,.text-gray-700,.text-gray-600,.text-gray-500),
.bg-\[\#0f172a\] :is(h1,h2,h3,h4,h5,h6,p,li,div,span,strong,label,pre,code,.text-slate-900,.text-slate-800,.text-slate-700,.text-slate-600,.text-slate-500,.text-gray-700,.text-gray-600,.text-gray-500),
.bg-\[\#1e293b\] :is(h1,h2,h3,h4,h5,h6,p,li,div,span,strong,label,pre,code,.text-slate-900,.text-slate-800,.text-slate-700,.text-slate-600,.text-slate-500,.text-gray-700,.text-gray-600,.text-gray-500),
.bg-slate-900:not(section) :is(h1,h2,h3,h4,h5,h6,p,li,div,span,strong,label,pre,code,.text-slate-900,.text-slate-800,.text-slate-700,.text-slate-600,.text-slate-500,.text-gray-700,.text-gray-600,.text-gray-500),
.bg-slate-950:not(section) :is(h1,h2,h3,h4,h5,h6,p,li,div,span,strong,label,pre,code,.text-slate-900,.text-slate-800,.text-slate-700,.text-slate-600,.text-slate-500,.text-gray-700,.text-gray-600,.text-gray-500){
  color:#dbeafe !important;
  text-shadow:none !important;
}
.code-window .code-header :is(span,div,p,strong),
.bg-\[\#0b0f19\] .code-header :is(span,div,p,strong),
.bg-\[\#0f172a\] .code-header :is(span,div,p,strong),
.bg-\[\#1e293b\] .code-header :is(span,div,p,strong){
  color:#bfdbfe !important;
}
.code-window .text-white,
.bg-\[\#0b0f19\] .text-white,
.bg-\[\#0f172a\] .text-white,
.bg-\[\#1e293b\] .text-white,
.bg-slate-900:not(section) .text-white{
  color:#ffffff !important;
}
.code-window .text-emerald-300,
.bg-\[\#0b0f19\] .text-emerald-300,
.bg-\[\#0f172a\] .text-emerald-300,
.bg-\[\#1e293b\] .text-emerald-300,
.bg-slate-900:not(section) .text-emerald-300{
  color:#6ee7b7 !important;
}
.code-window .text-blue-300,
.bg-\[\#0b0f19\] .text-blue-300,
.bg-\[\#0f172a\] .text-blue-300,
.bg-\[\#1e293b\] .text-blue-300,
.bg-slate-900:not(section) .text-blue-300{
  color:#93c5fd !important;
}
.code-window .text-amber-300,
.bg-\[\#0b0f19\] .text-amber-300,
.bg-\[\#0f172a\] .text-amber-300,
.bg-\[\#1e293b\] .text-amber-300,
.bg-slate-900:not(section) .text-amber-300{
  color:#fcd34d !important;
}
.code-window .text-rose-300,
.bg-\[\#0b0f19\] .text-rose-300,
.bg-\[\#0f172a\] .text-rose-300,
.bg-\[\#1e293b\] .text-rose-300,
.bg-slate-900:not(section) .text-rose-300{
  color:#fda4af !important;
}

/* Re-apply button contrast after dark-panel text normalization. */
.code-window :is(.btn-ghost,.ghost-btn,.copy-btn,.shot-btn,.selector-btn:not(.active),.workflow-tab:not(.active),.demo-stage-btn:not(.active),.module-btn:not(.active)),
.bg-\[\#0b0f19\] :is(.btn-ghost,.ghost-btn,.copy-btn,.shot-btn,.selector-btn:not(.active),.workflow-tab:not(.active),.demo-stage-btn:not(.active),.module-btn:not(.active)),
.bg-\[\#0f172a\] :is(.btn-ghost,.ghost-btn,.copy-btn,.shot-btn,.selector-btn:not(.active),.workflow-tab:not(.active),.demo-stage-btn:not(.active),.module-btn:not(.active)),
.bg-\[\#1e293b\] :is(.btn-ghost,.ghost-btn,.copy-btn,.shot-btn,.selector-btn:not(.active),.workflow-tab:not(.active),.demo-stage-btn:not(.active),.module-btn:not(.active)),
.bg-slate-900:not(section) :is(.btn-ghost,.ghost-btn,.copy-btn,.shot-btn,.selector-btn:not(.active),.workflow-tab:not(.active),.demo-stage-btn:not(.active),.module-btn:not(.active)){
  background:linear-gradient(180deg,#ffffff 0%,#eef8ff 100%) !important;
  color:#0b355b !important;
  border:1px solid #a7daf8 !important;
  opacity:1 !important;
  box-shadow:0 12px 26px -20px rgba(29,155,240,.62) !important;
}
.code-window :is(.btn-ghost,.ghost-btn,.copy-btn,.shot-btn,.selector-btn:not(.active),.workflow-tab:not(.active),.demo-stage-btn:not(.active),.module-btn:not(.active)) *,
.bg-\[\#0b0f19\] :is(.btn-ghost,.ghost-btn,.copy-btn,.shot-btn,.selector-btn:not(.active),.workflow-tab:not(.active),.demo-stage-btn:not(.active),.module-btn:not(.active)) *,
.bg-\[\#0f172a\] :is(.btn-ghost,.ghost-btn,.copy-btn,.shot-btn,.selector-btn:not(.active),.workflow-tab:not(.active),.demo-stage-btn:not(.active),.module-btn:not(.active)) *,
.bg-\[\#1e293b\] :is(.btn-ghost,.ghost-btn,.copy-btn,.shot-btn,.selector-btn:not(.active),.workflow-tab:not(.active),.demo-stage-btn:not(.active),.module-btn:not(.active)) *,
.bg-slate-900:not(section) :is(.btn-ghost,.ghost-btn,.copy-btn,.shot-btn,.selector-btn:not(.active),.workflow-tab:not(.active),.demo-stage-btn:not(.active),.module-btn:not(.active)) *{
  color:#0b355b !important;
}

/* Enterprise poster lesson: keep the dense top navigation aligned and unobtrusive. */
.poster-nav{
  width:100% !important;
  overflow:hidden !important;
}
.poster-nav .poster-nav-inner{
  max-width:1680px !important;
  width:100% !important;
  height:72px !important;
  padding-left:40px !important;
  padding-right:40px !important;
  gap:28px !important;
}
.poster-nav .poster-nav-inner>div:first-child{
  flex:0 0 auto !important;
  min-width:360px !important;
}
.poster-nav .nav-scroll{
  flex:1 1 auto !important;
  min-width:0 !important;
  justify-content:flex-end !important;
  gap:26px !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  scrollbar-width:none;
}
.poster-nav .nav-scroll::-webkit-scrollbar{display:none}
.poster-nav .nav-link{
  flex:0 0 auto !important;
  font-size:15px !important;
  padding-left:0 !important;
  padding-right:0 !important;
}
body>nav.poster-nav.fixed.top-0>div.poster-nav-inner{
  max-width:1680px !important;
  width:100% !important;
  height:72px !important;
  padding-left:40px !important;
  padding-right:40px !important;
  gap:28px !important;
}
body>nav.poster-nav.fixed.top-0>div.poster-nav-inner>div:first-child{
  flex:0 0 auto !important;
  min-width:360px !important;
}
body>nav.poster-nav.fixed.top-0>div.poster-nav-inner>div.nav-scroll{
  flex:1 1 auto !important;
  min-width:0 !important;
  justify-content:flex-end !important;
  gap:26px !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
}
@media(max-width:1100px){
  .poster-nav .poster-nav-inner{padding-left:20px !important;padding-right:20px !important;gap:16px !important}
  .poster-nav .poster-nav-inner>div:first-child{min-width:260px !important}
  .poster-nav .nav-scroll{gap:18px !important}
  .poster-nav .nav-link{font-size:14px !important}
  body>nav.poster-nav.fixed.top-0>div.poster-nav-inner{padding-left:20px !important;padding-right:20px !important;gap:16px !important}
  body>nav.poster-nav.fixed.top-0>div.poster-nav-inner>div:first-child{min-width:260px !important}
  body>nav.poster-nav.fixed.top-0>div.poster-nav-inner>div.nav-scroll{gap:18px !important}
}

/* Prompt lesson case panel: precise contrast fix. */
#demo .bg-\[\#0f172a\] h3,
#demo .bg-\[\#0f172a\] .prompt-case-title,
#demo .bg-\[\#0f172a\] > .flex:first-child h3{
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
  text-shadow:none !important;
}
#demo .bg-\[\#0f172a\] > .flex:first-child p,
#demo .bg-\[\#0f172a\] .prompt-case-subtitle{
  color:#e0f2fe !important;
  -webkit-text-fill-color:#e0f2fe !important;
}
#demo #demo-stage-tag,
#demo .bg-\[\#0f172a\] #demo-stage-tag,
#demo .bg-\[\#0f172a\] .tag.tag-blue{
  background:#dff3ff !important;
  color:#075985 !important;
  -webkit-text-fill-color:#075985 !important;
  border-color:#7dd3fc !important;
  box-shadow:0 12px 24px -16px rgba(29,155,240,.7) !important;
}
#demo .demo-stage-btn{
  background:#f2f9ff !important;
  color:#07385f !important;
  -webkit-text-fill-color:#07385f !important;
  border-color:#9bd8fb !important;
  font-weight:900 !important;
}
#demo .demo-stage-btn.bg-sky-500,
#demo .demo-stage-btn[class*="bg-sky-500"]{
  background:linear-gradient(135deg,#1d9bf0,#0ea5e9) !important;
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
  border-color:transparent !important;
}
#handoff .code-window pre,
#handoff .code-window pre *,
#handoff .code-window .code-font{
  color:#eaf4ff !important;
  -webkit-text-fill-color:#eaf4ff !important;
  opacity:1 !important;
}
#handoff .code-window .code-header span{
  color:#bfdbfe !important;
  -webkit-text-fill-color:#bfdbfe !important;
}

/* Prompt lesson: restore strong contrast across the full demo block. */
#demo [class*="bg-[#0f172a]"] .prompt-case-title,
#demo [class*="bg-[#0f172a]"] > .flex:first-child h3,
#demo [class*="bg-[#0f172a]"] h3.text-white{
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
}
#demo [class*="bg-[#0f172a]"] .prompt-case-subtitle,
#demo [class*="bg-[#0f172a]"] > .flex:first-child p,
#demo [class*="bg-[#0f172a]"] p.text-slate-400{
  color:#d7ebff !important;
  -webkit-text-fill-color:#d7ebff !important;
}
#demo [class*="bg-[#0f172a]"] .code-window,
#demo [class*="bg-[#0f172a]"] .code-window pre,
#demo [class*="bg-[#0f172a]"] .code-window code,
#demo [class*="bg-[#0f172a]"] .code-window .code-font{
  color:#f1f8ff !important;
  -webkit-text-fill-color:#f1f8ff !important;
}
#demo [class*="bg-[#0f172a]"] .code-header span:first-child{
  color:#bfdbfe !important;
  -webkit-text-fill-color:#bfdbfe !important;
}
#demo [class*="bg-[#0f172a]"] #demo-stage-focus{
  color:#5eead4 !important;
  -webkit-text-fill-color:#5eead4 !important;
}
#demo [class*="bg-[#0f172a]"] .bg-white,
#demo [class*="bg-[#0f172a]"] .bg-slate-50,
#demo [class*="bg-[#0f172a]"] .bg-slate-100{
  color:#0b1b33 !important;
  -webkit-text-fill-color:#0b1b33 !important;
}
#demo [class*="bg-[#0f172a]"] .bg-white :is(h1,h2,h3,h4,h5,h6,div,p,span,strong,li),
#demo [class*="bg-[#0f172a]"] .bg-slate-50 :is(h1,h2,h3,h4,h5,h6,div,p,span,strong,li),
#demo [class*="bg-[#0f172a]"] .bg-slate-100 :is(h1,h2,h3,h4,h5,h6,div,p,span,strong,li){
  color:#1f3348 !important;
  -webkit-text-fill-color:#1f3348 !important;
  opacity:1 !important;
}
#demo [class*="bg-[#0f172a]"] #demo-console,
#demo [class*="bg-[#0f172a]"] #demo-console *{
  color:#263b52 !important;
  -webkit-text-fill-color:#263b52 !important;
  opacity:1 !important;
}
#demo [class*="bg-[#0f172a]"] #demo-time{
  color:#0f82db !important;
  -webkit-text-fill-color:#0f82db !important;
}
#demo [class*="bg-[#1e293b]"],
#demo [class*="bg-[#1e293b]"] :is(h1,h2,h3,h4,h5,h6,div,p,span,strong,li),
#demo [class*="bg-[#1e293b]"] #demo-render,
#demo [class*="bg-[#1e293b]"] #demo-render *{
  color:#eaf4ff !important;
  -webkit-text-fill-color:#eaf4ff !important;
  opacity:1 !important;
}
#demo .rounded-3xl.bg-slate-800\/70,
#demo .rounded-3xl.bg-slate-800\/70 :is(h1,h2,h3,h4,p,span,div,strong,li){
  color:#eaf4ff !important;
  -webkit-text-fill-color:#eaf4ff !important;
  opacity:1 !important;
}

/* Prompt principle simulator: light cards inside the dark simulator must stay readable. */
#principle .code-window h3,
#principle .bg-\[\#0b0f19\] h3{
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
}
#principle .code-window > .bg-\[\#0b0f19\] > p,
#principle .bg-\[\#0b0f19\] > p{
  color:#d7ebff !important;
  -webkit-text-fill-color:#d7ebff !important;
}
#principle .bg-\[\#0b0f19\] button{
  background:#f4fbff !important;
  border-color:#9bd8fb !important;
  color:#0b355b !important;
  -webkit-text-fill-color:#0b355b !important;
  box-shadow:0 14px 28px -22px rgba(29,155,240,.7) !important;
}
#principle .bg-\[\#0b0f19\] button:hover{
  background:#e4f5ff !important;
  border-color:#60c6f4 !important;
}
#principle .bg-\[\#0b0f19\] button :is(div,span,strong,i),
#principle .bg-\[\#0b0f19\] button .text-slate-400{
  color:#0b355b !important;
  -webkit-text-fill-color:#0b355b !important;
  opacity:1 !important;
}
#principle .bg-\[\#0b0f19\] button .text-rose-300{
  color:#e11d48 !important;
  -webkit-text-fill-color:#e11d48 !important;
}
#principle .bg-\[\#0b0f19\] button .text-emerald-300{
  color:#059669 !important;
  -webkit-text-fill-color:#059669 !important;
}
#principle .pipeline-step,
#principle .pipeline-step :is(div,span,i){
  color:#eaf4ff !important;
  -webkit-text-fill-color:#eaf4ff !important;
  opacity:1 !important;
}
#principle #principle-console{
  background:#f8fbff !important;
  border-color:#8fd3f7 !important;
}
#principle #principle-console .text-slate-500,
#principle #principle-console .font-mono,
#principle #principle-console .console-entry,
#principle #principle-console .console-entry *{
  color:#1f3348 !important;
  -webkit-text-fill-color:#1f3348 !important;
  opacity:1 !important;
}
#principle #principle-console .console-entry{
  background:#ffffff !important;
  border:1px solid #b9e6ff !important;
  border-left:6px solid #1d9bf0 !important;
  border-radius:14px !important;
  padding:12px 14px !important;
  margin-bottom:10px !important;
  box-shadow:0 12px 24px -22px rgba(15,77,130,.45) !important;
}
#principle #principle-console .console-entry.log-prompt{border-left-color:#1d9bf0 !important}
#principle #principle-console .console-entry.log-sys{border-left-color:#64748b !important}
#principle #principle-console .console-entry.log-success{
  background:#ecfdf5 !important;
  border-color:#a7f3d0 !important;
  border-left-color:#10b981 !important;
}

/* Douyin rewrite hero: keep variable labels visible on the dark variable panel. */
.hero-flow-code,
.hero-flow-code :is(div,span,strong,p){
  color:#cfe8ff !important;
  -webkit-text-fill-color:#cfe8ff !important;
  opacity:1 !important;
}
.hero-flow-code .text-blue-200,
.hero-flow-code div:nth-child(2)>div:nth-child(1){
  color:#9dd7ff !important;
  -webkit-text-fill-color:#9dd7ff !important;
}
.hero-flow-code .text-violet-200,
.hero-flow-code div:nth-child(2)>div:nth-child(2){
  color:#d8c7ff !important;
  -webkit-text-fill-color:#d8c7ff !important;
}
.hero-flow-code .text-emerald-200,
.hero-flow-code div:nth-child(2)>div:nth-child(3){
  color:#9ff3d0 !important;
  -webkit-text-fill-color:#9ff3d0 !important;
}
.hero-flow-code .grid>div{
  background:rgba(255,255,255,.08) !important;
  border-color:rgba(191,219,254,.42) !important;
  text-shadow:none !important;
}

/* Workflow simulation lesson: keep light log/output cards readable inside dark frame. */
#simulator .bg-\[\#0f172a\] > .grid .bg-white,
#simulator #sim-console,
#simulator #sim-render .travel-card{
  color:#0b1b33 !important;
  -webkit-text-fill-color:#0b1b33 !important;
}
#simulator #sim-console,
#simulator #sim-console *{
  color:#24384f !important;
  -webkit-text-fill-color:#24384f !important;
  opacity:1 !important;
}
#simulator #sim-console .text-center{
  color:#526a82 !important;
  -webkit-text-fill-color:#526a82 !important;
}
#simulator #sim-console .console-entry{
  background:#ffffff !important;
  border:1px solid #c7e6fb !important;
  border-left:5px solid #1d9bf0 !important;
  border-radius:14px !important;
  padding:12px 14px !important;
  margin-bottom:10px !important;
  color:#24384f !important;
  -webkit-text-fill-color:#24384f !important;
  box-shadow:0 12px 24px -22px rgba(15,77,130,.42) !important;
}
#simulator #sim-console .console-entry.plugin{border-left-color:#8b5cf6 !important;background:#faf7ff !important}
#simulator #sim-console .console-entry.llm{border-left-color:#1d9bf0 !important;background:#eff8ff !important}
#simulator #sim-console .console-entry.success{border-left-color:#10b981 !important;background:#ecfdf5 !important}
#simulator #sim-time{
  color:#0f82db !important;
  -webkit-text-fill-color:#0f82db !important;
}
#simulator #sim-input{
  color:#0b1b33 !important;
  -webkit-text-fill-color:#0b1b33 !important;
  background:#f4f8fc !important;
}
#simulator #sim-render .travel-card,
#simulator #sim-render .travel-card *{
  color:#0b1b33 !important;
  -webkit-text-fill-color:#0b1b33 !important;
  opacity:1 !important;
}
#simulator #sim-render .travel-card h3,
#simulator #sim-render .travel-card .text-slate-800,
#simulator #sim-render .travel-card .text-slate-700{
  color:#0f172a !important;
  -webkit-text-fill-color:#0f172a !important;
}
#simulator #sim-render .travel-card .text-slate-400,
#simulator #sim-render .travel-card p.text-xs{
  color:#526a82 !important;
  -webkit-text-fill-color:#526a82 !important;
}
#simulator #sim-render .travel-card .bg-slate-800,
#simulator #sim-render .travel-card .bg-slate-800 *{
  background:#123d63 !important;
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
}
#simulator #sim-render .travel-card button,
#simulator #sim-render .travel-card button *{
  background:linear-gradient(135deg,#1d9bf0,#0ea5e9) !important;
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
}
#simulator #sim-render > .text-slate-600{
  color:#cfe8ff !important;
  -webkit-text-fill-color:#cfe8ff !important;
}

/* Plugin stock practice: make the explanation card readable in the blue-white theme. */
#code-demo > .max-w-6xl > .text-center h2,
#code-demo h2{
  color:#0b1b33 !important;
  -webkit-text-fill-color:#0b1b33 !important;
  opacity:1 !important;
  text-shadow:none !important;
}
#code-demo > .max-w-6xl > .text-center p,
#code-demo .text-center .text-gray-400{
  color:#486078 !important;
  -webkit-text-fill-color:#486078 !important;
  opacity:1 !important;
}
#code-demo .lg\:col-span-2 .bg-gray-800\/50{
  background:rgba(255,255,255,.9) !important;
  border-color:#c7e6fb !important;
  box-shadow:0 24px 54px -38px rgba(15,77,130,.45) !important;
}
#code-demo .lg\:col-span-2 h4,
#code-demo .lg\:col-span-2 h4 *:not(span){
  color:#0b1b33 !important;
  -webkit-text-fill-color:#0b1b33 !important;
  opacity:1 !important;
}
#code-demo .lg\:col-span-2 h4 span{
  background:#1d9bf0 !important;
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
}
#code-demo .lg\:col-span-2 .text-twitter-blue,
#code-demo .lg\:col-span-2 .twitter-blue{
  color:#0f82db !important;
  -webkit-text-fill-color:#0f82db !important;
  opacity:1 !important;
}
#code-demo .lg\:col-span-2 p,
#code-demo .lg\:col-span-2 .text-gray-100,
#code-demo .lg\:col-span-2 .text-gray-300{
  color:#1f3348 !important;
  -webkit-text-fill-color:#1f3348 !important;
  opacity:1 !important;
}
#code-demo .lg\:col-span-2 p.text-sm,
#code-demo .lg\:col-span-2 .leading-relaxed{
  color:#486078 !important;
  -webkit-text-fill-color:#486078 !important;
}
#code-demo .lg\:col-span-2 code,
#code-demo .lg\:col-span-2 .text-pink-400{
  color:#be185d !important;
  -webkit-text-fill-color:#be185d !important;
  background:#fff1f2 !important;
  border:1px solid #fecdd3 !important;
  border-radius:6px !important;
  padding:1px 5px !important;
}

/* Database lesson: restore contrast for compare, CRUD, and registration simulators. */
#compare #scenario-list button,
#crud .code-window button,
#case .code-window button{
  background:#f4fbff !important;
  border-color:#9bd8fb !important;
  color:#0b355b !important;
  -webkit-text-fill-color:#0b355b !important;
  opacity:1 !important;
  box-shadow:0 14px 28px -22px rgba(29,155,240,.7) !important;
}
#compare #scenario-list button *,
#crud .code-window button *,
#case .code-window button *{
  color:#0b355b !important;
  -webkit-text-fill-color:#0b355b !important;
  opacity:1 !important;
}
#compare #scenario-list button:hover,
#crud .code-window button:hover,
#case .code-window button:hover{
  background:#e4f5ff !important;
  border-color:#60c6f4 !important;
  transform:translateY(-1px);
}
#compare #scenario-list button .text-white,
#compare #scenario-list button div:first-child{
  color:#0f82db !important;
  -webkit-text-fill-color:#0f82db !important;
}
#compare #scenario-list button .text-slate-400,
#compare #scenario-list button div:last-child,
#crud .code-window button div:last-child{
  color:#486078 !important;
  -webkit-text-fill-color:#486078 !important;
}
#compare #scenario-result,
#compare #scenario-result *{
  color:#eaf4ff !important;
  -webkit-text-fill-color:#eaf4ff !important;
  opacity:1 !important;
}
#compare #scenario-result .text-slate-500,
#compare #scenario-result .text-slate-400{
  color:#bfdbfe !important;
  -webkit-text-fill-color:#bfdbfe !important;
}
#crud .code-window h3,
#case .code-window h3,
#crud .code-window > div.p-6 > p,
#case .code-window > div.p-6 > p{
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
  opacity:1 !important;
}
#crud #crud-console,
#case #case-console{
  background:#f8fbff !important;
  border-color:#8fd3f7 !important;
}
#crud #crud-console,
#crud #crud-console *,
#case #case-console,
#case #case-console *{
  color:#24384f !important;
  -webkit-text-fill-color:#24384f !important;
  opacity:1 !important;
}
#crud #crud-console .text-center,
#case #case-console .text-center{
  color:#526a82 !important;
  -webkit-text-fill-color:#526a82 !important;
}
#crud #crud-console .console-entry,
#crud #crud-console div[class*="log-"],
#case #case-console .console-entry,
#case #case-console div[class*="log-"]{
  background:#ffffff !important;
  border:1px solid #c7e6fb !important;
  border-left:5px solid #1d9bf0 !important;
  border-radius:14px !important;
  padding:12px 14px !important;
  margin-bottom:10px !important;
  color:#24384f !important;
  -webkit-text-fill-color:#24384f !important;
  box-shadow:0 12px 24px -22px rgba(15,77,130,.42) !important;
}
#crud #crud-console .log-tool,
#case #case-console .log-tool{border-left-color:#8b5cf6 !important;background:#faf7ff !important}
#crud #crud-console .log-query,
#case #case-console .log-query{border-left-color:#1d9bf0 !important;background:#eff8ff !important}
#crud #crud-console .log-success,
#case #case-console .log-success{border-left-color:#10b981 !important;background:#ecfdf5 !important}
#case .pipeline-step,
#case .pipeline-step *{
  color:#eaf4ff !important;
  -webkit-text-fill-color:#eaf4ff !important;
  opacity:1 !important;
}
#case .pipeline-step.success,
#case .pipeline-step.running{
  background:#f4fbff !important;
  border-color:#60c6f4 !important;
  color:#0b1b33 !important;
  -webkit-text-fill-color:#0b1b33 !important;
  box-shadow:0 14px 28px -20px rgba(29,155,240,.8) !important;
}
#case .pipeline-step.success *,
#case .pipeline-step.running *{
  color:#0b1b33 !important;
  -webkit-text-fill-color:#0b1b33 !important;
  opacity:1 !important;
}

/* Knowledge-base lesson: keep RAG lens and service-desk simulators legible. */
#lens .code-window h3,
#service .code-window h3,
#lens .code-window > div.p-8 > p,
#service .code-window > div.p-8 > p{
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
  opacity:1 !important;
}
#lens .code-window button{
  background:#f4fbff !important;
  border-color:#9bd8fb !important;
  color:#0b355b !important;
  -webkit-text-fill-color:#0b355b !important;
  opacity:1 !important;
  box-shadow:0 14px 28px -22px rgba(29,155,240,.7) !important;
}
#lens .code-window button *,
#service .copy-btn,
#service .copy-btn *{
  color:#0b355b !important;
  -webkit-text-fill-color:#0b355b !important;
  opacity:1 !important;
}
#lens .code-window button:hover,
#service .copy-btn:hover{
  background:#e4f5ff !important;
  border-color:#60c6f4 !important;
  transform:translateY(-1px);
}
#lens .code-window button:first-child div:first-child{
  color:#e11d48 !important;
  -webkit-text-fill-color:#e11d48 !important;
}
#lens .code-window button:nth-child(2) div:first-child{
  color:#059669 !important;
  -webkit-text-fill-color:#059669 !important;
}
#lens .code-window button div:last-child{
  color:#486078 !important;
  -webkit-text-fill-color:#486078 !important;
}
#lens .lens-node,
#service .lens-node{
  color:#eaf4ff !important;
  -webkit-text-fill-color:#eaf4ff !important;
  opacity:1 !important;
}
#lens .lens-node *,
#service .lens-node *{
  color:#eaf4ff !important;
  -webkit-text-fill-color:#eaf4ff !important;
  opacity:1 !important;
}
#lens .lens-node.running,
#lens .lens-node.success,
#service .lens-node.running,
#service .lens-node.success{
  background:#f4fbff !important;
  border-color:#60c6f4 !important;
  color:#0b1b33 !important;
  -webkit-text-fill-color:#0b1b33 !important;
  box-shadow:0 14px 28px -20px rgba(29,155,240,.8) !important;
}
#lens .lens-node.running *,
#lens .lens-node.success *,
#service .lens-node.running *,
#service .lens-node.success *{
  color:#0b1b33 !important;
  -webkit-text-fill-color:#0b1b33 !important;
  opacity:1 !important;
}
#lens #lens-console,
#service #svc-console{
  background:#f8fbff !important;
  border-color:#8fd3f7 !important;
}
#lens #lens-console,
#lens #lens-console *,
#service #svc-console,
#service #svc-console *{
  color:#24384f !important;
  -webkit-text-fill-color:#24384f !important;
  opacity:1 !important;
}
#lens #lens-console .text-center,
#service #svc-console .text-center{
  color:#526a82 !important;
  -webkit-text-fill-color:#526a82 !important;
}
#lens #lens-console .console-entry,
#service #svc-console .console-entry{
  background:#ffffff !important;
  border:1px solid #c7e6fb !important;
  border-left:5px solid #1d9bf0 !important;
  border-radius:14px !important;
  padding:12px 14px !important;
  margin-bottom:10px !important;
  color:#24384f !important;
  -webkit-text-fill-color:#24384f !important;
  box-shadow:0 12px 24px -22px rgba(15,77,130,.42) !important;
}
#lens #lens-console .log-tool,
#service #svc-console .log-tool{border-left-color:#8b5cf6 !important;background:#faf7ff !important}
#lens #lens-console .log-query,
#service #svc-console .log-query{border-left-color:#1d9bf0 !important;background:#eff8ff !important}
#lens #lens-console .log-success,
#service #svc-console .log-success{border-left-color:#10b981 !important;background:#ecfdf5 !important}
#service #svc-render{
  background:#f8fbff !important;
  border-color:#8fd3f7 !important;
}
#service #svc-render,
#service #svc-render *{
  color:#24384f !important;
  -webkit-text-fill-color:#24384f !important;
  opacity:1 !important;
}
#service #svc-render > .text-slate-500,
#service #svc-render > .text-slate-600{
  color:#526a82 !important;
  -webkit-text-fill-color:#526a82 !important;
}
#service #svc-render .bg-white,
#service #svc-render .bg-white *{
  color:#24384f !important;
  -webkit-text-fill-color:#24384f !important;
}
#service #svc-render .text-slate-900,
#service #svc-render .text-slate-800,
#service #svc-render h3{
  color:#0b1b33 !important;
  -webkit-text-fill-color:#0b1b33 !important;
}
#service #svc-render .text-slate-600,
#service #svc-render p{
  color:#486078 !important;
  -webkit-text-fill-color:#486078 !important;
}
#service #svc-render .text-blue-700{color:#0f82db !important;-webkit-text-fill-color:#0f82db !important}
#service #svc-render .text-emerald-700{color:#047857 !important;-webkit-text-fill-color:#047857 !important}

/* Poster workflow lesson: make simulator logs and generated poster preview readable. */
#workflow .code-window .copy-btn,
#workflow .code-window .copy-btn *,
#demo .code-window .copy-btn,
#demo .code-window .copy-btn *{
  color:#0b355b !important;
  -webkit-text-fill-color:#0b355b !important;
  opacity:1 !important;
}
#workflow .pipeline-step,
#workflow .pipeline-step *,
#demo .code-window .pipeline-step,
#demo .code-window .pipeline-step *{
  color:#eaf4ff !important;
  -webkit-text-fill-color:#eaf4ff !important;
  opacity:1 !important;
}
#workflow .pipeline-step.running,
#workflow .pipeline-step.success{
  background:#f4fbff !important;
  border-color:#60c6f4 !important;
  color:#0b1b33 !important;
  -webkit-text-fill-color:#0b1b33 !important;
  box-shadow:0 14px 28px -20px rgba(29,155,240,.8) !important;
}
#workflow .pipeline-step.running *,
#workflow .pipeline-step.success *{
  color:#0b1b33 !important;
  -webkit-text-fill-color:#0b1b33 !important;
  opacity:1 !important;
}
#workflow #workflow-console,
#demo #demo-console{
  background:#f8fbff !important;
  border-color:#8fd3f7 !important;
}
#workflow #workflow-console,
#workflow #workflow-console *,
#demo #demo-console,
#demo #demo-console *{
  color:#24384f !important;
  -webkit-text-fill-color:#24384f !important;
  opacity:1 !important;
}
#workflow #workflow-console .text-center,
#demo #demo-console .text-center{
  color:#526a82 !important;
  -webkit-text-fill-color:#526a82 !important;
}
#workflow #workflow-console .console-entry,
#demo #demo-console .console-entry{
  background:#ffffff !important;
  border:1px solid #c7e6fb !important;
  border-left:5px solid #1d9bf0 !important;
  border-radius:14px !important;
  padding:12px 14px !important;
  margin-bottom:10px !important;
  color:#24384f !important;
  -webkit-text-fill-color:#24384f !important;
  box-shadow:0 12px 24px -22px rgba(15,77,130,.42) !important;
}
#workflow #workflow-console .log-tool,
#demo #demo-console .log-tool{border-left-color:#8b5cf6 !important;background:#faf7ff !important}
#workflow #workflow-console .log-query,
#demo #demo-console .log-query{border-left-color:#1d9bf0 !important;background:#eff8ff !important}
#workflow #workflow-console .log-sys,
#demo #demo-console .log-sys{border-left-color:#94a3b8 !important;background:#f8fafc !important}
#workflow #workflow-console .log-success,
#demo #demo-console .log-success{border-left-color:#10b981 !important;background:#ecfdf5 !important}
#demo .poster-preview,
#demo .poster-preview *{
  color:#0b1b33 !important;
  -webkit-text-fill-color:#0b1b33 !important;
  opacity:1 !important;
}
#demo .poster-preview{
  background:
    linear-gradient(180deg,rgba(239,248,255,.38),rgba(255,255,255,.72)),
    var(--poster-image, none) !important;
  background-size:cover !important;
  background-position:center !important;
}
#demo .poster-preview .tag,
#demo .poster-preview .tag *{
  color:#0f82db !important;
  -webkit-text-fill-color:#0f82db !important;
}
#demo .poster-preview h3,
#demo .poster-preview #preview-title{
  color:#0b1b33 !important;
  -webkit-text-fill-color:#0b1b33 !important;
  text-shadow:0 2px 14px rgba(255,255,255,.7) !important;
}
#demo .poster-preview p,
#demo .poster-preview #preview-desc{
  color:#314862 !important;
  -webkit-text-fill-color:#314862 !important;
  text-shadow:0 1px 10px rgba(255,255,255,.65) !important;
}

/* Multi-agent lesson: active Agent badge on dark detail panel. */
#architecture #agent-badge,
#architecture #agent-badge *{
  background:#f4fbff !important;
  border-color:#9bd8fb !important;
  color:#0f82db !important;
  -webkit-text-fill-color:#0f82db !important;
  opacity:1 !important;
  box-shadow:0 12px 24px -20px rgba(29,155,240,.75) !important;
}

/* Prompt lesson case preview: override the old pale demo-render color. */
#case #demo-render{
  background:#f8fbff !important;
  border-color:#8fd3f7 !important;
}
#case #demo-render,
#case #demo-render *{
  color:#24384f !important;
  -webkit-text-fill-color:#24384f !important;
  opacity:1 !important;
}
#case #demo-render > .text-slate-600{
  color:#526a82 !important;
  -webkit-text-fill-color:#526a82 !important;
}
#case #demo-render .bg-white,
#case #demo-render .bg-white *{
  color:#24384f !important;
  -webkit-text-fill-color:#24384f !important;
}
#case #demo-render h3,
#case #demo-render .text-slate-900,
#case #demo-render .text-slate-800,
#case #demo-render strong{
  color:#0b1b33 !important;
  -webkit-text-fill-color:#0b1b33 !important;
}
#case #demo-render p,
#case #demo-render li,
#case #demo-render .text-slate-600{
  color:#486078 !important;
  -webkit-text-fill-color:#486078 !important;
}
#case #demo-render .text-slate-400{
  color:#64748b !important;
  -webkit-text-fill-color:#64748b !important;
}
#case #demo-render .text-blue-700{
  color:#0f82db !important;
  -webkit-text-fill-color:#0f82db !important;
}
#case #demo-render .text-emerald-700{
  color:#047857 !important;
  -webkit-text-fill-color:#047857 !important;
}

/* Prompt lesson demo render: actual section id is #demo, keep the answer cards dark enough. */
html body #demo #demo-render{
  background:#f8fbff !important;
  border-color:#8fd3f7 !important;
}
html body #demo #demo-render,
html body #demo #demo-render *{
  color:#24384f !important;
  -webkit-text-fill-color:#24384f !important;
  opacity:1 !important;
}
html body #demo #demo-render > .text-slate-600{
  color:#526a82 !important;
  -webkit-text-fill-color:#526a82 !important;
}
html body #demo #demo-render .bg-white,
html body #demo #demo-render .bg-white *{
  color:#24384f !important;
  -webkit-text-fill-color:#24384f !important;
}
html body #demo #demo-render h3,
html body #demo #demo-render .text-slate-900,
html body #demo #demo-render .text-slate-800,
html body #demo #demo-render strong{
  color:#0b1b33 !important;
  -webkit-text-fill-color:#0b1b33 !important;
}
html body #demo #demo-render p,
html body #demo #demo-render li,
html body #demo #demo-render .text-slate-600{
  color:#486078 !important;
  -webkit-text-fill-color:#486078 !important;
}
html body #demo #demo-render .text-slate-400{
  color:#64748b !important;
  -webkit-text-fill-color:#64748b !important;
}
html body #demo #demo-render .text-blue-700{
  color:#0f82db !important;
  -webkit-text-fill-color:#0f82db !important;
}
html body #demo #demo-render .text-emerald-700{
  color:#047857 !important;
  -webkit-text-fill-color:#047857 !important;
}