.top-bar{position:absolute;width:100%;height:4rem;top:0;left:0;right:0;display:grid;grid-template-columns:repeat(7,1fr) .3fr;grid-template-rows:1fr;grid-column-gap:0px;grid-row-gap:0px;margin:0;padding:0}.top-bar .light{background-color:var(--light-background-color)}.top-bar .dark{background-color:var(--dark-background-color)}.top-bar-flex-item{display:flex;align-items:center;justify-content:center;font-size:1.5rem;text-align:center}.top-bar-flex-item .light{background-color:var(--light-background-color);color:#000}.top-bar-flex-item .dark{background-color:var(--dark-background-color);color:#fff}.logo-text{font-weight:700;font-size:1.2rem}.logo-text .light{color:var(--light-text-hover-color)}.logo-text .dark{color:var(--dark-text-hover-color)}.logo-text:hover{transition:.3s;cursor:pointer;-webkit-user-select:none;user-select:none}.logo-text.light:hover{color:var(--light-text-hover-color)}.logo-text.dark:hover{color:var(--dark-text-hover-color)}.top-bar-button{background-color:transparent;border:none;cursor:pointer;font-size:1.2rem;padding:0;margin:0;height:100%;font-weight:300}.top-bar-button:hover{transition:.3s;border:none}.top-bar-button.light:hover{color:var(--light-text-hover-color)}.top-bar-button.dark:hover{color:var(--dark-text-hover-color)}.top-bar-button:active,.top-bar-button:active .light,.top-bar-button:active .dark{transform:scale(.9);border:none;outline:none}.mode-toggle-btn{background:none;border:none;cursor:pointer;font-size:1.8rem;padding:6px;border-radius:50%;transition:background .2s;display:flex;align-items:center;justify-content:center}.mode-toggle-btn.light svg{stroke:#2d3a4a;background:#f9fafb}.mode-toggle-btn.dark svg{stroke:#fbbf24;background:#22223b}.mode-toggle-btn:focus{outline:2px solid #0077cc}.mode-toggle-btn:hover{background:#e6f2ff}.mode-toggle-btn.dark:hover{background:#2d3a4a}.home-container{display:flex;flex-direction:column;align-items:center;margin-top:6rem;height:100vh;text-align:center;overflow-y:auto;overflow-x:hidden}.home-title{color:var(--title-color)}.home-description{color:var(--text-color);margin-top:1rem}.home-section-1{display:flex;flex-direction:column}.section-title{color:var(--title-color)}.learn-more-button{background:var(--button-bg);color:var(--button-color);border:none;border-radius:8px;padding:10px 0;font-size:1.1rem;margin-top:1rem;cursor:pointer}.learn-more-button:hover{transition:.3s;scale:1.05}:root{--background-color: #fff;--text-color: #2d3a4a;--title-color: #2d3a4a;--description-color: #4a5568;--link-color: #0077cc;--link-bg: #f0f8ff;--link-hover-bg: #e6f2ff;--link-hover-color: #005fa3;--input-bg: #f9fafb;--input-border: #cbd5e1;--input-focus-border: #0077cc;--button-bg: #0077cc;--button-hover-bg: #005fa3;--button-color: #fff}.dark{--background-color: #1a202c;--text-color: #e2e8f0;--title-color: #e2e8f0;--description-color: #a0aec0;--link-color: #63b3ed;--link-bg: #2a4365;--link-hover-bg: #1e293b;--link-hover-color: #4299e1;--input-bg: #2d3748;--input-border: #4a5568;--input-focus-border: #63b3ed;--button-bg: #3182ce;--button-hover-bg: #2b6cb0;--button-color: #f9fafb}.App{width:100vw;height:100vh;display:flex;flex-direction:column;align-content:center;justify-content:center;flex:1}.app-container{background:var(--background-color);color:var(--text-color);min-height:100vh;transition:background .2s,color .2s}.app-title{color:var(--title-color)}.app-description{color:var(--description-color)}.app-link{color:var(--link-color);background:var(--link-bg);border-radius:8px;padding:4px 12px;text-decoration:none;transition:background .2s,color .2s}.app-link:hover{background:var(--link-hover-bg);color:var(--link-hover-color)}.app-input{background:var(--input-bg);border:1px solid var(--input-border);color:var(--text-color);border-radius:8px;padding:10px 12px;font-size:1rem;transition:border .2s}.app-input:focus{border-color:var(--input-focus-border);outline:none}.app-button{background:var(--button-bg);color:var(--button-color);border:none;border-radius:8px;padding:10px 0;font-size:1.1rem;cursor:pointer;transition:background .2s}.app-button:hover{background:var(--button-hover-bg)}:root{font-family: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}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}