body{font-family:Arial,sans-serif;background:#131314;color:#fff;margin:0;padding:0}.container{max-width:700px;margin:50px auto;padding:20px;text-align:center}.container h1{color:#fff;font-size:2em;margin-bottom:20px}.iframe-container{position:relative;margin-bottom:20px;width:100%;height:352px;display:flex;align-items:center;justify-content:center;background:#1c1c1e;border-radius:12px;overflow:hidden;flex-direction:column}.iframe-container iframe{opacity:0;transform:translateY(20px);transition:opacity .8s ease-in-out,transform .8s ease-in-out}.iframe-container iframe.loaded{opacity:1;transform:translateY(0);position:absolute;top:0;left:0;width:100%;height:100%}.loading-bar-container{width:30%;height:4px;background:#fff3;border-radius:2px;position:absolute;overflow:hidden}.loading-bar{width:100%;height:100%;background:#fff;animation:loadingFill 2s infinite}@keyframes loadingFill{0%{width:0}to{width:100%}}footer{text-align:center;margin-top:50px;color:#777}#root{max-width:1280px;margin:0 auto;padding:2rem;text-align:center}.logo{height:6em;padding:1.5em;will-change:filter;transition:filter .3s}.logo:hover{filter:drop-shadow(0 0 2em #646cffaa)}.logo.react:hover{filter:drop-shadow(0 0 2em #61dafbaa)}@keyframes logo-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (prefers-reduced-motion: no-preference){a:nth-of-type(2) .logo{animation:logo-spin infinite 20s linear}}.card{padding:2em}.read-the-docs{color:#888}.home-container{font-family:Arial,sans-serif;line-height:1.6;margin:0 auto;padding:2rem;max-width:800px;text-align:justify;background-color:#1e1e1e;color:#fff;border-radius:12px;box-shadow:0 4px 10px #0003;position:relative;overflow:hidden}.nav-buttons{display:flex;justify-content:center;gap:1rem;margin:1rem auto}.nav-buttons button{padding:.6rem 1.2rem;font-size:1rem;font-weight:700;color:#fff;border:none;border-radius:8px;background:linear-gradient(45deg,#6a1b9a,#8e24aa);cursor:pointer;transition:all .3s ease-in-out}.nav-buttons button:hover{background:linear-gradient(45deg,#4a148c,#6a1b9a);transform:scale(1.05)}.nav-buttons button:active{background:#4a148c;transform:scale(.95)}.spinner{margin:2rem auto;width:50px;height:50px;border:5px solid rgba(255,255,255,.2);border-top-color:#0ff;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.home-container h1{text-align:center;color:#0ff;font-size:2em;margin-bottom:1rem}.home-container p{font-size:18px;line-height:1.8}.home-container span{font-weight:700}.home-container span.yellow{color:#ff0}.home-container span.orange{color:orange}.home-container span.red{color:red}.home-container span.cyan{color:#0ff}