:root{color-scheme:dark;--bg: #131313;--panel: #1a1a1a;--frame: #212121;--border: #2f2f2f;--border-strong: #454545;--fg: #ededed;--muted: #949494;--accent: #ffd23f;--danger: #ff6b6b}*{box-sizing:border-box}html,body{margin:0;background:var(--bg)}body{color:var(--fg);font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;line-height:1.55}.app{min-height:100vh;max-width:76rem;margin:0 auto;padding:3rem 1.5rem 2rem;display:flex;flex-direction:column;gap:1.75rem}header h1{margin:0;font-size:clamp(1.9rem,5vw,2.6rem);letter-spacing:-.03em}header h1:after{content:".";color:var(--accent)}header p{margin:.5rem 0 0;max-width:44rem;color:var(--muted)}.controls{display:flex;flex-wrap:wrap;align-items:flex-end;gap:1rem;padding:1.25rem;background:var(--panel);border:1px solid var(--border);border-radius:12px}.controls label{display:flex;flex-direction:column;gap:.35rem;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}select,input[type=number]{font:inherit;font-size:.95rem;letter-spacing:normal;text-transform:none;color:var(--fg);background:#121212;border:1px solid var(--border-strong);border-radius:8px;padding:.5rem .65rem;min-width:11rem}input[type=number]{min-width:7rem}input[aria-invalid=true]{border-color:var(--danger)}.controls .hint{flex:1 1 12rem;margin:0;padding-bottom:.5rem;min-width:12rem;font-size:.85rem;color:var(--muted)}button{font:inherit;font-size:.9rem;color:var(--bg);background:var(--accent);border:1px solid var(--accent);border-radius:8px;padding:.5rem 1rem;cursor:pointer}button:hover:not(:disabled){filter:brightness(1.1)}button:disabled{opacity:.45;cursor:not-allowed}button.ghost{color:var(--muted);background:transparent;border-color:var(--border-strong)}button.ghost:hover{color:var(--fg);border-color:var(--fg)}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.buttons{display:flex;flex-wrap:wrap;gap:.6rem}.dropzone{display:flex;flex-direction:column;align-items:center;gap:1rem;padding:2.5rem 1.5rem;border:2px dashed var(--border-strong);border-radius:12px;text-align:center}.dropzone p{margin:0;color:var(--muted)}.dropzone.active{border-color:var(--accent);background:#ffd23f0f}.dropzone.active p{color:var(--accent)}.notice{margin:-.75rem 0 0;font-size:.9rem;color:var(--accent)}.results{display:flex;flex-direction:column;gap:1rem}.results-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem}.results-head p{margin:0;color:var(--muted);font-variant-numeric:tabular-nums}.grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(21rem,1fr));gap:1rem}.card{display:flex;flex-direction:column;gap:.75rem;padding:.9rem;background:var(--panel);border:1px solid var(--border);border-radius:12px}.card-head{display:flex;align-items:center;justify-content:space-between;gap:.5rem}.card-name{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:.9rem;direction:rtl;text-align:left}.card-head button{flex:none;padding:0 .45rem;font-size:1.1rem;line-height:1.5}.pair{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}.pair figure{margin:0;display:flex;flex-direction:column;gap:.35rem}.frame{position:relative;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);place-items:center;height:9rem;padding:.35rem;background:var(--frame);border:1px solid var(--border);border-radius:8px;overflow:hidden}.frame img{display:block;max-width:100%;max-height:100%;object-fit:contain}.frame img.dimmed{opacity:.25}.frame-note{position:absolute;margin:0;padding:0 .5rem;font-size:.8rem;color:var(--muted);text-align:center}.frame-note.error{color:var(--danger)}figcaption{display:flex;flex-direction:column;font-family:ui-monospace,SFMono-Regular,SF Mono,Menlo,monospace;font-size:.72rem;line-height:1.4;color:var(--muted)}figcaption .tag{font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:#707070}footer{margin-top:auto;padding-top:1.25rem;border-top:1px solid var(--border);font-size:.8rem;color:var(--muted)}@media(max-width:30rem){.app{padding:2rem 1rem}select,input[type=number]{min-width:0;width:100%}.controls label{flex:1 1 100%}}