body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;line-height:1.6;transition:background-color .3s ease}.app-content{max-width:1200px;margin:0 auto;padding:2rem}.hero{text-align:center;padding:3rem 1rem;background:#ffffff80;border-radius:12px;margin-bottom:2rem}.hero h1{margin-bottom:1rem;font-size:2.5em}.cta-button{margin-top:1rem;padding:.75rem 1.5rem;font-size:1rem;background:#667eea;color:#fff;border:none;border-radius:6px;cursor:pointer;transition:transform .2s}.cta-button:hover{transform:translateY(-2px)}.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:2rem;margin-top:2rem}.feature-card{padding:1.5rem;background:#fff;border-radius:12px;box-shadow:0 2px 10px #0000001a;transition:transform .2s}.feature-card:hover{transform:translateY(-5px)}.feature-card h3{margin-bottom:.75rem;color:#667eea}.login{background-color:var(--secondcolor)!important;padding:7px 22px;border-radius:20px;color:#fff!important}.login:hover{background-color:#87ceeb!important;color:#fff!important;border-color:#007bff!important}#notfound{position:relative;height:100vh;background:#f6f6f6;margin-top:0}.notfound .notfound-404 h1{font-family:roboto,sans-serif;position:absolute;left:50%;top:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);font-size:165px;font-weight:700;margin:0;color:#262626;text-transform:uppercase}#notfound .notfound{position:absolute;left:50%;top:40%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.notfound{max-width:767px;width:100%;line-height:1.4;padding:110px 40px;text-align:center;background:#fff;-webkit-box-shadow:0 15px 15px -10px rgba(0,0,0,.1);box-shadow:0 15px 15px -10px #0000001a}.notfound .notfound-404{position:relative;height:180px}.notfound .notfound-404 h1>span{color:#00b7ff}.notfound h2{font-family:roboto,sans-serif;font-size:22px;font-weight:400;text-transform:uppercase;color:#151515;margin-top:0;margin-bottom:25px}.topbar{background:#fff;box-shadow:0 2px 10px #0000001a}.topbar-container{max-width:1400px;margin:0 auto;display:flex;align-items:center;justify-content:end;gap:1.5rem;flex-wrap:wrap}.topbar-brand h1{margin:0;font-size:1.5rem;font-weight:700;background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.control-group{display:flex;align-items:center;gap:.75rem}.control-label{font-weight:600;color:#333;font-size:.875rem}.font-controls{display:flex;align-items:center;gap:.5rem;background:#f8f9fa;padding:.25rem;border-radius:8px}.control-btn{background:#fff;border:1px solid #dee2e6;padding:.01rem .25rem;cursor:pointer;font-weight:700;border-radius:6px;transition:all .2s}.control-btn:hover{background:#e9ecef;transform:translateY(-1px)}.font-size-value{min-width:45px;text-align:center;font-size:.875rem;font-weight:600;color:#495057}.font-size-select{padding:.01rem .25rem;border:1px solid #dee2e6;border-radius:6px;background:#fff;cursor:pointer}.color-controls{display:flex;align-items:center;gap:.5rem}.color-btn{width:30px;height:30px;border-radius:50%;border:2px solid transparent;cursor:pointer;transition:all .2s;box-shadow:0 1px 3px #0000001a}.color-btn:hover{transform:scale(1.1);box-shadow:0 2px 5px #0003}.color-btn.active{border-color:#333;transform:scale(1.1);box-shadow:0 0 0 2px #0000001a}.color-picker{width:36px;height:36px;border:2px solid #dee2e6;border-radius:50%;cursor:pointer;padding:2px}.reset-btn{background:#279aff;color:#fff;border:none;padding:.2rem .5rem;border-radius:6px;cursor:pointer;transition:all .2s;font-weight:400}.reset-btn:hover{background:#5a6268;transform:translateY(-1px)}.skip-to-content:focus{top:0;left:0;background:#000;color:#fff;padding:10px}@media (max-width: 768px){.topbar-container{flex-direction:column;align-items:stretch}.control-group{justify-content:space-between}.font-controls,.color-controls{flex-wrap:wrap}}body{margin:0;transition:background-color .3s ease}html{font-size:16px;transition:font-size .2s ease}