:root{--bg-1: #f6f7fb;--bg-2: #e7ebf6;--ink: #172033;--muted: #4f5b70;--accent: #007a70;--accent-soft: #d8f6f2;--line: #c8d1e4}*{box-sizing:border-box}body{margin:0;min-height:100vh;font-family:Space Grotesk,Noto Sans SC,sans-serif;color:var(--ink);background:radial-gradient(circle at 15% 15%,#ffffff 0%,transparent 35%),linear-gradient(160deg,var(--bg-1),var(--bg-2))}.layout{width:min(920px,92vw);margin:2rem auto 3rem;display:grid;gap:1rem}.card{border:1px solid var(--line);border-radius:18px;background:#ffffffd1;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);box-shadow:0 10px 24px #121e3c14;padding:1rem 1.1rem}.hero h1{margin:0;font-size:clamp(1.5rem,3.2vw,2.2rem);letter-spacing:.01em}.hero p{margin:.5rem 0 0;color:var(--muted)}.hint{color:var(--muted);font-size:.92rem}.project-link{display:inline-flex;align-items:center;gap:.4rem;padding:.35rem .55rem;border:1px solid var(--line);border-radius:999px;color:var(--ink);text-decoration:none;background:#f8fbff;transition:transform .12s ease,box-shadow .12s ease,border-color .12s ease}.project-link:hover{transform:translateY(-1px);border-color:#99a9c9;box-shadow:0 6px 14px #121e3c1f}.project-link:active{transform:translateY(0)}.project-link svg{width:1rem;height:1rem;fill:currentcolor}.controls{display:grid;gap:.6rem}.field{display:grid;gap:.45rem}.field label{font-weight:700}.field input[type=file]{border:1px solid var(--line);border-radius:10px;padding:.55rem;background:#fdfefe}.dropzone{border:2px dashed var(--line);display:grid;place-items:center;text-align:center;cursor:pointer;min-height:170px;transition:transform .12s ease,border-color .12s ease,background-color .12s ease}.dropzone .title{margin:0;font-size:1.3rem;font-weight:700}.dropzone.active{border-color:var(--accent);background:var(--accent-soft);transform:translateY(-1px)}.dropzone.busy{opacity:.8}.result h2{margin:0 0 .9rem}.result-empty{color:var(--muted)}.result-content.hidden,.result-empty.hidden{display:none}.grid{display:grid;gap:.7rem;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));margin-bottom:.75rem}.grid div{border:1px solid var(--line);border-radius:10px;padding:.55rem .6rem;background:#fcfdff;display:grid;gap:.2rem}.grid span{color:var(--muted);font-size:.82rem}pre{margin:.5rem 0 0;border:1px solid var(--line);border-radius:10px;background:#0f1425;color:#d6e2ff;padding:.75rem;overflow:auto;max-height:340px}code{background:#edf2ff;padding:.1rem .3rem;border-radius:.3rem}@media (max-width: 600px){.layout{margin-top:1rem}.dropzone{min-height:145px}}
