*,
*::before,
*::after {
  box-sizing: border-box;
}








[hidden] {
  display: none !important;
}

:root,
[data-palette="mirepoix"] {


  --font-display: "Outfit", "Outfit Fallback", system-ui, sans-serif;
  --font-body: "Outfit", "Outfit Fallback", system-ui, sans-serif;
  --font-mono: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, monospace;


  --index-chip-size: 2.75rem;









  --ground-0: #f1ebe2;
  --ground-1: #ece6dc;
  --ground-2: #fffdf9;
  --ink-1: #2d2a26;
  --ink-2: #6b645b;



  --ink-3: #a09788;
  --line-1: #8a8172;
  --line-2: #e2dbd0;
  --accent: #b33a3a;
  --accent-fill: #b33a3a;
  --accent-deep: #993030;


  --on-fill: #fffdf9;
  --role-danger: #c00000;
  --role-positive: #376037;



  --role-positive-fill: #376037;
  --role-warning: #806128;
  --role-info: #4a6e8a;



  --pigment-rosewater: #dc8a78;
  --pigment-pink: #ea76cb;
  --pigment-mauve: #8839ef;
  --pigment-red: #d20f39;
  --pigment-peach: #fe640b;
  --pigment-green: #40a02b;
  --pigment-teal: #179299;
  --pigment-lavender: #7287fd;




  --tag-cell-0-bg: #f2d1c8;  --tag-cell-0-text: #714f46;
  --tag-cell-1-bg: #f7cae8;  --tag-cell-1-text: #774866;
  --tag-cell-2-bg: #d2b3f5;  --tag-cell-2-text: #5b328d;
  --tag-cell-3-bg: #eea3b0;  --tag-cell-3-text: #7c1d2f;
  --tag-cell-4-bg: #ffc39f;  --tag-cell-4-text: #81411b;
  --tag-cell-5-bg: #b6daab;  --tag-cell-5-text: #355c28;
  --tag-cell-6-bg: #a7d4d5;  --tag-cell-6-text: #245757;
  --tag-cell-7-bg: #c9d0fb;  --tag-cell-7-text: #4a5180;








  --ground: var(--ground-0);
  --text: var(--ink-1);
  --text-soft: var(--ink-2);
















  --text-light: var(--ink-3);
  --text-faint: var(--ink-3);




  --text-placeholder: var(--text-soft);
  --red: var(--accent);








  --red-fill: var(--accent-fill);




  --text-on-fill: var(--on-fill);




  --red-light: color-mix(in srgb, var(--red) 8%, transparent);
  --rule-hairline: var(--line-2);









  --rule-boundary: var(--line-1);






  --wash-faint: var(--ground-1);

  --surface-alt: var(--ground-1);
  --hover-bg: var(--red-light);
  --hover-bg-strong: color-mix(in srgb, var(--accent) 15%, transparent);

  --input-bg: var(--ground-2);
  --accent-hover: var(--accent-deep);
  --scaled-highlight: color-mix(in srgb, var(--role-warning) 22%, transparent);



  --converge-flash: color-mix(in srgb, var(--role-warning) 22%, transparent);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.08);


  --shadow-dialog: 0 4px 24px rgba(0, 0, 0, 0.15);
  --dialog-backdrop: rgba(0, 0, 0, 0.5);


  --scrim: rgba(40, 24, 22, 0.42);
  --aisle-renamed-bg: color-mix(in srgb, var(--role-warning) 12%, transparent);
  --aisle-renamed-border: color-mix(in srgb, var(--role-warning) 35%, transparent);
  --aisle-new-bg: color-mix(in srgb, var(--role-positive) 12%, transparent);
  --aisle-new-border: color-mix(in srgb, var(--role-positive) 35%, transparent);
  --broken-reference-bg: color-mix(in srgb, var(--role-danger) 6%, var(--ground-2));
  --aisle-row-border: var(--line-2);
  --danger-hover-bg: color-mix(in srgb, var(--role-danger) 8%, transparent);



  --tag-bg: var(--ground-1);
  --tag-text: var(--ink-2);



















  --pending-bg: color-mix(in srgb, var(--role-warning) 18%, var(--ground-2));          --pending-text: color-mix(in srgb, var(--role-warning) 70%, var(--ink-1));
  --mirabel-accent-bg: color-mix(in srgb, var(--role-info) 18%, var(--ground-2));   --mirabel-accent-text: color-mix(in srgb, var(--role-info) 70%, var(--ink-1));























  --positive: var(--role-positive);





  --positive-fill: var(--role-positive-fill);
  --warning:  var(--role-warning);
  --danger:   var(--role-danger);
  --info:     var(--role-info);


  --duration-fast: 0.12s;
  --duration-normal: 0.2s;
  --duration-slow: 0.35s;
  --duration-bloop: 0.29s;
  --duration-busy: 1.3s;



  --gingham-gap: 1.1rem;






  --gutter-start: max(var(--gingham-gap), env(safe-area-inset-left, 0px));
  --gutter-end: max(var(--gingham-gap), env(safe-area-inset-right, 0px));









  --nav-gap: 10px;







  --nav-pill-size: 52px;









  --gap: var(--gingham-gap);
  --gap-half: calc(0.5 * var(--gingham-gap));
  --gap-double: calc(2 * var(--gingham-gap));
  --content-card-bg: var(--ground-2);





  --card-border: 1px solid var(--line-2);




  --listing-card-inset: 1.5rem;




  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;


  --radius-xs: 2px;
  --radius-sm: 3px;
  --radius-md: 0.4rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1.25rem;
  --radius-pill: 999px;



  --focus-ring: 2px solid var(--red);
  --focus-ring-offset: 2px;






  --z-raised: 10;
  --z-popover: 20;
  --z-nav: 30;
  --z-nav-overflow: 80;
  --z-overlay: 90;
  --z-toast: 100;


  --type-xs: 0.72rem;
  --type-sm: 0.85rem;
  --type-base: 1rem;
  --type-lg: 1.15rem;
  --type-xl: 1.3rem;
  --type-2xl: 1.4rem;
  --type-3xl: 2.6rem;
  --type-4xl: 3.8rem;
  --type-5xl: 5.6rem;


  --leading-flat: 1;
  --leading-tight: 1.2;
  --leading-snug: 1.35;
  --leading-body: 1.4;
  --leading-relaxed: 1.5;


  --tracking-normal: 0;
  --tracking-tight: -0.01em;
  --tracking-wide: 0.12em;






  --ease-bloop: linear(0, 0.058, 0.18, 0.321, 0.455, 0.573, 0.671, 0.75, 0.812, 0.86, 0.897, 0.924, 0.945, 0.96, 0.971, 0.979, 0.985, 0.989, 0.992, 0.994, 0.996, 0.997, 0.998, 0.999, 1);









  --shadow-press: inset 0 0 0 999px rgba(0, 0, 0, 0.07);





  --red-deep:    var(--accent-hover);
  --red-soft:    var(--red-light);
  --red-soft-2:  var(--hover-bg-strong);













  --destination-current-tint: 15%;
  --destination-current-bg: color-mix(in srgb, var(--accent) var(--destination-current-tint), var(--ground-2));










  --destination-current-ring: var(--red);




  --wordmark-aspect: 2632 / 993;






  --wordmark-optical-shift: 7.50%;


  --pill-bg:     var(--ground-2);



  --pill-border: var(--rule-boundary);




  --pill-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 2px 16px rgba(0, 0, 0, 0.14);




  --pill-shadow-tight: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 1px 6px rgba(0, 0, 0, 0.12);



  --shadow-popover: 0 2px 8px rgba(0, 0, 0, 0.08), 0 8px 24px rgba(0, 0, 0, 0.12);
  --shadow-popover-lg: 0 4px 12px rgba(0, 0, 0, 0.10), 0 12px 32px rgba(0, 0, 0, 0.16);


  --ease-curtain:     cubic-bezier(0.22, 0.61, 0.36, 1);
  --duration-curtain: 0.3s;
}

@media (max-width: 480px) {
  :root { --listing-card-inset: 1rem; }
}

