/* Scoped navigation styles reuse the portal's dark palette and Outfit typography. */
.academic-hero { padding-top: 40px; padding-bottom: 64px; }
#hero-three-container { opacity: .22; pointer-events: none; }
#homepage-container > header { gap: 20px; }
#homepage-container > header > .relative { flex: 1; min-width: 150px; max-width: 260px; }
.academic-hero h1 { margin-bottom: 16px; font-size: clamp(2.6rem, 5vw, 4.4rem); line-height: 1.1; letter-spacing: -.04em; font-weight: 800; color: #f4f4f5; }
.academic-tagline { font-size: clamp(1.1rem, 2.5vw, 1.55rem); font-weight: 600; color: #d4d4d8; }
.academic-intro { max-width: 570px; color: #a1a1aa; line-height: 1.7; margin: 16px auto 0; }
.academic-domains { display: flex; align-items: center; justify-content: center; width: 100%; padding: 36px 0 22px; isolation: isolate; }
.academic-circle { --accent: 34,211,238; position: relative; display: flex; flex: 0 0 35%; aspect-ratio: 1; max-width: 365px; flex-direction: column; align-items: center; justify-content: center; padding: 32px; border: 1px solid rgba(var(--accent),.42); border-radius: 50%; background: radial-gradient(circle at 45% 25%, rgba(var(--accent),.1), rgba(12,18,24,.96) 80%); box-shadow: 0 16px 55px #0004, inset 0 0 45px rgba(var(--accent),.04); color: #f4f4f5; transition: transform .25s, border-color .25s, box-shadow .25s; text-decoration: none; }
.academic-circle + .academic-circle { margin-left: -3.5%; }
.academic-violet { --accent: 167,139,250; transform: translateY(25px); }
.academic-teal { --accent: 94,234,212; }
.academic-circle:hover { z-index: 2; transform: translateY(-6px) scale(1.025); border-color: rgb(var(--accent)); box-shadow: 0 12px 60px rgba(var(--accent),.13); }
.academic-violet:hover { transform: translateY(19px) scale(1.025); }
.academic-icon { display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 54px; flex-shrink: 0; border-radius: 16px; background: rgba(34,211,238,.08); border: 1px solid rgba(34,211,238,.15); color: #67e8f9; font-size: 22px; }
.academic-circle .academic-icon { background: rgba(var(--accent),.08); color: rgb(var(--accent)); border-color: rgba(var(--accent),.18); margin-bottom: 20px; }
.academic-circle h2 { font-size: clamp(1.2rem, 2vw, 1.65rem); font-weight: 700; letter-spacing: -.02em; }
.academic-circle p { color: #a1a1aa; font-size: 13px; max-width: 205px; min-height: 42px; line-height: 1.6; margin: 10px 0 16px; }
.academic-explore { display: inline-flex; gap: 12px; align-items: center; color: #67e8f9; font-size: 13px; font-weight: 600; }
.academic-circle .academic-explore { color: rgb(var(--accent)); }
.academic-domain-note { margin-top: 34px; font-size: 11px; text-transform: uppercase; letter-spacing: .2em; color: #71717a; }
.academic-page { width: 100%; max-width: 1152px; margin: 0 auto; padding: 36px 24px 80px; }
.academic-breadcrumbs { margin: 0 0 38px; font-size: 12px; color: #a1a1aa; }
.academic-breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 8px 0; list-style: none; padding: 0; }
.academic-breadcrumbs li { display: flex; align-items: center; }
.academic-breadcrumbs li + li::before { content: '/'; margin: 0 12px; color: #52525b; }
.academic-breadcrumbs a:hover { color: #67e8f9; }
.academic-breadcrumbs [aria-current] { color: #e4e4e7; }
.academic-eyebrow { display: block; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: #67e8f9; font-weight: 600; margin-bottom: 16px; }
.academic-title { font-size: clamp(1.8rem, 4vw, 2.8rem); line-height: 1.2; letter-spacing: -.035em; font-weight: 700; color: #fafafa; max-width: 830px; outline: none; }
.academic-description { max-width: 740px; color: #a1a1aa; line-height: 1.7; margin: 18px 0 38px; }
.academic-category-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 22px; }
.academic-card { display: flex; flex-direction: column; align-items: flex-start; padding: 30px; border: 1px solid #ffffff16; background: #121216; border-radius: 22px; transition: transform .2s, border-color .2s, background .2s; }
.academic-card:hover { transform: translateY(-4px); border-color: #22d3ee60; background: #141a20; }
.academic-card h2 { color: #f4f4f5; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 24px 0 12px; }
.academic-card p { color: #a1a1aa; font-size: 14px; line-height: 1.7; margin-bottom: 28px; }
.academic-card .academic-explore { margin-top: auto; }
.academic-empty { text-align: center; border: 1px solid #ffffff12; border-radius: 24px; background: #121216; padding: 64px 24px; }
.academic-empty .academic-icon { margin-bottom: 26px; }
.academic-empty h2 { color: #fafafa; font-size: 28px; font-weight: 600; margin-bottom: 14px; }
.academic-empty p { color: #a1a1aa; max-width: 520px; margin: 0 auto 28px; line-height: 1.7; }
.academic-back { display: inline-block; border: 1px solid #22d3ee40; color: #67e8f9; padding: 12px 18px; border-radius: 12px; font-size: 13px; }
.academic-card:focus-visible, .academic-circle:focus-visible, .academic-back:focus-visible, .academic-breadcrumbs a:focus-visible { outline: 3px solid #67e8f9; outline-offset: 5px; }
#academic-player-breadcrumbs { padding: 12px 24px 0; background: #18181b; }
#academic-player-breadcrumbs .academic-breadcrumbs { margin-bottom: 12px; }
.academic-page:not(.hidden) { animation: academic-enter .25s ease-out; }
@keyframes academic-enter { from { opacity: .3; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (min-width: 768px) and (max-width: 1250px) {
    #homepage-container > header > .relative { display: none; }
}
@media (max-width: 767px) {
    #homepage-container > header { flex-wrap: wrap; gap: 12px; padding: 16px; }
    #homepage-container > header > nav { width: 100%; justify-content: flex-end; }
    #homepage-container > header > a { font-size: 10px; }
    #auth-actions-container { flex-wrap: wrap; justify-content: flex-end; }
    .academic-hero { padding-top: 40px; }
    .academic-domains { flex-direction: column; gap: 20px; padding-top: 32px; }
    .academic-circle { flex-basis: auto; width: min(100%, 300px); padding: 32px; }
    .academic-circle + .academic-circle { margin-left: 0; }
    .academic-violet { transform: none; }
    .academic-circle:hover { transform: translateY(-3px); }
    .academic-circle h2 { font-size: 24px; }
    .academic-domain-note { line-height: 1.8; margin-top: 16px; }
    .academic-category-grid { grid-template-columns: 1fr; }
    .academic-page { padding: 24px 20px 56px; }
    .academic-card { padding: 24px; }
    .academic-breadcrumbs { margin-bottom: 28px; }
}
@media (prefers-reduced-motion: reduce) {
    #hero-three-container { display: none; }
    .academic-circle, .academic-card, .academic-page { transition: none; animation: none !important; }
    .academic-circle:hover, .academic-card:hover { transform: none; }
    html { scroll-behavior: auto; }
}

/* A true three-circle intersection; the cube canvas remains unchanged. */
.academic-domains{position:relative;display:block;max-width:750px;height:570px;margin:20px auto 0;padding:0}
.academic-domains .academic-circle{position:absolute;width:55%;max-width:none;height:70%;aspect-ratio:auto;margin:0;transform:none;padding:30px;justify-content:flex-start;background:rgba(var(--accent),.075);box-shadow:inset 0 0 60px rgba(var(--accent),.035)}
.academic-domains .academic-circle:nth-child(1){left:0;top:0;padding-top:85px}
.academic-domains .academic-circle:nth-child(2){right:0;top:0;padding-top:85px}
.academic-domains .academic-circle:nth-child(3){left:22.5%;bottom:0;justify-content:flex-end;padding-bottom:48px}
.academic-domains .academic-circle p{display:none}
.academic-domains .academic-circle .academic-icon{margin-bottom:12px}
.academic-domains .academic-circle:hover{background:rgba(var(--accent),.14);transform:none;z-index:1}
.academic-ai{position:absolute;z-index:3;left:50%;top:48%;transform:translate(-50%,-50%);display:grid;place-items:center;width:76px;height:76px;border:1px solid #a5f3fc;border-radius:50%;background:#101d28;color:#cffafe;font-size:28px;font-weight:800;box-shadow:0 0 35px #22d3ee38}
.academic-ai:focus-visible{outline:3px solid #fff;outline-offset:5px}
.placement-companion{width:100%;text-align:left;margin-top:55px;padding:32px;border:1px solid #22d3ee30;border-radius:24px;background:#0d141be8}
.placement-tools{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:24px}
.placement-tools .academic-card{padding:20px}.placement-tools h3{font-size:20px;font-weight:700}.placement-tools p{margin:12px 0 0}
@media(max-width:767px){.academic-domains{height:400px;max-width:500px}.academic-domains .academic-circle{padding:12px}.academic-domains .academic-circle:nth-child(1),.academic-domains .academic-circle:nth-child(2){padding-top:56px}.academic-domains .academic-circle:nth-child(3){padding-bottom:32px}.academic-domains .academic-circle h2{font-size:clamp(13px,3.3vw,21px)}.academic-domains .academic-circle .academic-icon{width:36px;height:36px;font-size:16px}.academic-domains .academic-explore{font-size:10px}.academic-ai{width:56px;height:56px;font-size:22px}.placement-tools{grid-template-columns:1fr 1fr}.placement-companion{padding:20px}}
@media(max-width:400px){.academic-domains{height:330px}.academic-domains .academic-circle:nth-child(1),.academic-domains .academic-circle:nth-child(2){padding-top:38px}.academic-domains .academic-circle:nth-child(3){padding-bottom:25px}.placement-tools{grid-template-columns:1fr}}

.learn-about-intro { max-width: 900px; margin: 34px auto 0; padding: 28px clamp(20px, 5vw, 52px); text-align: left; border: 1px solid rgba(34,211,238,.2); border-radius: 22px; background: linear-gradient(135deg, rgba(15,23,42,.94), rgba(9,9,11,.88)); box-shadow: 0 22px 65px #0003; }
.learn-about-intro .academic-eyebrow { margin-bottom: 10px; }
.learn-about-intro h2 { margin-bottom: 12px; font-size: clamp(1.2rem,2.5vw,1.65rem); font-weight: 750; color: #f4f4f5; }
.learn-about-intro p:not(.academic-eyebrow) { margin-top: 10px; color: #c4c4cc; line-height: 1.75; }
.learn-about-link { display: inline-flex; gap: 8px; margin-top: 16px; color: #67e8f9; font-size: .9rem; font-weight: 650; }
.learn-about-content { display: grid; gap: 20px; }
.learn-about-list { display: grid; gap: 12px; margin: 18px 0 0; padding-left: 1.2rem; color: #c4c4cc; line-height: 1.7; }
.learn-about-list li::marker { color: #22d3ee; }
.learn-about-list strong { color: #f4f4f5; }
.learn-about-benefits { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; margin-top: 18px; }
.learn-about-benefits article { padding: 16px; border: 1px solid #ffffff12; border-radius: 14px; background: #09090b66; }
.learn-about-benefits h4 { margin-bottom: 7px; color: #f4f4f5; font-weight: 650; }
.learn-about-benefits p { color: #a1a1aa; line-height: 1.65; font-size: .9rem; }
.learn-about-quote { border-left: 3px solid #22d3ee; padding: 20px 24px; border-radius: 0 16px 16px 0; background: rgba(34,211,238,.06); color: #d4d4d8; line-height: 1.8; }
.placement-companion .academic-title { max-width: 980px; font-size: clamp(1.65rem,3.5vw,2.5rem); }
@media (max-width: 640px) { .learn-about-benefits { grid-template-columns: 1fr; } .learn-about-intro { padding: 22px; } }

/* Light-theme contrast pass for reusable cards and boxed course content. */
body[data-theme="light"] #homepage-container :is(
  .academic-card, .course-catalog-card, .cx-category, .cx-explorer,
  .placement-companion, .course-outline-hero, .course-outline-stat,
  .course-outline-topic-card, .course-outline-panel, .course-outline-phase,
  .course-outline-journey, .course-outline-capstone
) {
  background: #fff !important;
  background-image: none !important;
  color: #171317 !important;
  border-color: #ded8db !important;
  box-shadow: 0 8px 28px rgba(50, 20, 30, .07) !important;
}
body[data-theme="light"] #homepage-container :is(
  .academic-card, .course-catalog-card, .cx-category, .cx-explorer,
  .placement-companion, .course-outline-hero, .course-outline-stat,
  .course-outline-topic-card, .course-outline-panel, .course-outline-phase,
  .course-outline-journey, .course-outline-capstone
) :is(p, li, span, div, strong, label, small, output, code, footer) {
  color: #292426 !important;
}
body[data-theme="light"] #homepage-container :is(
  .academic-card, .course-catalog-card, .cx-category, .cx-explorer,
  .placement-companion, .course-outline-topic-card, .course-outline-panel,
  .course-outline-phase, .course-outline-capstone
) :is(h1, h2, h3, h4, h5, h6) { color: #800020 !important; }
body[data-theme="light"] #homepage-container .course-catalog-card [class*="bg-zinc-900"],
body[data-theme="light"] #homepage-container .course-catalog-card [class*="bg-slate-900"],
body[data-theme="light"] #homepage-container .cx-explorer :is(.cx-diagram, .cx-result, .cx-evidence-map > div, .cx-funnel > div) {
  background: #f5f1f2 !important; background-image: none !important;
  color: #292426 !important; border-color: #d8cbd0 !important;
}
body[data-theme="light"] #homepage-container .cx-explorer :is(.cx-notice, .cx-formula, .cx-details p, .cx-bar-row, .cx-context) { color: #55464c !important; }
body[data-theme="light"] #homepage-container .cx-explorer .cx-control-ring {
  background: conic-gradient(var(--cx-accent) var(--coverage), #e8e0e3 0) !important;
  border-color: #ded8db !important; color: #171317 !important;
}
body[data-theme="light"] #homepage-container :is(
  .cx-category-icon, .cx-category footer, .cx-explorer-title > span,
  .cx-explorer .cx-details summary, .cx-explorer .cx-timeline,
  .cx-explorer .cx-connector, .cx-explorer .cx-controls output, .cx-home-link
) { color: #0e7490 !important; }
body[data-theme="light"] #homepage-container .cx-explorer :is(.cx-good, .cx-warning) { color: #166534 !important; }
body[data-theme="light"] #homepage-container .cx-explorer .cx-warning { color: #9f1239 !important; }

/* Lesson boxes shared by all courses, including the statistics slide deck. */
body[data-theme="light"] #slide-player-overlay #slide-player-body :is(
  .stats-card, .stats-kv-box, .stats-number-box, .stats-pill, .stats-visual,
  .stats-table-wrap, .stats-code, .stats-output, .stats-callout,
  .premium-glass, .glass-card, .comparison-box, .io-box, .math-formula-box,
  .math-graph, .flowchart-container, .problem-card, .visualization-panel,
  .lesson-card, .concept-card
) {
  background: #fff !important; background-image: none !important;
  color: #171317 !important; border-color: #ded8db !important;
  box-shadow: 0 8px 26px rgba(50, 20, 30, .07) !important;
}
body[data-theme="light"] #slide-player-overlay #slide-player-body :is(
  .stats-card, .stats-kv-box, .stats-number-box, .stats-pill, .stats-visual,
  .stats-table-wrap, .stats-code, .stats-output, .stats-callout,
  .premium-glass, .glass-card, .comparison-box, .io-box, .math-formula-box,
  .math-graph, .flowchart-container, .problem-card, .visualization-panel,
  .lesson-card, .concept-card
) :is(p, li, span, div, strong, label, small, code, output, th, td) { color: #292426 !important; }
body[data-theme="light"] #slide-player-overlay #slide-player-body :is(h1, h2, h3, h4, h5, h6) { color: #800020 !important; }
body[data-theme="light"] #slide-player-overlay #slide-player-body :is(.stats-kv-box .label, .stats-number-box .cap, .stats-visual-caption) { color: #55464c !important; }
body[data-theme="light"] #slide-player-overlay #slide-player-body .stats-pill.accent {
  background: #f9e9ee !important; border-color: #d9aebb !important;
}

/* Light-theme contrast for Labs, Visualization and Playground workspaces. */
body[data-theme="light"] #tab-labs { color:#171317!important; }
body[data-theme="light"] #tab-labs :is(.lab-category-button,.lab-workbench,.lab-legacy,.lab-explanation,.lab-guide-row,.lab-step-list) {
 background:#fff!important;background-image:none!important;color:#292426!important;border-color:#ded8db!important;box-shadow:0 6px 22px rgba(50,20,30,.06)!important;
}
body[data-theme="light"] #tab-labs :is(.lab-category-button,.lab-workbench,.lab-legacy,.lab-explanation,.lab-guide-row,.lab-step-list) :is(p,span,small,li,label,output,div) { color:#292426!important; }
body[data-theme="light"] #tab-labs :is(h2,h3,h4,.lab-category-button strong,.lab-workbench>h3,.lab-explanation h4) { color:#800020!important; }
body[data-theme="light"] #tab-labs :is(.lab-visual,.lab-cell,.lab-guide-row,.lab-step-button,.lab-step.is-current .lab-step-button) {
 background:#f5f1f2!important;background-image:none!important;color:#292426!important;border-color:#d8cbd0!important;
}
body[data-theme="light"] #tab-labs :is(.lab-cell small,.lab-cell strong,.lab-guide-row strong,.lab-guide-row span,.lab-step-button strong,.lab-step-button span) { color:#292426!important; }
body[data-theme="light"] #tab-labs :is(.lab-toolbar button,.lab-category-button[aria-expanded="true"],.lab-category-button:hover) { background:#e8f7fa!important;color:#07566a!important;border-color:#0e7490!important; }
body[data-theme="light"] #tab-labs :is(input,select,textarea) { background:#fff!important;color:#171317!important;border-color:#b9aeb2!important; }
body[data-theme="light"] #tab-labs .lab-summary { color:#166534!important; }
body[data-theme="light"] #tab-labs .lab-error { color:#9f1239!important; }

body[data-theme="light"] #tab-visualizations { color:#171317!important; }
body[data-theme="light"] #tab-visualizations :is(.viz-settings,.viz-info,.viz-geometry-layout,.viz-geometry-layout aside) {
 background:#fff!important;background-image:none!important;color:#292426!important;border-color:#ded8db!important;
}
body[data-theme="light"] #tab-visualizations :is(.viz-settings,.viz-info,.viz-geometry-layout,.viz-geometry-layout aside) :is(p,span,label,output,div,small) { color:#292426!important; }
body[data-theme="light"] #tab-visualizations :is(.viz-info h4,.viz-geometry-layout h4) { color:#800020!important; }
body[data-theme="light"] #tab-visualizations :is(.viz-info h5,#sim-info-datatype,.viz-footnote) { color:#55464c!important; }
body[data-theme="light"] #tab-visualizations #sim-info-stats { background:#f5f1f2!important;color:#292426!important; }
body[data-theme="light"] #tab-visualizations .viz-interpretation { color:#292426!important;border-color:#0e7490!important; }
body[data-theme="light"] #tab-visualizations :is(.viz-settings select,input) { background:#fff!important;color:#171317!important;border-color:#b9aeb2!important; }
body[data-theme="light"] #tab-visualizations :is(.viz-plot,.viz-geometry-layout svg) { border-color:#ded8db!important; }

body[data-theme="light"] #tab-playground .pg-root { --pg-panel:#fff;--pg-border:#ded8db;--pg-muted:#55464c;color:#292426!important; }
body[data-theme="light"] #tab-playground .pg-root :is(.pg-search,.pg-language-cards article,.pg-domain-cards button,.pg-program,.pg-toolbar,.pg-guidance,.pg-mode,.pg-variable,.pg-panel,.pg-panel>header,.pg-empty) {
 background:#fff!important;background-image:none!important;color:#292426!important;border-color:#ded8db!important;
}
body[data-theme="light"] #tab-playground .pg-root :is(.pg-search,.pg-language-cards article,.pg-domain-cards button,.pg-program,.pg-toolbar,.pg-guidance,.pg-mode,.pg-variable,.pg-panel,.pg-empty) :is(p,span,small,label,strong,li,output,div,dt,dd) { color:#292426!important; }
body[data-theme="light"] #tab-playground .pg-root :is(h2,h3,h4,.pg-program h4,.pg-panel-explain h3,.pg-panel-explain h4) { color:#800020!important; }
body[data-theme="light"] #tab-playground .pg-root :is(.pg-eyebrow,.pg-total,.pg-domain-number,.pg-domain-cards strong,.pg-breadcrumbs span,summary,.pg-variable h4) { color:#0e7490!important; }
body[data-theme="light"] #tab-playground .pg-root :is(.pg-level,.pg-tags span,.pg-cells span,.pg-object div) { background:#f5f1f2!important;color:#292426!important;border-color:#d8cbd0!important; }
body[data-theme="light"] #tab-playground .pg-root :is(input,select,textarea) { background:#fff!important;color:#171317!important;border-color:#b9aeb2!important; }
body[data-theme="light"] #tab-playground .pg-root :is(.pg-button,.pg-mobile-tabs button) { background:#fff!important;color:#292426!important;border-color:#b9aeb2!important; }
body[data-theme="light"] #tab-playground .pg-root .pg-button.pg-primary { background:#087f98!important;color:#fff!important;border-color:#087f98!important; }
body[data-theme="light"] #tab-playground .pg-root :is(.pg-button.pg-selected,.pg-mobile-tabs [aria-selected="true"]) { background:#e8f7fa!important;color:#07566a!important;border-color:#0e7490!important; }
/* Preserve the intentional dark canvas for source code and chart visuals. */
body[data-theme="light"] #tab-playground .pg-root :is(#pg-editor,#pg-code-trace,.pg-chart) { background:#0c131d!important;color:#e1edf5!important; }
body[data-theme="light"] #tab-playground .pg-root #pg-output { color:#86efac!important; }

/* Keep playground trace code readable after light-theme panel text normalization. */
body[data-theme="light"] #tab-playground .pg-root #pg-code-trace span,
body[data-theme="light"] #tab-playground .pg-root #pg-code-trace span :is(b, i, em, strong),
body[data-theme="light"] #tab-playground .pg-root #pg-editor {
  color: #dbe9f2 !important;
}
body[data-theme="light"] #tab-playground .pg-root #pg-code-trace span b { color: #8da4b7 !important; }
body[data-theme="light"] #tab-playground .pg-root #pg-code-trace .pg-active-line { color: #f2fbff !important; }