:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;font:16px/145% system-ui,Segoe UI,Roboto,sans-serif}body{margin:0}:root{--accent:#f97316;--accent-light:#fb923c;--accent-dark:#c2410c;--bg-1:#fff7ed;--bg-2:#fffbeb;--ink:#2a1d12;--muted:#8a7361;--border:#f0e0cf;--surface:#fff}*{box-sizing:border-box}.page{background:radial-gradient(circle at 20% 0%, var(--bg-2), var(--bg-1) 60%);min-height:100vh;color:var(--ink);justify-content:center;align-items:flex-start;padding:3rem 1.25rem;font-family:Segoe UI,system-ui,-apple-system,sans-serif;display:flex}.card{background:var(--surface);border:1px solid var(--border);border-radius:20px;width:100%;max-width:600px;padding:2.5rem 2.25rem;box-shadow:0 1px 2px #2a1d120a,0 20px 40px -12px #c2410c2e}.header{text-align:center;margin-bottom:2rem}.header h1{background:linear-gradient(90deg, var(--accent-dark), var(--accent-light));color:#0000;-webkit-background-clip:text;background-clip:text;margin:0 0 .4rem;padding-bottom:5px;font-size:1.7rem;font-weight:800}.subtitle{color:var(--muted);margin:0;font-size:.9rem}.field{flex-direction:column;gap:.6rem;margin-bottom:1.5rem;display:flex}.field-label{color:var(--ink);text-align:left;font-size:.88rem;font-weight:600}.ingredient-grid{flex-wrap:wrap;gap:.5rem;display:flex}.ingredient-chip{border:1.5px solid var(--border);color:var(--muted);cursor:pointer;background:#fffaf3;border-radius:999px;align-items:center;padding:.5rem .9rem;font-size:.85rem;font-weight:500;transition:all .15s;display:inline-flex;position:relative}.ingredient-chip:hover{border-color:var(--accent-light);color:var(--ink)}.ingredient-chip input{opacity:0;pointer-events:none;position:absolute}.ingredient-chip.active{background:linear-gradient(135deg, var(--accent), var(--accent-dark));color:#fff;border-color:#0000;box-shadow:0 4px 12px -2px #c2410c73}.segmented{flex-wrap:wrap;gap:.5rem;display:flex}.segment{border:1.5px solid var(--border);color:var(--muted);cursor:pointer;background:#fffaf3;border-radius:999px;align-items:center;padding:.55rem 1rem;font-size:.85rem;font-weight:500;transition:all .15s;display:inline-flex;position:relative}.segment:hover{border-color:var(--accent-light);color:var(--ink)}.segment input{opacity:0;pointer-events:none;position:absolute}.segment.active{background:linear-gradient(135deg, var(--accent), var(--accent-dark));color:#fff;border-color:#0000;box-shadow:0 4px 12px -2px #c2410c73}.submit{background:linear-gradient(135deg, var(--accent), var(--accent-dark));color:#fff;cursor:pointer;border:none;border-radius:12px;width:100%;margin-top:.5rem;padding:.8rem 1.4rem;font-size:1rem;font-weight:700;transition:transform .1s,box-shadow .1s;box-shadow:0 8px 20px -6px #c2410c80}.submit:hover{transform:translateY(-1px);box-shadow:0 10px 24px -6px #c2410c99}.submit:active{transform:translateY(0)}.submit:disabled{opacity:.75;cursor:wait}.error{color:#e11d48;margin-top:1rem;font-size:.9rem;font-weight:600}.spin-box{text-align:center;border:1.5px solid var(--border);background:linear-gradient(135deg,#fffaf3,#fff1de);border-radius:14px;margin-top:1.5rem;padding:1.8rem 1rem;animation:.6s ease-in-out infinite spin-box-pulse;overflow:hidden}.spin-reel{color:var(--accent-dark);letter-spacing:.02em;font-size:1.5rem;font-weight:800;animation:80ms ease-out spin-flicker}.spin-label{color:var(--muted);margin:.7rem 0 0;font-size:.85rem}.dots span{opacity:0;animation:1s infinite dot-pulse;display:inline-block}.dots span:nth-child(2){animation-delay:.2s}.dots span:nth-child(3){animation-delay:.4s}@keyframes spin-flicker{0%{opacity:.2;filter:blur(3px);transform:translateY(-14px)scale(.92)}to{opacity:1;filter:blur();transform:translateY(0)scale(1)}}@keyframes spin-box-pulse{0%,to{box-shadow:0 0 #f9731640}50%{box-shadow:0 0 0 6px #f973161f}}@keyframes dot-pulse{0%,to{opacity:0}50%{opacity:1}}.result-card{text-align:center;border:1px solid var(--border);background:linear-gradient(160deg,#fffaf3,#fff1de);border-radius:14px;margin-top:1.5rem;padding:1.6rem 1.2rem;animation:.35s ease-out result-pop}@keyframes result-pop{0%{opacity:0;transform:translateY(8px)scale(.97)}to{opacity:1;transform:translateY(0)scale(1)}}.result-label{color:var(--muted);margin:0 0 .3rem;font-size:.85rem;font-weight:600}.result-name{color:var(--accent-dark);margin:0 0 .9rem;font-size:1.6rem;font-weight:800}.result-ingredients{flex-wrap:wrap;justify-content:center;gap:.4rem;display:flex}.ingredient-tag{background:var(--surface);border:1px solid var(--border);color:var(--muted);border-radius:999px;padding:.25rem .7rem;font-size:.78rem;font-weight:600}.ingredient-tag.matched{background:var(--accent);color:#fff;border-color:#0000}