@media (prefers-color-scheme: dark) {
  :root,
  [data-palette="mirepoix"] {

    --ground-0: #191512;
    --ground-1: #2e2a26;
    --ground-2: #211d1a;
    --ink-1: #dcd7d0;
    --ink-2: #a09788;
    --ink-3: #706960;



    --line-1: #7c766c;
    --line-2: #3a3530;














    --accent: #d16868;






    --accent-fill: #c64b4b;
    --accent-deep: #b73939;


    --on-fill: #fffdf9;
    --role-danger: #ee6f5f;



    --role-positive: #8cbb8c;




    --role-positive-fill: #376037;
    --role-warning: #b8862a;





    --role-info: #6e8ba1;
    --pigment-rosewater: #f4dbd6;
    --pigment-pink: #f5bde6;
    --pigment-mauve: #c6a0f6;
    --pigment-red: #ed8796;
    --pigment-peach: #f5a97f;
    --pigment-green: #a6da95;
    --pigment-teal: #8bd5ca;
    --pigment-lavender: #b7bdf8;




    --tag-cell-0-bg: #605652;  --tag-cell-0-text: #f4dbd6;
    --tag-cell-1-bg: #614d57;  --tag-cell-1-text: #f1c2e2;
    --tag-cell-2-bg: #53445c;  --tag-cell-2-text: #d0b9e5;
    --tag-cell-3-bg: #5e3d3f;  --tag-cell-3-text: #e5afb3;
    --tag-cell-4-bg: #614738;  --tag-cell-4-text: #eabea3;
    --tag-cell-5-bg: #49563f;  --tag-cell-5-text: #b5d9a5;
    --tag-cell-6-bg: #41544f;  --tag-cell-6-text: #a2d6cc;
    --tag-cell-7-bg: #4e4d5d;  --tag-cell-7-text: #c5c7e9;






    --red-light: color-mix(in srgb, var(--red) 12%, transparent);
    --hover-bg: rgba(255, 255, 255, 0.04);
    --hover-bg-strong: color-mix(in srgb, var(--accent) 22%, transparent);



    --shadow-dialog: 0 4px 24px rgba(0, 0, 0, 0.3);
    --dialog-backdrop: rgba(0, 0, 0, 0.65);




    --aisle-renamed-bg: color-mix(in srgb, var(--role-warning) 15%, transparent);
    --aisle-renamed-border: color-mix(in srgb, var(--role-warning) 30%, transparent);
    --aisle-new-bg: color-mix(in srgb, var(--role-positive) 15%, transparent);
    --aisle-new-border: color-mix(in srgb, var(--role-positive) 30%, transparent);
    --converge-flash: color-mix(in srgb, var(--role-warning) 26%, transparent);


    --red-deep:    var(--accent-hover);
    --red-soft:    var(--red-light);
    --red-soft-2:  var(--hover-bg-strong);





    --pill-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35), 0 2px 16px rgba(0, 0, 0, 0.45);


    --pill-shadow-tight: 0 0 0 1px rgba(0, 0, 0, 0.35), 0 1px 6px rgba(0, 0, 0, 0.40);



    --shadow-popover: 0 0 0 1px rgba(0, 0, 0, 0.35), 0 8px 24px rgba(0, 0, 0, 0.45);
    --shadow-popover-lg: 0 0 0 1px rgba(0, 0, 0, 0.40), 0 12px 32px rgba(0, 0, 0, 0.50);


    --shadow-press: inset 0 0 0 999px rgba(255, 255, 255, 0.06);
  }
}









[data-palette="catppuccin"],
:root[data-palette="catppuccin"] {

  --ground-0: #e6e9ef;
  --ground-1: #dce0e8;
  --ground-2: #eff1f5;
  --ink-1: #4c4f69;
  --ink-2: #5c5f77;
  --ink-3: #8c8fa1;
  --line-1: #6c6f85;
  --line-2: #ccd0da;



  --accent: #2761d9;
  --accent-fill: #2761d9;
  --accent-deep: #2e5ec4;
  --on-fill: #eff1f5;
  --role-danger: #c5153e;


  --role-positive: #47734d;
  --role-positive-fill: #47734d;
  --role-warning: #725f55;


  --role-info: #3a6f87;
  --pigment-rosewater: #dc8a78;
  --pigment-pink: #ea76cb;
  --pigment-mauve: #8839ef;
  --pigment-red: #d20f39;
  --pigment-peach: #fe640b;
  --pigment-green: #40a02b;
  --pigment-teal: #179299;
  --pigment-lavender: #7287fd;




  --destination-current-tint: 4%;






  --destination-current-ring: var(--text-soft);




  --tag-cell-0-bg: #ead7d6;  --tag-cell-0-text: #6a5b6c;
  --tag-cell-1-bg: #eed2eb;  --tag-cell-1-text: #6d577e;
  --tag-cell-2-bg: #d5c3f4;  --tag-cell-2-text: #614798;
  --tag-cell-3-bg: #e8b9c6;  --tag-cell-3-text: #902e51;
  --tag-cell-4-bg: #f3cebb;  --tag-cell-4-text: #775452;
  --tag-cell-5-bg: #c3ddc3;  --tag-cell-5-text: #49625a;
  --tag-cell-6-bg: #b9d9de;  --tag-cell-6-text: #3f5f75;
  --tag-cell-7-bg: #d0d7f7;  --tag-cell-7-text: #545b8a;

}

@media (prefers-color-scheme: dark) {
  [data-palette="catppuccin"],
  :root[data-palette="catppuccin"] {

    --ground-0: #1e2030;
    --ground-1: #363a4f;
    --ground-2: #24273a;
    --ink-1: #cad3f5;
    --ink-2: #a5adcb;
    --ink-3: #8087a2;
    --line-1: #8087a2;
    --line-2: #494d64;
    --accent: #8aadf4;
    --accent-fill: #8aadf4;
    --accent-deep: color-mix(in srgb, #8aadf4 85%, #cad3f5);
    --on-fill: #24273a;
    --role-danger: #ed8796;
    --role-positive: #a6da95;
    --role-positive-fill: #a6da95;
    --role-warning: #eed49f;
    --role-info: #7dc4e4;
    --pigment-rosewater: #f4dbd6;
    --pigment-pink: #f5bde6;
    --pigment-mauve: #c6a0f6;
    --pigment-red: #ed8796;
    --pigment-peach: #f5a97f;
    --pigment-green: #a6da95;
    --pigment-teal: #8bd5ca;
    --pigment-lavender: #b7bdf8;

    --destination-current-tint: 4%;


    --destination-current-ring: var(--text-soft);




    --tag-cell-0-bg: #585461;  --tag-cell-0-text: #f4dbd6;
    --tag-cell-1-bg: #584d65;  --tag-cell-1-text: #f5bde6;
    --tag-cell-2-bg: #4d4569;  --tag-cell-2-text: #c7acf6;
    --tag-cell-3-bg: #563f51;  --tag-cell-3-text: #e1a2b7;
    --tag-cell-4-bg: #58484b;  --tag-cell-4-text: #f2ac86;
    --tag-cell-5-bg: #455451;  --tag-cell-5-text: #a6da95;
    --tag-cell-6-bg: #3e535e;  --tag-cell-6-text: #8bd5ca;
    --tag-cell-7-bg: #494d6a;  --tag-cell-7-text: #b7bdf8;

  }
}








:root {
  --sketch-ink: var(--ink-1);
  --sketch-red: var(--pigment-red);
  --sketch-yellow: #df8e1d;
  --sketch-green: var(--pigment-green);
  --sketch-blue: #1e66f5;
}

@media (prefers-color-scheme: dark) {
  :root {
    --sketch-yellow: #eed49f;
    --sketch-blue: #8aadf4;
  }
}

.recipe-sketch { display: block; width: 100%; height: auto; }
.recipe-sketch__ink { fill: var(--sketch-ink); }
.recipe-sketch__red { fill: var(--sketch-red); }
.recipe-sketch__yellow { fill: var(--sketch-yellow); }
.recipe-sketch__green { fill: var(--sketch-green); }
.recipe-sketch__blue { fill: var(--sketch-blue); }














.palette-option[data-palette] .palette-swatch--page { background: var(--ground-0); }
.palette-option[data-palette] .palette-swatch--surface { background: var(--ground-2); }
.palette-option[data-palette] .palette-swatch--wash { background: var(--ground-1); }
.palette-option[data-palette] .palette-swatch--body { background: var(--ink-1); }
.palette-option[data-palette] .palette-swatch--secondary { background: var(--ink-2); }








html {
  color-scheme: light dark;




  accent-color: var(--red);
  font-size: 18px;










  scroll-padding-top: calc(var(--nav-top-height, 3.5rem) + var(--space-2));
  touch-action: manipulation;
  scrollbar-gutter: stable;
  background-color: var(--ground);
}







body,
html {
  margin: 0;
  padding: 0;
}

body {
  padding: env(safe-area-inset-top, 0px) var(--gutter-end) 0 var(--gutter-start);
  font-family: var(--font-body);
  color: var(--text);
  line-height: var(--leading-relaxed);




  background-color: var(--ground);
  position: relative;
  isolation: isolate;
}


.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.wordmark { display: inline-block; line-height: 0; }
.wordmark__glyph {
  display: block;
  aspect-ratio: var(--wordmark-aspect);
  background-color: currentColor;
  -webkit-mask-image: url("/assets/wordmark-e4669a4f.svg"); mask-image: url("/assets/wordmark-e4669a4f.svg");
  -webkit-mask-repeat: no-repeat;          mask-repeat: no-repeat;
  -webkit-mask-position: center;           mask-position: center;
  -webkit-mask-size: contain;              mask-size: contain;
}
















.icon-mask {
  display: inline-block;
  flex-shrink: 0;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center;  mask-position: center;
  -webkit-mask-size: contain;     mask-size: contain;
}
.icon-mask--size-15 { width: 15px; height: 15px; }
.icon-mask--size-16 { width: 16px; height: 16px; }
.icon-mask--size-18 { width: 18px; height: 18px; }







@media (forced-colors: active) {
  .icon-mask {
    forced-color-adjust: none;
    background-color: ButtonText;
  }
}





.skip-link {
  position: fixed;
  top: 0.5rem;
  left: max(0.5rem, env(safe-area-inset-left, 0px));
  z-index: var(--z-overlay);
  padding: 0.5rem 0.875rem;
  background: var(--ground);
  color: var(--text);
  border: 1.5px solid var(--rule-hairline);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transform: translateY(calc(-100% - 0.75rem));
  transition: transform 120ms ease-out;
}
.skip-link:focus {
  transform: translateY(0);
}







main[tabindex="-1"]:focus {
  outline: none;
}







.policy-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  max-width: 41rem;
  margin: 0 auto var(--gingham-gap);
  padding: var(--space-3) var(--space-4);
  color: var(--text);
  background: var(--surface-alt);
  border: 1px solid var(--rule-hairline);
}
.policy-banner p {
  margin: 0;
  flex: 1 1 20rem;
}








