:root{--spacing-half: 4px;--spacing-1: 8px;--spacing-2: 16px;--spacing-4: 32px;--spacing-6: 48px}.column{display:flex;flex-direction:column;margin:0}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(var(--grid-min),1fr))}.row{display:flex;flex-direction:row}.center{align-items:center}.baseline{align-items:baseline}.padding-tight{padding:var(--spacing-half)}.padding-small{padding:var(--spacing-1)}.padding{padding:var(--spacing-2)}.padding-large{padding:var(--spacing-4)}.padding-xlarge{padding:var(--spacing-6)}.gap-tight{gap:var(--spacing-half)}.gap-small{gap:var(--spacing-1)}.gap{gap:var(--spacing-2)}.gap-large{gap:var(--spacing-4)}.gap-xlarge{gap:var(--spacing-6)}.wrap{flex-wrap:wrap}.layout-fill{flex:1}.ds-lede{max-width:60ch;font-size:var(--text-md);color:var(--color-text-muted)}.ds-note{max-width:70ch;font-size:var(--text-sm);color:var(--color-text-muted)}.ds-note code,.ds-spacing-row-label,.ds-type-row-label{font-family:ui-monospace,Menlo,Consolas,monospace}.ds-swatch{display:flex;flex-direction:column;gap:var(--spacing-1)}.ds-swatch-color{height:56px;border-radius:var(--radius-button);border:1px solid var(--color-border)}.ds-swatch-color-large{height:88px;border-radius:var(--radius-card)}.ds-swatch-label{display:flex;flex-direction:column;font-size:var(--text-xs);color:var(--color-text-muted)}.ds-swatch-label strong{font-size:var(--text-sm);color:var(--color-text)}.ds-swatch-role{font-style:italic}.ds-type-scale{display:flex;flex-direction:column;gap:var(--spacing-2)}.ds-type-row{display:flex;align-items:baseline;gap:var(--spacing-2)}.ds-type-row-label{flex-shrink:0;width:7rem;font-size:var(--text-xs);color:var(--color-text-muted)}.ds-type-row-sample{color:var(--color-text)}.ds-spacing-scale{display:flex;flex-direction:column;gap:var(--spacing-1)}.ds-spacing-row{display:flex;align-items:center;gap:var(--spacing-2)}.ds-spacing-row-label{flex-shrink:0;width:11rem;font-size:var(--text-xs);color:var(--color-text-muted)}.ds-spacing-bar{height:var(--spacing-2);background:var(--color-accent-secondary);border-radius:var(--radius-button)}.ds-spacing-row-px{font-size:var(--text-xs);color:var(--color-text-muted)}.ds-radius-demo{display:flex;align-items:center;justify-content:center;width:120px;height:80px;background:var(--color-surface-raised);border:1px solid var(--color-border);font-size:var(--text-xs);color:var(--color-text-muted)}.ds-motion-card{width:160px;padding:var(--spacing-2);transition:transform var(--duration-fast) var(--ease-playful),box-shadow var(--duration-fast) var(--ease-playful),border-color var(--duration-fast) var(--ease-playful)}.ds-motion-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-raised);border-color:var(--color-accent-secondary-on-light)}.ds-motion-card-label{margin:0;font-size:var(--text-sm);color:var(--color-text-muted);text-align:center}@media (prefers-reduced-motion: reduce){.ds-motion-card{transition:none}.ds-motion-card:hover{transform:none}}.ds-demo-button-positive{background:var(--color-positive)}.ds-demo-button-positive:hover{background:var(--color-positive-hover)}.ds-component-card{padding:var(--spacing-2) var(--spacing-4);font-size:var(--text-sm);color:var(--color-text-muted)}.ds-component-pill{min-width:2rem;padding:.2rem .6rem;font-size:var(--text-sm)}.ds-principles{max-width:70ch;margin:0;padding-left:1.2rem;display:flex;flex-direction:column;gap:var(--spacing-1);color:var(--color-text)}.ds-principles code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.9em}.duration-progress{width:100%;height:10px;border-radius:var(--radius-button);background:var(--color-surface-raised);overflow:hidden}.duration-progress-fill{height:100%;background-color:var(--color-accent-secondary-on-light);background-image:repeating-linear-gradient(45deg,color-mix(in srgb,white 20%,transparent) 0 8px,transparent 8px 16px);transition:width 1s linear}.duration-progress-fill-done{background-color:var(--color-positive-on-light)}.duration-progress-caption{margin:0;font-size:.9rem;font-weight:600;color:var(--color-positive-on-light)}.timer-clock{font-variant-numeric:tabular-nums;font-size:1.1rem;padding:.1rem .6rem}.pill.timer-clock{border-radius:var(--radius-button)}.timer-clock-done{background:var(--color-positive);color:var(--color-on-accent)}.timer-done-button{border:none}.timer-clock-compact{padding-right:var(--spacing-2);white-space:nowrap}.timer-button{padding:.3rem .8rem;font-size:.9rem;border:1px solid var(--color-border);border-radius:var(--radius-button);background:none;color:var(--color-text)}.timer-button:hover{background:var(--color-surface-raised)}.step-progress{margin:0;font-size:1rem;color:var(--color-text-muted);font-weight:600}.dependency-notice{margin:0;padding:var(--spacing-2);background:var(--color-surface-raised);border-radius:var(--radius-card);color:var(--color-text-muted);font-size:.9rem}.skip-dependency-link{color:var(--color-positive-on-light);font-weight:600}.skip-dependency-link:hover{color:var(--color-positive-on-light-hover)}.stop-cooking-link{align-self:center;margin-top:var(--spacing-2);color:var(--color-text-muted);font-size:.9rem}.step-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--spacing-2)}.step-card{transition:opacity var(--duration-card-transition),border-color var(--duration-card-transition)}.step-card.current{border-color:var(--color-accent-on-light)}.step-card.completed{opacity:var(--opacity-muted)}.step-card.cooking{border-color:var(--color-accent-secondary-on-light)}.step-card.attention{border-color:var(--color-positive-on-light);animation:step-card-attention-pulse 1.6s ease-in-out infinite}@keyframes step-card-attention-pulse{0%,to{border-color:var(--color-positive-on-light)}50%{border-color:color-mix(in srgb,var(--color-positive-on-light) 35%,transparent)}}@media (prefers-reduced-motion: reduce){.step-card.attention{animation:none}}.step-card>.row{padding-right:var(--spacing-2)}.step-card-summary{display:block;width:100%;padding:var(--spacing-2);background:none;border:none;text-align:left}.step-card-meta strong{color:var(--color-accent-secondary-on-light)}.step-card-number{align-self:center;min-width:1.6rem;height:1.6rem;padding:0 .4rem;font-size:.85rem}.step-card-text{font-size:1.2rem;color:var(--color-text)}.step-card.current .step-card-text{font-size:1.5rem}.step-card-details{padding:0 var(--spacing-2) var(--spacing-2)}.step-card-meta{margin:0;font-size:1.1rem;color:var(--color-text-muted)}.step-card-meta-hint{font-style:italic}.complete-step-button{padding:.8rem 1.6rem;font-size:1.1rem}.complete-step-button:disabled{opacity:.55;cursor:not-allowed}.optional-ingredient-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--spacing-1)}.optional-ingredient-label{flex:1 1 12rem}.optional-ingredient-choice{padding:.4rem .8rem;border-radius:var(--radius-button);border:1px solid var(--color-border);background:transparent;color:var(--color-accent-on-light);font:inherit}.optional-ingredient-choice.selected{background:var(--color-surface-raised);border-color:var(--color-accent-on-light)}.optional-ingredient-hint{font-size:.95rem}.finish-button{padding:1.2rem 2rem;font-size:1.2rem;background:var(--color-positive)}.finish-button:hover{background:var(--color-positive-hover)}@media (max-width: 767px){.step-progress{font-size:.9rem}.step-card.current .step-card-text{font-size:1.3rem}}.recipe-detail-image{width:min(420px,100%);height:320px;border-radius:var(--radius-card);flex-shrink:0}.stat-label{font-size:.75rem;font-weight:600;letter-spacing:.04em;color:var(--color-text-muted)}.stat-value{font-size:1.1rem;color:var(--color-text)}.name{flex:1;color:var(--color-text);border-bottom:1px solid var(--color-border);padding-bottom:.3rem}.quantity{min-width:2.25rem;padding:.2rem .55rem}.ingredient-recipe-time{font-size:.8rem;color:var(--color-text-muted);white-space:nowrap}.ingredient-recipe-link,.reset-progress-link{color:var(--color-accent-on-light)}.ingredient-recipe-link:hover,.reset-progress-link:hover{color:var(--color-accent-on-light-hover)}.start-button{padding:1rem 2rem;font-size:1.1rem}.start-button:disabled{background:var(--color-surface-raised);color:var(--color-text-muted);cursor:not-allowed}.reset-progress-link{align-self:flex-start;font-size:.85rem}.reset-progress-link em{font-style:italic;opacity:var(--opacity-muted)}@media (max-width: 767px){.recipe-detail-image{height:220px}}.recipe-card{display:block;overflow:hidden;transition:border-color var(--duration-card-transition)}.recipe-card:hover{border-color:var(--color-accent-secondary-on-light)}.recipe-image{width:100%;height:200px}.recipe-title{margin:0;font-size:1rem;font-weight:600;text-align:center;color:var(--color-text)}@media (max-width: 767px){.recipe-image{height:90px}}#root{margin:0 auto}.app{width:100%;max-width:1200px;margin:0 auto}:root{--palette-porcelain: #f6ece2;--palette-saffron: #e2a230;--palette-terracotta: #b14d28;--palette-olive: #4f7a4a;--palette-bark: #26281f;--color-background: var(--palette-porcelain);--color-surface: color-mix(in srgb, white 45%, var(--palette-porcelain) 55%);--color-surface-raised: color-mix( in srgb, white 80%, var(--palette-porcelain) 20% );--color-border: color-mix(in srgb, var(--palette-bark) 30%, transparent);--color-text: color-mix( in srgb, var(--palette-porcelain) 6%, var(--palette-bark) 94% );--color-text-muted: color-mix( in srgb, var(--palette-porcelain) 20%, var(--palette-bark) 80% );--color-on-accent: color-mix(in srgb, var(--palette-porcelain) 8%, white 92%);--color-accent: var(--palette-terracotta);--color-accent-hover: color-mix( in srgb, var(--palette-terracotta) 85%, black 15% );--color-accent-secondary: var(--palette-saffron);--color-positive: var(--palette-olive);--color-positive-hover: color-mix( in srgb, var(--palette-olive) 85%, black 15% );--color-accent-on-light: color-mix( in srgb, var(--palette-terracotta) 50%, var(--palette-bark) 50% );--color-accent-on-light-hover: color-mix( in srgb, var(--color-accent-on-light) 80%, black 20% );--color-accent-secondary-on-light: color-mix( in srgb, var(--palette-saffron) 30%, var(--palette-bark) 70% );--color-positive-on-light: color-mix( in srgb, var(--palette-olive) 60%, var(--palette-bark) 40% );--color-positive-on-light-hover: color-mix( in srgb, var(--color-positive-on-light) 80%, black 20% );--radius-card: 16px;--radius-button: 10px;--opacity-muted: .45;--duration-card-transition: .2s;--text-xs: .75rem;--text-sm: .875rem;--text-base: 1rem;--text-md: 1.125rem;--text-lg: 1.25rem;--text-xl: 1.5rem;--text-2xl: 2rem;--text-3xl: 2.5rem;--weight-regular: 400;--weight-semibold: 600;--weight-bold: 700;--duration-fast: .12s;--duration-base: var(--duration-card-transition);--duration-slow: .4s;--ease-standard: cubic-bezier(.4, 0, .2, 1);--ease-playful: cubic-bezier(.34, 1.56, .64, 1);--shadow-raised: 0 8px 20px color-mix(in srgb, var(--palette-bark) 18%, transparent)}.eyebrow{margin:0;font-size:.8rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--color-text-muted)}.page-heading{margin:0;font-size:2rem;color:var(--color-text)}@media (max-width: 767px){.page-heading{font-size:1.75rem}}.cta-button{align-self:flex-start;border:none;font-weight:600;border-radius:var(--radius-button);color:var(--color-on-accent);transition:background var(--duration-card-transition)}.cta-button-accent{background:var(--color-accent)}.cta-button-accent:hover{background:var(--color-accent-hover)}.text-link{padding:0;border:none;background:none;cursor:pointer}.text-link:hover{text-decoration:underline}.text-link-accent{align-self:flex-start;color:var(--color-accent-secondary-on-light);font-size:.95rem;font-weight:600}.recipe-photo{display:block;object-fit:cover}.card-surface{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-card)}.pill{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;background:var(--color-accent-secondary);color:var(--color-text);font-weight:700}:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light;color:var(--color-text);background-color:var(--color-background);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;min-height:100vh}a{color:var(--color-accent-on-light);text-decoration:inherit}a:hover{color:var(--color-accent-on-light-hover)}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:2px solid var(--color-accent-secondary-on-light);outline-offset:2px}