html,body{color:#fff;background-color:#000;margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif}.red-experience{background:linear-gradient(90deg,#e53e3e,#9b2c2c)}.blue-experience{background:linear-gradient(90deg,#3182ce,#2c5282)}.audio-button{cursor:pointer;border:none;border-radius:.375rem;padding:.5rem 1rem;font-weight:500;transition:all .3s}.audio-button.red{color:#fff;background-color:#e53e3e}.audio-button.red:hover{background-color:#c53030}.audio-button.blue{color:#fff;background-color:#3182ce}.audio-button.blue:hover{background-color:#2b6cb0}.audio-button.active{box-shadow:0 0 0 4px #ffffff80}.container{max-width:1200px;margin:0 auto;padding:1rem}.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.text-center{text-align:center}.rounded-lg{border-radius:.5rem}.p-4{padding:1rem}.mt-2{margin-top:.5rem}.mt-4{margin-top:1rem}.mb-4{margin-bottom:1rem}.progress-container{background-color:#fff3;border-radius:9999px;width:100%;height:.5rem;margin:1rem 0;overflow:hidden}.progress-bar{border-radius:9999px;height:100%;transition:width .3s}.progress-bar.red{background-color:#f56565}.progress-bar.blue{background-color:#4299e1}.animate-spin{animation:1s linear infinite spin}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.loading-spinner{border:2px solid #f3f3f3;border-top-color:#3498db;border-radius:50%;width:2.5rem;height:2.5rem;animation:1s linear infinite spin;display:inline-block}
:root{--red-gradient-start:#ec4899;--red-gradient-end:#9333ea;--blue-gradient-start:#3b82f6;--blue-gradient-end:#10b981}body{color:#fff;background-color:#121212;margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif}.progress-container{background-color:#fff3;border-radius:4px;width:100%;height:8px;overflow:hidden}.progress-bar{border-radius:4px;height:100%;transition:width .5s}.progress-bar.red{background:linear-gradient(to right, var(--red-gradient-start), var(--red-gradient-end))}.progress-bar.blue{background:linear-gradient(to right, var(--blue-gradient-start), var(--blue-gradient-end))}.red-background{background:linear-gradient(135deg,#450a0a,#3b0764)}.blue-background{background:linear-gradient(135deg,#172554,#064e3b)}.audio-controls{justify-content:center;gap:1rem;margin:1rem 0;display:flex}.audio-controls button{cursor:pointer;background-color:#fff3;border:none;border-radius:50%;justify-content:center;align-items:center;width:50px;height:50px;transition:all .3s;display:flex}.audio-controls button:hover{background-color:#ffffff4d}.experience-button{cursor:pointer;border-radius:9999px;justify-content:center;align-items:center;width:60px;height:60px;padding:1rem;transition:all .3s;display:flex}.experience-button.red{border:3px solid var(--red-gradient-start);background-color:#ec489933}.experience-button.blue{border:3px solid var(--blue-gradient-start);background-color:#3b82f633}