.policy-banner a,
.read-only-banner a {
  color: inherit;
}






.read-only-banner {
  max-width: 41rem;
  margin: 0 auto var(--gingham-gap);
  padding: var(--space-3) var(--space-4);
  color: var(--text);
  background: var(--surface-alt);
  border: 1px solid var(--rule-hairline);
  border-left: 3px solid var(--warning);
}
.read-only-banner p {
  margin: 0;
}


.custom-checkbox {
  appearance: none;
  -webkit-appearance: none;
  width: 1rem;
  height: 1rem;


  border: 1.5px solid var(--rule-boundary);
  border-radius: var(--radius-xs);
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
}

.custom-checkbox:checked {
  background-color: var(--red);
  border-color: var(--red);
}

.custom-checkbox:checked::after {
  content: '\2713';
  color: var(--text-on-fill);
  font-size: 0.75rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}


.btn {
  appearance: none;
  -webkit-appearance: none;
  font-family: var(--font-body);
  font-size: 0.85rem;
  background: var(--ground);
  border: 1px solid var(--rule-hairline);
  border-radius: var(--radius-sm);
  padding: 0.3rem 0.75rem;
  color: var(--text);
  cursor: pointer;
  text-decoration: none;
  line-height: var(--leading-relaxed);
  transition: background-color var(--duration-fast) ease, border-color var(--duration-fast) ease, color var(--duration-fast) ease, box-shadow var(--duration-fast) ease;
}

@media (any-hover: hover) {
  .btn:hover {
    color: var(--text);
    border-color: var(--text);
  }
}





.btn:active {
  border-color: var(--text);
  box-shadow: var(--shadow-press);
}














.btn:focus-visible,
.btn-ghost:focus-visible,
.btn-link:focus-visible,
button:focus-visible,
a:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

.btn-primary {
  background: var(--red-fill);
  color: var(--text-on-fill);
  border-color: var(--red-fill);
}

@media (any-hover: hover) {
  .btn-primary:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
  }
}

.btn-primary:active {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  box-shadow: var(--shadow-press);
}

.btn-danger {
  color: var(--danger);
  border-color: var(--danger);
}

@media (any-hover: hover) {
  .btn-danger:hover {
    background: var(--danger-hover-bg);
    color: var(--danger);
    border-color: var(--danger);
  }
}

.btn-danger:active {
  background: var(--danger-hover-bg);
  color: var(--danger);
  border-color: var(--danger);
  box-shadow: var(--shadow-press);
}

.btn-sm {
  font-size: 0.8rem;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
}

.btn-link {
  all: unset;
  cursor: pointer;
  color: var(--red);
  text-decoration: underline dotted;
  font-family: var(--font-body);
}

@media (any-hover: hover) {
  .btn-link:hover {
    text-decoration-style: solid;
  }
}


.btn-link:active {
  color: var(--accent-hover);
  text-decoration-style: solid;
}




.btn-link:disabled {
  cursor: default;
  color: var(--text-soft);
  text-decoration: none;
}

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-family: var(--font-body);
  font-size: 0.85rem;
  padding: 0.3rem 0.6rem;
  border: none;
  border-radius: var(--radius-md);
  background: none;
  color: var(--text-soft);
  cursor: pointer;
  text-decoration: none;
  transition: color var(--duration-fast) ease, background var(--duration-fast) ease;
}

@media (any-hover: hover) {
  .btn-ghost:hover {
    color: var(--red);
    background: var(--hover-bg);
  }
}

.btn-ghost:active {
  color: var(--red);
  background: var(--hover-bg);
}






.btn-ghost.btn-sm {
  font-size: 0.8rem;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
}

.btn-icon-round {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: 1px solid var(--rule-boundary);
  border-radius: 50%;
  background: none;







  color: var(--text-soft);
  cursor: pointer;
  font-size: 1rem;
  line-height: var(--leading-flat);
  flex-shrink: 0;
  transition: color var(--duration-fast) ease, border-color var(--duration-fast) ease;
}

@media (any-hover: hover) {
  .btn-icon-round:hover {
    color: var(--text);
    border-color: var(--text-soft);
  }
}

.btn-icon-round:active {
  color: var(--text);
  border-color: var(--text-soft);
  box-shadow: var(--shadow-press);
}

.btn-icon-round:disabled {
  opacity: 0.3;
  cursor: default;
}

@media (any-hover: hover) {
  .btn-icon-round.btn-danger:hover {
    color: var(--danger);
    border-color: var(--danger);
  }
}

.btn-icon-round.btn-danger:active {
  color: var(--danger);
  border-color: var(--danger);
}

@media (any-hover: hover) {
  .btn-icon-round.btn-primary:hover {
    color: var(--red);
    border-color: var(--red);
  }
}

.btn-icon-round.btn-primary:active {
  color: var(--red);
  border-color: var(--red);
}

.btn-icon-round-lg {
  width: 2.25rem;
  height: 2.25rem;
  flex-shrink: 0;
}

.btn-pill {
  padding: 0.25rem 0.75rem;
  border: 1px solid var(--rule-hairline);
  border-radius: var(--radius-pill);
  background: transparent;
  font-size: 0.85rem;
  font-family: var(--font-body);
  color: var(--text);
  cursor: pointer;
  transition: background var(--duration-fast) ease, border-color var(--duration-fast) ease;
}

@media (any-hover: hover) {
  .btn-pill:hover {
    background: var(--hover-bg);
    border-color: var(--red);
  }
}

.btn-pill:active {
  background: var(--hover-bg);
  border-color: var(--red);
}

.btn-pill.active,
.btn-pill[data-active] {
  background: var(--red-fill);
  color: var(--text-on-fill);
  border-color: var(--red-fill);
}




