@import"https://fonts.googleapis.com/css2?family=Reddit+Mono:wght@200..900&display=swap";@import"https://fonts.googleapis.com/css2?family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&display=swap";html,body{height:100%;margin:0;padding:0;overflow:hidden}body{font-family:DM Mono,sans-serif;font-optical-sizing:auto;font-weight:500;font-style:normal;background-color:#f3f1e5;color:#141414}nav{background:linear-gradient(90deg,#c5ff32 51.04%,#f3f1e5 90%);position:fixed;top:0;left:0;right:0;z-index:1000;height:56px}.navbar-brand,.nav-link{color:#141414}.nav-link{background:#fff;border:1px solid #141414;border-radius:1000px;margin:.25rem;font-size:.875rem;padding:.125rem .375rem}.nav-link:hover{background:#e9faad;color:#141414}.main-content{position:fixed;top:56px;left:0;right:0;bottom:0;display:flex;flex-direction:column;overflow:hidden}.projects-section{flex:1;overflow-y:auto;padding:0;margin:0;height:100%;display:flex;flex-direction:column}.projects-header{position:sticky;top:0;background-color:#f3f1e5;z-index:10;padding:1rem;margin:0;border-bottom:1px solid rgba(0,0,0,.1);box-shadow:0 2px 4px #0000000d}.projects-header .row{margin:0}.projects-header .row:first-child{margin-bottom:1rem}.projects-header .row:last-child{margin-bottom:0}.projects-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1rem;padding:1rem;flex:1;background-color:#f3f1e5}@media (max-width: 768px){.projects-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:.75rem;padding:.75rem}}@media (max-width: 576px){.projects-grid{grid-template-columns:1fr}}.card-canvas{border:1px solid rgb(20,20,20);border-radius:.25rem;box-shadow:.125rem .125rem;width:500px;height:600px}.card-body-canvas{padding:0rem;height:500px}.clicked-btn{background-color:#141414;color:#a6e200}.card-header-canvas{background-color:#d3ff5c}.ace-xcode{background-color:transparent}.card-schule{max-width:300px;min-height:200px;display:flex;flex-direction:column;justify-content:space-between;max-width:500px;height:300px;padding:35px;border:1px solid rgba(255,255,255,.25);border-radius:.25rem;background-color:#ffffff73;box-shadow:.125rem .125rem;box-sizing:border-box;-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px)}.card-test{max-width:800px;max-height:200px;display:flex;flex-direction:column;justify-content:space-between;height:300px;padding-left:5px;border:1px solid rgba(255,255,255,.25);border-radius:20px;background-color:#ffffff73;box-shadow:0 0 10px 1px #00000040;-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px)}.card-text-overlay{display:none}.card-schule:hover .card-text-overlay{display:block;border:1px solid rgba(0,0,0);background-color:#d3ff5c;border:1px solid;box-shadow:.125rem .125rem;border-radius:.25rem}.fltr-buttons{z-index:0;color:#141414;background-color:#fff;transition:all .3s ease 0s;border-radius:.25rem;border:1px solid rgb(20,20,20)}.fltr-buttons:hover{background-color:#d3ff5c;border:1px solid;box-shadow:.125rem .125rem;transform:translate(-.125rem,-.125rem)}.fltr-buttons:focus{z-index:1;outline-offset:.125rem}.fillRemaining{height:calc(100vh - 56px)}.card-progress{border-radius:5px;-webkit-box-shadow:0 1px 2.94px .06px rgba(4,26,55,.16);box-shadow:0 1px 2.94px .06px #041a3729;border:none;margin-bottom:30px;-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.card-progress .card-block{padding:25px}.form-container{font-family:DM Mono,sans-serif;padding:0 20px 20px 0}.form-container .form-horizontal{background:repeating-linear-gradient(45deg,#fff,#fff 10px,#f9f9f9 10px,#f9f9f9 20px);padding:70px 40px 40px;position:relative;border:1px solid;box-shadow:.125rem .125rem;border-radius:.25rem}.form-horizontal .title{color:#222;font-size:80px;font-weight:700;margin:0 0 8px}.form-horizontal .description{color:#222;font-size:18px;font-weight:600;margin:0 0 30px;display:block}.form-horizontal .btn{box-shadow:.125rem .125rem;transition:all .3s ease 0s;background-color:#fff;color:#141414;border:1px solid rgb(20,20,20);width:180px;font-size:18px;font-weight:600;display:inline-block;overflow:hidden;position:relative;z-index:1}.form-horizontal .btn:hover,.form-horizontal .btn:focus{box-shadow:.125rem .125rem;transform:translate(-.125rem,-.125rem);background-color:#d3ff5c;color:#141414;border:1px solid rgb(20,20,20);width:180px;font-size:18px;font-weight:600;display:inline-block;overflow:hidden;position:relative;z-index:1}.form-horizontal .forgot a:hover{color:#222}@media only screen and (max-width:479px){.form-container .form-horizontal{padding-left:20px;padding-right:20px}.form-horizontal .title{font-size:55px}.form-horizontal .description{font-size:16px}.form-horizontal .form-control::placeholder{font-size:14px}.form-horizontal .btn{display:block;margin:0 auto 20px}}.ace_mobile-menu{display:none!important}.landing-page{width:100%;overflow-x:hidden}.hero-section{position:relative;width:100%;height:100vh;background-color:#f3f1e5;background-image:url(/images/landing_bg.png);background-repeat:no-repeat;background-position:center;background-size:cover;font-family:DM Mono,sans-serif;color:#141414}.hero-overlay{background:rgba(243,241,229,.85);width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:2rem;box-sizing:border-box}.hero-content{text-align:center;max-width:800px}.hero-content h1{font-size:4rem;font-weight:700;margin-bottom:1.5rem;line-height:1.2}.hero-subtitle{font-size:1.5rem;font-weight:500;margin-bottom:2.5rem;line-height:1.4}.hero-buttons{display:flex;gap:1rem;justify-content:center}.hero-btn{padding:1rem 2rem;font-weight:600;font-size:1.1rem;border-radius:999px;text-decoration:none;transition:all .3s ease;box-shadow:.125rem .125rem}.hero-btn.primary{background-color:#c5ff32;border:1px solid #141414;color:#141414}.hero-btn.secondary{background-color:transparent;border:1px solid #141414;color:#141414}.hero-btn:hover{transform:translate(-.125rem,-.125rem);box-shadow:.25rem .25rem}.hero-btn.primary:hover{background-color:#e9faad}.features-section{padding:5rem 0;background-color:#fff}.container{max-width:1200px;margin:0 auto;padding:0 2rem}.features-section h2{text-align:center;font-size:2.5rem;margin-bottom:3rem}.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:2rem}.feature-card{padding:2rem;background-color:#f3f1e5;border-radius:1rem;text-align:center;transition:transform .3s ease}.feature-card:hover{transform:translateY(-5px)}.feature-icon{font-size:2.5rem;margin-bottom:1rem}.feature-card h3{font-size:1.5rem;margin-bottom:1rem}.feature-card p{color:#666;line-height:1.6}.how-it-works-section{padding:5rem 0;background-color:#f3f1e5}.how-it-works-section h2{text-align:center;font-size:2.5rem;margin-bottom:3rem}.steps-container{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:2rem;max-width:1000px;margin:0 auto}.step{text-align:center;padding:2rem;background-color:#fff;border-radius:1rem;position:relative}.step-number{width:40px;height:40px;background-color:#c5ff32;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;margin:0 auto 1rem;font-size:1.2rem}.step h3{font-size:1.3rem;margin-bottom:1rem}.step p{color:#666;line-height:1.6}.audience-section{padding:5rem 0;background-color:#fff}.audience-section h2{text-align:center;font-size:2.5rem;margin-bottom:3rem}.audience-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:2rem}.audience-card{padding:2rem;background-color:#f3f1e5;border-radius:1rem;text-align:center;transition:transform .3s ease}.audience-card:hover{transform:translateY(-5px)}.audience-icon{font-size:2.5rem;margin-bottom:1rem}.audience-card h3{font-size:1.5rem;margin-bottom:1rem}.audience-card p{color:#666;line-height:1.6}.cta-section{padding:5rem 0;background-color:#f3f1e5;text-align:center}.cta-section h2{font-size:2.5rem;margin-bottom:1rem}.cta-section p{font-size:1.2rem;color:#666;margin-bottom:2rem}.cta-buttons{display:flex;gap:1rem;justify-content:center}.cta-btn{padding:1rem 2rem;font-weight:600;font-size:1.1rem;border-radius:999px;text-decoration:none;transition:all .3s ease;box-shadow:.125rem .125rem}.cta-btn.primary{background-color:#c5ff32;border:1px solid #141414;color:#141414}.cta-btn.secondary{background-color:transparent;border:1px solid #141414;color:#141414}.cta-btn:hover{transform:translate(-.125rem,-.125rem);box-shadow:.25rem .25rem}.cta-btn.primary:hover{background-color:#e9faad}@media (max-width: 768px){.hero-content h1{font-size:3rem}.hero-subtitle{font-size:1.2rem}.hero-buttons{flex-direction:column}.hero-btn{width:100%}.features-grid,.steps-container,.audience-grid{grid-template-columns:1fr}.container{padding:0 1rem}}@media (max-width: 576px){.hero-content h1{font-size:2.5rem}.hero-subtitle{font-size:1rem}.section h2{font-size:2rem}.feature-card,.step,.audience-card{padding:1.5rem}}.auth-background{position:relative;height:100vh;width:100vw;background-image:url(/assets/auth_page_bg-904bcd0d.png);background-size:cover;background-position:center;display:flex;align-items:center;justify-content:flex-start;padding-left:8vw;overflow:hidden}.auth-left{background:rgba(255,255,255,.95);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:40px;border-radius:16px;box-shadow:0 15px 50px #0003;max-width:400px;width:100%;z-index:2;text-align:center;transition:all .3s ease}.auth-title{font-size:32px;font-weight:700;margin-bottom:20px;text-align:center;color:#2c3e50;transition:all .3s ease}.auth-subtitle{margin-bottom:30px;color:#666;text-align:center;max-width:300px;transition:all .3s ease}.google-button{display:flex;align-items:center;justify-content:center;gap:8px;background-color:#fbbc05;color:#000;border:none;padding:12px 16px;border-radius:6px;width:100%;max-width:300px;margin-bottom:20px;cursor:pointer;font-size:14px;transition:all .3s ease}.google-button:hover{background-color:#f9b000;transform:translateY(-1px)}.google-button:disabled{opacity:.7;cursor:not-allowed;transform:none}.google-icon{width:20px;height:20px}.divider{display:flex;align-items:center;width:100%;max-width:300px;margin:20px 0}.line{flex:1;height:1px;background-color:#ccc}.or-text{margin:0 10px;color:#888;font-size:12px}.form-container{transition:all .3s ease;opacity:1;transform:translateY(0)}.form-container.signup{animation:slideIn .3s ease forwards}@keyframes slideIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.email-input{padding:12px;border:1px solid #ddd;border-radius:6px;width:100%;max-width:300px;margin-bottom:12px;box-sizing:border-box;transition:all .3s ease;font-size:14px}.email-input:focus{border-color:#007bff;outline:none;box-shadow:0 0 0 2px #007bff1a}.email-input:disabled{background-color:#f5f5f5;cursor:not-allowed}.error-message{color:#dc3545;font-size:14px;margin-bottom:12px;text-align:center;animation:fadeIn .3s ease}.email-button{background-color:#007bff;color:#fff;padding:12px 16px;border:none;border-radius:6px;width:100%;max-width:300px;cursor:pointer;font-size:14px;transition:all .3s ease}.email-button:hover{background-color:#0056b3;transform:translateY(-1px)}.email-button:disabled{background-color:#ccc;cursor:not-allowed;transform:none}.terms-text{font-size:12px;color:#666;text-align:center;margin-top:20px;max-width:300px}.toggle-text{margin-top:10px;font-size:14px;text-align:center}.toggle-link{color:#007bff;cursor:pointer;font-weight:500;transition:color .3s ease}.toggle-link:hover{color:#0056b3;text-decoration:underline}.auth-overlay{flex:1;background-size:cover;background-position:center;background-image:url(/assets/auth_page_bg-904bcd0d.png)}@media screen and (max-width: 768px){.auth-background{padding:20px;justify-content:center}.auth-left{width:100%;max-width:100%;padding:30px 20px}.auth-title{font-size:28px}.auth-subtitle{font-size:14px}}.role-select-dropdown{margin-bottom:15px;width:100%;display:flex;flex-direction:column}.role-select-dropdown label{margin-bottom:8px;font-size:.9rem;color:#555}.role-select-dropdown select{width:100%;padding:12px 15px;border-radius:8px;border:1px solid #ddd;background-color:#fff;font-size:1rem;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right 15px center;background-size:15px}.role-select-dropdown select:focus{outline:none;border-color:#6c5ce7;box-shadow:0 0 0 2px #6c5ce733}.role-selection-container{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:25px 0}.role-option{background-color:#fff;border:2px solid #eee;border-radius:12px;padding:20px;text-align:center;cursor:pointer;transition:all .2s ease}.role-option:hover{transform:translateY(-5px);box-shadow:0 10px 20px #0000001a}.role-option.selected{border-color:#6c5ce7;box-shadow:0 10px 20px #6c5ce726}.role-icon{font-size:3rem;margin-bottom:15px}.role-option h3{font-size:1.2rem;margin-bottom:10px;color:#333}.role-option p{font-size:.9rem;color:#666}.back-button{background:none;border:none;color:#6c5ce7;font-size:.95rem;cursor:pointer;padding:8px 15px;margin-top:15px;text-decoration:underline;transition:color .2s}.back-button:hover{color:#5a49c7}@media (max-width: 768px){.role-selection-container{grid-template-columns:1fr}}.gamified-homepage{font-family:DM Sans,sans-serif;color:#333}.dashboard-header{background-color:#f8f9fa;padding:3rem 0;border-bottom:1px solid #eaeaea}.user-info{display:flex;justify-content:center}.user-stats{display:flex;flex-wrap:wrap;gap:2rem;align-items:center;max-width:800px;width:100%}.xp-display{flex:1;min-width:240px}.xp-label{display:block;margin-bottom:.5rem;font-weight:600;font-size:1.1rem}.progress-bar{height:12px;background-color:#e9ecef;border-radius:6px;overflow:hidden;margin-bottom:.5rem}.progress-fill{height:100%;background:linear-gradient(90deg,#6DD5FA,#2196F3);border-radius:6px;transition:width .3s ease}.xp-text{font-size:.9rem;color:#6c757d}.streak-display{display:flex;align-items:center;background-color:#fff;padding:.75rem 1.5rem;border-radius:50px;box-shadow:0 4px 6px #0000000d}.streak-icon{font-size:1.5rem;margin-right:.5rem}.streak-text{font-weight:600;color:#495057}.daily-challenge-section{padding:2rem 0}.daily-challenge-box{background:linear-gradient(135deg,#FFAFBD,#FFC3A0);border-radius:12px;padding:2rem;box-shadow:0 8px 16px #ffafbd33;color:#fff;text-align:center}.challenge-content h2{font-size:1.8rem;margin-bottom:1rem;font-weight:700}.challenge-content p{font-size:1.2rem;margin-bottom:1.5rem;opacity:.9}.project-progress-section{padding:3rem 0}.project-progress-section h2{font-size:1.8rem;margin-bottom:1.5rem;font-weight:600}.filter-bar{display:flex;gap:1rem;margin-bottom:2rem}.filter-btn{padding:.5rem 1.5rem;border:none;background-color:#f8f9fa;border-radius:50px;cursor:pointer;font-weight:500;transition:all .2s ease}.filter-btn:hover:not(.active){background-color:#e9ecef}.homepage-project-wrapper{transition:all .3s ease;margin-bottom:1rem}.project-card{background-color:#fff;border-radius:12px;padding:1.5rem;box-shadow:0 4px 8px #0000000d;display:flex;flex-direction:column;transition:transform .2s ease,box-shadow .2s ease}.project-card:hover:not(.locked){transform:translateY(-5px);box-shadow:0 8px 16px #0000001a}.project-card.locked{opacity:.7}.project-header{display:flex;align-items:center;margin-bottom:1rem}.project-emoji{font-size:1.8rem;margin-right:1rem}.project-title{font-weight:600;font-size:1.2rem}.project-details{margin-bottom:1.5rem;display:flex;justify-content:space-between;font-size:.9rem;color:#6c757d}.project-card .btn{margin-top:auto}.badges-section{padding:3rem 0;background-color:#f8f9fa}.badges-section h2{font-size:1.8rem;margin-bottom:1.5rem;font-weight:600}.badges-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:1.5rem}.badge-card{background-color:#fff;border-radius:12px;padding:1.5rem;box-shadow:0 4px 8px #0000000d;display:flex;flex-direction:column;align-items:center;text-align:center;position:relative;transition:transform .2s ease;aspect-ratio:1;justify-content:center}.badge-card:hover:not(.locked){transform:scale(1.05)}.badge-card.locked{opacity:.6}.badge-icon{font-size:3rem;margin-bottom:1rem}.badge-label{font-weight:600;font-size:.9rem}.badge-lock{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:2rem;z-index:2}.btn{display:inline-block;padding:.75rem 1.5rem;border-radius:50px;text-decoration:none;font-weight:600;text-align:center;cursor:pointer;transition:all .2s ease;border:none}.btn.primary{background-color:#2196f3;color:#fff}.btn.primary:hover{background-color:#0d8aee;transform:translateY(-2px)}.btn.secondary{background-color:#e9ecef;color:#495057}.btn.secondary:hover{background-color:#dee2e6;transform:translateY(-2px)}.btn.disabled{background-color:#e9ecef;color:#adb5bd;cursor:not-allowed}@media (max-width: 768px){.user-stats{flex-direction:column;align-items:stretch;gap:1.5rem}.streak-display{justify-content:center}.project-grid{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}.badges-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}.badge-icon{font-size:2.5rem}}@media (max-width: 480px){.filter-bar{flex-wrap:wrap;justify-content:center}.badges-grid{grid-template-columns:repeat(2,1fr)}.project-grid{grid-template-columns:1fr}}.loading-container{display:flex;justify-content:center;align-items:center;min-height:80vh;padding:2rem}.loading-message{display:flex;flex-direction:column;align-items:center;font-size:1.1rem;color:#6c757d;text-align:center}.loading-icon{font-size:3rem;margin-bottom:1rem;animation:pulse 1.5s infinite}.role-badge{margin-left:15px;display:flex;align-items:center}.role-badge-educator,.role-badge-student{display:inline-block;padding:5px 10px;border-radius:20px;font-size:.85rem;font-weight:600}.role-badge-educator{background-color:#6c5ce7;color:#fff}.role-badge-student{background-color:#00b894;color:#fff}.educator-dashboard{padding:30px 0;background-color:#f8f9fa;border-radius:12px;margin-bottom:30px}.educator-tools{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px;margin-top:20px}.educator-tool-card{background-color:#fff;border-radius:12px;padding:20px;box-shadow:0 4px 12px #00000014;transition:transform .2s,box-shadow .2s;text-align:center}.educator-tool-card:hover{transform:translateY(-5px);box-shadow:0 8px 16px #0000001f}.tool-icon{font-size:2.5rem;margin-bottom:15px}.educator-tool-card h3{font-size:1.2rem;margin-bottom:10px;color:#2d3436}.educator-tool-card p{color:#636e72;margin-bottom:20px;font-size:.9rem}.role-upgrade-section{margin-bottom:30px}.role-upgrade-box{background:linear-gradient(135deg,#6c5ce7 0%,#8e44ad 100%);color:#fff;padding:25px;border-radius:12px;text-align:center;box-shadow:0 6px 16px #6c5ce733}.role-upgrade-box h3{margin-bottom:20px;font-size:1.2rem}.become-educator-btn{background-color:#fff;color:#6c5ce7;border:none;padding:10px 20px;border-radius:6px;font-weight:600;transition:background-color .3s,transform .2s}.become-educator-btn:hover{background-color:#f0f0f0;transform:scale(1.05)}.become-educator-btn:disabled{background-color:#d1d1d1;color:#999;cursor:not-allowed;transform:none}.role-confirmation-modal{background-color:#fff;border-radius:12px;padding:30px;width:90%;max-width:500px;box-shadow:0 10px 25px #0003}.role-confirmation-modal h3{margin-bottom:15px;color:#2d3436;font-size:1.4rem}.role-confirmation-modal p{margin-bottom:25px;color:#636e72;line-height:1.5}.modal-actions{display:flex;justify-content:flex-end;gap:15px}.modal-actions button{padding:10px 20px;border:none;border-radius:6px;cursor:pointer;font-weight:600;transition:background-color .3s}.modal-actions .btn.secondary{background-color:#e1e1e1;color:#333}.modal-actions .btn.secondary:hover{background-color:#d1d1d1}.modal-actions .btn.primary{background-color:#6c5ce7;color:#fff}.modal-actions .btn.primary:hover{background-color:#5a49c7}.modal-actions button:disabled{opacity:.7;cursor:not-allowed}.student-class-join-section{padding:32px 0;background-color:#f9f9f9}.student-class-join-section .container{max-width:1200px;margin:0 auto;padding:0 20px;display:flex;justify-content:center}@media (max-width: 768px){.student-class-join-section{padding:24px 0}.student-class-join-section .container{padding:0 16px}}.student-class-section{padding:32px 0;background-color:#f9f9f9}.student-class-section .container{max-width:1200px;margin:0 auto;padding:0 20px}.student-class-section h2{font-size:1.75rem;margin-bottom:20px;color:#333}.class-actions{display:flex;justify-content:flex-end;margin-bottom:20px}.join-class-btn{background-color:#4a90e2;color:#fff;border:none;border-radius:6px;padding:12px 20px;font-size:1rem;font-weight:600;cursor:pointer;transition:background-color .2s}.empty-classes{background-color:#fff;border-radius:12px;padding:40px 20px;text-align:center;box-shadow:0 4px 12px #00000014}.empty-classes .empty-icon{font-size:3rem;margin-bottom:16px}.empty-classes h3{font-size:1.5rem;margin-bottom:8px;color:#333}.empty-classes p{color:#666;font-size:1rem}.student-classes-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px}.student-class-card{background-color:#fff;border-radius:12px;padding:20px;display:flex;flex-direction:column;box-shadow:0 4px 12px #00000014;transition:transform .2s,box-shadow .2s}.student-class-card:hover{transform:translateY(-5px);box-shadow:0 8px 16px #0000001f}.class-name{font-size:1.3rem;color:#333;margin-bottom:10px}.class-description{color:#666;font-size:.95rem;margin-bottom:15px;line-height:1.5;flex-grow:1}.view-class-btn{background-color:#f0f0f0;color:#333;border:none;border-radius:6px;padding:10px 15px;font-size:.9rem;font-weight:500;cursor:pointer;transition:background-color .2s;text-align:center;margin-top:auto}.classes-loading{display:flex;flex-direction:column;align-items:center;padding:40px 0;text-align:center}.classes-loading .loading-spinner{width:30px;height:30px;border:3px solid rgba(74,144,226,.3);border-radius:50%;border-top-color:#4a90e2;animation:spin 1s ease-in-out infinite;margin-bottom:15px}.classes-loading p{color:#666;font-size:1rem}.modal-content{background:white;border-radius:12px;width:100%;max-width:500px;position:relative;padding:20px;box-shadow:0 4px 20px #00000026}.modal-header{display:flex;justify-content:flex-end;margin-bottom:10px}.close-modal-btn{background:transparent;border:none;font-size:1.5rem;cursor:pointer;color:#666;padding:0;line-height:1}@media (max-width: 768px){.student-class-section{padding:24px 0}.student-class-section .container{padding:0 16px}.student-classes-grid{grid-template-columns:1fr}.modal-content{width:90%;margin:0 20px}}#toast-container{position:fixed;top:20px;right:20px;z-index:9999;display:flex;flex-direction:column;align-items:flex-end;pointer-events:none}.toast{min-width:250px;max-width:350px;margin-bottom:10px;padding:12px 16px;border-radius:8px;background-color:#fff;color:#333;box-shadow:0 3px 10px #0000001a;display:flex;align-items:center;opacity:0;transform:translate(20px);transition:opacity .3s ease,transform .3s ease;pointer-events:auto}.toast.show{opacity:1;transform:translate(0)}.toast-icon{font-size:1.2rem;margin-right:10px}.toast-message{font-size:.95rem;flex:1}.toast-success{background-color:#e7f7ed;border-left:4px solid #28a745}.toast-error{background-color:#fee;border-left:4px solid #dc3545}.toast-warning{background-color:#fff9e6;border-left:4px solid #ffc107}.toast-info{background-color:#e9f5fe;border-left:4px solid #2196F3}@media (max-width: 480px){#toast-container{top:10px;right:10px;left:10px;align-items:stretch}.toast{min-width:auto;max-width:100%}}.project-card-container{width:100%;height:250px;position:relative;transition:transform .3s ease,box-shadow .3s ease;box-shadow:0 4px 8px #0000001a;border-radius:12px;overflow:hidden}.project-card-container:hover{transform:translateY(-6px);box-shadow:0 10px 20px #00000026}.project-card-container.completed{border:2px solid #28a745}.project-card-container.in-progress{border:2px solid #ffc107}.project-card-container.locked{border:2px solid rgba(108,117,125,.3);opacity:.8}.project-card-container.available{border:2px solid #28a745;box-shadow:0 4px 12px #28a74533}.project-card-container.available:hover{transform:translateY(-6px);box-shadow:0 10px 20px #28a74540}.project-card-main{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;position:relative;overflow:hidden;border-radius:10px;cursor:pointer;outline:none}.project-card-container.locked .project-card-main{cursor:not-allowed}.project-card-main:focus{box-shadow:0 0 0 3px #2196f380}.project-title-banner{background-color:#ffffffd9;padding:10px 15px;border-radius:6px;margin-bottom:20px;width:80%;text-align:center;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);transition:opacity .3s ease;z-index:2}.project-title-banner h5{margin:0;font-weight:600;color:#333;font-size:1.1rem}.project-hover-details{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#ffffffe6;display:flex;flex-direction:column;justify-content:center;align-items:center;opacity:0;transition:opacity .3s ease;padding:20px;border-radius:10px;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.project-card-container:hover .project-title-banner{opacity:0}.project-card-container:hover .project-hover-details{opacity:1}.project-hover-content{width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}.project-name{font-size:1.4rem;font-weight:700;margin:0 0 10px;color:#333}.project-status-badge{display:inline-flex;align-items:center;padding:4px 12px;border-radius:20px;margin-bottom:15px}.project-card-container.completed .project-status-badge{background-color:#28a74526;color:#28a745}.project-card-container.in-progress .project-status-badge{background-color:#ffc10726;color:#e0a800}.project-card-container.locked .project-status-badge{background-color:#6c757d26;color:#6c757d}.project-card-container.available .project-status-badge{background-color:#28a74526;color:#28a745}.status-icon{margin-right:6px;font-size:1.1rem}.status-text{font-weight:600;font-size:.85rem}.project-description{margin:0 0 15px;font-size:.9rem;color:#666;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;max-width:90%}.project-xp-badge{display:inline-flex;align-items:center;background-color:#2196f31a;color:#2196f3;padding:4px 12px;border-radius:20px;margin-bottom:15px}.xp-icon{margin-right:6px}.xp-value{font-weight:600;font-size:.9rem}.project-action{margin-top:10px}.action-text{color:#2196f3;font-weight:600;font-size:.9rem;position:relative;transition:all .2s ease}.project-card-container:not(.locked):hover .action-text{transform:translate(3px)}.project-card-container.locked .action-text{color:#6c757d;cursor:not-allowed}.stretched-link:focus{outline:none}.project-card-container:focus-within{box-shadow:0 0 0 3px #2196f380}@media (max-width: 768px){.project-card-container{height:200px}.project-name{font-size:1.2rem}.project-description{-webkit-line-clamp:2;font-size:.85rem}}.project-xp-corner{position:absolute;top:10px;right:10px;background-color:#2196f3d9;color:#fff;padding:4px 10px;border-radius:20px;font-size:.8rem;font-weight:600;z-index:3;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.homepage-project-wrapper{position:relative}.class-join-container{background-color:#fff;border-radius:12px;box-shadow:0 4px 12px #00000014;padding:24px;max-width:500px;width:100%;margin:0 auto}.class-join-header{text-align:center;margin-bottom:24px}.class-join-header h2{font-size:1.75rem;color:#333;margin-bottom:8px}.class-join-header p{color:#666;font-size:1rem}.class-join-form{display:flex;flex-direction:column;gap:20px}.form-group{display:flex;flex-direction:column;gap:8px}.form-group label{font-weight:600;color:#444;font-size:1rem}.form-group input{padding:12px 16px;border:2px solid #ddd;border-radius:6px;font-size:1rem;transition:border-color .2s}.form-group input:focus{border-color:#4a90e2;outline:none}.error-message{background-color:#fff0f0;border-left:4px solid #ff5252;color:#d32f2f;padding:12px 16px;border-radius:4px;font-size:.9rem}.success-message{background-color:#f0fff0;border-left:4px solid #4caf50;color:#2e7d32;padding:12px 16px;border-radius:4px;font-size:.9rem}.join-class-btn{background-color:#4a90e2;color:#fff;border:none;border-radius:6px;padding:14px 20px;font-size:1rem;font-weight:600;cursor:pointer;transition:background-color .2s}.join-class-btn:hover{background-color:#357abd}.join-class-btn:disabled{background-color:#a0c4e4;cursor:not-allowed}@media (max-width: 768px){.class-join-container{padding:20px;max-width:100%}.class-join-header h2{font-size:1.5rem}}.navbar{position:sticky;top:0;width:100%;display:flex;justify-content:center;align-items:center;padding:1rem 0;background-color:#fffffff2;transition:all .3s ease;z-index:1000;box-shadow:0 2px 10px #0000000d}.navbar.scrolled{padding:.75rem 0;box-shadow:0 4px 12px #0000001a}.navbar-container{display:flex;justify-content:space-between;align-items:center;width:100%;max-width:1200px;padding:0 1.5rem}.navbar-logo{display:flex;align-items:center;text-decoration:none;font-weight:700;font-size:1.5rem;color:#333;transition:transform .3s ease}.navbar-logo:hover{transform:scale(1.05)}.logo-text{margin-right:.5rem}.logo-icon{font-size:1.5rem}.navbar-links{display:flex;gap:1.5rem;align-items:center}.nav-link{display:flex;align-items:center;text-decoration:none;color:#555;font-weight:500;padding:.5rem .75rem;border-radius:50px;transition:all .2s ease}.nav-link:hover{background-color:#f5f5f5;color:#2196f3}.nav-icon{font-size:1.2rem;margin-right:.5rem}.navbar-auth{display:flex;align-items:center;gap:1rem}.auth-btn{padding:.6rem 1.2rem;border-radius:50px;font-weight:600;text-decoration:none;transition:all .2s ease}.auth-btn.login{color:#2196f3;background-color:transparent;border:1px solid #2196F3}.auth-btn.login:hover{background-color:#2196f31a}.auth-btn.signup{background-color:#2196f3;color:#fff}.auth-btn.signup:hover{background-color:#0d8aee;transform:translateY(-2px);box-shadow:0 4px 8px #2196f34d}.user-info{display:flex;align-items:center;gap:.75rem;padding:.5rem;border-radius:50px;background-color:#f8f9fa}.user-avatar{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;background:linear-gradient(135deg,#6DD5FA,#2196F3);color:#fff;border-radius:50%;font-weight:600}.user-email{font-size:.9rem;color:#555;max-width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sign-out-btn{background-color:#f8f9fa;border:none;border-radius:50%;width:2.5rem;height:2.5rem;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease}.sign-out-btn:hover{background-color:#e9ecef;transform:rotate(6deg)}.educator-link{background-color:#6c5ce726;border-radius:8px}.educator-link:hover{background-color:#6c5ce740}.user-role-badge{margin-left:8px;font-size:1.1rem;display:inline-flex;align-items:center;justify-content:center;background-color:#6c5ce726;border-radius:50%;width:24px;height:24px}@media (max-width: 768px){.nav-text{display:none}.nav-link{padding:.5rem}.nav-icon{margin-right:0;font-size:1.4rem}.user-email{display:none}.user-info{background-color:transparent;padding:0}}@media (max-width: 480px){.navbar-container{padding:0 1rem}.auth-btn{padding:.5rem 1rem;font-size:.9rem}.logo-text{font-size:1.3rem}}.main-content{height:calc(100vh - 70px);overflow-y:auto;position:relative}html,body,#root{height:100%;margin:0;padding:0;overflow:hidden}.projects-section{font-family:DM Sans,sans-serif;color:#333;padding-bottom:3rem}.container{max-width:1200px;margin:0 auto;padding:0 20px}.projects-filter-section{padding:3rem 0 1.5rem;background-color:#f8f9fa;border-bottom:1px solid #eaeaea}.projects-filter-section h2{text-align:center;font-size:2rem;font-weight:700;margin-bottom:1rem}.filter-description{text-align:center;font-size:1rem;color:#6c757d;margin-bottom:1.5rem}.filter-bar{display:flex;justify-content:center;gap:1rem;margin-bottom:1rem;flex-wrap:wrap}.filter-btn{padding:.5rem 1.5rem;border:none;background-color:#fff;border-radius:50px;cursor:pointer;font-weight:500;transition:all .2s ease;box-shadow:0 2px 4px #0000000d}.filter-btn.active{background-color:#2196f3;color:#fff}.filter-btn:hover:not(.active){background-color:#e9ecef;transform:translateY(-2px)}.projects-grid-section{padding:2rem 0}.project-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.8rem;margin-bottom:2rem}.loading-container,.error-container,.empty-container{display:flex;justify-content:center;padding:3rem 0;text-align:center}.loading-message,.error-message,.empty-message{display:flex;flex-direction:column;align-items:center;font-size:1.1rem;color:#6c757d;max-width:400px}.loading-icon,.error-icon,.empty-icon{font-size:3rem;margin-bottom:1rem}.loading-icon{animation:pulse 1.5s infinite}@keyframes pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.1);opacity:.7}to{transform:scale(1);opacity:1}}.error-message{color:#dc3545}@media (max-width: 768px){.projects-filter-section h2{font-size:1.8rem}.project-grid{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}}@media (max-width: 480px){.projects-filter-section h2{font-size:1.5rem}.filter-bar{flex-wrap:wrap}.project-grid{grid-template-columns:1fr}}.unlock-info{text-align:center;margin-bottom:1.5rem;color:#6c757d}.unlock-info p{font-size:1rem;margin:0}.xp-badge{display:inline-block;background-color:#2196f31a;color:#2196f3;padding:4px 12px;border-radius:20px;font-weight:600;margin-right:10px}.project-wrapper{position:relative}.xp-requirement{position:absolute;bottom:-10px;left:50%;transform:translate(-50%);background-color:#6c757de6;color:#fff;padding:4px 12px;border-radius:20px;font-size:.8rem;font-weight:600;white-space:nowrap;z-index:5}.educator-projects-info{margin-bottom:30px}.info-box{background:linear-gradient(135deg,#6c5ce7 0%,#8e44ad 100%);border-radius:12px;padding:20px 25px;color:#fff;display:flex;align-items:center;box-shadow:0 4px 15px #6c5ce733}.info-icon{font-size:2.5rem;margin-right:20px}.info-content h3{font-size:1.3rem;margin-bottom:8px}.info-content p{margin-bottom:15px;font-size:1rem;line-height:1.5;opacity:.9}.info-content .btn{background-color:#fff;color:#6c5ce7;border:none;padding:8px 16px;border-radius:6px;font-weight:500;font-size:.9rem;text-decoration:none;display:inline-block;transition:all .2s}.info-content .btn:hover{background-color:#ffffffe6;transform:translateY(-2px)}.role-badge{background-color:#6c5ce7;color:#fff;padding:4px 8px;border-radius:4px;margin-right:10px;font-size:1.1rem}.assign-project-btn{margin-top:10px;text-align:center}.assign-project-btn .btn{background-color:#6c5ce7;color:#fff;border:none;padding:8px 16px;border-radius:6px;font-weight:500;font-size:.9rem;text-align:center;cursor:pointer;transition:all .2s;width:100%}.assign-project-btn .btn:hover{background-color:#5a49c7;transform:translateY(-2px)}.code-editor-container{position:relative;width:100%;height:100%;min-height:500px;background-color:#fff;border-radius:8px;box-shadow:0 2px 10px #0000001a;overflow:hidden;display:flex;flex-direction:column}.ace-editor-wrapper{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:calc(100% - 40px);background-color:#fff;border-radius:5px;overflow:hidden}.ace_editor{font-family:DM Mono,monospace!important;font-size:14px!important;line-height:1.5!important;width:100%!important;height:100%!important}.ace_gutter{background-color:#f8f9fa!important;border-right:1px solid #dee2e6!important}.ace_gutter-cell{color:#6c757d!important;padding-left:8px!important}.ace_scroller,.ace_content{background-color:#fff!important}.ace_error{background-color:#dc35451a!important}.ace_warning{background-color:#ffc1071a!important}.ace_selected-word{background-color:#0d6efd1a!important;border:1px solid rgba(13,110,253,.25)!important}.ace_selection{background-color:#0d6efd33!important}.ace_active-line{background-color:#00000008!important}.ace_scrollbar{background-color:#f8f9fa!important}.ace_scrollbar::-webkit-scrollbar{width:8px;height:8px}.ace_scrollbar::-webkit-scrollbar-track{background:#f8f9fa}.ace_scrollbar::-webkit-scrollbar-thumb{background:#dee2e6;border-radius:4px}.ace_scrollbar::-webkit-scrollbar-thumb:hover{background:#adb5bd}@media (max-width: 768px){.ace_editor{font-size:12px!important}.code-editor-container{min-height:300px}}.code-editor-actions{height:40px;display:flex;justify-content:flex-end;align-items:center;padding:0 10px;background-color:#f7f7f7;border-top:1px solid #ddd}.save-code-btn{padding:6px 12px;background-color:#4caf50;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:14px;transition:background-color .3s}.save-code-btn:hover{background-color:#45a049}.save-code-btn:disabled{background-color:#ccc;cursor:not-allowed}.canvas-column{height:100%;display:flex;flex-direction:column;background:white;border-radius:8px;box-shadow:0 1px 3px #0000001a;overflow:hidden}.canvas-header{padding:.75rem 1rem;border-bottom:1px solid #dee2e6;background:#f8f9fa}.canvas-header h5{font-size:.875rem;color:#495057}.canvas-content{flex:1;position:relative;background:#f8f9fa;padding:1rem;display:flex;align-items:center;justify-content:center;overflow:auto}.canvas-wrapper{width:500px;height:500px;background:white;border-radius:4px;box-shadow:0 1px 3px #0000001a;overflow:hidden}.canvas-iframe{width:100%;height:100%;background:white}@media (max-width: 768px){.canvas-wrapper{width:100%;height:100%;max-width:500px;max-height:500px}}.project-details-container{height:100%;display:flex;flex-direction:column;overflow:hidden}.project-header{padding:1rem;border-bottom:1px solid #dee2e6}.project-title{font-size:1.25rem;margin-bottom:.5rem}.project-description{font-size:.875rem;color:#666;margin-bottom:0}.components-container{flex:1;overflow-y:auto;padding:1rem}.component-card{background:white;border-radius:6px;box-shadow:0 1px 3px #0000001a;padding:1rem;margin-bottom:1rem}.component-header{font-size:.875rem;color:#666;margin-bottom:.5rem}.component-title{font-size:1rem;margin-bottom:.75rem}.section-card{background:#f8f9fa;border-radius:4px;margin-bottom:.75rem;overflow:hidden}.section-header{background:none;border:none;padding:.75rem;width:100%;text-align:left;color:#333;font-size:.875rem;transition:background-color .2s}.section-header:hover{background-color:#e9ecef}.section-content{background:white;border-top:1px solid #dee2e6;padding:.75rem}.code-editor-container{background:#f8f9fa;border-radius:4px;padding:.5rem}.code-editor-container textarea{font-family:Fira Code,monospace;font-size:.875rem;line-height:1.4;padding:.5rem;border:1px solid #dee2e6;border-radius:4px;resize:vertical}code{font-family:Fira Code,monospace;font-size:.875rem;padding:.2em .4em;background-color:#f8f9fa;border-radius:3px}.components-container::-webkit-scrollbar{width:6px}.components-container::-webkit-scrollbar-track{background:#f1f1f1;border-radius:3px}.components-container::-webkit-scrollbar-thumb{background:#888;border-radius:3px}.components-container::-webkit-scrollbar-thumb:hover{background:#555}@media (max-width: 768px){.project-header,.component-card{padding:.75rem}.section-header,.section-content{padding:.5rem}}.btn-warning{background-color:#ffc107;border-color:#ffc107;color:#000}.btn-warning:hover{background-color:#e0a800;border-color:#e0a800}.btn-success{background-color:#28a745;border-color:#28a745}.btn-success:hover{background-color:#218838;border-color:#1e7e34}.btn-success:disabled{background-color:#6c757d;border-color:#6c757d}.nav-tabs{border-bottom:2px solid #dee2e6}.nav-tabs .nav-link{border:none;color:#6c757d;padding:.75rem 1.5rem;font-weight:500;transition:all .2s}.nav-tabs .nav-link:hover{color:#495057;border:none;border-bottom:2px solid #ffc107}.nav-tabs .nav-link.active{color:#000;background:none;border:none;border-bottom:2px solid #ffc107}.global-actions{display:flex;gap:1rem;margin-bottom:1.5rem}.global-actions .btn{padding:.5rem 1rem;font-weight:500}.code-playground-container{height:100vh;width:100%;overflow:hidden;padding:1rem;background-color:#f8f9fa}.code-playground-grid{display:grid;grid-template-columns:1fr 1fr 1fr;height:calc(100vh - 2rem);gap:1rem}.project-details-column,.code-editor-column,.canvas-column{display:flex;flex-direction:column;height:100%;background-color:#fff;border-radius:8px;box-shadow:0 2px 10px #0000001a;overflow:hidden}.column-header{padding:.75rem 1rem;border-bottom:1px solid #dee2e6;background-color:#f8f9fa}.column-header h5{margin:0;font-size:1rem;font-weight:600;color:#333}.column-content{flex:1;overflow:auto;position:relative}.loading-container,.error-container{display:flex;justify-content:center;align-items:center;height:100vh;width:100%}.loading-message,.error-message{font-family:DM Mono,sans-serif;font-size:1.2rem;padding:2rem;border-radius:8px;text-align:center}.loading-message{color:#666;background-color:#f8f9fa}.error-message{color:#dc3545;background-color:#dc35451a}@media (max-width: 1200px){.code-playground-grid{grid-template-columns:1fr 1fr}.canvas-column{grid-column:1 / -1;height:50vh}}@media (max-width: 768px){.code-playground-container{padding:.5rem}.code-playground-grid{grid-template-columns:1fr;height:calc(100vh - 1rem);gap:.5rem}.project-details-column,.code-editor-column,.canvas-column{height:33vh}}.project-details-column{display:flex;flex-direction:column;height:100%;background-color:#fff;border-radius:8px;box-shadow:0 2px 10px #0000001a;overflow:auto;position:relative;padding-bottom:90px}.complete-project-btn{position:fixed;bottom:20px;width:calc(33.33% - 1.5rem);padding:12px 20px;margin:0 .75rem;background:linear-gradient(135deg,#4CAF50,#45a049);color:#fff;border:none;border-radius:8px;font-size:16px;font-weight:600;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 6px #0000001a;z-index:100}@media (max-width: 1200px){.complete-project-btn{width:calc(50% - 1.5rem)}}@media (max-width: 768px){.complete-project-btn{width:calc(100% - 1.5rem)}}.complete-project-btn:hover{background:linear-gradient(135deg,#45a049,#3d8b40);transform:translateY(-2px);box-shadow:0 6px 8px #00000026}.complete-project-btn:disabled{background:linear-gradient(135deg,#cccccc,#b3b3b3);cursor:not-allowed;transform:none;box-shadow:none}.complete-project-btn:active{transform:translateY(0);box-shadow:0 2px 4px #0000001a}.classroom-dashboard{padding:30px;max-width:1200px;margin:0 auto;overflow-y:auto}.classroom-header{margin-bottom:30px;text-align:center}.classroom-header h1{font-size:2.2rem;color:#333;margin-bottom:8px}.classroom-header p{font-size:1.1rem;color:#666}.dashboard-stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:20px;margin-bottom:30px}.stat-card{background-color:#fff;border-radius:12px;padding:20px;display:flex;align-items:center;box-shadow:0 4px 12px #00000014;transition:transform .2s,box-shadow .2s}.stat-card:hover{transform:translateY(-5px);box-shadow:0 8px 16px #0000001f}.stat-card[onClick]{cursor:pointer;position:relative}.stat-card[onClick]:after{content:"↓";position:absolute;bottom:10px;right:10px;font-size:14px;color:#6c5ce7;opacity:.7}.stat-card[onClick]:hover:after{opacity:1}.stat-icon{font-size:2.5rem;margin-right:20px}.stat-info h3{font-size:1rem;color:#666;margin-bottom:5px}.stat-value{font-size:1.8rem;font-weight:700;color:#333}.dashboard-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:25px}.dashboard-section{background-color:#fff;border-radius:12px;padding:25px;box-shadow:0 4px 12px #00000014;display:flex;flex-direction:column;scroll-margin-top:20px}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.section-header h2{font-size:1.4rem;color:#333}.add-btn{background-color:#6c5ce7;color:#fff;border:none;padding:8px 15px;border-radius:6px;cursor:pointer;font-size:.9rem;transition:background-color .2s}.add-btn:hover{background-color:#5a49c7}.view-all-btn{background:none;border:none;color:#6c5ce7;font-size:.9rem;text-decoration:underline;cursor:pointer}.view-all-btn:hover{color:#5a49c7}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 20px;text-align:center;background-color:#f8f9fa;border-radius:8px;flex-grow:1}.empty-state h3{font-size:1.2rem;color:#333;margin-bottom:10px}.empty-state p{color:#666;margin-bottom:20px;max-width:250px}.primary-btn{background-color:#6c5ce7;color:#fff;border:none;padding:10px 20px;border-radius:6px;cursor:pointer;font-weight:500;transition:background-color .2s,transform .1s}.primary-btn:hover{background-color:#5a49c7;transform:translateY(-2px)}.resources-section{grid-column:span 2}.resources-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.resource-card{background-color:#f8f9fa;border-radius:10px;padding:20px;text-align:center;transition:transform .2s,box-shadow .2s;cursor:pointer}.resource-card:hover{transform:translateY(-5px);box-shadow:0 8px 15px #0000001a}.resource-icon{font-size:2.5rem;margin-bottom:15px}.resource-card h3{font-size:1.1rem;color:#333;margin-bottom:8px}.resource-card p{font-size:.9rem;color:#666}.classroom-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;height:50vh}.scroll-top-btn{position:fixed;bottom:20px;right:20px;width:40px;height:40px;background-color:#6c5ce7;color:#fff;border:none;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 4px 8px #0003;transition:all .2s;z-index:10}.scroll-top-btn:hover{transform:translateY(-3px);background-color:#5a49c7}@media (max-width: 900px){.dashboard-grid{grid-template-columns:1fr}.resources-section{grid-column:span 1}.resources-grid{grid-template-columns:1fr}}@media (max-width: 600px){.classroom-dashboard{padding:15px}.dashboard-stats{grid-template-columns:1fr}}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000}.modal-content{background-color:#fff;border-radius:12px;width:90%;max-width:500px;box-shadow:0 5px 20px #0003;animation:modalAppear .3s ease;overflow:hidden}@keyframes modalAppear{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:20px 25px;border-bottom:1px solid #eee}.modal-header h2{margin:0;font-size:1.5rem;color:#333}.close-modal-btn{background:none;border:none;font-size:1.8rem;cursor:pointer;color:#999;transition:color .2s}.close-modal-btn:hover{color:#333}form{padding:20px 25px}.form-group{margin-bottom:20px}.form-group label{display:block;margin-bottom:8px;font-weight:500;color:#333}.form-group .required{color:#e74c3c}.form-group input,.form-group textarea{width:100%;padding:12px 15px;border:1px solid #ddd;border-radius:6px;font-size:1rem;transition:border-color .2s}.form-group input:focus,.form-group textarea:focus{outline:none;border-color:#6c5ce7}.form-group input:disabled,.form-group textarea:disabled{background-color:#f8f9fa;cursor:not-allowed}.form-error{color:#e74c3c;font-size:.9rem;margin-top:5px}.form-feedback{padding:12px 15px;border-radius:6px;margin-bottom:20px;font-size:.95rem}.form-feedback.success{background-color:#d4edda;color:#155724;border:1px solid #c3e6cb}.form-feedback.error{background-color:#f8d7da;color:#721c24;border:1px solid #f5c6cb}.form-actions{display:flex;justify-content:flex-end;gap:15px}.cancel-btn{padding:10px 20px;background-color:#f8f9fa;border:1px solid #ddd;border-radius:6px;font-size:.95rem;cursor:pointer;transition:background-color .2s}.submit-btn{padding:10px 20px;background-color:#6c5ce7;color:#fff;border:none;border-radius:6px;font-size:.95rem;cursor:pointer;transition:background-color .2s}.cancel-btn:hover:not(:disabled){background-color:#e9ecef}.submit-btn:hover:not(:disabled){background-color:#5a49c7}.cancel-btn:disabled,.submit-btn:disabled{opacity:.7;cursor:not-allowed}.classes-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:20px;max-height:400px;overflow-y:auto;padding-right:10px;margin-right:-10px;scrollbar-width:thin;scrollbar-color:rgba(108,92,231,.5) #f0f0f0;transition:max-height .3s ease}.classes-list.expanded{max-height:none;overflow-y:visible}.view-all-container{display:flex;justify-content:center;margin-top:15px}.view-all-classes-btn{background-color:#f0f0f0;border:none;border-radius:20px;padding:8px 20px;color:#6c5ce7;font-size:.9rem;font-weight:500;cursor:pointer;transition:all .2s;display:flex;align-items:center}.view-all-classes-btn:after{content:"↓";margin-left:6px;font-size:.9rem}.view-all-classes-btn:hover{background-color:#e0e0e0;transform:translateY(-2px)}.classes-list::-webkit-scrollbar{width:8px}.classes-list::-webkit-scrollbar-track{background:#f0f0f0;border-radius:10px}.classes-list::-webkit-scrollbar-thumb{background-color:#6c5ce780;border-radius:10px}.classes-list::-webkit-scrollbar-thumb:hover{background-color:#6c5ce7b3}.dashboard-section.classes-section .empty-state{max-height:400px}.class-card{background-color:#fff;border-radius:10px;padding:20px;box-shadow:0 4px 12px #00000014;transition:transform .2s,box-shadow .2s;display:flex;flex-direction:column}.class-card:hover{transform:translateY(-5px);box-shadow:0 8px 16px #0000001f}.class-card h3{font-size:1.2rem;margin:0 0 8px;color:#333}.class-card p{color:#666;font-size:.9rem;margin:0 0 15px;flex-grow:1}.class-stats{display:flex;justify-content:space-between;margin-bottom:15px;font-size:.85rem;color:#777}.view-class-btn{background-color:#f0f0f0;border:none;border-radius:6px;padding:8px 15px;color:#333;font-weight:500;cursor:pointer;transition:background-color .2s}.view-class-btn:hover{background-color:#e0e0e0}.section-header-info{display:flex;flex-direction:column;align-items:flex-start}.section-counter{font-size:.9rem;color:#666;margin-top:2px}.scroll-hint{font-size:.85rem;color:#6c5ce7;margin-bottom:10px;display:flex;align-items:center;opacity:.8}.scroll-hint:before{content:"↓";margin-right:5px;font-size:1rem}@keyframes pulse{0%{opacity:.6}50%{opacity:1}to{opacity:.6}}.scroll-hint{animation:pulse 1.5s infinite ease-in-out}.class-assignments{background-color:#f8f9fa;border-radius:8px;padding:12px;margin-bottom:15px}.class-assignments h4{font-size:.95rem;color:#333;margin:0 0 8px;display:flex;align-items:center;justify-content:space-between}.class-assignments h4 span{font-size:.8rem;color:#666;font-weight:400}.assignments-list{max-height:120px;overflow-y:auto;margin-right:-5px;padding-right:5px;scrollbar-width:thin;scrollbar-color:rgba(108,92,231,.3) #f8f9fa}.assignments-list::-webkit-scrollbar{width:6px}.assignments-list::-webkit-scrollbar-track{background:#f8f9fa;border-radius:10px}.assignments-list::-webkit-scrollbar-thumb{background-color:#6c5ce74d;border-radius:10px}.assignments-list::-webkit-scrollbar-thumb:hover{background-color:#6c5ce780}.assignment-item{display:flex;justify-content:space-between;align-items:center;padding:6px 8px;border-radius:4px;background-color:#fff;margin-bottom:6px;font-size:.85rem;box-shadow:0 1px 3px #0000000d}.assignment-item:last-child{margin-bottom:0}.assignment-project{font-weight:500;color:#333}.assignment-due-date{color:#6c5ce7;font-size:.8rem}.no-assignments{color:#777;font-size:.85rem;font-style:italic;text-align:center;padding:10px 0}.class-card{position:relative}.class-actions{display:flex;gap:10px}.assign-project-btn{flex:1;background-color:#6c5ce7;border:none;border-radius:6px;padding:8px 15px;color:#fff;font-weight:500;cursor:pointer;transition:background-color .2s;font-size:.85rem}.assign-project-btn:hover{background-color:#5a49c7}.view-class-btn{flex:1}.project-select{width:100%;padding:12px 15px;border:1px solid #ddd;border-radius:6px;font-size:1rem;transition:border-color .2s;background-color:#fff;color:#333;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23666666%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E);background-repeat:no-repeat;background-position:right 15px center;background-size:12px;cursor:pointer}.project-select:focus{outline:none;border-color:#6c5ce7}.project-select:disabled{background-color:#f8f9fa;cursor:not-allowed}input[type=date]{cursor:pointer}@media (max-width: 600px){.class-actions{flex-direction:column}.assignment-item{flex-direction:column;align-items:flex-start}.assignment-due-date{margin-top:4px}}.class-invitation{background-color:#f0f4ff;border-radius:6px;padding:10px 15px;margin-bottom:15px;display:flex;align-items:center;flex-wrap:wrap;gap:8px}.invitation-label{font-size:.85rem;font-weight:500;color:#555}.invitation-code{font-family:monospace;font-size:.95rem;letter-spacing:1px;color:#6c5ce7;font-weight:600;background-color:#fff;padding:4px 8px;border-radius:4px;border:1px dashed #6c5ce7}.copy-code-btn{background:none;border:none;color:#6c5ce7;font-size:1rem;cursor:pointer;padding:2px 5px;border-radius:4px;transition:transform .2s}.class-assignments-container{max-width:1200px;margin:0 auto;padding:30px 20px}.class-assignments-header{margin-bottom:30px;padding-bottom:20px;border-bottom:1px solid #eee}.header-content{display:flex;flex-direction:column;position:relative}.back-btn{position:absolute;left:0;top:0;background:none;border:none;color:#6c5ce7;font-size:.95rem;font-weight:500;cursor:pointer;padding:5px 0;display:flex;align-items:center}.back-btn:hover{color:#5a49c7}.class-assignments-header h1{font-size:2rem;color:#333;margin:0 0 10px;text-align:center}.class-description{text-align:center;color:#666;margin:0;font-size:1.1rem}.class-management-container{display:grid;grid-template-columns:1fr 1fr;gap:30px}.assignments-section,.students-section{background-color:#fff;border-radius:12px;padding:25px;box-shadow:0 4px 12px #00000014}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:25px}.section-header h2{font-size:1.4rem;color:#333;margin:0}.assignments-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px}.assignment-card{background-color:#f8f9fa;border-radius:10px;padding:20px;box-shadow:0 2px 8px #0000000f;position:relative}.assignment-card-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:15px}.assignment-card h3{font-size:1.2rem;color:#333;margin:0;padding-right:20px}.remove-btn{background:none;border:none;color:#999;font-size:1.4rem;cursor:pointer;padding:0;line-height:1}.remove-btn:hover{color:#e74c3c}.assignment-due-date{color:#6c5ce7;font-size:.9rem;font-weight:500;margin-bottom:15px}.assignment-stats{display:flex;justify-content:space-between;background-color:#fff;border-radius:8px;padding:10px}.stat{text-align:center;flex:1}.stat-value{display:block;font-size:1.2rem;font-weight:700;color:#333;margin-bottom:2px}.stat-label{font-size:.75rem;color:#666}.students-grid{display:grid;gap:15px;max-height:500px;overflow-y:auto;padding-right:10px}.student-card{background-color:#f8f9fa;border-radius:10px;padding:15px;display:flex;justify-content:space-between;align-items:center;box-shadow:0 2px 8px #0000000f}.student-info{display:flex;align-items:center}.student-avatar{width:40px;height:40px;background-color:#6c5ce7;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.2rem;font-weight:700;margin-right:15px}.student-details h3{font-size:1.1rem;color:#333;margin:0 0 5px}.student-details p{font-size:.85rem;color:#666;margin:0}.remove-student-btn{background-color:#f8d7da;color:#721c24;border:none;border-radius:6px;padding:6px 12px;font-size:.85rem;cursor:pointer;transition:background-color .2s}.remove-student-btn:hover{background-color:#f5c6cb}.class-assignments-loading,.class-assignments-error{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:400px;text-align:center;padding:20px}.loading-spinner{width:40px;height:40px;border:4px solid rgba(108,92,231,.3);border-radius:50%;border-top-color:#6c5ce7;animation:spin 1s ease-in-out infinite;margin-bottom:20px}.class-assignments-error h3{font-size:1.4rem;color:#333;margin:0 0 10px}.class-assignments-error p{color:#666;margin:0 0 20px;max-width:400px}.modal-empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:30px 20px;text-align:center}.modal-empty-state .empty-icon{font-size:3rem;margin-bottom:15px}.modal-empty-state h3{font-size:1.2rem;color:#333;margin:0 0 10px}.modal-empty-state p{color:#666;margin:0 0 20px}.primary-btn{background-color:#6c5ce7;color:#fff;border:none;padding:10px 20px;border-radius:6px;cursor:pointer;font-weight:500;transition:background-color .2s,transform .1s;font-size:.95rem}.primary-btn:hover:not(:disabled){background-color:#5a49c7;transform:translateY(-2px)}.primary-btn:disabled{background-color:#a8a4e0;cursor:not-allowed}.student-select{width:100%;padding:12px 15px;border:1px solid #ddd;border-radius:6px;font-size:1rem;transition:border-color .2s;background-color:#fff;color:#333;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23666666%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E);background-repeat:no-repeat;background-position:right 15px center;background-size:12px;cursor:pointer}.student-select:focus{outline:none;border-color:#6c5ce7}.student-select:disabled{background-color:#f8f9fa;cursor:not-allowed}@media (max-width: 900px){.class-management-container,.assignments-grid{grid-template-columns:1fr}}@media (max-width: 600px){.class-assignments-container{padding:20px 15px}.class-assignments-header h1{font-size:1.8rem;margin-top:30px}.assignment-stats{flex-direction:column;gap:10px}.student-card{flex-direction:column;align-items:flex-start}.student-actions{margin-top:15px;align-self:stretch}.remove-student-btn{width:100%}}.invitation-code-container{margin-top:25px;display:flex;flex-direction:column;align-items:center;background-color:#f0f4ff;border-radius:10px;padding:20px;box-shadow:0 2px 8px #0000000d}.invitation-code-box{display:flex;align-items:center;margin-bottom:15px;background-color:#fff;padding:15px 20px;border-radius:8px;box-shadow:0 2px 4px #0000000d;width:100%;max-width:500px}.invitation-code-label{font-weight:600;color:#333;margin-right:12px;font-size:.95rem}.invitation-code{font-family:monospace;font-size:1.1rem;letter-spacing:1px;color:#6c5ce7;font-weight:600;flex-grow:1;text-align:center;background-color:#f8f9fa;padding:8px 12px;border-radius:4px;border:1px dashed #6c5ce7}.copy-code-btn{background:none;border:none;color:#6c5ce7;font-size:1.2rem;padding:5px 8px;margin-left:10px;cursor:pointer;transition:transform .2s;border-radius:4px}.copy-code-btn:hover{transform:scale(1.1);background-color:#f0f0f0}.invitation-instructions{font-size:.9rem;color:#555;text-align:center;max-width:500px;line-height:1.5}.regenerate-code-btn{background-color:#f8f9fa;color:#333;border:1px solid #ddd;padding:8px 16px;border-radius:6px;font-size:.9rem;font-weight:500;cursor:pointer;transition:background-color .2s,transform .1s;display:flex;align-items:center}.regenerate-code-btn:hover{background-color:#e9ecef;transform:translateY(-2px)}@media (max-width: 600px){.invitation-code-box{flex-direction:column}.invitation-code-label{margin-right:0;margin-bottom:8px}.invitation-code{margin-bottom:8px;width:100%}.copy-code-btn{margin-left:0}}.student-class-dashboard{width:100%;max-width:1200px;margin:0 auto;padding:20px;font-family:Arial,sans-serif}.class-header{background-color:#f8f9fa;border-radius:8px;padding:20px;margin-bottom:20px;box-shadow:0 2px 4px #0000001a}.header-content{position:relative;text-align:center}.back-btn{background-color:#f1f1f1;border:none;padding:8px 12px;border-radius:4px;cursor:pointer;margin-bottom:10px;font-weight:700}.back-btn:hover{background-color:#e0e0e0}.class-header h1{margin:10px 0;color:#333}.class-meta{margin-top:10px;color:#666}.instructor-info,.created-date{display:flex;align-items:center;gap:5px}.label{font-weight:600;color:#555}.dashboard-content{display:flex;flex-direction:column;gap:20px}.assigned-projects-section{background-color:#fff;border-radius:8px;padding:20px;box-shadow:0 2px 4px #0000001a}h2{margin-top:0;color:#555;border-bottom:1px solid #eee;padding-bottom:10px;margin-bottom:20px}.projects-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px}.project-card{background-color:#f8f9fa;border-radius:10px;padding:20px;box-shadow:0 2px 8px #0000000f}.project-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:15px}.project-header h3{font-size:1.2rem;color:#333;margin:0}.status-badge{display:inline-block;padding:4px 8px;border-radius:4px;font-size:.8rem;font-weight:600}.status-badge.not-started{background-color:#f8d7da;color:#721c24}.status-badge.in-progress{background-color:#fff3cd;color:#856404}.status-badge.completed{background-color:#d4edda;color:#155724}.project-due-date{margin-bottom:15px;font-size:.9rem}.project-actions{margin-top:10px}.start-project-btn{width:100%;background-color:#4a90e2;color:#fff;border:none;border-radius:5px;padding:10px 0;font-size:.95rem;font-weight:500;cursor:pointer;transition:background-color .2s}.start-project-btn:hover{background-color:#357abd}.start-project-btn.loading{background-color:#a0c0e7;cursor:not-allowed;position:relative}.start-project-btn.loading:after{content:"";position:absolute;width:20px;height:20px;top:50%;right:10px;margin-top:-10px;border:2px solid rgba(255,255,255,.5);border-radius:50%;border-top-color:#fff;animation:spin 1s ease-in-out infinite}.assignments-list{display:flex;flex-direction:column;gap:15px}.assignment-item{background-color:#f8f9fa;border-radius:10px;padding:20px;display:flex;justify-content:space-between;align-items:center;gap:20px}.assignment-content{flex:1}.assignment-content h3{font-size:1.1rem;color:#333;margin:0 0 10px}.assignment-description{font-size:.9rem;color:#666;margin:0 0 10px}.assignment-due-date{font-size:.85rem;color:#4a90e2;font-weight:500}.view-assignment-btn{background-color:transparent;border:1px solid #4a90e2;color:#4a90e2;border-radius:5px;padding:8px 15px;font-size:.9rem;font-weight:500;cursor:pointer;transition:all .2s}.view-assignment-btn:hover{background-color:#4a90e2;color:#fff}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 20px;text-align:center;background-color:#f8f9fa;border-radius:8px;min-height:200px}.empty-icon{font-size:3rem;margin-bottom:15px}.empty-state h3{font-size:1.2rem;color:#333;margin:0 0 10px}.empty-state p{color:#666;margin:0 0 20px;max-width:250px}.class-dashboard-loading,.class-dashboard-error{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:400px;text-align:center;padding:20px}.loading-spinner{width:40px;height:40px;border:4px solid rgba(74,144,226,.3);border-radius:50%;border-top-color:#4a90e2;animation:spin 1s ease-in-out infinite;margin-bottom:20px}@keyframes spin{to{transform:rotate(360deg)}}.error-icon{font-size:3rem;margin-bottom:15px}.class-dashboard-error h3{font-size:1.4rem;color:#333;margin:0 0 10px}.class-dashboard-error p{color:#666;margin:0 0 20px;max-width:400px}.class-dashboard-error .back-btn{position:static;background-color:#4a90e2;color:#fff;padding:10px 20px;border-radius:5px}.class-dashboard-error .back-btn:hover{background-color:#357abd}@media (max-width: 768px){.student-class-dashboard{padding:20px 15px}.class-header h1{font-size:1.8rem;margin-top:30px}.class-meta{flex-direction:column;gap:10px}.projects-grid{grid-template-columns:1fr}.assignment-item{flex-direction:column;align-items:flex-start}.assignment-actions{align-self:stretch;margin-top:15px}.view-assignment-btn{width:100%}}.debug-btn{background-color:#f0ad4e;color:#fff;border:none;border-radius:4px;padding:5px 10px;font-size:.8rem;cursor:pointer;transition:background-color .2s}.debug-btn:hover{background-color:#ec971f}.api-details{background-color:#f8f9fa;border:1px solid #ddd;border-radius:6px;padding:15px;margin-bottom:20px;font-family:monospace;font-size:.9rem;overflow-x:auto;white-space:pre-wrap}.api-details p{margin:5px 0}p{line-height:1.5}.user-progress-banner{background-color:#f0f8ff;border-radius:8px;padding:15px 20px;margin-bottom:20px;box-shadow:0 2px 4px #0000000d;border-left:5px solid #4a90e2;animation:fadeIn .3s ease}@keyframes fadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.progress-info{display:flex;justify-content:space-between;align-items:center}.xp-level{display:flex;align-items:center;gap:10px}.xp-icon,.streak-icon{font-size:1.3rem}.xp-value{font-weight:600;color:#4a90e2;font-size:1.1rem}.level-badge{background-color:#4a90e2;color:#fff;padding:4px 10px;border-radius:12px;font-size:.85rem;font-weight:600}.streak-display{display:flex;align-items:center;gap:5px;color:#ff7043;font-weight:600}:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}