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