.btn-pill.active:active,
.btn-pill[data-active]:active {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  box-shadow: var(--shadow-press);
}



.input-base {
  font-family: var(--font-body);
  font-size: 0.85rem;
  padding: 0.3rem 0.5rem;
  border: 1px solid var(--rule-boundary);
  border-radius: var(--radius-sm);
  background: var(--input-bg);
  color: var(--text);
  box-sizing: border-box;
  outline: none;
}

.input-base:focus {
  outline: var(--focus-ring);
  outline-offset: -1px;
  border-color: var(--red);
}

.input-base::placeholder {
  color: var(--text-placeholder);
}












.field-hint {
  display: block;
  font-size: 0.78rem;
  color: var(--text-soft);
  line-height: var(--leading-body);
  margin-bottom: 0.15rem;
}

.input-lg {
  font-size: 1rem;
  padding: 0.5rem 0.75rem;
}

.input-sm {
  width: 4.5rem;
  text-align: right;
}

.input-inline {
  padding: 0.25rem 0.4rem;
  font-size: 0.85rem;
}

.form-helper {
  color: var(--text-soft);
  font-size: 0.875rem;
  margin-top: 0.25rem;
}











@media (pointer: coarse) {
  input,
  select,
  textarea,
  .input-base:not(.input-lg),
  .input-inline:not(.input-lg) {
    font-size: var(--touch-input-floor, 16px);
  }
}



.collapse-header {
  margin: 0;
  padding: 0;
  list-style: none;
}

.collapse-header summary {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  list-style: none;
  user-select: none;
}






.collapse-header summary::before {
  content: '';
  display: inline-block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0.3rem 0 0.3rem 0.45rem;
  border-color: transparent transparent transparent var(--text-soft);
  transition: transform var(--duration-fast) ease;
  flex-shrink: 0;
}

.collapse-header[open] summary::before {
  transform: rotate(90deg);
}

.collapse-header summary::-webkit-details-marker {
  display: none;
}

.collapse-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--duration-fast) ease;
}

.collapse-header[open] + .collapse-body,
.collapse-header[open] ~ .collapse-body {
  grid-template-rows: 1fr;
}

.collapse-inner {
  min-height: 0;
  overflow: hidden;
}




.no-transition { transition: none !important; }



main a {
  color: var(--red);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--red) 45%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--duration-normal) ease, text-decoration-color var(--duration-normal) ease;
}

@media (any-hover: hover) {
  main a:hover {
    color: var(--red-deep);
    text-decoration-color: var(--red-deep);
  }
}












:where(a:focus-visible) {
  border-radius: var(--radius-xs);
}

main {
  position: relative;





  max-width: 41rem;
  margin: 0 auto var(--gingham-gap);
  padding: var(--gap-double) var(--gap-double) 5rem;
  background: var(--content-card-bg);
  border: 1px solid var(--rule-boundary);



  border-radius: var(--radius-lg);
  box-shadow: 0 1px 2px rgba(31, 26, 20, 0.04), 0 6px 24px rgba(31, 26, 20, 0.05);


  min-height: calc(100dvh - 2 * var(--gingham-gap) - 3rem);
}

@media (prefers-color-scheme: dark) {


  main {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.30), 0 10px 30px rgba(0, 0, 0, 0.30);
  }
}







main > *:not(dialog) {
  position: relative;
}



:where(.recipe, .recipe-listing) > header,
.page-header {
  text-align: center;
  margin-bottom: var(--gap-double);
}

:where(.recipe, .recipe-listing) > header h1,
.page-header h1 {
  font-family: var(--font-display);
  font-size: 3.8rem;
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin: 0 0 var(--gap-half);




  overflow-wrap: break-word;
}

:where(.recipe, .recipe-listing) > header p,
.page-header p {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.3rem;
  margin-top: 0;
  color: var(--text-soft);
}

:where(.recipe) > header .recipe-meta {
  font-style: normal;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-top: 1rem;
  color: var(--text-soft);
  text-align: center;
}

:where(.recipe) > header .recipe-yield {
  font-family: var(--font-body);
  font-style: normal;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-soft);
  text-align: center;
  margin-top: 0.25rem;
}

:where(.recipe) > header .recipe-meta a {
  color: inherit;
  text-decoration: none;
}

@media (any-hover: hover) {
  :where(.recipe) > header .recipe-meta a:hover {
    text-decoration: underline;
  }
}

.recipe-tags {
  margin-top: 0.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  justify-content: center;
}

.recipe-tag-pill {
  border: none;
  cursor: pointer;
  font-size: 0.68rem;
  letter-spacing: 0.05em;
}

@media (any-hover: hover) {
  .recipe-tag-pill:hover { opacity: 0.8; }
}


.scale-bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 0.6rem;
}

.scale-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--text-soft);
  text-decoration: none;

  background: none;
  border: 0;
  font-family: inherit;
  cursor: pointer;
  font-size: 0.85rem;
  padding: 0.3rem 0.6rem;
  border-radius: var(--radius-md);
  user-select: none;
  transition: color var(--duration-normal) ease, background-color var(--duration-slow) ease-out;
}

@media (any-hover: hover) {
  .scale-toggle:hover {
    color: var(--red);
    background-color: var(--hover-bg);
  }
}

.scale-toggle::before {
  content: '';
  display: inline-block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0.3rem 0 0.3rem 0.45rem;
  border-color: transparent transparent transparent currentColor;
  transition: transform var(--duration-fast) ease;
}

.scale-bar.open .scale-toggle::before {
  transform: rotate(90deg);
}







.recipe-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
}

:where(.recipe-listing) > header > .recipe-actions,
.page-header > .recipe-actions {
  margin-top: 0.6rem;
}

.recipe-actions-dot {


  color: var(--text-light);
  font-size: 0.85rem;
  line-height: var(--leading-flat);
}

.recipe-actions-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
}





.recipe-actions-inline {
  display: contents;
}





.draft-menu-age {
  margin-left: auto;
  padding-left: 0.75rem;
  color: var(--text-soft);
  font-size: 0.8rem;
  white-space: nowrap;
}







.recipe-actions--secondary :is(.btn-ghost, .recipe-actions-dot, .menu-toggle) {
  font-size: calc(0.85rem * 0.85);
}









.recipe-actions--secondary :where(.btn-ghost, .recipe-actions-dot) {
  color: var(--text-soft);
}



.recipe-actions--secondary .menu-toggle {
  padding: 0.3rem 0.6rem;
}





@media (max-width: 480px) {
  .recipe-actions-stack .recipe-actions-dot {
    display: none;
  }
}



.scale-controls {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  transition: grid-template-rows var(--duration-fast) ease;
}

.scale-bar.open .scale-controls {
  grid-template-rows: 1fr;
}

.scale-controls-inner {
  min-height: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

.scale-controls-center {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.5rem;
  min-height: 0;
  padding: 0.5rem 0.25rem;
}

.scale-controls-center > :first-child {
  justify-self: end;
}

.scale-controls-center > :last-child {
  justify-self: start;
}

.scale-input-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.scale-presets {
  display: flex;
  gap: 0.25rem;
}

.scale-preset {
  line-height: var(--leading-flat);
}

.scale-preset.active {
  background: var(--red-fill);
  border-color: var(--red-fill);
  color: var(--text-on-fill);
}

.scale-divider {
  width: 1px;
  height: 1.25rem;
  background: var(--rule-hairline);
}

.scale-input {
  text-align: center;
}




.scale-input-label {
  font-size: 0.78rem;
  color: var(--text-soft);
  white-space: nowrap;
}

.scale-input.invalid,
.scale-input.invalid:focus {
  outline: 2px solid var(--danger);
  outline-offset: -1px;
  border-color: var(--danger);
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 8%, var(--input-bg));
}





.scale-reset.is-hidden {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}














@media screen and (max-width: 520px) {
  .scale-controls-center {
    grid-template-columns: 1fr;
    gap: 0.375rem;
    justify-items: center;
  }



  .scale-controls-center > :first-child,
  .scale-controls-center > :last-child {
    justify-self: center;
  }



  .scale-controls-center > .scale-divider {
    width: 4rem;
    height: 1px;
  }
}

