:root{--bg:#0f0f10;--card:#161617;--line:#2a2a2d;--text:#e9e9ea;--dim:#9a9a9f;--faint:#6b6b70;--acc:#e9e9ea;--err:#e66767;color-scheme:dark}
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]){--bg:#f6f6f7;--card:#fff;--line:#e4e4e7;--text:#1b1b1d;--dim:#55555b;--faint:#8a8a90;--acc:#1b1b1d;--err:#c43c3c;color-scheme:light}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font:15px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
main{max-width:1100px;margin:0 auto;padding:48px 16px 32px}
h1{font-size:28px;line-height:1.2;margin:0 0 8px;letter-spacing:-.01em}
h1 .exp{font-size:14px;font-weight:600;color:var(--dim);letter-spacing:.04em;vertical-align:middle}
h2{font-size:16px;margin:0 0 12px}
.lede{color:var(--dim);margin:0 0 28px}
.faint{color:var(--faint);font-weight:400}
form,#pick{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:18px;margin-bottom:24px;max-width:720px}
label{display:block;font-weight:600;margin-bottom:8px}
textarea{width:100%;resize:vertical;background:var(--bg);color:var(--text);border:1px solid var(--line);border-radius:8px;padding:10px 12px;font:13px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace}
textarea:focus,button:focus-visible{outline:2px solid var(--dim);outline-offset:1px}
.row{display:flex;align-items:center;gap:14px;margin-top:12px;flex-wrap:wrap}
button{background:var(--acc);color:var(--bg);border:0;border-radius:8px;padding:9px 20px;font:600 14px system-ui,sans-serif;cursor:pointer}
button:disabled{opacity:.5;cursor:default}
#status{color:var(--dim);font-size:13px}
#errors{margin:10px 0 0;padding-left:18px;color:var(--err);font-size:13px}#errors:empty{display:none}
#fights{display:grid;gap:8px}
.fight{display:flex;justify-content:space-between;gap:12px;width:100%;text-align:left;background:var(--bg);color:var(--text);border:1px solid var(--line);padding:12px 14px;font-weight:600}
.fight:hover{border-color:var(--dim)}
.fight span{color:var(--dim);font-weight:400;font-size:13px}
.samples{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:8px}
@media (max-width:760px){.samples{grid-template-columns:1fr}main{padding-top:28px}}
figure{margin:0;background:var(--card);border:1px solid var(--line);border-radius:10px;overflow:hidden}
figure img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;object-position:left top;background:var(--bg)}
figure.wide{grid-column:1/-1}figure.wide img{aspect-ratio:auto}
figcaption{padding:10px 14px;color:var(--dim);font-size:13px}figcaption b{color:var(--text)}
footer{margin-top:36px;color:var(--faint);font-size:12px;text-align:center}footer a{color:var(--dim)}
.note{color:var(--faint);font-size:13px;margin:10px 0 0}
figure a{cursor:zoom-in}
#zoom{padding:0;border:0;background:transparent;max-width:96vw;max-height:94vh;overflow:auto;cursor:zoom-out}
#zoom::backdrop{background:rgba(0,0,0,.82)}
#zoom img{display:block;max-width:96vw;height:auto;border-radius:8px}