:root {
  --bg: #07111f;
  --bg-2: #0a1627;
  --panel: rgba(13, 29, 48, .76);
  --panel-solid: #0d1d30;
  --line: rgba(160, 205, 230, .14);
  --line-strong: rgba(160, 205, 230, .24);
  --text: #f3f8fb;
  --muted: #9eb1bf;
  --muted-2: #718493;
  --cyan: #50e3c2;
  --cyan-2: #1fc7aa;
  --green: #5bd9a7;
  --blue: #59a9ff;
  --violet: #9c8cff;
  --yellow: #ffd36b;
  --danger: #ff8b6b;
  --radius: 22px;
  --radius-sm: 15px;
  --shadow: 0 24px 80px rgba(0, 0, 0, .28);
  --shell: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at 75% -10%, rgba(51, 181, 160, .16), transparent 32%),
    radial-gradient(circle at 10% 28%, rgba(68, 118, 195, .11), transparent 28%),
    linear-gradient(180deg, #06101c 0%, var(--bg) 46%, #07101b 100%);
  line-height: 1.55;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button { color: inherit; }
.shell { width: min(var(--shell), calc(100% - 40px)); margin: 0 auto; position: relative; }
.skip-link { position: fixed; left: 12px; top: -60px; z-index: 1000; background: white; color: #111; padding: 10px 14px; border-radius: 8px; }
.skip-link:focus { top: 12px; }

.grid-bg {
  position: fixed; inset: 0; pointer-events: none; z-index: -3; opacity: .17;
  background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(to bottom, black 0, transparent 78%);
}
.ambient { position: fixed; width: 520px; height: 520px; border-radius: 50%; filter: blur(110px); z-index: -2; pointer-events: none; opacity: .12; }
.ambient-a { right: -180px; top: 160px; background: #46ffd0; }
.ambient-b { left: -200px; top: 850px; background: #547cff; }

.site-header { border-bottom: 1px solid rgba(255,255,255,.07); background: rgba(5, 15, 26, .74); backdrop-filter: blur(16px); position: relative; z-index: 40; }
.header-inner { min-height: 70px; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.brand { display: inline-flex; align-items: center; min-height: 40px; }
.brand img { display:block; width:188px; max-width:100%; height:45px; object-fit:contain; }
.brand-fallback { font-weight: 800; letter-spacing: -.02em; font-size: 18px; color: #fff; }
.header-nav { display: flex; gap: 24px; color: #a9bac7; font-size: 14px; font-weight: 700; }
.header-nav a:hover, .header-nav a:focus-visible { color: var(--cyan); }

.breadcrumbs { display: flex; flex-wrap: wrap; gap: 9px; padding: 25px 0 0; font-size: 13px; color: var(--muted-2); }
.breadcrumbs a:hover { color: var(--cyan); }

.hero { display: grid; grid-template-columns: 1.08fr .92fr; align-items: center; min-height: 600px; gap: 58px; padding: 56px 0 72px; }
.eyebrow { display: inline-flex; align-items: center; gap: 9px; color: #b9c9d4; text-transform: uppercase; letter-spacing: .13em; font-size: 12px; font-weight: 800; margin-bottom: 20px; }
.eyebrow-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 18px var(--cyan); }
.hero h1 { margin: 0; max-width: 760px; font-size: clamp(44px, 6vw, 78px); line-height: .99; letter-spacing: -.052em; font-weight: 870; }
.hero h1 span { color: var(--cyan); text-shadow: 0 0 34px rgba(80, 227, 194, .18); }
.hero-lead { max-width: 690px; margin: 25px 0 0; color: #aebeca; font-size: clamp(17px, 2vw, 20px); line-height: 1.68; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 33px; }
.button { min-height: 50px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: 13px; padding: 0 20px; font-weight: 800; cursor: pointer; transition: .22s ease; }
.button-primary { background: var(--cyan); color: #06241f; box-shadow: 0 12px 30px rgba(80, 227, 194, .16); }
.button-primary:hover { transform: translateY(-2px); background: #65efd1; }
.button-ghost { border-color: var(--line-strong); background: rgba(255,255,255,.025); color: #d7e3e9; }
.button-ghost:hover { border-color: rgba(80,227,194,.45); color: var(--cyan); transform: translateY(-2px); }
.hero-facts { display: flex; flex-wrap: wrap; margin-top: 40px; gap: 0; }
.hero-facts > div { min-width: 122px; padding: 0 22px; border-left: 1px solid var(--line); }
.hero-facts > div:first-child { padding-left: 0; border-left: 0; }
.hero-facts strong { display: block; font-size: 21px; color: #e8f5f4; }
.hero-facts span { display: block; color: var(--muted-2); font-size: 12px; margin-top: 2px; }

.hero-lab { position: relative; min-height: 455px; border-radius: 34px; border: 1px solid rgba(127, 220, 207, .16); background: linear-gradient(145deg, rgba(15, 37, 57, .76), rgba(5, 16, 27, .82)); box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.04); overflow: hidden; isolation: isolate; }
.hero-lab::before { content:""; position:absolute; inset:0; background: radial-gradient(circle at 54% 64%, rgba(79, 226, 194, .15), transparent 28%), linear-gradient(transparent 75%, rgba(255,255,255,.03)); z-index:-1; }
.hero-lab::after { content:""; position:absolute; left:9%; right:9%; bottom:71px; height:1px; background:linear-gradient(90deg, transparent, rgba(105, 229, 207, .4), transparent); }
.flask { position:absolute; left:50%; top:51%; width:174px; height:246px; transform:translate(-50%,-50%); filter: drop-shadow(0 18px 25px rgba(0,0,0,.35)); }
.flask-neck { position:absolute; left:64px; top:0; width:48px; height:92px; border:3px solid rgba(209, 245, 241, .55); border-bottom:0; border-radius:10px 10px 0 0; background:rgba(255,255,255,.025); }
.flask-body { position:absolute; left:13px; bottom:0; width:148px; height:166px; overflow:hidden; border:3px solid rgba(209,245,241,.55); border-radius: 50% 50% 44% 44% / 56% 56% 36% 36%; background:rgba(255,255,255,.025); }
.flask-liquid { position:absolute; left:-10%; right:-10%; bottom:-4px; height:61%; background:linear-gradient(180deg, rgba(70,225,194,.42), rgba(26,165,147,.68)); border-top:2px solid rgba(121,255,232,.75); transform: rotate(-2deg); animation: liquid 5s ease-in-out infinite alternate; }
.glass { position:absolute; left:15%; bottom:76px; width:92px; height:132px; border:3px solid rgba(203,234,244,.36); border-top-width:2px; border-radius:0 0 22px 22px; transform:rotate(-5deg); overflow:hidden; opacity:.75; }
.glass .liquid { position:absolute; inset:auto 0 0; height:46%; background:rgba(90, 164, 255, .35); border-top:1px solid rgba(130,190,255,.7); }
.bubble { position:absolute; display:block; border-radius:50%; border:1px solid rgba(205,255,246,.72); animation:bubble 3.4s infinite ease-in; }
.b1{width:8px;height:8px;left:25px;bottom:18px}.b2{width:12px;height:12px;left:52px;bottom:12px;animation-delay:.9s}.b3{width:6px;height:6px;left:65px;bottom:26px;animation-delay:1.7s}
.fb1{width:10px;height:10px;left:45px;bottom:15px}.fb2{width:7px;height:7px;left:86px;bottom:30px;animation-delay:.6s}.fb3{width:14px;height:14px;left:68px;bottom:12px;animation-delay:1.3s}.fb4{width:6px;height:6px;left:32px;bottom:45px;animation-delay:2s}
.formula-card { position:absolute; border:1px solid var(--line-strong); background:rgba(8,22,35,.82); backdrop-filter:blur(10px); color:#dcebed; padding:9px 13px; border-radius:11px; font-weight:800; font-size:16px; box-shadow:0 12px 28px rgba(0,0,0,.18); animation:float 5s ease-in-out infinite; }
.formula-1{right:13%;top:18%}.formula-2{right:9%;bottom:31%;animation-delay:.8s}.formula-3{left:12%;top:24%;animation-delay:1.7s}
.lab-caption { position:absolute; left:50%; bottom:24px; transform:translateX(-50%); color:#8298a7; white-space:nowrap; font-size:12px; text-transform:uppercase; letter-spacing:.12em; font-weight:800; }
.lab-caption span { display:inline-block; width:7px; height:7px; border-radius:50%; margin-right:8px; background:var(--cyan); box-shadow:0 0 12px var(--cyan); }
.molecule { position:absolute; opacity:.55; }
.molecule i { position:absolute; width:13px; height:13px; border-radius:50%; background:rgba(90,185,255,.85); box-shadow:0 0 16px rgba(90,185,255,.38); }
.molecule i::after { content:""; position:absolute; width:44px; height:1px; background:rgba(160,209,238,.35); transform-origin:left center; }
.molecule-a{right:16%;top:36%;width:70px;height:70px}.molecule-a i:nth-child(1){left:0;top:35px}.molecule-a i:nth-child(1)::after{transform:rotate(-28deg)}.molecule-a i:nth-child(2){left:42px;top:13px}.molecule-a i:nth-child(2)::after{transform:rotate(60deg);width:36px}.molecule-a i:nth-child(3){left:58px;top:48px}
.molecule-b{left:15%;top:47%;width:85px;height:74px}.molecule-b i:nth-child(1){left:0;top:23px}.molecule-b i:nth-child(1)::after{transform:rotate(22deg)}.molecule-b i:nth-child(2){left:42px;top:40px}.molecule-b i:nth-child(2)::after{transform:rotate(-45deg);width:32px}.molecule-b i:nth-child(3){left:68px;top:15px}.molecule-b i:nth-child(3)::after{transform:rotate(72deg);width:38px}.molecule-b i:nth-child(4){left:76px;top:54px}

.intro-panel { display:grid; grid-template-columns:auto 1fr; gap:20px; align-items:start; margin: 0 0 88px; padding:25px 28px; border:1px solid rgba(80,227,194,.2); border-radius:18px; background:linear-gradient(110deg, rgba(80,227,194,.07), rgba(89,169,255,.035)); }
.intro-icon { width:52px;height:52px;border-radius:15px;display:grid;place-items:center;background:rgba(80,227,194,.11);color:var(--cyan);font-size:26px;border:1px solid rgba(80,227,194,.18); }
.intro-panel h2 { margin:0 0 7px;font-size:19px;letter-spacing:-.02em; }
.intro-panel p { margin:0;color:var(--muted);font-size:14px;max-width:930px; }

.course-section, .tools-section { scroll-margin-top:100px; }
.section-heading { display:flex; justify-content:space-between; align-items:end; gap:30px; margin-bottom:32px; }
.kicker { display:block; color:var(--cyan); text-transform:uppercase; letter-spacing:.13em; font-size:11px; font-weight:900; margin-bottom:8px; }
.section-heading h2 { margin:0;font-size:clamp(31px,4vw,44px);line-height:1.05;letter-spacing:-.035em; }
.course-filter { display:flex; flex-wrap:wrap; gap:8px; }
.filter { border:1px solid var(--line); background:rgba(255,255,255,.02); color:var(--muted); border-radius:999px; padding:8px 13px; cursor:pointer; font-size:12px; font-weight:800; transition:.2s ease; }
.filter:hover, .filter.is-active { color:#08231f; background:var(--cyan); border-color:var(--cyan); }

.module-block { margin-top:52px; transition:.25s ease; }
.module-block.is-hidden { display:none; }
.module-heading { display:grid; grid-template-columns:58px 1fr; gap:18px; align-items:center; margin-bottom:19px; }
.module-number { width:58px;height:58px;border:1px solid var(--line-strong);border-radius:16px;display:grid;place-items:center;color:var(--cyan);background:rgba(255,255,255,.025);font-weight:900; }
.module-heading h3 { margin:0;font-size:22px;letter-spacing:-.025em; }
.module-heading p { margin:3px 0 0;color:var(--muted-2);font-size:13px; }
.lesson-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:16px; }
.lesson-card { min-height:318px; display:flex;flex-direction:column; position:relative; overflow:hidden; padding:21px; border:1px solid var(--line); border-radius:var(--radius); background:linear-gradient(155deg, rgba(16,34,53,.82), rgba(8,20,33,.92)); box-shadow:0 12px 36px rgba(0,0,0,.12); transition:transform .22s ease,border-color .22s ease,background .22s ease; }
.lesson-card::before { content:"";position:absolute;inset:0;background:radial-gradient(circle at 80% 10%,rgba(80,227,194,.08),transparent 32%);opacity:0;transition:.22s;pointer-events:none; }
.lesson-card:hover { transform:translateY(-4px);border-color:rgba(80,227,194,.3);background:linear-gradient(155deg,rgba(17,39,58,.95),rgba(8,22,35,.98)); }
.lesson-card:hover::before { opacity:1; }
.lesson-card.featured { border-color:rgba(80,227,194,.2); }
.lesson-top { display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:21px; }
.lesson-index { color:#6c8291;font-size:12px;font-weight:900;letter-spacing:.1em; }
.lesson-status { color:#718797;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.07);border-radius:999px;padding:4px 8px;font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:.08em; }
.lesson-status.hot { color:var(--yellow);background:rgba(255,211,107,.08);border-color:rgba(255,211,107,.16); }
.lesson-status.ready { color:var(--green);background:rgba(91,217,167,.08);border-color:rgba(91,217,167,.22); }
.lesson-card-ready { border-color:rgba(91,217,167,.28); }
.lesson-card-ready:hover { border-color:rgba(91,217,167,.48); }
.lesson-card h4 { margin:17px 0 8px;font-size:19px;line-height:1.2;letter-spacing:-.02em; }
.lesson-card p { margin:0 0 20px;color:var(--muted);font-size:13px;line-height:1.55; }
.lesson-action { margin-top:auto; text-decoration:none; padding:0; border:0; background:none; color:#a8bac5; display:flex;align-items:center;justify-content:space-between;cursor:pointer;font-size:12px;font-weight:800;text-align:left; }
.lesson-action span { color:var(--cyan);font-size:18px;transition:transform .2s; }
.lesson-action:hover { color:var(--cyan); }
.lesson-action:hover span { transform:translateX(4px); }
.lesson-card.is-filtered { display:none; }

.lesson-icon { min-height:58px; display:flex;align-items:center;gap:7px;color:#dbefec; }
.lesson-icon.compounds b { width:42px;height:42px;border-radius:12px;border:1px solid rgba(80,227,194,.22);display:grid;place-items:center;background:rgba(80,227,194,.07);font-size:13px; }
.lesson-icon.compounds b:nth-child(2){transform:translateY(-8px);border-color:rgba(89,169,255,.24);background:rgba(89,169,255,.07)}
.lesson-icon.reaction {font-weight:800}.lesson-icon.reaction b{padding:8px 9px;border:1px solid var(--line-strong);border-radius:9px;background:rgba(255,255,255,.035)}.lesson-icon.reaction i{font-style:normal;color:var(--cyan)}
.lesson-icon.speed {position:relative;width:120px}.lesson-icon.speed span{width:12px;height:12px;border-radius:50%;position:absolute;background:#54dfc3;box-shadow:0 0 11px rgba(80,227,194,.32)}.lesson-icon.speed span:nth-child(1){left:3px;top:30px}.lesson-icon.speed span:nth-child(2){left:34px;top:7px}.lesson-icon.speed span:nth-child(3){left:61px;top:39px}.lesson-icon.speed span:nth-child(4){left:90px;top:16px}.lesson-icon.speed span:nth-child(5){left:114px;top:42px}
.lesson-icon.redox span{padding:8px 10px;border-radius:9px;background:rgba(156,140,255,.09);border:1px solid rgba(156,140,255,.22);font-weight:800}.lesson-icon.redox i{font-style:normal;color:var(--violet);font-size:20px}
.lesson-icon.ions span{padding:9px 11px;border-radius:10px;font-weight:900}.lesson-icon.ions span:first-child{background:rgba(89,169,255,.1);border:1px solid rgba(89,169,255,.28);color:#9dcbff}.lesson-icon.ions span:last-child{background:rgba(80,227,194,.09);border:1px solid rgba(80,227,194,.25);color:#8af2dc}
.lesson-icon.precipitate {width:76px;height:56px;border:2px solid rgba(190,224,238,.3);border-top:0;border-radius:0 0 16px 16px;position:relative;overflow:hidden}.lesson-icon.precipitate span{position:absolute;left:0;right:0;bottom:0;height:23px;background:linear-gradient(180deg,rgba(255,211,107,.16),rgba(255,211,107,.38));border-top:1px solid rgba(255,211,107,.48)}
.element-symbol { width:60px;height:60px;display:grid;place-items:center;position:relative;border:1px solid rgba(80,227,194,.25);background:rgba(80,227,194,.075);border-radius:15px;color:#cffcf3;font-size:27px;font-weight:850; }
.element-symbol small { position:absolute;right:7px;top:5px;color:#69a89c;font-size:9px; }
.lesson-icon.activity { align-items:center; gap:8px; }
.lesson-icon.activity span { width:35px;height:35px;border-radius:10px;border:1px solid var(--line-strong);display:grid;place-items:center;font-size:11px;font-weight:900;background:rgba(255,255,255,.025);transform:none; }
.lesson-icon.corrosion span { width:56px;height:56px;display:grid;place-items:center;border-radius:50%;border:2px solid rgba(255,139,107,.33);background:radial-gradient(circle at 35% 30%,rgba(255,174,98,.15),rgba(112,56,29,.2));font-weight:900;color:#d9a078 }.lesson-icon.corrosion i{width:12px;height:12px;border-radius:50%;background:#a45f39;box-shadow:-12px 10px 0 #775039,14px 8px 0 #8f5a36}
.lesson-icon.water span { padding:8px 10px;border:1px solid rgba(89,169,255,.27);background:rgba(89,169,255,.08);color:#9acbff;border-radius:10px;font-weight:850 }
.lesson-icon.environment span { padding:8px 9px;border:1px solid var(--line);border-radius:10px;background:rgba(255,255,255,.025);font-weight:800;font-size:12px }.lesson-icon.environment span:nth-child(2){color:var(--yellow)}.lesson-icon.environment span:nth-child(3){color:#9dcaff}

.tools-section { margin-top:105px; padding-top:2px; }
.tools-heading > p { max-width:390px;color:var(--muted);font-size:14px;margin:0; }
.tools-grid { display:grid;grid-template-columns:repeat(2,1fr);gap:14px; }
.tool-card { text-align:left;min-height:96px;border:1px solid var(--line);border-radius:18px;background:rgba(11,27,43,.75);padding:16px 18px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:15px;cursor:pointer;transition:.2s ease; }
.tool-card:hover { transform:translateY(-3px);border-color:rgba(80,227,194,.32);background:rgba(14,34,51,.95); }
.tool-symbol { width:55px;height:55px;display:grid;place-items:center;border-radius:14px;font-weight:900;background:rgba(80,227,194,.08);border:1px solid rgba(80,227,194,.2);color:#c9fff5; }
.tool-symbol.solubility{background:rgba(89,169,255,.08);border-color:rgba(89,169,255,.2);color:#b6daff}.tool-symbol.metal{background:rgba(156,140,255,.08);border-color:rgba(156,140,255,.2);color:#c6bcff}.tool-symbol.calc{background:rgba(255,211,107,.08);border-color:rgba(255,211,107,.2);color:#ffe6a4}
.tool-card strong { display:block;font-size:15px;margin-bottom:3px; }.tool-card small { display:block;color:var(--muted-2);font-size:12px; }.tool-card b{color:var(--cyan);font-size:19px;font-weight:500}

.oge-banner { margin:100px 0 86px;padding:30px;border:1px solid rgba(156,140,255,.21);border-radius:24px;background:linear-gradient(120deg,rgba(156,140,255,.08),rgba(80,227,194,.035));display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:25px; }
.oge-visual { width:90px;height:90px;border-radius:22px;background:rgba(156,140,255,.1);border:1px solid rgba(156,140,255,.24);display:grid;place-items:center;position:relative;overflow:hidden; }.oge-visual span{font-weight:950;font-size:24px;color:#cfc8ff}.oge-visual i{position:absolute;right:8px;bottom:1px;font-style:normal;font-size:46px;font-weight:950;color:rgba(255,255,255,.04)}
.oge-copy h2{margin:0 0 7px;font-size:24px;letter-spacing:-.02em}.oge-copy p{margin:0;color:var(--muted);font-size:13px;max-width:720px}.oge-button{min-width:105px}

.lab-footer { border-top:1px solid var(--line);background:rgba(4,13,22,.55); }
.footer-inner { min-height:105px;display:flex;align-items:center;justify-content:space-between;gap:20px; }.footer-inner strong{display:block;font-size:14px}.footer-inner span{display:block;color:var(--muted-2);font-size:12px;margin-top:3px}.footer-inner a{color:var(--muted);font-size:13px;font-weight:800}.footer-inner a:hover{color:var(--cyan)}

.toast { position:fixed;right:22px;bottom:22px;z-index:90;width:min(380px,calc(100% - 44px));display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:15px;border:1px solid rgba(80,227,194,.25);border-radius:16px;background:rgba(7,20,32,.95);backdrop-filter:blur(18px);box-shadow:0 20px 55px rgba(0,0,0,.4);transform:translateY(25px);opacity:0;pointer-events:none;transition:.23s ease; }
.toast.is-visible{transform:translateY(0);opacity:1;pointer-events:auto}.toast-icon{width:42px;height:42px;border-radius:12px;background:rgba(80,227,194,.09);border:1px solid rgba(80,227,194,.2);display:grid;place-items:center;color:var(--cyan)}.toast strong{display:block;font-size:13px}.toast span{display:block;color:var(--muted);font-size:11px;margin-top:2px}.toast button{border:0;background:none;color:#8196a4;font-size:22px;cursor:pointer;padding:4px}

@keyframes bubble { 0%{transform:translateY(0) scale(.7);opacity:0} 18%{opacity:.7} 80%{opacity:.55} 100%{transform:translateY(-76px) scale(1.05);opacity:0} }
@keyframes liquid { from{transform:rotate(-2deg) translateY(2px)} to{transform:rotate(2deg) translateY(-2px)} }
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }

@media (max-width: 1000px) {
  .hero { grid-template-columns:1fr;gap:30px;padding-top:44px; }
  .hero-copy { max-width:800px; }
  .hero-lab { min-height:390px; }
  .lesson-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 720px) {
  .shell { width:min(var(--shell),calc(100% - 26px)); }
  .site-header { position:relative; }
  .header-inner { min-height:62px; }.header-nav{gap:14px;font-size:12px}.header-nav a:first-child{display:none}.brand img{width:160px;height:auto;max-width:100%}
  .breadcrumbs { padding-top:18px;font-size:11px; }
  .hero { min-height:0;padding:38px 0 47px; }
  .hero h1 { font-size:clamp(40px,13vw,58px); }.hero-lead{font-size:16px;margin-top:19px}.hero-actions{margin-top:26px}.button{min-height:47px;padding:0 16px}.hero-facts{margin-top:31px}.hero-facts>div{padding:0 13px;min-width:auto}.hero-facts strong{font-size:18px}.hero-facts span{font-size:10px}
  .hero-lab { min-height:330px;border-radius:24px }.flask{transform:translate(-50%,-50%) scale(.82)}.glass{left:10%;transform:scale(.78) rotate(-5deg)}.formula-card{font-size:13px}.formula-1{right:8%}.formula-2{right:7%}.formula-3{left:7%}
  .intro-panel { grid-template-columns:1fr;margin-bottom:65px;padding:21px; }.intro-icon{width:45px;height:45px}
  .section-heading { align-items:flex-start;flex-direction:column;gap:19px }.section-heading h2{font-size:33px}.course-filter{overflow-x:auto;width:100%;flex-wrap:nowrap;padding-bottom:3px}.filter{white-space:nowrap}
  .module-block{margin-top:42px}.module-heading{grid-template-columns:48px 1fr;gap:13px}.module-number{width:48px;height:48px;border-radius:13px;font-size:13px}.module-heading h3{font-size:18px}.module-heading p{display:none}
  .lesson-grid { grid-template-columns:1fr;gap:12px; }.lesson-card{min-height:286px;padding:19px}.lesson-card h4{font-size:18px}.lesson-card p{font-size:12.5px}
  .tools-section{margin-top:78px}.tools-heading>p{margin-top:-7px}.tools-grid{grid-template-columns:1fr}.tool-card{min-height:88px;padding:14px}.tool-symbol{width:49px;height:49px}
  .oge-banner{margin:75px 0 60px;grid-template-columns:auto 1fr;padding:22px;gap:17px}.oge-visual{width:65px;height:65px;border-radius:17px}.oge-copy h2{font-size:20px}.oge-button{grid-column:1/-1;width:100%}
  .footer-inner{min-height:120px;align-items:flex-start;justify-content:center;flex-direction:column;padding:22px 0}
}
@media (max-width: 430px) {
  .hero-facts > div { flex:1;padding:0 8px }.hero-actions .button{width:100%}.hero-lab{min-height:300px}.formula-3{display:none}.molecule{display:none}.lesson-status{font-size:8px}.tools-heading>p{font-size:13px}.toast{right:13px;bottom:13px;width:calc(100% - 26px)}
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}