/* Lambda Lab — appearance setting, the two-hub showcase, hub badges and hand-tuned dark-theme fixes. */
/* ---------- ⚙ settings popover */
.lt-wrap{position:relative}
.lt-gear{width:40px;height:40px;border-radius:12px;border:1px solid var(--line)!important;background:var(--surface)!important;display:grid;place-items:center;font-size:19px;color:#475569}
.lt-gear span{display:block;transition:transform .4s}.lt-gear:hover span,.lt-gear[aria-expanded=true] span{transform:rotate(60deg)}
.lt-pop{position:absolute;inset-inline-end:0;top:50px;z-index:60;width:270px;padding:14px;border-radius:16px;background:rgba(255,255,255,.88);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);border:1px solid rgba(148,163,184,.35);box-shadow:0 18px 40px rgba(15,23,42,.18)}
.lt-pop[hidden]{display:none}
.lt-h{margin:0 0 8px;font-size:11px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:#64748b}
.lt-seg{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:4px;border-radius:12px;background:rgba(148,163,184,.16)}
.lt-seg button{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 4px;border-radius:9px;font-size:12.5px;font-weight:650;color:#475569}
.lt-seg button svg{width:18px;height:18px}
.lt-seg button.on{background:#fff;color:#1e3a8a;box-shadow:0 2px 8px rgba(15,23,42,.12)}
.lt-note{margin:10px 2px 0;font-size:11.5px;line-height:1.5;color:#64748b}
/* ---------- the two hubs */
.h-hubs{margin:34px 0 6px}
.h-hubs-head{text-align:center;max-width:720px;margin:0 auto 22px}
.h-hubs-head h2{margin:8px 0;font-size:clamp(26px,3vw,38px);letter-spacing:-.8px;background:linear-gradient(90deg,#0ea5e9,#6366f1 45%,#ec4899);-webkit-background-clip:text;background-clip:text;color:transparent}
.h-hubs-head p{margin:0;color:var(--mut,#6d7c93);line-height:1.6}
.h-hubs-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.h-hub{--g1:#10b981;--g2:#6366f1;--g3:#ec4899;position:relative;isolation:isolate;display:grid;grid-template-rows:auto 1fr;border-radius:26px;padding:2px;text-decoration:none;color:inherit;overflow:hidden;transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
.h-hub.phys{--g1:#22d3ee;--g2:#6366f1;--g3:#f59e0b}
.h-hub::before{content:'';position:absolute;inset:-60%;z-index:-2;background:conic-gradient(from 0deg,var(--g1),var(--g2),var(--g3),var(--g1));animation:h-spin 7s linear infinite}
.h-hub::after{content:'';position:absolute;inset:2px;z-index:-1;border-radius:24px;background:linear-gradient(160deg,rgba(255,255,255,.97),rgba(246,248,255,.94))}
.h-hub:hover{transform:translateY(-6px);box-shadow:0 26px 60px -18px color-mix(in srgb,var(--g2) 55%,transparent)}
@keyframes h-spin{to{transform:rotate(360deg)}}
.h-hub-badge{position:absolute;top:16px;inset-inline-end:16px;z-index:2;padding:6px 12px;border-radius:999px;font-size:11.5px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:#fff;background:linear-gradient(90deg,var(--g1),var(--g2));box-shadow:0 6px 16px -4px color-mix(in srgb,var(--g2) 70%,transparent)}
.h-hub-art{display:grid;place-items:center;height:190px;margin:12px 12px 0;border-radius:18px;background:radial-gradient(120% 90% at 30% 20%,color-mix(in srgb,var(--g1) 18%,transparent),transparent 60%),radial-gradient(90% 90% at 80% 90%,color-mix(in srgb,var(--g2) 16%,transparent),transparent 60%),#0f172a;overflow:hidden}
.h-hub-body{display:grid;gap:10px;align-content:start;padding:20px 24px 24px}
.h-hub-body strong{font-size:24px;letter-spacing:-.4px}
.h-hub-body em{font-style:normal;color:var(--mut,#6d7c93);line-height:1.55}
.h-hub-chips{display:flex;flex-wrap:wrap;gap:6px}
.h-hub-chips i{font-style:normal;font-size:12px;font-weight:650;padding:5px 10px;border-radius:999px;background:color-mix(in srgb,var(--g2) 10%,transparent);color:color-mix(in srgb,var(--g2) 80%,#0f172a);border:1px solid color-mix(in srgb,var(--g2) 22%,transparent)}
.h-hub-go{justify-self:start;margin-top:4px;padding:10px 18px;border-radius:12px;font-weight:750;color:#fff;background:linear-gradient(90deg,var(--g1),var(--g2))}
.h-hub-go b{display:inline-block;transition:transform .3s}.h-hub:hover .h-hub-go b{transform:translateX(5px)}
[dir=rtl] .h-hub-go b{transform:scaleX(-1)}[dir=rtl] .h-hub:hover .h-hub-go b{transform:scaleX(-1) translateX(5px)}
/* periodic-table mosaic */
.h-pt{display:grid;grid-template-columns:repeat(18,13px);grid-template-rows:repeat(7,13px) 7px repeat(2,13px);gap:3px}
.h-pt i{border-radius:3px;animation:h-twinkle 3.2s ease-in-out infinite}
.h-pt .s{background:#f472b6}.h-pt .d{background:#60a5fa}.h-pt .p{background:#34d399}.h-pt .n{background:#a78bfa}.h-pt .f{background:#fbbf24}
@keyframes h-twinkle{0%,100%{opacity:.45;transform:scale(.9)}50%{opacity:1;transform:scale(1)}}
/* physics animation */
.h-phys-art{width:min(100%,360px);height:auto}
.h-orb{animation:none}.h-el{transform-origin:0 0;animation:h-spin 2.6s linear infinite}
.h-wave{stroke-dasharray:14 8;animation:h-flow 1.4s linear infinite}@keyframes h-flow{to{stroke-dashoffset:-44}}
.h-swing{transform-origin:0 0;animation:h-sw 2.2s ease-in-out infinite alternate}@keyframes h-sw{from{transform:rotate(22deg)}to{transform:rotate(-22deg)}}
/* hero buttons and side-menu links for the hubs */
.h-btn.chem,.h-btn.phys{position:relative;overflow:hidden}
.h-btn.chem::after,.h-btn.phys::after{content:'';position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);transform:translateX(-120%);animation:h-shine 3.6s ease-in-out infinite}
@keyframes h-shine{0%,60%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
.hub-link{position:relative;border:1.5px solid transparent!important;background:linear-gradient(var(--hub-bg,#fff),var(--hub-bg,#fff)) padding-box,linear-gradient(120deg,#10b981,#6366f1,#ec4899) border-box!important}
.hub-link.phys{background:linear-gradient(var(--hub-bg,#fff),var(--hub-bg,#fff)) padding-box,linear-gradient(120deg,#22d3ee,#6366f1,#f59e0b) border-box!important}
.hub-link[data-badge]::after{content:attr(data-badge);position:absolute;top:-8px;inset-inline-end:10px;padding:2px 7px;border-radius:999px;font-size:9.5px;font-weight:800;letter-spacing:.6px;color:#fff;background:linear-gradient(90deg,#6366f1,#ec4899)}
.hub-link.phys[data-badge]::after{background:linear-gradient(90deg,#0ea5e9,#6366f1)}
@media(max-width:900px){.h-hubs-grid{grid-template-columns:1fr}.h-hub-art{height:160px}}
@media(max-width:560px){.h-pt{grid-template-columns:repeat(18,10px);grid-template-rows:repeat(7,10px) 5px repeat(2,10px);gap:2px}.h-hub-body{padding:16px 18px 20px}.h-hub-body strong{font-size:21px}}
@media(prefers-reduced-motion:reduce){.h-hub::before,.h-pt i,.h-el,.h-wave,.h-swing,.h-btn.chem::after,.h-btn.phys::after{animation:none}}
/* ---------- the Math Hub: third hub card, hero button and side-menu link */
.h-hub.math{--g1:#14b8a6;--g2:#6366f1;--g3:#ec4899}
.h-hub.math::before{inset:auto;left:50%;top:50%;width:1400px;height:1400px;margin:-700px 0 0 -700px}
@media(min-width:1181px){.h-hubs-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:901px) and (max-width:1180px){.h-hub.math{grid-column:1/-1;grid-template-rows:none;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.h-hub.math .h-hub-art{height:auto;min-height:190px;margin:12px}}
.h-math-art{width:min(100%,360px);height:auto}
.h-mcurve{stroke-dasharray:330;stroke-dashoffset:330;animation:h-draw 3.2s ease-in-out infinite alternate}@keyframes h-draw{to{stroke-dashoffset:0}}
.h-mrad{animation:h-spin 6s linear infinite}
.h-btn.math{position:relative;overflow:hidden;background:linear-gradient(135deg,#0d9488,#6366f1);color:#fff;border-color:transparent}
.h-btn.math::after{content:'';position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);transform:translateX(-120%);animation:h-shine 3.6s ease-in-out infinite}
.hub-link.math{margin-top:-4px;background:linear-gradient(var(--hub-bg,#fff),var(--hub-bg,#fff)) padding-box,linear-gradient(120deg,#14b8a6,#6366f1,#ec4899) border-box!important}
.hub-link.math[data-badge]::after{background:linear-gradient(90deg,#14b8a6,#6366f1)}
html[data-theme="dark"] .h-btn.math{background:linear-gradient(135deg,#0d9488,#6366f1);color:#fff}
@media(prefers-reduced-motion:reduce){.h-mcurve{animation:none;stroke-dashoffset:0}.h-mrad,.h-btn.math::after{animation:none}}
/* ---------- dark theme: hand-tuned parts (the rest is in dark.css) */
html[data-theme="dark"]{color-scheme:dark}
html[data-theme="dark"] body{background:#0f1626}
html[data-theme="dark"] .lt-gear{color:#cbd5e1}
html[data-theme="dark"] .lt-pop{background:rgba(20,28,48,.9);border-color:rgba(148,163,184,.22);box-shadow:0 18px 40px rgba(0,0,0,.5)}
html[data-theme="dark"] .lt-seg button{color:#cbd5e1}html[data-theme="dark"] .lt-seg button.on{background:#334155;color:#fff}
html[data-theme="dark"] .lt-note,html[data-theme="dark"] .lt-h{color:#94a3b8}
html[data-theme="dark"] .h-hub::after{background:linear-gradient(160deg,rgba(22,30,50,.97),rgba(15,22,38,.96))}
html[data-theme="dark"] .h-hub-chips i{color:color-mix(in srgb,var(--g2) 45%,#fff)}
html[data-theme="dark"] .hub-link{--hub-bg:#172036;color:#e2e8f0}
html[data-theme="dark"] .hub-link small{color:#94a3b8}
html[data-theme="dark"] .home{--ink:#e2e8f0;--mut:#9aa7bb}
html[data-theme="dark"] .h-hero h1,html[data-theme="dark"] .lesson-header h1{color:#f1f5f9}
/* the experiment stages keep their own light colours, framed so they sit well on the dark page */
html[data-theme="dark"] #viewport{border-radius:14px;box-shadow:0 0 0 1px rgba(148,163,184,.25),0 12px 30px rgba(0,0,0,.35)}
html[data-theme="dark"] .model-panel svg:not([class*="icon"]){color-scheme:light}
html[data-theme="dark"] .h-hero h1 span{-webkit-background-clip:text;background-clip:text}
html[data-theme="dark"] .section-number{color:#8ea8ff}
/* boxes that lessons draw with a light inline background keep dark text in dark mode */
html[data-theme="dark"] :is([style*="background:#f"],[style*="background: #f"],[style*="background:#e"],[style*="background:white"],[style*="background:#fff"],[style*="background-color:#f"]),html[data-theme="dark"] :is([style*="background:#f"],[style*="background: #f"],[style*="background:#e"],[style*="background:white"],[style*="background:#fff"],[style*="background-color:#f"]) :is(strong,b,span,p,li,td,th,div,h3,h4){color:#1f2937}
html[data-theme="dark"] :is([style*="background:#f"],[style*="background: #f"],[style*="background:#e"],[style*="background:white"],[style*="background:#fff"],[style*="background-color:#f"]) :is(small,em){color:#475569}