.navbar{display:flex;align-items:center;justify-content:space-between;padding:1rem 2rem;background-color:var(--background-gradient);color:#fff;box-shadow:0 2px 4px #0003;position:fixed;top:0;left:0;width:100%;z-index:2000;height:60px;max-height:60px;overflow:hidden}.navbar-brand{font-size:1.5rem;font-weight:700}.navbar-links{display:flex;align-items:center;gap:1rem;height:100%}.search-form{display:flex;align-items:center;gap:.5rem;height:40px}.search-input{flex:1;padding:.5rem 1rem;border-radius:4px;border:none;background-color:var(--secondary);color:#fff;height:100%}.search-input:focus{outline:none;box-shadow:0 0 0 2px var(--primary)}.search-button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-family:Inter,Roboto,sans-serif;font-weight:400;background:#725f8c;color:var(--text);cursor:pointer;transition:all .3s ease-in-out}.search-button:hover{background:#8972a7}.nav-link{font-size:1rem;padding:.5rem 1rem;border-radius:4px;transition:background-color .3s;color:var(--text);text-decoration:none}.nav-link:hover{color:var(--text);background-color:var(--secondary);border-radius:6px}@media(max-width:768px){.navbar{flex-direction:column;align-items:flex-start;padding:1rem}.navbar-links{flex-direction:column;width:100%;gap:.5rem}.search-form,.search-input{width:100%}}.sidenav{position:fixed;top:60px;left:0;height:calc(100vh - 60px);width:200px;background-color:var(--background-gradient);color:#fff;padding-top:20px;overflow:hidden;box-shadow:5px 5px 4px #0003;z-index:1000;transition:width .3s ease-in-out}.sidenav.closed{width:60px}.sidenav ul{list-style:none;padding-top:50px;padding-left:0;margin:0}.sidenav li{position:relative;padding:15px 20px;padding-left:1rem;cursor:pointer;white-space:nowrap;color:var(--text);transition:transform .3s ease-in-out}.sidenav li:hover{transform:translate(.5rem);color:var(--primary)}.sidenav li:after{content:"";position:absolute;width:.5rem;height:.1rem;top:50%;left:0;transform:translateY(-50%);color:var(--primary);transition:width .3s ease-in-out,left .3s ease-in-out,background .3s ease-in-out}.sidenav li:hover:after{width:1rem;left:-.5rem;background:var(--primary);color:var(--primary)}.toggle-btn{position:absolute;top:12px;left:12px;width:18px;height:20px;display:flex;flex-direction:column;justify-content:space-between;align-items:center;padding:4px;border:none;cursor:pointer;z-index:101;background:none;transition:transform .3s ease-in-out}.toggle-btn:focus{outline:none}.toggle-btn:hover{transform:scale(1.05)}.toggle-btn .bar{height:1.5px;width:14px;background-color:var(--primary);border-radius:1px;transition:background-color .3s ease-in-out}.toggle-btn:hover .bar{background-color:var(--secondary)}.topic-card{position:relative;display:flex;width:100px;margin-bottom:1rem;border-radius:8px;overflow:hidden;background-color:#c9a3ff33;box-shadow:5px 15px 20px hsla(0,0%,0%,0 .7);transition:transform .3s ease-in-out}.topic-card:hover{transform:scale(.98)}.topic-overlay{position:absolute;inset:0;background:var(--secondary);opacity:0;display:flex;flex-direction:row;justify-content:flex-end;outline:none;transition:opacity .3s ease-in-out}.topic-card:hover .topic-overlay{opacity:1}.favorite-btn{position:relative;top:1rem;right:1rem;font-size:1.5rem;padding:.5rem;border:none;border-radius:50%;width:10px;height:10px;display:flex;background-color:none;align-items:center;justify-content:center;outline:none}.favorite-btn:hover{background-color:none;outline:none}.favorite-btn.active{color:var(--primary)}.topic-info{padding:1rem;flex:1;display:flex;flex-direction:column;gap:.5rem}.topic-info h3,.topic-info p{color:#fff}@media(max-width:768px){.topic-card{font-size:.9rem}.topic-info{padding:.75rem}.favorite-btn{width:32px;height:32px;font-size:1.2rem}}.home{width:100%;box-sizing:border-box}@media(max-width:639px){.home{padding:1rem 0}}.favorites{padding:2rem;width:100%;box-sizing:border-box}.favorites h2{margin-bottom:2rem;text-align:center;font-size:2.5rem;color:hsl(0 0 100);text-shadow:2px 2px 4px hsla(0,0,0,.3)}.favorites-empty{text-align:center;padding:4rem 2rem;background-color:var(--background-gradient);border-radius:12px;margin:2rem auto;max-width:600px}.favorites-empty h2{margin-bottom:1rem;font-size:2rem;color:var(--primary)}.favorites-empty p{color:var(--secondary);font-size:1.2rem;line-height:1.6}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.topics-grid>*{animation:fadeIn .3s ease-out forwards}.main-content{margin-top:60px;min-height:calc(100vh - 60px);background-color:var(--background);transition:margin-left .3s ease-in-out}.main-content.nav-open{margin-left:200px}.main-content.nav-closed{margin-left:60px}:root{font-family:Inter,Roboto,system-ui,Avenir,Helvetica,Arial,sans-serif;font-weight:300;line-height:1;color-scheme:light dark;--text: hsla(0, 0%, 100%, 90%);--primary: hsl(265, 100%, 90%);--secondary: hsla(265, 20%, 50%, 50%);--transition: all .3s ease-in-out;--background: hsl(0, 0%, 6%);--background-gradient: linear-gradient(135deg, hsl(0, 0%, 10%), hsl(265, 25%, 25%))}*{margin:0;padding:0;box-sizing:border-box}html,body{width:100%;min-height:100vh;overflow-x:hidden;background:var(--background-gradient);color:var(--text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}#root{width:100%;min-height:100vh;display:flex;flex-direction:column;background:inherit}h1,h2,h3,h4,h5,h6{font-family:Inter,Roboto,sans-serif;font-weight:400;color:var(--text);line-height:1.2}h1{font-size:3em}p,span,a,li{font-family:Inter,system-ui,sans-serif;font-weight:400;color:var(--text)}a{font-weight:500;color:var(--text);text-decoration:none;transition:color var(--transition)}a:hover{color:#b3b3b3}input,textarea,select{font-family:inherit;font-size:1em;padding:.5em .75em;border-radius:6px;border:1px solid hsl(0,0%,30%);background-color:#1a1a1a;color:var(--text);transition:border-color .25s,box-shadow .25s}input:focus,textarea:focus,select:focus{border-color:var(--primary);box-shadow:0 0 0 2px var(--secondary);outline:none}body:before{content:"";position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0}@media(prefers-color-scheme:light){:root{--text: hsl(265, 50%, 30%);--background: hsl(0, 0%, 100%);--background-gradient: linear-gradient(135deg, hsl(0, 0%, 100%), hsl(0, 0%, 90%))}a:hover{color:#170d26}}