@import "https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Manrope:wght@400;500;700;800&family=Space+Mono:wght@400;700&display=swap";:root{--canvas:#f3efe7;--panel:#fefaf2;--panel-soft:#f9f2e7;--border:#ded6c7;--border-strong:#b9ad96;--ink:#111214;--muted:#5f5a50;--accent-red:#d7263d;--accent-yellow:#efc84a;--font-body:"Manrope", sans-serif;--font-heading:"Bebas Neue", sans-serif;--font-mono:"Space Mono", monospace;font-family:var(--font-body);color:var(--ink);background:var(--canvas);text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-weight:500;line-height:1.45}*{box-sizing:border-box}body{background:radial-gradient(circle at 20% 12%, #efc84a30, transparent 52%), radial-gradient(circle at 92% 88%, #d7263d24, transparent 48%), var(--canvas);min-width:320px;min-height:100vh;margin:0}p{font-size:.96rem}h1,h2,h3{font-family:var(--font-heading);letter-spacing:.03em}.page{z-index:1;gap:1.25rem;width:min(1140px,100% - 2.5rem);margin:2rem auto 3rem;display:grid;position:relative}.shape{pointer-events:none;filter:drop-shadow(0 18px 22px #00000026);z-index:-1;position:absolute}.shape-red{background:var(--accent-red);border-radius:26px;width:180px;height:180px;top:72px;right:-64px;transform:rotate(29deg)}.shape-black{background:var(--ink);width:220px;height:60px;top:460px;left:-82px;transform:rotate(-17deg)}.shape-yellow{background:var(--accent-yellow);border-radius:999px;width:110px;height:110px;top:-18px;right:36%}.hero-block{background:var(--panel);border:1px solid var(--border);border-radius:22px;padding:clamp(1.5rem,3vw,2.5rem);animation:.48s fade-up;box-shadow:0 18px 32px #04071014}.eyebrow{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.19em;color:var(--muted);margin-bottom:.8rem;font-size:.74rem}.hero-block h1{letter-spacing:.03em;margin:0;font-size:clamp(2.2rem,8vw,5.2rem);line-height:.95}.hero-copy{max-width:72ch;color:var(--muted);margin:1rem 0 0}.hero-tags{flex-wrap:wrap;gap:.6rem;margin-top:1.2rem;display:flex}.hero-tags span{font-family:var(--font-mono);letter-spacing:.04em;border:1px solid var(--border);background:#ffffffd9;border-radius:999px;padding:.35rem .7rem;font-size:.74rem}.panel{background:var(--panel);border:1px solid var(--border);border-radius:22px;padding:clamp(1rem,2.4vw,1.5rem);animation:.52s fade-up;box-shadow:0 10px 20px #0407100f}.upload-form{gap:1rem;display:grid}.drop-zone{border:2px dashed var(--border-strong);cursor:pointer;background:linear-gradient(to right, #00000008 1px, transparent 1px) 0 0 / 24px 24px, linear-gradient(to bottom, #00000008 1px, transparent 1px) 0 0 / 24px 24px, var(--panel-soft);border-radius:18px;justify-content:center;align-items:center;min-height:300px;transition:border-color .18s,transform .18s,background-color .18s;display:flex;position:relative;overflow:hidden}.drop-zone input{opacity:0;cursor:pointer;position:absolute;inset:0}.drop-zone:hover,.drop-zone.active{border-color:var(--accent-red);transform:translateY(-2px)}.drop-zone-placeholder{text-align:center;color:var(--muted);gap:.45rem;padding:1rem;display:grid}.drop-zone-placeholder strong{font-family:var(--font-heading);color:var(--ink);letter-spacing:.03em;text-transform:uppercase;font-size:clamp(1.2rem,3vw,2rem)}.preview-image{object-fit:cover;width:100%;height:100%;min-height:300px}.upload-meta{background:var(--panel-soft);border:1px solid var(--border);border-radius:14px;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;padding:.85rem;display:grid}.label{text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-size:.72rem;font-family:var(--font-mono);margin:0}.value{word-break:break-word;margin:.45rem 0 0;font-weight:700}.upload-actions{flex-wrap:wrap;gap:.7rem;display:flex}.btn{cursor:pointer;border:1px solid #0000;border-radius:12px;padding:.7rem 1rem;font-size:.95rem;font-weight:700;transition:transform .16s,box-shadow .18s,background-color .18s}.btn:disabled{opacity:.6;cursor:not-allowed}.btn-primary{background:var(--ink);color:var(--panel)}.btn-primary:not(:disabled):hover{transform:translateY(-1px);box-shadow:0 12px 20px #0a0a0a40}.btn-ghost{color:var(--ink);border-color:var(--border-strong);background:0 0}.btn-ghost:not(:disabled):hover{background:var(--panel-soft)}.status-panel,.error-panel{align-items:center;gap:.8rem;display:flex}.status-panel p,.error-panel p{margin:0}.pulse{background:var(--accent-red);border-radius:50%;width:.9rem;height:.9rem;animation:1s infinite pulse}.error-panel{color:#7f0b1f;background:#d7263d14;border-color:#d7263d80}.analysis-panel{gap:1.2rem;display:grid}.analysis-header h2,.results-header h2{margin:.3rem 0;font-size:clamp(1.4rem,5vw,2.4rem)}.analysis-header p{margin:0}.analysis-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:.85rem;display:grid}.analysis-grid article{border:1px solid var(--border);background:var(--panel-soft);border-radius:14px;padding:.9rem}.analysis-grid h3{text-transform:uppercase;letter-spacing:.06em;margin:0;font-size:1rem}.analysis-grid ul{gap:.7rem;margin:.9rem 0 0;padding:0;list-style:none;display:grid}.analysis-grid li{justify-content:space-between;gap:.7rem;font-size:.9rem;display:flex}.analysis-grid li span{color:var(--muted)}.analysis-grid li strong{text-align:right}.palette-list{flex-wrap:wrap;gap:.45rem;margin-top:.9rem;display:flex}.palette-list span,.markers span{border:1px solid var(--border);font-family:var(--font-mono);letter-spacing:.03em;background:#fff;border-radius:999px;padding:.28rem .56rem;font-size:.7rem}.markers{flex-wrap:wrap;gap:.45rem;display:flex}.results-header{justify-content:space-between;align-items:baseline;gap:.8rem;margin-bottom:1rem;display:flex}.results-header p{color:var(--muted);margin:0}.results-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.9rem;display:grid}.result-card{border:1px solid var(--border);background:var(--panel-soft);border-radius:16px;grid-template-columns:170px minmax(0,1fr);display:grid;overflow:hidden}.result-image-wrap{min-height:170px;position:relative}.result-image{object-fit:cover;width:100%;height:100%}.similarity-badge{font-size:.78rem;font-family:var(--font-mono);background:#ffffffe6;border:1px solid;border-radius:999px;padding:.22rem .55rem;font-weight:700;position:absolute;top:.55rem;right:.55rem}.result-content{align-content:start;gap:.5rem;padding:.85rem;display:grid}.result-content h3{margin:0;line-height:1.15}.result-content p{color:var(--muted);margin:0;font-size:.92rem}.result-artist{color:var(--ink);font-weight:700}.source-link{width:fit-content;color:var(--ink);border-bottom:1px solid var(--ink);font-family:var(--font-mono);margin-top:.3rem;font-size:.78rem;text-decoration:none}.source-link:hover{color:var(--accent-red);border-bottom-color:var(--accent-red)}.empty-state{color:var(--muted);margin:0}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.55;transform:scale(1.35)}}@keyframes fade-up{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}@media (width<=980px){.page{width:min(1140px,100% - 1.2rem);margin:1rem auto 2.5rem}.shape{display:none}.upload-meta,.analysis-grid,.results-grid,.result-card{grid-template-columns:1fr}.result-image-wrap{min-height:220px}}