:root{--cream:#fdf6ec;--cream-dark:#f5ede0;--brown:#5c4033;--brown-light:#8b7355;--terracotta:#c65d3e;--sage:#7a8b6f;--sage-light:#e8ede5;--white:#fff;--shadow:0 2px 12px #5c40331a;--shadow-hover:0 8px 24px #5c40332e;--font-body:"Georgia", "Times New Roman", serif;--font-heading:system-ui, -apple-system, "Segoe UI", sans-serif;--radius:12px;--transition:.25s ease}@media (prefers-color-scheme:dark){:root{--cream:#1c1814;--cream-dark:#2a2420;--brown:#e8ddd0;--brown-light:#b8a898;--terracotta:#e8845a;--sage:#98ad8a;--sage-light:#3a3530;--white:#2a2420;--shadow:0 2px 12px #0000004d;--shadow-hover:0 8px 24px #0006}}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;scrollbar-width:thin;scrollbar-color:var(--terracotta) var(--cream-dark)}html::-webkit-scrollbar{width:8px}html::-webkit-scrollbar-track{background:var(--cream-dark)}html::-webkit-scrollbar-thumb{background:var(--terracotta);border-radius:4px}html::-webkit-scrollbar-thumb:hover{background:#b05235}body{font-family:var(--font-body);background:var(--cream);color:var(--brown-light);-webkit-font-smoothing:antialiased;line-height:1.6}#app{flex-direction:column;min-height:100vh;display:flex}.hero{text-align:center;background:linear-gradient(180deg, var(--cream-dark) 0%, var(--cream) 100%);padding:64px 24px 48px}.hero-emoji{margin-bottom:16px;font-size:4rem;display:block}.hero h1{font-family:var(--font-heading);color:var(--brown);margin-bottom:8px;font-size:2.8rem;font-weight:700}.hero-subtitle{color:var(--brown-light);max-width:400px;margin:0 auto;font-size:1.15rem}.filters{flex-wrap:wrap;justify-content:center;gap:8px;max-width:800px;margin:0 auto;padding:24px 24px 8px;display:flex}.filter-chip{font-family:var(--font-heading);border:2px solid var(--sage-light);background:var(--sage-light);color:var(--brown-light);cursor:pointer;transition:all var(--transition);border-radius:20px;padding:8px 20px;font-size:.9rem;font-weight:500}.filter-chip:hover{border-color:var(--terracotta);color:var(--terracotta)}.filter-chip.active{background:var(--terracotta);border-color:var(--terracotta);color:var(--white)}.recipe-grid{flex:1;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:24px;width:100%;max-width:1200px;margin:0 auto;padding:32px 24px;display:grid}.recipe-card{background:var(--cream-dark);border-radius:var(--radius);box-shadow:var(--shadow);cursor:pointer;transition:transform var(--transition), box-shadow var(--transition);flex-direction:column;padding:28px 24px 20px;display:flex}.recipe-card:hover,.recipe-card:focus-visible{box-shadow:var(--shadow-hover);outline:none;transform:translateY(-4px)}.recipe-card.hidden{display:none}.card-emoji{margin-bottom:12px;font-size:3rem}.card-title{font-family:var(--font-heading);color:var(--brown);margin-bottom:8px;font-size:1.3rem;font-weight:600}.card-description{flex:1;margin-bottom:16px;font-size:.95rem;line-height:1.5}.card-meta{font-family:var(--font-heading);color:var(--brown-light);align-items:center;gap:12px;font-size:.82rem;display:flex}.meta-category{background:var(--sage-light);color:var(--sage);border-radius:10px;margin-left:auto;padding:3px 10px;font-size:.78rem;font-weight:600}.modal-overlay{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:100;opacity:1;visibility:visible;transition:opacity var(--transition), visibility var(--transition);background:#00000080;justify-content:center;align-items:center;padding:24px;display:flex;position:fixed;inset:0}.modal-overlay.hidden{opacity:0;visibility:hidden;pointer-events:none}.modal{background:var(--white);width:100%;max-width:640px;max-height:85vh;transition:transform var(--transition);scrollbar-width:thin;scrollbar-color:var(--terracotta) var(--cream-dark);border-radius:16px;padding:36px;position:relative;overflow-y:auto;transform:scale(1);box-shadow:0 24px 48px #0003}.modal::-webkit-scrollbar{width:8px}.modal::-webkit-scrollbar-track{background:var(--cream-dark);border-radius:4px}.modal::-webkit-scrollbar-thumb{background:var(--terracotta);border-radius:4px}.modal::-webkit-scrollbar-thumb:hover{background:#b05235}.modal-overlay.hidden .modal{transform:scale(.95)}.modal-close{cursor:pointer;color:var(--brown-light);transition:background var(--transition);background:0 0;border:none;border-radius:8px;padding:4px 8px;font-size:1.8rem;line-height:1;position:absolute;top:16px;right:16px}.modal-close:hover{background:var(--cream-dark)}.modal-emoji{margin-bottom:12px;font-size:3.5rem;display:block}.modal-title{font-family:var(--font-heading);color:var(--brown);margin-bottom:8px;font-size:1.8rem;font-weight:700}.modal-description{margin-bottom:16px;font-size:1rem}.modal-meta{font-family:var(--font-heading);color:var(--brown-light);border-bottom:1px solid var(--cream-dark);gap:16px;margin-bottom:24px;padding-bottom:20px;font-size:.88rem;display:flex}.modal-body{grid-template-columns:1fr 1.5fr;gap:28px;display:grid}.modal-body h3{font-family:var(--font-heading);color:var(--brown);margin-bottom:12px;font-size:1.05rem;font-weight:600}.modal-ingredients ul{padding:0;list-style:none}.modal-ingredients li{border-bottom:1px solid var(--cream-dark);padding:6px 0;font-size:.92rem}.modal-ingredients li:last-child{border-bottom:none}.modal-steps ol{padding-left:20px}.modal-steps li{padding:6px 0;font-size:.92rem;line-height:1.6}.modal-steps li::marker{color:var(--terracotta);font-weight:700}.footer{text-align:center;font-family:var(--font-heading);color:var(--brown-light);padding:40px 24px;font-size:.88rem}@media (width<=768px){.hero{padding:48px 20px 36px}.hero h1{font-size:2.2rem}.recipe-grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;padding:24px 16px}.modal{max-height:90vh;padding:24px}.modal-body{grid-template-columns:1fr}}@media (width<=480px){.hero-emoji{font-size:3rem}.hero h1{font-size:1.8rem}.recipe-grid{grid-template-columns:1fr}.modal{border-radius:12px;padding:20px}.modal-meta{flex-wrap:wrap;gap:8px}.filters{padding:16px 16px 8px}}