.hero-photo{position:relative;overflow:hidden;border-radius:24px;isolation:isolate;padding-left:28px;padding-right:28px}.hero-photo>*:not(.hero-bg-stage){position:relative;z-index:2}.hero-bg-stage{position:absolute;inset:0;z-index:0;overflow:hidden;border-radius:inherit;pointer-events:none}.hero-bg-stage::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(12,62,45,.96) 0%,rgba(18,86,61,.88) 28%,rgba(24,101,72,.68) 50%,rgba(26,103,74,.36) 72%,rgba(26,103,74,.08) 100%);z-index:2}.hero-bg-layer{position:absolute;inset:-2%;background-size:cover;background-position:center;opacity:0;transform:scale(1.025);transition:opacity 2.4s ease-in-out,transform 12s ease-out;will-change:opacity,transform}.hero-bg-layer.is-visible{opacity:1;transform:scale(1.0)}.ingredient-filter-row{display:grid;grid-template-columns:1fr 220px;gap:10px}.ingredient-result{margin-top:20px;padding:18px;border:1px solid var(--line);border-radius:18px;background:#fffdf9}.ingredient-result .ph{width:min(100%,720px);height:auto;aspect-ratio:3/2;border-radius:14px;margin:14px auto;background:#f3eee5}.ingredient-result .ph img{width:100%;height:100%;object-fit:contain;object-position:center}.result-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}.result-head h3{margin:8px 0 0;color:var(--green);font-size:24px}.result-position{font-size:12px;color:var(--muted);background:var(--soft);padding:6px 9px;border-radius:999px}.match-score{margin:12px 0;padding:11px 13px;border-radius:12px;background:#fff1d8;color:#7c571f}.match-score strong{color:#5f4216}.match-score span{color:#9b6d26}@media(max-width:620px){.hero-photo{padding-left:18px;padding-right:18px}.ingredient-filter-row{grid-template-columns:1fr}.hero-bg-stage::after{background:linear-gradient(90deg,rgba(12,62,45,.95) 0%,rgba(18,86,61,.86) 48%,rgba(26,103,74,.46) 80%,rgba(26,103,74,.18) 100%)}.ingredient-result .ph{width:100%}}