*{box-sizing:border-box;margin:0;padding:0}:root{--color-background-primary: #ffffff;--color-background-secondary: #f8fafc;--color-text-primary: #1e293b;--color-text-secondary: #64748b;--color-text-tertiary: #94a3b8;--color-border-secondary: #e2e8f0;--color-border-tertiary: #f1f5f9;--border-radius-md: 8px;--border-radius-lg: 12px;--font-sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif}body{font-family:var(--font-sans);background:var(--color-background-primary);color:var(--color-text-primary);line-height:1.5}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}button:focus-visible,input:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}@media (prefers-reduced-motion: reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}.app{padding:1.5rem 1rem;max-width:640px;margin:0 auto}.section-label{font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--color-text-tertiary);margin-bottom:10px}.input-row{display:flex;align-items:center;gap:8px;margin-bottom:1.5rem}.flour-input-wrap{display:flex;align-items:center;gap:8px;background:var(--color-background-primary);border:.5px solid var(--color-border-secondary);border-radius:var(--border-radius-md);padding:0 14px;flex:1;min-height:48px}.flour-input-wrap input[type=number]{border:none;outline:none;background:transparent;font-size:22px;font-weight:500;color:var(--color-text-primary);width:80px;padding:10px 0}.flour-input-wrap .unit{font-size:14px;color:var(--color-text-tertiary)}.unit-toggle{display:flex;border:.5px solid var(--color-border-secondary);border-radius:var(--border-radius-md);overflow:hidden}.unit-btn{padding:8px 16px;font-size:13px;cursor:pointer;background:transparent;border:none;color:var(--color-text-secondary);transition:all .15s;font-family:var(--font-sans);min-height:44px}.unit-btn:hover{background:var(--color-background-secondary)}.unit-btn.active{background:var(--color-background-secondary);color:var(--color-text-primary);font-weight:500}.chip-grid{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:1.5rem}.chip{padding:7px 14px;border-radius:999px;border:.5px solid var(--color-border-secondary);background:transparent;font-size:13px;cursor:pointer;color:var(--color-text-secondary);transition:all .15s;font-family:var(--font-sans);min-height:36px;white-space:nowrap}.chip:hover{border-color:var(--color-border-secondary);background:var(--color-background-secondary)}.chip.active{background:var(--color-background-secondary);border-color:var(--color-border-secondary);color:var(--color-text-primary);font-weight:500}.chip:focus{outline:2px solid #3b82f6;outline-offset:2px}.result-card{background:var(--color-background-primary);border:.5px solid var(--color-border-tertiary);border-radius:var(--border-radius-lg);overflow:hidden;margin-bottom:1rem;box-shadow:0 1px 3px #0000001a}.result-header{padding:14px 18px;border-bottom:.5px solid var(--color-border-tertiary);display:flex;align-items:center;justify-content:space-between;background:var(--color-background-secondary)}.result-header .title{font-size:14px;font-weight:500;color:var(--color-text-primary)}.result-header .total-badge{font-size:12px;background:var(--color-background-primary);padding:3px 10px;border-radius:999px;color:var(--color-text-secondary);border:.5px solid var(--color-border-secondary)}.ingredient-row{padding:12px 18px;display:flex;align-items:center;gap:12px;border-bottom:.5px solid var(--color-border-tertiary)}.ingredient-row:last-child{border-bottom:none}.bar-wrap{flex:1;height:6px;background:var(--color-background-secondary);border-radius:999px;overflow:hidden}.bar-fill{height:100%;border-radius:999px;transition:width .4s cubic-bezier(.4,0,.2,1)}.ing-name{font-size:13px;color:var(--color-text-primary);width:140px;flex-shrink:0}.ing-amount{font-size:13px;font-weight:500;color:var(--color-text-primary);width:56px;text-align:right;flex-shrink:0}.ing-pct{font-size:12px;color:var(--color-text-tertiary);width:36px;text-align:right;flex-shrink:0}.tip-card{background:var(--color-background-secondary);border-radius:var(--border-radius-md);padding:12px 16px;font-size:13px;color:var(--color-text-secondary);line-height:1.6;margin-bottom:1rem}.tip-card strong{color:var(--color-text-primary);font-weight:500}.xanthan-row{display:flex;align-items:center;justify-content:space-between;padding:10px 18px;background:var(--color-background-secondary);border-radius:var(--border-radius-md);margin-bottom:1.5rem}.xanthan-label{font-size:13px;color:var(--color-text-secondary)}.xanthan-label strong{color:var(--color-text-primary);font-weight:500}.xanthan-amount{font-size:13px;font-weight:500;color:var(--color-text-primary)}@media (max-width: 640px){.app{padding:1rem}.flour-input-wrap input[type=number]{font-size:20px}.chip-grid{gap:6px}.chip{padding:6px 12px;font-size:12px}.ingredient-row{padding:10px 16px;gap:8px}.ing-name{width:120px;font-size:12px}.ing-amount{width:50px;font-size:12px}.ing-pct{width:32px;font-size:11px}.result-header{padding:12px 16px}.xanthan-row{padding:8px 16px}.tip-card{padding:10px 14px;font-size:12px}}@media (min-width: 641px) and (max-width: 1024px){.app{padding:2rem 1.5rem}.chip-grid{max-width:480px}}@media (min-width: 1025px){.app{padding:3rem 1rem;max-width:640px;margin:0 auto}.flour-input-wrap{min-height:52px}.chip:hover{transform:translateY(-1px);box-shadow:0 2px 4px #0000001a}}