.scalable.scaled {
  background-color: var(--scaled-highlight);
  border-radius: var(--radius-xs);
  padding: 0 1px;
}

.recipe-meta .scalable.scaled,
.recipe-yield .scalable.scaled {
  background-color: transparent;
}

:where(.recipe, .recipe-listing) > header::after,
.page-header::after {
  content: "";
  display: block;
  width: 40px;
  height: 1px;
  background: var(--red);
  margin: var(--gap-double) auto 0;
}




#recipe-history { display: contents; }


:where(.recipe, .embedded-recipe, .recipe-listing) section {
  margin-top: 2.5rem;
  break-inside: avoid;
}

:where(.recipe, .embedded-recipe, .recipe-listing) section > ul {
  column-count: 2;
  column-gap: 2.5rem;
  list-style: none;
  padding-left: 0;
}

:where(.recipe, .embedded-recipe, .recipe-listing) section > ul li {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

:where(.recipe, .embedded-recipe, .recipe-listing) section > ul li a {
  color: var(--text);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 400;
  transition: color var(--duration-normal);
}

@media (any-hover: hover) {
  :where(.recipe, .embedded-recipe, .recipe-listing) section > ul li a:hover {
    color: var(--red);
  }
}

:where(.recipe, .embedded-recipe, .recipe-listing) section h2 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 400;
  line-height: var(--leading-snug);
  text-transform: none;
  letter-spacing: normal;
  margin-top: 3.5rem;
  margin-bottom: 1.25rem;
  border-bottom: none;
  padding-bottom: 0;
}

:where(.recipe, .embedded-recipe, .recipe-listing) section:first-of-type h2 {
  margin-top: 0;
}



.recipe-listing section {
  margin-top: var(--gap-double);
}




.recipe-index section[data-recipe-filter-target="category"] + section[data-recipe-filter-target="category"] {
  border-top: 1px solid var(--rule-boundary);
  padding-top: var(--gap-double);
}




.recipe-index [data-controller~="menu-toggle"] > section:first-of-type {
  margin-top: 0;
}





















.recipe-listing section h2 {
  font-family: var(--font-display);
  font-size: 1.9rem;
  font-weight: 400;


  line-height: 1.15;
  text-transform: none;
  letter-spacing: normal;
  color: var(--text);
  margin: 3rem 0 0;
  padding-bottom: 0;
  border-bottom: none;
}


































.dial {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
  height: var(--index-chip-size);
  padding-inline: var(--space-4) var(--space-3);
  background: var(--pill-bg);
  border: 1px solid var(--pill-border);
  border-radius: var(--radius-pill);
  box-shadow: var(--pill-shadow);
  color: var(--text-soft);
  font-family: var(--font-display);
  font-size: 1.15rem;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
}



.dial--back {
  padding-inline: var(--space-3) var(--space-4);
}

.dial--back .dial__caret {
  transform: rotate(90deg);
}






.dial--label {


  padding-inline: var(--space-4);
  cursor: default;
}







.dial__caret {
  flex-shrink: 0;
  overflow: visible;
}







.dial__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-block: 0.25em;
  margin-block: -0.25em;
}

@media (any-hover: hover) {
  .dial:hover { color: var(--red); background: var(--pill-bg); }
  .dial--label:hover { color: var(--text-soft); }
}

.dial:focus-visible,
.index-tool:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}







.dial[popovertarget]:has(+ [popover]:popover-open) {
  color: var(--red);
  background: var(--pill-bg);
}

.dial[popovertarget]:has(+ [popover]:popover-open) .brand__caret-g { transform: rotate(90deg); }
.dial[popovertarget]:has(+ [popover]:popover-open) .brand__caret-l { transform: translateX(1.5px); }
.dial[popovertarget]:has(+ [popover]:popover-open) .brand__caret-r { transform: translateX(-1.5px); }



.index-tools {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
  pointer-events: none;
}

.index-tools > * {
  pointer-events: auto;
}





.index-tool {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  flex-shrink: 0;
  box-sizing: border-box;
  height: var(--index-chip-size);
  padding-inline: var(--space-4);
  background: var(--pill-bg);
  border: 1px solid var(--pill-border);
  border-radius: var(--radius-pill);
  box-shadow: var(--pill-shadow);
  color: var(--text-soft);
  font-family: var(--font-body);
  font-size: var(--type-sm);
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--duration-fast), border-color var(--duration-fast), background var(--duration-fast);
}


.index-tool svg {
  flex-shrink: 0;
}

@media (any-hover: hover) {
  .index-tool:hover { color: var(--red); background: var(--pill-bg); border-color: var(--red); }
}









@media (any-hover: hover) {
  :is(.dial, .index-tool):not(.dial--label):hover {
    background-image: linear-gradient(var(--red-soft), var(--red-soft));
  }
}

:is(.dial, .index-tool):not(.dial--label):active {
  background-image: linear-gradient(var(--red-soft-2), var(--red-soft-2));
}

.dial:not(.dial--label):active,
.index-tool:active {
  color: var(--red-deep);
  background-color: var(--pill-bg);
}







@media (prefers-color-scheme: dark) and (any-hover: hover) {
  :is(.dial, .index-tool):not(.dial--label):hover {
    color: color-mix(in srgb, var(--red) 60%, var(--text));
  }
}

@media (prefers-color-scheme: dark) {
  .dial:not(.dial--label):active,
  .index-tool:active {
    color: color-mix(in srgb, var(--red) 60%, var(--text));
    background-color: var(--pill-bg);
  }
}






@media (max-width: 40rem) {
  .index-tool--compact {
    width: var(--index-chip-size);
    padding-inline: 0;
    justify-content: center;
  }

  .index-tool--compact > span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}



.index-tool--icon {
  justify-content: center;
  width: var(--index-chip-size);
  padding-inline: 0;
}

.index-showme:has(+ .index-showme-pop:popover-open) {
  color: var(--red);
  background: var(--pill-bg);
  border-color: var(--red);
}












.index-showme--on {
  background: var(--pill-bg);
  border-color: var(--red);
  color: var(--red);
  font-weight: 600;
}




.index-showme__count:empty {
  display: none;
}

.index-showme__count {
  display: inline-grid;
  place-items: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding-inline: 0.35rem;
  border-radius: var(--radius-pill);
  font-size: 0.72rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}




.index-showme--on .index-showme__count {
  background: var(--red-fill);
  color: var(--text-on-fill);
}




.index-contents {
  --kebab-pop-min-width: 16rem;
  padding: var(--space-2);
}

.index-contents__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.index-contents__rule {
  height: 1px;
  margin: var(--space-2) var(--space-3);
  background: var(--rule-boundary);
}

.index-contents__link {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  box-sizing: border-box;
  min-height: var(--index-chip-size);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  color: var(--text-soft);
  background: var(--content-card-bg);
  font-family: var(--font-display);
  font-size: 1.15rem;
  text-decoration: none;
}

@media (any-hover: hover) {
  .index-contents__link:hover { background: var(--hover-bg); color: var(--red); }
}

.index-contents__link:active {
  background: var(--hover-bg);
}

.index-contents__link[aria-current="page"] {
  color: var(--text);
  background: var(--content-card-bg);
}

.index-contents__link[aria-current="page"]::before {
  content: "✓";
  font-family: var(--font-body);
  font-size: var(--type-sm);
  color: var(--red);
}




.index-contents__link.filtered-empty {
  opacity: 0.45;
}

.index-contents__link:focus-visible {
  outline: var(--focus-ring);
  outline-offset: calc(-1 * var(--focus-ring-offset));
}

.index-contents__edit {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  min-height: var(--index-chip-size);
  padding: var(--space-2) var(--space-3);
  border: 0;
  border-radius: var(--radius-md);
  color: var(--text-soft);
  background: var(--content-card-bg);
  font: inherit;
  font-size: var(--type-sm);
  text-align: left;
  cursor: pointer;
}

@media (any-hover: hover) {
  .index-contents__edit:hover { color: var(--red); background: var(--hover-bg); }
}

.index-contents__edit:focus-visible {
  outline: var(--focus-ring);
  outline-offset: calc(-1 * var(--focus-ring-offset));
}






.index-tools > .index-showme-pop {





  --kebab-pop-min-width: min(26rem, calc(100vw - 2 * var(--gingham-gap)), var(--popover-inline-room, 26rem));
  max-width: min(28rem, var(--popover-inline-room, 28rem));
  padding: var(--space-3) var(--space-4) var(--space-4);
}

