:root{--color-primary: #d32f2f;--color-secondary: #ffffff;--color-text: #333333;--color-border: #e0e0e0;--color-hover: rgba(255, 255, 255, .1);--color-gray: #808080;--section-padding: 80px 40px;--card-padding: 40px;--mobile-padding: 60px 24px;--transition-time: .3s;--scale-factor: 1.05}body{margin:0;font-family:Poppins,sans-serif;color:var(--color-text)}.container{max-width:1200px;margin:0 auto;padding:0 20px}.main-section{background-color:var(--color-secondary);color:var(--color-primary);padding:var(--section-padding);text-align:center}.main-section h1{font-size:2.625rem;margin-bottom:.625rem;font-weight:700;letter-spacing:-.5px}.subtitle{font-size:1.25rem;font-weight:300;margin:0 auto 1.5rem;max-width:700px;text-align:center;color:var(--color-text);display:flex;justify-content:center;align-items:center}.description{font-size:1rem;max-width:700px;margin:0 auto 1.875rem;line-height:1.6;color:var(--color-text);text-align:center}.info-link{background-color:var(--color-primary);color:var(--color-secondary);text-decoration:none;font-weight:700;display:inline-block;margin-top:1.25rem;padding:.75rem 1.5rem;border:none;border-radius:60px;transition:all var(--transition-time) ease;cursor:pointer}.info-link:hover{background-color:#b71c1c;transform:scale(var(--scale-factor))}.diseases-section{background-color:var(--color-secondary);padding:var(--section-padding)}.diseases-section h2{font-size:2rem;margin-bottom:2.5rem;color:var(--color-primary);font-weight:700;text-align:center}.bento-grid{display:grid;gap:1.25rem;grid-template-columns:repeat(2,1fr)}.bento-item{background-color:#fff;text-decoration:none;border-radius:20px;padding:var(--card-padding);display:flex;flex-direction:column;justify-content:space-between;align-items:center;min-height:240px;border:1px solid var(--color-border);transition:transform var(--transition-time) ease,box-shadow var(--transition-time) ease;box-shadow:0 4px 20px #d32f2f1a}.bento-item:hover{transform:scale(1.02);box-shadow:0 10px 25px #d32f2f33}.bento-item img{width:90px;height:auto;margin:0 auto 1rem;display:block}.bento-item h3{font-size:1.375rem;margin-bottom:1.25rem;font-weight:600;color:var(--color-primary);text-align:center}.explore-btn{background-color:var(--color-primary);color:var(--color-secondary);border:none;padding:.625rem 1.25rem;border-radius:60px;font-weight:700;font-size:.875rem;margin-top:1.25rem;cursor:pointer;transition:all var(--transition-time) ease}.explore-btn:hover{background-color:#b71c1c;transform:scale(var(--scale-factor))}.quiz-section{background-color:var(--color-primary);color:var(--color-secondary);padding:var(--section-padding);text-align:center}.quiz-section h2{font-size:2rem;margin-bottom:1.875rem;font-weight:700}.quiz-description{font-size:1rem;max-width:700px;margin:0 auto 1.875rem;line-height:1.6;color:#fff}.quiz-btn{background-color:var(--color-secondary);color:var(--color-text);padding:1.25rem;border-radius:60px;font-weight:700;font-size:1rem;border:none;cursor:pointer;transition:all var(--transition-time) ease}.quiz-btn:hover{background-color:var(--color-gray);transform:scale(var(--scale-factor))}a:focus,a:active,.bento-item:focus,.bento-item:active,button:focus,button:active{outline:none;box-shadow:none}.login-alert-backdrop{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#33333380;display:flex;justify-content:center;align-items:center;z-index:999}.login-alert-modal{background-color:#fff;padding:2rem;border-radius:20px;max-width:400px;width:90%;text-align:center;box-shadow:0 10px 30px #0003}.login-alert-modal h3{color:var(--color-primary);margin-bottom:1rem;font-size:1.25rem}.login-alert-modal p{color:var(--color-text);margin-bottom:1.5rem;font-size:1rem;line-height:1.4}.login-alert-modal button{background-color:var(--color-primary);color:var(--color-secondary);border:none;border-radius:60px;padding:.625rem 1.25rem;font-weight:700;font-size:.875rem;cursor:pointer;transition:all var(--transition-time) ease;margin:.5rem}.login-alert-modal button:hover{background-color:#b71c1c;transform:scale(var(--scale-factor))}@media (max-width: 767px){.bento-grid{grid-template-columns:1fr}.main-section h1{font-size:2rem}.diseases-section h2,.quiz-section h2{font-size:1.75rem}}.slide-hint{font-size:1.5rem;color:var(--color-primary);margin-bottom:1rem;animation:upDown 2s ease-in-out infinite;position:relative;margin-top:70px}@keyframes upDown{0%,to{top:0}50%{top:-10px}}.layout{display:flex;flex-direction:column;min-height:100vh;width:100%;height:100vh;height:100%}.layout-content{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;width:100%;flex:1;padding-top:6rem}.footer-container{background-image:linear-gradient(#fff9,#fff9),url(/background-footer/background-footer.webp);background-size:cover;background-position:center;background-repeat:no-repeat;display:flex;background-color:var(--color-whithe);text-align:center;align-items:center;flex-direction:column;margin-top:auto}.footer-content{text-transform:uppercase;margin:0 auto .5rem;max-width:800px;display:flex;flex-direction:column;text-align:center}.footer-logo{width:80%}.footer-contact{display:flex;text-align:center;line-height:2%;flex-direction:column;font-size:1rem;margin:0 auto 1%}.separator{text-align:center;width:100%;height:100%;min-height:2em;background-color:var(--color-primary)}.copyright{font-size:.75rem;color:var(--color-whithe);margin:1% 0 auto}.header-container{position:fixed;top:0;width:100%;height:100px;z-index:2000;background-color:var(--color-primary)}main{padding-top:100px}.header-container{position:fixed;top:0;left:0;width:100%;height:100px;z-index:2000;background-color:var(--color-primary);transition:padding .8s ease,background-color .8s ease,height .8s ease}.header-container.shrink{height:80px;background-color:var(--color-primary);transition:padding .8s ease,background-color .8s ease,height .8s ease;z-index:2000}.navbar{display:flex;height:90px;padding:.4rem 1rem;align-items:center;justify-content:space-between;transition:height .8s ease;z-index:2000}.navbar.shrink{height:70px;z-index:2000}.logo-img{height:100px;transition:height .4s ease;z-index:2000}.header-container.shrink .logo-img{height:70px;z-index:2000}.logo-img img{width:100%;z-index:2000}.navbar ul{list-style:none;display:flex;gap:1.5rem;margin:0;padding:0;flex-wrap:wrap;position:static;box-shadow:none;z-index:2000}.navbar ul li a,.dropdown-menu{color:var(--color-whithe);text-decoration:none;z-index:2000}.navbar ul li a.active,.navbar ul li .dropdown-link.active{border-bottom:2px solid var(--color-secondary);padding-bottom:.25rem;z-index:2000}.dropdown{position:relative;color:var(--color-whithe);z-index:2000}.dropdown-link{color:var(--color-whithe);cursor:pointer;z-index:2000}.dropdown-menu{visibility:hidden;opacity:0;position:absolute;top:100%;left:0;background-color:var(--color-primary);color:var(--color-whithe);list-style:none;margin:0;padding:.5rem 1rem;width:fit-content;max-width:250px;box-sizing:border-box;box-shadow:0 2px 5px #0003;z-index:2000;white-space:nowrap;transition:opacity .3s ease;pointer-events:none}.dropdown-menu li a{padding:.5rem 1rem;text-decoration:none;display:block;cursor:pointer;white-space:nowrap;z-index:2000}.dropdown-menu li a:hover{background-color:var(--color-button-hover);z-index:2000}.dropdown:hover .dropdown-menu{visibility:visible;opacity:1;pointer-events:auto;z-index:2000}.nav-toggle{display:none;background:none;border:none;color:var(--color-secondary);font-size:1.5rem;cursor:pointer;z-index:2000}.login-button{font-family:poppins,sans-serif;padding:.5rem 1rem;background-color:var(--color-button-hover);color:var(--color-secondary);border:none;border-radius:4px;text-decoration:none;transition:background-color .3s ease;font-weight:700;width:fit-content;z-index:2000}.login-button:hover{background-color:var(--color-button-hover);width:fit-content;z-index:2000}.custom-modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;display:flex;align-items:center;justify-content:center;z-index:999}.custom-modal{background-color:#fff;padding:2rem;border-radius:10px;text-align:center;max-width:90%;box-shadow:0 0 20px #00000040}.custom-modal-overlay button{margin-top:1.5rem;background-color:#c00;color:#fff;border:none;border-radius:999px;padding:8px 20px;cursor:pointer;transition:background-color .2s ease}.custom-modal-overlay button:hover{background-color:#d32f2f}@media (max-width: 768px){.navbar{flex-direction:row;justify-content:space-between;align-items:center;position:relative;flex-wrap:nowrap;z-index:2000}.logo-link{margin-bottom:0;z-index:2000}.navbar ul{display:none;flex-direction:column;width:100%;gap:.75rem;margin:0;padding:1rem 0;position:absolute;top:100%;left:0;right:0;background-color:var(--color-primary);box-shadow:0 4px 8px #0000001a;overflow-y:auto;z-index:2000}.header-container.menu-open .navbar ul{display:flex;z-index:2000}.navbar ul li{width:100%;text-align:left;padding:.5rem 1rem;z-index:2000}.navbar ul li a,.navbar ul li .dropdown-link{width:100%;display:block;padding:.75rem 1rem;font-size:.95rem;z-index:2000}.dropdown-menu{position:static;background-color:var(--color-primary);box-shadow:none;margin-top:.25rem;width:100%;background:transparent;padding-left:1rem;visibility:visible!important;opacity:1!important;pointer-events:auto!important;white-space:normal;z-index:2000}.dropdown-menu li a{padding:.25rem 1rem;white-space:normal;z-index:2000}.nav-toggle{display:block;font-size:1.8rem;margin-left:auto;z-index:2000}.logo-link,.nav-toggle{flex-shrink:0}.header-container,.navbar{padding:.5rem 1rem}.logo-img{height:70px}}@media (max-width: 480px){.header-container{padding:.5rem 0rem}.navbar ul li a,.navbar ul li .dropdown-link{font-size:.85rem;padding:.5rem}.logo-img{height:70px}}@media (min-width: 769px){.navbar ul{display:flex!important;position:static;box-shadow:none;gap:1.5rem;margin-left:1rem}.nav-toggle{display:none}}.user-auth-section{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}.user-name-button{font-family:poppins,sans-serif;display:relative;align-items:center;gap:.5rem;background-color:var(--color-primary);color:var(--color-secondary);border-radius:4px;font-weight:700;pointer-events:none}.user-icon{font-size:1.2rem}.body-disease h1{font-size:2.5rem;font-weight:700;color:var(--color-button-hover);margin-bottom:20px}[class^=canvas-] canvas{touch-action:none}.canvas-container{justify-content:center;width:80vh}.canvas-pulmonary-fibrosis{align-items:flex-start;justify-content:center;height:530px;z-index:0}.canvas-pulmonary-fibrosis canvas{touch-action:none;width:100%!important;height:100%!important;object-fit:contain;object-position:top center}.canvas-content-flex,.lung-fibrosis-content-flex,.precaution-fibrosis-content-flex{display:flex;justify-content:center;align-items:center}.lung-fibrosis-container{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));align-items:center;justify-content:center;padding-bottom:30px;width:100%}.lung-fibrosis-title{color:var(--color-primary);font-weight:700}.lung-fibrosis-description{color:var(--color-text);font-size:1.2rem;text-align:center}.what-is-fibrosis-container{display:flex;width:100%;height:500px;background-color:var(--color-primary);grid-template-columns:repeat(auto-fit,minmax(200px,1fr));justify-content:center;align-items:center}.what-is-fibrosis-title{color:var(--color-secondary);text-align:center;font-size:2rem}.what-is-fibrosis-text{color:var(--color-secondary);margin-bottom:20px;font-size:1.1rem;text-align:center}.symptoms-fibrosis-container{position:relative;display:grid;grid-template-columns:1fr 1fr;column-gap:2rem;width:100%;min-height:400px;padding:2rem 0;background-color:var(--color-secondary);align-items:center}.symptoms-fibrosis-title{color:var(--color-primary);font-weight:700;font-size:2rem;text-align:center;margin-bottom:1.5rem;padding-top:1rem}.symptoms-fibrosis-text{color:var(--color-text);font-size:1.1rem;line-height:1.6;max-width:90%;width:auto;text-align:left;margin-bottom:1.5rem;padding:0 2rem}.symptoms-fibrosis-content-flex{display:flex;justify-content:center;align-items:center}.treatment-fibrosis-container{position:relative;display:grid;grid-template-columns:1fr 1fr;width:100%;min-height:400px;padding:2rem 0;background-color:var(--color-primary);align-items:center}.treatment-fibrosis-title{color:var(--color-secondary);font-weight:700;font-size:2rem;text-align:ceter;margin-bottom:1.5rem;padding-top:1rem}.treatment-fibrosis-text{color:var(--color-secondary);font-size:1.1rem;line-height:1.6;max-width:90%;text-align:left;margin-bottom:1.5rem;padding:0 2rem}.treatment-fibrosis-content{display:grid;justify-content:center;align-items:center}.precaution-fibrosis-container{display:grid;width:100%;min-height:400px;background-color:var(--color-secondary);padding:2rem 0;grid-template-columns:1fr}.precaution-fibrosis-content-flex{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:2rem;max-width:1200px;margin:0 auto}.precaution-fibrosis-content{flex:1 1 500px;max-width:600px;padding:0 2rem}.precaution-fibrosis-title{color:var(--color-primary);font-weight:700;font-size:2rem;text-align:center;margin-bottom:1.5rem}.precaution-fibrosis-text{color:var(--color-text);font-size:1.1rem;line-height:1.6;text-align:left}@media (max-width: 780px){.canvas-loung-fibrosis canvas{width:100%!important;height:250px}.canvas-container{width:100%;height:auto}.move-icon-wrapper{font-size:1.5rem}.move-icon-wrapper h1{font-size:.8rem}.lung-fibrosis-container,.symptoms-fibrosis-container,.treatment-fibrosis-container,.precaution-fibrosis-container{grid-template-columns:1fr;width:100%!important;min-height:auto;padding:1rem 0}.symptoms-fibrosis-text,.treatment-fibrosis-text,.precaution-fibrosis-text{font-size:1rem;padding:0 1rem;max-width:100%!important}.precaution-fibrosis-content-flex{flex-direction:column;gap:1rem}.treatment-fibrosis-container{height:auto}.what-is-fibrosis-container{height:auto;padding:2rem 0}}@media (min-width: 1024px){.symptoms-fibrosis-container{grid-template-columns:55% 45%}.treatment-fibrosis-container{grid-template-columns:45% 55%}.what-is-fibrosis-container{height:400px;grid-template-columns:1fr}.what-is-fibrosis-text{width:800px;margin:0 auto}}.symptoms-fibrosis-canvas-content,.treatment-fibrosis-canvas-content,.precaution-fibrosis-canvas-content{position:relative;width:100%;height:400px;min-height:300px;overflow:visible;margin:1rem auto}.symptoms-fibrosis-container,.treatment-fibrosis-container{grid-template-columns:1fr 1fr;gap:2rem;align-items:start}.precaution-fibrosis-content-flex{gap:3rem;padding:1rem}.precaution-fibrosis-canvas-content{flex:1 1 400px;max-width:600px;height:350px}@media (max-width: 780px){.symptoms-fibrosis-canvas-content,.treatment-fibrosis-canvas-content,.precaution-fibrosis-canvas-content{height:300px;min-height:250px;margin:0 auto}[class^=canvas-] canvas{object-position:center top}}@media (min-width: 1024px){.symptoms-fibrosis-canvas-content,.precaution-fibrosis-canvas-content{height:400px}}.canvas-wrapper{flex:1;min-width:300px;position:relative;padding:15px}.title h1{color:#000;font-size:2rem!important}.text-treatment{background:none;box-shadow:none;padding:0;min-width:450px;text-align:center}.text-treatment button{font-size:.5rem;padding:5px 10px!important;background:#c00;color:#fff;border:none;border-radius:50px;cursor:pointer}.text-treatment button:hover{background-color:#d32f2f;color:#f0f8ff}.modal-content{margin-top:-30px;background-color:#fff;padding:30px;border-radius:8px;max-width:500px;width:80%;position:relative}.modal-close{position:absolute}:root{--color-primary: #d32f2f;--color-secondary: #ffffff;--color-text: #333333;--color-border: #e0e0e0;--color-hover: rgba(255, 255, 255, .1);--color-gray: #808080}.main-content{margin-top:5px}.canvas-asthma canvas,.canvas-symptoms-asthma canvas,.canvas-treatment-asthma canvas,.canvas-precaution-asthma canvas{touch-action:none;width:100%;height:100%}.canvas-container{position:relative;display:grid;width:100%}.canvas-content-flex{display:flex;justify-content:center;align-items:center;width:100%}@keyframes bounce{0%,20%,50%,80%,to{transform:translateY(0)}40%{transform:translateY(-5px)}60%{transform:translateY(-3px)}}.canvas-asthma-title{color:var(--color-primary);font-weight:700;margin-bottom:0;margin-top:20px;text-align:center;font-size:3rem;padding:0 1rem;z-index:1}.what-is-asthma-container{position:relative;display:grid;width:100%;background-color:var(--color-primary);padding:2rem 0}.what-is-asthma-title{color:var(--color-secondary);font-weight:700;margin-bottom:20px;text-align:center}.what-is-asthma-text{color:var(--color-secondary);font-size:1.2rem;max-width:900px;margin:0 auto;text-align:left;padding:.5rem}.symptoms-asthma-container{position:relative;display:grid;width:100%;background-color:var(--color-secondary);padding:2rem 0}.symptoms-asthma-title{color:var(--color-primary);font-weight:700;margin-bottom:20px;text-align:left;padding:0 1rem}.symptoms-asthma-text{color:var(--color-text);font-size:1.2rem;max-width:500px;margin:0 auto;text-align:left;padding:.5rem}.symptoms-asthma-content-flex{display:flex;justify-content:space-around;align-items:left;flex-wrap:wrap;width:100%;max-width:1200px;margin:0 auto}.symptoms-asthma-canvas-content{width:600px;height:600px;margin:1rem}.treatment-asthma-container{position:relative;display:grid;width:100%;background-color:var(--color-primary);padding:2rem 0}.treatment-asthma-title{color:var(--color-secondary);font-weight:700;margin-bottom:20px;text-align:right;padding:0 1rem}.treatment-asthma-text{color:var(--color-secondary);font-size:1.2rem;max-width:500px;margin:0 auto;text-align:right;padding:0 1rem}.treatment-asthma-content-flex{display:flex;justify-content:space-around;align-items:right;flex-wrap:wrap;width:100%;max-width:1200px;margin:0 auto}.treatment-asthma-canvas-content{width:600px;height:600px;margin:1rem}.precaution-asthma-container{position:relative;display:grid;width:100%;background-color:var(--color-secondary);padding:2rem 0}.precaution-asthma-title{color:var(--color-primary);font-weight:700;margin-bottom:20px;text-align:left;padding:0 1rem}.precaution-asthma-text{color:var(--color-text);font-size:1.2rem;max-width:500px;margin:0 auto;text-align:left;padding:0 1rem}.precaution-asthma-content-flex{display:flex;justify-content:space-around;align-items:left;flex-wrap:wrap;width:100%;max-width:1200px;margin:0 auto}.precaution-asthma-canvas-content{width:600px;height:600px;margin:1rem}@media (max-width: 1500px){.canvas-asthma canvas{width:800px;height:500px}}@media (max-width: 1024px){.what-is-asthma-text{max-width:80%}.symptoms-asthma-text,.treatment-asthma-text,.precaution-asthma-text{max-width:400px}}@media (max-width: 768px){.canvas-asthma canvas{width:600px;height:400px}.symptoms-asthma-canvas-content,.treatment-asthma-canvas-content,.precaution-asthma-canvas-content{width:400px;height:400px;margin:1rem auto}.what-is-asthma-text,.symptoms-asthma-text,.treatment-asthma-text,.precaution-asthma-text{width:90%;font-size:1rem;max-width:none;align-items:left}.symptoms-asthma-content-flex,.treatment-asthma-content-flex,.precaution-asthma-content-flex{flex-direction:column;align-items:left}.move-icon-wrapper h1{font-size:.5rem;padding:0}}@media (max-width: 1900px){.canvas-asthma canvas{width:800px;height:500px}}.symptoms-asthma-list{color:var(--color-text);font-size:1rem;padding:1rem;max-width:500px;margin:0 auto}.symptoms-asthma-list h3{color:var(--color-primary);font-size:1.2rem;margin-top:1rem;margin-bottom:.5rem}.symptoms-asthma-list ul{padding-left:1.5rem;margin-bottom:1rem}.symptoms-asthma-list li{margin-bottom:.5rem;line-height:1.4}@media (max-width: 600px){.canvas-asthma canvas{width:100%;height:300px}.symptoms-asthma-list{font-size:.9rem;padding:.5rem}.symptoms-asthma-list h3{font-size:1rem}.symptoms-asthma-list ul{padding-left:1rem}.symptoms-asthma-list li{margin-bottom:.3rem}}.text-treatment button:hover{background-color:#d32f2f}.modal-overlay{position:top;margin-top:0;top:0;left:0;right:0;bottom:0;display:flex;justify-content:center;align-items:center;z-index:20}.modal-content{margin-top:-60px;background-color:#fff;padding:30px;border-radius:8px;max-width:500px;width:80%;position:relative}.modal-close{position:absolute;top:10px}.text-treatment{font-family:Poppins,sans-serif;font-size:1rem;font-weight:700;color:var(--color-text);z-index:1}.text-container{display:flex;justify-content:center;align-items:center}.text-treatment{background:none;box-shadow:none;padding:0;min-width:350px;text-align:center}.text-treatment button{font-family:poppins,sans-serif;background-color:#d32f2f;color:#fff;border:none;padding:10px 20px;border-radius:5px;cursor:pointer;font-size:30px;transition:background-color .3s}.text-treatment button:hover{background-color:#b71c1c}.info-button{background-color:#d32f2f;color:#fff;font-size:50px;border:none;border-radius:10px;width:60px;height:60px;font-weight:700;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .2s ease,background-color .3s ease}.info-button:hover{background-color:#b71c1c;transform:scale(1.1)}.modal-overlay{position:fixed;top:120px;left:-120px;right:130px;bottom:0;display:flex;justify-content:center;align-items:center;z-index:20;background-color:#00000080}.modal-content{margin-top:-60px;background-color:#fff;padding:30px;border-radius:8px;max-width:500px;width:80%;position:relative;box-shadow:0 4px 20px #00000026}.modal-close{position:absolute;top:10px;right:10px;background:none;border:none;font-size:24px;cursor:pointer;color:#d32f2f;padding:5px}.modal-close:hover{color:#b71c1c}.modal-content h3{color:#d32f2f;font-size:20px;font-weight:700;padding-inline:20px;line-height:1.4;margin-top:20px}.canvas-loung-cancer canvas{touch-action:none}.canvas-title-loung{position:absolute;top:-2rem;left:50%;transform:translate(-50%);font-size:clamp(1rem,2vw,4rem);color:var(--color-primary);z-index:5;pointer-events:none;opacity:.85}.canvas-container .canvas-title-loung{margin:0}@media (max-width: 600px){.canvas-title-loung{font-size:clamp(1.5rem,8vw,2.5rem);top:1rem}}.lung-cancer-container{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));flex-direction:column;align-items:center;justify-content:center;padding-bottom:30px}lung-cancer-content-flex{display:flex}.lung-cancer-title{color:var(--color-primary);font-weight:700;margin-bottom:20px}.lung-cancer-description{color:var(--color-text);font-size:1.2rem;text-align:center;margin-bottom:20px}.what-is-cancer-container{position:relative;display:grid;width:100%;height:500px;background-color:var(--color-primary)}.what-is-cancer-title{color:var(--color-secondary);font-weight:700;margin-bottom:20px}.what-is-cancer-text{color:var(--color-secondary);font-size:1.2rem;width:900px;text-align:center;margin-bottom:20px}.what-is-cancer-content{display:grid;justify-content:center;align-items:center}.what-is-cancer-container{position:relative;display:grid}.what-is-cancer-content-flex{display:grid;justify-content:center;align-items:center;width:100%}.canvas-symptoms-cancer canvas{touch-action:none}.symptoms-cancer-container{position:relative;display:grid;width:100%;background-color:var(--color-secondary)}.symptoms-cancer-title{color:var(--color-primary);font-weight:700;margin-bottom:20px;text-align:left}.symptoms-cancer-text{color:var(--color-text);font-size:1.2rem;width:600px;text-align:left;margin-bottom:10px}.symptoms-cancer-content{display:grid;justify-content:center;align-items:center}.symptoms-cancer-container{position:relative;display:grid}.symptoms-cancer-content-flex{display:flex;justify-content:center;align-items:center;width:100%}.symptoms-cancer-canvas-content{padding-top:20px;width:500px;height:500px}.canvas-treatment-cancer canvas{touch-action:none}.treatment-cancer-container{position:relative;display:grid;width:100%;background-color:var(--color-primary)}.treatment-cancer-title{color:var(--color-secondary);font-weight:700;margin-bottom:20px;text-align:right}.treatment-cancer-text{color:var(--color-secondary);font-size:1.2rem;width:500px;text-align:right;margin-bottom:20px}.treatment-cancer-content{display:grid;justify-content:center;align-items:center}.treatment-cancer-container{position:relative;display:grid}.precaution-cancer-container{display:grid;width:100%;background-color:var(--color-secondary);padding:2rem 0}.precaution-cancer-content-flex{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:0rem}.precaution-cancer-canvas-content{flex:0 0 500px;height:300px}.canvas-precaution-cancer canvas{width:100%;height:100%}.precaution-cancer-content{flex:1 1 300px;max-width:500px;padding:0 1rem}.precaution-cancer-title{color:var(--color-primary);font-weight:700;margin-bottom:1rem;text-align:left}.precaution-cancer-text{color:var(--color-text);font-size:1.3rem;line-height:1.5;text-align:left}@media (max-width: 780px){.canvas-loung-cancer canvas{width:300px;height:300px}.canvas-container{width:200px;height:400px}.move-icon-wrapper{font-size:1.5rem}.move-icon-wrapper h1{font-size:.8rem}.lung-cancer-container{grid-template-columns:repeat(auto-fit,minmax(100px,1fr));width:300px}.canvas-treatment-cancer canvas{width:300px;height:500px}.treatment-cancer-canvas-content{padding-top:20px;width:100%;height:500px}.treatment-cancer-content-flex{display:grid;justify-content:center;align-items:center;width:100%}.treatment-cancer-container{display:grid;height:1200px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}.treatment-cancer-title{font-size:2rem}.treatment-cancer-text{width:300px;align-items:center;justify-content:center;font-size:1.5rem}.what-is-cancer-content-flex{display:grid;justify-content:center;align-items:center;width:100%}.what-is-cancer-container{display:grid;height:1000px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}.what-is-cancer-title{width:300px;font-size:2rem}.what-is-cancer-text{width:300px;justify-content:center;align-items:center;font-size:1.5rem}.canvas-symptoms-cancer canvas{width:200px;height:400px}.symptoms-cancer-container{display:grid;height:100%;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));width:350px}.symptoms-cancer-title{font-size:2rem}.symptoms-cancer-text{width:100%;align-items:center;justify-content:center;font-size:1.5rem}.symptoms-cancer-canvas-container{display:flex;justify-content:center;align-items:center;width:100%}.symptoms-cancer-canvas-content{width:200px;height:300px}.symptoms-cancer-content-flex{display:grid;justify-content:center;align-items:center;width:100%}.precaution-cancer-content-flex{flex-direction:column}.precaution-cancer-canvas-content,.precaution-cancer-content{max-width:100%}.precaution-cancer-canvas-content{height:250px}}@media (min-width: 790px){.canvas-loung-cancer canvas{width:600px;height:500px}.canvas-container{height:100vh}.move-icon-wrapper{font-size:1.5rem}.move-icon-wrapper h1{font-size:1rem}.lung-cancer-container{grid-template-columns:repeat(auto-fit,minmax(100px,1fr));width:600px}.canvas-treatment-cancer canvas{width:300px;height:100px}.treatment-cancer-content-flex{display:flex;justify-content:center;align-items:center;width:100%}.treatment-cancer-canvas-content{padding-top:20px;width:150px;height:500px}.treatment-cancer-container{display:flex}.treatment-cancer-title{font-size:1.8rem}.treatment-cancer-text{width:600px;align-items:center;justify-content:center;font-size:1.4rem}.what-is-cancer-content-flex{display:grid;justify-content:center;align-items:center;width:100%}.what-is-cancer-container{display:grid;height:600px;grid-template-columns:repeat(auto-fit,minmax(600px,1fr))}.what-is-cancer-title{width:100%;font-size:2rem}.what-is-cancer-text{width:600px;justify-content:center;align-items:center;font-size:1.5rem}.canvas-symptoms-cancer canvas{width:200px;height:400px}.symptoms-cancer-container{display:flex}.symptoms-cancer-title{font-size:2rem}.symptoms-cancer-text{width:590px;align-items:center;justify-content:center;font-size:1.5rem}.symptoms-cancer-canvas-container{display:flex;justify-content:center;align-items:center;width:300px}.symptoms-cancer-canvas-content{width:250px;height:300px}.symptoms-cancer-content-flex{display:flex;justify-content:center;align-items:center;width:100%}}@media (min-width: 1024px){.canvas-loung-cancer canvas{width:700px}.canvas-container{height:100vh;padding-top:5px}.move-icon-wrapper{font-size:1.8rem}.move-icon-wrapper h1{font-size:1.1rem}.lung-cancer-container{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));width:1000px}.canvas-treatment-cancer canvas{width:400px;height:300px}.treatment-cancer-content-flex{display:flex;justify-content:center;align-items:center;width:100%}.treatment-cancer-canvas-content{padding-top:20px;width:400px;height:500px}.treatment-cancer-container{display:flex}.treatment-cancer-title{font-size:1.8rem}.treatment-cancer-text{width:600px;align-items:center;justify-content:center;font-size:1.4rem}.what-is-cancer-content-flex{display:grid;justify-content:center;align-items:center;width:100%}.what-is-cancer-container{display:grid;height:500px;grid-template-columns:repeat(auto-fit,minmax(600px,1fr))}.what-is-cancer-title{width:100%;font-size:2rem}.what-is-cancer-text{width:1100px;justify-content:center;align-items:center;font-size:1.5rem}}.modal-content-cancer-principal h3{color:#d32f2f;font-size:20px;font-weight:700;padding-inline:20px;line-height:1.4;margin-top:20px}.text-container-cancer-treatment{display:flex;justify-content:center;align-items:center}.text-treatment-cancer-treatment{background:none;box-shadow:none;padding:0;min-width:350px;text-align:center}.text-treatment-cancer-treatment button{font-family:poppins,sans-serif;background-color:silver;color:red;border:none;padding:10px 20px;border-radius:5px;cursor:pointer;font-size:16px;transition:background-color .3s}.text-treatment-cancer-treatment button:hover{background-color:#fff}.modal-overlay-cancer-treatment{position:bottom;margin-top:100px;top:0;left:0;right:0;bottom:0;padding-top:200px;display:flex;justify-content:center;align-items:center;z-index:0}.modal-content-cancer-treatment{margin-top:-60px;background-color:#fff;padding:20px;border-radius:8px;max-width:400px;width:80%;position:relative}.modal-close-cancer-treatment{position:flex;top:0}.text-container-cancer2{display:flex;justify-content:center;align-items:center;position:relative;z-index:50}.text-symptom-cancer2{background:none;box-shadow:none;padding:0;min-width:250px;text-align:center}.text-symptom-cancer2 button{font-family:poppins,sans-serif;background-color:#d32f2f;color:#fff;border:none;padding:5px 10px;border-radius:10px;cursor:pointer;font-size:15px;font-weight:700;transition:all .3s;box-shadow:0 4px 8px #0003}.text-symptom-cancer2 button:hover{background-color:#b71c1c;transform:translateY(-2px);box-shadow:0 6px 12px #0000004d}.modal-overlay-cancer2{position:fixed;top:100px;left:0;right:0;bottom:0;background-color:#000000b3;display:flex;justify-content:center;align-items:center;z-index:1000}.modal-content-cancer2{background-color:#fff;padding:25px;border-radius:12px;max-width:400px;width:85%;position:relative;box-shadow:0 4px 25px #00000040;animation:modalAppear .3s ease-out}.modal-close-cancer2{position:absolute;top:50px;right:15px;background:none;border:none;font-size:10px;cursor:pointer;color:#555;padding:5px;transition:all .2s ease}.modal-close-cancer2:hover{color:#d32f2f;transform:scale(1.1)}.modal-content-cancer2 h3{color:#d32f2f;font-size:15px;font-weight:700;padding-inline:10px;line-height:1.5;margin:10px 0;text-align:center}.text-container-cancer-principal{display:flex;justify-content:center;align-items:center}.text-symptom-cancer{background:none;box-shadow:none;padding:0;min-width:400px;text-align:center}.text-symptom-cancer button{font-family:poppins,sans-serif;background-color:#d32f2f;color:#fff;border:none;padding:1px 10px;border-radius:5px;cursor:pointer;font-size:30px;transition:background-color .3s}.text-symptom-cancer button:hover{background-color:#b71c1c}.text-precaution-cancer2{position:relative;display:flex;justify-content:center;align-items:center}.text-precaution-cancer2 button{font-family:poppins,sans-serif;background-color:#d32f2f;color:#fff;border:none;padding:0;border-radius:20%;cursor:pointer;font-size:24px;transition:background-color .3s,transform .2s;width:40px;height:40px;box-shadow:0 2px 8px #0003}.text-precaution-cancer2 button:hover{background-color:#b71c1c;transform:scale(1.1)}.modal-overlay-cancer-principal{position:fixed;margin-top:0;top:80px;left:0;right:100px;bottom:0;background-color:#00000080;display:flex;justify-content:right;align-items:center;z-index:10}.modal-content-cancer-principal{background-color:#fff;padding:30px;border-radius:8px;max-width:500px;width:80%;position:relative;box-shadow:0 4px 20px #00000026}.modal-close-cancer-principal{position:absolute;top:10px;right:10px;background:none;border:none;font-size:24px;cursor:pointer;color:#555;padding:5px}.modal-close-cancer-principal:hover{color:#d32f2f}.modal-overlay-precaution{position:fixed;top:0;left:0;right:0;bottom:50px;width:400px;background-color:#000000b3;display:flex;justify-content:center;align-items:center;z-index:1000}.modal-content-precaution{background-color:#fff;padding:30px;border-radius:12px;max-width:500px;width:90%;position:relative;box-shadow:0 4px 20px #0000004d;animation:modalAppear .3s ease-out}@keyframes modalAppear{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}.modal-close-precaution{position:absolute;top:10px;right:10px;background:none;border:none;font-size:28px;cursor:pointer;color:#555;padding:5px;transition:color .3s}.modal-close-precaution:hover{color:#d32f2f}.modal-content-precaution h3{color:#d32f2f;font-size:20px;font-weight:700;margin-top:5px;margin-bottom:10px;text-align:center;line-height:1.4}.canvas-pulmonary-hypertension canvas{touch-action:none}.canvas-container{position:relative;display:grid}.canvas-content-flex{display:flex;justify-content:center;align-items:center}.move-icon-wrapper{position:absolute;top:10px;right:10px;z-index:10;color:#000;font-size:2rem;cursor:pointer;background-color:#ffffffb3;padding:5px;border-radius:50%;display:flex;align-items:center;justify-content:center}.move-icon-wrapper h1{margin:0;padding:10px;font-size:1rem;color:#000;font-weight:400}.pulmonary-hypertension-container{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));flex-direction:column;align-items:center;justify-content:center;padding-bottom:30px}pulmonary-hypertension-content-flex{display:flex}.pulmonary-hypertension-title{color:var(--color-primary);font-weight:700;margin-bottom:20px}.pulmonary-hypertension-description{color:var(--color-text);font-size:1.2rem;text-align:center;margin-bottom:20px}.what-is-hypertension-container{position:relative;display:grid;width:100%;height:500px;background-color:var(--color-primary)}.what-is-hypertension-title{color:var(--color-secondary);font-weight:700;margin-bottom:20px}.what-is-hypertension-text{color:var(--color-secondary);font-size:1.2rem;width:900px;text-align:center;margin-bottom:20px}.what-is-hypertension-content{display:grid;justify-content:center;align-items:center}.what-is-hypertension-container{position:relative;display:grid}.what-is-hypertension-content-flex{display:grid;justify-content:center;align-items:center;width:100%}.canvas-symptoms-hypertension canvas{touch-action:none}.symptoms-hypertension-container{position:relative;display:grid;width:100%;background-color:var(--color-secondary)}.symptoms-hypertension-title{color:var(--color-primary);font-weight:700;margin-bottom:20px;text-align:left}.symptoms-hypertension-text{color:var(--color-text);font-size:1.2rem;width:500px;text-align:left;margin-bottom:20px}.symptoms-hypertension-content{display:grid;justify-content:center;align-items:center}.symptoms-hypertension-container{position:relative;display:grid}.symptoms-hypertension-content-flex{display:flex;justify-content:center;align-items:center;width:100%}.symptoms-hypertension-canvas-content{padding-top:20px;width:600px;height:600px}.canvas-treatment-hypertension canvas{touch-action:none}.treatment-hypertension-container{position:relative;display:grid;width:100%;background-color:var(--color-primary)}.treatment-hypertension-title{color:var(--color-secondary);font-weight:700;margin-bottom:20px;text-align:right}.treatment-hypertension-text{color:var(--color-secondary);font-size:1.2rem;width:500px;text-align:right;margin-bottom:20px}.treatment-hypertension-content{display:grid;justify-content:center;align-items:center}.treatment-hypertension-container{position:relative;display:grid}.precaution-hypertension-container{display:grid;width:100%;background-color:var(--color-secondary);padding:2rem 0}.precaution-hypertension-content-flex{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:0rem}.precaution-hypertension-canvas-content{flex:0 0 500px;height:300px}.canvas-precaution-hypertension canvas{width:100%;height:100%}.precaution-hypertension-content{flex:1 1 300px;max-width:500px;padding:0 1rem}.precaution-hypertension-title{color:var(--color-primary);font-weight:700;margin-bottom:1rem;text-align:left}.precaution-hypertension-text{color:var(--color-text);font-size:1.3rem;line-height:1.5;text-align:left}@media (max-width: 780px){.canvas-pulmonary-hypertension canvas{width:300px;height:300px}.canvas-container{width:200px;height:400px}.move-icon-wrapper{font-size:1.5rem}.move-icon-wrapper h1{font-size:.8rem}.pulmonary-hypertension-container{grid-template-columns:repeat(auto-fit,minmax(100px,1fr));width:300px}.canvas-treatment-hypertension canvas{width:300px;height:500px}.treatment-hypertension-canvas-content{padding-top:20px;width:100%;height:500px}.treatment-hypertension-content-flex{display:grid;justify-content:center;align-items:center;width:100%}.treatment-hypertension-container{display:grid;height:1200px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}.treatment-hypertension-title{font-size:2rem}.treatment-hypertension-text{width:300px;align-items:center;justify-content:center;font-size:1.5rem}.what-is-hypertension-content-flex{display:grid;justify-content:center;align-items:center;width:100%}.what-is-hypertension-container{display:grid;height:1000px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}.what-is-hypertension-title{width:300px;font-size:2rem}.what-is-hypertension-text{width:300px;justify-content:center;align-items:center;font-size:1.5rem}.canvas-symptoms-hypertension canvas{width:200px;height:400px}.symptoms-hypertension-container{display:grid;height:100%;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));width:350px}.symptoms-hypertension-title{font-size:2rem}.symptoms-hypertension-text{width:100%;align-items:center;justify-content:center;font-size:1.5rem}.symptoms-hypertension-canvas-container{display:flex;justify-content:center;align-items:center;width:100%}.symptoms-hypertension-canvas-content{width:200px;height:300px}.symptoms-hypertension-content-flex{display:grid;justify-content:center;align-items:center;width:100%}.precaution-hypertension-content-flex{flex-direction:column}.precaution-hypertension-canvas-content,.precaution-hypertension-content{max-width:100%}.precaution-hypertension-canvas-content{height:250px}}@media (min-width: 790px){.canvas-pulmonary-hypertension canvas{width:600px;height:500px}.canvas-container{height:100vh}.move-icon-wrapper{font-size:1.5rem}.move-icon-wrapper h1{font-size:1rem}.pulmonary-hypertension-container{grid-template-columns:repeat(auto-fit,minmax(100px,1fr));width:600px}.canvas-treatment-hypertension canvas{width:300px;height:100px}.treatment-hypertension-content-flex{display:flex;justify-content:center;align-items:center;width:100%}.treatment-hypertension-canvas-content{padding-top:20px;width:150px;height:500px}.treatment-hypertension-container{display:flex}.treatment-hypertension-title{font-size:1.8rem}.treatment-hypertension-text{width:600px;align-items:center;justify-content:center;font-size:1.4rem}.what-is-hypertension-content-flex{display:grid;justify-content:center;align-items:center;width:100%}.what-is-hypertension-container{display:grid;height:600px;grid-template-columns:repeat(auto-fit,minmax(600px,1fr))}.what-is-hypertension-title{width:100%;font-size:2rem}.what-is-hypertension-text{width:600px;justify-content:center;align-items:center;font-size:1.5rem}.canvas-symptoms-hypertension canvas{width:200px;height:400px}.symptoms-hypertension-container{display:flex}.symptoms-hypertension-title{font-size:2rem}.symptoms-hypertension-text{width:450px;align-items:center;justify-content:center;font-size:1.5rem}.symptoms-hypertension-canvas-container{display:flex;justify-content:center;align-items:center;width:300px}.symptoms-hypertension-canvas-content{width:250px;height:300px}.symptoms-hypertension-content-flex{display:flex;justify-content:center;align-items:center;width:100%}}@media (min-width: 1024px){.canvas-pulmonary-hypertension canvas{width:700px}.canvas-container{height:100vh;padding-top:5px}.move-icon-wrapper{font-size:1.8rem}.move-icon-wrapper h1{font-size:1.1rem}.pulmonary-hypertension-container{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));width:1000px}.canvas-treatment-hypertension canvas{width:400px;height:300px}.treatment-hypertension-content-flex{display:flex;justify-content:center;align-items:center;width:100%}.treatment-hypertension-canvas-content{padding-top:20px;width:400px;height:500px}.treatment-hypertension-container{display:flex}.treatment-hypertension-title{font-size:1.8rem}.treatment-hypertension-text{width:600px;align-items:center;justify-content:center;font-size:1.4rem}.what-is-hypertension-content-flex{display:grid;justify-content:center;align-items:center;width:100%}.what-is-hypertension-container{display:grid;height:500px;grid-template-columns:repeat(auto-fit,minmax(600px,1fr))}.what-is-hypertension-title{width:100%;font-size:2rem}.what-is-hypertension-text{width:1100px;justify-content:center;align-items:center;font-size:1.5rem}}.title h1{text-shadow:0 0 4px antiquewhite,0 0 8px antiquewhite,0 0 16px antiquewhite;font-size:x-large}.text-container-hypertension-principal{display:flex;justify-content:center;align-items:center}.text-principal-hypertension{background:none;box-shadow:none;padding:0;min-width:0;text-align:center;transform:scale(1);transform-origin:center}.text-principal-hypertension button{font-family:poppins,sans-serif;background-color:#d32f2f;color:#fff;border:none;padding:4px 8px;border-radius:6px;cursor:pointer;font-size:20px;transition:background-color .3s,transform .2s}.text-principal-hypertension button:hover{background-color:#b71c1c;transform:scale(1.1)}.modal-overlay-hypertension-principal{position:fixed;top:80px;left:0;right:100px;bottom:0;background-color:#00000080;display:flex;justify-content:right;align-items:center;z-index:10}.modal-content-hypertension-principal{background-color:#fff;padding:20px;border-radius:8px;max-width:300px;width:auto;position:relative;box-shadow:0 4px 20px #00000026;text-align:center}.modal-close-hypertension-principal{position:absolute;top:.2px;right:.2px;background:none;border:none;font-size:5px;cursor:pointer;color:#555;padding:4px}.modal-close-hypertension-principal:hover{color:#d32f2f}.modal-content-hypertension-principal h3{color:#d32f2f;font-size:14px;font-weight:700;padding:0 8px;line-height:1.4;margin-top:10px}:root{--color-primary: #d32f2f;--color-secundary: #d9d9d9;--color-text: #0d0d0d;--color-button-hover: #A61B34;--color-black: #000;--color-whithe: #ffff}html,body,#root{margin:0;padding:0;width:100%;-webkit-user-select:none;user-select:none;overflow-x:hidden;font-family:Poppins,serif;font-optical-sizing:auto;font-style:normal}canvas{touch-action:none}.canvas-container{width:100%;height:500px;margin:2rem 0}.lungs-hero{display:flex;flex-direction:column;align-items:center;padding:4rem 1rem;background:#fff;text-align:center}.hero-text h1{font-size:3.5rem;color:#d32f2f;margin-bottom:.5rem}.hero-text p{font-size:1.2rem;color:#333}.hero-3d{margin-top:2rem;width:100%;max-width:800px;height:500px;background:#fff}.lungs-info{padding:4rem 2rem;background:#fff;text-align:center;border-top:1px solid #eee;border-bottom:1px solid #eee}.lungs-info h2{font-size:2rem;color:#d32f2f}.lungs-info p{font-size:1.1rem;color:#333;max-width:800px;margin:1rem auto 0;line-height:1.6}.lungs-curiosities{padding:4rem 1rem;background:#fff;display:flex;flex-direction:column;align-items:center}.curiosities-header{text-align:center;margin-bottom:2rem;max-width:800px}.curiosities-header h2{color:#d32f2f;font-size:2rem}.curiosities-header p{font-size:1rem;color:#333}.kyl-grid{display:flex;gap:2rem;justify-content:center;flex-wrap:wrap;padding:1rem;max-width:1200px}.card-scroll{width:300px;height:400px;perspective:1000px;cursor:pointer}.card-rotation{width:100%;height:100%;position:relative;transform-style:preserve-3d;transition:transform .6s}.card-scroll:hover .card-rotation{transform:rotateY(180deg)}.card-inner{width:100%;height:100%;position:relative;transform-style:preserve-3d}.card-curiosity-front,.card-curiosity-back{position:absolute;width:100%;height:100%;backface-visibility:hidden;border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1.5rem;box-shadow:0 4px 8px #0000001a}.card-curiosity-front{background:#fff;color:#d32f2f;border:2px solid #d32f2f}.card-curiosity-front h3{font-size:1.5rem;margin-bottom:1rem}.card-curiosity-front img{width:80%;height:auto;margin-top:1rem}.card-curiosity-back{background:#d32f2f;color:#fff;transform:rotateY(180deg);padding:1.5rem}.card-curiosity-back h3{font-size:1.5rem;margin-bottom:1rem}.card-curiosity-back p{font-size:1rem;line-height:1.5;text-align:center}.scroll-down-btn{background:transparent;border:none;font-size:1rem;color:#d32f2f;font-weight:700;margin-top:2rem;animation:bounce 1.5s infinite alternate;display:flex;flex-direction:column;align-items:center}@keyframes bounce{0%{transform:translateY(0)}to{transform:translateY(10px)}}@media (max-width: 768px){.hero-text h1{font-size:2.2rem}.hero-text p,.lungs-info p,.curiosities-header p{font-size:1rem}.hero-3d{height:350px}.card-scroll{width:280px;height:380px}}.quiz-container{width:100%;height:100vh;max-width:1200px;margin:0 auto;position:relative;overflow:hidden;font-family:Orbitron,sans-serif}.quiz-ui{position:absolute;top:20px;left:20px;color:#fff;font-size:1.2rem;background-color:#f009;padding:10px 18px;border-radius:8px;z-index:100;box-shadow:0 0 10px #ff000080}.quiz-ui h3{margin:4px 0}.quiz-question{position:absolute;top:20px;left:50%;transform:translate(-50%);background-color:#000c;padding:14px 24px;border-radius:10px;color:#fff;font-size:1.3rem;z-index:100;text-align:center;max-width:90%;box-shadow:0 0 12px #ffffff1a}.controls-help{position:absolute;top:20px;right:20px;background-color:#f009;padding:10px 18px;border-radius:8px;color:#fff;z-index:100;text-align:center;font-size:1rem;font-weight:700;box-shadow:0 0 8px #f006}.controls-help p{margin:0}.quiz-controls{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background-color:#000000d9;padding:30px;border-radius:15px;text-align:center;color:#fff;z-index:100;min-width:300px;box-shadow:0 0 15px #ffffff1a}.quiz-controls h2{margin-bottom:20px;font-size:1.5rem}.quiz-controls button{background-color:#e74c3c;color:#fff;border:none;padding:12px 24px;font-size:1.2rem;border-radius:8px;cursor:pointer;transition:all .3s ease;font-weight:700}.quiz-controls button:hover{background-color:#c0392b;transform:scale(1.05)}.death-message,.victory-message{padding:10px 20px;border-radius:8px;margin:15px 0;font-weight:700;font-size:1.2rem;color:#fff}.death-message{background-color:#e74c3c}.victory-message{background-color:#27ae60;animation:pulse 1.5s infinite}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.05)}to{transform:scale(1)}}.quiz-paused{position:absolute;bottom:120px;left:50%;transform:translate(-50%);background-color:#000000e6;padding:20px 30px;border-radius:10px;text-align:center;color:#fff;z-index:100;min-width:300px;box-shadow:0 0 15px #fff3}.quiz-paused p{margin:10px 0 20px;font-weight:700;font-size:1.1rem}.loading-bar{width:100%;height:12px;background-color:#ffffff26;border-radius:6px;overflow:hidden;position:relative}.loading-progress{position:absolute;top:0;left:0;height:100%;background-color:#3498db;animation:loading 5s linear forwards}@keyframes loading{0%{width:0}to{width:100%}}@media (max-width: 768px){.quiz-question,.controls-help,.quiz-controls,.quiz-paused{font-size:.95rem;padding:10px}.quiz-controls button{font-size:1rem;padding:10px 16px}.quiz-ui{font-size:1rem;padding:8px 12px}.controls-help{top:15px;right:15px;font-size:.9rem}}@keyframes pop{0%{transform:scale(1)}50%{transform:scale(1.4)}to{transform:scale(1)}}.score-pop{animation:pop .3s ease-in-out}