:root{--bg: #fbfbfd;--fg: #1a1a1f;--muted: #6b6b78;--card: #ffffff;--border: #e5e5ec;--accent: #4f46e5;--accent-soft: #eef2ff;--danger: #b91c1c;--danger-soft: #fef2f2;--radius: 14px}@media(prefers-color-scheme:dark){:root{--bg: #121216;--fg: #ececf1;--muted: #9a9aa8;--card: #1c1c22;--border: #2e2e38;--accent: #8b85f5;--accent-soft: #23233a;--danger: #f87171;--danger-soft: #2a1a1a}}*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0;background:var(--bg);color:var(--fg);font-family:Zen Maru Gothic,system-ui,-apple-system,Hiragino Sans,Noto Sans JP,sans-serif;line-height:1.6;-webkit-font-smoothing:antialiased}main{max-width:680px;margin:0 auto;padding:2.5rem 1.25rem 4rem}header{text-align:center;margin-bottom:2rem}h1{margin:0}h1 img{display:block;width:min(320px,80%);height:auto;margin:0 auto}.sub{margin:.35rem 0 0;color:var(--muted);font-size:.95rem}.segmented{position:relative;display:flex;flex-wrap:wrap;gap:.25rem;margin-bottom:.9rem;padding:.25rem;border:1px solid var(--border);border-radius:10px;background:var(--card)}.segmented:empty{min-height:2.6rem}.segmented input{position:absolute;opacity:0;pointer-events:none}.segmented label{flex:1 1 5rem;padding:.4rem .6rem;white-space:nowrap;border-radius:8px;text-align:center;font-size:.9rem;color:var(--muted);cursor:pointer;-webkit-user-select:none;user-select:none;transition:background .15s,color .15s}.segmented label:hover{color:var(--fg)}.segmented input:checked+label{background:var(--accent-soft);color:var(--accent);font-weight:700}.segmented input:focus-visible+label{outline:2px solid var(--accent);outline-offset:1px}#drop{display:grid;place-items:center;min-height:220px;padding:1.5rem;border:2px dashed var(--border);border-radius:var(--radius);background:var(--card);cursor:pointer;transition:border-color .15s,background .15s}#drop:hover,#drop:focus-visible{border-color:var(--accent);background:var(--accent-soft);outline:none}#drop.dragover{border-color:var(--accent);background:var(--accent-soft)}#drop.busy{opacity:.6;pointer-events:none}#drop-idle{display:grid;justify-items:center;gap:.4rem;color:var(--muted);text-align:center}#drop-idle strong{color:var(--fg);font-size:1.05rem}#drop-idle span{font-size:.85rem}#preview-wrap{position:relative;max-width:100%;max-height:320px;line-height:0}#preview{width:100%;height:100%;border-radius:10px;display:block}#face-box{position:absolute;border:2px solid var(--accent);border-radius:6px;box-shadow:0 0 0 1px #00000059;pointer-events:none}#face-box span{position:absolute;left:-2px;bottom:calc(100% + 3px);padding:.1rem .35rem;border-radius:4px;background:var(--accent);color:#fff;font-size:.7rem;line-height:1.5;white-space:nowrap}#face-box.label-inside span{bottom:auto;top:2px;left:2px}.privacy{margin:.75rem 0 0;text-align:center;font-size:.8rem;color:var(--muted)}#status{margin-top:1.25rem;text-align:center;font-size:.95rem}#status:empty{display:none}#status.error{padding:.85rem 1rem;background:var(--danger-soft);color:var(--danger);border-radius:10px;text-align:left}.spinner{display:inline-block;width:1em;height:1em;border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite;vertical-align:-.15em;margin-right:.5em}@keyframes spin{to{transform:rotate(360deg)}}#results{margin-top:1.5rem;display:grid;gap:.75rem}.card{display:grid;grid-template-columns:84px 1fr;gap:1rem;padding:.9rem;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);align-items:center}.card:first-child{border-color:var(--accent)}.card img{width:84px;height:84px;border-radius:10px;object-fit:cover;background:var(--border)}.card-body{min-width:0}.rank{display:inline-block;font-size:.7rem;font-weight:700;color:var(--accent);background:var(--accent-soft);padding:.1rem .45rem;border-radius:5px;margin-bottom:.15rem}.name{margin:0;font-size:1.1rem;font-weight:700;overflow-wrap:anywhere}.name a{color:inherit;text-decoration:none}.name a:hover,.name a:focus-visible{color:var(--accent);text-decoration:underline;text-underline-offset:3px}.meta{margin:.1rem 0 .4rem;font-size:.8rem;color:var(--muted)}.bar{height:5px;background:var(--border);border-radius:3px;overflow:hidden}.bar>i{display:block;height:100%;background:var(--accent)}.score{font-size:.78rem;color:var(--muted);margin-top:.25rem}.credit{font-size:.68rem;color:var(--muted);margin-top:.3rem;overflow-wrap:anywhere}.credit a{color:inherit}footer{margin-top:3rem;font-size:.75rem;color:var(--muted);text-align:center}a{color:var(--accent)}
