*{margin:0;padding:0;box-sizing:border-box}html,body,#root{height:100%;overflow:hidden}body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;background:#f0f7ff}.app{height:100%}.landing{height:100%;display:flex;align-items:center;justify-content:center;background:linear-gradient(160deg,#a8d8ea,#f9f3e3 60%,#ffd6a5);overflow-y:auto}.landing-content{text-align:center;padding:3rem 2rem}.landing-logo{font-size:6rem;margin-bottom:1rem;animation:float 3s ease-in-out infinite}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-12px)}}.landing-title{font-size:3rem;font-weight:800;color:#2c5f8a;letter-spacing:2px;margin-bottom:.75rem}.landing-subtitle{font-size:1.2rem;color:#5a7a9a;margin-bottom:2.5rem}.start-btn{padding:1rem 2.5rem;font-size:1.15rem;font-weight:700;color:#fff;background:linear-gradient(135deg,#4a90d9,#2c6db5);border:none;border-radius:50px;cursor:pointer;box-shadow:0 4px 20px #2c6db566;transition:transform .2s,box-shadow .2s}.start-btn:hover{transform:translateY(-2px);box-shadow:0 6px 28px #2c6db580}.yoga-page-wrapper{height:100%;display:flex;flex-direction:column;background:linear-gradient(160deg,#c9e8f7,#f9f3e3 55%,#fde8c8);overflow:hidden}.page-topbar{flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:.75rem 1.5rem;background:#ffffffbf;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid rgba(44,109,181,.15);z-index:10}.back-btn{padding:.4rem 1rem;font-size:.9rem;color:#2c5f8a;background:transparent;border:1.5px solid #2c5f8a;border-radius:20px;cursor:pointer;transition:background .2s,color .2s}.back-btn:hover{background:#2c5f8a;color:#fff}.autoplay-toggle label{display:flex;align-items:center;gap:.5rem;font-size:.9rem;color:#2c5f8a;cursor:pointer;-webkit-user-select:none;user-select:none}.autoplay-toggle input[type=checkbox]{width:1rem;height:1rem;accent-color:#4a90d9;cursor:pointer}.page-scroll{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch}.yoga-page{max-width:1100px;width:100%;margin:0 auto;padding:2rem 3rem}.page-header{font-size:1.8rem;font-weight:800;color:#1a4a7a;text-align:center;margin-bottom:2rem;letter-spacing:1px;text-transform:uppercase}.page-content{display:grid;gap:1.5rem;align-items:start}.page-content.image-right{grid-template-columns:1fr 1fr;grid-template-areas:"text  image" "audio image"}.page-content.image-left{grid-template-columns:1fr 1fr;grid-template-areas:"image text" "image audio"}.page-image-section{grid-area:image}.audio-controls{grid-area:audio}.page-text-section{grid-area:text}.page-text{font-size:1.1rem;line-height:1.8;color:#2c3e50;background:#ffffffb3;padding:1.5rem;border-radius:16px;box-shadow:0 2px 16px #2c6db51a;white-space:pre-line}.page-image-section{display:flex;align-items:flex-start;justify-content:center}.page-image{width:100%;max-height:480px;border-radius:16px;box-shadow:0 8px 32px #2c6db533;object-fit:contain}.audio-controls{display:flex;align-items:center}.play-btn{padding:.6rem 1.4rem;font-size:.95rem;font-weight:600;color:#fff;background:linear-gradient(135deg,#43b89c,#2e8b6e);border:none;border-radius:30px;cursor:pointer;box-shadow:0 3px 12px #2b8b6e59;transition:transform .2s,box-shadow .2s}.play-btn:hover{transform:translateY(-1px);box-shadow:0 5px 18px #2b8b6e73}.play-btn.playing{background:linear-gradient(135deg,#e07b54,#c0512a);box-shadow:0 3px 12px #c0512a59}.page-nav{flex-shrink:0;display:flex;align-items:center;justify-content:center;gap:1.5rem;padding:1rem 1.5rem;background:#ffffffbf;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-top:1px solid rgba(44,109,181,.15);z-index:10}.nav-btn{padding:.6rem 1.8rem;font-size:1rem;font-weight:700;color:#fff;background:linear-gradient(135deg,#4a90d9,#2c6db5);border:none;border-radius:30px;cursor:pointer;box-shadow:0 3px 12px #2c6db54d;transition:transform .2s,box-shadow .2s}.nav-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 5px 18px #2c6db566}.nav-btn:disabled{background:#b0c4d8;box-shadow:none;cursor:not-allowed;opacity:.6}.page-counter{font-size:1rem;font-weight:600;color:#2c5f8a;min-width:80px;text-align:center}.loading{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;min-height:200px;gap:1rem;font-size:1.1rem;color:#5a7a9a}.loading-spinner{font-size:3rem;animation:spin 2s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media(max-width:700px){.yoga-page{padding:1.25rem 1rem}.page-content.image-right,.page-content.image-left{grid-template-columns:1fr;grid-template-areas:"image" "audio" "text"}.page-header{font-size:1.3rem;margin-bottom:1.25rem}.page-image{max-height:260px}.landing-title{font-size:2rem}.landing-logo{font-size:4rem}.nav-btn{padding:.55rem 1.2rem;font-size:.9rem}}