.index-nav-label {
  margin: 0 0 var(--space-3);
  font-size: var(--type-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-soft);
  background: var(--content-card-bg);
}

.index-nav-tags,
.index-nav-tag-section__tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}




.index-nav-tags--sectioned {
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-3);
}

.index-nav-tag-section__heading {
  margin: 0 0 var(--space-2);
  font-size: var(--type-xs);
  font-weight: 600;
  color: var(--text-soft);
}



.btn-inline-edit {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0;
  background: none;
  border: 0;
  color: var(--text-soft);
  font-family: var(--font-body);
  font-size: var(--type-xs);
  cursor: pointer;
}

@media (any-hover: hover) {
  .btn-inline-edit:hover {
    color: var(--red);
  }
}

.btn-inline-edit--pencil {
  justify-content: center;
  box-sizing: border-box;
  width: var(--index-chip-size);
  height: var(--index-chip-size);
  border: 1px solid var(--rule-boundary);
  border-radius: var(--radius-pill);
  color: var(--text-light);
}

@media (any-hover: hover) {
  .btn-inline-edit--pencil:hover {
    border-color: var(--red);
  }
}



.index-empty {
  margin: var(--gap) 0 0;
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--text-soft);
  background: var(--ground);
}

.index-empty a {
  color: var(--red);
  background: var(--ground);
}



.index-empty .btn-link {
  font-family: inherit;
  background: var(--ground);
}





.category-heading a {
  color: var(--text);
  background: var(--ground);
  text-decoration: none;











  min-width: 0;
  overflow-wrap: break-word;
}






.recipe-index .category-heading {




  margin-block: 0 var(--gap);

















  --category-heading-optical-lift: 0.1780lh;
  transform: translateY(calc(-1 * var(--category-heading-optical-lift)));
}

@media (any-hover: hover) {
  .category-heading a:hover { color: var(--red); background: var(--ground); }
}














.category-heading {
  display: flex;
  position: relative;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: var(--gap-half);





  overflow-wrap: anywhere;
}






.category-heading:has(> .category-top-link) {
  --top-link-room: calc(2rem + var(--gap-half));
  padding-inline: clamp(0px, 100% - 12rem, var(--top-link-room)) var(--top-link-room);
}

.category-heading::before,
.category-heading::after {
  content: "";
  flex: 1 1 0;
  min-width: 0;
  max-width: min(22%, 4.5rem);
  height: 0;
  border-top: 1px solid var(--rule-hairline);

  transform: translateY(0.12em);
}




.category-heading > a,
.recipe-listing .category-heading > h2 {
  flex: 0 1 auto;
  min-width: 0;
  overflow-wrap: break-word;
  margin: 0;
}




.category-top-link {
  position: absolute;
  inset-inline-end: 0;
  inset-block-start: 50%;
  translate: 0 -50%;
  z-index: 1;
  font-size: 0.75rem;
  color: var(--text-soft);
  background: var(--ground);
  text-decoration: none;
  padding: 0 0 0 var(--gap-half);
  white-space: nowrap;
}

@media (any-hover: hover) {
  .category-top-link:hover {
    color: var(--red);
  }
}











.category-rest > .recipe-card-grid {
  margin-top: var(--gap-half);
}

@media print {
  .category-rest[hidden] {
    display: block !important;
  }
}














































body:has(.recipe-index) main,
body:has(.pantry-app) main,
body:has(#menu-app) main,
body:has(#groceries-app) main {
  background: none;
  border: 0;
  box-shadow: none;
  padding-inline: 0;
  padding-top: 0;
  max-width: none;
  margin-inline: 0;
}


















.recipe-index .tag-filter-pill {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  min-height: var(--index-chip-size);
  padding: 0.35rem 0.95rem;
  font-size: 0.92rem;
}





.category-see-all-row {
  margin: var(--gap-double) 0 0;
  font-size: var(--type-sm);
  text-align: center;
}





.recipe-card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gap-half);
  list-style: none;
  margin: 0;
  padding: 0;
  column-count: initial;
}

@media (max-width: 599px) {
  .recipe-card-grid {
    grid-template-columns: 1fr;
  }
}





@media (min-width: 600px) {
  .recipe-index .recipe-card-grid {
    grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
  }
}







.recipe-card {
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  min-height: 2.75rem;
  color: var(--text);
  text-decoration: none;
  white-space: normal;
  text-overflow: clip;
  transition: background var(--duration-normal),
              box-shadow var(--duration-normal);
}






















.recipe-card--sketched {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--sketch-column, 4.5rem);
  grid-template-rows: auto auto 1fr auto;
  column-gap: var(--space-2);
  --card-padding: var(--gap);
}

.recipe-card--sketched > .recipe-card__body { display: contents; }
.recipe-card--sketched .recipe-card__heading { grid-area: 1 / 1; align-self: center; }
.recipe-card--sketched .recipe-card__desc { grid-area: 2 / 1 / 3 / -1; margin-top: var(--gap-half); }
.recipe-card--sketched .recipe-card__rail { grid-area: 4 / 1 / 5 / -1; margin-top: var(--gap-half); }

.recipe-card__sketch {
  grid-area: 1 / 2;
  align-self: center;
}


@media (max-width: 480px) {
  .recipe-card--sketched {
    --sketch-column: 3.15rem;
  }
}





.recipe-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: var(--gap-half);
  padding: var(--gap);
}




.recipe-card__heading {
  margin: 0;
  font-weight: inherit;
  font-size: inherit;
}

.recipe-card__title {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 400;
  font-size: var(--type-xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--text);
  text-decoration: none;



  overflow-wrap: break-word;
}


.recipe-card__title::after {
  content: "";
  position: absolute;
  inset: 0;
}



.recipe-card .recipe-card__title:focus-visible {
  outline: none;
}

.recipe-card:has(.recipe-card__title:focus-visible) {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}










@media (any-hover: hover) {
  .recipe-card:hover {




    --card-bg: color-mix(in srgb, var(--red) 6%, var(--content-card-bg));
  }

  .recipe-card:hover .recipe-card__title {
    color: var(--red);
  }

  @media (prefers-color-scheme: dark) {
    .recipe-card:hover {


      --card-bg: color-mix(in srgb, var(--red) 5%, var(--content-card-bg));
    }
  }
}



.recipe-card__desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--type-sm);
  line-height: var(--leading-snug);
  color: var(--text-soft);
}














.recipe-card__rail {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  row-gap: calc(2 * var(--gap-half));
  margin-top: auto;
  padding-top: var(--gap-half);
  border-top: 1px solid var(--rule-boundary);
  font-family: var(--font-body);
  font-size: var(--type-sm);
  color: var(--text-soft);
}

.recipe-card__time {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.recipe-card__time svg {
  flex-shrink: 0;
}










.recipe-card__source {






  flex: 1 1 0;
  min-width: 6em;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 0.75rem;
  color: var(--text-soft);
}




.recipe-card:has(.recipe-card__title:active) {
  box-shadow: var(--shadow-press);
}

















.menu-toggle {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  border: none;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-soft);
  font-family: var(--font-body);
  font-size: var(--type-sm);
  white-space: nowrap;
  cursor: pointer;
  padding: 0.75rem 0.5rem;
  transition: color var(--duration-fast) ease, background var(--duration-fast) ease;
}
@media (any-hover: hover) {
  .menu-toggle:hover {
    color: var(--text);
    background: var(--surface-alt);
  }
}
.menu-toggle:active {
  color: var(--text);
  background: var(--surface-alt);
}
.recipe-card__rail > .menu-toggle {
  margin: calc(-1 * var(--gap-half)) -0.5rem;
  margin-left: 0;
}
.menu-toggle__off { display: inline-flex; }
.menu-toggle__on  { display: none; }
.menu-toggle.is-on .menu-toggle__off { display: none; }
.menu-toggle.is-on .menu-toggle__on  { display: inline-flex; }
.menu-toggle.is-on {
  color: var(--text);
}















