:root{--color-background:#fff;--color-surface:#fff;--color-surface-hover:#f9fafb;--color-text-primary:#111827;--color-text-secondary:#374151;--color-text-muted:#6b7280;--color-text-outlined:#9ca3af;--color-text-inverse:#fff;--color-border:#e5e7eb;--color-border-light:#f3f4f6;--color-outline:#d1d5db;--color-accent:#f3f4f6;--color-accent-light:#f9fafb;--webtolearn-primary:#6635ef;--webtolearn-gradient:linear-gradient(180deg,#6635ef,rgba(102,53,239,0) 25%);--webtolearn-hero-gradient-start:#6635ef;--webtolearn-hero-gradient-end:rgba(102,53,239,0);--webtolearn-hero-radial-1:rgba(139,92,246,.3);--webtolearn-hero-radial-2:rgba(102,53,239,.3);--webtolearn-hero-object-bg:hsla(0,0%,100%,.2);--webtolearn-pulse-color:rgba(102,53,239,.7);--webtolearn-pulse-transparent:rgba(102,53,239,0);--webtolearn-shadow-soft-light:rgba(0,0,0,.05);--webtolearn-shadow-soft-very-light:rgba(0,0,0,.03)}.dark{--color-background:#111827;--color-surface:#1f2937;--color-surface-hover:#374151;--color-text-primary:#f9fafb;--color-text-secondary:#e5e7eb;--color-text-muted:#9ca3af;--color-text-outlined:#6b7280;--color-text-inverse:#fff;--color-border:#374151;--color-border-light:#4b5563;--color-outline:#6b7280;--color-accent:#111827;--color-accent-light:#0f172a;--webtolearn-shadow-soft-light:rgba(0,0,0,.3);--webtolearn-shadow-soft-very-light:rgba(0,0,0,.2)}.hero-background-webtolearn{background:linear-gradient(180deg,var(--webtolearn-hero-gradient-start) 0,var(--webtolearn-hero-gradient-end) 100%);position:relative}.hero-background-webtolearn:before{background:radial-gradient(circle at 20% 50%,var(--webtolearn-hero-radial-1) 0,transparent 50%),radial-gradient(circle at 80% 80%,var(--webtolearn-hero-radial-2) 0,transparent 50%);bottom:0;content:"";left:0;pointer-events:none;position:absolute;right:0;top:0}.text-webtolearn-primary{color:var(--webtolearn-primary)}.bg-webtolearn-primary{background-color:var(--webtolearn-primary)}.hero-object{animation:float 6s ease-in-out infinite;backdrop-filter:blur(10px);background:var(--webtolearn-hero-object-bg);border-radius:50%;position:absolute}.hero-object:first-child{animation-delay:0s;animation-duration:7s}.hero-object:nth-child(2){animation-delay:1s;animation-duration:8s}.hero-object:nth-child(3){animation-delay:2s;animation-duration:6s}.hero-object:nth-child(4){animation-delay:.5s;animation-duration:9s}.hero-object:nth-child(5){animation-delay:1.5s;animation-duration:7.5s}.hero-object:nth-child(6){animation-delay:2.5s;animation-duration:8.5s}.hero-object:nth-child(7){animation-delay:3s;animation-duration:6.5s}@keyframes float{0%,to{transform:translateY(0) translateX(0)}25%{transform:translateY(-20px) translateX(10px)}50%{transform:translateY(-10px) translateX(-10px)}75%{transform:translateY(-30px) translateX(5px)}}.hero-blob{animation:blob 7s ease-in-out infinite}@keyframes blob{0%,to{transform:translate(0) scale(1)}33%{transform:translate(30px,-50px) scale(1.1)}66%{transform:translate(-20px,20px) scale(.9)}}.cta-pulse{animation:pulse 2s infinite}@keyframes pulse{0%{box-shadow:0 0 0 0 var(--webtolearn-pulse-color)}70%{box-shadow:0 0 0 10px var(--webtolearn-pulse-transparent)}to{box-shadow:0 0 0 0 var(--webtolearn-pulse-transparent)}}.shake-pulse-animation{animation:shake-pulse 3s ease-in-out infinite}@keyframes shake-pulse{0%,to{transform:translateX(0)}10%,30%{transform:translateX(-5px)}20%,40%{transform:translateX(5px)}50%{transform:translateX(0)}}.shadow-soft{box-shadow:0 4px 6px -1px var(--webtolearn-shadow-soft-light),0 2px 4px -1px var(--webtolearn-shadow-soft-very-light)}.step-desc{transition:opacity .5s ease-in-out}.step-desc.opacity-0{opacity:0;pointer-events:none}details summary span.material-icons-outlined{transition:transform .3s ease}details[open] summary span.material-icons-outlined{transform:rotate(180deg)}