@import"https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=DM+Serif+Display&display=swap";: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}@media(prefers-color-scheme:light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}:root{--bg: #f0f2f7;--surface: #ffffff;--surface-hover: #f7f8fc;--border: #e2e6ef;--accent: #3b5bdb;--accent-light: #eef1fd;--accent-hover: #2f4ac0;--text-primary: #1a1d2e;--text-secondary: #5a6080;--text-muted: #9499b5;--error: #e03131;--error-bg: #fff5f5;--shadow-sm: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);--shadow-md: 0 4px 12px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.04);--radius: 10px;--transition: .18s ease}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{font-family:DM Sans,sans-serif;background:var(--bg);color:var(--text-primary);line-height:1.6;min-height:100vh}.container{max-width:1100px;margin:0 auto;padding:40px 24px}h1{font-family:"DM Serif Display",serif;font-size:clamp(1.8rem,4vw,2.6rem);text-align:center;color:var(--text-primary);margin-bottom:32px;letter-spacing:-.02em}.search{width:100%;padding:12px 16px;font-family:inherit;font-size:.95rem;color:var(--text-primary);background:var(--surface);border:1.5px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm);outline:none;transition:border-color var(--transition),box-shadow var(--transition);margin-bottom:16px}.search::placeholder{color:var(--text-muted)}.search:focus{border-color:var(--accent);box-shadow:0 0 0 3px #3b5bdb1f}.sort-controls{display:flex;gap:10px;margin-bottom:28px;flex-wrap:wrap}.sort-controls select{padding:9px 36px 9px 14px;font-family:inherit;font-size:.875rem;color:var(--text-primary);background:var(--surface);border:1.5px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm);outline:none;cursor:pointer;transition:border-color var(--transition),box-shadow var(--transition);appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239499b5' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center}.sort-controls select:focus{border-color:var(--accent);box-shadow:0 0 0 3px #3b5bdb1f}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}.card{background:var(--surface);padding:20px;border-radius:var(--radius);border:1.5px solid var(--border);box-shadow:var(--shadow-sm);transition:transform var(--transition),box-shadow var(--transition),border-color var(--transition)}.card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:#c8d0e8}.clickable{cursor:pointer;color:var(--accent);font-weight:500;text-decoration:none;transition:color var(--transition);display:inline-flex;align-items:center;gap:4px}.clickable:hover{color:var(--accent-hover);text-decoration:underline;text-underline-offset:3px}.details{margin-top:14px;padding-top:14px;border-top:1px solid var(--border);font-size:.9rem;color:var(--text-secondary);line-height:1.7;animation:fadeIn .2s ease}.error{color:var(--error);background:var(--error-bg);border:1px solid #ffc9c9;border-radius:var(--radius);padding:12px 16px;font-size:.9rem;margin-top:8px}@keyframes fadeIn{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}@media(max-width:600px){.container{padding:24px 16px}.sort-controls{flex-direction:column}.sort-controls select{width:100%}}