.stm-subject-motion { --subject-motion-color:#72b8ff; display:grid; grid-template-columns:minmax(0,.87fr) minmax(0,1.3fr); gap:20px; align-items:center; position:relative; isolation:isolate; min-width:0; margin:0 0 24px; padding:24px 28px; overflow:hidden; border:1px solid #283c55; border-radius:20px; color:#eef5ff; background:radial-gradient(ellipse at 78% 58%,color-mix(in srgb,var(--subject-motion-color) 9%,transparent),transparent 58%),linear-gradient(112deg,#080f1d,#0c1728); box-shadow:0 16px 38px #00000020; }
.stm-subject-motion *, .stm-subject-motion *::before, .stm-subject-motion *::after { box-sizing:border-box; min-width:0; }
.stm-subject-motion-copy { position:relative; z-index:1; }
.stm-subject-motion-kicker { display:flex; gap:9px; align-items:center; color:var(--subject-motion-color); font-size:11px; font-weight:750; letter-spacing:1.4px; text-transform:uppercase; line-height:1.8; overflow-wrap:anywhere; }
.stm-subject-motion-kicker > span { display:grid; place-items:center; flex:0 0 auto; width:30px; height:30px; border:1px solid color-mix(in srgb,var(--subject-motion-color) 30%,transparent); border-radius:9px; background:color-mix(in srgb,var(--subject-motion-color) 8%,transparent); font-family:'Cambria Math',Georgia,serif; font-size:18px; letter-spacing:0; }
.stm-subject-motion h2 { margin:17px 0 10px; max-width:390px; color:#f1f6ff; font-size:clamp(24px,2.6vw,34px); font-weight:800; line-height:1.18; letter-spacing:-.9px; overflow-wrap:anywhere; }
.stm-subject-motion p { margin:0; max-width:370px; color:#a4b7cf; font-size:13px; line-height:1.8; overflow-wrap:anywhere; }
.stm-subject-motion-context { margin-top:17px; padding-left:11px; border-left:2px solid var(--subject-motion-color); color:#c5d7e9; font-size:11px; font-weight:600; line-height:1.7; overflow-wrap:anywhere; }
.stm-subject-motion-stage { position:relative; min-width:0; overflow:hidden; padding:4px 0 18px; }
.stm-subject-motion-stage svg { position:relative; z-index:1; display:block; width:100%; max-width:560px; height:auto; margin:auto; overflow:hidden; stroke-linecap:round; stroke-linejoin:round; }
.stm-subject-motion-stage svg text { fill:#a9bfd5; font-family:'Cambria Math',Georgia,serif; }
.stm-subject-motion-grid { stroke:#31516b; stroke-width:.7; fill:none; opacity:.19; }
.stm-subject-motion-axis { stroke:#69849e; stroke-width:1; fill:none; opacity:.65; }
.stm-subject-motion-tick { stroke:#65889f; stroke-width:1.2; fill:none; }
.stm-subject-motion-circle { fill:none; stroke:var(--subject-motion-color); stroke-width:1.3; opacity:.5; }
.stm-subject-motion-curve { stroke:var(--subject-motion-color); stroke-width:2.5; fill:none; }
.stm-subject-motion-gold { stroke:#ffd38a; stroke-width:2.1; fill:none; }
.stm-subject-motion-secondary { stroke:#f0f8ff; stroke-width:2; fill:none; }
.stm-subject-motion-gold-fill { fill:#ffd38a; }
.stm-subject-motion-point { fill:#fff; stroke:var(--subject-motion-color); stroke-width:3; }
.stm-subject-motion-area { fill:color-mix(in srgb,var(--subject-motion-color) 16%,transparent); stroke:var(--subject-motion-color); stroke-width:1.4; }
.stm-subject-motion-area-soft { fill:color-mix(in srgb,var(--subject-motion-color) 6%,transparent); stroke:none; }
.stm-subject-motion-dashed { fill:none; stroke:var(--subject-motion-color); stroke-dasharray:4 5; stroke-width:1.2; opacity:.55; }
.stm-subject-motion-angle { fill:none; stroke:#fff; stroke-width:1.5; opacity:.65; }
.stm-subject-motion-label { font-size:14px; letter-spacing:.2px; }
.stm-subject-motion-stage svg .stm-subject-motion-equation { fill:var(--subject-motion-color); font-size:24px; font-weight:650; }
.stm-subject-motion-stage svg .stm-subject-motion-equation-small { fill:var(--subject-motion-color); font-size:18px; font-weight:600; }
.stm-subject-motion-fraction path { fill:#122333; stroke:#233e50; stroke-width:1.5; transition:fill .3s; }
.stm-subject-motion-fraction path.is-filled { fill:color-mix(in srgb,var(--subject-motion-color) 38%,#0a1b24); stroke:var(--subject-motion-color); }
.stm-subject-motion-tiles rect { fill:color-mix(in srgb,var(--subject-motion-color) 17%,#0c1524); stroke:var(--subject-motion-color); stroke-width:1.5; }
.stm-subject-motion-tiles text { fill:#eef5ff!important; font-size:22px; }
.stm-subject-motion-units circle { fill:var(--subject-motion-color); }
.stm-subject-motion[data-subject-motion="algebra"] .stm-subject-motion-stage svg{padding-bottom:8px;overflow:visible}
.stm-subject-motion[data-subject-motion="algebra"] .stm-subject-motion-grid{opacity:.08}
.stm-algebra-halo{fill:none;stroke:#93a8ff;stroke-width:.8;stroke-dasharray:3 10;opacity:.2;transform-origin:280px 126px;animation:stm-algebra-halo 38s linear infinite}
.stm-algebra-shadow{fill:#000;opacity:.3}
.stm-algebra-stand{fill:none;stroke:#7187b1;stroke-width:8;stroke-linecap:round}
.stm-algebra-beam{fill:none;stroke:#c2cfff;stroke-width:5;stroke-linecap:round}
.stm-algebra-suspension{fill:none;stroke:#7486a8;stroke-width:1.3}
.stm-algebra-pan{fill:#1c2945;stroke:#7897d9;stroke-width:1.5}
.stm-algebra-pivot{fill:#16213b;stroke:#b9c7ff;stroke-width:2}
.stm-algebra-pivot-core{fill:#d6e1ff}
.stm-algebra-added circle{fill:#f7d294;stroke:#f7d294;stroke-width:1}
.stm-algebra-operation rect{fill:#26334c;stroke:#849ad1;stroke-width:1}
.stm-subject-motion-stage svg .stm-algebra-operation text{fill:#e1e8ff;font-size:15px;font-family:Inter,Arial,sans-serif;font-weight:700}
.stm-subject-motion-stage svg .stm-algebra-equation{fill:#e4ecff;font-size:30px;font-weight:700;letter-spacing:1px}
.stm-subject-motion-stage svg .stm-algebra-step{fill:#92a7c9;font-family:Inter,Arial,sans-serif;font-size:9px;letter-spacing:1.5px;font-weight:650}
.stm-algebra-pager circle{fill:#b7c9ff}
@keyframes stm-algebra-halo{to{transform:rotate(360deg)}}
.stm-subject-motion-riemann rect { fill:color-mix(in srgb,var(--subject-motion-color) 18%,transparent); stroke:var(--subject-motion-color); stroke-width:.8; }
.stm-subject-motion-surface { fill:none; stroke:var(--subject-motion-color); stroke-width:1; opacity:.55; }
.stm-subject-motion-field { fill:none; stroke:var(--subject-motion-color); stroke-width:1.5; opacity:.33; }
.stm-subject-motion-orbit { position:absolute; width:180px; height:180px; left:50%; top:50%; border:1px solid color-mix(in srgb,var(--subject-motion-color) 7%,transparent); border-radius:50%; transform:translate(-50%,-50%); box-shadow:0 0 0 22px color-mix(in srgb,var(--subject-motion-color) 2%,transparent),0 0 0 44px color-mix(in srgb,var(--subject-motion-color) 1%,transparent); pointer-events:none; }
.stm-subject-motion-stage-label { position:absolute; bottom:0; left:0; right:0; text-align:center; color:#6b869e; font-size:9px; font-weight:650; letter-spacing:2px; line-height:1.8; }
.stm-subject-motion.is-entering .stm-subject-motion-copy { animation:stm-subject-copy-enter .55s cubic-bezier(.2,.7,.2,1) both; }
.stm-subject-motion.is-entering .stm-subject-motion-stage { animation:stm-subject-scene-enter .7s cubic-bezier(.17,.75,.2,1) both; }
@keyframes stm-subject-copy-enter { from { opacity:0; transform:translateY(9px); } to { opacity:1; transform:translateY(0); } }
@keyframes stm-subject-scene-enter { from { opacity:0; transform:scale(.93) translateY(8px); } to { opacity:1; transform:scale(1) translateY(0); } }
body.motion-paused .stm-subject-motion *, .stm-subject-motion[data-motion-state="paused"] * { animation:none!important; transition:none!important; }
@media(max-width:900px) { .stm-subject-motion { grid-template-columns:minmax(0,.9fr) minmax(0,1.15fr); gap:8px; padding:22px; } .stm-subject-motion h2 { font-size:27px; } .stm-subject-motion-kicker { font-size:10px; letter-spacing:1px; } }
@media(max-width:620px) { .stm-subject-motion { grid-template-columns:minmax(0,1fr); gap:11px; padding:22px 20px 15px; border-radius:17px; } .stm-subject-motion h2 { margin:13px 0 8px; font-size:28px; } .stm-subject-motion p { max-width:none; font-size:12px; } .stm-subject-motion-context { margin-top:11px; font-size:11px; } .stm-subject-motion-stage { margin:0 -5px; } .stm-subject-motion-stage svg { width:100%; max-width:430px; } .stm-subject-motion-stage-label { font-size:8px; letter-spacing:1.5px; } }
@media(prefers-reduced-motion:reduce) { .stm-subject-motion * { animation:none!important; transition:none!important; } }

/* A distinct, readable dark palette accompanies each subject throughout learning. */
:is([data-subject-theme="aritmetica"],[data-subject-motion="aritmetica"],.course-card[data-course="aritmetica"],[data-course-subject="aritmetica"]) { --subject-base:#17140f; --subject-surface:#2a2318; --subject-accent:#f6d78c; --subject-edge:#6b5838; }
:is([data-subject-theme="algebra"],[data-subject-motion="algebra"],.course-card[data-course="algebra"],[data-course-subject="algebra"],[data-video-course-card="algebra-desde-cero"],[data-video-classroom-course="algebra-desde-cero"]) { --subject-base:#151023; --subject-surface:#261b3b; --subject-accent:#cab7ff; --subject-edge:#62518a; }
:is([data-subject-theme="geometria"],[data-subject-motion="geometria"],.course-card[data-course="geometria"],[data-course-subject="geometria"],[data-video-course-card="geometria-trigonometria"],[data-video-classroom-course="geometria-trigonometria"]) { --subject-base:#1d170f; --subject-surface:#33281a; --subject-accent:#f3ce91; --subject-edge:#80643a; }
:is([data-subject-theme="trigonometria"],[data-subject-motion="trigonometria"],.course-card[data-course="trigonometria"],[data-course-subject="trigonometria"]) { --subject-base:#1c130f; --subject-surface:#352118; --subject-accent:#ffc28e; --subject-edge:#805338; }
:is([data-subject-theme="analitica"],[data-subject-motion="analitica"],.course-card[data-course="analitica"],[data-course-subject="analitica"],[data-video-course-card="geometria-analitica"],[data-video-classroom-course="geometria-analitica"]) { --subject-base:#0d1728; --subject-surface:#172b49; --subject-accent:#9dccff; --subject-edge:#3b638b; }
:is([data-subject-theme="diferencial"],[data-subject-motion="diferencial"],.course-card[data-course="diferencial"],[data-course-subject="diferencial"],[data-video-course-card="calculo-diferencial"],[data-video-classroom-course="calculo-diferencial"]) { --subject-base:#0c1d18; --subject-surface:#14342c; --subject-accent:#8fe4bc; --subject-edge:#3d755f; }
:is([data-subject-theme="integral"],[data-subject-motion="integral"],.course-card[data-course="integral"],[data-course-subject="integral"],[data-video-course-card="calculo-integral"],[data-video-classroom-course="calculo-integral"]) { --subject-base:#1e111a; --subject-surface:#351f2d; --subject-accent:#f6b2d0; --subject-edge:#80536d; }
:is([data-subject-theme="probabilidad"],[data-subject-motion="probabilidad"],.course-card[data-course="probabilidad"],[data-course-subject="probabilidad"]) { --subject-base:#1c1120; --subject-surface:#301d34; --subject-accent:#e4b2e9; --subject-edge:#76537b; }
:is([data-subject-theme="vectorial"],[data-subject-motion="vectorial"],.course-card[data-course="vectorial"],[data-course-subject="vectorial"],[data-video-course-card="calculo-vectorial"],[data-video-classroom-course="calculo-vectorial"]) { --subject-base:#0d1d20; --subject-surface:#173237; --subject-accent:#a1e5dd; --subject-edge:#4b7377; }
:is([data-subject-theme="ecuaciones"],[data-subject-motion="ecuaciones"],.course-card[data-course="ecuaciones"],[data-course-subject="ecuaciones"]) { --subject-base:#181d11; --subject-surface:#29321b; --subject-accent:#d1e69a; --subject-edge:#63743e; }

/* University subjects keep their own identity in learning, practice and video courses. */
:is([data-subject-theme="lineal"],[data-subject-motion="lineal"],.course-card[data-course="lineal"],[data-course-subject="lineal"],[data-video-course-card="algebra-lineal"],[data-video-classroom-course="algebra-lineal"]) { --subject-base:#21150f; --subject-surface:#3b261b; --subject-accent:#ffc49b; --subject-edge:#956044; }
:is([data-subject-theme="multivariable"],[data-subject-motion="multivariable"],.course-card[data-course="multivariable"],[data-course-subject="multivariable"],[data-video-course-card="calculo-multivariable"],[data-video-classroom-course="calculo-multivariable"]) { --subject-base:#0d2020; --subject-surface:#173b38; --subject-accent:#8ee6d4; --subject-edge:#447e75; }

body.premium-theme #main[data-subject-theme] {
  --study-cyan:var(--subject-accent); --study-muted:#b5c2d6;
  background:linear-gradient(145deg,var(--subject-surface),var(--subject-base) 75%);
  background:radial-gradient(ellipse at 95% 0,color-mix(in srgb,var(--subject-accent) 8%,transparent),transparent 65%),linear-gradient(145deg,var(--subject-surface),var(--subject-base) 75%);
  border-radius:0 0 24px 24px; color:#edf3ff;
}
body.premium-theme #main[data-subject-theme] :is(.panel,.quiz-card,.topic-list,.theory-actions,.learning-map,.learning-next,.stm-study-hero,.stm-study-navigation,.stm-study-lesson,.stm-study-example,.stm-study-practice,.stm-study-continuation) {
  border-color:var(--subject-edge); background:var(--subject-base);
  background:linear-gradient(130deg,color-mix(in srgb,var(--subject-surface) 86%,#101522),var(--subject-base));
}
body.premium-theme #main[data-subject-theme] :is(.stm-study,.stm-module-journey) { --study-cyan:var(--subject-accent); }
body.premium-theme #main[data-subject-theme] :is(.stm-study-kicker,.learning-current,.learning-map-key,.quiz-topline,.page-heading>.eyebrow) { color:var(--subject-accent); }
body.premium-theme #main[data-subject-theme] :is(.learning-map-topic.is-current,.learning-level,.topic-button.active,.difficulty.active,.stm-study-areas a[aria-current],.stm-study-navigation a[aria-current]) {
  color:var(--subject-accent); background:var(--subject-surface); border-color:var(--subject-edge);
}
body.premium-theme #main[data-subject-theme] .stm-study-navigation a[aria-current] { box-shadow:inset 2px 0 var(--subject-accent); }
body.premium-theme #main[data-subject-theme] .answer-option.selected:not(.correct):not(.wrong) { background:var(--subject-surface); border-color:var(--subject-accent); }
body.premium-theme #main[data-subject-theme] .stm-study-formula { background:var(--subject-surface); border-color:var(--subject-edge); }
body.premium-theme #main[data-subject-theme] .stm-study-formula p { color:var(--subject-accent); }
.stm-subject-motion[data-subject-motion] {
  border-color:var(--subject-edge); background:linear-gradient(112deg,var(--subject-base),var(--subject-surface));
  background:radial-gradient(ellipse at 78% 58%,color-mix(in srgb,var(--subject-accent) 10%,transparent),transparent 65%),linear-gradient(112deg,var(--subject-base),var(--subject-surface));
}
body.premium-theme .course-card[data-course] { background:var(--subject-base); border-color:var(--subject-edge); }
body.premium-theme .course-card[data-course] .course-art { background:linear-gradient(125deg,var(--subject-base),var(--subject-surface)); border-bottom-color:var(--subject-edge); }
body.premium-theme .course-card[data-course] .course-tag { border-color:var(--subject-edge); color:var(--subject-accent); background:var(--subject-base); }
body.premium-theme .course-card[data-course]:hover { border-color:var(--subject-accent); }
.stm-videos-course-card[data-video-course-card] { --video-accent:var(--subject-accent); background:linear-gradient(145deg,var(--subject-surface),var(--subject-base)); border-color:var(--subject-edge); }
.stm-videos-classroom[data-video-classroom-course] { --video-accent:var(--subject-accent); }

/* Original academy character, produced for each course, with typeset mathematics. */
.stm-subject-motion.is-hero-scene { grid-template-columns:minmax(0,.86fr) minmax(0,1.2fr); gap:26px; padding:28px 0 28px 30px; min-height:300px; }
.stm-subject-motion.is-hero-scene .stm-subject-motion-copy { padding:0 0 0 0; }
.stm-subject-hero-media { position:relative; isolation:isolate; display:block; min-width:0; aspect-ratio:16/9; overflow:hidden; color:var(--subject-accent,#cab7ff); background:var(--subject-base,#151023); }
.stm-subject-motion.is-hero-scene>.stm-subject-hero-media { align-self:stretch; width:100%; min-height:280px; aspect-ratio:auto; margin:-28px 0; }
.stm-subject-hero-poster,.stm-subject-hero-video { position:absolute; inset:0; display:block; width:100%; height:100%; max-width:none; object-fit:cover; object-position:50% 44%; }
.stm-subject-hero-poster { z-index:0; }
.stm-subject-hero-video { z-index:1; opacity:0; transition:opacity .6s ease; }
.stm-subject-hero-media[data-subject-media-state="playing"] .stm-subject-hero-video { opacity:1; }
.stm-subject-hero-shade { position:absolute; z-index:2; inset:0; background:linear-gradient(90deg,var(--subject-base,#151023),transparent 25%),linear-gradient(0deg,var(--subject-base,#151023),transparent 46%); pointer-events:none; }
.stm-subject-hero-ring { position:absolute; z-index:3; left:7%; top:11%; width:25%; aspect-ratio:1; border:1px solid currentColor; border-radius:50%; opacity:.21; transform:rotate(-20deg); pointer-events:none; }
.stm-subject-hero-ring::before { content:''; position:absolute; left:50%; top:-3px; width:5px; height:5px; border-radius:50%; background:currentColor; }
.stm-subject-hero-formula { position:absolute; z-index:4; left:8%; bottom:16%; max-width:86%; padding:9px 13px; border:1px solid color-mix(in srgb,var(--subject-accent,#cab7ff) 32%,transparent); border-radius:9px; background:#090d18d9; color:#f4f2ff; box-shadow:0 7px 25px #0003; font-size:clamp(15px,1.8vw,24px); line-height:1.4; pointer-events:none; animation:stm-subject-formula-float 7s ease-in-out infinite; }
.stm-subject-hero-formula math { font-family:'Cambria Math','STIX Two Math',Georgia,serif; }
.stm-subject-hero-symbol { position:absolute; z-index:3; right:8%; top:12%; display:grid; place-items:center; min-width:34px; height:34px; padding:0 8px; border:1px solid color-mix(in srgb,var(--subject-accent,#cab7ff) 35%,transparent); border-radius:10px; background:#090d18a8; color:var(--subject-accent,#cab7ff); font:italic 23px Georgia,serif; animation:stm-subject-formula-float 9s ease-in-out -3s infinite reverse; }
.stm-subject-hero-caption { position:absolute; z-index:4; left:8%; bottom:5%; font-size:8px; line-height:1.7; font-weight:650; letter-spacing:2px; color:#d0d9ec; pointer-events:none; }
.stm-subject-hero-media.is-card { position:absolute; inset:0; width:100%; height:100%; aspect-ratio:auto; }
.stm-subject-hero-media.is-card .stm-subject-hero-shade { background:linear-gradient(0deg,var(--subject-base,#151023),transparent 50%),linear-gradient(90deg,#080a1622,transparent 65%); }
.stm-subject-hero-media.is-card .stm-subject-hero-ring { display:none; }
.stm-subject-hero-media.is-card .stm-subject-hero-formula { left:9px; bottom:10px; max-width:calc(100% - 18px); padding:5px 8px; border-radius:6px; font-size:14px; line-height:1.4; }
.stm-subject-hero-media.is-card .stm-subject-hero-symbol { right:10px; top:10px; height:27px; min-width:27px; border-radius:7px; font-size:18px; }
body.premium-theme .course-art:has(.stm-subject-hero-media) { width:100%; height:auto; min-height:0; aspect-ratio:16/9; }
body.premium-theme .course-art:has(.stm-subject-hero-media)::before,body.premium-theme .course-art:has(.stm-subject-hero-media)::after { display:none; }
body.premium-theme .course-art:has(.stm-subject-hero-media) .course-tag { z-index:5; max-width:calc(100% - 55px); }
body.premium-theme .course-art:has(.stm-subject-hero-media) .combined-course-tag { display:none; }
.stm-subject-hero-media[data-subject-media-state="paused"] :is(.stm-subject-hero-formula,.stm-subject-hero-symbol),body.motion-paused .stm-subject-hero-media * { animation-play-state:paused!important; }
@keyframes stm-subject-formula-float { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-5px); } }
@media(max-width:900px) { .stm-subject-motion.is-hero-scene { grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:15px; padding-left:23px; } .stm-subject-motion.is-hero-scene>.stm-subject-hero-media { min-height:285px; } .stm-subject-hero-formula { left:6%; padding:8px 10px; font-size:17px; } }
@media(max-width:620px) { .stm-subject-motion.is-hero-scene { grid-template-columns:minmax(0,1fr); gap:0; padding:23px 21px 0; } .stm-subject-motion.is-hero-scene>.stm-subject-hero-media { min-height:0; aspect-ratio:16/9; width:calc(100% + 42px); margin:19px -21px 0; } .stm-subject-hero-shade { background:linear-gradient(180deg,var(--subject-base,#151023),transparent 22%),linear-gradient(0deg,var(--subject-base,#151023),transparent 42%); } .stm-subject-hero-formula { left:7%; bottom:15%; font-size:20px; } .stm-subject-hero-caption { left:7%; font-size:8px; letter-spacing:1.6px; } }
@media(prefers-reduced-motion:reduce) { .stm-subject-hero-media * { animation:none!important; transition:none!important; } .stm-subject-hero-video { display:none; } }