diff --git a/src/Roux/Html.hs b/src/Roux/Html.hs
index 9345403..3fff0e0 100644
--- a/src/Roux/Html.hs
+++ b/src/Roux/Html.hs
@@ -119,16 +119,16 @@ page title content =
                             , ".roux-subsection { font-size: 0.65rem; color: var(--roux-accent); margin: 0 0 6px; letter-spacing: 0.05em; text-transform: uppercase; font-weight: 500; opacity: 0.75; }"
                             , ""
                             , ".roux-ingredient-row { display: flex; align-items: flex-start; gap: 8px; padding: 4px 0; }"
-                            , ".roux-ingredient-row input { margin-top: 5px; accent-color: var(--roux-accent); }"
-                            , ".roux-ingredient-row .name { font-size: 0.9rem; line-height: 1.5; color: var(--roux-text); }"
+                            , ".roux-ingredient-row input { margin-top: 5px; accent-color: var(--roux-accent); border-color: rgba(184,92,56,0.4); background: transparent; }"
+                            , ".roux-ingredient-row .name { font-size: 0.9rem; line-height: 1.5; color: var(--roux-text); transition: opacity 0.15s; }"
                             , ".roux-ingredient-row .qty { font-size: 0.8rem; color: var(--roux-accent); margin-right: 4px; }"
+                            , ".roux-ingredient-row:has(input:checked) { opacity: 0.45; }"
                             , ""
-                            , ".roux-step { display: flex; align-items: flex-start; gap: 12px; padding: 8px 0; }"
-                            , ".roux-step input { margin-top: 6px; accent-color: var(--roux-accent); }"
+                            , ".roux-step { display: flex; align-items: flex-start; gap: 12px; padding: 8px 0; transition: opacity 0.15s; }"
+                            , ".roux-step input { margin-top: 6px; accent-color: var(--roux-accent); border-color: rgba(184,92,56,0.4); background: transparent; }"
                             , ".roux-step .step-label { font-size: 0.75rem; color: var(--roux-accent); font-weight: 500; margin: 0 0 2px; }"
                             , ".roux-step .step-text { font-size: 0.9rem; line-height: 1.65; margin: 0; color: var(--roux-text); }"
-                            , ".roux-step.done { opacity: 0.5; }"
-                            , ".roux-step.done .step-text { text-decoration: line-through; text-decoration-color: var(--roux-accent); }"
+                            , ".roux-step:has(input:checked) { opacity: 0.45; }"
                             , ""
                             , ".roux-note { display: flex; gap: 12px; padding: 8px 0; }"
                             , ".roux-note .ornament { font-size: 1.4rem; color: var(--roux-accent); line-height: 1; margin-top: -1px; }"