: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:#f3f3f3;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}:root body{margin:0;padding:0}#root{width:100%;text-align:center;--primary: #06b6d4;--primary-dark: #0891b2;--accent: #f59e0b;--accent-dark: #d97706;--love: #ef4444;--green: #10b981;--bg-primary: #0f172a;--bg-secondary: #1e293b;--bg-tertiary: #334155;--text-primary: #f8fafc;--text-secondary: #cbd5e1;--border-color: #1e293b;--transition: all .3s ease}a{color:#fff;font-weight:700;text-decoration:none}a:hover{text-decoration:underline}.container{background-color:var(--bg-primary);color:var(--text-primary);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;line-height:1.6}.container .App{font-family:sans-serif;text-align:center;max-width:500px;margin:0 auto;padding:3em;border-radius:15px;box-shadow:0 0 55px 5px #ffffff80;background-color:#fdfdfd}.container .App h1,.container .App p{margin:0}.container .App h1{color:#000;font-size:2.5em}@media(max-width:425px){.container .App{padding:1em}.container .App h1{margin-bottom:0;font-size:1.5em}}nav{position:fixed;top:0;left:0;width:100%;z-index:50;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background-color:#0f172acc;border-bottom:1px solid var(--border-color)}nav .navContent{max-width:1200px;margin:0 auto;padding:1rem 1.5rem;display:flex;align-items:center;justify-content:space-between}nav .logo{display:flex;align-items:center;gap:.75rem;font-size:1.25rem;font-weight:700}nav .logoBox{width:2rem;height:2rem;border-radius:.5rem;background:linear-gradient(135deg,var(--primary) 0%,var(--accent) 100%);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700}.hero{padding:6rem 1.5rem 4rem}.hero .heroContent{max-width:56rem;margin:0 auto;display:flex;flex-direction:column;gap:2rem}.hero .heroText{text-align:center;display:flex;flex-direction:column}.hero .heroText h1{font-size:3.5rem;font-weight:700;line-height:1.2}.hero .heroText p{font-size:1.125rem;color:var(--text-secondary);max-width:42rem;margin:0 auto}.copiedPopup{position:fixed;left:50%;top:50%;transform:translate(-50%,100px);background-color:#fff;color:#000;padding:10px 20px;border-radius:50px;border:1px solid black;box-shadow:0 2px 8px #0000001a;z-index:100;opacity:0;transition:all .4s cubic-bezier(.68,-.55,.265,1.55);pointer-events:none}.copiedPopup.show{transform:translate(-50%,-50%);opacity:1}#colorWindowContainer{margin-top:3em}#colorWindowContainer #colorWindow{width:100%;min-height:300px;border-radius:10px;margin:1em auto;background-color:#fff;border:1px solid black;display:flex;justify-content:center;align-items:center}#colorWindowContainer select{margin:.5em 0;padding:.5em 1em;border-radius:5px;border:1px solid gray;width:100%;cursor:pointer}#colorWindowContainer .colorPreview{width:5px;height:5px}#colorWindowContainer span{font-weight:700;font-size:2em}#colorWindowContainer #searchColor{margin:.5em 0}#colorWindowContainer #searchColor form{display:flex;justify-content:center;align-items:center}#colorWindowContainer #searchColor form input{width:100%;padding:.5em 1em;border-radius:5px;border:1px solid gray}#colorWindowContainer #searchColor form button{margin-left:1em;border:none;background-color:#2e8b57;color:#fff;padding:.5em 1em;border-radius:5px;cursor:pointer}#colorWindowContainer #searchColor form button:hover{background-color:#006400}#colorWindowContainer #searchColor form button:active{background-color:#00ff7f}#colorWindowContainer #results{max-height:375px;overflow-y:scroll}#colorWindowContainer #results p{margin:5px 0;padding:10px;border-radius:5px}#colorWindowContainer ::-webkit-scrollbar{width:10px}#colorWindowContainer ::-webkit-scrollbar-track{border-radius:5px;background:var(--text-secondary)}#colorWindowContainer ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--bg-primary)}#learn{margin:4em 0;padding:4rem 1.5rem;border-top:1px solid var(--border-color)}#learn .learningContent{max-width:56rem;margin:0 auto;display:flex;flex-direction:column;gap:3rem}#learn .learningContent .learningHeader{text-align:center;display:flex;flex-direction:column;gap:1rem}#learn .learningContent .learningHeader h2{font-size:2.25rem;font-weight:700}#learn .learningContent .learningHeader p{font-size:1.125rem;color:var(--text-secondary)}#learn .learningContent #learningGrid{display:grid;grid-template-columns:1fr;gap:2rem}@media(min-width:768px){#learn .learningContent #learningGrid{grid-template-columns:repeat(2,1fr)}}#learn .learningCard{display:flex;gap:1rem;padding:1.5rem;border-radius:.5rem;background-color:#1e293b80;border:1px solid var(--border-color);transition:var(--transition);text-align:left}#learn .learningCard .learningNumber{flex-shrink:0;width:2.5rem;height:2.5rem;border-radius:.5rem;background:linear-gradient(135deg,var(--primary) 0%,var(--accent) 100%);display:flex;align-items:center;justify-content:center;color:var(--bg-primary);font-weight:700;font-size:1.1rem}#learn .learningCard h3{font-weight:600;margin:0;margin-bottom:.25rem}#learn .learningCard p{margin:0;font-size:.875rem;color:var(--text-secondary)}#learn .learningCard:hover{background-color:#2c4265cc;border-color:var(--primary)}.footer{border-top:1px solid var(--border-color);background-color:#1e293b4d;padding:2rem;text-align:center;color:var(--text-secondary)}.footer .love{color:var(--love)}