.pin-toggle,
.star-toggle {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  border: none;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-soft);
  font-family: var(--font-body);
  font-size: var(--type-sm);
  cursor: pointer;
  padding: 0.75rem 0.5rem;
  transition: color var(--duration-fast) ease, background var(--duration-fast) ease;
}
@media (any-hover: hover) {
  .pin-toggle:hover,
  .star-toggle:hover {
    color: var(--text);
    background: var(--surface-alt);
  }
}
.pin-toggle:active,
.star-toggle:active {
  color: var(--text);
  background: var(--surface-alt);
}










.recipe-card__rail > .pin-toggle,
.recipe-card__rail > .star-toggle {
  margin: calc(-1 * var(--gap-half)) -0.5rem;
}
.recipe-card__rail > .star-toggle {
  margin-left: auto;
}





.star-toggle[aria-pressed="true"] svg polygon,
#star-button[aria-pressed="true"] svg polygon,
.pin-toggle[aria-pressed="true"] svg path,
#pin-button[aria-pressed="true"] svg path {
  fill: currentColor;
}





.recipe-card.filtered-out {
  display: none;
}














section[data-recipe-filter-target="category"].filtered-empty {
  display: none;
}

.recipe-listing section:first-of-type h2 {
  margin-top: 0;
}

.loading-placeholder {
  color: var(--text-soft);
  font-style: italic;
  padding: 2rem;
  text-align: center;
}









:where(.recipe, .embedded-recipe) section > div:has(.ingredients):has(.instructions) {
  display: grid;
  grid-template-columns: 14rem 1fr;
  gap: 0 2.5rem;
}


:where(.recipe, .embedded-recipe) .instructions p {
  margin: 0 0 0.85rem 0;
  font-size: 0.95rem;
  line-height: 1.75;
}

:where(.recipe, .embedded-recipe) .instructions {
  border-left: 1px solid var(--rule-boundary);
  padding-left: 2rem;
}

:where(.recipe, .embedded-recipe) .ingredients ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

























.ingredient-alt {
  color: var(--text-soft);
  font-weight: normal;
}



:where(.recipe, .embedded-recipe) .ingredients ul li small {
  display: block;
  font-style: italic;
  font-size: 0.95em;
  line-height: var(--leading-snug);
  padding-left: 1rem;
}





:where(.recipe, .embedded-recipe) > footer,
:where(#recipe-history, #recipe-history > .recipe--history) > footer {
  font-family: var(--font-display);
  font-style: italic;
  text-align: center;
  font-size: 1rem;
  margin-top: 3.5rem;
  padding-top: 2rem;
  color: var(--text-soft);
  position: relative;
}

:where(.recipe, .embedded-recipe) > footer::after,
:where(#recipe-history, #recipe-history > .recipe--history) > footer::after {
  content: "";
  display: block;
  width: 40px;
  height: 1px;
  background: var(--rule-hairline);
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

:where(.recipe, .embedded-recipe) > footer small,
:where(#recipe-history, #recipe-history > .recipe--history) > footer small {
  text-align: right;
  display: block;
}

@media (prefers-color-scheme: dark) {
  .smart-icon--crossout::after {



    border-color: color-mix(in srgb, var(--danger) 85%, transparent);
    background: linear-gradient(
      to top left,
      transparent calc(50% - 1px),
      color-mix(in srgb, var(--danger) 85%, transparent) calc(50% - 1px),
      color-mix(in srgb, var(--danger) 85%, transparent) calc(50% + 1px),
      transparent calc(50% + 1px)
    );
  }
}




@media screen {

  .recipe section h2,
  .recipe .instructions p,
  .recipe .ingredients li {
    cursor: pointer;
  }






  .crossed-off,
  .recipe section:has(.ingredients li.crossed-off, .instructions p.crossed-off):not(:has(.ingredients li:not(.crossed-off), .instructions p:not(.crossed-off))) h2 {



    text-decoration: line-through;
    color: var(--text-light);
    border-color: var(--rule-boundary);
  }



  :where(.recipe) section:has(.ingredients li.crossed-off, .instructions p.crossed-off):not(:has(.ingredients li:not(.crossed-off), .instructions p:not(.crossed-off))) .embedded-recipe {
    opacity: 0.4;
  }
}





.recipe .ingredients li:focus-visible,
.recipe .instructions p:focus-visible,
.recipe section :is(h2, h3):focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}






@media screen and (max-width: 720px) and (pointer: coarse) {
  html {
    font-size: 16px;
  }
}


@media screen and (max-width: 720px) {
  :root {
    --gingham-gap: 0.75rem;
    --nav-gap: var(--gingham-gap);
  }

  main {
    padding-bottom: 3rem;
  }

  :where(.recipe, .embedded-recipe) section > div:has(.ingredients):has(.instructions) {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }








  :where(.recipe, .embedded-recipe, .recipe-listing) section > ul {
    column-count: 2;
  }

  :where(.recipe, .recipe-listing) > header h1,
  .page-header h1 { font-size: 2.6rem; }






  .recipe-listing section h2 { font-size: 1.6rem; }


  :where(.recipe, .embedded-recipe) .instructions {
    border-left: none;
    padding-left: 0;
    padding-top: 0.5rem;
    border-top: 1px solid var(--rule-boundary);
  }

}









@media (pointer: coarse) and (hover: none) {
  [data-recipe-filter-target="category"] {
    scroll-margin-top: 0.5rem;
  }
}

html:has(dialog[open]) {
  overflow: hidden;
}
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}




@keyframes bloop {
  0%   { transform: scale(0.97); opacity: 0; }
  30%  { opacity: 1; }
  100% { transform: scale(1);    opacity: 1; }
}



















