:root{--primary-red: #8B0000;--secondary-red: #B22222;--accent-gold: #DAA520;--bg-cream: #FDFBF7;--text-dark: #1A1A1A;--text-muted: #555555;--glass-bg: rgba(255, 255, 255, .75);--glass-border: rgba(139, 0, 0, .15);--shadow-premium: 0 10px 30px -10px rgba(0, 0, 0, .1);--shadow-soft: 0 4px 12px rgba(0, 0, 0, .05);--border-radius-xl: 32px;--border-radius-lg: 20px;--border-radius-md: 12px;--transition-smooth: all .4s cubic-bezier(.4, 0, .2, 1);--safe-top: env(safe-area-inset-top, 0px);--safe-bottom: env(safe-area-inset-bottom, 20px)}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0}body{background-color:var(--bg-cream);background-image:url(https://www.transparenttextures.com/patterns/handmade-paper.png);color:var(--text-dark);font-family:Outfit,Inter,Noto Sans SC,system-ui,sans-serif;line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;min-height:100vh;overflow-x:hidden}h1,h2,h3,h4,h5,h6{font-weight:800;color:var(--primary-red);text-wrap:balance}#app-root{min-height:100vh}::-webkit-scrollbar{width:5px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#8b000033;border-radius:10px}::-webkit-scrollbar-thumb:hover{background:#8b000066}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes scaleIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.animate-fade{animation:fadeIn .6s ease-out forwards;will-change:opacity}.animate-slide{animation:slideUp .8s cubic-bezier(.2,.8,.2,1) forwards;will-change:transform,opacity}.animate-scale{animation:scaleIn .5s ease-out forwards;will-change:transform,opacity}.glass{background:var(--glass-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--glass-border);will-change:transform}.landing-hero{min-height:80vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem 1rem;text-align:center;background:radial-gradient(circle at top right,rgba(218,165,32,.1),transparent),radial-gradient(circle at bottom left,rgba(139,0,0,.05),transparent)}.landing-books{display:flex;gap:1.5rem;margin:3rem 0;perspective:1000px}.book-preview{width:140px;height:200px;border-radius:8px;box-shadow:10px 10px 30px #0003;transition:transform .6s cubic-bezier(.2,.8,.2,1);cursor:pointer;object-fit:cover;will-change:transform}.book-preview:hover{transform:rotateY(-20deg) scale(1.1)}.start-btn{padding:1.25rem 3rem;background:var(--primary-red);color:#fff;border-radius:50px;font-weight:800;font-size:1.1rem;border:none;cursor:pointer;box-shadow:0 10px 20px #8b000033;transition:var(--transition-smooth);text-transform:uppercase;letter-spacing:2px;will-change:transform,box-shadow}.start-btn:hover{transform:translateY(-5px);box-shadow:0 15px 30px #8b00004d;background:#a00000}.chapter-selection{padding:4rem 1rem;max-width:900px;margin:0 auto}.selection-title{font-size:1.5rem;margin-bottom:2rem;text-align:center;position:relative;display:flex;align-items:center;justify-content:center;gap:1rem}.selection-title:before,.selection-title:after{content:"";height:1px;background:#8b00001a;flex:1}.chapter-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:1rem;margin-bottom:4rem}.chapter-card{background:#fff;border-radius:20px;padding:1.5rem;border:1px solid rgba(139,0,0,.05);box-shadow:var(--shadow-soft);transition:var(--transition-smooth);cursor:pointer;display:flex;flex-direction:column;gap:.5rem;will-change:transform}.chapter-card:hover{transform:translateY(-8px);border-color:var(--accent-gold);box-shadow:0 20px 40px #0000000d}.chapter-num{font-size:.75rem;font-weight:800;color:var(--accent-gold);text-transform:uppercase}.chapter-name{font-weight:700;font-size:.95rem;color:var(--text-dark);line-height:1.3}@media (max-width: 480px){.chapter-grid{grid-template-columns:repeat(2,1fr)}.book-preview{width:100px;height:145px}}.chapter-grid,.lesson-container{content-visibility:auto;contain-intrinsic-size:1px 1000px}
