*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--primary-color:#4a6fa5;--primary-light:#6b8ebc;--primary-dark:#345a8a;--neutral-dark:#333;--neutral-light:#f8f9fa;--border-radius:.5rem;--box-shadow:0 2px 8px #0000001a;--transition:all .2s ease}body{min-width:100vw;min-height:100vh;color:var(--neutral-dark);background-image:radial-gradient(50% 50%,#ffffffbf 0%,#fff0 100%),linear-gradient(#cad8e4 0%,#cedce8 15%,#edf0f8 50%);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif}.container{max-width:1200px;margin:0 auto;padding:2rem 1rem}.search-wrapper{justify-content:center;width:100%;margin-bottom:2rem;display:flex}.search-box{width:100%;max-width:700px;box-shadow:var(--box-shadow);border-radius:var(--border-radius);display:flex;position:relative}.search-box input{border-radius:var(--border-radius) 0 0 var(--border-radius);transition:var(--transition);background-color:#fff;border:1px solid #ddd;border-right:none;flex:1;padding:.75rem 1rem;font-size:1rem}.search-box input:focus{border-color:var(--primary-color);box-shadow:0 0 0 1px var(--primary-light);outline:none}.search-button{background-color:var(--primary-color);color:#fff;border-radius:0 var(--border-radius) var(--border-radius) 0;cursor:pointer;transition:var(--transition);border:none;justify-content:center;align-items:center;padding:0 1.25rem;display:flex}.search-button:hover{background-color:var(--primary-dark)}.categories-container{flex-direction:column;gap:2rem;display:flex}.category-section{border-radius:var(--border-radius);box-shadow:var(--box-shadow);background-color:#fff;padding:1.5rem}.category-section h2{color:var(--primary-dark);border-bottom:2px solid #eee;margin-bottom:1rem;padding-bottom:.5rem;font-size:1.25rem}.class-groups{flex-direction:column;gap:1.5rem;display:flex}.class-group h3{color:var(--neutral-dark);margin-bottom:.75rem;font-size:1rem}.tag-container{flex-wrap:wrap;gap:.5rem;display:flex}.tag{background-color:var(--neutral-light);border-radius:var(--border-radius);color:var(--neutral-dark);transition:var(--transition);border:1px solid #e5e5e5;padding:.5rem .75rem;font-size:.875rem;text-decoration:none;display:inline-block}.tag:hover{background-color:var(--primary-light);color:#fff;border-color:var(--primary-light)}@media only screen and (width>=768px){.class-groups{flex-direction:row;gap:2rem}.class-group{flex:1}}@media only screen and (width<=600px){.search-box{max-width:100%}.category-section{padding:1rem}.tag{padding:.4rem .6rem;font-size:.8rem}}