/* Utility layer: reusable layout and typography helpers. */
:root { --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4rem; }
.u-hidden { display: none !important; }
.u-block { display: block; }
.u-flex { display: flex; }
.u-grid { display: grid; }
.u-center { display: grid; place-items: center; }
.u-relative { position: relative; }
.u-absolute { position: absolute; }
.u-overflow-hidden { overflow: hidden; }
.u-w-full { width: 100%; }
.u-h-full { height: 100%; }
.u-max-width { max-width: var(--max-width); }
.u-mx-auto { margin-inline: auto; }
.u-text-center { text-align: center; }
.u-uppercase { text-transform: uppercase; }
.u-muted { color: var(--muted); }
.u-red { color: var(--red); }
.u-border { border: 1px solid var(--line); }
.u-radius-sm { border-radius: 4px; }
.u-radius-md { border-radius: 10px; }
.u-radius-pill { border-radius: 999px; }
.u-shadow-red { box-shadow: var(--shadow-red); }
.u-transition { transition: all .25s var(--ease); }
.u-pointer { cursor: pointer; }
.u-no-select { user-select: none; }
.u-display { font-family: var(--font-display); }
.u-body { font-family: var(--font-body); }
.u-letter-wide { letter-spacing: .15em; }
.u-line-relaxed { line-height: 1.8; }
.u-gap-1 { gap: var(--space-1); }
.u-gap-2 { gap: var(--space-2); }
.u-gap-3 { gap: var(--space-3); }
.u-gap-4 { gap: var(--space-4); }
.u-gap-5 { gap: var(--space-5); }
.u-gap-6 { gap: var(--space-6); }
.u-p-1 { padding: var(--space-1); }
.u-p-2 { padding: var(--space-2); }
.u-p-3 { padding: var(--space-3); }
.u-p-4 { padding: var(--space-4); }
.u-p-5 { padding: var(--space-5); }
.u-p-6 { padding: var(--space-6); }
.u-mt-1 { margin-top: var(--space-1); }
.u-mt-2 { margin-top: var(--space-2); }
.u-mt-3 { margin-top: var(--space-3); }
.u-mt-4 { margin-top: var(--space-4); }
.u-mt-5 { margin-top: var(--space-5); }
.u-mt-6 { margin-top: var(--space-6); }
.u-mb-1 { margin-bottom: var(--space-1); }
.u-mb-2 { margin-bottom: var(--space-2); }
.u-mb-3 { margin-bottom: var(--space-3); }
.u-mb-4 { margin-bottom: var(--space-4); }
.u-mb-5 { margin-bottom: var(--space-5); }
.u-mb-6 { margin-bottom: var(--space-6); }
.u-grid-2 { grid-template-columns: repeat(2,minmax(0,1fr)); }
.u-grid-3 { grid-template-columns: repeat(3,minmax(0,1fr)); }
.u-grid-4 { grid-template-columns: repeat(4,minmax(0,1fr)); }
.u-auto-fit { grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); }
.u-align-center { align-items: center; }
.u-justify-between { justify-content: space-between; }
.u-justify-center { justify-content: center; }
.u-flex-wrap { flex-wrap: wrap; }
.u-flex-column { flex-direction: column; }
.u-text-small { font-size: .75rem; }
.u-text-xs { font-size: .625rem; }
.u-text-large { font-size: 1.25rem; }
.u-font-bold { font-weight: 700; }
.u-font-black { font-weight: 900; }
.u-opacity-50 { opacity: .5; }
.u-opacity-75 { opacity: .75; }
.u-pointer-events-none { pointer-events: none; }
.u-bg-panel { background: var(--panel); }
.u-bg-ink { background: var(--ink); }
.u-bg-red { background: var(--red); }
.u-gradient-red { background: linear-gradient(135deg,var(--red),var(--red-dark)); }
.u-focus-ring:focus-visible { outline: 2px solid var(--red); outline-offset: 4px; }
@media (max-width: 760px) { .u-mobile-stack { flex-direction: column; } .u-mobile-full { width: 100%; } .u-mobile-center { text-align: center; } }
@media (min-width: 761px) { .u-desktop-flex { display: flex; } .u-desktop-grid { display: grid; } }
/* Recipe 01: reusable accent panel variation. */
.recipe-panel-01 {
  --recipe-accent: hsl(17 78% 56%);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--recipe-accent), transparent 65%);
  background: linear-gradient(145deg, color-mix(in srgb, var(--recipe-accent), #151925 82%), #10131d 70%);
  transition: transform .25s var(--ease), border-color .25s var(--ease);
}
.recipe-panel-01:hover {
  transform: translateY(-3px);
  border-color: var(--recipe-accent);
}
.recipe-panel-01::after {
  content: '';
  position: absolute;
  width: 140px;
  height: 140px;
  right: -65px;
  top: -65px;
  border: 1px solid color-mix(in srgb, var(--recipe-accent), transparent 35%);
  border-radius: 50%;
  pointer-events: none;
}
/* Recipe 02: reusable accent panel variation. */
.recipe-panel-02 {
  --recipe-accent: hsl(34 78% 56%);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--recipe-accent), transparent 65%);
  background: linear-gradient(145deg, color-mix(in srgb, var(--recipe-accent), #151925 82%), #10131d 70%);
  transition: transform .25s var(--ease), border-color .25s var(--ease);
}
.recipe-panel-02:hover {
  transform: translateY(-3px);
  border-color: var(--recipe-accent);
}
.recipe-panel-02::after {
  content: '';
  position: absolute;
  width: 140px;
  height: 140px;
  right: -65px;
  top: -65px;
  border: 1px solid color-mix(in srgb, var(--recipe-accent), transparent 35%);
  border-radius: 50%;
  pointer-events: none;
}
/* Recipe 03: reusable accent panel variation. */
.recipe-panel-03 {
  --recipe-accent: hsl(51 78% 56%);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--recipe-accent), transparent 65%);
  background: linear-gradient(145deg, color-mix(in srgb, var(--recipe-accent), #151925 82%), #10131d 70%);
  transition: transform .25s var(--ease), border-color .25s var(--ease);
}
.recipe-panel-03:hover {
  transform: translateY(-3px);
  border-color: var(--recipe-accent);
}
.recipe-panel-03::after {
  content: '';
  position: absolute;
  width: 140px;
  height: 140px;
  right: -65px;
  top: -65px;
  border: 1px solid color-mix(in srgb, var(--recipe-accent), transparent 35%);
  border-radius: 50%;
  pointer-events: none;
}
/* Recipe 04: reusable accent panel variation. */
.recipe-panel-04 {
  --recipe-accent: hsl(68 78% 56%);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--recipe-accent), transparent 65%);
  background: linear-gradient(145deg, color-mix(in srgb, var(--recipe-accent), #151925 82%), #10131d 70%);
  transition: transform .25s var(--ease), border-color .25s var(--ease);
}
.recipe-panel-04:hover {
  transform: translateY(-3px);
  border-color: var(--recipe-accent);
}
.recipe-panel-04::after {
  content: '';
  position: absolute;
  width: 140px;
  height: 140px;
  right: -65px;
  top: -65px;
  border: 1px solid color-mix(in srgb, var(--recipe-accent), transparent 35%);
  border-radius: 50%;
  pointer-events: none;
}
/* Recipe 05: reusable accent panel variation. */
.recipe-panel-05 {
  --recipe-accent: hsl(85 78% 56%);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--recipe-accent), transparent 65%);
  background: linear-gradient(145deg, color-mix(in srgb, var(--recipe-accent), #151925 82%), #10131d 70%);
  transition: transform .25s var(--ease), border-color .25s var(--ease);
}
.recipe-panel-05:hover {
  transform: translateY(-3px);
  border-color: var(--recipe-accent);
}
.recipe-panel-05::after {
  content: '';
  position: absolute;
  width: 140px;
  height: 140px;
  right: -65px;
  top: -65px;
  border: 1px solid color-mix(in srgb, var(--recipe-accent), transparent 35%);
  border-radius: 50%;
  pointer-events: none;
}
/* Recipe 06: reusable accent panel variation. */
.recipe-panel-06 {
  --recipe-accent: hsl(102 78% 56%);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--recipe-accent), transparent 65%);
  background: linear-gradient(145deg, color-mix(in srgb, var(--recipe-accent), #151925 82%), #10131d 70%);
  transition: transform .25s var(--ease), border-color .25s var(--ease);
}
.recipe-panel-06:hover {
  transform: translateY(-3px);
  border-color: var(--recipe-accent);
}
.recipe-panel-06::after {
  content: '';
  position: absolute;
  width: 140px;
  height: 140px;
  right: -65px;
  top: -65px;
  border: 1px solid color-mix(in srgb, var(--recipe-accent), transparent 35%);
  border-radius: 50%;
  pointer-events: none;
}
/* Recipe 07: reusable accent panel variation. */
.recipe-panel-07 {
  --recipe-accent: hsl(119 78% 56%);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--recipe-accent), transparent 65%);
  background: linear-gradient(145deg, color-mix(in srgb, var(--recipe-accent), #151925 82%), #10131d 70%);
  transition: transform .25s var(--ease), border-color .25s var(--ease);
}
.recipe-panel-07:hover {
  transform: translateY(-3px);
  border-color: var(--recipe-accent);
}
.recipe-panel-07::after {
  content: '';
  position: absolute;
  width: 140px;
  height: 140px;
  right: -65px;
  top: -65px;
  border: 1px solid color-mix(in srgb, var(--recipe-accent), transparent 35%);
  border-radius: 50%;
  pointer-events: none;
}
/* Recipe 08: reusable accent panel variation. */
.recipe-panel-08 {
  --recipe-accent: hsl(136 78% 56%);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--recipe-accent), transparent 65%);
  background: linear-gradient(145deg, color-mix(in srgb, var(--recipe-accent), #151925 82%), #10131d 70%);
  transition: transform .25s var(--ease), border-color .25s var(--ease);
}
.recipe-panel-08:hover {
  transform: translateY(-3px);
  border-color: var(--recipe-accent);
}
.recipe-panel-08::after {
  content: '';
  position: absolute;
  width: 140px;
  height: 140px;
  right: -65px;
  top: -65px;
  border: 1px solid color-mix(in srgb, var(--recipe-accent), transparent 35%);
  border-radius: 50%;
  pointer-events: none;
}
/* Recipe 09: reusable accent panel variation. */
.recipe-panel-09 {
  --recipe-accent: hsl(153 78% 56%);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--recipe-accent), transparent 65%);
  background: linear-gradient(145deg, color-mix(in srgb, var(--recipe-accent), #151925 82%), #10131d 70%);
  transition: transform .25s var(--ease), border-color .25s var(--ease);
}
.recipe-panel-09:hover {
  transform: translateY(-3px);
  border-color: var(--recipe-accent);
}
.recipe-panel-09::after {
  content: '';
  position: absolute;
  width: 140px;
  height: 140px;
  right: -65px;
  top: -65px;
  border: 1px solid color-mix(in srgb, var(--recipe-accent), transparent 35%);
  border-radius: 50%;
  pointer-events: none;
}
/* Recipe 10: reusable accent panel variation. */
.recipe-panel-10 {
  --recipe-accent: hsl(170 78% 56%);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--recipe-accent), transparent 65%);
  background: linear-gradient(145deg, color-mix(in srgb, var(--recipe-accent), #151925 82%), #10131d 70%);
  transition: transform .25s var(--ease), border-color .25s var(--ease);
}
.recipe-panel-10:hover {
  transform: translateY(-3px);
  border-color: var(--recipe-accent);
}
.recipe-panel-10::after {
  content: '';
  position: absolute;
  width: 140px;
  height: 140px;
  right: -65px;
  top: -65px;
  border: 1px solid color-mix(in srgb, var(--recipe-accent), transparent 35%);
  border-radius: 50%;
  pointer-events: none;
}
/* Recipe 11: reusable accent panel variation. */
.recipe-panel-11 {
  --recipe-accent: hsl(187 78% 56%);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--recipe-accent), transparent 65%);
  background: linear-gradient(145deg, color-mix(in srgb, var(--recipe-accent), #151925 82%), #10131d 70%);
  transition: transform .25s var(--ease), border-color .25s var(--ease);
}
.recipe-panel-11:hover {
  transform: translateY(-3px);
  border-color: var(--recipe-accent);
}
.recipe-panel-11::after {
  content: '';
  position: absolute;
  width: 140px;
  height: 140px;
  right: -65px;
  top: -65px;
  border: 1px solid color-mix(in srgb, var(--recipe-accent), transparent 35%);
  border-radius: 50%;
  pointer-events: none;
}
/* Recipe 12: reusable accent panel variation. */
.recipe-panel-12 {
  --recipe-accent: hsl(204 78% 56%);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--recipe-accent), transparent 65%);
  background: linear-gradient(145deg, color-mix(in srgb, var(--recipe-accent), #151925 82%), #10131d 70%);
  transition: transform .25s var(--ease), border-color .25s var(--ease);
}
.recipe-panel-12:hover {
  transform: translateY(-3px);
  border-color: var(--recipe-accent);
}
.recipe-panel-12::after {
  content: '';
  position: absolute;
  width: 140px;
  height: 140px;
  right: -65px;
  top: -65px;
  border: 1px solid color-mix(in srgb, var(--recipe-accent), transparent 35%);
  border-radius: 50%;
  pointer-events: none;
}
/* Recipe 13: reusable accent panel variation. */
.recipe-panel-13 {
  --recipe-accent: hsl(221 78% 56%);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--recipe-accent), transparent 65%);
  background: linear-gradient(145deg, color-mix(in srgb, var(--recipe-accent), #151925 82%), #10131d 70%);
  transition: transform .25s var(--ease), border-color .25s var(--ease);
}
.recipe-panel-13:hover {
  transform: translateY(-3px);
  border-color: var(--recipe-accent);
}
.recipe-panel-13::after {
  content: '';
  position: absolute;
  width: 140px;
  height: 140px;
  right: -65px;
  top: -65px;
  border: 1px solid color-mix(in srgb, var(--recipe-accent), transparent 35%);
  border-radius: 50%;
  pointer-events: none;
}
/* Recipe 14: reusable accent panel variation. */
.recipe-panel-14 {
  --recipe-accent: hsl(238 78% 56%);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--recipe-accent), transparent 65%);
  background: linear-gradient(145deg, color-mix(in srgb, var(--recipe-accent), #151925 82%), #10131d 70%);
  transition: transform .25s var(--ease), border-color .25s var(--ease);
}
.recipe-panel-14:hover {
  transform: translateY(-3px);
  border-color: var(--recipe-accent);
}
.recipe-panel-14::after {
  content: '';
  position: absolute;
  width: 140px;
  height: 140px;
  right: -65px;
  top: -65px;
  border: 1px solid color-mix(in srgb, var(--recipe-accent), transparent 35%);
  border-radius: 50%;
  pointer-events: none;
}
/* Recipe 15: reusable accent panel variation. */
.recipe-panel-15 {
  --recipe-accent: hsl(255 78% 56%);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--recipe-accent), transparent 65%);
  background: linear-gradient(145deg, color-mix(in srgb, var(--recipe-accent), #151925 82%), #10131d 70%);
  transition: transform .25s var(--ease), border-color .25s var(--ease);
}
.recipe-panel-15:hover {
  transform: translateY(-3px);
  border-color: var(--recipe-accent);
}
.recipe-panel-15::after {
  content: '';
  position: absolute;
  width: 140px;
  height: 140px;
  right: -65px;
  top: -65px;
  border: 1px solid color-mix(in srgb, var(--recipe-accent), transparent 35%);
  border-radius: 50%;
  pointer-events: none;
}
/* Recipe 16: reusable accent panel variation. */
.recipe-panel-16 {
  --recipe-accent: hsl(272 78% 56%);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--recipe-accent), transparent 65%);
  background: linear-gradient(145deg, color-mix(in srgb, var(--recipe-accent), #151925 82%), #10131d 70%);
  transition: transform .25s var(--ease), border-color .25s var(--ease);
}
.recipe-panel-16:hover {
  transform: translateY(-3px);
  border-color: var(--recipe-accent);
}
.recipe-panel-16::after {
  content: '';
  position: absolute;
  width: 140px;
  height: 140px;
  right: -65px;
  top: -65px;
  border: 1px solid color-mix(in srgb, var(--recipe-accent), transparent 35%);
  border-radius: 50%;
  pointer-events: none;
}
/* Recipe 17: reusable accent panel variation. */
.recipe-panel-17 {
  --recipe-accent: hsl(289 78% 56%);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--recipe-accent), transparent 65%);
  background: linear-gradient(145deg, color-mix(in srgb, var(--recipe-accent), #151925 82%), #10131d 70%);
  transition: transform .25s var(--ease), border-color .25s var(--ease);
}
.recipe-panel-17:hover {
  transform: translateY(-3px);
  border-color: var(--recipe-accent);
}
.recipe-panel-17::after {
  content: '';
  position: absolute;
  width: 140px;
  height: 140px;
  right: -65px;
  top: -65px;
  border: 1px solid color-mix(in srgb, var(--recipe-accent), transparent 35%);
  border-radius: 50%;
  pointer-events: none;
}
/* Recipe 18: reusable accent panel variation. */
.recipe-panel-18 {
  --recipe-accent: hsl(306 78% 56%);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--recipe-accent), transparent 65%);
  background: linear-gradient(145deg, color-mix(in srgb, var(--recipe-accent), #151925 82%), #10131d 70%);
  transition: transform .25s var(--ease), border-color .25s var(--ease);
}
.recipe-panel-18:hover {
  transform: translateY(-3px);
  border-color: var(--recipe-accent);
}
.recipe-panel-18::after {
  content: '';
  position: absolute;
  width: 140px;
  height: 140px;
  right: -65px;
  top: -65px;
  border: 1px solid color-mix(in srgb, var(--recipe-accent), transparent 35%);
  border-radius: 50%;
  pointer-events: none;
}
/* Recipe 19: reusable accent panel variation. */
.recipe-panel-19 {
  --recipe-accent: hsl(323 78% 56%);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--recipe-accent), transparent 65%);
  background: linear-gradient(145deg, color-mix(in srgb, var(--recipe-accent), #151925 82%), #10131d 70%);
  transition: transform .25s var(--ease), border-color .25s var(--ease);
}
.recipe-panel-19:hover {
  transform: translateY(-3px);
  border-color: var(--recipe-accent);
}
.recipe-panel-19::after {
  content: '';
  position: absolute;
  width: 140px;
  height: 140px;
  right: -65px;
  top: -65px;
  border: 1px solid color-mix(in srgb, var(--recipe-accent), transparent 35%);
  border-radius: 50%;
  pointer-events: none;
}
/* Recipe 20: reusable accent panel variation. */
.recipe-panel-20 {
  --recipe-accent: hsl(340 78% 56%);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--recipe-accent), transparent 65%);
  background: linear-gradient(145deg, color-mix(in srgb, var(--recipe-accent), #151925 82%), #10131d 70%);
  transition: transform .25s var(--ease), border-color .25s var(--ease);
}
.recipe-panel-20:hover {
  transform: translateY(-3px);
  border-color: var(--recipe-accent);
}
.recipe-panel-20::after {
  content: '';
  position: absolute;
  width: 140px;
  height: 140px;
  right: -65px;
  top: -65px;
  border: 1px solid color-mix(in srgb, var(--recipe-accent), transparent 35%);
  border-radius: 50%;
  pointer-events: none;
}
/* Recipe 21: reusable accent panel variation. */
.recipe-panel-21 {
  --recipe-accent: hsl(357 78% 56%);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--recipe-accent), transparent 65%);
  background: linear-gradient(145deg, color-mix(in srgb, var(--recipe-accent), #151925 82%), #10131d 70%);
  transition: transform .25s var(--ease), border-color .25s var(--ease);
}
.recipe-panel-21:hover {
  transform: translateY(-3px);
  border-color: var(--recipe-accent);
}
.recipe-panel-21::after {
  content: '';
  position: absolute;
  width: 140px;
  height: 140px;
  right: -65px;
  top: -65px;
  border: 1px solid color-mix(in srgb, var(--recipe-accent), transparent 35%);
  border-radius: 50%;
  pointer-events: none;
}
/* Recipe 22: reusable accent panel variation. */
.recipe-panel-22 {
  --recipe-accent: hsl(14 78% 56%);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--recipe-accent), transparent 65%);
  background: linear-gradient(145deg, color-mix(in srgb, var(--recipe-accent), #151925 82%), #10131d 70%);
  transition: transform .25s var(--ease), border-color .25s var(--ease);
}
.recipe-panel-22:hover {
  transform: translateY(-3px);
  border-color: var(--recipe-accent);
}
.recipe-panel-22::after {
  content: '';
  position: absolute;
  width: 140px;
  height: 140px;
  right: -65px;
  top: -65px;
  border: 1px solid color-mix(in srgb, var(--recipe-accent), transparent 35%);
  border-radius: 50%;
  pointer-events: none;
}
/* Recipe 23: reusable accent panel variation. */
.recipe-panel-23 {
  --recipe-accent: hsl(31 78% 56%);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--recipe-accent), transparent 65%);
  background: linear-gradient(145deg, color-mix(in srgb, var(--recipe-accent), #151925 82%), #10131d 70%);
  transition: transform .25s var(--ease), border-color .25s var(--ease);
}
.recipe-panel-23:hover {
  transform: translateY(-3px);
  border-color: var(--recipe-accent);
}
.recipe-panel-23::after {
  content: '';
  position: absolute;
  width: 140px;
  height: 140px;
  right: -65px;
  top: -65px;
  border: 1px solid color-mix(in srgb, var(--recipe-accent), transparent 35%);
  border-radius: 50%;
  pointer-events: none;
}
/* Recipe 24: reusable accent panel variation. */
.recipe-panel-24 {
  --recipe-accent: hsl(48 78% 56%);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--recipe-accent), transparent 65%);
  background: linear-gradient(145deg, color-mix(in srgb, var(--recipe-accent), #151925 82%), #10131d 70%);
  transition: transform .25s var(--ease), border-color .25s var(--ease);
}
.recipe-panel-24:hover {
  transform: translateY(-3px);
  border-color: var(--recipe-accent);
}
.recipe-panel-24::after {
  content: '';
  position: absolute;
  width: 140px;
  height: 140px;
  right: -65px;
  top: -65px;
  border: 1px solid color-mix(in srgb, var(--recipe-accent), transparent 35%);
  border-radius: 50%;
  pointer-events: none;
}
/* Recipe 25: reusable accent panel variation. */
.recipe-panel-25 {
  --recipe-accent: hsl(65 78% 56%);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--recipe-accent), transparent 65%);
  background: linear-gradient(145deg, color-mix(in srgb, var(--recipe-accent), #151925 82%), #10131d 70%);
  transition: transform .25s var(--ease), border-color .25s var(--ease);
}
.recipe-panel-25:hover {
  transform: translateY(-3px);
  border-color: var(--recipe-accent);
}
.recipe-panel-25::after {
  content: '';
  position: absolute;
  width: 140px;
  height: 140px;
  right: -65px;
  top: -65px;
  border: 1px solid color-mix(in srgb, var(--recipe-accent), transparent 35%);
  border-radius: 50%;
  pointer-events: none;
}
/* Recipe 26: reusable accent panel variation. */
.recipe-panel-26 {
  --recipe-accent: hsl(82 78% 56%);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--recipe-accent), transparent 65%);
  background: linear-gradient(145deg, color-mix(in srgb, var(--recipe-accent), #151925 82%), #10131d 70%);
  transition: transform .25s var(--ease), border-color .25s var(--ease);
}
.recipe-panel-26:hover {
  transform: translateY(-3px);
  border-color: var(--recipe-accent);
}
.recipe-panel-26::after {
  content: '';
  position: absolute;
  width: 140px;
  height: 140px;
  right: -65px;
  top: -65px;
  border: 1px solid color-mix(in srgb, var(--recipe-accent), transparent 35%);
  border-radius: 50%;
  pointer-events: none;
}
/* Recipe 27: reusable accent panel variation. */
.recipe-panel-27 {
  --recipe-accent: hsl(99 78% 56%);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--recipe-accent), transparent 65%);
  background: linear-gradient(145deg, color-mix(in srgb, var(--recipe-accent), #151925 82%), #10131d 70%);
  transition: transform .25s var(--ease), border-color .25s var(--ease);
}
.recipe-panel-27:hover {
  transform: translateY(-3px);
  border-color: var(--recipe-accent);
}
.recipe-panel-27::after {
  content: '';
  position: absolute;
  width: 140px;
  height: 140px;
  right: -65px;
  top: -65px;
  border: 1px solid color-mix(in srgb, var(--recipe-accent), transparent 35%);
  border-radius: 50%;
  pointer-events: none;
}
/* Recipe 28: reusable accent panel variation. */
.recipe-panel-28 {
  --recipe-accent: hsl(116 78% 56%);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--recipe-accent), transparent 65%);
  background: linear-gradient(145deg, color-mix(in srgb, var(--recipe-accent), #151925 82%), #10131d 70%);
  transition: transform .25s var(--ease), border-color .25s var(--ease);
}
.recipe-panel-28:hover {
  transform: translateY(-3px);
  border-color: var(--recipe-accent);
}
.recipe-panel-28::after {
  content: '';
  position: absolute;
  width: 140px;
  height: 140px;
  right: -65px;
  top: -65px;
  border: 1px solid color-mix(in srgb, var(--recipe-accent), transparent 35%);
  border-radius: 50%;
  pointer-events: none;
}
/* Recipe 29: reusable accent panel variation. */
.recipe-panel-29 {
  --recipe-accent: hsl(133 78% 56%);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--recipe-accent), transparent 65%);
  background: linear-gradient(145deg, color-mix(in srgb, var(--recipe-accent), #151925 82%), #10131d 70%);
  transition: transform .25s var(--ease), border-color .25s var(--ease);
}
.recipe-panel-29:hover {
  transform: translateY(-3px);
  border-color: var(--recipe-accent);
}
.recipe-panel-29::after {
  content: '';
  position: absolute;
  width: 140px;
  height: 140px;
  right: -65px;
  top: -65px;
  border: 1px solid color-mix(in srgb, var(--recipe-accent), transparent 35%);
  border-radius: 50%;
  pointer-events: none;
}
/* Recipe 30: reusable accent panel variation. */
.recipe-panel-30 {
  --recipe-accent: hsl(150 78% 56%);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--recipe-accent), transparent 65%);
  background: linear-gradient(145deg, color-mix(in srgb, var(--recipe-accent), #151925 82%), #10131d 70%);
  transition: transform .25s var(--ease), border-color .25s var(--ease);
}
.recipe-panel-30:hover {
  transform: translateY(-3px);
  border-color: var(--recipe-accent);
}
.recipe-panel-30::after {
  content: '';
  position: absolute;
  width: 140px;
  height: 140px;
  right: -65px;
  top: -65px;
  border: 1px solid color-mix(in srgb, var(--recipe-accent), transparent 35%);
  border-radius: 50%;
  pointer-events: none;
}
/* Recipe 31: reusable accent panel variation. */
.recipe-panel-31 {
  --recipe-accent: hsl(167 78% 56%);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--recipe-accent), transparent 65%);
  background: linear-gradient(145deg, color-mix(in srgb, var(--recipe-accent), #151925 82%), #10131d 70%);
  transition: transform .25s var(--ease), border-color .25s var(--ease);
}
.recipe-panel-31:hover {
  transform: translateY(-3px);
  border-color: var(--recipe-accent);
}
.recipe-panel-31::after {
  content: '';
  position: absolute;
  width: 140px;
  height: 140px;
  right: -65px;
  top: -65px;
  border: 1px solid color-mix(in srgb, var(--recipe-accent), transparent 35%);
  border-radius: 50%;
  pointer-events: none;
}
/* Recipe 32: reusable accent panel variation. */
.recipe-panel-32 {
  --recipe-accent: hsl(184 78% 56%);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--recipe-accent), transparent 65%);
  background: linear-gradient(145deg, color-mix(in srgb, var(--recipe-accent), #151925 82%), #10131d 70%);
  transition: transform .25s var(--ease), border-color .25s var(--ease);
}
.recipe-panel-32:hover {
  transform: translateY(-3px);
  border-color: var(--recipe-accent);
}
.recipe-panel-32::after {
  content: '';
  position: absolute;
  width: 140px;
  height: 140px;
  right: -65px;
  top: -65px;
  border: 1px solid color-mix(in srgb, var(--recipe-accent), transparent 35%);
  border-radius: 50%;
  pointer-events: none;
}
/* Recipe 33: reusable accent panel variation. */
.recipe-panel-33 {
  --recipe-accent: hsl(201 78% 56%);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--recipe-accent), transparent 65%);
  background: linear-gradient(145deg, color-mix(in srgb, var(--recipe-accent), #151925 82%), #10131d 70%);
  transition: transform .25s var(--ease), border-color .25s var(--ease);
}
.recipe-panel-33:hover {
  transform: translateY(-3px);
  border-color: var(--recipe-accent);
}
.recipe-panel-33::after {
  content: '';
  position: absolute;
  width: 140px;
  height: 140px;
  right: -65px;
  top: -65px;
  border: 1px solid color-mix(in srgb, var(--recipe-accent), transparent 35%);
  border-radius: 50%;
  pointer-events: none;
}
/* Recipe 34: reusable accent panel variation. */
.recipe-panel-34 {
  --recipe-accent: hsl(218 78% 56%);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--recipe-accent), transparent 65%);
  background: linear-gradient(145deg, color-mix(in srgb, var(--recipe-accent), #151925 82%), #10131d 70%);
  transition: transform .25s var(--ease), border-color .25s var(--ease);
}
.recipe-panel-34:hover {
  transform: translateY(-3px);
  border-color: var(--recipe-accent);
}
.recipe-panel-34::after {
  content: '';
  position: absolute;
  width: 140px;
  height: 140px;
  right: -65px;
  top: -65px;
  border: 1px solid color-mix(in srgb, var(--recipe-accent), transparent 35%);
  border-radius: 50%;
  pointer-events: none;
}
/* Recipe 35: reusable accent panel variation. */
.recipe-panel-35 {
  --recipe-accent: hsl(235 78% 56%);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--recipe-accent), transparent 65%);
  background: linear-gradient(145deg, color-mix(in srgb, var(--recipe-accent), #151925 82%), #10131d 70%);
  transition: transform .25s var(--ease), border-color .25s var(--ease);
}
.recipe-panel-35:hover {
  transform: translateY(-3px);
  border-color: var(--recipe-accent);
}
.recipe-panel-35::after {
  content: '';
  position: absolute;
  width: 140px;
  height: 140px;
  right: -65px;
  top: -65px;
  border: 1px solid color-mix(in srgb, var(--recipe-accent), transparent 35%);
  border-radius: 50%;
  pointer-events: none;
}
/* Recipe 36: reusable accent panel variation. */
.recipe-panel-36 {
  --recipe-accent: hsl(252 78% 56%);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--recipe-accent), transparent 65%);
  background: linear-gradient(145deg, color-mix(in srgb, var(--recipe-accent), #151925 82%), #10131d 70%);
  transition: transform .25s var(--ease), border-color .25s var(--ease);
}
.recipe-panel-36:hover {
  transform: translateY(-3px);
  border-color: var(--recipe-accent);
}
.recipe-panel-36::after {
  content: '';
  position: absolute;
  width: 140px;
  height: 140px;
  right: -65px;
  top: -65px;
  border: 1px solid color-mix(in srgb, var(--recipe-accent), transparent 35%);
  border-radius: 50%;
  pointer-events: none;
}
/* Recipe 37: reusable accent panel variation. */
.recipe-panel-37 {
  --recipe-accent: hsl(269 78% 56%);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--recipe-accent), transparent 65%);
  background: linear-gradient(145deg, color-mix(in srgb, var(--recipe-accent), #151925 82%), #10131d 70%);
  transition: transform .25s var(--ease), border-color .25s var(--ease);
}
.recipe-panel-37:hover {
  transform: translateY(-3px);
  border-color: var(--recipe-accent);
}
.recipe-panel-37::after {
  content: '';
  position: absolute;
  width: 140px;
  height: 140px;
  right: -65px;
  top: -65px;
  border: 1px solid color-mix(in srgb, var(--recipe-accent), transparent 35%);
  border-radius: 50%;
  pointer-events: none;
}
/* Recipe 38: reusable accent panel variation. */
.recipe-panel-38 {
  --recipe-accent: hsl(286 78% 56%);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--recipe-accent), transparent 65%);
  background: linear-gradient(145deg, color-mix(in srgb, var(--recipe-accent), #151925 82%), #10131d 70%);
  transition: transform .25s var(--ease), border-color .25s var(--ease);
}
.recipe-panel-38:hover {
  transform: translateY(-3px);
  border-color: var(--recipe-accent);
}
.recipe-panel-38::after {
  content: '';
  position: absolute;
  width: 140px;
  height: 140px;
  right: -65px;
  top: -65px;
  border: 1px solid color-mix(in srgb, var(--recipe-accent), transparent 35%);
  border-radius: 50%;
  pointer-events: none;
}
/* Recipe 39: reusable accent panel variation. */
.recipe-panel-39 {
  --recipe-accent: hsl(303 78% 56%);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--recipe-accent), transparent 65%);
  background: linear-gradient(145deg, color-mix(in srgb, var(--recipe-accent), #151925 82%), #10131d 70%);
  transition: transform .25s var(--ease), border-color .25s var(--ease);
}
.recipe-panel-39:hover {
  transform: translateY(-3px);
  border-color: var(--recipe-accent);
}
.recipe-panel-39::after {
  content: '';
  position: absolute;
  width: 140px;
  height: 140px;
  right: -65px;
  top: -65px;
  border: 1px solid color-mix(in srgb, var(--recipe-accent), transparent 35%);
  border-radius: 50%;
  pointer-events: none;
}
/* Recipe 40: reusable accent panel variation. */
.recipe-panel-40 {
  --recipe-accent: hsl(320 78% 56%);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--recipe-accent), transparent 65%);
  background: linear-gradient(145deg, color-mix(in srgb, var(--recipe-accent), #151925 82%), #10131d 70%);
  transition: transform .25s var(--ease), border-color .25s var(--ease);
}
.recipe-panel-40:hover {
  transform: translateY(-3px);
  border-color: var(--recipe-accent);
}
.recipe-panel-40::after {
  content: '';
  position: absolute;
  width: 140px;
  height: 140px;
  right: -65px;
  top: -65px;
  border: 1px solid color-mix(in srgb, var(--recipe-accent), transparent 35%);
  border-radius: 50%;
  pointer-events: none;
}
/* Recipe 41: reusable accent panel variation. */
.recipe-panel-41 {
  --recipe-accent: hsl(337 78% 56%);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--recipe-accent), transparent 65%);
  background: linear-gradient(145deg, color-mix(in srgb, var(--recipe-accent), #151925 82%), #10131d 70%);
  transition: transform .25s var(--ease), border-color .25s var(--ease);
}
.recipe-panel-41:hover {
  transform: translateY(-3px);
  border-color: var(--recipe-accent);
}
.recipe-panel-41::after {
  content: '';
  position: absolute;
  width: 140px;
  height: 140px;
  right: -65px;
  top: -65px;
  border: 1px solid color-mix(in srgb, var(--recipe-accent), transparent 35%);
  border-radius: 50%;
  pointer-events: none;
}
/* Recipe 42: reusable accent panel variation. */
.recipe-panel-42 {
  --recipe-accent: hsl(354 78% 56%);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--recipe-accent), transparent 65%);
  background: linear-gradient(145deg, color-mix(in srgb, var(--recipe-accent), #151925 82%), #10131d 70%);
  transition: transform .25s var(--ease), border-color .25s var(--ease);
}
.recipe-panel-42:hover {
  transform: translateY(-3px);
  border-color: var(--recipe-accent);
}
.recipe-panel-42::after {
  content: '';
  position: absolute;
  width: 140px;
  height: 140px;
  right: -65px;
  top: -65px;
  border: 1px solid color-mix(in srgb, var(--recipe-accent), transparent 35%);
  border-radius: 50%;
  pointer-events: none;
}
/* Recipe 43: reusable accent panel variation. */
.recipe-panel-43 {
  --recipe-accent: hsl(11 78% 56%);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--recipe-accent), transparent 65%);
  background: linear-gradient(145deg, color-mix(in srgb, var(--recipe-accent), #151925 82%), #10131d 70%);
  transition: transform .25s var(--ease), border-color .25s var(--ease);
}
.recipe-panel-43:hover {
  transform: translateY(-3px);
  border-color: var(--recipe-accent);
}
.recipe-panel-43::after {
  content: '';
  position: absolute;
  width: 140px;
  height: 140px;
  right: -65px;
  top: -65px;
  border: 1px solid color-mix(in srgb, var(--recipe-accent), transparent 35%);
  border-radius: 50%;
  pointer-events: none;
}
/* Recipe 44: reusable accent panel variation. */
.recipe-panel-44 {
  --recipe-accent: hsl(28 78% 56%);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--recipe-accent), transparent 65%);
  background: linear-gradient(145deg, color-mix(in srgb, var(--recipe-accent), #151925 82%), #10131d 70%);
  transition: transform .25s var(--ease), border-color .25s var(--ease);
}
.recipe-panel-44:hover {
  transform: translateY(-3px);
  border-color: var(--recipe-accent);
}
.recipe-panel-44::after {
  content: '';
  position: absolute;
  width: 140px;
  height: 140px;
  right: -65px;
  top: -65px;
  border: 1px solid color-mix(in srgb, var(--recipe-accent), transparent 35%);
  border-radius: 50%;
  pointer-events: none;
}
/* Recipe 45: reusable accent panel variation. */
.recipe-panel-45 {
  --recipe-accent: hsl(45 78% 56%);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--recipe-accent), transparent 65%);
  background: linear-gradient(145deg, color-mix(in srgb, var(--recipe-accent), #151925 82%), #10131d 70%);
  transition: transform .25s var(--ease), border-color .25s var(--ease);
}
.recipe-panel-45:hover {
  transform: translateY(-3px);
  border-color: var(--recipe-accent);
}
.recipe-panel-45::after {
  content: '';
  position: absolute;
  width: 140px;
  height: 140px;
  right: -65px;
  top: -65px;
  border: 1px solid color-mix(in srgb, var(--recipe-accent), transparent 35%);
  border-radius: 50%;
  pointer-events: none;
}
/* Recipe 46: reusable accent panel variation. */
.recipe-panel-46 {
  --recipe-accent: hsl(62 78% 56%);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--recipe-accent), transparent 65%);
  background: linear-gradient(145deg, color-mix(in srgb, var(--recipe-accent), #151925 82%), #10131d 70%);
  transition: transform .25s var(--ease), border-color .25s var(--ease);
}
.recipe-panel-46:hover {
  transform: translateY(-3px);
  border-color: var(--recipe-accent);
}
.recipe-panel-46::after {
  content: '';
  position: absolute;
  width: 140px;
  height: 140px;
  right: -65px;
  top: -65px;
  border: 1px solid color-mix(in srgb, var(--recipe-accent), transparent 35%);
  border-radius: 50%;
  pointer-events: none;
}
/* Recipe 47: reusable accent panel variation. */
.recipe-panel-47 {
  --recipe-accent: hsl(79 78% 56%);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--recipe-accent), transparent 65%);
  background: linear-gradient(145deg, color-mix(in srgb, var(--recipe-accent), #151925 82%), #10131d 70%);
  transition: transform .25s var(--ease), border-color .25s var(--ease);
}
.recipe-panel-47:hover {
  transform: translateY(-3px);
  border-color: var(--recipe-accent);
}
.recipe-panel-47::after {
  content: '';
  position: absolute;
  width: 140px;
  height: 140px;
  right: -65px;
  top: -65px;
  border: 1px solid color-mix(in srgb, var(--recipe-accent), transparent 35%);
  border-radius: 50%;
  pointer-events: none;
}
/* Recipe 48: reusable accent panel variation. */
.recipe-panel-48 {
  --recipe-accent: hsl(96 78% 56%);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--recipe-accent), transparent 65%);
  background: linear-gradient(145deg, color-mix(in srgb, var(--recipe-accent), #151925 82%), #10131d 70%);
  transition: transform .25s var(--ease), border-color .25s var(--ease);
}
.recipe-panel-48:hover {
  transform: translateY(-3px);
  border-color: var(--recipe-accent);
}
.recipe-panel-48::after {
  content: '';
  position: absolute;
  width: 140px;
  height: 140px;
  right: -65px;
  top: -65px;
  border: 1px solid color-mix(in srgb, var(--recipe-accent), transparent 35%);
  border-radius: 50%;
  pointer-events: none;
}
/* Recipe 49: reusable accent panel variation. */
.recipe-panel-49 {
  --recipe-accent: hsl(113 78% 56%);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--recipe-accent), transparent 65%);
  background: linear-gradient(145deg, color-mix(in srgb, var(--recipe-accent), #151925 82%), #10131d 70%);
  transition: transform .25s var(--ease), border-color .25s var(--ease);
}
.recipe-panel-49:hover {
  transform: translateY(-3px);
  border-color: var(--recipe-accent);
}
.recipe-panel-49::after {
  content: '';
  position: absolute;
  width: 140px;
  height: 140px;
  right: -65px;
  top: -65px;
  border: 1px solid color-mix(in srgb, var(--recipe-accent), transparent 35%);
  border-radius: 50%;
  pointer-events: none;
}
/* Recipe 50: reusable accent panel variation. */
.recipe-panel-50 {
  --recipe-accent: hsl(130 78% 56%);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--recipe-accent), transparent 65%);
  background: linear-gradient(145deg, color-mix(in srgb, var(--recipe-accent), #151925 82%), #10131d 70%);
  transition: transform .25s var(--ease), border-color .25s var(--ease);
}
.recipe-panel-50:hover {
  transform: translateY(-3px);
  border-color: var(--recipe-accent);
}
.recipe-panel-50::after {
  content: '';
  position: absolute;
  width: 140px;
  height: 140px;
  right: -65px;
  top: -65px;
  border: 1px solid color-mix(in srgb, var(--recipe-accent), transparent 35%);
  border-radius: 50%;
  pointer-events: none;
}
/* Recipe 51: reusable accent panel variation. */
.recipe-panel-51 {
  --recipe-accent: hsl(147 78% 56%);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--recipe-accent), transparent 65%);
  background: linear-gradient(145deg, color-mix(in srgb, var(--recipe-accent), #151925 82%), #10131d 70%);
  transition: transform .25s var(--ease), border-color .25s var(--ease);
}
.recipe-panel-51:hover {
  transform: translateY(-3px);
  border-color: var(--recipe-accent);
}
.recipe-panel-51::after {
  content: '';
  position: absolute;
  width: 140px;
  height: 140px;
  right: -65px;
  top: -65px;
  border: 1px solid color-mix(in srgb, var(--recipe-accent), transparent 35%);
  border-radius: 50%;
  pointer-events: none;
}
/* Recipe 52: reusable accent panel variation. */
.recipe-panel-52 {
  --recipe-accent: hsl(164 78% 56%);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--recipe-accent), transparent 65%);
  background: linear-gradient(145deg, color-mix(in srgb, var(--recipe-accent), #151925 82%), #10131d 70%);
  transition: transform .25s var(--ease), border-color .25s var(--ease);
}
.recipe-panel-52:hover {
  transform: translateY(-3px);
  border-color: var(--recipe-accent);
}
.recipe-panel-52::after {
  content: '';
  position: absolute;
  width: 140px;
  height: 140px;
  right: -65px;
  top: -65px;
  border: 1px solid color-mix(in srgb, var(--recipe-accent), transparent 35%);
  border-radius: 50%;
  pointer-events: none;
}
/* Recipe 53: reusable accent panel variation. */
.recipe-panel-53 {
  --recipe-accent: hsl(181 78% 56%);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--recipe-accent), transparent 65%);
  background: linear-gradient(145deg, color-mix(in srgb, var(--recipe-accent), #151925 82%), #10131d 70%);
  transition: transform .25s var(--ease), border-color .25s var(--ease);
}
.recipe-panel-53:hover {
  transform: translateY(-3px);
  border-color: var(--recipe-accent);
}
.recipe-panel-53::after {
  content: '';
  position: absolute;
  width: 140px;
  height: 140px;
  right: -65px;
  top: -65px;
  border: 1px solid color-mix(in srgb, var(--recipe-accent), transparent 35%);
  border-radius: 50%;
  pointer-events: none;
}
/* Recipe 54: reusable accent panel variation. */
.recipe-panel-54 {
  --recipe-accent: hsl(198 78% 56%);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--recipe-accent), transparent 65%);
  background: linear-gradient(145deg, color-mix(in srgb, var(--recipe-accent), #151925 82%), #10131d 70%);
  transition: transform .25s var(--ease), border-color .25s var(--ease);
}
.recipe-panel-54:hover {
  transform: translateY(-3px);
  border-color: var(--recipe-accent);
}
.recipe-panel-54::after {
  content: '';
  position: absolute;
  width: 140px;
  height: 140px;
  right: -65px;
  top: -65px;
  border: 1px solid color-mix(in srgb, var(--recipe-accent), transparent 35%);
  border-radius: 50%;
  pointer-events: none;
}
/* Recipe 55: reusable accent panel variation. */
.recipe-panel-55 {
  --recipe-accent: hsl(215 78% 56%);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--recipe-accent), transparent 65%);
  background: linear-gradient(145deg, color-mix(in srgb, var(--recipe-accent), #151925 82%), #10131d 70%);
  transition: transform .25s var(--ease), border-color .25s var(--ease);
}
.recipe-panel-55:hover {
  transform: translateY(-3px);
  border-color: var(--recipe-accent);
}
.recipe-panel-55::after {
  content: '';
  position: absolute;
  width: 140px;
  height: 140px;
  right: -65px;
  top: -65px;
  border: 1px solid color-mix(in srgb, var(--recipe-accent), transparent 35%);
  border-radius: 50%;
  pointer-events: none;
}
/* Recipe 56: reusable accent panel variation. */
.recipe-panel-56 {
  --recipe-accent: hsl(232 78% 56%);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--recipe-accent), transparent 65%);
  background: linear-gradient(145deg, color-mix(in srgb, var(--recipe-accent), #151925 82%), #10131d 70%);
  transition: transform .25s var(--ease), border-color .25s var(--ease);
}
.recipe-panel-56:hover {
  transform: translateY(-3px);
  border-color: var(--recipe-accent);
}
.recipe-panel-56::after {
  content: '';
  position: absolute;
  width: 140px;
  height: 140px;
  right: -65px;
  top: -65px;
  border: 1px solid color-mix(in srgb, var(--recipe-accent), transparent 35%);
  border-radius: 50%;
  pointer-events: none;
}
/* Recipe 57: reusable accent panel variation. */
.recipe-panel-57 {
  --recipe-accent: hsl(249 78% 56%);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--recipe-accent), transparent 65%);
  background: linear-gradient(145deg, color-mix(in srgb, var(--recipe-accent), #151925 82%), #10131d 70%);
  transition: transform .25s var(--ease), border-color .25s var(--ease);
}
.recipe-panel-57:hover {
  transform: translateY(-3px);
  border-color: var(--recipe-accent);
}
.recipe-panel-57::after {
  content: '';
  position: absolute;
  width: 140px;
  height: 140px;
  right: -65px;
  top: -65px;
  border: 1px solid color-mix(in srgb, var(--recipe-accent), transparent 35%);
  border-radius: 50%;
  pointer-events: none;
}
/* Recipe 58: reusable accent panel variation. */
.recipe-panel-58 {
  --recipe-accent: hsl(266 78% 56%);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--recipe-accent), transparent 65%);
  background: linear-gradient(145deg, color-mix(in srgb, var(--recipe-accent), #151925 82%), #10131d 70%);
  transition: transform .25s var(--ease), border-color .25s var(--ease);
}
.recipe-panel-58:hover {
  transform: translateY(-3px);
  border-color: var(--recipe-accent);
}
.recipe-panel-58::after {
  content: '';
  position: absolute;
  width: 140px;
  height: 140px;
  right: -65px;
  top: -65px;
  border: 1px solid color-mix(in srgb, var(--recipe-accent), transparent 35%);
  border-radius: 50%;
  pointer-events: none;
}
/* Recipe 59: reusable accent panel variation. */
.recipe-panel-59 {
  --recipe-accent: hsl(283 78% 56%);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--recipe-accent), transparent 65%);
  background: linear-gradient(145deg, color-mix(in srgb, var(--recipe-accent), #151925 82%), #10131d 70%);
  transition: transform .25s var(--ease), border-color .25s var(--ease);
}
.recipe-panel-59:hover {
  transform: translateY(-3px);
  border-color: var(--recipe-accent);
}
.recipe-panel-59::after {
  content: '';
  position: absolute;
  width: 140px;
  height: 140px;
  right: -65px;
  top: -65px;
  border: 1px solid color-mix(in srgb, var(--recipe-accent), transparent 35%);
  border-radius: 50%;
  pointer-events: none;
}
/* Recipe 60: reusable accent panel variation. */
.recipe-panel-60 {
  --recipe-accent: hsl(300 78% 56%);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--recipe-accent), transparent 65%);
  background: linear-gradient(145deg, color-mix(in srgb, var(--recipe-accent), #151925 82%), #10131d 70%);
  transition: transform .25s var(--ease), border-color .25s var(--ease);
}
.recipe-panel-60:hover {
  transform: translateY(-3px);
  border-color: var(--recipe-accent);
}
.recipe-panel-60::after {
  content: '';
  position: absolute;
  width: 140px;
  height: 140px;
  right: -65px;
  top: -65px;
  border: 1px solid color-mix(in srgb, var(--recipe-accent), transparent 35%);
  border-radius: 50%;
  pointer-events: none;
}

/* Extended component states: interaction and layout variants. */
/* Variant 01: dimension tile treatment. */
.dimension-variant-01 {
  --variant-hue: 23;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 220px;
  padding: 24px;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(145deg, hsl(var(--variant-hue) 48% 20%), #10131d 72%);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.dimension-variant-01:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 45px rgba(0,0,0,.28);
}
.dimension-variant-01::before {
  content: '';
  position: absolute;
  z-index: -1;
  width: 180px;
  aspect-ratio: 1;
  right: -55px;
  bottom: -80px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 50%;
  box-shadow: 0 0 0 22px rgba(255,255,255,.025), 0 0 0 44px rgba(255,255,255,.02);
}
/* Variant 02: dimension tile treatment. */
.dimension-variant-02 {
  --variant-hue: 46;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 220px;
  padding: 24px;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(145deg, hsl(var(--variant-hue) 48% 20%), #10131d 72%);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.dimension-variant-02:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 45px rgba(0,0,0,.28);
}
.dimension-variant-02::before {
  content: '';
  position: absolute;
  z-index: -1;
  width: 180px;
  aspect-ratio: 1;
  right: -55px;
  bottom: -80px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 50%;
  box-shadow: 0 0 0 22px rgba(255,255,255,.025), 0 0 0 44px rgba(255,255,255,.02);
}
/* Variant 03: dimension tile treatment. */
.dimension-variant-03 {
  --variant-hue: 69;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 220px;
  padding: 24px;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(145deg, hsl(var(--variant-hue) 48% 20%), #10131d 72%);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.dimension-variant-03:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 45px rgba(0,0,0,.28);
}
.dimension-variant-03::before {
  content: '';
  position: absolute;
  z-index: -1;
  width: 180px;
  aspect-ratio: 1;
  right: -55px;
  bottom: -80px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 50%;
  box-shadow: 0 0 0 22px rgba(255,255,255,.025), 0 0 0 44px rgba(255,255,255,.02);
}
/* Variant 04: dimension tile treatment. */
.dimension-variant-04 {
  --variant-hue: 92;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 220px;
  padding: 24px;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(145deg, hsl(var(--variant-hue) 48% 20%), #10131d 72%);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.dimension-variant-04:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 45px rgba(0,0,0,.28);
}
.dimension-variant-04::before {
  content: '';
  position: absolute;
  z-index: -1;
  width: 180px;
  aspect-ratio: 1;
  right: -55px;
  bottom: -80px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 50%;
  box-shadow: 0 0 0 22px rgba(255,255,255,.025), 0 0 0 44px rgba(255,255,255,.02);
}
/* Variant 05: dimension tile treatment. */
.dimension-variant-05 {
  --variant-hue: 115;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 220px;
  padding: 24px;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(145deg, hsl(var(--variant-hue) 48% 20%), #10131d 72%);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.dimension-variant-05:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 45px rgba(0,0,0,.28);
}
.dimension-variant-05::before {
  content: '';
  position: absolute;
  z-index: -1;
  width: 180px;
  aspect-ratio: 1;
  right: -55px;
  bottom: -80px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 50%;
  box-shadow: 0 0 0 22px rgba(255,255,255,.025), 0 0 0 44px rgba(255,255,255,.02);
}
/* Variant 06: dimension tile treatment. */
.dimension-variant-06 {
  --variant-hue: 138;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 220px;
  padding: 24px;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(145deg, hsl(var(--variant-hue) 48% 20%), #10131d 72%);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.dimension-variant-06:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 45px rgba(0,0,0,.28);
}
.dimension-variant-06::before {
  content: '';
  position: absolute;
  z-index: -1;
  width: 180px;
  aspect-ratio: 1;
  right: -55px;
  bottom: -80px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 50%;
  box-shadow: 0 0 0 22px rgba(255,255,255,.025), 0 0 0 44px rgba(255,255,255,.02);
}
/* Variant 07: dimension tile treatment. */
.dimension-variant-07 {
  --variant-hue: 161;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 220px;
  padding: 24px;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(145deg, hsl(var(--variant-hue) 48% 20%), #10131d 72%);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.dimension-variant-07:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 45px rgba(0,0,0,.28);
}
.dimension-variant-07::before {
  content: '';
  position: absolute;
  z-index: -1;
  width: 180px;
  aspect-ratio: 1;
  right: -55px;
  bottom: -80px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 50%;
  box-shadow: 0 0 0 22px rgba(255,255,255,.025), 0 0 0 44px rgba(255,255,255,.02);
}
/* Variant 08: dimension tile treatment. */
.dimension-variant-08 {
  --variant-hue: 184;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 220px;
  padding: 24px;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(145deg, hsl(var(--variant-hue) 48% 20%), #10131d 72%);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.dimension-variant-08:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 45px rgba(0,0,0,.28);
}
.dimension-variant-08::before {
  content: '';
  position: absolute;
  z-index: -1;
  width: 180px;
  aspect-ratio: 1;
  right: -55px;
  bottom: -80px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 50%;
  box-shadow: 0 0 0 22px rgba(255,255,255,.025), 0 0 0 44px rgba(255,255,255,.02);
}
/* Variant 09: dimension tile treatment. */
.dimension-variant-09 {
  --variant-hue: 207;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 220px;
  padding: 24px;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(145deg, hsl(var(--variant-hue) 48% 20%), #10131d 72%);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.dimension-variant-09:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 45px rgba(0,0,0,.28);
}
.dimension-variant-09::before {
  content: '';
  position: absolute;
  z-index: -1;
  width: 180px;
  aspect-ratio: 1;
  right: -55px;
  bottom: -80px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 50%;
  box-shadow: 0 0 0 22px rgba(255,255,255,.025), 0 0 0 44px rgba(255,255,255,.02);
}
/* Variant 10: dimension tile treatment. */
.dimension-variant-10 {
  --variant-hue: 230;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 220px;
  padding: 24px;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(145deg, hsl(var(--variant-hue) 48% 20%), #10131d 72%);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.dimension-variant-10:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 45px rgba(0,0,0,.28);
}
.dimension-variant-10::before {
  content: '';
  position: absolute;
  z-index: -1;
  width: 180px;
  aspect-ratio: 1;
  right: -55px;
  bottom: -80px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 50%;
  box-shadow: 0 0 0 22px rgba(255,255,255,.025), 0 0 0 44px rgba(255,255,255,.02);
}
/* Variant 11: dimension tile treatment. */
.dimension-variant-11 {
  --variant-hue: 253;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 220px;
  padding: 24px;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(145deg, hsl(var(--variant-hue) 48% 20%), #10131d 72%);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.dimension-variant-11:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 45px rgba(0,0,0,.28);
}
.dimension-variant-11::before {
  content: '';
  position: absolute;
  z-index: -1;
  width: 180px;
  aspect-ratio: 1;
  right: -55px;
  bottom: -80px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 50%;
  box-shadow: 0 0 0 22px rgba(255,255,255,.025), 0 0 0 44px rgba(255,255,255,.02);
}
/* Variant 12: dimension tile treatment. */
.dimension-variant-12 {
  --variant-hue: 276;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 220px;
  padding: 24px;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(145deg, hsl(var(--variant-hue) 48% 20%), #10131d 72%);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.dimension-variant-12:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 45px rgba(0,0,0,.28);
}
.dimension-variant-12::before {
  content: '';
  position: absolute;
  z-index: -1;
  width: 180px;
  aspect-ratio: 1;
  right: -55px;
  bottom: -80px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 50%;
  box-shadow: 0 0 0 22px rgba(255,255,255,.025), 0 0 0 44px rgba(255,255,255,.02);
}
/* Variant 13: dimension tile treatment. */
.dimension-variant-13 {
  --variant-hue: 299;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 220px;
  padding: 24px;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(145deg, hsl(var(--variant-hue) 48% 20%), #10131d 72%);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.dimension-variant-13:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 45px rgba(0,0,0,.28);
}
.dimension-variant-13::before {
  content: '';
  position: absolute;
  z-index: -1;
  width: 180px;
  aspect-ratio: 1;
  right: -55px;
  bottom: -80px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 50%;
  box-shadow: 0 0 0 22px rgba(255,255,255,.025), 0 0 0 44px rgba(255,255,255,.02);
}
/* Variant 14: dimension tile treatment. */
.dimension-variant-14 {
  --variant-hue: 322;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 220px;
  padding: 24px;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(145deg, hsl(var(--variant-hue) 48% 20%), #10131d 72%);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.dimension-variant-14:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 45px rgba(0,0,0,.28);
}
.dimension-variant-14::before {
  content: '';
  position: absolute;
  z-index: -1;
  width: 180px;
  aspect-ratio: 1;
  right: -55px;
  bottom: -80px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 50%;
  box-shadow: 0 0 0 22px rgba(255,255,255,.025), 0 0 0 44px rgba(255,255,255,.02);
}
/* Variant 15: dimension tile treatment. */
.dimension-variant-15 {
  --variant-hue: 345;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 220px;
  padding: 24px;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(145deg, hsl(var(--variant-hue) 48% 20%), #10131d 72%);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.dimension-variant-15:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 45px rgba(0,0,0,.28);
}
.dimension-variant-15::before {
  content: '';
  position: absolute;
  z-index: -1;
  width: 180px;
  aspect-ratio: 1;
  right: -55px;
  bottom: -80px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 50%;
  box-shadow: 0 0 0 22px rgba(255,255,255,.025), 0 0 0 44px rgba(255,255,255,.02);
}
/* Variant 16: dimension tile treatment. */
.dimension-variant-16 {
  --variant-hue: 8;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 220px;
  padding: 24px;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(145deg, hsl(var(--variant-hue) 48% 20%), #10131d 72%);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.dimension-variant-16:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 45px rgba(0,0,0,.28);
}
.dimension-variant-16::before {
  content: '';
  position: absolute;
  z-index: -1;
  width: 180px;
  aspect-ratio: 1;
  right: -55px;
  bottom: -80px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 50%;
  box-shadow: 0 0 0 22px rgba(255,255,255,.025), 0 0 0 44px rgba(255,255,255,.02);
}
/* Variant 17: dimension tile treatment. */
.dimension-variant-17 {
  --variant-hue: 31;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 220px;
  padding: 24px;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(145deg, hsl(var(--variant-hue) 48% 20%), #10131d 72%);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.dimension-variant-17:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 45px rgba(0,0,0,.28);
}
.dimension-variant-17::before {
  content: '';
  position: absolute;
  z-index: -1;
  width: 180px;
  aspect-ratio: 1;
  right: -55px;
  bottom: -80px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 50%;
  box-shadow: 0 0 0 22px rgba(255,255,255,.025), 0 0 0 44px rgba(255,255,255,.02);
}
/* Variant 18: dimension tile treatment. */
.dimension-variant-18 {
  --variant-hue: 54;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 220px;
  padding: 24px;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(145deg, hsl(var(--variant-hue) 48% 20%), #10131d 72%);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.dimension-variant-18:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 45px rgba(0,0,0,.28);
}
.dimension-variant-18::before {
  content: '';
  position: absolute;
  z-index: -1;
  width: 180px;
  aspect-ratio: 1;
  right: -55px;
  bottom: -80px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 50%;
  box-shadow: 0 0 0 22px rgba(255,255,255,.025), 0 0 0 44px rgba(255,255,255,.02);
}
/* Variant 19: dimension tile treatment. */
.dimension-variant-19 {
  --variant-hue: 77;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 220px;
  padding: 24px;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(145deg, hsl(var(--variant-hue) 48% 20%), #10131d 72%);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.dimension-variant-19:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 45px rgba(0,0,0,.28);
}
.dimension-variant-19::before {
  content: '';
  position: absolute;
  z-index: -1;
  width: 180px;
  aspect-ratio: 1;
  right: -55px;
  bottom: -80px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 50%;
  box-shadow: 0 0 0 22px rgba(255,255,255,.025), 0 0 0 44px rgba(255,255,255,.02);
}
/* Variant 20: dimension tile treatment. */
.dimension-variant-20 {
  --variant-hue: 100;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 220px;
  padding: 24px;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(145deg, hsl(var(--variant-hue) 48% 20%), #10131d 72%);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.dimension-variant-20:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 45px rgba(0,0,0,.28);
}
.dimension-variant-20::before {
  content: '';
  position: absolute;
  z-index: -1;
  width: 180px;
  aspect-ratio: 1;
  right: -55px;
  bottom: -80px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 50%;
  box-shadow: 0 0 0 22px rgba(255,255,255,.025), 0 0 0 44px rgba(255,255,255,.02);
}
/* Variant 21: dimension tile treatment. */
.dimension-variant-21 {
  --variant-hue: 123;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 220px;
  padding: 24px;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(145deg, hsl(var(--variant-hue) 48% 20%), #10131d 72%);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.dimension-variant-21:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 45px rgba(0,0,0,.28);
}
.dimension-variant-21::before {
  content: '';
  position: absolute;
  z-index: -1;
  width: 180px;
  aspect-ratio: 1;
  right: -55px;
  bottom: -80px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 50%;
  box-shadow: 0 0 0 22px rgba(255,255,255,.025), 0 0 0 44px rgba(255,255,255,.02);
}
/* Variant 22: dimension tile treatment. */
.dimension-variant-22 {
  --variant-hue: 146;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 220px;
  padding: 24px;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(145deg, hsl(var(--variant-hue) 48% 20%), #10131d 72%);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.dimension-variant-22:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 45px rgba(0,0,0,.28);
}
.dimension-variant-22::before {
  content: '';
  position: absolute;
  z-index: -1;
  width: 180px;
  aspect-ratio: 1;
  right: -55px;
  bottom: -80px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 50%;
  box-shadow: 0 0 0 22px rgba(255,255,255,.025), 0 0 0 44px rgba(255,255,255,.02);
}
/* Variant 23: dimension tile treatment. */
.dimension-variant-23 {
  --variant-hue: 169;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 220px;
  padding: 24px;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(145deg, hsl(var(--variant-hue) 48% 20%), #10131d 72%);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.dimension-variant-23:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 45px rgba(0,0,0,.28);
}
.dimension-variant-23::before {
  content: '';
  position: absolute;
  z-index: -1;
  width: 180px;
  aspect-ratio: 1;
  right: -55px;
  bottom: -80px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 50%;
  box-shadow: 0 0 0 22px rgba(255,255,255,.025), 0 0 0 44px rgba(255,255,255,.02);
}
/* Variant 24: dimension tile treatment. */
.dimension-variant-24 {
  --variant-hue: 192;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 220px;
  padding: 24px;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(145deg, hsl(var(--variant-hue) 48% 20%), #10131d 72%);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.dimension-variant-24:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 45px rgba(0,0,0,.28);
}
.dimension-variant-24::before {
  content: '';
  position: absolute;
  z-index: -1;
  width: 180px;
  aspect-ratio: 1;
  right: -55px;
  bottom: -80px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 50%;
  box-shadow: 0 0 0 22px rgba(255,255,255,.025), 0 0 0 44px rgba(255,255,255,.02);
}
/* Variant 25: dimension tile treatment. */
.dimension-variant-25 {
  --variant-hue: 215;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 220px;
  padding: 24px;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(145deg, hsl(var(--variant-hue) 48% 20%), #10131d 72%);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.dimension-variant-25:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 45px rgba(0,0,0,.28);
}
.dimension-variant-25::before {
  content: '';
  position: absolute;
  z-index: -1;
  width: 180px;
  aspect-ratio: 1;
  right: -55px;
  bottom: -80px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 50%;
  box-shadow: 0 0 0 22px rgba(255,255,255,.025), 0 0 0 44px rgba(255,255,255,.02);
}
/* Variant 26: dimension tile treatment. */
.dimension-variant-26 {
  --variant-hue: 238;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 220px;
  padding: 24px;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(145deg, hsl(var(--variant-hue) 48% 20%), #10131d 72%);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.dimension-variant-26:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 45px rgba(0,0,0,.28);
}
.dimension-variant-26::before {
  content: '';
  position: absolute;
  z-index: -1;
  width: 180px;
  aspect-ratio: 1;
  right: -55px;
  bottom: -80px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 50%;
  box-shadow: 0 0 0 22px rgba(255,255,255,.025), 0 0 0 44px rgba(255,255,255,.02);
}
/* Variant 27: dimension tile treatment. */
.dimension-variant-27 {
  --variant-hue: 261;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 220px;
  padding: 24px;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(145deg, hsl(var(--variant-hue) 48% 20%), #10131d 72%);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.dimension-variant-27:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 45px rgba(0,0,0,.28);
}
.dimension-variant-27::before {
  content: '';
  position: absolute;
  z-index: -1;
  width: 180px;
  aspect-ratio: 1;
  right: -55px;
  bottom: -80px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 50%;
  box-shadow: 0 0 0 22px rgba(255,255,255,.025), 0 0 0 44px rgba(255,255,255,.02);
}
/* Variant 28: dimension tile treatment. */
.dimension-variant-28 {
  --variant-hue: 284;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 220px;
  padding: 24px;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(145deg, hsl(var(--variant-hue) 48% 20%), #10131d 72%);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.dimension-variant-28:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 45px rgba(0,0,0,.28);
}
.dimension-variant-28::before {
  content: '';
  position: absolute;
  z-index: -1;
  width: 180px;
  aspect-ratio: 1;
  right: -55px;
  bottom: -80px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 50%;
  box-shadow: 0 0 0 22px rgba(255,255,255,.025), 0 0 0 44px rgba(255,255,255,.02);
}
/* Variant 29: dimension tile treatment. */
.dimension-variant-29 {
  --variant-hue: 307;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 220px;
  padding: 24px;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(145deg, hsl(var(--variant-hue) 48% 20%), #10131d 72%);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.dimension-variant-29:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 45px rgba(0,0,0,.28);
}
.dimension-variant-29::before {
  content: '';
  position: absolute;
  z-index: -1;
  width: 180px;
  aspect-ratio: 1;
  right: -55px;
  bottom: -80px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 50%;
  box-shadow: 0 0 0 22px rgba(255,255,255,.025), 0 0 0 44px rgba(255,255,255,.02);
}
/* Variant 30: dimension tile treatment. */
.dimension-variant-30 {
  --variant-hue: 330;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 220px;
  padding: 24px;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(145deg, hsl(var(--variant-hue) 48% 20%), #10131d 72%);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.dimension-variant-30:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 45px rgba(0,0,0,.28);
}
.dimension-variant-30::before {
  content: '';
  position: absolute;
  z-index: -1;
  width: 180px;
  aspect-ratio: 1;
  right: -55px;
  bottom: -80px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 50%;
  box-shadow: 0 0 0 22px rgba(255,255,255,.025), 0 0 0 44px rgba(255,255,255,.02);
}