:root{--primary:#f93;--primary-hover:#e68a00;--secondary:#00c853;--accent:#ff3d71;--purple:#7c4dff;--blue:#2979ff;--yellow:#ffc107;--bg-main:#fffdf7;--bg-card:#fff;--text-main:#2c3e50;--text-muted:#6c757d;--border-color:#e2e8f0;--shadow-sm:0 4px 12px #0000000d;--shadow-md:0 8px 24px #00000014;--shadow-lg:0 16px 36px #0000001f;--radius-sm:12px;--radius-md:20px;--radius-lg:32px;--radius-full:9999px;--font-gurmukhi:"Noto Sans Gurmukhi", "Baloo 2", sans-serif;--font-heading:"Baloo 2", "Fredoka", "Noto Sans Gurmukhi", sans-serif;--font-body:"Fredoka", "Noto Sans Gurmukhi", sans-serif}body.dark-mode{--bg-main:#121824;--bg-card:#1e2638;--text-main:#f1f5f9;--text-muted:#94a3b8;--border-color:#334155;--shadow-sm:0 4px 12px #0000004d;--shadow-md:0 8px 24px #0006;--shadow-lg:0 16px 36px #00000080}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0}html{scroll-behavior:smooth}body{font-family:var(--font-body);background-color:var(--bg-main);color:var(--text-main);min-height:100vh;line-height:1.6;transition:background-color .3s,color .3s;overflow-x:hidden}.bg-decorations{pointer-events:none;z-index:0;width:100vw;height:100vh;position:fixed;top:0;left:0;overflow:hidden}.cloud{opacity:.25;font-size:3.5rem;animation:25s linear infinite floatCloud;position:absolute}.cloud-1{animation-delay:0s;top:10%;left:-10%}.cloud-2{animation-delay:12s;top:40%;left:-15%}@keyframes floatCloud{0%{transform:translate(-10vw)}to{transform:translate(110vw)}}.sparkle{opacity:.6;font-size:1.8rem;animation:4s ease-in-out infinite alternate pulseSparkle;position:absolute}.sp-1{top:15%;right:8%}.sp-2{top:65%;left:5%}.floating-letter{font-family:var(--font-gurmukhi);color:#ff993314;-webkit-user-select:none;user-select:none;font-size:4rem;font-weight:800;animation:8s ease-in-out infinite alternate floatLetter;position:absolute}.fl-1{top:25%;left:8%}.fl-2{top:75%;right:6%}.main-header{z-index:1000;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-bottom:2px solid var(--border-color);background:#fffdf7f2;transition:background .3s;position:sticky;top:0}body.dark-mode .main-header{background:#121824f2}.header-container{justify-content:space-between;align-items:center;gap:1rem;max-width:1280px;margin:0 auto;padding:.75rem 1.25rem;display:flex}.brand{cursor:pointer;align-items:center;gap:.6rem;display:flex}.brand-logo{object-fit:cover;border:2px solid #f93;border-radius:50%;width:44px;height:44px;box-shadow:0 4px 10px #f936}.brand-title{font-family:var(--font-heading);color:var(--primary);align-items:center;gap:.4rem;font-size:1.35rem;font-weight:800;line-height:1.1;display:flex}.brand-badge{background:var(--accent);color:#fff;border-radius:var(--radius-full);padding:.1rem .4rem;font-size:.7rem}.brand-subtitle{color:var(--text-muted);font-size:.7rem}.nav-menu{align-items:center;gap:.4rem;display:flex}.nav-btn{border-radius:var(--radius-full);font-family:var(--font-heading);color:var(--text-main);cursor:pointer;white-space:nowrap;background:0 0;border:none;align-items:center;gap:.4rem;padding:.55rem .9rem;font-size:.9rem;font-weight:600;transition:all .2s;display:flex}.nav-btn:hover{color:var(--primary);background:#ff993326}.nav-btn.active{background:var(--primary);color:#fff;box-shadow:0 4px 14px #f936}.header-controls{align-items:center;gap:.6rem;display:flex}.reward-pill{border:2px solid var(--yellow);border-radius:var(--radius-full);color:#d84315;background:linear-gradient(135deg,#fff3e0,#ffe0b2);align-items:center;gap:.3rem;padding:.35rem .75rem;font-size:1rem;font-weight:800;display:flex}.icon-btn{background:var(--bg-card);border:2px solid var(--border-color);width:40px;height:40px;color:var(--text-main);cursor:pointer;border-radius:50%;justify-content:center;align-items:center;font-size:1rem;display:flex}.mobile-toggle{color:var(--text-main);cursor:pointer;background:0 0;border:none;padding:.3rem;font-size:1.4rem;display:none}.main-content{z-index:1;max-width:1280px;margin:0 auto;padding:1.5rem 1rem 4rem;position:relative}.hero-banner{border-radius:var(--radius-lg);box-shadow:var(--shadow-md);background:linear-gradient(135deg,#fff5e6 0%,#e3f2fd 100%);border:3px solid #ff99334d;margin-bottom:2rem;padding:2rem}body.dark-mode .hero-banner{background:linear-gradient(135deg,#1e293b 0%,#0f172a 100%)}.hero-content{grid-template-columns:1.2fr .8fr;align-items:center;gap:1.5rem;display:grid}.hero-tag{background:var(--primary);color:#fff;border-radius:var(--radius-full);margin-bottom:.8rem;padding:.25rem .8rem;font-size:.85rem;font-weight:700;display:inline-block}.hero-text h1{font-family:var(--font-heading);margin-bottom:.8rem;font-size:2.2rem;font-weight:800;line-height:1.2}.highlight-text{color:var(--primary)}.hero-text p{color:var(--text-muted);margin-bottom:1.5rem;font-size:1.05rem}.hero-actions{flex-wrap:wrap;gap:.8rem;display:flex}.hero-img{object-fit:cover;border-radius:var(--radius-md);width:100%;max-height:250px;box-shadow:var(--shadow-lg);border:4px solid #fff}.btn{border-radius:var(--radius-full);font-family:var(--font-heading);cursor:pointer;touch-action:manipulation;border:none;align-items:center;gap:.5rem;padding:.75rem 1.4rem;font-size:1rem;font-weight:700;transition:all .25s;display:inline-flex}.btn-primary{background:var(--primary);color:#fff}.btn-secondary{background:var(--secondary);color:#fff}.btn-danger{color:#fff;background:#ff5252}.btn-success{color:#fff;background:#4caf50}.btn-sm{padding:.45rem .85rem;font-size:.85rem}.section-header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1.5rem;display:flex}.section-header.center{text-align:center;flex-direction:column}.section-header h2{font-family:var(--font-heading);align-items:center;gap:.5rem;font-size:1.8rem;font-weight:800;display:flex}.p-icon{color:var(--primary);border-radius:var(--radius-sm);font-family:var(--font-gurmukhi);background:#ff993326;padding:.2rem .5rem;display:inline-block}.filter-group,.category-tabs{flex-wrap:wrap;gap:.5rem;display:flex}.chip{background:var(--bg-card);border:2px solid var(--border-color);border-radius:var(--radius-full);font-family:var(--font-heading);color:var(--text-main);cursor:pointer;padding:.45rem 1rem;font-size:.9rem;font-weight:600}.chip.active{background:var(--primary);color:#fff;border-color:var(--primary)}.alphabet-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:1rem;display:grid}.alphabet-card{background:var(--bg-card);border-radius:var(--radius-md);border:3px solid var(--border-color);box-shadow:var(--shadow-sm);text-align:center;cursor:pointer;padding:1.2rem .8rem}.alphabet-card:hover{border-color:var(--primary);transform:translateY(-4px)}.letter-main{font-family:var(--font-gurmukhi);color:var(--primary);font-size:3.5rem;font-weight:800;line-height:1.1}.letter-english{color:var(--text-muted);margin-bottom:.6rem;font-size:.85rem;font-weight:700}.example-box{border-radius:var(--radius-sm);background:#ff993314;justify-content:center;align-items:center;gap:.4rem;padding:.5rem;display:flex}.tracing-workspace{grid-template-columns:320px 1fr;align-items:start;gap:1.5rem;display:grid}.tracing-sidebar{background:var(--bg-card);border-radius:var(--radius-md);border:3px solid var(--border-color);box-shadow:var(--shadow-sm);padding:1.2rem}.tracing-sidebar h3{font-family:var(--font-heading);color:var(--primary);margin-bottom:.8rem;font-size:1.15rem}.letter-picker-grid{-webkit-overflow-scrolling:touch;grid-template-columns:repeat(5,1fr);gap:.45rem;max-height:440px;padding-right:.3rem;display:grid;overflow-y:auto}.picker-btn{background:var(--bg-main);border:2px solid var(--border-color);border-radius:var(--radius-sm);cursor:pointer;touch-action:manipulation;flex-direction:column;justify-content:center;align-items:center;padding:.4rem .1rem;transition:all .2s;display:flex}.picker-btn:hover{border-color:var(--primary);transform:scale(1.05)}.picker-btn.active{background:var(--primary);color:#fff;border-color:var(--primary);box-shadow:0 4px 10px #f936}.picker-char{font-family:var(--font-gurmukhi);font-size:1.5rem;font-weight:800;line-height:1.1}.picker-name{opacity:.85;font-size:.65rem;font-weight:700}.tracing-card{background:var(--bg-card);border-radius:var(--radius-lg);border:3px solid var(--border-color);box-shadow:var(--shadow-md);width:100%;padding:1.2rem}.canvas-header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.6rem;margin-bottom:.8rem;display:flex}.canvas-wrapper{border-radius:var(--radius-md);border:4px solid var(--primary);background:#fff;width:100%;height:380px;position:relative;overflow:hidden;box-shadow:inset 0 2px 8px #0000000d;touch-action:none!important}#paintCanvas{z-index:2;cursor:crosshair;width:100%;height:100%;position:absolute;top:0;left:0;touch-action:none!important}.guide-overlay{font-family:var(--font-gurmukhi);color:#dce1ebbf;-webkit-user-select:none;user-select:none;pointer-events:none;z-index:1;font-size:16rem;font-weight:800;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.paint-toolbar{background:var(--bg-main);border-radius:var(--radius-md);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.8rem;margin-top:1rem;padding:.75rem 1rem;display:flex}.tool-group{flex-wrap:wrap;align-items:center;gap:.4rem;display:flex}.tool-btn{background:var(--bg-card);border:2px solid var(--border-color);border-radius:var(--radius-sm);font-family:var(--font-heading);cursor:pointer;touch-action:manipulation;padding:.35rem .75rem;font-size:.85rem;font-weight:600}.tool-btn.active{background:var(--primary);color:#fff;border-color:var(--primary)}.storybook-card{background:var(--bg-card);border-radius:var(--radius-lg);border:4px solid var(--primary);box-shadow:var(--shadow-lg);margin-top:1rem;padding:1.8rem}.story-hero-header{border-radius:var(--radius-md);border:2px solid var(--yellow);background:linear-gradient(135deg,#fffdf0 0%,#fff3e0 100%);grid-template-columns:360px 1fr;align-items:center;gap:1.5rem;margin-bottom:1.5rem;padding:1.2rem;display:grid}body.dark-mode .story-hero-header{background:linear-gradient(135deg,#1e2638 0%,#2a364f 100%)}.story-img-lg{object-fit:cover;border-radius:var(--radius-md);width:100%;height:220px;box-shadow:var(--shadow-md);border:4px solid #fff}.story-badge{background:var(--accent);color:#fff;border-radius:var(--radius-full);margin-bottom:.6rem;padding:.3rem .8rem;font-size:.85rem;font-weight:700;display:inline-block}.story-meta h1{font-family:var(--font-heading);color:var(--text-main);margin-bottom:.4rem;font-size:2rem;line-height:1.2}.story-tagline{color:var(--text-muted);margin-bottom:1rem;font-size:1rem}.story-action-buttons{flex-wrap:wrap;gap:.8rem;display:flex}.story-reader-view{background:var(--bg-main);border-radius:var(--radius-md);border:2px solid var(--border-color);padding:1.5rem}.scene-header{border-bottom:2px solid var(--border-color);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.5rem;margin-bottom:1rem;padding-bottom:.8rem;display:flex}.scene-header h3{font-family:var(--font-heading);color:var(--primary);font-size:1.4rem}.scene-visual-gfx{letter-spacing:.4rem;font-size:2.8rem}.scene-text-box{background:var(--bg-card);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);border:2px solid var(--border-color);margin-bottom:1.2rem;padding:1.5rem}.scene-text-p{font-family:var(--font-gurmukhi);color:var(--text-main);font-size:1.4rem;font-weight:600;line-height:1.7}.scene-navigation{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;display:flex}.scene-dots{flex-wrap:wrap;gap:.4rem;display:flex}.scene-dot{background:var(--bg-card);border:2px solid var(--border-color);cursor:pointer;border-radius:50%;justify-content:center;align-items:center;width:32px;height:32px;font-size:.9rem;font-weight:700;display:flex}.scene-dot.active{background:var(--primary);color:#fff;border-color:var(--primary);transform:scale(1.15)}.moral-banner-box{border:2px solid var(--secondary);border-radius:var(--radius-md);text-align:center;font-family:var(--font-gurmukhi);color:#1b5e20;background:linear-gradient(135deg,#e8f5e9 0%,#c8e6c9 100%);margin-top:1.2rem;padding:1.1rem;font-size:1.25rem;font-weight:800}body.dark-mode .moral-banner-box{color:#81c784;background:linear-gradient(135deg,#1b382b 0%,#25523c 100%)}.vocab-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:1.2rem;margin-bottom:2.5rem;display:grid}.vocab-card{background:var(--bg-card);border-radius:var(--radius-lg);border:3px solid var(--border-color);text-align:center;cursor:pointer;box-shadow:var(--shadow-sm);padding:1.8rem 1rem 1.4rem;transition:all .3s cubic-bezier(.175,.885,.32,1.275)}.vocab-card:hover{border-color:var(--blue);box-shadow:var(--shadow-md);transform:translateY(-6px)scale(1.03)}.vocab-emoji{filter:drop-shadow(0 4px 8px #0000001a);margin-bottom:.8rem;font-size:4.8rem;line-height:1;transition:transform .3s}.vocab-card:hover .vocab-emoji{transform:scale(1.12)rotate(4deg)}.ginti-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:1rem;margin-bottom:2rem;display:grid}.ginti-card{background:var(--bg-card);border-radius:var(--radius-md);border:3px solid var(--border-color);text-align:center;cursor:pointer;padding:1.2rem .6rem}.ginti-num{font-family:var(--font-gurmukhi);color:var(--secondary);font-size:3.2rem;font-weight:800}.counter-card{background:var(--bg-card);border-radius:var(--radius-lg);border:3px solid var(--secondary);text-align:center;width:100%;max-width:600px;margin:0 auto;padding:1.5rem}.counter-controls{justify-content:center;align-items:center;gap:1.5rem;margin:1rem 0;display:flex}.count-btn{background:var(--secondary);color:#fff;cursor:pointer;border:none;border-radius:50%;width:48px;height:48px;font-size:1.4rem}.g-num{font-family:var(--font-gurmukhi);color:var(--secondary);font-size:3.8rem;font-weight:800}.counter-objects{flex-wrap:wrap;justify-content:center;gap:.6rem;min-height:50px;font-size:2.2rem;display:flex}.rewards-dashboard{grid-template-columns:280px 1fr;gap:1.5rem;margin-bottom:2rem;display:grid}.reward-card{background:var(--bg-card);border-radius:var(--radius-lg);border:3px solid var(--yellow);text-align:center;padding:1.5rem}.badges-grid{grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:.8rem;margin-top:.8rem;display:grid}.badge-item{background:var(--bg-main);border:2px solid var(--border-color);border-radius:var(--radius-md);text-align:center;opacity:.4;filter:grayscale();padding:.8rem .4rem}.badge-item.unlocked{opacity:1;filter:grayscale(0);border-color:var(--yellow)}.certificate-card{box-shadow:var(--shadow-lg);color:#2c3e50;text-align:center;background:#fffdf5;border:8px solid #f93;border-radius:16px;padding:1.5rem}.cert-border{border:2px dashed #d84315;border-radius:8px;padding:1.2rem}.cert-name-input{text-align:center;color:#00c853;background:0 0;border:none;border-bottom:3px dashed #00c853;outline:none;width:90%;margin:.8rem 0;font-family:"Baloo 2",cursive;font-size:1.6rem;font-weight:800}.main-footer{background:var(--bg-card);border-top:2px solid var(--border-color);text-align:center;margin-top:3rem;padding:2rem 1rem}@media (max-width:992px){.hero-content,.tracing-workspace,.rewards-dashboard,.story-hero-header{grid-template-columns:1fr}.mobile-toggle{display:block}.nav-menu{background:var(--bg-card);width:100%;box-shadow:var(--shadow-md);border-bottom:2px solid var(--border-color);z-index:1100;flex-direction:column;padding:1rem;display:none;position:absolute;top:100%;left:0}.nav-menu.mobile-open{display:flex}.canvas-wrapper{height:320px}.guide-overlay{font-size:12rem}.letter-picker-grid{grid-template-columns:repeat(5,1fr);max-height:220px}}@media (max-width:600px){.main-content{padding:1rem .5rem 3rem}.hero-banner{padding:1.2rem}.hero-text h1{font-size:1.6rem}.section-header h2{font-size:1.4rem}.alphabet-grid{grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:.6rem}.vocab-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:.8rem}.vocab-emoji{font-size:3.8rem}.canvas-wrapper{height:280px}.guide-overlay{font-size:9.5rem}.scene-text-p{font-size:1.2rem}.scene-visual-gfx{font-size:2.2rem}.story-img-lg{height:180px}.storybook-card{padding:1rem}}