/* ============================================================
   MOUNT CARMEL — Subject showcase pages (subject.css)
   Loaded on top of main.css. Per-subject accent via body class.
   ============================================================ */

/* per-subject accent */
.subj-maths{--subj:#4b57c9;--subj-d:#3a45a8;--subj-tint:#edeffb}
.subj-science{--subj:#0f9c8e;--subj-d:#0b7d72;--subj-tint:#e4f6f3}
.subj-english{--subj:#a24b8e;--subj-d:#853d75;--subj-tint:#f7ebf3}
.subj-social{--subj:#c07b2b;--subj-d:#a26522;--subj-tint:#fbf1e3}

.btn--subj{background:var(--subj);color:#fff}
.btn--subj:hover{background:var(--subj-d);transform:translateY(-2px)}

/* ============ SUBJECT HERO ============ */
.sub-hero{padding:150px 0 90px;background:
  radial-gradient(120% 90% at 85% 0%,var(--subj-tint),transparent 60%),var(--paper)}
.sub-hero__inner{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.crumb{font-size:13px;font-weight:600;color:var(--muted);margin-bottom:20px;letter-spacing:.02em}
.crumb a{color:var(--subj-d)}
.crumb span{margin:0 6px;color:var(--muted)}
.sub-badge{display:inline-block;background:#fff;border:1px solid var(--line);color:var(--subj-d);
  font-weight:600;font-size:13px;padding:7px 15px;border-radius:100px;margin-bottom:24px}
.sub-hero__title{font-size:clamp(3rem,7vw,5.4rem);line-height:1;margin-bottom:22px}
.sub-hero__title .hl{color:var(--subj)}
.sub-hero__lede{font-size:clamp(1.05rem,1.4vw,1.22rem);color:var(--text);max-width:480px;margin-bottom:34px}
.sub-hero__actions{display:flex;flex-wrap:wrap;gap:14px}

.sub-hero__viz{position:relative;display:grid;place-items:center}
.hero-graph{width:100%;max-width:420px}
.hero-graph .grid line{stroke:var(--line);stroke-width:1}
.hero-graph .axis{stroke:#c9c3b6;stroke-width:1.5}
.hero-graph .curve{stroke:var(--subj);stroke-width:3.5;stroke-linecap:round}
.hero-graph .pt{fill:var(--gold)}
.viz-tag{position:absolute;bottom:8px;right:14px;font-family:'JetBrains Mono',monospace;font-size:13px;
  color:var(--subj-d);background:#fff;border:1px solid var(--line);padding:5px 12px;border-radius:100px}

/* self-drawing paths (start hidden; .in reveals) */
.draw{stroke-dasharray:var(--len,1000);stroke-dashoffset:var(--len,1000);transition:stroke-dashoffset 1.6s var(--ease)}
.draw.in{stroke-dashoffset:0}

/* ============ EMPATHY ============ */
/* the hero's 90px bottom already stacks on this — 62 keeps all 8 subject pages
   in step with the rest of the site (~110-145px below the hero) */
.empathy{padding:62px 0 96px;text-align:center;background:var(--white)}
.empathy__line{font-family:var(--serif);font-weight:500;font-size:clamp(1.4rem,3vw,2.3rem);line-height:1.32;
  color:var(--muted);max-width:22ch;margin-inline:auto}
.empathy__line span{color:var(--ink)}
.empathy__line em{font-style:italic;color:var(--subj)}

/* ============ METHOD ============ */
.method{padding:120px 0}
.method__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.mcard{padding:32px 26px;border-radius:var(--radius);background:var(--white);border:1px solid var(--line);
  transition:transform .35s var(--ease),box-shadow .35s;position:relative;overflow:hidden}
.mcard::before{content:"";position:absolute;top:0;left:0;width:100%;height:4px;background:var(--subj);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.mcard:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.mcard:hover::before{transform:scaleX(1)}
.mcard__no{font-family:'JetBrains Mono',monospace;font-size:15px;color:var(--subj);font-weight:600}
.mcard h3{font-size:1.28rem;margin:16px 0 10px}
.mcard p{color:var(--text);font-size:.96rem}

/* ============ WORKED EXAMPLES ============ */
.examples{padding:120px 0;background:var(--subj-tint)}
.worked{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);
  overflow:hidden;margin-bottom:28px}
.worked__head{display:flex;align-items:center;justify-content:space-between;padding:18px 26px;border-bottom:1px solid var(--line)}
.worked__chip{display:inline-block;background:var(--subj-tint);color:var(--subj-d);font-weight:600;font-size:12px;
  letter-spacing:.06em;text-transform:uppercase;padding:6px 13px;border-radius:100px}
.replay{background:none;border:1px solid var(--line);color:var(--muted);font-weight:600;font-size:13px;
  padding:7px 14px;border-radius:100px;cursor:pointer;transition:.2s}
.replay:hover{border-color:var(--subj);color:var(--subj)}
.worked__body{padding:32px 34px 38px}
.worked__problem{margin-bottom:24px}
.worked__label{display:block;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:8px}
.eq{font-family:'JetBrains Mono',monospace;font-weight:600;font-size:clamp(1.4rem,3vw,2rem);color:var(--ink);
  background:var(--paper);border:1px dashed var(--line);border-radius:12px;padding:16px 22px;display:inline-block}
.eq--sm{font-size:1.05rem;padding:12px 18px;line-height:1.7}
.mono{font-family:'JetBrains Mono',monospace;font-weight:600;color:var(--subj-d);font-size:.94em}

.steps{list-style:none;display:flex;flex-direction:column;gap:14px}
.wstep{display:flex;align-items:flex-start;gap:14px;font-size:1.05rem;color:var(--text);
  opacity:0;transform:translateY(12px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.worked.play .wstep{opacity:1;transform:none;transition-delay:calc(var(--i) * .55s)}
.wstep b{color:var(--ink)}
.wstep__n{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;
  background:var(--subj-tint);color:var(--subj-d);font-weight:700;font-size:14px;margin-top:1px}
.wstep--answer{margin-top:6px;padding:16px 18px;background:var(--subj-tint);border-radius:12px;font-size:1.15rem;color:var(--ink)}
.wstep--answer .wstep__n{background:var(--subj);color:#fff}

/* split worked (viz + text) */
.worked--split{display:grid;grid-template-columns:1fr 1fr;align-items:center}
.worked__viz{padding:30px;display:grid;place-items:center;background:var(--paper);height:100%}
.worked__viz svg{width:100%;max-width:380px}
.worked__text{padding:40px 42px}
.worked__text h3{font-size:1.6rem;margin:16px 0 12px}
.worked__text p{color:var(--text);margin-bottom:16px}
.worked__ans{color:var(--ink)!important;font-weight:500}
.worked__ans b{color:var(--subj-d)}

/* graph + trig svg styling */
.line-graph .grid line,.trig .ground{stroke:var(--line);stroke-width:1}
.line-graph .axis{stroke:#c9c3b6;stroke-width:1.5}
.line-graph .line1{stroke:var(--subj);stroke-width:3.5;stroke-linecap:round}
.line-graph .line2{stroke:var(--gold);stroke-width:3.5;stroke-linecap:round}
.line-graph .pt{fill:var(--ink)}
.ptlabel,.tlabel{font-family:'JetBrains Mono',monospace;font-size:14px;fill:var(--ink);font-weight:600}
.trig .ground{stroke:#c9c3b6;stroke-width:2}
.trig .tower{fill:var(--subj-tint);stroke:var(--subj);stroke-width:2}
.trig .hgt{stroke:var(--gold);stroke-width:3}
.trig .dist{stroke:#c9c3b6;stroke-width:2;stroke-dasharray:4 4}
.trig .sight{stroke:var(--subj);stroke-width:3;stroke-linecap:round}
.trig .obs{fill:var(--ink)}
.trig .arc{stroke:var(--subj-d);stroke-width:2}
.trig .hlabel{fill:var(--gold-d)}

/* ============ CHAPTERS ============ */
.chapters{padding:120px 0}
.chap-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.chap{display:flex;align-items:center;gap:14px;padding:18px 20px;border-radius:var(--radius-sm);
  background:var(--white);border:1px solid var(--line);cursor:default;transition:transform .3s var(--ease),box-shadow .3s,border-color .3s}
.chap:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--subj)}
.chap__no{font-family:'JetBrains Mono',monospace;font-size:14px;font-weight:600;color:var(--subj);
  background:var(--subj-tint);border-radius:8px;padding:5px 9px;flex:none}
.chap__name{font-weight:600;font-size:.98rem;color:var(--ink);line-height:1.25}

/* ============ DAILY LIFE ============ */
.daily{padding:120px 0;background:var(--white)}
.daily__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.daily-card{padding:36px 30px;border-radius:var(--radius);background:var(--subj-tint);transition:transform .35s var(--ease)}
.daily-card:hover{transform:translateY(-6px)}
.daily-card__emoji{display:grid;place-items:center;width:60px;height:60px;background:#fff;border-radius:16px;font-size:28px;margin-bottom:22px;box-shadow:0 8px 18px -10px rgba(0,0,0,.2)}
.daily-card h3{font-size:1.32rem;margin-bottom:10px}
.daily-card p{color:var(--text);font-size:.98rem}

/* ============ RESPONSIVE ============ */
@media(max-width:980px){
  .sub-hero__inner{grid-template-columns:1fr;gap:36px}
  .sub-hero__viz{order:-1;max-width:420px}
  .method__grid{grid-template-columns:repeat(2,1fr)}
  .worked--split{grid-template-columns:1fr}
  .chap-grid{grid-template-columns:repeat(2,1fr)}
  .daily__grid{grid-template-columns:1fr}
}
@media(max-width:520px){
  .sub-hero{padding:120px 0 70px}
  .method,.examples,.chapters,.daily{padding:80px 0}
  .method__grid{grid-template-columns:1fr}
  .chap-grid{grid-template-columns:1fr}
  .worked__body,.worked__text{padding:26px 22px}
}
/* ============================================================
   STUNNING PASS — ambient, living maths, sparkle, playground
   ============================================================ */
.sub-hero{position:relative;overflow:hidden}

/* floating math symbols (container gets mouse parallax; children drift) */
.math-float{position:absolute;inset:0;z-index:0;pointer-events:none;transition:transform .3s ease-out}
.math-float span{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);
  font-family:var(--serif);font-weight:600;font-size:clamp(1.6rem,3vw,2.8rem);color:var(--subj);opacity:.13;
  animation:floaty 9s ease-in-out infinite}
.math-float span:nth-child(2n){color:var(--gold);animation-duration:11s}
.math-float span:nth-child(3n){animation-duration:13s}
.math-float span:nth-child(4n){animation-duration:8s}
@keyframes floaty{0%,100%{margin-top:0}50%{margin-top:-16px}}

/* ambient dot-grid on the examples section */
.ambient-grid{position:relative}
.ambient-grid::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:radial-gradient(rgba(27,28,25,.055) 1.4px,transparent 1.5px);background-size:26px 26px;
  animation:gridDrift 22s linear infinite;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent)}
.ambient-grid>*{position:relative;z-index:1}
@keyframes gridDrift{from{background-position:0 0}to{background-position:26px 26px}}

/* scroll-scrubbed steps */
.wstep.show{opacity:1;transform:none}
.worked--scrolly .wstep{transition:opacity .35s var(--ease),transform .35s var(--ease)}
.wstep.current .wstep__n{transform:scale(1.16);background:var(--subj);color:#fff;box-shadow:0 0 0 5px var(--subj-tint)}
.step-dots{display:flex;gap:6px;margin-left:auto;margin-right:14px}
.step-dots i{width:8px;height:8px;border-radius:50%;background:var(--line);transition:.3s var(--ease)}
.step-dots i.on{background:var(--subj);transform:scale(1.25)}

/* sparkle burst on the answer */
.sparkles{position:relative;display:inline-block;width:0;height:0;vertical-align:middle}
.sparkles i{position:absolute;top:0;left:0;width:8px;height:8px;border-radius:50%;background:var(--gold);opacity:0}
.sparkles i:nth-child(1){--tx:-22px;--ty:-20px}
.sparkles i:nth-child(2){--tx:20px;--ty:-24px}
.sparkles i:nth-child(3){--tx:30px;--ty:6px}
.sparkles i:nth-child(4){--tx:-28px;--ty:8px}
.sparkles i:nth-child(5){--tx:2px;--ty:-30px}
.worked.sparkle .sparkles i{animation:spark 1s var(--ease) forwards}
@keyframes spark{0%{opacity:0;transform:translate(0,0) scale(0)}40%{opacity:1;transform:translate(var(--tx),var(--ty)) scale(1.3)}100%{opacity:0;transform:translate(calc(var(--tx)*1.5),calc(var(--ty)*1.5)) scale(.3)}}

/* graph tracer + intersection ripple */
.line-graph .tracer{fill:var(--gold)}
.line-graph .ripple{fill:none;stroke:var(--ink);stroke-width:2;transform-box:fill-box;transform-origin:center;animation:ripple 2.6s ease-out infinite;animation-delay:2s}
@keyframes ripple{0%{opacity:.5;transform:scale(.5)}70%{opacity:0}100%{opacity:0;transform:scale(3.2)}}

/* ============ INTERACTIVE GRAPH PLAYGROUND ============ */
.playground{padding:120px 0;background:var(--white)}
.playground__sub{color:var(--text);max-width:46ch;margin:14px auto 0}
.play-card{display:grid;grid-template-columns:1.05fr .95fr;background:var(--white);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.play-graph{background:var(--paper);display:grid;place-items:center;padding:26px}
.play-graph svg{width:100%;max-width:430px}
#playSvg .grid line{stroke:var(--line);stroke-width:1}
#playSvg .axis{stroke:#c9c3b6;stroke-width:1.5}
#playSvg .parab{stroke:var(--subj);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round}
#playSvg .root{fill:var(--gold)}
.play-controls{padding:42px 44px;display:flex;flex-direction:column;gap:22px;justify-content:center}
.play-eq{font-family:'JetBrains Mono',monospace;font-weight:600;font-size:clamp(1.2rem,2.4vw,1.6rem);color:var(--ink);
  background:var(--subj-tint);border-radius:12px;padding:16px 18px;text-align:center;letter-spacing:.02em}
.slider{display:grid;grid-template-columns:1fr auto;gap:8px 14px;align-items:center}
.slider>span{grid-column:1;grid-row:1;font-size:14px;color:var(--text)}
.slider>span b{color:var(--subj-d);font-family:'JetBrains Mono',monospace}
.slider output{grid-column:2;grid-row:1 / span 2;align-self:center;font-family:'JetBrains Mono',monospace;font-weight:600;
  color:var(--subj);font-size:1.15rem;min-width:3ch;text-align:right}
.slider input[type=range]{grid-column:1;grid-row:2;width:100%;accent-color:var(--subj);height:6px;cursor:pointer}
.play-roots{font-family:'JetBrains Mono',monospace;font-size:.95rem;color:var(--muted);border-top:1px solid var(--line);padding-top:16px}
@media(max-width:980px){.play-card{grid-template-columns:1fr}}

/* ============================================================
   SCIENCE visuals — atom, refraction, circuits
   ============================================================ */
.atom{width:100%;max-width:360px}
.atom .shell{fill:none;stroke:var(--subj);stroke-width:2;opacity:.45}
.atom .nucleus{fill:var(--subj)}
.atom .electron{fill:var(--gold)}

.refraction .slab{fill:var(--subj-tint);stroke:var(--subj);stroke-width:1.5;opacity:.9}
.refraction .slabtxt{fill:var(--subj-d);font-size:13px;text-anchor:middle;opacity:.65}
.refraction .normal{stroke:#c9c3b6;stroke-width:1.5;stroke-dasharray:4 4}
.refraction .ray{stroke:var(--subj);stroke-width:3;stroke-linecap:round}
.refraction .hitpt{fill:var(--gold)}

.circuit .wire{stroke:var(--ink);stroke-width:3}
.circuit .eflow{fill:var(--subj)}
.circuit .battery line{stroke:var(--ink);stroke-width:3;stroke-linecap:round}
.circuit .cbulb-glow{fill:var(--gold);opacity:.4;filter:blur(4px);animation:bulbpulse 2s ease-in-out infinite}
.circuit .cbulb{fill:#fff;stroke:var(--subj);stroke-width:2.5}
.circuit .filament{stroke:var(--gold-d);stroke-width:2;fill:none}
@keyframes bulbpulse{0%,100%{opacity:.28}50%{opacity:.7}}

/* Ohm's Law playground circuit */
#ohmSvg .wire{stroke:var(--ink);stroke-width:3}
#ohmSvg .flow{stroke:var(--gold);stroke-width:4;stroke-dasharray:2 14;stroke-linecap:round;animation:flowmove 1.4s linear infinite}
@keyframes flowmove{to{stroke-dashoffset:-32}}
#ohmSvg .battery line{stroke:var(--ink);stroke-width:3;stroke-linecap:round}
#ohmSvg .clabel{font-family:'JetBrains Mono',monospace;font-weight:600;font-size:16px;fill:var(--subj-d)}
#ohmSvg .bulb-glow{fill:var(--gold);opacity:.4;filter:blur(5px);transition:r .18s ease,opacity .18s ease}
#ohmSvg .bulb{fill:#fff;stroke:var(--subj);stroke-width:2.5;transition:fill .18s}
#ohmSvg .filament{stroke:var(--gold-d);stroke-width:2;fill:none}

/* ============================================================
   MORE SUBJECTS — accents, visuals & interactives
   ============================================================ */
.subj-chemistry{--subj:#7b52c0;--subj-d:#633fa4;--subj-tint:#f0ebfa}
.subj-biology{--subj:#3f9d5a;--subj-d:#2f7d45;--subj-tint:#e7f5ec}
.subj-hindi{--subj:#c2410c;--subj-d:#9a340a;--subj-tint:#fbeee6}
.subj-telugu{--subj:#b5417f;--subj-d:#933468;--subj-tint:#f9e9f2}

.devanagari{font-family:'Tiro Devanagari Hindi','Noto Sans Devanagari',serif}
.telugu{font-family:'Noto Sans Telugu',sans-serif}
.eq--txt{font-family:var(--serif);font-style:italic;font-weight:500;font-size:clamp(1.2rem,2.6vw,1.7rem)}
.play-card--center{grid-template-columns:1fr}

/* Chemistry — molecule + bubbles + pH beaker */
.molecule{width:100%;max-width:360px}.molecule.sm{max-width:300px}
.molecule .bond{stroke:var(--subj);stroke-width:6;stroke-linecap:round;opacity:.55}
.molecule .atom-o{fill:var(--subj)}.molecule .atom-h{fill:var(--gold)}
.molecule .atom-lbl{fill:#fff;font-family:var(--sans);font-weight:700;font-size:26px;text-anchor:middle;dominant-baseline:central}
.molecule .atom-lbl.sm{font-size:18px}
.molecule .bubbles circle{fill:var(--subj);opacity:.3;animation:bubble 3s ease-in infinite}
.molecule .bubbles circle:nth-child(2){animation-duration:3.6s;animation-delay:.6s}
.molecule .bubbles circle:nth-child(3){animation-duration:2.8s;animation-delay:1.2s}
.molecule .bubbles circle:nth-child(4){animation-duration:3.2s;animation-delay:.3s}
@keyframes bubble{0%{transform:translateY(0);opacity:.35}100%{transform:translateY(-70px);opacity:0}}
#phSvg{width:100%;max-width:240px}
#phSvg .beaker,#phSvg .beaker-rim{stroke:var(--ink);stroke-width:3;stroke-linecap:round}
#phLiquid{transition:fill .25s ease;fill:#5bb85b}

/* Biology — DNA, breathing, cell */
.dna{width:100%;max-width:220px}
.dna .strand{stroke:var(--subj);stroke-width:4;stroke-linecap:round;fill:none}
.dna .strand2{stroke:var(--gold);stroke-width:4;stroke-linecap:round;fill:none}
.dna .rungs line{stroke:var(--subj-d);stroke-width:2.5;opacity:.5;stroke-linecap:round}
.breathe{width:100%;max-width:320px}
.breathe .trachea{fill:var(--subj-tint);stroke:var(--subj);stroke-width:2.5}
.breathe .ring{stroke:var(--subj);stroke-width:1.5;opacity:.5;stroke-linecap:round}
.breathe .bronchus{stroke:var(--subj);stroke-width:9;stroke-linecap:round;fill:none}
.breathe .lung{fill:var(--subj-tint);stroke:var(--subj);stroke-width:2.5}
.breathe .branch{stroke:var(--subj);stroke-width:2;opacity:.5;fill:none;stroke-linecap:round}
.breathe .o2{fill:var(--gold);animation:pulse 2s ease-in-out infinite}
.breathe .diaphragm{stroke:#c9c3b6;stroke-width:2.5;stroke-dasharray:5 5;fill:none}
@keyframes pulse{0%,100%{opacity:.35}50%{opacity:1}}

#cellSvg{width:100%;max-width:360px}
#cellSvg .cellwall{fill:var(--subj-tint);stroke:var(--subj);stroke-width:4}
#cellSvg .membrane{fill:#fff;stroke:var(--subj);stroke-width:1.5;opacity:.45}
#cellSvg .vacuole{fill:#e6f4fb;stroke:#bcdcea;stroke-width:1.5}
#cellSvg .vacuole-gloss{fill:#fff;opacity:.4}
#cellSvg .nucleus-o{fill:#cfe9d6;stroke:var(--subj);stroke-width:3}
#cellSvg .nucleolus{fill:var(--subj-d)}
#cellSvg .chloro{fill:var(--subj)}
#cellSvg .grana{stroke:#eafaf0;stroke-width:2;stroke-linecap:round}
#cellSvg .mito{fill:var(--gold)}
#cellSvg .mito-cristae{stroke:#fff;stroke-width:2;opacity:.85}
#cellSvg .wall-mark{fill:var(--subj)}
#cellSvg .cell-lbl{font-family:var(--sans);font-size:11px;font-weight:600;fill:var(--subj-d);text-anchor:middle;pointer-events:none}
#cellSvg .vac-lbl{fill:#5a7d92}
#cellSvg .bio-part{cursor:pointer;transition:filter .2s}
#cellSvg .bio-part:hover,#cellSvg .bio-part.active{filter:drop-shadow(0 0 5px var(--gold))}
.bio-hint{font-size:12px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.1em;display:block;margin-bottom:12px}

/* English — script, parts of speech, tense switcher */
.script{width:100%;max-width:340px}
.script .penline{stroke:var(--subj);stroke-width:4;stroke-linecap:round;fill:none}
.script-word{font-family:var(--serif);font-style:italic;font-size:24px;fill:var(--ink);opacity:.8}
.pos-viz{padding:36px;display:flex;flex-direction:column;gap:22px;justify-content:center}
.pos-sentence{font-family:var(--serif);font-size:clamp(1.3rem,2.6vw,1.9rem);line-height:1.7;text-align:center}
.pos{padding:2px 8px;border-radius:8px}
.pos-n{background:#e7eefb;color:#2c4a8f}.pos-v{background:#fdeaea;color:#a23b3b}
.pos-a{background:#eef2ec;color:#3f6b52}.pos-adv{background:#f6ecf7;color:#7a3d84}
.pos-key{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.pos-key span{font-size:12px;font-weight:600;padding:4px 12px;border-radius:100px}
.tense-box{padding:48px 40px;text-align:center;max-width:600px;margin-inline:auto;width:100%}
.tense-tabs{display:inline-flex;background:var(--subj-tint);border-radius:100px;padding:5px;margin-bottom:30px;gap:4px}
.tense-tabs button{border:0;background:none;font-family:var(--sans);font-weight:600;font-size:14px;color:var(--subj-d);padding:10px 22px;border-radius:100px;cursor:pointer;transition:.25s}
.tense-tabs button.on{background:var(--subj);color:#fff}
.tense-sentence{font-family:var(--serif);font-size:clamp(1.4rem,3vw,2rem);color:var(--ink);line-height:1.4}
.tense-sentence b{color:var(--subj)}
.tense-note{color:var(--muted);margin-top:16px;font-size:.95rem}

/* Social — globe, monsoon, timeline */
.globe{width:100%;max-width:300px}
.globe .globe-o{fill:var(--subj-tint);stroke:var(--subj);stroke-width:2.5}
.globe .meridian,.globe .parallel{stroke:var(--subj);stroke-width:1.5;fill:none;opacity:.55}
.globe .pin{fill:var(--gold);animation:pindrop 2.4s ease-in-out infinite}
@keyframes pindrop{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.monsoon .landmass{fill:var(--subj-tint);stroke:var(--subj);stroke-width:2}
.monsoon .wind{stroke:var(--subj);stroke-width:3;stroke-linecap:round;stroke-dasharray:6 8}
.monsoon .drop{fill:var(--gold);animation:pulse 2s ease-in-out infinite}
.tl-box{padding:48px 40px;text-align:center;max-width:600px;margin-inline:auto;width:100%}
.tl-year{font-family:var(--serif);font-weight:600;font-size:3rem;color:var(--subj);line-height:1}
.tl-title{font-family:var(--serif);font-size:1.4rem;color:var(--ink);margin:8px 0 10px}
.tl-desc{color:var(--text);min-height:3.2em;margin-bottom:26px}
.tl-box input[type=range]{width:100%;accent-color:var(--subj);cursor:pointer}
.tl-marks{display:flex;justify-content:space-between;font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--muted);margin-top:10px}

/* Languages — big glyph hero + glyph explorer + matras */
.glyph-hero{display:grid;place-items:center;gap:10px;text-align:center}
.glyph-hero__big{font-size:clamp(7rem,20vw,12rem);line-height:1;color:var(--subj);font-weight:700}
.glyph-hero__sub{font-size:14px;color:var(--muted)}
.glyph-box{padding:44px 40px;width:100%;max-width:660px;margin-inline:auto}
.glyph-display{display:flex;align-items:center;gap:24px;justify-content:center;margin-bottom:30px}
.glyph-big{font-size:4rem;line-height:1;color:var(--subj);font-weight:700;background:var(--subj-tint);border-radius:20px;width:120px;height:120px;display:grid;place-items:center;flex:none}
.glyph-latin{font-family:'JetBrains Mono',monospace;font-size:1.3rem;color:var(--subj-d);font-weight:600}
.glyph-word{font-size:1.3rem;color:var(--ink);margin-top:4px}
.glyph-grid{display:grid;grid-template-columns:repeat(10,1fr);gap:8px}
.glyph{border:1px solid var(--line);background:#fff;border-radius:12px;font-size:1.6rem;padding:12px 0;cursor:pointer;color:var(--ink);transition:.2s}
.glyph:hover{border-color:var(--subj);transform:translateY(-2px)}
.glyph.on{background:var(--subj);color:#fff;border-color:var(--subj)}
.matra-viz{padding:36px;display:flex;flex-direction:column;gap:22px;justify-content:center;align-items:center}
.matra-row{display:flex;align-items:center;gap:14px}
.matra-row .big{font-size:2.4rem;width:60px;height:60px;display:grid;place-items:center;background:var(--paper);border:1px solid var(--line);border-radius:12px;color:var(--ink)}
.matra-row .matra{color:var(--subj)}
.matra-row .out{color:#fff;background:var(--subj);border-color:var(--subj)}
.matra-row .plus{font-size:1.4rem;color:var(--muted);font-weight:600}
@media(max-width:640px){.glyph-grid{grid-template-columns:repeat(5,1fr)}}

/* ============================================================
   DARK THEME — subject accents (lighter tints, dark panels)
   --subj = bright accent · --subj-d = light accent (for text on dark)
   --subj-tint = dark tinted surface
   ============================================================ */
:root[data-theme="dark"] .subj-maths{--subj:#7b86e6;--subj-d:#9aa3ee;--subj-tint:#191b28}
:root[data-theme="dark"] .subj-science{--subj:#1abfae;--subj-d:#43d4c4;--subj-tint:#10201d}
:root[data-theme="dark"] .subj-chemistry{--subj:#9f80dd;--subj-d:#b89ee9;--subj-tint:#1c1730}
:root[data-theme="dark"] .subj-biology{--subj:#54ba75;--subj-d:#78d195;--subj-tint:#132318}
:root[data-theme="dark"] .subj-english{--subj:#c56aad;--subj-d:#d98ec8;--subj-tint:#241422}
:root[data-theme="dark"] .subj-social{--subj:#dc9a4e;--subj-d:#e8b876;--subj-tint:#241a0f}
:root[data-theme="dark"] .subj-hindi{--subj:#e0603f;--subj-d:#ef8468;--subj-tint:#24120a}
:root[data-theme="dark"] .subj-telugu{--subj:#d05a9c;--subj-d:#e08ac0;--subj-tint:#230f1b}
:root[data-theme="dark"] .glyph{background:var(--white)}
:root[data-theme="dark"] .ambient-grid::before{background-image:radial-gradient(rgba(255,255,255,.05) 1.4px,transparent 1.5px)}
:root[data-theme="dark"] .pos-n{background:#20304f;color:#a9c4f5}
:root[data-theme="dark"] .pos-v{background:#4a2626;color:#f0a9a9}
:root[data-theme="dark"] .pos-a{background:#20342a;color:#9fd6b6}
:root[data-theme="dark"] .pos-adv{background:#3a2440;color:#dda9e6}

/* extra small-screen safety for subject pages */
@media(max-width:560px){
  .sub-hero{padding:110px 0 60px}
  .sub-hero__title{font-size:clamp(2.4rem,11vw,3.4rem)}
  .eq{max-width:100%;overflow-x:auto;font-size:clamp(1.1rem,5.5vw,1.5rem)}
  .eq--txt{font-size:clamp(1rem,4.6vw,1.4rem)}
  .worked__head{flex-wrap:wrap;gap:10px}
  .step-dots{order:3;width:100%;justify-content:center;margin:0}
  .worked__body,.worked__viz,.worked__text{padding:24px 20px}
  .tense-box,.tl-box,.glyph-box{padding:34px 22px}
  .tense-tabs{flex-wrap:wrap;justify-content:center}
  .glyph-grid{grid-template-columns:repeat(5,1fr);gap:6px}
  .glyph{font-size:1.3rem;padding:10px 0}
  .glyph-big{width:96px;height:96px;font-size:3rem}
  .play-controls{padding:30px 22px}
  .matra-row .big{font-size:2rem;width:52px;height:52px}
}

@media(prefers-reduced-motion:reduce){
  .draw{stroke-dashoffset:0!important}
  .wstep{opacity:1!important;transform:none!important}
  .math-float span,.ambient-grid::before,.line-graph .ripple,.circuit .cbulb-glow,#ohmSvg .flow,
  .molecule .bubbles circle,.breathe .o2,.bio-hot,.globe .pin,.monsoon .drop{animation:none!important}
  .line-graph .tracer,.circuit .eflow{display:none}
}