/* app/fonts.css */
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/fonts/geist-latin-wght-normal.woff2) format("woff2-variations");
  unicode-range:
    U+0000-00FF,
    U+0131,
    U+0152-0153,
    U+02BB-02BC,
    U+02C6,
    U+02DA,
    U+02DC,
    U+0304,
    U+0308,
    U+0329,
    U+2000-206F,
    U+20AC,
    U+2122,
    U+2191,
    U+2193,
    U+2212,
    U+2215,
    U+FEFF,
    U+FFFD;
}
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/fonts/geist-latin-ext-wght-normal.woff2) format("woff2-variations");
  unicode-range:
    U+0100-02BA,
    U+02BD-02C5,
    U+02C7-02CC,
    U+02CE-02D7,
    U+02DD-02FF,
    U+0304,
    U+0308,
    U+0329,
    U+1D00-1DBF,
    U+1E00-1E9F,
    U+1EF2-1EFF,
    U+2020,
    U+20A0-20AB,
    U+20AD-20C0,
    U+2113,
    U+2C60-2C7F,
    U+A720-A7FF;
}
@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/fonts/geist-mono-latin-wght-normal.woff2) format("woff2-variations");
  unicode-range:
    U+0000-00FF,
    U+0131,
    U+0152-0153,
    U+02BB-02BC,
    U+02C6,
    U+02DA,
    U+02DC,
    U+0304,
    U+0308,
    U+0329,
    U+2000-206F,
    U+20AC,
    U+2122,
    U+2191,
    U+2193,
    U+2212,
    U+2215,
    U+FEFF,
    U+FFFD;
}
@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/fonts/geist-mono-latin-ext-wght-normal.woff2) format("woff2-variations");
  unicode-range:
    U+0100-02BA,
    U+02BD-02C5,
    U+02C7-02CC,
    U+02CE-02D7,
    U+02DD-02FF,
    U+0304,
    U+0308,
    U+0329,
    U+1D00-1DBF,
    U+1E00-1E9F,
    U+1EF2-1EFF,
    U+2020,
    U+20A0-20AB,
    U+20AD-20C0,
    U+2113,
    U+2C60-2C7F,
    U+A720-A7FF;
}
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(/fonts/bricolage-grotesque-latin-wght-normal.woff2) format("woff2-variations");
}
@font-face {
  font-family: "Instrument Serif";
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/fonts/instrument-serif-latin-400-normal.woff2) format("woff2");
}
@font-face {
  font-family: "Syne";
  font-style: normal;
  font-display: swap;
  font-weight: 400 800;
  src: url(/fonts/syne-latin-wght-normal.woff2) format("woff2-variations");
}
@font-face {
  font-family: "Bricolage Grotesque Fallback";
  src:
    local("Arial"),
    local("Helvetica Neue"),
    local("Helvetica");
  size-adjust: 124.15%;
  ascent-override: 74.91%;
  descent-override: 21.75%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Syne Fallback";
  src:
    local("Arial"),
    local("Helvetica Neue"),
    local("Helvetica");
  size-adjust: 124.6%;
  ascent-override: 74.24%;
  descent-override: 22.07%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Instrument Serif Fallback";
  src: local("Georgia"), local("Times New Roman");
  size-adjust: 95.92%;
  ascent-override: 103.21%;
  descent-override: 32.32%;
  line-gap-override: 0%;
}

/* app/theme.css */
@layer tokens {
  :root {
    color-scheme: light dark;
    --bg: #ffffff;
    --surface: #ffffff;
    --surface-2: #f7f7f5;
    --ink: #141414;
    --muted: #6b6b6b;
    --line: #ebebea;
    --accent: #F38020;
    --accent-2: #FAAE40;
    --accent-ink: #141414;
    --accent-text: #b4530c;
    --shadow: 0 1px 2px rgb(0 0 0 / 5%), 0 10px 30px rgb(0 0 0 / 6%);
    --radius: 10px;
    --radius-sm: 6px;
    --radius-lg: 14px;
    --radius-pill: 999px;
    --type-1: 12px;
    --type-2: 14px;
    --type-3: 16px;
    --type-4: 20px;
    --type-5: 25px;
    --type-6: 32px;
    --type-7: 40px;
    --space-0: 0px;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
    --font-sans:
      "Geist",
      ui-sans-serif,
      system-ui,
      -apple-system,
      "Segoe UI",
      sans-serif;
    --font-display: var(--font-sans);
    --display-weight: 600;
    --display-track: -0.03em;
    --display-case: none;
    --font-card: var(--font-sans);
    --store-radius: 6px;
    --btn-radius: 999px;
    --tile-radius: var(--store-radius);
    --tile-gap: 1.25rem;
    --tile-body-pad: 0.8rem 0.15rem 1.75rem;
    --intro-size: 1rem;
    --intro-leading: 1.6;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme=light]) {
      color-scheme: dark;
      --bg: #0e0e10;
      --surface: #17171a;
      --surface-2: #1f1f23;
      --ink: #f4f4f2;
      --muted: #a3a3a8;
      --line: #2a2a2f;
      --accent: #F38020;
      --accent-2: #FAAE40;
      --accent-ink: #0e0e10;
      --accent-text: #F38020;
      --shadow: 0 1px 2px rgb(0 0 0 / 40%), 0 10px 30px rgb(0 0 0 / 35%);
    }
  }
  :root[data-theme=dark] {
    color-scheme: dark;
    --bg: #0e0e10;
    --surface: #17171a;
    --surface-2: #1f1f23;
    --ink: #f4f4f2;
    --muted: #a3a3a8;
    --line: #2a2a2f;
    --accent: #F38020;
    --accent-2: #FAAE40;
    --accent-ink: #0e0e10;
    --accent-text: #F38020;
    --shadow: 0 1px 2px rgb(0 0 0 / 40%), 0 10px 30px rgb(0 0 0 / 35%);
  }
  :root[data-theme=light] {
    color-scheme: light;
  }
  * {
    box-sizing: border-box;
  }
  html,
  body {
    margin: 0;
    padding: 0;
    min-height: 100%;
  }
  body {
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  a {
    color: inherit;
  }
  .app-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
  }
  .app-nav {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem clamp(1rem, 4vw, 2.5rem);
    border-bottom: 1px solid var(--line);
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter: saturate(140%) blur(10px);
  }
  .nav-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 44px;
    text-decoration: none;
    color: var(--ink);
  }
  a:focus-visible,
  button:focus-visible {
    outline: 2px solid var(--accent-text);
    outline-offset: 2px;
    border-radius: 4px;
  }
  .app-logo-svg {
    color: var(--accent);
  }
  .app-body {
    flex: 1;
  }
  .app-shell[data-store-theme=dark] {
    color-scheme: dark;
    --bg: #000000;
    --surface: #0a0a0a;
    --surface-2: #141414;
    --ink: #f2efe9;
    --muted: #9b978f;
    --line: #222222;
    --accent-ink: #000000;
    --shadow: none;
    background: var(--bg);
    color: var(--ink);
  }
  .app-shell[data-store-theme=light] {
    color-scheme: light;
    --bg: #ffffff;
    --surface: #ffffff;
    --surface-2: #f4f2ef;
    --ink: #141414;
    --muted: #6b6b6b;
    --line: #ebebea;
    --accent-ink: #141414;
    background: var(--bg);
    color: var(--ink);
  }
  .app-shell[data-store-preset=porcelain] {
    --bg: #fbfbfa;
    --surface: #ffffff;
    --surface-2: #eef0f5;
    --ink: #15171c;
    --muted: #5f636d;
    --line: #e4e5e8;
    --accent: #2346d8;
    --accent-2: #3a5ae6;
    --accent-ink: #ffffff;
    --accent-text: #2346d8;
    --font-display:
      "Bricolage Grotesque",
      "Bricolage Grotesque Fallback",
      var(--font-sans);
    --display-weight: 700;
    --display-track: -0.035em;
    --store-radius: 14px;
    --btn-radius: 999px;
    background: var(--bg);
    color: var(--ink);
  }
  .app-shell[data-store-preset=market] {
    --bg: #f7f6f1;
    --surface: #ffffff;
    --surface-2: #ebeadf;
    --ink: #1b2219;
    --muted: #5d6459;
    --line: #e2e1d8;
    --accent: #1f5c3a;
    --accent-2: #2a7049;
    --accent-ink: #ffffff;
    --accent-text: #1f5c3a;
    --font-display:
      "Instrument Serif",
      "Instrument Serif Fallback",
      Georgia,
      "Times New Roman",
      serif;
    --font-serif: var(--font-display);
    --display-weight: 400;
    --display-track: -0.01em;
    --font-card: var(--font-sans);
    --store-radius: 4px;
    --btn-radius: 4px;
    background: var(--bg);
    color: var(--ink);
  }
  .app-shell[data-store-preset=night] {
    color-scheme: dark;
    --bg: #111215;
    --surface: #1a1b20;
    --surface-2: #1f2027;
    --ink: #f1f0ec;
    --muted: #a4a4ab;
    --line: #2b2c33;
    --accent: #ff6b4a;
    --accent-2: #ff8466;
    --accent-ink: #160a06;
    --accent-text: #ff8a6e;
    --shadow: none;
    --font-display:
      "Syne",
      "Syne Fallback",
      var(--font-sans);
    --display-weight: 700;
    --display-track: -0.02em;
    --store-radius: 18px;
    --btn-radius: 12px;
    background: var(--bg);
    color: var(--ink);
  }
  .app-shell[data-store-preset=editorial] {
    --font-display: var(--font-serif);
    --display-weight: 400;
    --display-track: -0.005em;
    --font-card: var(--font-serif);
    --card-weight: 400;
    --store-radius: 6px;
    --btn-radius: 999px;
    --tile-radius: 0;
    --tile-gap: 1px;
    --tile-body-pad: 1.05rem 0.85rem 3.2rem;
    --tile-body-pad-phone: 0.75rem 0.65rem 2.4rem;
    --intro-size: 0.875rem;
    --intro-leading: 2;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme=light]) .app-shell[data-store-preset=porcelain]:not([data-store-theme=light]) {
      color-scheme: dark;
      --bg: #0f1013;
      --surface: #17181c;
      --surface-2: #1d1f25;
      --ink: #f1f1ee;
      --muted: #a2a5ad;
      --line: #2a2c33;
      --accent: #7d93ff;
      --accent-2: #93a6ff;
      --accent-ink: #0b0f24;
      --accent-text: #9fb0ff;
    }
    :root:not([data-theme=light]) .app-shell[data-store-preset=market]:not([data-store-theme=light]) {
      color-scheme: dark;
      --bg: #10130f;
      --surface: #171b16;
      --surface-2: #1e231d;
      --ink: #eeeee6;
      --muted: #a3a99c;
      --line: #2a3028;
      --accent: #7fc29a;
      --accent-2: #93d0ab;
      --accent-ink: #0b1a10;
      --accent-text: #8fd0a8;
    }
  }
  :root[data-theme=dark] .app-shell[data-store-preset=porcelain]:not([data-store-theme=light]),
  .app-shell[data-store-preset=porcelain][data-store-theme=dark] {
    color-scheme: dark;
    --bg: #0f1013;
    --surface: #17181c;
    --surface-2: #1d1f25;
    --ink: #f1f1ee;
    --muted: #a2a5ad;
    --line: #2a2c33;
    --accent: #7d93ff;
    --accent-2: #93a6ff;
    --accent-ink: #0b0f24;
    --accent-text: #9fb0ff;
  }
  :root[data-theme=dark] .app-shell[data-store-preset=market]:not([data-store-theme=light]),
  .app-shell[data-store-preset=market][data-store-theme=dark] {
    color-scheme: dark;
    --bg: #10130f;
    --surface: #171b16;
    --surface-2: #1e231d;
    --ink: #eeeee6;
    --muted: #a3a99c;
    --line: #2a3028;
    --accent: #7fc29a;
    --accent-2: #93d0ab;
    --accent-ink: #0b1a10;
    --accent-text: #8fd0a8;
  }
  .app-shell[data-store-preset=atelier] {
    --bg: #ffffff;
    --surface: #ffffff;
    --surface-2: #f4f4f4;
    --ink: #0a0a0a;
    --muted: #616161;
    --line: #e5e5e5;
    --accent: #0a0a0a;
    --accent-2: #2a2a2a;
    --accent-ink: #ffffff;
    --accent-text: #0a0a0a;
    --font-display: var(--font-sans);
    --display-weight: 500;
    --display-track: 0.12em;
    --display-case: uppercase;
    --store-radius: 0px;
    --btn-radius: 0px;
    --tile-radius: 0;
    --tile-gap: 2px;
    background: var(--bg);
    color: var(--ink);
  }
  .app-shell[data-store-preset=pantry] {
    --bg: #fff7ec;
    --surface: #fffdf9;
    --surface-2: #fbead3;
    --ink: #2b1a10;
    --muted: #6e5646;
    --line: #f0dfc8;
    --accent: #c8381f;
    --accent-2: #dd4a2f;
    --accent-ink: #ffffff;
    --accent-text: #b3321b;
    --font-display:
      "Bricolage Grotesque",
      "Bricolage Grotesque Fallback",
      var(--font-sans);
    --display-weight: 800;
    --display-track: -0.04em;
    --display-case: none;
    --store-radius: 22px;
    --btn-radius: 999px;
    background: var(--bg);
    color: var(--ink);
  }
  .app-shell[data-store-preset=apothecary] {
    --bg: #f5f0ea;
    --surface: #fbf8f4;
    --surface-2: #ebe3d9;
    --ink: #2a2521;
    --muted: #6d635b;
    --line: #e2d8cc;
    --accent: #2a2521;
    --accent-2: #463e37;
    --accent-ink: #f5f0ea;
    --accent-text: #2a2521;
    --font-display:
      "Instrument Serif",
      "Instrument Serif Fallback",
      Georgia,
      "Times New Roman",
      serif;
    --font-serif: var(--font-display);
    --display-weight: 400;
    --display-track: -0.01em;
    --display-case: none;
    --store-radius: 2px;
    --btn-radius: 999px;
    background: var(--bg);
    color: var(--ink);
  }
  .app-shell[data-store-preset=trail] {
    --bg: #f2f1ec;
    --surface: #ffffff;
    --surface-2: #e4e3da;
    --ink: #1b231d;
    --muted: #57605a;
    --line: #d9d8cf;
    --accent: #b8410f;
    --accent-2: #cf4f18;
    --accent-ink: #ffffff;
    --accent-text: #a63a0d;
    --font-display:
      "Bricolage Grotesque",
      "Bricolage Grotesque Fallback",
      var(--font-sans);
    --display-weight: 800;
    --display-track: 0.01em;
    --display-case: uppercase;
    --store-radius: 4px;
    --btn-radius: 4px;
    background: var(--bg);
    color: var(--ink);
  }
  .app-shell[data-store-preset=nest] {
    --bg: #f7f4ef;
    --surface: #fffdfa;
    --surface-2: #ece6dc;
    --ink: #24211d;
    --muted: #6b645b;
    --line: #e5ded3;
    --accent: #9c4a2c;
    --accent-2: #b25836;
    --accent-ink: #ffffff;
    --accent-text: #9c4a2c;
    --font-display: var(--font-sans);
    --display-weight: 400;
    --display-track: -0.035em;
    --display-case: none;
    --store-radius: 8px;
    --btn-radius: 8px;
    background: var(--bg);
    color: var(--ink);
  }
  .app-shell[data-store-preset=volt] {
    --bg: #f5f5f7;
    --surface: #ffffff;
    --surface-2: #ebebef;
    --ink: #1d1d1f;
    --muted: #68686d;
    --line: #d9d9de;
    --accent: #0062cc;
    --accent-2: #0a72e6;
    --accent-ink: #ffffff;
    --accent-text: #0062cc;
    --font-display: var(--font-sans);
    --display-weight: 600;
    --display-track: -0.045em;
    --display-case: none;
    --store-radius: 20px;
    --btn-radius: 999px;
    background: var(--bg);
    color: var(--ink);
  }
  .app-shell[data-store-preset=playroom] {
    --bg: #fffaf0;
    --surface: #ffffff;
    --surface-2: #fff0cc;
    --ink: #1f2a48;
    --muted: #56607a;
    --line: #f1e6cc;
    --accent: #ffbf1f;
    --accent-2: #ffcd4d;
    --accent-ink: #1f2a48;
    --accent-text: #8a5a00;
    --font-display:
      "Bricolage Grotesque",
      "Bricolage Grotesque Fallback",
      var(--font-sans);
    --display-weight: 800;
    --display-track: -0.02em;
    --display-case: none;
    --store-radius: 24px;
    --btn-radius: 999px;
    background: var(--bg);
    color: var(--ink);
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme=light]) .app-shell[data-store-preset=atelier]:not([data-store-theme=light]) {
      color-scheme: dark;
      --bg: #0a0a0a;
      --surface: #121212;
      --surface-2: #1a1a1a;
      --ink: #f5f5f5;
      --muted: #a0a0a0;
      --line: #262626;
      --accent: #f5f5f5;
      --accent-2: #d9d9d9;
      --accent-ink: #0a0a0a;
      --accent-text: #f5f5f5;
    }
    :root:not([data-theme=light]) .app-shell[data-store-preset=pantry]:not([data-store-theme=light]) {
      color-scheme: dark;
      --bg: #1a110c;
      --surface: #23170f;
      --surface-2: #2d1e14;
      --ink: #fbefe2;
      --muted: #c2a994;
      --line: #3a281c;
      --accent: #ff7a5c;
      --accent-2: #ff9479;
      --accent-ink: #2b0d05;
      --accent-text: #ff9a80;
    }
    :root:not([data-theme=light]) .app-shell[data-store-preset=apothecary]:not([data-store-theme=light]) {
      color-scheme: dark;
      --bg: #161311;
      --surface: #1e1a17;
      --surface-2: #26211d;
      --ink: #f1ebe3;
      --muted: #b0a597;
      --line: #332c26;
      --accent: #e9dfd2;
      --accent-2: #f5ede3;
      --accent-ink: #1e1a17;
      --accent-text: #e9dfd2;
    }
    :root:not([data-theme=light]) .app-shell[data-store-preset=trail]:not([data-store-theme=light]) {
      color-scheme: dark;
      --bg: #121612;
      --surface: #1a1f1a;
      --surface-2: #222822;
      --ink: #eef0ea;
      --muted: #a3aba1;
      --line: #2c332c;
      --accent: #ff8a4c;
      --accent-2: #ffa070;
      --accent-ink: #1f0d02;
      --accent-text: #ff9a62;
    }
    :root:not([data-theme=light]) .app-shell[data-store-preset=nest]:not([data-store-theme=light]) {
      color-scheme: dark;
      --bg: #151311;
      --surface: #1d1a17;
      --surface-2: #25211d;
      --ink: #f2eee8;
      --muted: #aaa196;
      --line: #322d28;
      --accent: #e08a63;
      --accent-2: #eaa080;
      --accent-ink: #24100a;
      --accent-text: #eba07f;
    }
    :root:not([data-theme=light]) .app-shell[data-store-preset=volt]:not([data-store-theme=light]) {
      color-scheme: dark;
      --bg: #000000;
      --surface: #141416;
      --surface-2: #1c1c1f;
      --ink: #f5f5f7;
      --muted: #a1a1a6;
      --line: #2a2a2e;
      --accent: #2f9bff;
      --accent-2: #57afff;
      --accent-ink: #00152b;
      --accent-text: #5cb0ff;
    }
    :root:not([data-theme=light]) .app-shell[data-store-preset=playroom]:not([data-store-theme=light]) {
      color-scheme: dark;
      --bg: #121829;
      --surface: #1a2236;
      --surface-2: #222b42;
      --ink: #f5f3ea;
      --muted: #aab1c4;
      --line: #2c3550;
      --accent: #ffc93d;
      --accent-2: #ffd666;
      --accent-ink: #1f2a48;
      --accent-text: #ffd25e;
    }
  }
  :root[data-theme=dark] .app-shell[data-store-preset=atelier]:not([data-store-theme=light]),
  .app-shell[data-store-preset=atelier][data-store-theme=dark] {
    color-scheme: dark;
    --bg: #0a0a0a;
    --surface: #121212;
    --surface-2: #1a1a1a;
    --ink: #f5f5f5;
    --muted: #a0a0a0;
    --line: #262626;
    --accent: #f5f5f5;
    --accent-2: #d9d9d9;
    --accent-ink: #0a0a0a;
    --accent-text: #f5f5f5;
  }
  :root[data-theme=dark] .app-shell[data-store-preset=pantry]:not([data-store-theme=light]),
  .app-shell[data-store-preset=pantry][data-store-theme=dark] {
    color-scheme: dark;
    --bg: #1a110c;
    --surface: #23170f;
    --surface-2: #2d1e14;
    --ink: #fbefe2;
    --muted: #c2a994;
    --line: #3a281c;
    --accent: #ff7a5c;
    --accent-2: #ff9479;
    --accent-ink: #2b0d05;
    --accent-text: #ff9a80;
  }
  :root[data-theme=dark] .app-shell[data-store-preset=apothecary]:not([data-store-theme=light]),
  .app-shell[data-store-preset=apothecary][data-store-theme=dark] {
    color-scheme: dark;
    --bg: #161311;
    --surface: #1e1a17;
    --surface-2: #26211d;
    --ink: #f1ebe3;
    --muted: #b0a597;
    --line: #332c26;
    --accent: #e9dfd2;
    --accent-2: #f5ede3;
    --accent-ink: #1e1a17;
    --accent-text: #e9dfd2;
  }
  :root[data-theme=dark] .app-shell[data-store-preset=trail]:not([data-store-theme=light]),
  .app-shell[data-store-preset=trail][data-store-theme=dark] {
    color-scheme: dark;
    --bg: #121612;
    --surface: #1a1f1a;
    --surface-2: #222822;
    --ink: #eef0ea;
    --muted: #a3aba1;
    --line: #2c332c;
    --accent: #ff8a4c;
    --accent-2: #ffa070;
    --accent-ink: #1f0d02;
    --accent-text: #ff9a62;
  }
  :root[data-theme=dark] .app-shell[data-store-preset=nest]:not([data-store-theme=light]),
  .app-shell[data-store-preset=nest][data-store-theme=dark] {
    color-scheme: dark;
    --bg: #151311;
    --surface: #1d1a17;
    --surface-2: #25211d;
    --ink: #f2eee8;
    --muted: #aaa196;
    --line: #322d28;
    --accent: #e08a63;
    --accent-2: #eaa080;
    --accent-ink: #24100a;
    --accent-text: #eba07f;
  }
  :root[data-theme=dark] .app-shell[data-store-preset=volt]:not([data-store-theme=light]),
  .app-shell[data-store-preset=volt][data-store-theme=dark] {
    color-scheme: dark;
    --bg: #000000;
    --surface: #141416;
    --surface-2: #1c1c1f;
    --ink: #f5f5f7;
    --muted: #a1a1a6;
    --line: #2a2a2e;
    --accent: #2f9bff;
    --accent-2: #57afff;
    --accent-ink: #00152b;
    --accent-text: #5cb0ff;
  }
  :root[data-theme=dark] .app-shell[data-store-preset=playroom]:not([data-store-theme=light]),
  .app-shell[data-store-preset=playroom][data-store-theme=dark] {
    color-scheme: dark;
    --bg: #121829;
    --surface: #1a2236;
    --surface-2: #222b42;
    --ink: #f5f3ea;
    --muted: #aab1c4;
    --line: #2c3550;
    --accent: #ffc93d;
    --accent-2: #ffd666;
    --accent-ink: #1f2a48;
    --accent-text: #ffd25e;
  }
  .app-shell[data-owner-accent] {
    --accent-text: var(--owner-text-light);
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme=light]) .app-shell[data-owner-accent]:not([data-store-theme=light]) {
      --accent-text: var(--owner-text-dark);
    }
  }
  :root[data-theme=dark] .app-shell[data-owner-accent]:not([data-store-theme=light]),
  .app-shell[data-owner-accent][data-store-theme=dark],
  .app-shell[data-owner-accent][data-store-preset=night] {
    --accent-text: var(--owner-text-dark);
  }
}