.busy-dots::before {
  content: "";
  display: inline-block;
  width: 2.25em;
  height: 0.75em;
  background: currentColor;






  -webkit-mask-image:
    radial-gradient(circle 0.22em, #000 99%, transparent),
    radial-gradient(circle 0.22em, #000 99%, transparent),
    radial-gradient(circle 0.22em, #000 99%, transparent);
  -webkit-mask-size: 0.44em 0.44em;
  -webkit-mask-position: 0% 50%, 50% 50%, 100% 50%;
  -webkit-mask-repeat: no-repeat;
  mask-image:
    radial-gradient(circle 0.22em, #000 99%, transparent),
    radial-gradient(circle 0.22em, #000 99%, transparent),
    radial-gradient(circle 0.22em, #000 99%, transparent);
  mask-size: 0.44em 0.44em;
  mask-position: 0% 50%, 50% 50%, 100% 50%;
  mask-repeat: no-repeat;
  animation: busy-dots var(--duration-busy) infinite linear;
}


@keyframes busy-dots {
  0%, 100% { -webkit-mask-position: 0% 50%, 50% 50%, 100% 50%; mask-position: 0% 50%, 50% 50%, 100% 50%; }
  12%      { -webkit-mask-position: 0% 20%, 50% 50%, 100% 50%; mask-position: 0% 20%, 50% 50%, 100% 50%; }
  25%      { -webkit-mask-position: 0% 50%, 50% 50%, 100% 50%; mask-position: 0% 50%, 50% 50%, 100% 50%; }
  37%      { -webkit-mask-position: 0% 50%, 50% 20%, 100% 50%; mask-position: 0% 50%, 50% 20%, 100% 50%; }
  50%      { -webkit-mask-position: 0% 50%, 50% 50%, 100% 50%; mask-position: 0% 50%, 50% 50%, 100% 50%; }
  62%      { -webkit-mask-position: 0% 50%, 50% 50%, 100% 20%; mask-position: 0% 50%, 50% 50%, 100% 20%; }
  75%      { -webkit-mask-position: 0% 50%, 50% 50%, 100% 50%; mask-position: 0% 50%, 50% 50%, 100% 50%; }
}






@keyframes shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

.tag-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.15rem 0.55rem;
  border-radius: var(--radius-pill);
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
  cursor: default;
}
.tag-pill--tag { background: var(--tag-bg); color: var(--tag-text); }















.tag-pill--category {
  background: var(--tag-bg);
  color: var(--tag-text);
  border-radius: var(--radius-md);
  font-family: var(--font-display);
  font-weight: 400;




  font-size: 0.88rem;
}








.tag-pill--c0 { background: var(--tag-cell-0-bg); color: var(--tag-cell-0-text); --c-bg: var(--tag-cell-0-bg); --c-text: var(--tag-cell-0-text); }
.tag-pill--c1 { background: var(--tag-cell-1-bg); color: var(--tag-cell-1-text); --c-bg: var(--tag-cell-1-bg); --c-text: var(--tag-cell-1-text); }
.tag-pill--c2 { background: var(--tag-cell-2-bg); color: var(--tag-cell-2-text); --c-bg: var(--tag-cell-2-bg); --c-text: var(--tag-cell-2-text); }
.tag-pill--c3 { background: var(--tag-cell-3-bg); color: var(--tag-cell-3-text); --c-bg: var(--tag-cell-3-bg); --c-text: var(--tag-cell-3-text); }
.tag-pill--c4 { background: var(--tag-cell-4-bg); color: var(--tag-cell-4-text); --c-bg: var(--tag-cell-4-bg); --c-text: var(--tag-cell-4-text); }
.tag-pill--c5 { background: var(--tag-cell-5-bg); color: var(--tag-cell-5-text); --c-bg: var(--tag-cell-5-bg); --c-text: var(--tag-cell-5-text); }
.tag-pill--c6 { background: var(--tag-cell-6-bg); color: var(--tag-cell-6-text); --c-bg: var(--tag-cell-6-bg); --c-text: var(--tag-cell-6-text); }
.tag-pill--c7 { background: var(--tag-cell-7-bg); color: var(--tag-cell-7-text); --c-bg: var(--tag-cell-7-bg); --c-text: var(--tag-cell-7-text); }



.dev-swatch--rosewater .dev-swatch__chip { background: var(--pigment-rosewater); }
.dev-swatch--pink      .dev-swatch__chip { background: var(--pigment-pink); }
.dev-swatch--mauve     .dev-swatch__chip { background: var(--pigment-mauve); }
.dev-swatch--red       .dev-swatch__chip { background: var(--pigment-red); }
.dev-swatch--peach     .dev-swatch__chip { background: var(--pigment-peach); }
.dev-swatch--green     .dev-swatch__chip { background: var(--pigment-green); }
.dev-swatch--teal      .dev-swatch__chip { background: var(--pigment-teal); }
.dev-swatch--lavender  .dev-swatch__chip { background: var(--pigment-lavender); }


.smart-icon {
  position: relative;
  margin-right: 0.3em;
  font-size: 0.85em;
  display: inline-flex;
  align-items: center;
}





.smart-icon--crossout::after {
  content: "";
  position: absolute;
  inset: -1px;
  border: 1.5px solid color-mix(in srgb, var(--red-deep) 85%, transparent);
  border-radius: 50%;
  background: linear-gradient(
    to top left,
    transparent calc(50% - 1px),
    color-mix(in srgb, var(--red-deep) 85%, transparent) calc(50% - 1px),
    color-mix(in srgb, var(--red-deep) 85%, transparent) calc(50% + 1px),
    transparent calc(50% + 1px)
  );
  pointer-events: none;
}
















.tag-filter-pill {
  display: inline-block;
  padding: 0.15rem 0.6rem;
  border-radius: var(--radius-xl);
  font-size: 0.78rem;
  font-family: var(--font-body);
  background: color-mix(in srgb, var(--c-bg, var(--tag-bg)) 42%, var(--tag-bg));


















  color: var(--c-text, var(--tag-text));
  border: 2px solid transparent;
  cursor: pointer;
  transition: background var(--duration-fast), border-color var(--duration-fast);
}

.tag-filter-pill:not(.active) .smart-icon {
  filter: sepia(0.6) saturate(0.85) brightness(0.95);
  opacity: 0.55;
}







@media (any-hover: hover) {
  .tag-filter-pill:not([aria-disabled="true"]):not(.active):hover {
    background: color-mix(in srgb, var(--c-bg, var(--tag-bg)) 65%, var(--tag-bg));
    border-color: color-mix(in srgb, var(--c-text, var(--tag-text)) 35%, transparent);
  }








  .tag-filter-pill.active:not([aria-disabled="true"]):hover {
    background: var(--c-text, var(--red-fill));
    color: var(--c-bg, var(--text-on-fill));
  }
}



.tag-filter-pill:not([aria-disabled="true"]):active {
  box-shadow: var(--shadow-press);
}
















.tag-filter-pill.active {
  background: var(--c-bg, transparent);
  color: var(--c-text, var(--red));
  border-color: var(--c-text, var(--red));
  font-weight: 600;











  transition: none;
}

.tag-filter-pill.active .smart-icon {
  filter: none;
  opacity: 1;
}

.tag-filter-pill[aria-disabled="true"] {
  opacity: 0.35;
  cursor: default;
}



[data-needs-signal][aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
}












.tag-filter-pill__label {
  display: inline-grid;
}

.tag-filter-pill__label::after {
  content: attr(data-label);
  font-weight: 600;
  grid-area: 1 / 1;
  visibility: hidden;
}

.tag-filter-pill__label-text {
  grid-area: 1 / 1;
}


















.tag-filter-pill__count {
  display: inline-grid;
  margin-left: 0.2rem;
  font-size: 0.65rem;
  font-variant-numeric: tabular-nums;
}





.tag-filter-summary {
  margin: 0.4rem 0 0;
  font-size: 0.75rem;
  color: var(--text-soft);
}








.index-showme-pop .tag-filter-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin: var(--space-3) 0 0;
  padding-top: var(--space-3);
  border-top: 1px solid var(--rule-boundary);
  color: var(--text-soft);
  background: var(--content-card-bg);
}

.tag-filter-summary__actions {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

.index-showme-pop .tag-filter-summary__clear {
  visibility: hidden;
}

.index-showme-pop .tag-filter-summary--visible .tag-filter-summary__clear {
  visibility: visible;
}

.tag-filter-summary__clear {
  margin-left: 0.4rem;
  padding: 0;
  border: none;
  background: none;
  color: var(--red);
  font-size: inherit;
  font-family: var(--font-body);
  text-decoration: underline;
  cursor: pointer;
}




.tag-pill__remove {
  position: relative;
  font-size: 0.6rem;
  opacity: 0.5;
  cursor: pointer;
  line-height: var(--leading-flat);
  border: none;
  background: none;
  color: inherit;
  padding: 0;
}



.tag-pill__remove::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 24px;
  height: 24px;
  transform: translate(-50%, -50%);
}
@media (any-hover: hover) {
  .tag-pill__remove:hover { opacity: 1; }
}

.tag-pill__remove:focus-visible {
  opacity: 1;
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}







.notify-stack {
  position: fixed;
  bottom: calc(env(safe-area-inset-bottom, 0px) + var(--toast-inset, 1rem));
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: min(24rem, calc(100vw - 2rem));
  pointer-events: none;
}

.notify-card {
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: var(--ground);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--rule-hairline);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-popover);
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--text);
  opacity: 0;
}

.notify-card--error {
  border-color: var(--red);
  background: var(--red-light);
}

@keyframes slide-in {
  0%   { transform: translateY(16px); opacity: 0; }
  30%  { opacity: 1; }
  100% { transform: translateY(0);    opacity: 1; }
}

@keyframes notify-exit {
  from { transform: translateY(0);   opacity: 1; }
  to   { transform: translateY(30%); opacity: 0; }
}

.notify-card.notify-visible {
  opacity: 1;
  animation: slide-in var(--duration-bloop) var(--ease-bloop);
}

.notify-card.notify-leaving {
  animation: notify-exit var(--duration-normal) ease forwards;
}

.notify-dismiss {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: none;
  font-size: 1.25rem;



  color: var(--text-soft);
  cursor: pointer;
  padding: 0.25rem 0.4rem;
  line-height: var(--leading-flat);
  flex-shrink: 0;
}

@media (any-hover: hover) {
  .notify-dismiss:hover {
    color: var(--text);
  }
}



.notify-action {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: none;
  margin-left: auto;
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-sm);
  font: inherit;
  font-weight: 600;
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  flex-shrink: 0;
}

@media (any-hover: hover) {
  .notify-action:hover {
    color: var(--red);
  }
}

.notify-action:active {
  background: var(--hover-bg);
}

.notify-action:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}



.notify-card--error .notify-dismiss {
  color: var(--red);
}

@media (any-hover: hover) {
  .notify-card--error .notify-dismiss:hover {
    color: var(--text);
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
}