*,*:before,*:after{box-sizing:border-box}body{margin:0;background:#f9fafb;color:#1f2937;-webkit-font-smoothing:antialiased}.app{max-width:960px;margin:0 auto;padding:0 1rem 2rem;font-family:Hiragino Sans,Hiragino Kaku Gothic ProN,Noto Sans JP,sans-serif}header{text-align:center;padding:3rem 1rem 2rem;margin:0 -1rem 2rem;background:linear-gradient(180deg,#fff5f4,#f9fafb);border-bottom:1px solid #f0e8e8}header h1{font-size:2.8rem;font-weight:800;letter-spacing:-.03em;margin:0;color:#e74c3c}.subtitle{color:#888;margin:.4rem 0 0;font-size:.95rem;letter-spacing:.04em}.search-form{background:#fff;border:1px solid #e8e8e8;border-radius:16px;padding:1.5rem;margin-bottom:2rem;box-shadow:0 2px 16px #0000000f}.form-group{margin-bottom:1rem}.form-group label{display:block;font-size:.85rem;color:#555;margin-bottom:.25rem}.form-group input{width:100%;padding:.75rem;border:1px solid #ccc;border-radius:8px;font-size:1rem;box-sizing:border-box;transition:border-color .2s}.form-group input:focus{outline:none;border-color:#e74c3c}.search-form>button[type=submit]{width:100%;padding:.75rem;background:#e74c3c;color:#fff;border:none;border-radius:8px;font-size:1rem;font-weight:700;cursor:pointer;transition:background .2s}.search-form>button[type=submit]:hover:not(:disabled){background:#c0392b}.search-form>button[type=submit]:disabled{opacity:.6;cursor:not-allowed}.examples{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem}.example-chip{background:#fff;border:1px solid #ddd;border-radius:20px;padding:.4rem .85rem;font-size:.8rem;color:#555;cursor:pointer;transition:all .2s;display:inline-flex;align-items:center;gap:.25rem}.example-chip:before{content:"↗";font-size:.7rem;opacity:.5}.example-chip:hover{background:#fff5f4;border-color:#e74c3c;color:#e74c3c;box-shadow:0 1px 4px #e74c3c26}.loading{text-align:center;padding:3rem 0}.spinner{width:40px;height:40px;border:4px solid #ddd;border-top:4px solid #e74c3c;border-radius:50%;margin:0 auto 1rem;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.error{background:#fef2f2;color:#dc2626;padding:1rem;border-radius:8px;margin-bottom:1rem}.results-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.results-header h2{margin:0;font-size:1.1rem}.timings{display:flex;gap:.5rem}.timing-item{background:#f3f4f6;color:#6b7280;font-size:.75rem;padding:.2rem .5rem;border-radius:4px;font-family:monospace}.active-filters{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;margin-bottom:1rem}.filters-label{font-size:.8rem;color:#6b7280;margin-right:.25rem}.filter-tag{background:#fef3c7;color:#92400e;font-size:.75rem;padding:.2rem .5rem;border-radius:4px;border:1px solid #fcd34d;cursor:pointer;transition:all .15s}.filter-tag:hover{border-color:#f59e0b}.filter-tag-disabled{background:#f3f4f6;color:#9ca3af;border-color:#d1d5db;text-decoration:line-through}.filter-tag-disabled:hover{border-color:#9ca3af}.no-results{text-align:center;color:#6b7280;padding:2rem 0}.results-grid{display:grid;gap:1rem}.result-card{background:#fff;border:1px solid #e5e5e5;border-radius:12px;overflow:hidden;transition:box-shadow .2s}.result-card:hover{box-shadow:0 4px 12px #00000014}.result-card.rank-1-card{border:2px solid #f59e0b;box-shadow:0 4px 24px #f59e0b2e;position:relative}.result-card.rank-1-card:hover{box-shadow:0 6px 28px #f59e0b47}.no1-badge{display:inline-flex;align-items:center;gap:.3rem;background:linear-gradient(135deg,#f59e0b,#ef4444);color:#fff;font-size:.7rem;font-weight:700;padding:.2rem .65rem;border-radius:20px;letter-spacing:.06em;text-transform:uppercase;margin-left:auto}.card-header{display:flex;align-items:flex-start;gap:.75rem;padding:1rem 1rem .5rem}.rank{font-size:1.1rem;font-weight:700;color:#9ca3af;min-width:2rem}.rank-top{color:#e74c3c;font-size:1.2rem}.card-title{flex:1;display:flex;align-items:baseline;gap:.5rem}.card-title h3{margin:0;font-size:1.05rem;line-height:1.3}.card-score,.card-quality{font-size:.75rem;color:#6b7280;background:#f3f4f6;padding:.1rem .4rem;border-radius:4px;white-space:nowrap}.card-photo{width:100%;height:200px;object-fit:cover;margin-top:.75rem}.rank-1-card .card-photo{height:260px}.card-explain{background:#fef9ee;border-left:3px solid #f59e0b;margin:.75rem 1rem 0;padding:.6rem .75rem;border-radius:0 6px 6px 0;font-size:.85rem;color:#374151;line-height:1.6}.explain-cursor{display:inline-block;width:2px;height:1em;background:#f59e0b;margin-left:2px;vertical-align:text-bottom;animation:blink .7s step-end infinite}@keyframes blink{50%{opacity:0}}.card-body{padding:.75rem 1rem 1rem}.card-tags{display:flex;flex-wrap:wrap;gap:.35rem;margin-bottom:.5rem}.tag{background:#f3f4f6;color:#374151;font-size:.75rem;padding:.15rem .5rem;border-radius:4px}.card-catch{font-size:.85rem;color:#555;font-style:italic;margin:.25rem 0 .5rem}.card-info{font-size:.85rem;color:#555}.card-info p{margin:.3rem 0}.info-label{display:inline-block;min-width:4.5rem;color:#9ca3af;font-size:.8rem}.card-links{display:flex;gap:.75rem;margin-top:.75rem;flex-wrap:wrap}.card-links a{font-size:.85rem;color:#fff;background:#e74c3c;padding:.35rem .75rem;border-radius:6px;text-decoration:none;transition:background .2s}.card-links a:hover{background:#c0392b}.card-links a:nth-child(2){background:#f59e0b}.card-links a:nth-child(2):hover{background:#d97706}