/* app/page.css */
@layer tokens, components, author;
@layer components {
  * {
    box-sizing: border-box;
  }
  main {
    padding: 2.5rem 1.5rem 5rem;
    max-width: 72rem;
    margin: 0 auto;
  }
  main.narrow {
    max-width: 40rem;
  }
  h1 {
    font-family: var(--font-display);
    font-weight: var(--display-weight);
    font-size: clamp(1.9rem, 4.2vw, 2.9rem);
    letter-spacing: var(--display-track);
    text-transform: var(--display-case);
    line-height: 1.04;
    margin: 0.25rem 0 0.75rem;
    text-wrap: balance;
  }
  h2 {
    font-size: 1rem;
    margin: 0;
    line-height: 1.3;
  }
  a {
    color: inherit;
  }
  img {
    display: block;
    max-width: 100%;
    height: auto;
  }
  .eyebrow {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--muted);
    margin: 0;
  }
  .lede {
    color: var(--muted);
    max-width: 36rem;
    margin: 0;
    font-size: 1.05rem;
  }
  .muted {
    color: var(--muted);
    margin: 0.15rem 0 0;
  }
  .small {
    font-size: 0.85rem;
  }
  .empty {
    color: var(--muted);
    padding: 3rem 0;
  }
  .empty a:not(.btn) {
    color: var(--accent-text);
  }
  .nav-links {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.92rem;
  }
  .nav-links a {
    text-decoration: none;
    color: var(--muted);
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 0.35rem;
  }
  .nav-links a:hover {
    color: var(--ink);
  }
  .nav-pages {
    display: flex;
    align-items: center;
    gap: 0.6rem;
  }
  .nav-pages[popover] {
    position: static;
    inset: auto;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    overflow: visible;
    width: auto;
    height: auto;
  }
  .nav-menu-button {
    display: none;
  }
  @media (max-width: 48rem) {
    .nav-pages[popover]:not(:popover-open) {
      display: none;
    }
    .nav-pages[popover]:popover-open {
      display: grid;
      align-content: start;
      gap: 0;
      position: fixed;
      inset: var(--nav-h, 3.75rem) 0 auto 0;
      width: 100%;
      padding: 0.5rem clamp(1.25rem, 6vw, 2rem) 1.5rem;
      background: var(--bg);
      border-bottom: 1px solid var(--line);
      box-shadow: 0 24px 40px -24px rgba(0, 0, 0, 0.35);
    }
    .nav-pages[popover] a {
      min-height: 52px;
      font-size: 1.15rem;
      color: var(--ink);
      border-bottom: 1px solid var(--line);
      padding: 0;
    }
    .nav-pages[popover] a:last-child {
      border-bottom: 0;
    }
    .nav-menu-button {
      font: inherit;
      display: inline-grid;
      place-items: center;
      width: 44px;
      height: 44px;
      margin-right: -0.6rem;
      padding: 0;
      border: 0;
      background: none;
      color: var(--ink);
      cursor: pointer;
      border-radius: 8px;
    }
    .nav-menu-button:focus-visible {
      outline: 2px solid var(--accent);
      outline-offset: 2px;
    }
    .nav-cart span:not(.cart-count) {
      display: none;
    }
  }
  .nav-cart {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
  }
  .cart-count {
    display: inline-grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--accent);
    color: var(--accent-ink);
    font-size: 0.72rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
  }
  .app-brand {
    font-family: var(--font-display);
    font-weight: var(--display-weight);
    font-size: 1.35rem;
    letter-spacing: var(--display-track);
    text-transform: var(--display-case);
  }
  .app-logo {
    display: block;
    height: 2rem;
    width: auto;
    max-width: 12rem;
    object-fit: contain;
  }
  .app-foot {
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: 0.88rem;
    padding: clamp(2rem, 5vw, 3.5rem) clamp(1.25rem, 6vw, 5.4rem) 1.5rem;
    margin-top: clamp(2rem, 6vw, 5rem);
  }
  .foot-main {
    display: grid;
    grid-template-columns: minmax(12rem, 2fr) repeat(auto-fit, minmax(9rem, 1fr));
    gap: 2rem clamp(1.5rem, 4vw, 3rem);
    max-width: 72rem;
    margin: 0 auto;
  }
  .foot-name {
    margin: 0 0 0.5rem;
    color: var(--ink);
    font-family: var(--font-display);
    font-weight: var(--display-weight);
    font-size: 1.15rem;
    letter-spacing: var(--display-track);
    text-transform: var(--display-case);
  }
  .foot-text {
    margin: 0;
    max-width: 28rem;
    line-height: 1.6;
  }
  .foot-heading {
    margin: 0 0 0.75rem;
    color: var(--ink);
    font-size: 0.78rem;
    font-weight: 650;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  .foot-col ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.1rem;
  }
  .app-foot a {
    color: var(--muted);
    text-decoration: none;
  }
  .foot-col a {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
  }
  .app-foot a:hover {
    color: var(--ink);
    text-decoration: underline;
    text-underline-offset: 0.2em;
  }
  .foot-legal {
    max-width: 72rem;
    margin: 2.5rem auto 0;
    padding-top: 1.25rem;
    border-top: 1px solid var(--line);
    font-size: 0.8rem;
  }
  @media (max-width: 40rem) {
    .foot-main {
      grid-template-columns: 1fr 1fr;
    }
    .foot-brand {
      grid-column: 1 / -1;
    }
  }
  .hero {
    padding: 1rem 0 2.25rem;
  }
  .grid {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 2rem 1.5rem;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  }
  .card-link {
    text-decoration: none;
    display: grid;
    gap: 0.85rem;
  }
  .card-frame {
    position: relative;
    background: var(--surface-2);
    border: 1px solid transparent;
    border-radius: var(--store-radius);
    aspect-ratio: 4 / 5;
    overflow: hidden;
    transition: border-color 0.15s ease, transform 0.15s ease;
  }
  .card-frame img {
    position: absolute;
    inset: 1.1rem;
    width: calc(100% - 2.2rem);
    height: calc(100% - 2.2rem);
    max-width: none;
    object-fit: contain;
    filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.18));
  }
  .card-frame .img-missing {
    position: absolute;
    inset: 1.1rem;
    width: auto;
    aspect-ratio: auto;
  }
  .card-link:hover .card-frame {
    border-color: var(--line);
    transform: translateY(-2px);
  }
  .card-link:focus-visible {
    outline: 2px solid var(--accent-text);
    outline-offset: 4px;
    border-radius: var(--store-radius);
  }
  .card-body {
    display: grid;
    gap: 0.2rem;
  }
  .card-body h2 {
    font-family: var(--font-card);
    font-weight: 500;
    font-size: 0.98rem;
    letter-spacing: -0.005em;
  }
  .artist {
    color: var(--muted);
    font-size: 0.88rem;
    margin: 0;
  }
  .price {
    font-weight: 500;
    margin: 0;
    font-variant-numeric: tabular-nums;
  }
  .price-lg {
    font-size: 1.5rem;
    margin: 0.5rem 0 0.4rem;
  }
  .badge {
    position: absolute;
    top: 0.6rem;
    left: 0.6rem;
    background: var(--surface);
    color: var(--ink);
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.25rem 0.6rem;
    border-radius: var(--btn-radius);
    box-shadow: 0 1px 2px rgb(0 0 0 / 8%);
  }
  .badge-out {
    background: var(--ink);
    color: var(--bg);
  }
  .img-missing {
    width: 100%;
    aspect-ratio: 4 / 5;
    background: var(--surface-2);
    border-radius: 4px;
  }
  .back {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 44px;
    color: var(--muted);
    text-decoration: none;
    font-size: 0.9rem;
    margin-bottom: 1rem;
  }
  .back:hover {
    color: var(--accent-text);
  }
  .pdp-grid {
    display: grid;
    gap: 2.5rem;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    align-items: start;
  }
  @media (max-width: 52rem) {
    .pdp-grid {
      grid-template-columns: 1fr;
    }
  }
  @media (min-width: 52.01rem) {
    .pdp-info {
      position: sticky;
      top: calc(var(--nav-h, 3.75rem) + 1.5rem);
    }
  }
  .pdp-figure {
    margin: 0;
    border: 0;
    padding: 0;
    display: grid;
  }
  .pdp-figure img {
    width: 100%;
    height: auto;
    max-height: 85vh;
    object-fit: cover;
    background: var(--surface-2);
  }
  .pdp-gallery {
    list-style: none;
    margin: 1rem 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr));
    gap: 0.5rem;
    width: 100%;
  }
  .pdp-gallery img {
    width: 100%;
    height: 5.5rem;
    max-height: none;
    object-fit: cover;
    filter: none;
    border-radius: calc(var(--store-radius) * 0.6);
  }
  .date {
    color: var(--muted);
    margin: 0;
  }
  .actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin: 1.25rem 0 0.5rem;
  }
  .desc {
    line-height: 1.65;
    margin: 1.5rem 0;
  }
  .variant-picker {
    display: grid;
    gap: 1rem;
    margin: 0.25rem 0 1rem;
  }
  .variant-option {
    border: 0;
    padding: 0;
    margin: 0;
    min-width: 0;
  }
  .variant-option legend {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ink);
    padding: 0;
    margin-bottom: 0.5rem;
  }
  .variant-chosen {
    font-weight: 400;
    color: var(--muted);
  }
  .variant-values {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  .variant-value {
    min-width: 2.75rem;
    min-height: 2.5rem;
    padding: 0.45rem 0.9rem;
    border: 1px solid var(--line);
    border-radius: var(--btn-radius);
    background: var(--surface);
    color: var(--ink);
    font: inherit;
    font-size: 0.88rem;
    cursor: pointer;
    transition:
      border-color 0.15s,
      background 0.15s,
      color 0.15s;
  }
  .variant-value:hover {
    border-color: var(--muted);
  }
  .variant-value.is-on {
    border-color: var(--ink);
    background: var(--surface);
    color: var(--ink);
    box-shadow: inset 0 0 0 1px var(--ink);
  }
  .variant-value.is-unavailable {
    color: var(--muted);
    text-decoration: line-through;
    text-decoration-color: var(--muted);
  }
  .variant-value:focus-visible {
    outline: 2px solid var(--accent-text);
    outline-offset: 2px;
  }
  .variant-sku {
    font-size: 0.8rem;
    color: var(--muted);
    margin: 0 0 0.5rem;
    font-variant-numeric: tabular-nums;
  }
  .variant-label {
    color: var(--muted);
    font-size: 0.85rem;
    margin: 0.1rem 0 0;
  }
  @media (prefers-reduced-motion: reduce) {
    .variant-value {
      transition: none;
    }
  }
  .facts {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.45rem 1.25rem;
    font-size: 0.88rem;
    border-top: 1px solid var(--line);
    padding-top: 1.25rem;
    margin: 0;
  }
  .facts dt {
    color: var(--muted);
  }
  .facts dd {
    margin: 0;
  }
  .source {
    font-size: 0.85rem;
    color: var(--muted);
    margin-top: 1.25rem;
  }
  .source a {
    color: var(--accent-text);
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
  }
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    border-radius: var(--btn-radius);
    min-height: 46px;
    padding: 0.7rem 1.4rem;
    font: inherit;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid transparent;
  }
  .btn-primary {
    background: var(--accent);
    color: var(--accent-ink);
  }
  .btn-primary:hover {
    background: var(--accent-2);
  }
  .btn-primary:disabled {
    opacity: 0.55;
    cursor: progress;
  }
  .btn-ghost {
    background: transparent;
    color: var(--ink);
    border-color: var(--line);
  }
  .btn-ghost:hover {
    border-color: var(--ink);
  }
  .btn-sm {
    min-height: 0;
    padding: 0.35rem 0.8rem;
    font-size: 0.85rem;
  }
  .btn:focus-visible {
    outline: 2px solid var(--accent-text);
    outline-offset: 2px;
  }
  .status {
    font-size: 0.9rem;
    color: var(--ink);
    background: var(--surface-2);
    border-left: 3px solid var(--accent);
    padding: 0.6rem 0.85rem;
    border-radius: 4px;
  }
  .status.is-empty {
    padding: 0;
    border: 0;
    background: none;
    margin: 0;
  }
  .lines {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0;
    border-top: 1px solid var(--line);
  }
  .line {
    display: flex;
    gap: 1rem;
    align-items: center;
    padding: 1rem 0;
    border-bottom: 1px solid var(--line);
  }
  .line-img {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: calc(var(--store-radius) * 0.6);
    background: var(--surface-2);
    flex: none;
  }
  .line-main {
    flex: 1;
    min-width: 0;
  }
  .line-title {
    font-weight: 500;
    text-decoration: none;
  }
  .line-side {
    display: grid;
    justify-items: end;
    gap: 0.4rem;
  }
  .lines.compact .line {
    padding: 0.7rem 0;
  }
  .stepper {
    display: inline-flex;
    align-items: center;
    margin: 0.45rem 0 0.2rem;
    border: 1px solid var(--line);
    border-radius: var(--btn-radius);
    overflow: hidden;
  }
  .stepper-btn {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--ink);
    cursor: pointer;
  }
  .stepper-btn:hover:not(:disabled) {
    color: var(--accent);
    background: var(--surface-2);
  }
  .stepper-btn:disabled {
    opacity: 0.4;
    cursor: default;
  }
  .stepper-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
  }
  .stepper-qty {
    min-width: 2rem;
    text-align: center;
    font-variant-numeric: tabular-nums;
    font-weight: 500;
  }
  .summary {
    display: grid;
    gap: 0.35rem;
    width: min(100%, 24rem);
    margin: 1.5rem 0 0 auto;
  }
  .summary > p:first-child {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    margin: 0 0 0.25rem;
    font-size: 1.1rem;
  }
  .summary > .small {
    margin: 0;
  }
  .summary > .btn {
    margin-top: 0.9rem;
    width: 100%;
  }
  .summary-row {
    margin: 0.5rem 0 1.5rem;
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 1.05rem;
  }
  .form {
    display: grid;
    gap: 0.45rem;
  }
  .form label {
    font-size: 0.85rem;
    font-weight: 600;
    margin-top: 0.6rem;
  }
  .form input,
  .form select {
    font: inherit;
    padding: 0.7rem 0.85rem;
    border-radius: calc(var(--store-radius) * 0.6);
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink);
  }
  .form input:focus,
  .form select:focus {
    outline: 2px solid var(--accent);
    outline-offset: 0;
    border-color: var(--accent);
  }
  .form .btn {
    margin-top: 0.9rem;
    justify-self: start;
  }
  .form textarea {
    font: inherit;
    padding: 0.7rem 0.85rem;
    border-radius: calc(var(--store-radius) * 0.6);
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink);
    resize: vertical;
  }
  .form textarea:focus {
    outline: 2px solid var(--accent);
    outline-offset: 0;
    border-color: var(--accent);
  }
  .band-form .form {
    max-width: 34rem;
    width: 100%;
  }
  .band-form[style*="--s-align:center"] .form {
    margin-inline: auto;
    justify-content: center;
  }
  .form-inline {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
  }
  .form-inline .btn {
    margin-top: 0;
  }
  .form-trap {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
  }
  .form-note {
    margin: 0;
    padding: 0.75rem 1rem;
    border-radius: calc(var(--store-radius) * 0.6);
    border: 1px solid var(--line);
    max-width: 34rem;
  }
  .form-note:focus {
    outline: none;
  }
  .form-note-ok {
    border-color: var(--accent);
  }
  .form-note-error {
    border-color: light-dark(#b42318, #f97066);
  }
  .band-form.is-sent .form {
    display: none;
  }
  @media (max-width: 560px) {
    .form-inline {
      grid-template-columns: minmax(0, 1fr);
    }
  }
  .confirm {
    text-align: left;
  }
  .confirm-icon {
    color: var(--accent);
    margin-bottom: 0.75rem;
  }
  .order-number {
    color: var(--accent);
    font-variant-numeric: tabular-nums;
  }
  .band-live.featured-collection .grid {
    padding: 0;
  }
  .band-live.featured-collection.is-single .grid {
    grid-template-columns: minmax(0, 24rem);
  }
  .band-live .listing-more {
    margin: 0;
  }
  .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }
  .modular-page {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }
  .band {
    display: grid;
    gap: 1.25rem;
    padding: 2.5rem 0;
    border-top: 1px solid var(--line);
  }
  .modular-page > .band:first-of-type,
  .modular-page > div:first-child .band,
  .fold-above > .band:first-child {
    border-top: 0;
    padding-top: 0.5rem;
  }
  .fold-below > * {
    content-visibility: auto;
    contain-intrinsic-size: auto 32rem;
  }
  .band h2 {
    font-family: var(--font-display);
    font-weight: var(--display-weight);
    font-size: var(--s-hsize, clamp(1.5rem, 2.6vw, 2.2rem));
    letter-spacing: var(--s-htrack, var(--display-track));
    line-height: 1.08;
    margin: 0;
  }
  .band-hero,
  .band-split {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    align-items: center;
  }
  .band-split.is-flip .band-media {
    order: 2;
  }
  .band-hero.is-center {
    text-align: center;
    justify-items: center;
  }
  .band-hero.is-right {
    text-align: right;
    justify-items: end;
  }
  .band-hero {
    padding-block: clamp(1.5rem, 5vw, 4.5rem);
    gap: clamp(1.5rem, 5vw, 4.5rem);
  }
  .band-hero .band-copy {
    gap: 1.1rem;
    max-width: 38rem;
  }
  .band-hero.is-center .band-copy {
    margin-inline: auto;
    justify-items: center;
  }
  .band-hero.is-right .band-copy {
    margin-left: auto;
    justify-items: end;
  }
  .band-hero h2 {
    font-size: var(--s-hsize, clamp(2.4rem, 5.6vw, 4.6rem));
    line-height: 0.98;
    text-wrap: balance;
  }
  .band-hero .lede {
    font-size: clamp(1.05rem, 1.35vw, 1.22rem);
    line-height: 1.55;
    color: var(--muted);
    max-width: 34rem;
    margin: 0;
    text-wrap: pretty;
  }
  .band-hero .btn {
    justify-self: start;
    margin-top: 0.5rem;
  }
  .band-hero.is-center .btn {
    justify-self: center;
  }
  .band-hero.is-right .btn {
    justify-self: end;
  }
  .band-hero:not(:has(> .band-media)) {
    grid-template-columns: minmax(0, 1fr);
  }
  .band-hero:not(:has(> .band-media)) .band-copy {
    max-width: 48rem;
  }
  .band-copy {
    display: grid;
    gap: 0.8rem;
    align-content: center;
  }
  .band-media {
    margin: 0;
    border-radius: var(--store-radius);
    overflow: hidden;
    background: var(--surface-2);
  }
  .band-media img {
    width: 100%;
    aspect-ratio: var(--s-ratio, 4 / 3);
    object-fit: cover;
    object-position: var(--img-pos, center);
    border-radius: inherit;
    display: block;
  }
  .band-gallery .band-media {
    overflow: visible;
    background: none;
    border-radius: 0;
  }
  .band-gallery .band-media img {
    border-radius: var(--store-radius);
    background: var(--surface-2);
  }
  .band-gallery figcaption {
    margin: 0.55rem 0 0;
  }
  .band-gallery,
  .logo-row,
  .band-compare,
  .band-cards {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .band-gallery,
  .band-cards,
  .band-compare {
    display: grid;
    gap: var(--s-gap, 0.85rem);
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  }
  .logo-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem 2rem;
    align-items: center;
  }
  .logo-row img {
    height: 2.5rem;
    width: auto;
    object-fit: contain;
  }
  .band-card {
    border: 1px solid var(--line);
    border-radius: var(--store-radius);
    overflow: hidden;
    background: var(--bg);
    display: flex;
    flex-direction: column;
  }
  .band-card h2 {
    font-size: 1.15rem;
  }
  .band-card-body {
    display: grid;
    gap: 0.45rem;
    padding: 0.9rem 1rem 1.1rem;
  }
  .band-banner,
  .band-cta,
  .band-announce {
    border: 1px solid var(--line);
    border-radius: var(--store-radius);
    background: var(--surface-2);
    padding: 1.5rem;
  }
  .band-announce {
    padding: 0.8rem 1rem;
  }
  .band-quote {
    margin: 0;
    display: grid;
    gap: 0.75rem;
  }
  .quote {
    font-size: 1.35rem;
    line-height: 1.45;
    margin: 0;
  }
  .band-faq,
  .band-prose {
    max-width: 46rem;
  }
  .faq {
    border-top: 1px solid var(--line);
  }
  .faq-item {
    border-bottom: 1px solid var(--line);
  }
  .faq-item summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1.1rem 0;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
  }
  .faq-item summary::-webkit-details-marker {
    display: none;
  }
  .faq-item summary::after {
    content: "";
    flex: none;
    width: 0.6rem;
    height: 0.6rem;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: translateY(-25%) rotate(45deg);
    transition: transform 0.2s ease;
  }
  .faq-item[open] summary::after {
    transform: translateY(25%) rotate(-135deg);
  }
  .faq-item summary:focus-visible {
    outline: 2px solid var(--accent, currentColor);
    outline-offset: 2px;
  }
  .faq-item p {
    margin: 0 0 1.2rem;
    color: var(--muted);
    line-height: 1.65;
    max-width: 62ch;
  }
  .band-prose p {
    line-height: 1.7;
    margin: 0 0 1rem;
    max-width: 66ch;
  }
  .band-prose p:has(> strong:only-child) {
    margin: 2rem 0 0.5rem;
    font-size: 1.1rem;
  }
  .band-prose p:first-child:has(> strong:only-child) {
    margin-top: 0;
  }
  .band-video {
    font-weight: 650;
  }
  .band-compare li {
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 1rem;
  }
  .band-compare h3,
  .band-card h3,
  .band-steps h3,
  .band-prose h3 {
    margin: 0 0 0.35rem;
    font-size: 1rem;
  }
  .band-stats {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
    gap: 1rem;
  }
  .band-stats strong {
    display: block;
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    letter-spacing: -0.03em;
    line-height: 1.1;
  }
  .band-steps {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 1rem;
  }
  .band-steps li {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr);
    gap: 0.75rem;
    align-items: start;
  }
  .band-step-n {
    font-weight: 700;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
  }
  .band-press {
    display: grid;
    gap: 1.5rem;
  }
  .band-press .quote {
    font-size: 1.05rem;
    line-height: 1.5;
  }
  .band[style*=--s-cols] :is(.band-steps, .band-press, .band-stats) {
    grid-template-columns: repeat(var(--s-cols), minmax(0, 1fr));
    gap: var(--s-gap, 1.5rem);
  }
  .band[style*=--s-cols] .band-steps li {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.4rem;
  }
  .band[style*=--s-cols] .band-step-n {
    font-size: 1.6rem;
    line-height: 1;
  }
  blockquote.band.band-quote > .quote {
    font-family: var(--s-hfont, var(--font-display));
    font-weight: var(--display-weight);
    font-size: var(--s-hsize, clamp(1.35rem, 2.8vw, 2.2rem));
    line-height: 1.25;
    letter-spacing: var(--display-track);
    text-wrap: balance;
  }
  blockquote.band.band-quote {
    max-width: 52rem;
    margin-inline: auto;
    padding-block: clamp(1.5rem, 4vw, 3.5rem);
  }
  .band-code {
    margin: 0;
    font-weight: 700;
    letter-spacing: 0.08em;
  }
  .band-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.85rem;
  }
  .band-specs {
    margin: 0;
  }
  .band-specs div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 1px solid var(--line);
    padding: 0.55rem 0;
  }
  .band-specs dt {
    font-weight: 650;
  }
  .size-table-wrap {
    overflow-x: auto;
  }
  .size-table {
    width: 100%;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
  }
  .size-table caption {
    caption-side: bottom;
    text-align: start;
    padding-top: 0.6rem;
    color: var(--muted);
    font-size: 0.85rem;
  }
  .size-table th,
  .size-table td {
    text-align: start;
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
  }
  .size-table thead th {
    font-weight: 650;
    font-size: 0.85rem;
  }
  .size-table tbody th {
    font-weight: 650;
  }
  .band-specs dd {
    margin: 0;
    color: var(--muted);
    text-align: right;
  }
  .swatches {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
  }
  .swatches li {
    display: grid;
    justify-items: center;
    gap: 0.35rem;
    font-size: 0.85rem;
  }
  .swatches img {
    width: 4.5rem;
    height: 4.5rem;
    object-fit: cover;
    border-radius: 6px;
    background: var(--surface-2);
  }
  @media (max-width: 52rem) {
    .band-hero,
    .band-split,
    .band-split.is-flip,
    .band-pair {
      grid-template-columns: 1fr;
    }
    .band-split.is-flip .band-media {
      order: 0;
    }
  }
  :root {
    --font-serif:
      "Iowan Old Style",
      "Baskerville",
      "Hoefler Text",
      "Palatino Linotype",
      Georgia,
      "Times New Roman",
      serif;
  }
  body {
    overflow-x: clip;
  }
  .band {
    text-align: var(--s-align, start);
  }
  .band :is(h1, h2, h3) {
    font-family: var(--s-hfont, inherit);
    text-transform: var(--s-hcase, var(--display-case, none));
  }
  .band[style*=--s-hfont] :is(h1, h2, h3) {
    font-weight: 400;
    letter-spacing: var(--s-htrack, -0.005em);
  }
  .band[style*=--s-hcase] .band-card h2 {
    letter-spacing: 0.08em;
    font-size: 0.8rem;
  }
  .band[style*="--s-align:center"] .band-copy {
    justify-items: center;
  }
  .band[style*="--s-align:center"] .lede {
    max-width: 40rem;
    margin-inline: auto;
  }
  .band[style*="--s-divider:none"] {
    border-top: 0;
  }
  .band[style*="--s-btn:outline"] .btn {
    background: transparent;
    color: inherit;
    border: 1px solid currentColor;
  }
  .band[style*="--s-btn:link"] .btn {
    background: transparent;
    color: inherit;
    border: 0;
    padding-inline: 0;
    text-decoration: underline;
    text-underline-offset: 0.25em;
  }
  .band[style*="--s-btnsize:sm"] .btn {
    padding: 0.45rem 0.9rem;
    font-size: 0.88rem;
  }
  .band[style*="--s-btnsize:lg"] .btn {
    padding: 0.95rem 1.9rem;
    font-size: 1.05rem;
  }
  .band[style*="--s-width:bleed"]:not([style*="--s-layout:overlay"]) > :is(h2, .lede) {
    padding-inline: clamp(1rem, 4vw, 3rem);
  }
  .band[style*=--s-cols] :is(.band-gallery, .band-cards) {
    grid-template-columns: repeat(var(--s-cols), minmax(0, 1fr));
  }
  .band[style*="--s-cards:plain"] .band-card {
    border: 0;
    border-radius: 0;
    background: transparent;
  }
  .band[style*="--s-cards:plain"] .band-card .band-media {
    border-radius: 0;
  }
  .band[style*="--s-cards:plain"] .band-card-body {
    padding: 0.85rem 0.15rem 1.4rem;
    gap: 0.3rem;
  }
  .band[style*="--s-cards:plain"] .band-card .price {
    color: var(--muted);
    font-size: 0.85rem;
    margin: 0;
  }
  .band-hero[style*="--s-layout:stacked"] {
    grid-template-columns: minmax(0, 1fr);
  }
  .band-hero[style*="--s-layout:overlay"] {
    grid-template-columns: minmax(0, 1fr);
    padding: 0;
    gap: 0;
    isolation: isolate;
    color: #f6f3ee;
  }
  .band-hero[style*="--s-layout:overlay"] > .band-media {
    grid-area: 1 / 1;
    border-radius: 0;
  }
  .band-hero[style*="--s-layout:overlay"] > .band-media img {
    aspect-ratio: var(--s-ratio, 16 / 9);
    min-height: 26rem;
    height: 100%;
  }
  .band-hero[style*="--s-layout:overlay"] > .band-copy {
    grid-area: 1 / 1;
    z-index: 1;
    align-self: stretch;
    align-content: end;
    padding: clamp(1.5rem, 6vw, 5rem);
    background:
      linear-gradient(
        180deg,
        rgb(0 0 0 / 0%) 20%,
        rgb(0 0 0 / 45%) 60%,
        rgb(0 0 0 / 74%) 100%);
    text-shadow: 0 1px 14px rgb(0 0 0 / 35%);
  }
  .band-hero[style*="--s-layout:overlay"][style*="--s-align:center"] > .band-copy {
    align-content: center;
    background: rgb(0 0 0 / 45%);
  }
  .band-hero[style*="--s-layout:overlay"] > .band-copy {
    max-width: none;
    justify-items: start;
  }
  .band-hero[style*="--s-layout:overlay"].is-center > .band-copy {
    justify-items: center;
    text-align: center;
  }
  .band-hero[style*="--s-layout:overlay"] > .band-copy > * {
    max-width: 42rem;
  }
  .band-hero[style*="--s-layout:overlay"] .lede {
    color: inherit;
    opacity: 0.9;
  }
  .band-cards .band-card {
    position: relative;
  }
  .band-cards .band-card .btn {
    justify-self: start;
    min-height: 0;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font-size: 0.88rem;
    font-weight: 550;
    text-decoration: underline;
    text-underline-offset: 0.25em;
  }
  .band-cards .band-card .btn::after {
    content: "";
    position: absolute;
    inset: 0;
  }
  .band-cards .band-card:has(.price) .btn {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    color: transparent;
    text-decoration: none;
  }
  .band-cards .band-card:has(.price) .btn::after {
    display: none;
  }
  .band-cards .band-card:has(.price):focus-within {
    outline: 2px solid var(--accent-text);
    outline-offset: 4px;
  }
  .band-cards .band-card:has(.price) .btn:focus-visible {
    outline: none;
  }
  .band-cards .band-card .band-media {
    overflow: hidden;
  }
  .band-cards .band-card .band-media img {
    transition: transform 0.4s ease;
  }
  .band-cards .band-card:hover .band-media img {
    transform: scale(1.03);
  }
  @media (prefers-reduced-motion: reduce) {
    .band-cards .band-card .band-media img {
      transition: none;
    }
  }
  .band[style*="--s-cards:plain"] .band-card-body {
    padding: 0.85rem 0 0.4rem;
    gap: 0.25rem;
  }
  .band[style*="--s-cards:plain"] .band-card-body h2 {
    font-size: 1rem;
    font-weight: 550;
  }
  .band[style*="--s-cards:plain"] ul.band-cards > li.band-card {
    border-top: 1px solid var(--line);
    padding-top: 1rem;
  }
  .band[style*="--s-cards:plain"] ul.band-cards > li.band-card .band-card-body {
    padding: 0;
  }
  .band-split .band-copy .btn {
    justify-self: start;
  }
  .band-split[style*="--s-align:center"] .band-copy .btn {
    justify-self: center;
  }
  @media (max-width: 52rem) {
    .band[style*="--s-cols:4"] :is(.band-gallery, .band-cards) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  @media (max-width: 40rem) {
    .band[style*=--s-cols] :is(.band-gallery, .band-cards) {
      grid-template-columns: repeat(var(--s-cols-m, 2), minmax(0, 1fr));
    }
    .band[style*=--s-cols] :is(.band-steps, .band-press) {
      grid-template-columns: minmax(0, 1fr);
    }
    .band[style*=--s-cols] .band-stats {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .band-hero[style*="--s-layout:overlay"] > .band-media img {
      aspect-ratio: 4 / 5;
      min-height: 0;
    }
  }
}
@layer author {
  .featured-collection[style*=--a-text-dark],
  .band[style*=--a-text-dark] {
    color: light-dark(var(--a-text, var(--ink)), var(--a-text-dark));
  }
  .featured-collection[style*=--a-bg-dark],
  .band[style*=--a-bg-dark] {
    background: light-dark(var(--a-bg, transparent), var(--a-bg-dark));
  }
  [style*=--img-bg-dark] {
    background: light-dark(var(--img-bg, transparent), var(--img-bg-dark));
  }
  .band-media[style*=--img-bg-dark] {
    background: light-dark(var(--img-bg, var(--surface-2)), var(--img-bg-dark));
  }
  .band[style*="--s-width:bleed"] {
    margin-inline: calc(50% - 50vw);
    max-width: none;
  }
  .modular-page .fold-above > .band-hero[style*="--s-width:bleed"]:first-child {
    margin-top: -2.5rem;
  }
  .modular-page .fold-above > .band-announce:first-child {
    margin: -2.5rem calc(50% - 50vw) 0;
    max-width: none;
    border-width: 0 0 1px;
    border-radius: 0;
    padding: 0.6rem clamp(1rem, 4vw, 3rem);
    text-align: center;
    font-size: 0.875rem;
  }
  .modular-page .fold-above > .band-announce:first-child :is(p, .band-copy) {
    margin-inline: auto;
    max-width: 60rem;
    text-align: center;
  }
  .modular-page .fold-above > .band-announce:first-child + .band-hero[style*="--s-width:bleed"] {
    margin-top: 0;
  }
  @media (max-width: 52rem) {
    .band[style*="--cz-padding-top-d:"]:not([style*="--cz-padding-top-t:"]):not([style*="--cz-padding-top-m:"]) {
      padding-top: min(var(--cz-padding-top-d), 4rem);
    }
    .band[style*="--cz-padding-bottom-d:"]:not([style*="--cz-padding-bottom-t:"]):not([style*="--cz-padding-bottom-m:"]) {
      padding-bottom: min(var(--cz-padding-bottom-d), 4rem);
    }
  }
  @media (max-width: 40rem) {
    .band[style*="--cz-padding-top-d:"]:not([style*="--cz-padding-top-m:"]) {
      padding-top: min(var(--cz-padding-top-d), 2.5rem);
    }
    .band[style*="--cz-padding-bottom-d:"]:not([style*="--cz-padding-bottom-m:"]) {
      padding-bottom: min(var(--cz-padding-bottom-d), 2.5rem);
    }
    .band[style*="--cz-padding-left-d:"]:not([style*="--cz-padding-left-m:"]) {
      padding-left: 0;
    }
    .band[style*="--cz-padding-right-d:"]:not([style*="--cz-padding-right-m:"]) {
      padding-right: 0;
    }
    :is(.band-cta, .band-banner, .band-announce, .band[style*=--a-bg])[style*="--cz-padding-left-d:"]:not([style*="--cz-padding-left-m:"]) {
      padding-left: min(var(--cz-padding-left-d), 1.25rem);
    }
    :is(.band-cta, .band-banner, .band-announce, .band[style*=--a-bg])[style*="--cz-padding-right-d:"]:not([style*="--cz-padding-right-m:"]) {
      padding-right: min(var(--cz-padding-right-d), 1.25rem);
    }
  }
}
@layer author {
  [style*="--cz-width-d:"] {
    width: var(--cz-width-d);
  }
  [style*="--cz-min-width-d:"] {
    min-width: var(--cz-min-width-d);
  }
  [style*="--cz-max-width-d:"] {
    max-width: var(--cz-max-width-d);
  }
  [style*="--cz-height-d:"] {
    height: var(--cz-height-d);
  }
  [style*="--cz-min-height-d:"] {
    min-height: var(--cz-min-height-d);
  }
  [style*="--cz-max-height-d:"] {
    max-height: var(--cz-max-height-d);
  }
  [style*="--cz-aspect-ratio-d:"] {
    aspect-ratio: var(--cz-aspect-ratio-d);
  }
  [style*="--cz-display-d:"] {
    display: var(--cz-display-d);
  }
  [style*="--cz-flex-direction-d:"] {
    flex-direction: var(--cz-flex-direction-d);
  }
  [style*="--cz-flex-wrap-d:"] {
    flex-wrap: var(--cz-flex-wrap-d);
  }
  [style*="--cz-columns-d:"] {
    grid-template-columns: repeat(var(--cz-columns-d), minmax(0, 1fr));
  }
  [style*="--cz-gap-d:"] {
    gap: var(--cz-gap-d);
  }
  [style*="--cz-justify-d:"] {
    justify-content: var(--cz-justify-d);
  }
  [style*="--cz-align-d:"] {
    align-items: var(--cz-align-d);
  }
  [style*="--cz-order-d:"] {
    order: var(--cz-order-d);
  }
  [style*="--cz-position-d:"] {
    position: var(--cz-position-d);
  }
  [style*="--cz-z-index-d:"] {
    z-index: var(--cz-z-index-d);
  }
  [style*="--cz-padding-top-d:"] {
    padding-top: var(--cz-padding-top-d);
  }
  [style*="--cz-padding-right-d:"] {
    padding-right: var(--cz-padding-right-d);
  }
  [style*="--cz-padding-bottom-d:"] {
    padding-bottom: var(--cz-padding-bottom-d);
  }
  [style*="--cz-padding-left-d:"] {
    padding-left: var(--cz-padding-left-d);
  }
  [style*="--cz-margin-top-d:"] {
    margin-top: var(--cz-margin-top-d);
  }
  [style*="--cz-margin-right-d:"] {
    margin-right: var(--cz-margin-right-d);
  }
  [style*="--cz-margin-bottom-d:"] {
    margin-bottom: var(--cz-margin-bottom-d);
  }
  [style*="--cz-margin-left-d:"] {
    margin-left: var(--cz-margin-left-d);
  }
  [style*="--cz-font-family-d:"] {
    font-family: var(--cz-font-family-d);
  }
  [style*="--cz-font-size-d:"] {
    font-size: var(--cz-font-size-d);
  }
  [style*="--cz-font-weight-d:"] {
    font-weight: var(--cz-font-weight-d);
  }
  [style*="--cz-line-height-d:"] {
    line-height: var(--cz-line-height-d);
  }
  [style*="--cz-letter-spacing-d:"] {
    letter-spacing: var(--cz-letter-spacing-d);
  }
  [style*="--cz-text-transform-d:"] {
    text-transform: var(--cz-text-transform-d);
  }
  [style*="--cz-text-align-d:"] {
    text-align: var(--cz-text-align-d);
  }
  [style*="--cz-color-d:"] {
    color: light-dark(var(--cz-color-d), var(--cz-color-dark-d, var(--cz-color-d)));
  }
  [style*="--cz-color-dark-d:"] {
    color: light-dark(var(--cz-color-d, currentColor), var(--cz-color-dark-d));
  }
  [style*="--cz-background-color-d:"] {
    background-color: light-dark(var(--cz-background-color-d), var(--cz-background-color-dark-d, var(--cz-background-color-d)));
  }
  [style*="--cz-background-color-dark-d:"] {
    background-color: light-dark(var(--cz-background-color-d, transparent), var(--cz-background-color-dark-d));
  }
  [style*="--cz-background-gradient-d:"] {
    background-image: var(--cz-background-gradient-d);
  }
  [style*="--cz-border-width-d:"] {
    border-width: var(--cz-border-width-d);
  }
  [style*="--cz-border-style-d:"] {
    border-style: var(--cz-border-style-d);
  }
  [style*="--cz-border-color-d:"] {
    border-color: light-dark(var(--cz-border-color-d), var(--cz-border-color-dark-d, var(--cz-border-color-d)));
  }
  [style*="--cz-border-color-dark-d:"] {
    border-color: light-dark(var(--cz-border-color-d, currentColor), var(--cz-border-color-dark-d));
  }
  [style*="--cz-radius-top-left-d:"] {
    border-top-left-radius: var(--cz-radius-top-left-d);
  }
  [style*="--cz-radius-top-right-d:"] {
    border-top-right-radius: var(--cz-radius-top-right-d);
  }
  [style*="--cz-radius-bottom-right-d:"] {
    border-bottom-right-radius: var(--cz-radius-bottom-right-d);
  }
  [style*="--cz-radius-bottom-left-d:"] {
    border-bottom-left-radius: var(--cz-radius-bottom-left-d);
  }
  [style*="--cz-shadow-d:"] {
    box-shadow: var(--cz-shadow-d);
  }
  [style*="--cz-opacity-d:"] {
    opacity: var(--cz-opacity-d);
  }
  [style*="--cz-overflow-d:"] {
    overflow: var(--cz-overflow-d);
  }
  [style*="--cz-visibility-d:"] {
    display: var(--cz-visibility-d);
  }
  [style*="--cz-media--width-d:"] :is(.band-media, .card-frame) {
    width: var(--cz-media--width-d);
  }
  [style*="--cz-media--min-width-d:"] :is(.band-media, .card-frame) {
    min-width: var(--cz-media--min-width-d);
  }
  [style*="--cz-media--max-width-d:"] :is(.band-media, .card-frame) {
    max-width: var(--cz-media--max-width-d);
  }
  [style*="--cz-media--height-d:"] :is(.band-media, .card-frame) {
    height: var(--cz-media--height-d);
  }
  [style*="--cz-media--min-height-d:"] :is(.band-media, .card-frame) {
    min-height: var(--cz-media--min-height-d);
  }
  [style*="--cz-media--max-height-d:"] :is(.band-media, .card-frame) {
    max-height: var(--cz-media--max-height-d);
  }
  [style*="--cz-media--aspect-ratio-d:"] :is(.band-media, .card-frame) {
    aspect-ratio: var(--cz-media--aspect-ratio-d);
  }
  [style*="--cz-media--display-d:"] :is(.band-media, .card-frame) {
    display: var(--cz-media--display-d);
  }
  [style*="--cz-media--flex-direction-d:"] :is(.band-media, .card-frame) {
    flex-direction: var(--cz-media--flex-direction-d);
  }
  [style*="--cz-media--flex-wrap-d:"] :is(.band-media, .card-frame) {
    flex-wrap: var(--cz-media--flex-wrap-d);
  }
  [style*="--cz-media--columns-d:"] :is(.band-media, .card-frame) {
    grid-template-columns: repeat(var(--cz-media--columns-d), minmax(0, 1fr));
  }
  [style*="--cz-media--gap-d:"] :is(.band-media, .card-frame) {
    gap: var(--cz-media--gap-d);
  }
  [style*="--cz-media--justify-d:"] :is(.band-media, .card-frame) {
    justify-content: var(--cz-media--justify-d);
  }
  [style*="--cz-media--align-d:"] :is(.band-media, .card-frame) {
    align-items: var(--cz-media--align-d);
  }
  [style*="--cz-media--order-d:"] :is(.band-media, .card-frame) {
    order: var(--cz-media--order-d);
  }
  [style*="--cz-media--position-d:"] :is(.band-media, .card-frame) {
    position: var(--cz-media--position-d);
  }
  [style*="--cz-media--z-index-d:"] :is(.band-media, .card-frame) {
    z-index: var(--cz-media--z-index-d);
  }
  [style*="--cz-media--padding-top-d:"] :is(.band-media, .card-frame) {
    padding-top: var(--cz-media--padding-top-d);
  }
  [style*="--cz-media--padding-right-d:"] :is(.band-media, .card-frame) {
    padding-right: var(--cz-media--padding-right-d);
  }
  [style*="--cz-media--padding-bottom-d:"] :is(.band-media, .card-frame) {
    padding-bottom: var(--cz-media--padding-bottom-d);
  }
  [style*="--cz-media--padding-left-d:"] :is(.band-media, .card-frame) {
    padding-left: var(--cz-media--padding-left-d);
  }
  [style*="--cz-media--margin-top-d:"] :is(.band-media, .card-frame) {
    margin-top: var(--cz-media--margin-top-d);
  }
  [style*="--cz-media--margin-right-d:"] :is(.band-media, .card-frame) {
    margin-right: var(--cz-media--margin-right-d);
  }
  [style*="--cz-media--margin-bottom-d:"] :is(.band-media, .card-frame) {
    margin-bottom: var(--cz-media--margin-bottom-d);
  }
  [style*="--cz-media--margin-left-d:"] :is(.band-media, .card-frame) {
    margin-left: var(--cz-media--margin-left-d);
  }
  [style*="--cz-media--font-family-d:"] :is(.band-media, .card-frame) {
    font-family: var(--cz-media--font-family-d);
  }
  [style*="--cz-media--font-size-d:"] :is(.band-media, .card-frame) {
    font-size: var(--cz-media--font-size-d);
  }
  [style*="--cz-media--font-weight-d:"] :is(.band-media, .card-frame) {
    font-weight: var(--cz-media--font-weight-d);
  }
  [style*="--cz-media--line-height-d:"] :is(.band-media, .card-frame) {
    line-height: var(--cz-media--line-height-d);
  }
  [style*="--cz-media--letter-spacing-d:"] :is(.band-media, .card-frame) {
    letter-spacing: var(--cz-media--letter-spacing-d);
  }
  [style*="--cz-media--text-transform-d:"] :is(.band-media, .card-frame) {
    text-transform: var(--cz-media--text-transform-d);
  }
  [style*="--cz-media--text-align-d:"] :is(.band-media, .card-frame) {
    text-align: var(--cz-media--text-align-d);
  }
  [style*="--cz-media--color-d:"] :is(.band-media, .card-frame) {
    color: light-dark(var(--cz-media--color-d), var(--cz-media--color-dark-d, var(--cz-media--color-d)));
  }
  [style*="--cz-media--color-dark-d:"] :is(.band-media, .card-frame) {
    color: light-dark(var(--cz-media--color-d, currentColor), var(--cz-media--color-dark-d));
  }
  [style*="--cz-media--background-color-d:"] :is(.band-media, .card-frame) {
    background-color: light-dark(var(--cz-media--background-color-d), var(--cz-media--background-color-dark-d, var(--cz-media--background-color-d)));
  }
  [style*="--cz-media--background-color-dark-d:"] :is(.band-media, .card-frame) {
    background-color: light-dark(var(--cz-media--background-color-d, transparent), var(--cz-media--background-color-dark-d));
  }
  [style*="--cz-media--background-gradient-d:"] :is(.band-media, .card-frame) {
    background-image: var(--cz-media--background-gradient-d);
  }
  [style*="--cz-media--border-width-d:"] :is(.band-media, .card-frame) {
    border-width: var(--cz-media--border-width-d);
  }
  [style*="--cz-media--border-style-d:"] :is(.band-media, .card-frame) {
    border-style: var(--cz-media--border-style-d);
  }
  [style*="--cz-media--border-color-d:"] :is(.band-media, .card-frame) {
    border-color: light-dark(var(--cz-media--border-color-d), var(--cz-media--border-color-dark-d, var(--cz-media--border-color-d)));
  }
  [style*="--cz-media--border-color-dark-d:"] :is(.band-media, .card-frame) {
    border-color: light-dark(var(--cz-media--border-color-d, currentColor), var(--cz-media--border-color-dark-d));
  }
  [style*="--cz-media--radius-top-left-d:"] :is(.band-media, .card-frame) {
    border-top-left-radius: var(--cz-media--radius-top-left-d);
  }
  [style*="--cz-media--radius-top-right-d:"] :is(.band-media, .card-frame) {
    border-top-right-radius: var(--cz-media--radius-top-right-d);
  }
  [style*="--cz-media--radius-bottom-right-d:"] :is(.band-media, .card-frame) {
    border-bottom-right-radius: var(--cz-media--radius-bottom-right-d);
  }
  [style*="--cz-media--radius-bottom-left-d:"] :is(.band-media, .card-frame) {
    border-bottom-left-radius: var(--cz-media--radius-bottom-left-d);
  }
  [style*="--cz-media--shadow-d:"] :is(.band-media, .card-frame) {
    box-shadow: var(--cz-media--shadow-d);
  }
  [style*="--cz-media--opacity-d:"] :is(.band-media, .card-frame) {
    opacity: var(--cz-media--opacity-d);
  }
  [style*="--cz-media--overflow-d:"] :is(.band-media, .card-frame) {
    overflow: var(--cz-media--overflow-d);
  }
  [style*="--cz-media--visibility-d:"] :is(.band-media, .card-frame) {
    display: var(--cz-media--visibility-d);
  }
  [style*="--cz-heading--width-d:"] :is(h1, h2, h3) {
    width: var(--cz-heading--width-d);
  }
  [style*="--cz-heading--min-width-d:"] :is(h1, h2, h3) {
    min-width: var(--cz-heading--min-width-d);
  }
  [style*="--cz-heading--max-width-d:"] :is(h1, h2, h3) {
    max-width: var(--cz-heading--max-width-d);
  }
  [style*="--cz-heading--height-d:"] :is(h1, h2, h3) {
    height: var(--cz-heading--height-d);
  }
  [style*="--cz-heading--min-height-d:"] :is(h1, h2, h3) {
    min-height: var(--cz-heading--min-height-d);
  }
  [style*="--cz-heading--max-height-d:"] :is(h1, h2, h3) {
    max-height: var(--cz-heading--max-height-d);
  }
  [style*="--cz-heading--aspect-ratio-d:"] :is(h1, h2, h3) {
    aspect-ratio: var(--cz-heading--aspect-ratio-d);
  }
  [style*="--cz-heading--display-d:"] :is(h1, h2, h3) {
    display: var(--cz-heading--display-d);
  }
  [style*="--cz-heading--flex-direction-d:"] :is(h1, h2, h3) {
    flex-direction: var(--cz-heading--flex-direction-d);
  }
  [style*="--cz-heading--flex-wrap-d:"] :is(h1, h2, h3) {
    flex-wrap: var(--cz-heading--flex-wrap-d);
  }
  [style*="--cz-heading--columns-d:"] :is(h1, h2, h3) {
    grid-template-columns: repeat(var(--cz-heading--columns-d), minmax(0, 1fr));
  }
  [style*="--cz-heading--gap-d:"] :is(h1, h2, h3) {
    gap: var(--cz-heading--gap-d);
  }
  [style*="--cz-heading--justify-d:"] :is(h1, h2, h3) {
    justify-content: var(--cz-heading--justify-d);
  }
  [style*="--cz-heading--align-d:"] :is(h1, h2, h3) {
    align-items: var(--cz-heading--align-d);
  }
  [style*="--cz-heading--order-d:"] :is(h1, h2, h3) {
    order: var(--cz-heading--order-d);
  }
  [style*="--cz-heading--position-d:"] :is(h1, h2, h3) {
    position: var(--cz-heading--position-d);
  }
  [style*="--cz-heading--z-index-d:"] :is(h1, h2, h3) {
    z-index: var(--cz-heading--z-index-d);
  }
  [style*="--cz-heading--padding-top-d:"] :is(h1, h2, h3) {
    padding-top: var(--cz-heading--padding-top-d);
  }
  [style*="--cz-heading--padding-right-d:"] :is(h1, h2, h3) {
    padding-right: var(--cz-heading--padding-right-d);
  }
  [style*="--cz-heading--padding-bottom-d:"] :is(h1, h2, h3) {
    padding-bottom: var(--cz-heading--padding-bottom-d);
  }
  [style*="--cz-heading--padding-left-d:"] :is(h1, h2, h3) {
    padding-left: var(--cz-heading--padding-left-d);
  }
  [style*="--cz-heading--margin-top-d:"] :is(h1, h2, h3) {
    margin-top: var(--cz-heading--margin-top-d);
  }
  [style*="--cz-heading--margin-right-d:"] :is(h1, h2, h3) {
    margin-right: var(--cz-heading--margin-right-d);
  }
  [style*="--cz-heading--margin-bottom-d:"] :is(h1, h2, h3) {
    margin-bottom: var(--cz-heading--margin-bottom-d);
  }
  [style*="--cz-heading--margin-left-d:"] :is(h1, h2, h3) {
    margin-left: var(--cz-heading--margin-left-d);
  }
  [style*="--cz-heading--font-family-d:"] :is(h1, h2, h3) {
    font-family: var(--cz-heading--font-family-d);
  }
  [style*="--cz-heading--font-size-d:"] :is(h1, h2, h3) {
    font-size: var(--cz-heading--font-size-d);
  }
  [style*="--cz-heading--font-weight-d:"] :is(h1, h2, h3) {
    font-weight: var(--cz-heading--font-weight-d);
  }
  [style*="--cz-heading--line-height-d:"] :is(h1, h2, h3) {
    line-height: var(--cz-heading--line-height-d);
  }
  [style*="--cz-heading--letter-spacing-d:"] :is(h1, h2, h3) {
    letter-spacing: var(--cz-heading--letter-spacing-d);
  }
  [style*="--cz-heading--text-transform-d:"] :is(h1, h2, h3) {
    text-transform: var(--cz-heading--text-transform-d);
  }
  [style*="--cz-heading--text-align-d:"] :is(h1, h2, h3) {
    text-align: var(--cz-heading--text-align-d);
  }
  [style*="--cz-heading--color-d:"] :is(h1, h2, h3) {
    color: light-dark(var(--cz-heading--color-d), var(--cz-heading--color-dark-d, var(--cz-heading--color-d)));
  }
  [style*="--cz-heading--color-dark-d:"] :is(h1, h2, h3) {
    color: light-dark(var(--cz-heading--color-d, currentColor), var(--cz-heading--color-dark-d));
  }
  [style*="--cz-heading--background-color-d:"] :is(h1, h2, h3) {
    background-color: light-dark(var(--cz-heading--background-color-d), var(--cz-heading--background-color-dark-d, var(--cz-heading--background-color-d)));
  }
  [style*="--cz-heading--background-color-dark-d:"] :is(h1, h2, h3) {
    background-color: light-dark(var(--cz-heading--background-color-d, transparent), var(--cz-heading--background-color-dark-d));
  }
  [style*="--cz-heading--background-gradient-d:"] :is(h1, h2, h3) {
    background-image: var(--cz-heading--background-gradient-d);
  }
  [style*="--cz-heading--border-width-d:"] :is(h1, h2, h3) {
    border-width: var(--cz-heading--border-width-d);
  }
  [style*="--cz-heading--border-style-d:"] :is(h1, h2, h3) {
    border-style: var(--cz-heading--border-style-d);
  }
  [style*="--cz-heading--border-color-d:"] :is(h1, h2, h3) {
    border-color: light-dark(var(--cz-heading--border-color-d), var(--cz-heading--border-color-dark-d, var(--cz-heading--border-color-d)));
  }
  [style*="--cz-heading--border-color-dark-d:"] :is(h1, h2, h3) {
    border-color: light-dark(var(--cz-heading--border-color-d, currentColor), var(--cz-heading--border-color-dark-d));
  }
  [style*="--cz-heading--radius-top-left-d:"] :is(h1, h2, h3) {
    border-top-left-radius: var(--cz-heading--radius-top-left-d);
  }
  [style*="--cz-heading--radius-top-right-d:"] :is(h1, h2, h3) {
    border-top-right-radius: var(--cz-heading--radius-top-right-d);
  }
  [style*="--cz-heading--radius-bottom-right-d:"] :is(h1, h2, h3) {
    border-bottom-right-radius: var(--cz-heading--radius-bottom-right-d);
  }
  [style*="--cz-heading--radius-bottom-left-d:"] :is(h1, h2, h3) {
    border-bottom-left-radius: var(--cz-heading--radius-bottom-left-d);
  }
  [style*="--cz-heading--shadow-d:"] :is(h1, h2, h3) {
    box-shadow: var(--cz-heading--shadow-d);
  }
  [style*="--cz-heading--opacity-d:"] :is(h1, h2, h3) {
    opacity: var(--cz-heading--opacity-d);
  }
  [style*="--cz-heading--overflow-d:"] :is(h1, h2, h3) {
    overflow: var(--cz-heading--overflow-d);
  }
  [style*="--cz-heading--visibility-d:"] :is(h1, h2, h3) {
    display: var(--cz-heading--visibility-d);
  }
  [style*="--cz-text--width-d:"] :is(.lede, .listing-intro, .band-copy > p, .band-prose p) {
    width: var(--cz-text--width-d);
  }
  [style*="--cz-text--min-width-d:"] :is(.lede, .listing-intro, .band-copy > p, .band-prose p) {
    min-width: var(--cz-text--min-width-d);
  }
  [style*="--cz-text--max-width-d:"] :is(.lede, .listing-intro, .band-copy > p, .band-prose p) {
    max-width: var(--cz-text--max-width-d);
  }
  [style*="--cz-text--height-d:"] :is(.lede, .listing-intro, .band-copy > p, .band-prose p) {
    height: var(--cz-text--height-d);
  }
  [style*="--cz-text--min-height-d:"] :is(.lede, .listing-intro, .band-copy > p, .band-prose p) {
    min-height: var(--cz-text--min-height-d);
  }
  [style*="--cz-text--max-height-d:"] :is(.lede, .listing-intro, .band-copy > p, .band-prose p) {
    max-height: var(--cz-text--max-height-d);
  }
  [style*="--cz-text--aspect-ratio-d:"] :is(.lede, .listing-intro, .band-copy > p, .band-prose p) {
    aspect-ratio: var(--cz-text--aspect-ratio-d);
  }
  [style*="--cz-text--display-d:"] :is(.lede, .listing-intro, .band-copy > p, .band-prose p) {
    display: var(--cz-text--display-d);
  }
  [style*="--cz-text--flex-direction-d:"] :is(.lede, .listing-intro, .band-copy > p, .band-prose p) {
    flex-direction: var(--cz-text--flex-direction-d);
  }
  [style*="--cz-text--flex-wrap-d:"] :is(.lede, .listing-intro, .band-copy > p, .band-prose p) {
    flex-wrap: var(--cz-text--flex-wrap-d);
  }
  [style*="--cz-text--columns-d:"] :is(.lede, .listing-intro, .band-copy > p, .band-prose p) {
    grid-template-columns: repeat(var(--cz-text--columns-d), minmax(0, 1fr));
  }
  [style*="--cz-text--gap-d:"] :is(.lede, .listing-intro, .band-copy > p, .band-prose p) {
    gap: var(--cz-text--gap-d);
  }
  [style*="--cz-text--justify-d:"] :is(.lede, .listing-intro, .band-copy > p, .band-prose p) {
    justify-content: var(--cz-text--justify-d);
  }
  [style*="--cz-text--align-d:"] :is(.lede, .listing-intro, .band-copy > p, .band-prose p) {
    align-items: var(--cz-text--align-d);
  }
  [style*="--cz-text--order-d:"] :is(.lede, .listing-intro, .band-copy > p, .band-prose p) {
    order: var(--cz-text--order-d);
  }
  [style*="--cz-text--position-d:"] :is(.lede, .listing-intro, .band-copy > p, .band-prose p) {
    position: var(--cz-text--position-d);
  }
  [style*="--cz-text--z-index-d:"] :is(.lede, .listing-intro, .band-copy > p, .band-prose p) {
    z-index: var(--cz-text--z-index-d);
  }
  [style*="--cz-text--padding-top-d:"] :is(.lede, .listing-intro, .band-copy > p, .band-prose p) {
    padding-top: var(--cz-text--padding-top-d);
  }
  [style*="--cz-text--padding-right-d:"] :is(.lede, .listing-intro, .band-copy > p, .band-prose p) {
    padding-right: var(--cz-text--padding-right-d);
  }
  [style*="--cz-text--padding-bottom-d:"] :is(.lede, .listing-intro, .band-copy > p, .band-prose p) {
    padding-bottom: var(--cz-text--padding-bottom-d);
  }
  [style*="--cz-text--padding-left-d:"] :is(.lede, .listing-intro, .band-copy > p, .band-prose p) {
    padding-left: var(--cz-text--padding-left-d);
  }
  [style*="--cz-text--margin-top-d:"] :is(.lede, .listing-intro, .band-copy > p, .band-prose p) {
    margin-top: var(--cz-text--margin-top-d);
  }
  [style*="--cz-text--margin-right-d:"] :is(.lede, .listing-intro, .band-copy > p, .band-prose p) {
    margin-right: var(--cz-text--margin-right-d);
  }
  [style*="--cz-text--margin-bottom-d:"] :is(.lede, .listing-intro, .band-copy > p, .band-prose p) {
    margin-bottom: var(--cz-text--margin-bottom-d);
  }
  [style*="--cz-text--margin-left-d:"] :is(.lede, .listing-intro, .band-copy > p, .band-prose p) {
    margin-left: var(--cz-text--margin-left-d);
  }
  [style*="--cz-text--font-family-d:"] :is(.lede, .listing-intro, .band-copy > p, .band-prose p) {
    font-family: var(--cz-text--font-family-d);
  }
  [style*="--cz-text--font-size-d:"] :is(.lede, .listing-intro, .band-copy > p, .band-prose p) {
    font-size: var(--cz-text--font-size-d);
  }
  [style*="--cz-text--font-weight-d:"] :is(.lede, .listing-intro, .band-copy > p, .band-prose p) {
    font-weight: var(--cz-text--font-weight-d);
  }
  [style*="--cz-text--line-height-d:"] :is(.lede, .listing-intro, .band-copy > p, .band-prose p) {
    line-height: var(--cz-text--line-height-d);
  }
  [style*="--cz-text--letter-spacing-d:"] :is(.lede, .listing-intro, .band-copy > p, .band-prose p) {
    letter-spacing: var(--cz-text--letter-spacing-d);
  }
  [style*="--cz-text--text-transform-d:"] :is(.lede, .listing-intro, .band-copy > p, .band-prose p) {
    text-transform: var(--cz-text--text-transform-d);
  }
  [style*="--cz-text--text-align-d:"] :is(.lede, .listing-intro, .band-copy > p, .band-prose p) {
    text-align: var(--cz-text--text-align-d);
  }
  [style*="--cz-text--color-d:"] :is(.lede, .listing-intro, .band-copy > p, .band-prose p) {
    color: light-dark(var(--cz-text--color-d), var(--cz-text--color-dark-d, var(--cz-text--color-d)));
  }
  [style*="--cz-text--color-dark-d:"] :is(.lede, .listing-intro, .band-copy > p, .band-prose p) {
    color: light-dark(var(--cz-text--color-d, currentColor), var(--cz-text--color-dark-d));
  }
  [style*="--cz-text--background-color-d:"] :is(.lede, .listing-intro, .band-copy > p, .band-prose p) {
    background-color: light-dark(var(--cz-text--background-color-d), var(--cz-text--background-color-dark-d, var(--cz-text--background-color-d)));
  }
  [style*="--cz-text--background-color-dark-d:"] :is(.lede, .listing-intro, .band-copy > p, .band-prose p) {
    background-color: light-dark(var(--cz-text--background-color-d, transparent), var(--cz-text--background-color-dark-d));
  }
  [style*="--cz-text--background-gradient-d:"] :is(.lede, .listing-intro, .band-copy > p, .band-prose p) {
    background-image: var(--cz-text--background-gradient-d);
  }
  [style*="--cz-text--border-width-d:"] :is(.lede, .listing-intro, .band-copy > p, .band-prose p) {
    border-width: var(--cz-text--border-width-d);
  }
  [style*="--cz-text--border-style-d:"] :is(.lede, .listing-intro, .band-copy > p, .band-prose p) {
    border-style: var(--cz-text--border-style-d);
  }
  [style*="--cz-text--border-color-d:"] :is(.lede, .listing-intro, .band-copy > p, .band-prose p) {
    border-color: light-dark(var(--cz-text--border-color-d), var(--cz-text--border-color-dark-d, var(--cz-text--border-color-d)));
  }
  [style*="--cz-text--border-color-dark-d:"] :is(.lede, .listing-intro, .band-copy > p, .band-prose p) {
    border-color: light-dark(var(--cz-text--border-color-d, currentColor), var(--cz-text--border-color-dark-d));
  }
  [style*="--cz-text--radius-top-left-d:"] :is(.lede, .listing-intro, .band-copy > p, .band-prose p) {
    border-top-left-radius: var(--cz-text--radius-top-left-d);
  }
  [style*="--cz-text--radius-top-right-d:"] :is(.lede, .listing-intro, .band-copy > p, .band-prose p) {
    border-top-right-radius: var(--cz-text--radius-top-right-d);
  }
  [style*="--cz-text--radius-bottom-right-d:"] :is(.lede, .listing-intro, .band-copy > p, .band-prose p) {
    border-bottom-right-radius: var(--cz-text--radius-bottom-right-d);
  }
  [style*="--cz-text--radius-bottom-left-d:"] :is(.lede, .listing-intro, .band-copy > p, .band-prose p) {
    border-bottom-left-radius: var(--cz-text--radius-bottom-left-d);
  }
  [style*="--cz-text--shadow-d:"] :is(.lede, .listing-intro, .band-copy > p, .band-prose p) {
    box-shadow: var(--cz-text--shadow-d);
  }
  [style*="--cz-text--opacity-d:"] :is(.lede, .listing-intro, .band-copy > p, .band-prose p) {
    opacity: var(--cz-text--opacity-d);
  }
  [style*="--cz-text--overflow-d:"] :is(.lede, .listing-intro, .band-copy > p, .band-prose p) {
    overflow: var(--cz-text--overflow-d);
  }
  [style*="--cz-text--visibility-d:"] :is(.lede, .listing-intro, .band-copy > p, .band-prose p) {
    display: var(--cz-text--visibility-d);
  }
  [style*="--cz-buttons--width-d:"] :is(.btn, .pill) {
    width: var(--cz-buttons--width-d);
  }
  [style*="--cz-buttons--min-width-d:"] :is(.btn, .pill) {
    min-width: var(--cz-buttons--min-width-d);
  }
  [style*="--cz-buttons--max-width-d:"] :is(.btn, .pill) {
    max-width: var(--cz-buttons--max-width-d);
  }
  [style*="--cz-buttons--height-d:"] :is(.btn, .pill) {
    height: var(--cz-buttons--height-d);
  }
  [style*="--cz-buttons--min-height-d:"] :is(.btn, .pill) {
    min-height: var(--cz-buttons--min-height-d);
  }
  [style*="--cz-buttons--max-height-d:"] :is(.btn, .pill) {
    max-height: var(--cz-buttons--max-height-d);
  }
  [style*="--cz-buttons--aspect-ratio-d:"] :is(.btn, .pill) {
    aspect-ratio: var(--cz-buttons--aspect-ratio-d);
  }
  [style*="--cz-buttons--display-d:"] :is(.btn, .pill) {
    display: var(--cz-buttons--display-d);
  }
  [style*="--cz-buttons--flex-direction-d:"] :is(.btn, .pill) {
    flex-direction: var(--cz-buttons--flex-direction-d);
  }
  [style*="--cz-buttons--flex-wrap-d:"] :is(.btn, .pill) {
    flex-wrap: var(--cz-buttons--flex-wrap-d);
  }
  [style*="--cz-buttons--columns-d:"] :is(.btn, .pill) {
    grid-template-columns: repeat(var(--cz-buttons--columns-d), minmax(0, 1fr));
  }
  [style*="--cz-buttons--gap-d:"] :is(.btn, .pill) {
    gap: var(--cz-buttons--gap-d);
  }
  [style*="--cz-buttons--justify-d:"] :is(.btn, .pill) {
    justify-content: var(--cz-buttons--justify-d);
  }
  [style*="--cz-buttons--align-d:"] :is(.btn, .pill) {
    align-items: var(--cz-buttons--align-d);
  }
  [style*="--cz-buttons--order-d:"] :is(.btn, .pill) {
    order: var(--cz-buttons--order-d);
  }
  [style*="--cz-buttons--position-d:"] :is(.btn, .pill) {
    position: var(--cz-buttons--position-d);
  }
  [style*="--cz-buttons--z-index-d:"] :is(.btn, .pill) {
    z-index: var(--cz-buttons--z-index-d);
  }
  [style*="--cz-buttons--padding-top-d:"] :is(.btn, .pill) {
    padding-top: var(--cz-buttons--padding-top-d);
  }
  [style*="--cz-buttons--padding-right-d:"] :is(.btn, .pill) {
    padding-right: var(--cz-buttons--padding-right-d);
  }
  [style*="--cz-buttons--padding-bottom-d:"] :is(.btn, .pill) {
    padding-bottom: var(--cz-buttons--padding-bottom-d);
  }
  [style*="--cz-buttons--padding-left-d:"] :is(.btn, .pill) {
    padding-left: var(--cz-buttons--padding-left-d);
  }
  [style*="--cz-buttons--margin-top-d:"] :is(.btn, .pill) {
    margin-top: var(--cz-buttons--margin-top-d);
  }
  [style*="--cz-buttons--margin-right-d:"] :is(.btn, .pill) {
    margin-right: var(--cz-buttons--margin-right-d);
  }
  [style*="--cz-buttons--margin-bottom-d:"] :is(.btn, .pill) {
    margin-bottom: var(--cz-buttons--margin-bottom-d);
  }
  [style*="--cz-buttons--margin-left-d:"] :is(.btn, .pill) {
    margin-left: var(--cz-buttons--margin-left-d);
  }
  [style*="--cz-buttons--font-family-d:"] :is(.btn, .pill) {
    font-family: var(--cz-buttons--font-family-d);
  }
  [style*="--cz-buttons--font-size-d:"] :is(.btn, .pill) {
    font-size: var(--cz-buttons--font-size-d);
  }
  [style*="--cz-buttons--font-weight-d:"] :is(.btn, .pill) {
    font-weight: var(--cz-buttons--font-weight-d);
  }
  [style*="--cz-buttons--line-height-d:"] :is(.btn, .pill) {
    line-height: var(--cz-buttons--line-height-d);
  }
  [style*="--cz-buttons--letter-spacing-d:"] :is(.btn, .pill) {
    letter-spacing: var(--cz-buttons--letter-spacing-d);
  }
  [style*="--cz-buttons--text-transform-d:"] :is(.btn, .pill) {
    text-transform: var(--cz-buttons--text-transform-d);
  }
  [style*="--cz-buttons--text-align-d:"] :is(.btn, .pill) {
    text-align: var(--cz-buttons--text-align-d);
  }
  [style*="--cz-buttons--color-d:"] :is(.btn, .pill) {
    color: light-dark(var(--cz-buttons--color-d), var(--cz-buttons--color-dark-d, var(--cz-buttons--color-d)));
  }
  [style*="--cz-buttons--color-dark-d:"] :is(.btn, .pill) {
    color: light-dark(var(--cz-buttons--color-d, currentColor), var(--cz-buttons--color-dark-d));
  }
  [style*="--cz-buttons--background-color-d:"] :is(.btn, .pill) {
    background-color: light-dark(var(--cz-buttons--background-color-d), var(--cz-buttons--background-color-dark-d, var(--cz-buttons--background-color-d)));
  }
  [style*="--cz-buttons--background-color-dark-d:"] :is(.btn, .pill) {
    background-color: light-dark(var(--cz-buttons--background-color-d, transparent), var(--cz-buttons--background-color-dark-d));
  }
  [style*="--cz-buttons--background-gradient-d:"] :is(.btn, .pill) {
    background-image: var(--cz-buttons--background-gradient-d);
  }
  [style*="--cz-buttons--border-width-d:"] :is(.btn, .pill) {
    border-width: var(--cz-buttons--border-width-d);
  }
  [style*="--cz-buttons--border-style-d:"] :is(.btn, .pill) {
    border-style: var(--cz-buttons--border-style-d);
  }
  [style*="--cz-buttons--border-color-d:"] :is(.btn, .pill) {
    border-color: light-dark(var(--cz-buttons--border-color-d), var(--cz-buttons--border-color-dark-d, var(--cz-buttons--border-color-d)));
  }
  [style*="--cz-buttons--border-color-dark-d:"] :is(.btn, .pill) {
    border-color: light-dark(var(--cz-buttons--border-color-d, currentColor), var(--cz-buttons--border-color-dark-d));
  }
  [style*="--cz-buttons--radius-top-left-d:"] :is(.btn, .pill) {
    border-top-left-radius: var(--cz-buttons--radius-top-left-d);
  }
  [style*="--cz-buttons--radius-top-right-d:"] :is(.btn, .pill) {
    border-top-right-radius: var(--cz-buttons--radius-top-right-d);
  }
  [style*="--cz-buttons--radius-bottom-right-d:"] :is(.btn, .pill) {
    border-bottom-right-radius: var(--cz-buttons--radius-bottom-right-d);
  }
  [style*="--cz-buttons--radius-bottom-left-d:"] :is(.btn, .pill) {
    border-bottom-left-radius: var(--cz-buttons--radius-bottom-left-d);
  }
  [style*="--cz-buttons--shadow-d:"] :is(.btn, .pill) {
    box-shadow: var(--cz-buttons--shadow-d);
  }
  [style*="--cz-buttons--opacity-d:"] :is(.btn, .pill) {
    opacity: var(--cz-buttons--opacity-d);
  }
  [style*="--cz-buttons--overflow-d:"] :is(.btn, .pill) {
    overflow: var(--cz-buttons--overflow-d);
  }
  [style*="--cz-buttons--visibility-d:"] :is(.btn, .pill) {
    display: var(--cz-buttons--visibility-d);
  }
  @media (max-width: 52rem) {
    [style*="--cz-width-t:"] {
      width: var(--cz-width-t);
    }
    [style*="--cz-min-width-t:"] {
      min-width: var(--cz-min-width-t);
    }
    [style*="--cz-max-width-t:"] {
      max-width: var(--cz-max-width-t);
    }
    [style*="--cz-height-t:"] {
      height: var(--cz-height-t);
    }
    [style*="--cz-min-height-t:"] {
      min-height: var(--cz-min-height-t);
    }
    [style*="--cz-max-height-t:"] {
      max-height: var(--cz-max-height-t);
    }
    [style*="--cz-aspect-ratio-t:"] {
      aspect-ratio: var(--cz-aspect-ratio-t);
    }
    [style*="--cz-display-t:"] {
      display: var(--cz-display-t);
    }
    [style*="--cz-flex-direction-t:"] {
      flex-direction: var(--cz-flex-direction-t);
    }
    [style*="--cz-flex-wrap-t:"] {
      flex-wrap: var(--cz-flex-wrap-t);
    }
    [style*="--cz-columns-t:"] {
      grid-template-columns: repeat(var(--cz-columns-t), minmax(0, 1fr));
    }
    [style*="--cz-gap-t:"] {
      gap: var(--cz-gap-t);
    }
    [style*="--cz-justify-t:"] {
      justify-content: var(--cz-justify-t);
    }
    [style*="--cz-align-t:"] {
      align-items: var(--cz-align-t);
    }
    [style*="--cz-order-t:"] {
      order: var(--cz-order-t);
    }
    [style*="--cz-position-t:"] {
      position: var(--cz-position-t);
    }
    [style*="--cz-z-index-t:"] {
      z-index: var(--cz-z-index-t);
    }
    [style*="--cz-padding-top-t:"] {
      padding-top: var(--cz-padding-top-t);
    }
    [style*="--cz-padding-right-t:"] {
      padding-right: var(--cz-padding-right-t);
    }
    [style*="--cz-padding-bottom-t:"] {
      padding-bottom: var(--cz-padding-bottom-t);
    }
    [style*="--cz-padding-left-t:"] {
      padding-left: var(--cz-padding-left-t);
    }
    [style*="--cz-margin-top-t:"] {
      margin-top: var(--cz-margin-top-t);
    }
    [style*="--cz-margin-right-t:"] {
      margin-right: var(--cz-margin-right-t);
    }
    [style*="--cz-margin-bottom-t:"] {
      margin-bottom: var(--cz-margin-bottom-t);
    }
    [style*="--cz-margin-left-t:"] {
      margin-left: var(--cz-margin-left-t);
    }
    [style*="--cz-font-family-t:"] {
      font-family: var(--cz-font-family-t);
    }
    [style*="--cz-font-size-t:"] {
      font-size: var(--cz-font-size-t);
    }
    [style*="--cz-font-weight-t:"] {
      font-weight: var(--cz-font-weight-t);
    }
    [style*="--cz-line-height-t:"] {
      line-height: var(--cz-line-height-t);
    }
    [style*="--cz-letter-spacing-t:"] {
      letter-spacing: var(--cz-letter-spacing-t);
    }
    [style*="--cz-text-transform-t:"] {
      text-transform: var(--cz-text-transform-t);
    }
    [style*="--cz-text-align-t:"] {
      text-align: var(--cz-text-align-t);
    }
    [style*="--cz-color-t:"] {
      color: light-dark(var(--cz-color-t), var(--cz-color-dark-t, var(--cz-color-t)));
    }
    [style*="--cz-color-dark-t:"] {
      color: light-dark(var(--cz-color-t, currentColor), var(--cz-color-dark-t));
    }
    [style*="--cz-background-color-t:"] {
      background-color: light-dark(var(--cz-background-color-t), var(--cz-background-color-dark-t, var(--cz-background-color-t)));
    }
    [style*="--cz-background-color-dark-t:"] {
      background-color: light-dark(var(--cz-background-color-t, transparent), var(--cz-background-color-dark-t));
    }
    [style*="--cz-background-gradient-t:"] {
      background-image: var(--cz-background-gradient-t);
    }
    [style*="--cz-border-width-t:"] {
      border-width: var(--cz-border-width-t);
    }
    [style*="--cz-border-style-t:"] {
      border-style: var(--cz-border-style-t);
    }
    [style*="--cz-border-color-t:"] {
      border-color: light-dark(var(--cz-border-color-t), var(--cz-border-color-dark-t, var(--cz-border-color-t)));
    }
    [style*="--cz-border-color-dark-t:"] {
      border-color: light-dark(var(--cz-border-color-t, currentColor), var(--cz-border-color-dark-t));
    }
    [style*="--cz-radius-top-left-t:"] {
      border-top-left-radius: var(--cz-radius-top-left-t);
    }
    [style*="--cz-radius-top-right-t:"] {
      border-top-right-radius: var(--cz-radius-top-right-t);
    }
    [style*="--cz-radius-bottom-right-t:"] {
      border-bottom-right-radius: var(--cz-radius-bottom-right-t);
    }
    [style*="--cz-radius-bottom-left-t:"] {
      border-bottom-left-radius: var(--cz-radius-bottom-left-t);
    }
    [style*="--cz-shadow-t:"] {
      box-shadow: var(--cz-shadow-t);
    }
    [style*="--cz-opacity-t:"] {
      opacity: var(--cz-opacity-t);
    }
    [style*="--cz-overflow-t:"] {
      overflow: var(--cz-overflow-t);
    }
    [style*="--cz-visibility-t:"] {
      display: var(--cz-visibility-t);
    }
    [style*="--cz-media--width-t:"] :is(.band-media, .card-frame) {
      width: var(--cz-media--width-t);
    }
    [style*="--cz-media--min-width-t:"] :is(.band-media, .card-frame) {
      min-width: var(--cz-media--min-width-t);
    }
    [style*="--cz-media--max-width-t:"] :is(.band-media, .card-frame) {
      max-width: var(--cz-media--max-width-t);
    }
    [style*="--cz-media--height-t:"] :is(.band-media, .card-frame) {
      height: var(--cz-media--height-t);
    }
    [style*="--cz-media--min-height-t:"] :is(.band-media, .card-frame) {
      min-height: var(--cz-media--min-height-t);
    }
    [style*="--cz-media--max-height-t:"] :is(.band-media, .card-frame) {
      max-height: var(--cz-media--max-height-t);
    }
    [style*="--cz-media--aspect-ratio-t:"] :is(.band-media, .card-frame) {
      aspect-ratio: var(--cz-media--aspect-ratio-t);
    }
    [style*="--cz-media--display-t:"] :is(.band-media, .card-frame) {
      display: var(--cz-media--display-t);
    }
    [style*="--cz-media--flex-direction-t:"] :is(.band-media, .card-frame) {
      flex-direction: var(--cz-media--flex-direction-t);
    }
    [style*="--cz-media--flex-wrap-t:"] :is(.band-media, .card-frame) {
      flex-wrap: var(--cz-media--flex-wrap-t);
    }
    [style*="--cz-media--columns-t:"] :is(.band-media, .card-frame) {
      grid-template-columns: repeat(var(--cz-media--columns-t), minmax(0, 1fr));
    }
    [style*="--cz-media--gap-t:"] :is(.band-media, .card-frame) {
      gap: var(--cz-media--gap-t);
    }
    [style*="--cz-media--justify-t:"] :is(.band-media, .card-frame) {
      justify-content: var(--cz-media--justify-t);
    }
    [style*="--cz-media--align-t:"] :is(.band-media, .card-frame) {
      align-items: var(--cz-media--align-t);
    }
    [style*="--cz-media--order-t:"] :is(.band-media, .card-frame) {
      order: var(--cz-media--order-t);
    }
    [style*="--cz-media--position-t:"] :is(.band-media, .card-frame) {
      position: var(--cz-media--position-t);
    }
    [style*="--cz-media--z-index-t:"] :is(.band-media, .card-frame) {
      z-index: var(--cz-media--z-index-t);
    }
    [style*="--cz-media--padding-top-t:"] :is(.band-media, .card-frame) {
      padding-top: var(--cz-media--padding-top-t);
    }
    [style*="--cz-media--padding-right-t:"] :is(.band-media, .card-frame) {
      padding-right: var(--cz-media--padding-right-t);
    }
    [style*="--cz-media--padding-bottom-t:"] :is(.band-media, .card-frame) {
      padding-bottom: var(--cz-media--padding-bottom-t);
    }
    [style*="--cz-media--padding-left-t:"] :is(.band-media, .card-frame) {
      padding-left: var(--cz-media--padding-left-t);
    }
    [style*="--cz-media--margin-top-t:"] :is(.band-media, .card-frame) {
      margin-top: var(--cz-media--margin-top-t);
    }
    [style*="--cz-media--margin-right-t:"] :is(.band-media, .card-frame) {
      margin-right: var(--cz-media--margin-right-t);
    }
    [style*="--cz-media--margin-bottom-t:"] :is(.band-media, .card-frame) {
      margin-bottom: var(--cz-media--margin-bottom-t);
    }
    [style*="--cz-media--margin-left-t:"] :is(.band-media, .card-frame) {
      margin-left: var(--cz-media--margin-left-t);
    }
    [style*="--cz-media--font-family-t:"] :is(.band-media, .card-frame) {
      font-family: var(--cz-media--font-family-t);
    }
    [style*="--cz-media--font-size-t:"] :is(.band-media, .card-frame) {
      font-size: var(--cz-media--font-size-t);
    }
    [style*="--cz-media--font-weight-t:"] :is(.band-media, .card-frame) {
      font-weight: var(--cz-media--font-weight-t);
    }
    [style*="--cz-media--line-height-t:"] :is(.band-media, .card-frame) {
      line-height: var(--cz-media--line-height-t);
    }
    [style*="--cz-media--letter-spacing-t:"] :is(.band-media, .card-frame) {
      letter-spacing: var(--cz-media--letter-spacing-t);
    }
    [style*="--cz-media--text-transform-t:"] :is(.band-media, .card-frame) {
      text-transform: var(--cz-media--text-transform-t);
    }
    [style*="--cz-media--text-align-t:"] :is(.band-media, .card-frame) {
      text-align: var(--cz-media--text-align-t);
    }
    [style*="--cz-media--color-t:"] :is(.band-media, .card-frame) {
      color: light-dark(var(--cz-media--color-t), var(--cz-media--color-dark-t, var(--cz-media--color-t)));
    }
    [style*="--cz-media--color-dark-t:"] :is(.band-media, .card-frame) {
      color: light-dark(var(--cz-media--color-t, currentColor), var(--cz-media--color-dark-t));
    }
    [style*="--cz-media--background-color-t:"] :is(.band-media, .card-frame) {
      background-color: light-dark(var(--cz-media--background-color-t), var(--cz-media--background-color-dark-t, var(--cz-media--background-color-t)));
    }
    [style*="--cz-media--background-color-dark-t:"] :is(.band-media, .card-frame) {
      background-color: light-dark(var(--cz-media--background-color-t, transparent), var(--cz-media--background-color-dark-t));
    }
    [style*="--cz-media--background-gradient-t:"] :is(.band-media, .card-frame) {
      background-image: var(--cz-media--background-gradient-t);
    }
    [style*="--cz-media--border-width-t:"] :is(.band-media, .card-frame) {
      border-width: var(--cz-media--border-width-t);
    }
    [style*="--cz-media--border-style-t:"] :is(.band-media, .card-frame) {
      border-style: var(--cz-media--border-style-t);
    }
    [style*="--cz-media--border-color-t:"] :is(.band-media, .card-frame) {
      border-color: light-dark(var(--cz-media--border-color-t), var(--cz-media--border-color-dark-t, var(--cz-media--border-color-t)));
    }
    [style*="--cz-media--border-color-dark-t:"] :is(.band-media, .card-frame) {
      border-color: light-dark(var(--cz-media--border-color-t, currentColor), var(--cz-media--border-color-dark-t));
    }
    [style*="--cz-media--radius-top-left-t:"] :is(.band-media, .card-frame) {
      border-top-left-radius: var(--cz-media--radius-top-left-t);
    }
    [style*="--cz-media--radius-top-right-t:"] :is(.band-media, .card-frame) {
      border-top-right-radius: var(--cz-media--radius-top-right-t);
    }
    [style*="--cz-media--radius-bottom-right-t:"] :is(.band-media, .card-frame) {
      border-bottom-right-radius: var(--cz-media--radius-bottom-right-t);
    }
    [style*="--cz-media--radius-bottom-left-t:"] :is(.band-media, .card-frame) {
      border-bottom-left-radius: var(--cz-media--radius-bottom-left-t);
    }
    [style*="--cz-media--shadow-t:"] :is(.band-media, .card-frame) {
      box-shadow: var(--cz-media--shadow-t);
    }
    [style*="--cz-media--opacity-t:"] :is(.band-media, .card-frame) {
      opacity: var(--cz-media--opacity-t);
    }
    [style*="--cz-media--overflow-t:"] :is(.band-media, .card-frame) {
      overflow: var(--cz-media--overflow-t);
    }
    [style*="--cz-media--visibility-t:"] :is(.band-media, .card-frame) {
      display: var(--cz-media--visibility-t);
    }
    [style*="--cz-heading--width-t:"] :is(h1, h2, h3) {
      width: var(--cz-heading--width-t);
    }
    [style*="--cz-heading--min-width-t:"] :is(h1, h2, h3) {
      min-width: var(--cz-heading--min-width-t);
    }
    [style*="--cz-heading--max-width-t:"] :is(h1, h2, h3) {
      max-width: var(--cz-heading--max-width-t);
    }
    [style*="--cz-heading--height-t:"] :is(h1, h2, h3) {
      height: var(--cz-heading--height-t);
    }
    [style*="--cz-heading--min-height-t:"] :is(h1, h2, h3) {
      min-height: var(--cz-heading--min-height-t);
    }
    [style*="--cz-heading--max-height-t:"] :is(h1, h2, h3) {
      max-height: var(--cz-heading--max-height-t);
    }
    [style*="--cz-heading--aspect-ratio-t:"] :is(h1, h2, h3) {
      aspect-ratio: var(--cz-heading--aspect-ratio-t);
    }
    [style*="--cz-heading--display-t:"] :is(h1, h2, h3) {
      display: var(--cz-heading--display-t);
    }
    [style*="--cz-heading--flex-direction-t:"] :is(h1, h2, h3) {
      flex-direction: var(--cz-heading--flex-direction-t);
    }
    [style*="--cz-heading--flex-wrap-t:"] :is(h1, h2, h3) {
      flex-wrap: var(--cz-heading--flex-wrap-t);
    }
    [style*="--cz-heading--columns-t:"] :is(h1, h2, h3) {
      grid-template-columns: repeat(var(--cz-heading--columns-t), minmax(0, 1fr));
    }
    [style*="--cz-heading--gap-t:"] :is(h1, h2, h3) {
      gap: var(--cz-heading--gap-t);
    }
    [style*="--cz-heading--justify-t:"] :is(h1, h2, h3) {
      justify-content: var(--cz-heading--justify-t);
    }
    [style*="--cz-heading--align-t:"] :is(h1, h2, h3) {
      align-items: var(--cz-heading--align-t);
    }
    [style*="--cz-heading--order-t:"] :is(h1, h2, h3) {
      order: var(--cz-heading--order-t);
    }
    [style*="--cz-heading--position-t:"] :is(h1, h2, h3) {
      position: var(--cz-heading--position-t);
    }
    [style*="--cz-heading--z-index-t:"] :is(h1, h2, h3) {
      z-index: var(--cz-heading--z-index-t);
    }
    [style*="--cz-heading--padding-top-t:"] :is(h1, h2, h3) {
      padding-top: var(--cz-heading--padding-top-t);
    }
    [style*="--cz-heading--padding-right-t:"] :is(h1, h2, h3) {
      padding-right: var(--cz-heading--padding-right-t);
    }
    [style*="--cz-heading--padding-bottom-t:"] :is(h1, h2, h3) {
      padding-bottom: var(--cz-heading--padding-bottom-t);
    }
    [style*="--cz-heading--padding-left-t:"] :is(h1, h2, h3) {
      padding-left: var(--cz-heading--padding-left-t);
    }
    [style*="--cz-heading--margin-top-t:"] :is(h1, h2, h3) {
      margin-top: var(--cz-heading--margin-top-t);
    }
    [style*="--cz-heading--margin-right-t:"] :is(h1, h2, h3) {
      margin-right: var(--cz-heading--margin-right-t);
    }
    [style*="--cz-heading--margin-bottom-t:"] :is(h1, h2, h3) {
      margin-bottom: var(--cz-heading--margin-bottom-t);
    }
    [style*="--cz-heading--margin-left-t:"] :is(h1, h2, h3) {
      margin-left: var(--cz-heading--margin-left-t);
    }
    [style*="--cz-heading--font-family-t:"] :is(h1, h2, h3) {
      font-family: var(--cz-heading--font-family-t);
    }
    [style*="--cz-heading--font-size-t:"] :is(h1, h2, h3) {
      font-size: var(--cz-heading--font-size-t);
    }
    [style*="--cz-heading--font-weight-t:"] :is(h1, h2, h3) {
      font-weight: var(--cz-heading--font-weight-t);
    }
    [style*="--cz-heading--line-height-t:"] :is(h1, h2, h3) {
      line-height: var(--cz-heading--line-height-t);
    }
    [style*="--cz-heading--letter-spacing-t:"] :is(h1, h2, h3) {
      letter-spacing: var(--cz-heading--letter-spacing-t);
    }
    [style*="--cz-heading--text-transform-t:"] :is(h1, h2, h3) {
      text-transform: var(--cz-heading--text-transform-t);
    }
    [style*="--cz-heading--text-align-t:"] :is(h1, h2, h3) {
      text-align: var(--cz-heading--text-align-t);
    }
    [style*="--cz-heading--color-t:"] :is(h1, h2, h3) {
      color: light-dark(var(--cz-heading--color-t), var(--cz-heading--color-dark-t, var(--cz-heading--color-t)));
    }
    [style*="--cz-heading--color-dark-t:"] :is(h1, h2, h3) {
      color: light-dark(var(--cz-heading--color-t, currentColor), var(--cz-heading--color-dark-t));
    }
    [style*="--cz-heading--background-color-t:"] :is(h1, h2, h3) {
      background-color: light-dark(var(--cz-heading--background-color-t), var(--cz-heading--background-color-dark-t, var(--cz-heading--background-color-t)));
    }
    [style*="--cz-heading--background-color-dark-t:"] :is(h1, h2, h3) {
      background-color: light-dark(var(--cz-heading--background-color-t, transparent), var(--cz-heading--background-color-dark-t));
    }
    [style*="--cz-heading--background-gradient-t:"] :is(h1, h2, h3) {
      background-image: var(--cz-heading--background-gradient-t);
    }
    [style*="--cz-heading--border-width-t:"] :is(h1, h2, h3) {
      border-width: var(--cz-heading--border-width-t);
    }
    [style*="--cz-heading--border-style-t:"] :is(h1, h2, h3) {
      border-style: var(--cz-heading--border-style-t);
    }
    [style*="--cz-heading--border-color-t:"] :is(h1, h2, h3) {
      border-color: light-dark(var(--cz-heading--border-color-t), var(--cz-heading--border-color-dark-t, var(--cz-heading--border-color-t)));
    }
    [style*="--cz-heading--border-color-dark-t:"] :is(h1, h2, h3) {
      border-color: light-dark(var(--cz-heading--border-color-t, currentColor), var(--cz-heading--border-color-dark-t));
    }
    [style*="--cz-heading--radius-top-left-t:"] :is(h1, h2, h3) {
      border-top-left-radius: var(--cz-heading--radius-top-left-t);
    }
    [style*="--cz-heading--radius-top-right-t:"] :is(h1, h2, h3) {
      border-top-right-radius: var(--cz-heading--radius-top-right-t);
    }
    [style*="--cz-heading--radius-bottom-right-t:"] :is(h1, h2, h3) {
      border-bottom-right-radius: var(--cz-heading--radius-bottom-right-t);
    }
    [style*="--cz-heading--radius-bottom-left-t:"] :is(h1, h2, h3) {
      border-bottom-left-radius: var(--cz-heading--radius-bottom-left-t);
    }
    [style*="--cz-heading--shadow-t:"] :is(h1, h2, h3) {
      box-shadow: var(--cz-heading--shadow-t);
    }
    [style*="--cz-heading--opacity-t:"] :is(h1, h2, h3) {
      opacity: var(--cz-heading--opacity-t);
    }
    [style*="--cz-heading--overflow-t:"] :is(h1, h2, h3) {
      overflow: var(--cz-heading--overflow-t);
    }
    [style*="--cz-heading--visibility-t:"] :is(h1, h2, h3) {
      display: var(--cz-heading--visibility-t);
    }
    [style*="--cz-text--width-t:"] :is(.lede, .listing-intro, .band-copy > p, .band-prose p) {
      width: var(--cz-text--width-t);
    }
    [style*="--cz-text--min-width-t:"] :is(.lede, .listing-intro, .band-copy > p, .band-prose p) {
      min-width: var(--cz-text--min-width-t);
    }
    [style*="--cz-text--max-width-t:"] :is(.lede, .listing-intro, .band-copy > p, .band-prose p) {
      max-width: var(--cz-text--max-width-t);
    }
    [style*="--cz-text--height-t:"] :is(.lede, .listing-intro, .band-copy > p, .band-prose p) {
      height: var(--cz-text--height-t);
    }
    [style*="--cz-text--min-height-t:"] :is(.lede, .listing-intro, .band-copy > p, .band-prose p) {
      min-height: var(--cz-text--min-height-t);
    }
    [style*="--cz-text--max-height-t:"] :is(.lede, .listing-intro, .band-copy > p, .band-prose p) {
      max-height: var(--cz-text--max-height-t);
    }
    [style*="--cz-text--aspect-ratio-t:"] :is(.lede, .listing-intro, .band-copy > p, .band-prose p) {
      aspect-ratio: var(--cz-text--aspect-ratio-t);
    }
    [style*="--cz-text--display-t:"] :is(.lede, .listing-intro, .band-copy > p, .band-prose p) {
      display: var(--cz-text--display-t);
    }
    [style*="--cz-text--flex-direction-t:"] :is(.lede, .listing-intro, .band-copy > p, .band-prose p) {
      flex-direction: var(--cz-text--flex-direction-t);
    }
    [style*="--cz-text--flex-wrap-t:"] :is(.lede, .listing-intro, .band-copy > p, .band-prose p) {
      flex-wrap: var(--cz-text--flex-wrap-t);
    }
    [style*="--cz-text--columns-t:"] :is(.lede, .listing-intro, .band-copy > p, .band-prose p) {
      grid-template-columns: repeat(var(--cz-text--columns-t), minmax(0, 1fr));
    }
    [style*="--cz-text--gap-t:"] :is(.lede, .listing-intro, .band-copy > p, .band-prose p) {
      gap: var(--cz-text--gap-t);
    }
    [style*="--cz-text--justify-t:"] :is(.lede, .listing-intro, .band-copy > p, .band-prose p) {
      justify-content: var(--cz-text--justify-t);
    }
    [style*="--cz-text--align-t:"] :is(.lede, .listing-intro, .band-copy > p, .band-prose p) {
      align-items: var(--cz-text--align-t);
    }
    [style*="--cz-text--order-t:"] :is(.lede, .listing-intro, .band-copy > p, .band-prose p) {
      order: var(--cz-text--order-t);
    }
    [style*="--cz-text--position-t:"] :is(.lede, .listing-intro, .band-copy > p, .band-prose p) {
      position: var(--cz-text--position-t);
    }
    [style*="--cz-text--z-index-t:"] :is(.lede, .listing-intro, .band-copy > p, .band-prose p) {
      z-index: var(--cz-text--z-index-t);
    }
    [style*="--cz-text--padding-top-t:"] :is(.lede, .listing-intro, .band-copy > p, .band-prose p) {
      padding-top: var(--cz-text--padding-top-t);
    }
    [style*="--cz-text--padding-right-t:"] :is(.lede, .listing-intro, .band-copy > p, .band-prose p) {
      padding-right: var(--cz-text--padding-right-t);
    }
    [style*="--cz-text--padding-bottom-t:"] :is(.lede, .listing-intro, .band-copy > p, .band-prose p) {
      padding-bottom: var(--cz-text--padding-bottom-t);
    }
    [style*="--cz-text--padding-left-t:"] :is(.lede, .listing-intro, .band-copy > p, .band-prose p) {
      padding-left: var(--cz-text--padding-left-t);
    }
    [style*="--cz-text--margin-top-t:"] :is(.lede, .listing-intro, .band-copy > p, .band-prose p) {
      margin-top: var(--cz-text--margin-top-t);
    }
    [style*="--cz-text--margin-right-t:"] :is(.lede, .listing-intro, .band-copy > p, .band-prose p) {
      margin-right: var(--cz-text--margin-right-t);
    }
    [style*="--cz-text--margin-bottom-t:"] :is(.lede, .listing-intro, .band-copy > p, .band-prose p) {
      margin-bottom: var(--cz-text--margin-bottom-t);
    }
    [style*="--cz-text--margin-left-t:"] :is(.lede, .listing-intro, .band-copy > p, .band-prose p) {
      margin-left: var(--cz-text--margin-left-t);
    }
    [style*="--cz-text--font-family-t:"] :is(.lede, .listing-intro, .band-copy > p, .band-prose p) {
      font-family: var(--cz-text--font-family-t);
    }
    [style*="--cz-text--font-size-t:"] :is(.lede, .listing-intro, .band-copy > p, .band-prose p) {
      font-size: var(--cz-text--font-size-t);
    }
    [style*="--cz-text--font-weight-t:"] :is(.lede, .listing-intro, .band-copy > p, .band-prose p) {
      font-weight: var(--cz-text--font-weight-t);
    }
    [style*="--cz-text--line-height-t:"] :is(.lede, .listing-intro, .band-copy > p, .band-prose p) {
      line-height: var(--cz-text--line-height-t);
    }
    [style*="--cz-text--letter-spacing-t:"] :is(.lede, .listing-intro, .band-copy > p, .band-prose p) {
      letter-spacing: var(--cz-text--letter-spacing-t);
    }
    [style*="--cz-text--text-transform-t:"] :is(.lede, .listing-intro, .band-copy > p, .band-prose p) {
      text-transform: var(--cz-text--text-transform-t);
    }
    [style*="--cz-text--text-align-t:"] :is(.lede, .listing-intro, .band-copy > p, .band-prose p) {
      text-align: var(--cz-text--text-align-t);
    }
    [style*="--cz-text--color-t:"] :is(.lede, .listing-intro, .band-copy > p, .band-prose p) {
      color: light-dark(var(--cz-text--color-t), var(--cz-text--color-dark-t, var(--cz-text--color-t)));
    }
    [style*="--cz-text--color-dark-t:"] :is(.lede, .listing-intro, .band-copy > p, .band-prose p) {
      color: light-dark(var(--cz-text--color-t, currentColor), var(--cz-text--color-dark-t));
    }
    [style*="--cz-text--background-color-t:"] :is(.lede, .listing-intro, .band-copy > p, .band-prose p) {
      background-color: light-dark(var(--cz-text--background-color-t), var(--cz-text--background-color-dark-t, var(--cz-text--background-color-t)));
    }
    [style*="--cz-text--background-color-dark-t:"] :is(.lede, .listing-intro, .band-copy > p, .band-prose p) {
      background-color: light-dark(var(--cz-text--background-color-t, transparent), var(--cz-text--background-color-dark-t));
    }
    [style*="--cz-text--background-gradient-t:"] :is(.lede, .listing-intro, .band-copy > p, .band-prose p) {
      background-image: var(--cz-text--background-gradient-t);
    }
    [style*="--cz-text--border-width-t:"] :is(.lede, .listing-intro, .band-copy > p, .band-prose p) {
      border-width: var(--cz-text--border-width-t);
    }
    [style*="--cz-text--border-style-t:"] :is(.lede, .listing-intro, .band-copy > p, .band-prose p) {
      border-style: var(--cz-text--border-style-t);
    }
    [style*="--cz-text--border-color-t:"] :is(.lede, .listing-intro, .band-copy > p, .band-prose p) {
      border-color: light-dark(var(--cz-text--border-color-t), var(--cz-text--border-color-dark-t, var(--cz-text--border-color-t)));
    }
    [style*="--cz-text--border-color-dark-t:"] :is(.lede, .listing-intro, .band-copy > p, .band-prose p) {
      border-color: light-dark(var(--cz-text--border-color-t, currentColor), var(--cz-text--border-color-dark-t));
    }
    [style*="--cz-text--radius-top-left-t:"] :is(.lede, .listing-intro, .band-copy > p, .band-prose p) {
      border-top-left-radius: var(--cz-text--radius-top-left-t);
    }
    [style*="--cz-text--radius-top-right-t:"] :is(.lede, .listing-intro, .band-copy > p, .band-prose p) {
      border-top-right-radius: var(--cz-text--radius-top-right-t);
    }
    [style*="--cz-text--radius-bottom-right-t:"] :is(.lede, .listing-intro, .band-copy > p, .band-prose p) {
      border-bottom-right-radius: var(--cz-text--radius-bottom-right-t);
    }
    [style*="--cz-text--radius-bottom-left-t:"] :is(.lede, .listing-intro, .band-copy > p, .band-prose p) {
      border-bottom-left-radius: var(--cz-text--radius-bottom-left-t);
    }
    [style*="--cz-text--shadow-t:"] :is(.lede, .listing-intro, .band-copy > p, .band-prose p) {
      box-shadow: var(--cz-text--shadow-t);
    }
    [style*="--cz-text--opacity-t:"] :is(.lede, .listing-intro, .band-copy > p, .band-prose p) {
      opacity: var(--cz-text--opacity-t);
    }
    [style*="--cz-text--overflow-t:"] :is(.lede, .listing-intro, .band-copy > p, .band-prose p) {
      overflow: var(--cz-text--overflow-t);
    }
    [style*="--cz-text--visibility-t:"] :is(.lede, .listing-intro, .band-copy > p, .band-prose p) {
      display: var(--cz-text--visibility-t);
    }
    [style*="--cz-buttons--width-t:"] :is(.btn, .pill) {
      width: var(--cz-buttons--width-t);
    }
    [style*="--cz-buttons--min-width-t:"] :is(.btn, .pill) {
      min-width: var(--cz-buttons--min-width-t);
    }
    [style*="--cz-buttons--max-width-t:"] :is(.btn, .pill) {
      max-width: var(--cz-buttons--max-width-t);
    }
    [style*="--cz-buttons--height-t:"] :is(.btn, .pill) {
      height: var(--cz-buttons--height-t);
    }
    [style*="--cz-buttons--min-height-t:"] :is(.btn, .pill) {
      min-height: var(--cz-buttons--min-height-t);
    }
    [style*="--cz-buttons--max-height-t:"] :is(.btn, .pill) {
      max-height: var(--cz-buttons--max-height-t);
    }
    [style*="--cz-buttons--aspect-ratio-t:"] :is(.btn, .pill) {
      aspect-ratio: var(--cz-buttons--aspect-ratio-t);
    }
    [style*="--cz-buttons--display-t:"] :is(.btn, .pill) {
      display: var(--cz-buttons--display-t);
    }
    [style*="--cz-buttons--flex-direction-t:"] :is(.btn, .pill) {
      flex-direction: var(--cz-buttons--flex-direction-t);
    }
    [style*="--cz-buttons--flex-wrap-t:"] :is(.btn, .pill) {
      flex-wrap: var(--cz-buttons--flex-wrap-t);
    }
    [style*="--cz-buttons--columns-t:"] :is(.btn, .pill) {
      grid-template-columns: repeat(var(--cz-buttons--columns-t), minmax(0, 1fr));
    }
    [style*="--cz-buttons--gap-t:"] :is(.btn, .pill) {
      gap: var(--cz-buttons--gap-t);
    }
    [style*="--cz-buttons--justify-t:"] :is(.btn, .pill) {
      justify-content: var(--cz-buttons--justify-t);
    }
    [style*="--cz-buttons--align-t:"] :is(.btn, .pill) {
      align-items: var(--cz-buttons--align-t);
    }
    [style*="--cz-buttons--order-t:"] :is(.btn, .pill) {
      order: var(--cz-buttons--order-t);
    }
    [style*="--cz-buttons--position-t:"] :is(.btn, .pill) {
      position: var(--cz-buttons--position-t);
    }
    [style*="--cz-buttons--z-index-t:"] :is(.btn, .pill) {
      z-index: var(--cz-buttons--z-index-t);
    }
    [style*="--cz-buttons--padding-top-t:"] :is(.btn, .pill) {
      padding-top: var(--cz-buttons--padding-top-t);
    }
    [style*="--cz-buttons--padding-right-t:"] :is(.btn, .pill) {
      padding-right: var(--cz-buttons--padding-right-t);
    }
    [style*="--cz-buttons--padding-bottom-t:"] :is(.btn, .pill) {
      padding-bottom: var(--cz-buttons--padding-bottom-t);
    }
    [style*="--cz-buttons--padding-left-t:"] :is(.btn, .pill) {
      padding-left: var(--cz-buttons--padding-left-t);
    }
    [style*="--cz-buttons--margin-top-t:"] :is(.btn, .pill) {
      margin-top: var(--cz-buttons--margin-top-t);
    }
    [style*="--cz-buttons--margin-right-t:"] :is(.btn, .pill) {
      margin-right: var(--cz-buttons--margin-right-t);
    }
    [style*="--cz-buttons--margin-bottom-t:"] :is(.btn, .pill) {
      margin-bottom: var(--cz-buttons--margin-bottom-t);
    }
    [style*="--cz-buttons--margin-left-t:"] :is(.btn, .pill) {
      margin-left: var(--cz-buttons--margin-left-t);
    }
    [style*="--cz-buttons--font-family-t:"] :is(.btn, .pill) {
      font-family: var(--cz-buttons--font-family-t);
    }
    [style*="--cz-buttons--font-size-t:"] :is(.btn, .pill) {
      font-size: var(--cz-buttons--font-size-t);
    }
    [style*="--cz-buttons--font-weight-t:"] :is(.btn, .pill) {
      font-weight: var(--cz-buttons--font-weight-t);
    }
    [style*="--cz-buttons--line-height-t:"] :is(.btn, .pill) {
      line-height: var(--cz-buttons--line-height-t);
    }
    [style*="--cz-buttons--letter-spacing-t:"] :is(.btn, .pill) {
      letter-spacing: var(--cz-buttons--letter-spacing-t);
    }
    [style*="--cz-buttons--text-transform-t:"] :is(.btn, .pill) {
      text-transform: var(--cz-buttons--text-transform-t);
    }
    [style*="--cz-buttons--text-align-t:"] :is(.btn, .pill) {
      text-align: var(--cz-buttons--text-align-t);
    }
    [style*="--cz-buttons--color-t:"] :is(.btn, .pill) {
      color: light-dark(var(--cz-buttons--color-t), var(--cz-buttons--color-dark-t, var(--cz-buttons--color-t)));
    }
    [style*="--cz-buttons--color-dark-t:"] :is(.btn, .pill) {
      color: light-dark(var(--cz-buttons--color-t, currentColor), var(--cz-buttons--color-dark-t));
    }
    [style*="--cz-buttons--background-color-t:"] :is(.btn, .pill) {
      background-color: light-dark(var(--cz-buttons--background-color-t), var(--cz-buttons--background-color-dark-t, var(--cz-buttons--background-color-t)));
    }
    [style*="--cz-buttons--background-color-dark-t:"] :is(.btn, .pill) {
      background-color: light-dark(var(--cz-buttons--background-color-t, transparent), var(--cz-buttons--background-color-dark-t));
    }
    [style*="--cz-buttons--background-gradient-t:"] :is(.btn, .pill) {
      background-image: var(--cz-buttons--background-gradient-t);
    }
    [style*="--cz-buttons--border-width-t:"] :is(.btn, .pill) {
      border-width: var(--cz-buttons--border-width-t);
    }
    [style*="--cz-buttons--border-style-t:"] :is(.btn, .pill) {
      border-style: var(--cz-buttons--border-style-t);
    }
    [style*="--cz-buttons--border-color-t:"] :is(.btn, .pill) {
      border-color: light-dark(var(--cz-buttons--border-color-t), var(--cz-buttons--border-color-dark-t, var(--cz-buttons--border-color-t)));
    }
    [style*="--cz-buttons--border-color-dark-t:"] :is(.btn, .pill) {
      border-color: light-dark(var(--cz-buttons--border-color-t, currentColor), var(--cz-buttons--border-color-dark-t));
    }
    [style*="--cz-buttons--radius-top-left-t:"] :is(.btn, .pill) {
      border-top-left-radius: var(--cz-buttons--radius-top-left-t);
    }
    [style*="--cz-buttons--radius-top-right-t:"] :is(.btn, .pill) {
      border-top-right-radius: var(--cz-buttons--radius-top-right-t);
    }
    [style*="--cz-buttons--radius-bottom-right-t:"] :is(.btn, .pill) {
      border-bottom-right-radius: var(--cz-buttons--radius-bottom-right-t);
    }
    [style*="--cz-buttons--radius-bottom-left-t:"] :is(.btn, .pill) {
      border-bottom-left-radius: var(--cz-buttons--radius-bottom-left-t);
    }
    [style*="--cz-buttons--shadow-t:"] :is(.btn, .pill) {
      box-shadow: var(--cz-buttons--shadow-t);
    }
    [style*="--cz-buttons--opacity-t:"] :is(.btn, .pill) {
      opacity: var(--cz-buttons--opacity-t);
    }
    [style*="--cz-buttons--overflow-t:"] :is(.btn, .pill) {
      overflow: var(--cz-buttons--overflow-t);
    }
    [style*="--cz-buttons--visibility-t:"] :is(.btn, .pill) {
      display: var(--cz-buttons--visibility-t);
    }
  }
  @media (max-width: 40rem) {
    [style*="--cz-width-m:"] {
      width: var(--cz-width-m);
    }
    [style*="--cz-min-width-m:"] {
      min-width: var(--cz-min-width-m);
    }
    [style*="--cz-max-width-m:"] {
      max-width: var(--cz-max-width-m);
    }
    [style*="--cz-height-m:"] {
      height: var(--cz-height-m);
    }
    [style*="--cz-min-height-m:"] {
      min-height: var(--cz-min-height-m);
    }
    [style*="--cz-max-height-m:"] {
      max-height: var(--cz-max-height-m);
    }
    [style*="--cz-aspect-ratio-m:"] {
      aspect-ratio: var(--cz-aspect-ratio-m);
    }
    [style*="--cz-display-m:"] {
      display: var(--cz-display-m);
    }
    [style*="--cz-flex-direction-m:"] {
      flex-direction: var(--cz-flex-direction-m);
    }
    [style*="--cz-flex-wrap-m:"] {
      flex-wrap: var(--cz-flex-wrap-m);
    }
    [style*="--cz-columns-m:"] {
      grid-template-columns: repeat(var(--cz-columns-m), minmax(0, 1fr));
    }
    [style*="--cz-gap-m:"] {
      gap: var(--cz-gap-m);
    }
    [style*="--cz-justify-m:"] {
      justify-content: var(--cz-justify-m);
    }
    [style*="--cz-align-m:"] {
      align-items: var(--cz-align-m);
    }
    [style*="--cz-order-m:"] {
      order: var(--cz-order-m);
    }
    [style*="--cz-position-m:"] {
      position: var(--cz-position-m);
    }
    [style*="--cz-z-index-m:"] {
      z-index: var(--cz-z-index-m);
    }
    [style*="--cz-padding-top-m:"] {
      padding-top: var(--cz-padding-top-m);
    }
    [style*="--cz-padding-right-m:"] {
      padding-right: var(--cz-padding-right-m);
    }
    [style*="--cz-padding-bottom-m:"] {
      padding-bottom: var(--cz-padding-bottom-m);
    }
    [style*="--cz-padding-left-m:"] {
      padding-left: var(--cz-padding-left-m);
    }
    [style*="--cz-margin-top-m:"] {
      margin-top: var(--cz-margin-top-m);
    }
    [style*="--cz-margin-right-m:"] {
      margin-right: var(--cz-margin-right-m);
    }
    [style*="--cz-margin-bottom-m:"] {
      margin-bottom: var(--cz-margin-bottom-m);
    }
    [style*="--cz-margin-left-m:"] {
      margin-left: var(--cz-margin-left-m);
    }
    [style*="--cz-font-family-m:"] {
      font-family: var(--cz-font-family-m);
    }
    [style*="--cz-font-size-m:"] {
      font-size: var(--cz-font-size-m);
    }
    [style*="--cz-font-weight-m:"] {
      font-weight: var(--cz-font-weight-m);
    }
    [style*="--cz-line-height-m:"] {
      line-height: var(--cz-line-height-m);
    }
    [style*="--cz-letter-spacing-m:"] {
      letter-spacing: var(--cz-letter-spacing-m);
    }
    [style*="--cz-text-transform-m:"] {
      text-transform: var(--cz-text-transform-m);
    }
    [style*="--cz-text-align-m:"] {
      text-align: var(--cz-text-align-m);
    }
    [style*="--cz-color-m:"] {
      color: light-dark(var(--cz-color-m), var(--cz-color-dark-m, var(--cz-color-m)));
    }
    [style*="--cz-color-dark-m:"] {
      color: light-dark(var(--cz-color-m, currentColor), var(--cz-color-dark-m));
    }
    [style*="--cz-background-color-m:"] {
      background-color: light-dark(var(--cz-background-color-m), var(--cz-background-color-dark-m, var(--cz-background-color-m)));
    }
    [style*="--cz-background-color-dark-m:"] {
      background-color: light-dark(var(--cz-background-color-m, transparent), var(--cz-background-color-dark-m));
    }
    [style*="--cz-background-gradient-m:"] {
      background-image: var(--cz-background-gradient-m);
    }
    [style*="--cz-border-width-m:"] {
      border-width: var(--cz-border-width-m);
    }
    [style*="--cz-border-style-m:"] {
      border-style: var(--cz-border-style-m);
    }
    [style*="--cz-border-color-m:"] {
      border-color: light-dark(var(--cz-border-color-m), var(--cz-border-color-dark-m, var(--cz-border-color-m)));
    }
    [style*="--cz-border-color-dark-m:"] {
      border-color: light-dark(var(--cz-border-color-m, currentColor), var(--cz-border-color-dark-m));
    }
    [style*="--cz-radius-top-left-m:"] {
      border-top-left-radius: var(--cz-radius-top-left-m);
    }
    [style*="--cz-radius-top-right-m:"] {
      border-top-right-radius: var(--cz-radius-top-right-m);
    }
    [style*="--cz-radius-bottom-right-m:"] {
      border-bottom-right-radius: var(--cz-radius-bottom-right-m);
    }
    [style*="--cz-radius-bottom-left-m:"] {
      border-bottom-left-radius: var(--cz-radius-bottom-left-m);
    }
    [style*="--cz-shadow-m:"] {
      box-shadow: var(--cz-shadow-m);
    }
    [style*="--cz-opacity-m:"] {
      opacity: var(--cz-opacity-m);
    }
    [style*="--cz-overflow-m:"] {
      overflow: var(--cz-overflow-m);
    }
    [style*="--cz-visibility-m:"] {
      display: var(--cz-visibility-m);
    }
    [style*="--cz-media--width-m:"] :is(.band-media, .card-frame) {
      width: var(--cz-media--width-m);
    }
    [style*="--cz-media--min-width-m:"] :is(.band-media, .card-frame) {
      min-width: var(--cz-media--min-width-m);
    }
    [style*="--cz-media--max-width-m:"] :is(.band-media, .card-frame) {
      max-width: var(--cz-media--max-width-m);
    }
    [style*="--cz-media--height-m:"] :is(.band-media, .card-frame) {
      height: var(--cz-media--height-m);
    }
    [style*="--cz-media--min-height-m:"] :is(.band-media, .card-frame) {
      min-height: var(--cz-media--min-height-m);
    }
    [style*="--cz-media--max-height-m:"] :is(.band-media, .card-frame) {
      max-height: var(--cz-media--max-height-m);
    }
    [style*="--cz-media--aspect-ratio-m:"] :is(.band-media, .card-frame) {
      aspect-ratio: var(--cz-media--aspect-ratio-m);
    }
    [style*="--cz-media--display-m:"] :is(.band-media, .card-frame) {
      display: var(--cz-media--display-m);
    }
    [style*="--cz-media--flex-direction-m:"] :is(.band-media, .card-frame) {
      flex-direction: var(--cz-media--flex-direction-m);
    }
    [style*="--cz-media--flex-wrap-m:"] :is(.band-media, .card-frame) {
      flex-wrap: var(--cz-media--flex-wrap-m);
    }
    [style*="--cz-media--columns-m:"] :is(.band-media, .card-frame) {
      grid-template-columns: repeat(var(--cz-media--columns-m), minmax(0, 1fr));
    }
    [style*="--cz-media--gap-m:"] :is(.band-media, .card-frame) {
      gap: var(--cz-media--gap-m);
    }
    [style*="--cz-media--justify-m:"] :is(.band-media, .card-frame) {
      justify-content: var(--cz-media--justify-m);
    }
    [style*="--cz-media--align-m:"] :is(.band-media, .card-frame) {
      align-items: var(--cz-media--align-m);
    }
    [style*="--cz-media--order-m:"] :is(.band-media, .card-frame) {
      order: var(--cz-media--order-m);
    }
    [style*="--cz-media--position-m:"] :is(.band-media, .card-frame) {
      position: var(--cz-media--position-m);
    }
    [style*="--cz-media--z-index-m:"] :is(.band-media, .card-frame) {
      z-index: var(--cz-media--z-index-m);
    }
    [style*="--cz-media--padding-top-m:"] :is(.band-media, .card-frame) {
      padding-top: var(--cz-media--padding-top-m);
    }
    [style*="--cz-media--padding-right-m:"] :is(.band-media, .card-frame) {
      padding-right: var(--cz-media--padding-right-m);
    }
    [style*="--cz-media--padding-bottom-m:"] :is(.band-media, .card-frame) {
      padding-bottom: var(--cz-media--padding-bottom-m);
    }
    [style*="--cz-media--padding-left-m:"] :is(.band-media, .card-frame) {
      padding-left: var(--cz-media--padding-left-m);
    }
    [style*="--cz-media--margin-top-m:"] :is(.band-media, .card-frame) {
      margin-top: var(--cz-media--margin-top-m);
    }
    [style*="--cz-media--margin-right-m:"] :is(.band-media, .card-frame) {
      margin-right: var(--cz-media--margin-right-m);
    }
    [style*="--cz-media--margin-bottom-m:"] :is(.band-media, .card-frame) {
      margin-bottom: var(--cz-media--margin-bottom-m);
    }
    [style*="--cz-media--margin-left-m:"] :is(.band-media, .card-frame) {
      margin-left: var(--cz-media--margin-left-m);
    }
    [style*="--cz-media--font-family-m:"] :is(.band-media, .card-frame) {
      font-family: var(--cz-media--font-family-m);
    }
    [style*="--cz-media--font-size-m:"] :is(.band-media, .card-frame) {
      font-size: var(--cz-media--font-size-m);
    }
    [style*="--cz-media--font-weight-m:"] :is(.band-media, .card-frame) {
      font-weight: var(--cz-media--font-weight-m);
    }
    [style*="--cz-media--line-height-m:"] :is(.band-media, .card-frame) {
      line-height: var(--cz-media--line-height-m);
    }
    [style*="--cz-media--letter-spacing-m:"] :is(.band-media, .card-frame) {
      letter-spacing: var(--cz-media--letter-spacing-m);
    }
    [style*="--cz-media--text-transform-m:"] :is(.band-media, .card-frame) {
      text-transform: var(--cz-media--text-transform-m);
    }
    [style*="--cz-media--text-align-m:"] :is(.band-media, .card-frame) {
      text-align: var(--cz-media--text-align-m);
    }
    [style*="--cz-media--color-m:"] :is(.band-media, .card-frame) {
      color: light-dark(var(--cz-media--color-m), var(--cz-media--color-dark-m, var(--cz-media--color-m)));
    }
    [style*="--cz-media--color-dark-m:"] :is(.band-media, .card-frame) {
      color: light-dark(var(--cz-media--color-m, currentColor), var(--cz-media--color-dark-m));
    }
    [style*="--cz-media--background-color-m:"] :is(.band-media, .card-frame) {
      background-color: light-dark(var(--cz-media--background-color-m), var(--cz-media--background-color-dark-m, var(--cz-media--background-color-m)));
    }
    [style*="--cz-media--background-color-dark-m:"] :is(.band-media, .card-frame) {
      background-color: light-dark(var(--cz-media--background-color-m, transparent), var(--cz-media--background-color-dark-m));
    }
    [style*="--cz-media--background-gradient-m:"] :is(.band-media, .card-frame) {
      background-image: var(--cz-media--background-gradient-m);
    }
    [style*="--cz-media--border-width-m:"] :is(.band-media, .card-frame) {
      border-width: var(--cz-media--border-width-m);
    }
    [style*="--cz-media--border-style-m:"] :is(.band-media, .card-frame) {
      border-style: var(--cz-media--border-style-m);
    }
    [style*="--cz-media--border-color-m:"] :is(.band-media, .card-frame) {
      border-color: light-dark(var(--cz-media--border-color-m), var(--cz-media--border-color-dark-m, var(--cz-media--border-color-m)));
    }
    [style*="--cz-media--border-color-dark-m:"] :is(.band-media, .card-frame) {
      border-color: light-dark(var(--cz-media--border-color-m, currentColor), var(--cz-media--border-color-dark-m));
    }
    [style*="--cz-media--radius-top-left-m:"] :is(.band-media, .card-frame) {
      border-top-left-radius: var(--cz-media--radius-top-left-m);
    }
    [style*="--cz-media--radius-top-right-m:"] :is(.band-media, .card-frame) {
      border-top-right-radius: var(--cz-media--radius-top-right-m);
    }
    [style*="--cz-media--radius-bottom-right-m:"] :is(.band-media, .card-frame) {
      border-bottom-right-radius: var(--cz-media--radius-bottom-right-m);
    }
    [style*="--cz-media--radius-bottom-left-m:"] :is(.band-media, .card-frame) {
      border-bottom-left-radius: var(--cz-media--radius-bottom-left-m);
    }
    [style*="--cz-media--shadow-m:"] :is(.band-media, .card-frame) {
      box-shadow: var(--cz-media--shadow-m);
    }
    [style*="--cz-media--opacity-m:"] :is(.band-media, .card-frame) {
      opacity: var(--cz-media--opacity-m);
    }
    [style*="--cz-media--overflow-m:"] :is(.band-media, .card-frame) {
      overflow: var(--cz-media--overflow-m);
    }
    [style*="--cz-media--visibility-m:"] :is(.band-media, .card-frame) {
      display: var(--cz-media--visibility-m);
    }
    [style*="--cz-heading--width-m:"] :is(h1, h2, h3) {
      width: var(--cz-heading--width-m);
    }
    [style*="--cz-heading--min-width-m:"] :is(h1, h2, h3) {
      min-width: var(--cz-heading--min-width-m);
    }
    [style*="--cz-heading--max-width-m:"] :is(h1, h2, h3) {
      max-width: var(--cz-heading--max-width-m);
    }
    [style*="--cz-heading--height-m:"] :is(h1, h2, h3) {
      height: var(--cz-heading--height-m);
    }
    [style*="--cz-heading--min-height-m:"] :is(h1, h2, h3) {
      min-height: var(--cz-heading--min-height-m);
    }
    [style*="--cz-heading--max-height-m:"] :is(h1, h2, h3) {
      max-height: var(--cz-heading--max-height-m);
    }
    [style*="--cz-heading--aspect-ratio-m:"] :is(h1, h2, h3) {
      aspect-ratio: var(--cz-heading--aspect-ratio-m);
    }
    [style*="--cz-heading--display-m:"] :is(h1, h2, h3) {
      display: var(--cz-heading--display-m);
    }
    [style*="--cz-heading--flex-direction-m:"] :is(h1, h2, h3) {
      flex-direction: var(--cz-heading--flex-direction-m);
    }
    [style*="--cz-heading--flex-wrap-m:"] :is(h1, h2, h3) {
      flex-wrap: var(--cz-heading--flex-wrap-m);
    }
    [style*="--cz-heading--columns-m:"] :is(h1, h2, h3) {
      grid-template-columns: repeat(var(--cz-heading--columns-m), minmax(0, 1fr));
    }
    [style*="--cz-heading--gap-m:"] :is(h1, h2, h3) {
      gap: var(--cz-heading--gap-m);
    }
    [style*="--cz-heading--justify-m:"] :is(h1, h2, h3) {
      justify-content: var(--cz-heading--justify-m);
    }
    [style*="--cz-heading--align-m:"] :is(h1, h2, h3) {
      align-items: var(--cz-heading--align-m);
    }
    [style*="--cz-heading--order-m:"] :is(h1, h2, h3) {
      order: var(--cz-heading--order-m);
    }
    [style*="--cz-heading--position-m:"] :is(h1, h2, h3) {
      position: var(--cz-heading--position-m);
    }
    [style*="--cz-heading--z-index-m:"] :is(h1, h2, h3) {
      z-index: var(--cz-heading--z-index-m);
    }
    [style*="--cz-heading--padding-top-m:"] :is(h1, h2, h3) {
      padding-top: var(--cz-heading--padding-top-m);
    }
    [style*="--cz-heading--padding-right-m:"] :is(h1, h2, h3) {
      padding-right: var(--cz-heading--padding-right-m);
    }
    [style*="--cz-heading--padding-bottom-m:"] :is(h1, h2, h3) {
      padding-bottom: var(--cz-heading--padding-bottom-m);
    }
    [style*="--cz-heading--padding-left-m:"] :is(h1, h2, h3) {
      padding-left: var(--cz-heading--padding-left-m);
    }
    [style*="--cz-heading--margin-top-m:"] :is(h1, h2, h3) {
      margin-top: var(--cz-heading--margin-top-m);
    }
    [style*="--cz-heading--margin-right-m:"] :is(h1, h2, h3) {
      margin-right: var(--cz-heading--margin-right-m);
    }
    [style*="--cz-heading--margin-bottom-m:"] :is(h1, h2, h3) {
      margin-bottom: var(--cz-heading--margin-bottom-m);
    }
    [style*="--cz-heading--margin-left-m:"] :is(h1, h2, h3) {
      margin-left: var(--cz-heading--margin-left-m);
    }
    [style*="--cz-heading--font-family-m:"] :is(h1, h2, h3) {
      font-family: var(--cz-heading--font-family-m);
    }
    [style*="--cz-heading--font-size-m:"] :is(h1, h2, h3) {
      font-size: var(--cz-heading--font-size-m);
    }
    [style*="--cz-heading--font-weight-m:"] :is(h1, h2, h3) {
      font-weight: var(--cz-heading--font-weight-m);
    }
    [style*="--cz-heading--line-height-m:"] :is(h1, h2, h3) {
      line-height: var(--cz-heading--line-height-m);
    }
    [style*="--cz-heading--letter-spacing-m:"] :is(h1, h2, h3) {
      letter-spacing: var(--cz-heading--letter-spacing-m);
    }
    [style*="--cz-heading--text-transform-m:"] :is(h1, h2, h3) {
      text-transform: var(--cz-heading--text-transform-m);
    }
    [style*="--cz-heading--text-align-m:"] :is(h1, h2, h3) {
      text-align: var(--cz-heading--text-align-m);
    }
    [style*="--cz-heading--color-m:"] :is(h1, h2, h3) {
      color: light-dark(var(--cz-heading--color-m), var(--cz-heading--color-dark-m, var(--cz-heading--color-m)));
    }
    [style*="--cz-heading--color-dark-m:"] :is(h1, h2, h3) {
      color: light-dark(var(--cz-heading--color-m, currentColor), var(--cz-heading--color-dark-m));
    }
    [style*="--cz-heading--background-color-m:"] :is(h1, h2, h3) {
      background-color: light-dark(var(--cz-heading--background-color-m), var(--cz-heading--background-color-dark-m, var(--cz-heading--background-color-m)));
    }
    [style*="--cz-heading--background-color-dark-m:"] :is(h1, h2, h3) {
      background-color: light-dark(var(--cz-heading--background-color-m, transparent), var(--cz-heading--background-color-dark-m));
    }
    [style*="--cz-heading--background-gradient-m:"] :is(h1, h2, h3) {
      background-image: var(--cz-heading--background-gradient-m);
    }
    [style*="--cz-heading--border-width-m:"] :is(h1, h2, h3) {
      border-width: var(--cz-heading--border-width-m);
    }
    [style*="--cz-heading--border-style-m:"] :is(h1, h2, h3) {
      border-style: var(--cz-heading--border-style-m);
    }
    [style*="--cz-heading--border-color-m:"] :is(h1, h2, h3) {
      border-color: light-dark(var(--cz-heading--border-color-m), var(--cz-heading--border-color-dark-m, var(--cz-heading--border-color-m)));
    }
    [style*="--cz-heading--border-color-dark-m:"] :is(h1, h2, h3) {
      border-color: light-dark(var(--cz-heading--border-color-m, currentColor), var(--cz-heading--border-color-dark-m));
    }
    [style*="--cz-heading--radius-top-left-m:"] :is(h1, h2, h3) {
      border-top-left-radius: var(--cz-heading--radius-top-left-m);
    }
    [style*="--cz-heading--radius-top-right-m:"] :is(h1, h2, h3) {
      border-top-right-radius: var(--cz-heading--radius-top-right-m);
    }
    [style*="--cz-heading--radius-bottom-right-m:"] :is(h1, h2, h3) {
      border-bottom-right-radius: var(--cz-heading--radius-bottom-right-m);
    }
    [style*="--cz-heading--radius-bottom-left-m:"] :is(h1, h2, h3) {
      border-bottom-left-radius: var(--cz-heading--radius-bottom-left-m);
    }
    [style*="--cz-heading--shadow-m:"] :is(h1, h2, h3) {
      box-shadow: var(--cz-heading--shadow-m);
    }
    [style*="--cz-heading--opacity-m:"] :is(h1, h2, h3) {
      opacity: var(--cz-heading--opacity-m);
    }
    [style*="--cz-heading--overflow-m:"] :is(h1, h2, h3) {
      overflow: var(--cz-heading--overflow-m);
    }
    [style*="--cz-heading--visibility-m:"] :is(h1, h2, h3) {
      display: var(--cz-heading--visibility-m);
    }
    [style*="--cz-text--width-m:"] :is(.lede, .listing-intro, .band-copy > p, .band-prose p) {
      width: var(--cz-text--width-m);
    }
    [style*="--cz-text--min-width-m:"] :is(.lede, .listing-intro, .band-copy > p, .band-prose p) {
      min-width: var(--cz-text--min-width-m);
    }
    [style*="--cz-text--max-width-m:"] :is(.lede, .listing-intro, .band-copy > p, .band-prose p) {
      max-width: var(--cz-text--max-width-m);
    }
    [style*="--cz-text--height-m:"] :is(.lede, .listing-intro, .band-copy > p, .band-prose p) {
      height: var(--cz-text--height-m);
    }
    [style*="--cz-text--min-height-m:"] :is(.lede, .listing-intro, .band-copy > p, .band-prose p) {
      min-height: var(--cz-text--min-height-m);
    }
    [style*="--cz-text--max-height-m:"] :is(.lede, .listing-intro, .band-copy > p, .band-prose p) {
      max-height: var(--cz-text--max-height-m);
    }
    [style*="--cz-text--aspect-ratio-m:"] :is(.lede, .listing-intro, .band-copy > p, .band-prose p) {
      aspect-ratio: var(--cz-text--aspect-ratio-m);
    }
    [style*="--cz-text--display-m:"] :is(.lede, .listing-intro, .band-copy > p, .band-prose p) {
      display: var(--cz-text--display-m);
    }
    [style*="--cz-text--flex-direction-m:"] :is(.lede, .listing-intro, .band-copy > p, .band-prose p) {
      flex-direction: var(--cz-text--flex-direction-m);
    }
    [style*="--cz-text--flex-wrap-m:"] :is(.lede, .listing-intro, .band-copy > p, .band-prose p) {
      flex-wrap: var(--cz-text--flex-wrap-m);
    }
    [style*="--cz-text--columns-m:"] :is(.lede, .listing-intro, .band-copy > p, .band-prose p) {
      grid-template-columns: repeat(var(--cz-text--columns-m), minmax(0, 1fr));
    }
    [style*="--cz-text--gap-m:"] :is(.lede, .listing-intro, .band-copy > p, .band-prose p) {
      gap: var(--cz-text--gap-m);
    }
    [style*="--cz-text--justify-m:"] :is(.lede, .listing-intro, .band-copy > p, .band-prose p) {
      justify-content: var(--cz-text--justify-m);
    }
    [style*="--cz-text--align-m:"] :is(.lede, .listing-intro, .band-copy > p, .band-prose p) {
      align-items: var(--cz-text--align-m);
    }
    [style*="--cz-text--order-m:"] :is(.lede, .listing-intro, .band-copy > p, .band-prose p) {
      order: var(--cz-text--order-m);
    }
    [style*="--cz-text--position-m:"] :is(.lede, .listing-intro, .band-copy > p, .band-prose p) {
      position: var(--cz-text--position-m);
    }
    [style*="--cz-text--z-index-m:"] :is(.lede, .listing-intro, .band-copy > p, .band-prose p) {
      z-index: var(--cz-text--z-index-m);
    }
    [style*="--cz-text--padding-top-m:"] :is(.lede, .listing-intro, .band-copy > p, .band-prose p) {
      padding-top: var(--cz-text--padding-top-m);
    }
    [style*="--cz-text--padding-right-m:"] :is(.lede, .listing-intro, .band-copy > p, .band-prose p) {
      padding-right: var(--cz-text--padding-right-m);
    }
    [style*="--cz-text--padding-bottom-m:"] :is(.lede, .listing-intro, .band-copy > p, .band-prose p) {
      padding-bottom: var(--cz-text--padding-bottom-m);
    }
    [style*="--cz-text--padding-left-m:"] :is(.lede, .listing-intro, .band-copy > p, .band-prose p) {
      padding-left: var(--cz-text--padding-left-m);
    }
    [style*="--cz-text--margin-top-m:"] :is(.lede, .listing-intro, .band-copy > p, .band-prose p) {
      margin-top: var(--cz-text--margin-top-m);
    }
    [style*="--cz-text--margin-right-m:"] :is(.lede, .listing-intro, .band-copy > p, .band-prose p) {
      margin-right: var(--cz-text--margin-right-m);
    }
    [style*="--cz-text--margin-bottom-m:"] :is(.lede, .listing-intro, .band-copy > p, .band-prose p) {
      margin-bottom: var(--cz-text--margin-bottom-m);
    }
    [style*="--cz-text--margin-left-m:"] :is(.lede, .listing-intro, .band-copy > p, .band-prose p) {
      margin-left: var(--cz-text--margin-left-m);
    }
    [style*="--cz-text--font-family-m:"] :is(.lede, .listing-intro, .band-copy > p, .band-prose p) {
      font-family: var(--cz-text--font-family-m);
    }
    [style*="--cz-text--font-size-m:"] :is(.lede, .listing-intro, .band-copy > p, .band-prose p) {
      font-size: var(--cz-text--font-size-m);
    }
    [style*="--cz-text--font-weight-m:"] :is(.lede, .listing-intro, .band-copy > p, .band-prose p) {
      font-weight: var(--cz-text--font-weight-m);
    }
    [style*="--cz-text--line-height-m:"] :is(.lede, .listing-intro, .band-copy > p, .band-prose p) {
      line-height: var(--cz-text--line-height-m);
    }
    [style*="--cz-text--letter-spacing-m:"] :is(.lede, .listing-intro, .band-copy > p, .band-prose p) {
      letter-spacing: var(--cz-text--letter-spacing-m);
    }
    [style*="--cz-text--text-transform-m:"] :is(.lede, .listing-intro, .band-copy > p, .band-prose p) {
      text-transform: var(--cz-text--text-transform-m);
    }
    [style*="--cz-text--text-align-m:"] :is(.lede, .listing-intro, .band-copy > p, .band-prose p) {
      text-align: var(--cz-text--text-align-m);
    }
    [style*="--cz-text--color-m:"] :is(.lede, .listing-intro, .band-copy > p, .band-prose p) {
      color: light-dark(var(--cz-text--color-m), var(--cz-text--color-dark-m, var(--cz-text--color-m)));
    }
    [style*="--cz-text--color-dark-m:"] :is(.lede, .listing-intro, .band-copy > p, .band-prose p) {
      color: light-dark(var(--cz-text--color-m, currentColor), var(--cz-text--color-dark-m));
    }
    [style*="--cz-text--background-color-m:"] :is(.lede, .listing-intro, .band-copy > p, .band-prose p) {
      background-color: light-dark(var(--cz-text--background-color-m), var(--cz-text--background-color-dark-m, var(--cz-text--background-color-m)));
    }
    [style*="--cz-text--background-color-dark-m:"] :is(.lede, .listing-intro, .band-copy > p, .band-prose p) {
      background-color: light-dark(var(--cz-text--background-color-m, transparent), var(--cz-text--background-color-dark-m));
    }
    [style*="--cz-text--background-gradient-m:"] :is(.lede, .listing-intro, .band-copy > p, .band-prose p) {
      background-image: var(--cz-text--background-gradient-m);
    }
    [style*="--cz-text--border-width-m:"] :is(.lede, .listing-intro, .band-copy > p, .band-prose p) {
      border-width: var(--cz-text--border-width-m);
    }
    [style*="--cz-text--border-style-m:"] :is(.lede, .listing-intro, .band-copy > p, .band-prose p) {
      border-style: var(--cz-text--border-style-m);
    }
    [style*="--cz-text--border-color-m:"] :is(.lede, .listing-intro, .band-copy > p, .band-prose p) {
      border-color: light-dark(var(--cz-text--border-color-m), var(--cz-text--border-color-dark-m, var(--cz-text--border-color-m)));
    }
    [style*="--cz-text--border-color-dark-m:"] :is(.lede, .listing-intro, .band-copy > p, .band-prose p) {
      border-color: light-dark(var(--cz-text--border-color-m, currentColor), var(--cz-text--border-color-dark-m));
    }
    [style*="--cz-text--radius-top-left-m:"] :is(.lede, .listing-intro, .band-copy > p, .band-prose p) {
      border-top-left-radius: var(--cz-text--radius-top-left-m);
    }
    [style*="--cz-text--radius-top-right-m:"] :is(.lede, .listing-intro, .band-copy > p, .band-prose p) {
      border-top-right-radius: var(--cz-text--radius-top-right-m);
    }
    [style*="--cz-text--radius-bottom-right-m:"] :is(.lede, .listing-intro, .band-copy > p, .band-prose p) {
      border-bottom-right-radius: var(--cz-text--radius-bottom-right-m);
    }
    [style*="--cz-text--radius-bottom-left-m:"] :is(.lede, .listing-intro, .band-copy > p, .band-prose p) {
      border-bottom-left-radius: var(--cz-text--radius-bottom-left-m);
    }
    [style*="--cz-text--shadow-m:"] :is(.lede, .listing-intro, .band-copy > p, .band-prose p) {
      box-shadow: var(--cz-text--shadow-m);
    }
    [style*="--cz-text--opacity-m:"] :is(.lede, .listing-intro, .band-copy > p, .band-prose p) {
      opacity: var(--cz-text--opacity-m);
    }
    [style*="--cz-text--overflow-m:"] :is(.lede, .listing-intro, .band-copy > p, .band-prose p) {
      overflow: var(--cz-text--overflow-m);
    }
    [style*="--cz-text--visibility-m:"] :is(.lede, .listing-intro, .band-copy > p, .band-prose p) {
      display: var(--cz-text--visibility-m);
    }
    [style*="--cz-buttons--width-m:"] :is(.btn, .pill) {
      width: var(--cz-buttons--width-m);
    }
    [style*="--cz-buttons--min-width-m:"] :is(.btn, .pill) {
      min-width: var(--cz-buttons--min-width-m);
    }
    [style*="--cz-buttons--max-width-m:"] :is(.btn, .pill) {
      max-width: var(--cz-buttons--max-width-m);
    }
    [style*="--cz-buttons--height-m:"] :is(.btn, .pill) {
      height: var(--cz-buttons--height-m);
    }
    [style*="--cz-buttons--min-height-m:"] :is(.btn, .pill) {
      min-height: var(--cz-buttons--min-height-m);
    }
    [style*="--cz-buttons--max-height-m:"] :is(.btn, .pill) {
      max-height: var(--cz-buttons--max-height-m);
    }
    [style*="--cz-buttons--aspect-ratio-m:"] :is(.btn, .pill) {
      aspect-ratio: var(--cz-buttons--aspect-ratio-m);
    }
    [style*="--cz-buttons--display-m:"] :is(.btn, .pill) {
      display: var(--cz-buttons--display-m);
    }
    [style*="--cz-buttons--flex-direction-m:"] :is(.btn, .pill) {
      flex-direction: var(--cz-buttons--flex-direction-m);
    }
    [style*="--cz-buttons--flex-wrap-m:"] :is(.btn, .pill) {
      flex-wrap: var(--cz-buttons--flex-wrap-m);
    }
    [style*="--cz-buttons--columns-m:"] :is(.btn, .pill) {
      grid-template-columns: repeat(var(--cz-buttons--columns-m), minmax(0, 1fr));
    }
    [style*="--cz-buttons--gap-m:"] :is(.btn, .pill) {
      gap: var(--cz-buttons--gap-m);
    }
    [style*="--cz-buttons--justify-m:"] :is(.btn, .pill) {
      justify-content: var(--cz-buttons--justify-m);
    }
    [style*="--cz-buttons--align-m:"] :is(.btn, .pill) {
      align-items: var(--cz-buttons--align-m);
    }
    [style*="--cz-buttons--order-m:"] :is(.btn, .pill) {
      order: var(--cz-buttons--order-m);
    }
    [style*="--cz-buttons--position-m:"] :is(.btn, .pill) {
      position: var(--cz-buttons--position-m);
    }
    [style*="--cz-buttons--z-index-m:"] :is(.btn, .pill) {
      z-index: var(--cz-buttons--z-index-m);
    }
    [style*="--cz-buttons--padding-top-m:"] :is(.btn, .pill) {
      padding-top: var(--cz-buttons--padding-top-m);
    }
    [style*="--cz-buttons--padding-right-m:"] :is(.btn, .pill) {
      padding-right: var(--cz-buttons--padding-right-m);
    }
    [style*="--cz-buttons--padding-bottom-m:"] :is(.btn, .pill) {
      padding-bottom: var(--cz-buttons--padding-bottom-m);
    }
    [style*="--cz-buttons--padding-left-m:"] :is(.btn, .pill) {
      padding-left: var(--cz-buttons--padding-left-m);
    }
    [style*="--cz-buttons--margin-top-m:"] :is(.btn, .pill) {
      margin-top: var(--cz-buttons--margin-top-m);
    }
    [style*="--cz-buttons--margin-right-m:"] :is(.btn, .pill) {
      margin-right: var(--cz-buttons--margin-right-m);
    }
    [style*="--cz-buttons--margin-bottom-m:"] :is(.btn, .pill) {
      margin-bottom: var(--cz-buttons--margin-bottom-m);
    }
    [style*="--cz-buttons--margin-left-m:"] :is(.btn, .pill) {
      margin-left: var(--cz-buttons--margin-left-m);
    }
    [style*="--cz-buttons--font-family-m:"] :is(.btn, .pill) {
      font-family: var(--cz-buttons--font-family-m);
    }
    [style*="--cz-buttons--font-size-m:"] :is(.btn, .pill) {
      font-size: var(--cz-buttons--font-size-m);
    }
    [style*="--cz-buttons--font-weight-m:"] :is(.btn, .pill) {
      font-weight: var(--cz-buttons--font-weight-m);
    }
    [style*="--cz-buttons--line-height-m:"] :is(.btn, .pill) {
      line-height: var(--cz-buttons--line-height-m);
    }
    [style*="--cz-buttons--letter-spacing-m:"] :is(.btn, .pill) {
      letter-spacing: var(--cz-buttons--letter-spacing-m);
    }
    [style*="--cz-buttons--text-transform-m:"] :is(.btn, .pill) {
      text-transform: var(--cz-buttons--text-transform-m);
    }
    [style*="--cz-buttons--text-align-m:"] :is(.btn, .pill) {
      text-align: var(--cz-buttons--text-align-m);
    }
    [style*="--cz-buttons--color-m:"] :is(.btn, .pill) {
      color: light-dark(var(--cz-buttons--color-m), var(--cz-buttons--color-dark-m, var(--cz-buttons--color-m)));
    }
    [style*="--cz-buttons--color-dark-m:"] :is(.btn, .pill) {
      color: light-dark(var(--cz-buttons--color-m, currentColor), var(--cz-buttons--color-dark-m));
    }
    [style*="--cz-buttons--background-color-m:"] :is(.btn, .pill) {
      background-color: light-dark(var(--cz-buttons--background-color-m), var(--cz-buttons--background-color-dark-m, var(--cz-buttons--background-color-m)));
    }
    [style*="--cz-buttons--background-color-dark-m:"] :is(.btn, .pill) {
      background-color: light-dark(var(--cz-buttons--background-color-m, transparent), var(--cz-buttons--background-color-dark-m));
    }
    [style*="--cz-buttons--background-gradient-m:"] :is(.btn, .pill) {
      background-image: var(--cz-buttons--background-gradient-m);
    }
    [style*="--cz-buttons--border-width-m:"] :is(.btn, .pill) {
      border-width: var(--cz-buttons--border-width-m);
    }
    [style*="--cz-buttons--border-style-m:"] :is(.btn, .pill) {
      border-style: var(--cz-buttons--border-style-m);
    }
    [style*="--cz-buttons--border-color-m:"] :is(.btn, .pill) {
      border-color: light-dark(var(--cz-buttons--border-color-m), var(--cz-buttons--border-color-dark-m, var(--cz-buttons--border-color-m)));
    }
    [style*="--cz-buttons--border-color-dark-m:"] :is(.btn, .pill) {
      border-color: light-dark(var(--cz-buttons--border-color-m, currentColor), var(--cz-buttons--border-color-dark-m));
    }
    [style*="--cz-buttons--radius-top-left-m:"] :is(.btn, .pill) {
      border-top-left-radius: var(--cz-buttons--radius-top-left-m);
    }
    [style*="--cz-buttons--radius-top-right-m:"] :is(.btn, .pill) {
      border-top-right-radius: var(--cz-buttons--radius-top-right-m);
    }
    [style*="--cz-buttons--radius-bottom-right-m:"] :is(.btn, .pill) {
      border-bottom-right-radius: var(--cz-buttons--radius-bottom-right-m);
    }
    [style*="--cz-buttons--radius-bottom-left-m:"] :is(.btn, .pill) {
      border-bottom-left-radius: var(--cz-buttons--radius-bottom-left-m);
    }
    [style*="--cz-buttons--shadow-m:"] :is(.btn, .pill) {
      box-shadow: var(--cz-buttons--shadow-m);
    }
    [style*="--cz-buttons--opacity-m:"] :is(.btn, .pill) {
      opacity: var(--cz-buttons--opacity-m);
    }
    [style*="--cz-buttons--overflow-m:"] :is(.btn, .pill) {
      overflow: var(--cz-buttons--overflow-m);
    }
    [style*="--cz-buttons--visibility-m:"] :is(.btn, .pill) {
      display: var(--cz-buttons--visibility-m);
    }
  }
}
@layer components {
  .app-nav {
    padding: 0.9rem clamp(1.25rem, 6vw, 5.4rem);
  }
  @media (max-width: 40rem) {
    .app-brand {
      font-size: 1.1rem;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 52vw;
    }
    .theme-switch {
      transform: scale(0.82);
      transform-origin: right center;
    }
  }
  [data-store-preset=editorial] .app-brand {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: 1.05rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
  }
  [data-store-preset=editorial] .nav-links {
    font-size: 0.6875rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }
  .nav-links .cart-count {
    letter-spacing: 0;
  }
  main.is-listing {
    max-width: none;
    padding: 0 0 5rem;
  }
  .featured-collection .listing-head {
    padding: 5.5rem clamp(1.9rem, 6vw, 5.4rem) 4.25rem;
    max-width: 52rem;
  }
  .featured-collection h1 {
    font-family: var(--s-hfont, var(--font-display));
    text-transform: var(--s-hcase, none);
    font-weight: var(--display-weight);
    font-size: var(--s-hsize, clamp(1.9rem, 3.6vw, 3.2rem));
    letter-spacing: var(--display-track);
    line-height: 1.15;
    margin: 0 0 1.4rem;
  }
  .listing-intro {
    font-size: var(--intro-size, 0.875rem);
    line-height: var(--intro-leading, 2);
    color: var(--ink);
    opacity: 0.86;
    margin: 0;
    max-width: 41rem;
  }
  .featured-collection .grid {
    gap: var(--s-gap, var(--tile-gap, 1px));
    grid-template-columns: repeat(var(--s-cols, 3), minmax(0, 1fr));
    padding: 0 clamp(0px, 6vw, 5.4rem);
    background: transparent;
  }
  .featured-collection .card-link {
    gap: 0;
  }
  .featured-collection .card-frame {
    aspect-ratio: var(--s-ratio, 4 / 5);
    border: 0;
    border-radius: var(--tile-radius, 0);
    background: var(--surface-2);
    transition: none;
  }
  .featured-collection .card-link:hover .card-frame {
    transform: none;
  }
  .featured-collection .card-frame img {
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: none;
  }
  .featured-collection .card-frame .card-alt {
    opacity: 0;
    transition: opacity 0.4s ease;
  }
  .featured-collection .card-link:hover .card-alt,
  .featured-collection .card-link:focus-visible .card-alt {
    opacity: 1;
  }
  @media (prefers-reduced-motion: reduce) {
    .featured-collection .card-frame .card-alt {
      transition: none;
    }
  }
  .featured-collection .card-body {
    padding: var(--tile-body-pad, 1.05rem 0.85rem 3.2rem);
    gap: 0.3rem;
  }
  .featured-collection .card-body h2 {
    font-family: var(--s-hfont, var(--font-card));
    font-weight: var(--card-weight, 500);
    font-size: 1.0rem;
    line-height: 1.3;
    letter-spacing: 0;
  }
  .featured-collection .artist {
    font-size: 0.6875rem;
    letter-spacing: 0.02em;
    color: var(--muted);
  }
  .featured-collection .price {
    font-weight: 500;
    font-size: 0.875rem;
    margin-top: 0.35rem;
  }
  .featured-collection[style*="--s-cards:plain"] .card-frame {
    background: transparent;
  }
  .featured-collection .card-link:focus-visible {
    border-radius: 0;
    outline-offset: -2px;
  }
  .featured-collection .card-frame {
    background: light-dark(var(--l-tile, var(--surface-2)), var(--l-tile-dark, var(--surface-2)));
  }
  .featured-collection[style*=--l-page] {
    --l-page-c: light-dark(var(--l-page, var(--bg)), var(--l-page-dark, var(--bg)));
    background: var(--l-page-c);
    box-shadow: 0 0 0 100vmax var(--l-page-c);
    clip-path: inset(0 -100vmax);
    color: light-dark(var(--l-ink, var(--ink)), var(--l-ink-dark, var(--ink)));
  }
  .featured-collection[style*=--l-page] .listing-intro {
    color: inherit;
  }
  .featured-collection[style*=--l-tsize] .card-body h2 {
    font-size: var(--l-tsize);
  }
  .featured-collection[style*=--l-tfont] .card-body h2 {
    font-family: var(--l-tfont);
  }
  .featured-collection .artist,
  .featured-collection .price,
  .featured-collection .badge {
    text-transform: var(--l-mcase, none);
    font-variant-caps: var(--l-mvariant, normal);
  }
  .featured-collection[style*=--l-mtrack] :is(.artist, .price, .badge) {
    letter-spacing: var(--l-mtrack);
  }
  .featured-collection[style*=--l-msize] :is(.artist, .price, .badge) {
    font-size: var(--l-msize);
  }
  .featured-collection[style*=--l-bsize] .listing-intro {
    font-size: var(--l-bsize);
  }
  .featured-collection[style*="--l-btn:outline"] .pill {
    background: transparent;
    color: inherit;
    box-shadow: inset 0 0 0 1px currentColor;
  }
  .featured-collection[style*="--l-btn:link"] .pill {
    background: none;
    color: inherit;
    padding: 0;
    min-height: 0;
    border-radius: 0;
    text-decoration: underline;
    text-underline-offset: 0.3em;
  }
  .featured-collection[style*="--l-btnw:full"] .listing-more {
    padding: 0 clamp(1.25rem, 6vw, 5.4rem);
  }
  .featured-collection[style*="--l-btnw:full"] .pill {
    width: 100%;
    justify-content: center;
  }
  .listing-more {
    display: flex;
    justify-content: center;
    margin: 1.5rem 0 0;
  }
  .pill {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 2rem;
    border-radius: var(--btn-radius);
    background: var(--ink);
    color: var(--bg);
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
  }
  [data-store-preset=editorial] .pill {
    padding: 0 2.4rem;
    font-size: 0.6875rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }
  .pill:hover {
    opacity: 0.85;
  }
  .pill {
    border: 0;
    font-family: inherit;
    font-weight: 400;
    cursor: pointer;
  }
  .pill:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
  }
  .pill:disabled {
    opacity: 0.55;
    cursor: progress;
  }
  .search .listing-head {
    padding-bottom: 2.75rem;
  }
  .search-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.75rem;
    align-items: end;
    max-width: 40rem;
  }
  .search-field {
    display: grid;
    gap: 0.5rem;
  }
  .search-label {
    font-size: 0.6875rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .search-form input[type=search] {
    appearance: none;
    min-height: 44px;
    width: 100%;
    padding: 0 1rem;
    border: 1px solid var(--line);
    border-radius: 0;
    background: var(--surface);
    color: var(--ink);
    font: inherit;
    font-size: 1rem;
  }
  .search-form input[type=search]::placeholder {
    color: var(--muted);
  }
  .search-form input[type=search]:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 2px;
    border-color: var(--ink);
  }
  .search-summary {
    margin: 1.4rem 0 0;
    font-size: 0.8125rem;
    color: var(--muted);
  }
  .search .empty {
    padding: 0 clamp(1.9rem, 6vw, 5.4rem);
    color: var(--muted);
  }
  @media (max-width: 40rem) {
    .search-form {
      grid-template-columns: minmax(0, 1fr);
    }
    .search-form .pill {
      justify-content: center;
    }
  }
  @media (max-width: 64rem) {
    .featured-collection .grid {
      padding: 0;
    }
  }
  @media (max-width: 40rem) {
    .featured-collection .listing-head {
      padding: 3.5rem 1.9rem 3.25rem;
    }
    main:not(.is-listing) .featured-collection .listing-head {
      padding-inline: 0;
    }
    .featured-collection .grid {
      grid-template-columns: repeat(var(--s-cols-m, 2), minmax(0, 1fr));
      padding: 0;
    }
    .featured-collection .card-body {
      padding: var(--tile-body-pad-phone, 0.7rem 0 1.5rem);
    }
    .featured-collection .card-body h2 {
      font-size: 1rem;
    }
  }
  .search-layout .search-body {
    display: grid;
    grid-template-columns: minmax(12rem, 16rem) minmax(0, 1fr);
    gap: 2rem;
    padding: 0 clamp(1.9rem, 6vw, 5.4rem) 3rem;
    align-items: start;
  }
  .search-facets {
    display: grid;
    gap: 1.5rem;
  }
  .facet-title {
    margin: 0 0 0.6rem;
    font-size: 0.95rem;
    color: var(--ink);
    font-weight: 600;
  }
  .facet-values {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.25rem;
  }
  .facet-values a {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.35rem 0.5rem;
    color: inherit;
    text-decoration: none;
    border-radius: 0.25rem;
  }
  .facet-values a:hover {
    background: var(--surface-2, var(--surface));
  }
  .facet-values a.is-on {
    background: var(--ink);
    color: var(--surface);
  }
  .facet-count {
    color: var(--muted);
    font-variant-numeric: tabular-nums;
  }
  .facet-values a.is-on .facet-count {
    color: inherit;
    opacity: 0.75;
  }
  .facet-range {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
  }
  .facet-range label {
    display: grid;
    gap: 0.2rem;
  }
  .facet-range-label {
    font-size: 0.8125rem;
    color: var(--muted);
  }
  .facet-apply {
    justify-self: start;
  }
  .facet-range input[type=text],
  .facet-range input[type=number] {
    width: 5.5rem;
    min-height: 36px;
    padding: 0 0.5rem;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink);
    font: inherit;
  }
  .facet-range-sep {
    color: var(--muted);
  }
  .facet-clear {
    font-size: 0.8125rem;
    color: var(--muted);
  }
  .search-suggest {
    margin: 0.75rem 0 0;
    font-size: 0.875rem;
  }
  .search-suggest a {
    font-weight: 600;
  }
  .search-sort select {
    min-height: 44px;
    width: 100%;
    padding: 0 0.75rem;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink);
    font: inherit;
  }
  .search-form {
    grid-template-columns: minmax(0, 1fr) minmax(10rem, 14rem) auto;
  }
  .pill-sm {
    min-height: 36px;
    padding: 0 0.75rem;
    font-size: 0.8125rem;
  }
  .search .pager {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 2rem;
  }
  @media (max-width: 720px) {
    .search-layout .search-body {
      grid-template-columns: 1fr;
    }
    .search-form {
      grid-template-columns: minmax(0, 1fr);
    }
  }
  .checkout .co-form {
    display: grid;
    gap: 1.75rem;
  }
  @media (min-width: 64rem) {
    main.narrow.checkout {
      max-width: 68rem;
    }
    .checkout .co-form {
      grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
      column-gap: clamp(2rem, 4vw, 4rem);
      align-items: start;
    }
    .checkout .co-form > * {
      grid-column: 1;
    }
    .checkout .co-form > :last-child {
      grid-column: 2;
      grid-row: 1 / span 6;
      position: sticky;
      top: calc(var(--nav-h, 3.75rem) + 1.5rem);
      padding: 1.5rem;
      border: 1px solid var(--line);
      border-radius: var(--store-radius);
      background: var(--surface);
    }
  }
  .co-section {
    display: grid;
    gap: 0.35rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--line);
  }
  .co-section h2 {
    font-size: 1.05rem;
    margin: 0 0 0.25rem;
  }
  .co-field {
    display: grid;
    gap: 0.3rem;
  }
  .co-field label {
    font-size: 0.85rem;
    font-weight: 600;
  }
  .co-field input,
  .co-field select {
    font: inherit;
    padding: 0.7rem 0.85rem;
    border-radius: 8px;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink);
    width: 100%;
    box-sizing: border-box;
    min-height: 2.9rem;
  }
  .co-field input:focus,
  .co-field select:focus {
    outline: 2px solid var(--accent);
    outline-offset: 0;
    border-color: var(--accent);
  }
  .co-field input[readonly],
  .co-field select:disabled {
    opacity: 0.75;
  }
  .co-field.has-error input,
  .co-field.has-error select {
    border-color: light-dark(#b42318, #f97066);
  }
  .co-error {
    margin: 0;
    min-height: 1.2rem;
    font-size: 0.8rem;
    line-height: 1.2rem;
    color: light-dark(#b42318, #f97066);
  }
  .co-pair {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: 0.75rem;
  }
  @media (max-width: 30rem) {
    .co-pair {
      grid-template-columns: 1fr;
    }
  }
  .co-link {
    justify-self: start;
    background: none;
    border: 0;
    padding: 0.2rem 0 0.9rem;
    font: inherit;
    font-size: 0.9rem;
    color: var(--ink);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
  }
  .co-link:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }
  .co-ship {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    margin: 0;
    min-height: 1.6rem;
  }
  .payment-element {
    min-height: 0;
  }
  .payment-element.is-open {
    min-height: 15rem;
  }
  .co-pay-note {
    margin: 0;
  }
  .co-totals {
    margin: 0.75rem 0 0.5rem;
    display: grid;
    gap: 0.35rem;
  }
  .co-row {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
  }
  .co-row dt,
  .co-row dd {
    margin: 0;
  }
  .co-code {
    display: grid;
    gap: 0.3rem;
    margin-top: 0.75rem;
  }
  .co-code-row {
    display: flex;
    gap: 0.5rem;
  }
  .co-code-row input {
    flex: 1;
    min-width: 0;
  }
  .co-code .muted {
    margin: 0;
  }
  .co-total {
    font-size: 1.1rem;
    padding-top: 0.4rem;
    border-top: 1px solid var(--line);
  }
  .co-total dd,
  .co-row dd {
    font-variant-numeric: tabular-nums;
  }
  .co-submit {
    justify-self: stretch;
    min-height: 3rem;
    margin-top: 0.5rem;
  }
  @media (min-width: 40rem) {
    .co-submit {
      justify-self: start;
      min-width: 16rem;
    }
  }
  .co-rates {
    border: 0;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.5rem;
    min-width: 0;
  }
  .co-rate {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    cursor: pointer;
    min-height: 2.9rem;
    box-sizing: border-box;
  }
  .co-rate.is-on {
    border-color: var(--accent);
  }
  .co-rate input {
    accent-color: var(--accent);
    margin: 0;
  }
  .co-rate:focus-within {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
  }
  .co-rate-amount {
    font-variant-numeric: tabular-nums;
  }
}
.account h2 {
  margin: 0 0 0.75rem;
  font-size: 1.15rem;
}
.account h3 {
  margin: 1.5rem 0 0.25rem;
  font-size: 1rem;
}
.account-cards {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
  margin-top: 1.5rem;
  align-items: start;
}
.account-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--store-radius);
  padding: 1.25rem 1.4rem;
  margin-top: 1.25rem;
  min-width: 0;
}
.account-cards .account-card {
  margin-top: 0;
}
.account-card .form input,
.account-card .form select {
  width: 100%;
}
.account-who {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  justify-content: space-between;
}
.account-orders,
.account-addresses {
  list-style: none;
  margin: 0;
  padding: 0;
}
.account-orders li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.15rem 1rem;
  padding: 0.75rem 0;
  border-top: 1px solid var(--line);
}
.account-orders li:first-child,
.account-addresses li:first-child {
  border-top: 0;
}
.account-orders a {
  font-weight: 600;
  color: var(--ink);
}
.account-total {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.account-addresses li {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 0;
  border-top: 1px solid var(--line);
}
.dot-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
}
.dot-badge::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--muted);
}
.dot-badge.is-ok::before {
  background: var(--accent);
}
.dot-badge.is-wait::before {
  background: transparent;
  border: 2px solid var(--accent);
}
.account-forgot {
  margin-top: 1rem;
}
.account-forgot > summary {
  cursor: pointer;
  color: var(--accent-text);
  font-size: 0.9rem;
  padding: 0.25rem 0;
}
.home-hero {
  padding: clamp(2rem, 6vw, 4.5rem) clamp(1.9rem, 6vw, 5.4rem) clamp(1.25rem, 3vw, 2rem);
}
.home-hero-title {
  margin: 0;
  max-width: 18ch;
  font-family: var(--font-display);
  font-weight: var(--display-weight, 700);
  letter-spacing: var(--display-track, -0.02em);
  font-size: clamp(2rem, 5vw, 3.4rem);
  line-height: 1.04;
  color: var(--ink);
}
.home-hero .lede {
  margin: 0.85rem 0 0;
  max-width: 46ch;
  color: var(--muted);
  font-size: 1.05rem;
}
.home-cats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr));
  gap: 0.75rem;
  padding: 0 clamp(1.9rem, 6vw, 5.4rem) 1.5rem;
}
.home-cat {
  display: grid;
  gap: 0.2rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--store-radius);
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
}
.home-cat:hover {
  border-color: var(--accent);
}
.home-cat-title {
  font-weight: 600;
}
.home-cat-count {
  color: var(--muted);
  font-size: 0.875rem;
}
.pdp-figure img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: var(--store-radius);
}
.pdp-related {
  margin-top: clamp(3rem, 8vw, 6rem);
  padding-top: 2rem;
  border-top: 1px solid var(--line);
}
.pdp-related > h2 {
  margin: 0 0 1.5rem;
  font-size: clamp(1.3rem, 2.4vw, 1.75rem);
}
.pdp-related {
  --s-cols: 4;
  --s-cols-m: 2;
}
.pdp-related.featured-collection .grid {
  padding: 0;
}
@media (max-width: 52rem) {
  .pdp-related {
    --s-cols: 2;
  }
}
.pdp-delivery {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.6rem;
  border-top: 1px solid var(--line);
  padding-top: 1rem;
}
.pdp-delivery li {
  display: grid;
  gap: 0.1rem;
}
.pdp-delivery strong {
  font-size: 0.95rem;
}
.pdp-delivery span {
  color: var(--muted);
  font-size: 0.875rem;
}
@media (max-width: 720px) {
  .pdp-gallery {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 0.25rem;
  }
  .pdp-gallery li {
    flex: 0 0 22%;
    scroll-snap-align: start;
  }
  .pdp-gallery img {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: calc(var(--store-radius) * 0.6);
  }
}
.ship-progress {
  margin: 0 0 1rem;
  padding: 0.75rem 1rem;
  background: var(--surface-2, var(--surface));
  border-radius: var(--store-radius);
}
.ship-progress p {
  margin: 0 0 0.5rem;
  font-size: 0.925rem;
}
.ship-progress-bar {
  display: block;
  height: 6px;
  border-radius: 3px;
  background: var(--line);
  overflow: hidden;
}
.ship-progress-bar i {
  display: block;
  height: 100%;
  background: var(--accent);
}
.cart-empty p {
  margin: 0 0 1rem;
}
.cart-empty-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}