*,:before,:after{box-sizing:border-box;margin:0;padding:0}body{color:#222;background:#f9f9f9;padding:1rem;font-family:system-ui,sans-serif}h1{margin-bottom:.5rem;font-size:1.5rem}.search-form{gap:.5rem;width:100%;margin-bottom:1.5rem;display:flex}.search-form input{border:1px solid #ccc;border-radius:6px;flex:1;padding:.6rem .8rem;font-size:1rem}.search-form button{color:#fff;cursor:pointer;background:#e44d26;border:none;border-radius:6px;padding:.6rem 1.2rem;font-size:1rem}.recipe-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:1rem;display:grid}.recipe-card{cursor:pointer;background:#fff;border-radius:8px;overflow:hidden;box-shadow:0 1px 4px #0000001a}.recipe-card img{aspect-ratio:1;object-fit:cover;width:100%;display:block}.recipe-card p{padding:.5rem;font-size:.9rem;font-weight:500}.recipe-detail{max-width:680px;margin:0 auto}.recipe-detail button{cursor:pointer;background:#fff;border:1px solid #ccc;border-radius:6px;margin-bottom:1rem;padding:.5rem 1rem;font-size:.9rem}.recipe-detail img{border-radius:8px;width:100%;margin-bottom:1rem}.servings-selector{color:#555;align-items:center;gap:.5rem;margin:1rem 0 .5rem;font-size:.95rem;display:flex}.servings-selector select{cursor:pointer;background:#fff;border:1px solid #ccc;border-radius:6px;padding:.3rem .6rem;font-size:.95rem}.ing-list{margin:1rem 0;list-style:none}.ing-row{border-bottom:1px solid #eee;justify-content:space-between;align-items:baseline;gap:1rem;padding:.4rem 0;display:flex}.ing-name{color:#222;font-size:.95rem;font-weight:600}.ing-amount{color:#888;white-space:nowrap;font-size:.9rem}.recipe-detail p{white-space:pre-line;font-size:.95rem;line-height:1.7}.step-list{margin:1.5rem 0;padding:0;list-style:none}.step-item{cursor:pointer;-webkit-user-select:none;user-select:none;background:#fff;border-radius:8px;align-items:flex-start;gap:.75rem;margin-bottom:.5rem;padding:1rem;font-size:1.05rem;line-height:1.6;transition:opacity .2s,font-size .2s;display:flex;box-shadow:0 1px 3px #00000014}.step-item:active{opacity:.7}.step-check{color:#4caf50;border:2px solid #ccc;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:1.5rem;height:1.5rem;margin-top:.1rem;font-size:.85rem;font-weight:700;display:flex}.step-done .step-check{background:#f0faf0;border-color:#4caf50}.step-done{color:#aaa;box-shadow:none;background:#fafafa;font-size:.82rem}