.chroma-grid { --chroma-x: -9999px; --chroma-y: -9999px; --chroma-power: 0; position: relative; width: 100%; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
.chroma-grid.has-frame { padding: 10px; border-radius: calc(var(--chroma-radius) + 10px); background: var(--chroma-frame); box-shadow: var(--chroma-frame-shadow); -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6); }
.chroma-frame-rim { position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--chroma-frame-edge), inset 0 1px 0 var(--chroma-frame-highlight); pointer-events: none; }
.chroma-grid-inner { display: grid; gap: var(--chroma-gap); grid-template-columns: repeat(auto-fill, minmax(min(100%, max(var(--chroma-min), calc((100% - (var(--chroma-cols) - 1) * var(--chroma-gap)) / var(--chroma-cols)))), 1fr)); }
.chroma-card { position: relative; display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 8px; box-sizing: border-box; border-radius: var(--chroma-radius); background: var(--chroma-tile); box-shadow: var(--chroma-tile-shadow); color: var(--chroma-ink); text-decoration: none; overflow: hidden; isolation: isolate; transition: filter .25s ease; }
.chroma-card:hover { filter: var(--chroma-hover); }
.chroma-wash, .chroma-card-glow {
  -webkit-mask-image: radial-gradient(circle var(--chroma-r) at calc(var(--chroma-x) - var(--chroma-ox, 0px)) calc(var(--chroma-y) - var(--chroma-oy, 0px)), var(--chroma-stops));
  mask-image: radial-gradient(circle var(--chroma-r) at calc(var(--chroma-x) - var(--chroma-ox, 0px)) calc(var(--chroma-y) - var(--chroma-oy, 0px)), var(--chroma-stops));
}
.chroma-wash { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(130% 70% at 50% 100%, var(--chroma-accent), transparent 72%); opacity: calc(var(--chroma-glow) * var(--chroma-power) * .45); }
.chroma-media { position: relative; z-index: 1; display: grid; place-items: center; aspect-ratio: var(--chroma-ratio); border-radius: max(0px, calc(var(--chroma-radius) - 8px)); overflow: hidden; background: color-mix(in srgb, var(--chroma-accent) 9%, #f6f6f9); }
.chroma-media-rim { position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--chroma-media-edge); pointer-events: none; }
/* the icon is muted at rest and takes its full colour as the spotlight nears */
.chroma-slot { filter: saturate(calc(.85 + .25 * var(--chroma-near, 0))); }
.chroma-slot .glass-icons { margin: 0; }
.chroma-info { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 4px 8px 0; }
.chroma-title { margin: 0; font-size: 1.08rem; font-weight: 600; line-height: 1.25; letter-spacing: -.01em; color: var(--navy); }
.chroma-subtitle { margin: 0; font-size: .92rem; line-height: 1.4; color: var(--ink); }
.chroma-cta { position: relative; z-index: 3; align-self: flex-start; white-space: nowrap; margin: auto 8px 8px; padding: 9px 15px; border-radius: 999px; background: var(--navy); color: #fff; font-size: 14px; font-weight: 600; text-decoration: none; transition: transform .25s var(--ease), background-color .25s var(--ease); }
.chroma-cta:hover { transform: translateY(-1px); background: var(--navy-2); }
.chroma-card-rim, .chroma-card-glow { position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none; }
.chroma-card-rim { box-shadow: inset 0 0 0 1px var(--chroma-tile-edge), inset 0 1px 0 var(--chroma-tile-highlight); }
.chroma-card-glow { box-shadow: inset 0 0 0 1px var(--chroma-accent), inset 0 0 16px -8px var(--chroma-accent); opacity: calc(var(--chroma-border) * var(--chroma-power)); }

:root { --ease: cubic-bezier(.22,1,.36,1); }