*{box-sizing:border-box;margin:0;padding:0}html{scrollbar-gutter:stable}body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;background-color:#f0f4f8;color:#2d3748;line-height:1.6}h1,h2,h3{font-weight:600}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 28px;border:none;border-radius:8px;font-size:15px;font-weight:600;cursor:pointer;transition:all .2s ease;letter-spacing:.3px}.btn:disabled{opacity:.55;cursor:not-allowed;transform:none!important}.btn:not(:disabled):hover{transform:translateY(-1px);box-shadow:0 4px 12px #00000026}.btn:not(:disabled):active{transform:translateY(0)}.btn-primary{background:#3182ce;color:#fff}.btn-primary:hover:not(:disabled){background:#2b6cb0}.btn-success{background:#38a169;color:#fff}.btn-success:hover:not(:disabled){background:#2f855a}.btn-danger{background:#e53e3e;color:#fff}.btn-danger:hover:not(:disabled){background:#c53030}.btn-secondary{background:#718096;color:#fff}.btn-secondary:hover:not(:disabled){background:#4a5568}.btn-play{background:#805ad5;color:#fff}.btn-play:hover:not(:disabled){background:#6b46c1}.spinner{width:40px;height:40px;border:4px solid #e2e8f0;border-top-color:#3182ce;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}