:root{--ink:#1d2733;--dim:#5b6673;--accent:#1f4e79;--go:#1e7b3a;--bad:#b3261e;--card:#fff;--bg:#eef2f6;--line:#d5dce4}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif}
.wrap{max-width:860px;margin:0 auto;padding:16px}
.hero{padding:12px 4px 4px}
.kicker{margin:0;color:var(--dim);font-size:.9rem;letter-spacing:.02em}
h1{margin:.1em 0 .2em;font-size:2rem;color:var(--accent)}
.definition{margin:0 0 8px;font-size:1.05rem}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:18px;margin:14px 0}
h2{font-size:1.1rem;margin:18px 0 8px}
.card>h2:first-child{margin-top:0}
h3{margin:0;font-size:1rem;letter-spacing:.05em}
.btn{appearance:none;border:0;border-radius:8px;background:var(--accent);color:#fff;font-weight:600;font-size:1rem;padding:11px 16px;cursor:pointer}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn-2{background:#fff;color:var(--accent);border:2px solid var(--accent)}
.btn-go{background:var(--go);width:100%;padding:14px;font-size:1.1rem}
input[type=text],textarea{width:100%;font:inherit;padding:10px;border:1px solid var(--line);border-radius:8px}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.slot{border:1px solid var(--line);border-radius:10px;padding:12px}
#slot-before h3{color:var(--bad)} #slot-after h3{color:var(--go)}
.hint{margin:2px 0 8px;color:var(--dim);font-size:.92rem}
.preview{aspect-ratio:3/2;background:#f3f5f8;border:1px dashed var(--line);border-radius:8px;display:flex;align-items:center;justify-content:center;overflow:hidden;margin-bottom:8px;color:var(--dim);font-size:.9rem}
.preview img{width:100%;height:100%;object-fit:contain;background:#fff}
.status{min-height:1.2em;margin:6px 0 0;color:var(--dim);font-size:.9rem;word-break:break-word}
#submit-status{color:var(--bad);font-weight:600}
.who{margin:0 0 4px;color:var(--dim)}
.done h2{color:var(--go)}
footer{text-align:center;color:var(--dim);font-size:.85rem;padding:12px}
@media (max-width:560px){.pair{grid-template-columns:1fr}}

.filealt{display:block;margin-top:6px;font-size:.9rem;color:var(--accent);cursor:pointer}
.filebtn{display:inline-block}
.hint.small{font-size:.82rem;margin-top:6px}