/* LumaKit. Override --luma-* on the button with a later CSS rule. */
.luma {
  --luma-bg: #f0eee7; --luma-fg: #17221b; --luma-accent: #b9ed79; --luma-on: #15231b;
  --luma-radius: 999px; --luma-duration: .36s; --luma-ease: cubic-bezier(.22,.7,.25,1);
  --luma-x: 50%; --luma-y: 50%; --luma-rx: 0deg; --luma-ry: 0deg;
  position: relative; display: inline-flex; vertical-align: middle; isolation: isolate;
  padding: 0; border: 0; border-radius: var(--luma-radius); background: transparent;
  color: var(--luma-fg); font: inherit; font-weight: 600; line-height: 1.2;
  text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: transform var(--luma-duration) var(--luma-ease), color var(--luma-duration);
}
.luma *, .luma *::before, .luma *::after { box-sizing: border-box; }
.luma:focus-visible { outline: 3px solid currentColor; outline-offset: 6px; }
.luma-visual { position: relative; display: flex; align-items: center; justify-content: center; gap: .8em; min-height: 52px; padding: 16px 24px; border-radius: inherit; isolation: isolate; }
.luma-bg { position: absolute; z-index: -1; inset: 0; overflow: hidden; border-radius: inherit; background: var(--luma-bg); transition: background var(--luma-duration), border-radius var(--luma-duration), box-shadow var(--luma-duration), transform var(--luma-duration) var(--luma-ease); }
.luma-fill { position: absolute; inset: 0; border-radius: inherit; background: var(--luma-accent); transform: translateY(105%); transition: transform var(--luma-duration) var(--luma-ease), border-radius var(--luma-duration); }
.luma-fill-second { background: var(--luma-on); opacity: 0; }
.luma-words { display: grid; position: relative; overflow: hidden; text-align: center; }
.luma-front, .luma-back { grid-area: 1/1; display: block; white-space: nowrap; transition: transform var(--luma-duration) var(--luma-ease), opacity var(--luma-duration), filter var(--luma-duration); }
.luma-back { opacity: 0; transform: translateY(120%); }
.luma-char { display: inline-block; transition: transform var(--luma-duration) var(--luma-ease), opacity var(--luma-duration); transition-delay: calc(var(--i) * 12ms); }
.luma-icon { display: none; position: relative; flex-shrink: 0; width: 1.5em; height: 1.5em; overflow: hidden; }
.luma-arrow { position: absolute; inset: 0; display: grid; place-items: center; font-size: 1.35em; line-height: 1; transition: transform var(--luma-duration) var(--luma-ease), opacity var(--luma-duration); }
.luma-arrow-copy { transform: translate(-130%,130%); }
.luma-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.luma:is(:hover,:focus-visible,.luma-touch):active { translate: 0 1px; }
/* Arrow family */
.luma[data-luma^="arrow-"] .luma-icon { display: block; }
.luma:is([data-luma="arrow-orbit"],[data-luma="arrow-zoom"]) .luma-icon { width: 2.4em; height: 2.4em; background: var(--luma-accent); border-radius: 50%; margin: -10px -16px -10px 0; transition: scale var(--luma-duration); }
.luma:is([data-luma="arrow-orbit"],[data-luma="arrow-zoom"],[data-luma="arrow-toggle"]):is(:hover,:focus-visible,.luma-touch) .luma-arrow:first-child { transform: translate(130%,-130%); }
.luma:is([data-luma="arrow-orbit"],[data-luma="arrow-zoom"],[data-luma="arrow-toggle"]):is(:hover,:focus-visible,.luma-touch) .luma-arrow-copy { transform: translate(0); }
.luma[data-luma="arrow-orbit"]:is(:hover,:focus-visible,.luma-touch) .luma-front { transform: translateY(-120%); }
.luma[data-luma="arrow-orbit"]:is(:hover,:focus-visible,.luma-touch) .luma-back { transform: translateY(0); opacity: 1; }
.luma[data-luma="arrow-zoom"] .luma-icon { scale: .55; }
.luma[data-luma="arrow-zoom"]:is(:hover,:focus-visible,.luma-touch) .luma-icon { scale: 1.12; }
.luma:is([data-luma="arrow-fill"],[data-luma="arrow-slide"]) .luma-fill { inset: 4px; left: auto; width: 44px; transform: none; transition: width var(--luma-duration) var(--luma-ease); }
.luma:is([data-luma="arrow-fill"],[data-luma="arrow-slide"]):is(:hover,:focus-visible,.luma-touch) .luma-fill { width: calc(100% - 8px); }
.luma:is([data-luma="arrow-fill"],[data-luma="arrow-slide"]):is(:hover,:focus-visible,.luma-touch) .luma-arrow { transform: rotate(45deg); }
.luma:is([data-luma="arrow-fill"],[data-luma="arrow-slide"]) .luma-arrow-copy { display: none; }
.luma[data-luma="arrow-slide"] .luma-icon { position: absolute; right: 18px; transition: right var(--luma-duration),transform var(--luma-duration); }
.luma[data-luma="arrow-slide"] .luma-visual { padding-right: 58px; }
.luma[data-luma="arrow-slide"]:is(:hover,:focus-visible,.luma-touch) .luma-front { transform: translateX(-30px); opacity: 0; }
.luma[data-luma="arrow-slide"]:is(:hover,:focus-visible,.luma-touch) .luma-icon { right: 50%; transform: translateX(50%); }
.luma[data-luma="arrow-cross"] .luma-visual { padding-right: 62px; }
.luma[data-luma="arrow-cross"] .luma-icon { position: absolute; right: 4px; width: 44px; height: 44px; background: var(--luma-accent); border-radius: 50%; transition: right var(--luma-duration); }
.luma[data-luma="arrow-cross"] .luma-words { transition: transform var(--luma-duration); }
.luma[data-luma="arrow-cross"]:is(:hover,:focus-visible,.luma-touch) .luma-icon { right: calc(100% - 48px); }
.luma[data-luma="arrow-cross"]:is(:hover,:focus-visible,.luma-touch) .luma-words { transform: translateX(40px); }
.luma[data-luma="arrow-cross"] .luma-arrow-copy { transform: translateX(-150%); }
.luma[data-luma="arrow-cross"]:is(:hover,:focus-visible,.luma-touch) .luma-arrow:first-child { transform: translateX(150%); }
.luma[data-luma="arrow-cross"]:is(:hover,:focus-visible,.luma-touch) .luma-arrow-copy { transform: translateX(0); }
.luma[data-luma="arrow-echo"] .luma-icon { width: 3.1em; overflow: visible; }
.luma[data-luma="arrow-echo"] .luma-arrow { inset: 0 auto 0 0; width: 1.3em; transform: rotate(45deg); }
.luma[data-luma="arrow-echo"] .luma-arrow-copy { left: .8em; opacity: .2; }
.luma[data-luma="arrow-echo"] .luma-icon::after { content: '↗'; position: absolute; left: 1.6em; top: .1em; transform: rotate(45deg); opacity: .12; }
.luma[data-luma="arrow-echo"]:is(:hover,:focus-visible,.luma-touch) .luma-arrow { animation: luma-flash .8s infinite; }
.luma[data-luma="arrow-echo"]:is(:hover,:focus-visible,.luma-touch) .luma-arrow-copy { animation-delay: .15s; }
.luma[data-luma="arrow-echo"]:is(:hover,:focus-visible,.luma-touch) .luma-icon::after { animation: luma-flash .8s .3s infinite; }
.luma[data-luma="arrow-bounce"] .luma-icon { width: 0; opacity: 0; transition: width var(--luma-duration), opacity var(--luma-duration); }
.luma[data-luma="arrow-bounce"]:is(:hover,:focus-visible,.luma-touch) .luma-icon { width: 1.5em; opacity: 1; }
.luma[data-luma="arrow-bounce"]:is(:hover,:focus-visible,.luma-touch) .luma-arrow:first-child { animation: luma-bounce .65s infinite alternate; }
.luma[data-luma="arrow-line"] { --luma-radius: 0px; }
.luma[data-luma="arrow-line"] .luma-bg { background: transparent; overflow: visible; }
.luma[data-luma="arrow-line"] .luma-bg::after { content: ''; position: absolute; bottom: 4px; left: 24px; right: 24px; height: 2px; background: currentColor; transform: scaleX(.18); transform-origin: left; transition: transform var(--luma-duration); }
.luma[data-luma="arrow-line"]:is(:hover,:focus-visible,.luma-touch) .luma-bg::after { transform: scaleX(1); }
.luma[data-luma="arrow-line"]:is(:hover,:focus-visible,.luma-touch) .luma-icon { scale: 1.35; }
.luma[data-luma="arrow-line"] .luma-icon { transition: scale var(--luma-duration); }
.luma[data-luma="arrow-pixel"] { --luma-radius: 7px; }
.luma[data-luma="arrow-pixel"] .luma-icon { display: none; }
.luma[data-luma="arrow-pixel"] .luma-visual { padding-left: 66px; }
.luma[data-luma="arrow-pixel"] .luma-grid { inset: 5px auto 5px 5px; width: 43px; padding: 8px; background: var(--luma-accent); gap: 2px; border-radius: 4px; }
.luma[data-luma="arrow-pixel"] .luma-cell { background: transparent; }
.luma[data-luma="arrow-pixel"] .luma-lit { background: var(--luma-on); opacity: .4; }
.luma[data-luma="arrow-pixel"]:is(:hover,:focus-visible,.luma-touch) .luma-lit { animation: luma-flash .7s infinite; animation-delay: calc(var(--i) * 50ms); }
.luma[data-luma="arrow-toggle"] .luma-icon { transform: rotate(45deg); transition: transform var(--luma-duration); }
.luma[data-luma="arrow-toggle"][aria-expanded="true"] .luma-icon { transform: rotate(225deg); }
/* Directional and curved fills */
.luma:is([data-luma="compass"],[data-luma^="wave"],[data-luma="swipe"]):is(:hover,:focus-visible,.luma-touch) { color: var(--luma-on); }
.luma[data-luma="compass"] .luma-fill { transform: translateY(-105%); border-radius: 40%; }
.luma[data-luma="compass"][data-luma-side="right"] .luma-fill { transform: translateX(105%); }
.luma[data-luma="compass"][data-luma-side="bottom"] .luma-fill { transform: translateY(105%); }
.luma[data-luma="compass"][data-luma-side="left"] .luma-fill { transform: translateX(-105%); }
.luma[data-luma="compass"]:is(.luma-enter,:focus-visible,.luma-touch) .luma-fill { transform: translate(0); border-radius: inherit; }
.luma[data-luma^="wave"] .luma-fill { inset: -20%; border-radius: 50%; transform: translateY(110%); }
.luma[data-luma^="wave"][data-luma-direction="top"] .luma-fill { transform: translateY(-110%); }
.luma[data-luma="wave"][data-luma-direction="left"] .luma-fill { transform: translateX(-110%); }
.luma[data-luma="wave"][data-luma-direction="right"] .luma-fill { transform: translateX(110%); }
.luma[data-luma^="wave"]:is(:hover,:focus-visible,.luma-touch) .luma-fill { transform: translate(0); border-radius: 0; }
.luma[data-luma^="wave"]:not([data-luma="wave"]):is(:hover,:focus-visible,.luma-touch) .luma-front { transform: translateY(-120%); }
.luma[data-luma^="wave"]:not([data-luma="wave"]):is(:hover,:focus-visible,.luma-touch) .luma-back { transform: translateY(0); opacity: 1; }
.luma[data-luma="wave"]:is(:hover,:focus-visible,.luma-touch) .luma-words { transform: skewX(-5deg); }
.luma[data-luma="wave"] .luma-words { transition: transform var(--luma-duration); }
.luma[data-luma="wave-lift"]:is(:hover,:focus-visible,.luma-touch) { transform: scale(1.07); }
.luma[data-luma="wave-lift"] .luma-back .luma-char { transform: rotateX(90deg); }
.luma[data-luma="wave-lift"]:is(:hover,:focus-visible,.luma-touch) .luma-back .luma-char { transform: rotateX(0); }
.luma[data-luma="wave-border"] .luma-bg { border: 2px solid currentColor; }
.luma[data-luma="wave-border"]:is(:hover,:focus-visible,.luma-touch) .luma-bg { border-radius: 12px; }
.luma[data-luma="wave-rings"] .luma-fill { inset: auto; width: 200%; aspect-ratio: 1; left: -50%; top: 50%; border-radius: 50%; transform: translateY(-50%) scale(0); }
.luma[data-luma="wave-rings"] .luma-fill-second { opacity: 1; background: var(--luma-accent); transition-delay: .09s; }
.luma[data-luma="wave-rings"] .luma-fill:first-child { background: var(--luma-fg); }
.luma[data-luma="wave-rings"]:is(:hover,:focus-visible,.luma-touch) .luma-fill { transform: translateY(-50%) scale(1); border-radius: 50%; }
.luma[data-luma="wave-double"] .luma-fill { border-radius: 50% 50% 0 0; }
.luma[data-luma="wave-double"] .luma-fill:first-child { background: var(--luma-fg); }
.luma[data-luma="wave-double"] .luma-fill-second { opacity: 1; background: var(--luma-accent); transition-delay: .12s; }
.luma[data-luma="wave-slide"] .luma-fill { inset: -75% -20%; transform: translateX(-110%) rotate(-25deg); }
.luma[data-luma="wave-slide"]:is(:hover,:focus-visible,.luma-touch) .luma-fill { transform: translateX(0) rotate(-25deg); border-radius: 45%; }
.luma[data-luma="wave-curve"] .luma-fill { inset: -100% -25%; border-radius: 50%; }
.luma[data-luma="wave-curve"]:is(:hover,:focus-visible,.luma-touch) .luma-fill { border-radius: 50%; }
.luma[data-luma="swipe"] .luma-fill { inset: -30%; transform: translateX(-110%) skewX(-25deg); border-radius: 0; }
.luma[data-luma="swipe"][data-luma-direction="right"] .luma-fill { transform: translateX(110%) skewX(25deg); }
.luma[data-luma="swipe"]:is(:hover,:focus-visible,.luma-touch) .luma-fill { transform: translateX(0) skewX(-25deg); }
/* Moving type */
.luma-ticker { position: absolute; inset: 0; display: flex; align-items: center; overflow: hidden; border-radius: inherit; opacity: 0; transition: opacity .25s, transform var(--luma-duration); pointer-events: none; }
.luma-track { display: flex; flex-shrink: 0; white-space: nowrap; animation: luma-ticker 6s linear infinite; }
.luma-track > span { padding-right: 1em; }
.luma[data-luma="ticker"]:is(:hover,:focus-visible,.luma-touch) .luma-words { opacity: 0; }
.luma[data-luma="ticker"]:is(:hover,:focus-visible,.luma-touch) .luma-ticker { opacity: 1; }
.luma[data-luma="ticker"] .luma-track { animation-play-state: paused; }
.luma[data-luma="ticker"]:is(:hover,:focus-visible,.luma-touch) .luma-track { animation-play-state: running; }
.luma[data-luma="ticker-swap"] .luma-ticker { opacity: 1; }
.luma[data-luma="ticker-swap"] .luma-front { opacity: 0; }
.luma[data-luma="ticker-swap"] .luma-back { transform: none; }
.luma[data-luma="ticker-swap"] .luma-back .luma-char { transform: translateY(130%); }
.luma[data-luma="ticker-swap"]:is(:hover,:focus-visible,.luma-touch) .luma-ticker { transform: translateY(-120%); opacity: 0; }
.luma[data-luma="ticker-swap"]:is(:hover,:focus-visible,.luma-touch) .luma-back { opacity: 1; }
.luma[data-luma="ticker-swap"]:is(:hover,:focus-visible,.luma-touch) .luma-back .luma-char { transform: translateY(0); }
.luma[data-luma="ticker-swap"]:is(:hover,:focus-visible,.luma-touch) .luma-bg { background: var(--luma-accent); }
.luma[data-luma="reel"] .luma-back { font-family: Georgia,serif; font-style: italic; transform: translateY(130%) rotateX(-75deg); }
.luma[data-luma="reel"]:is(:hover,:focus-visible,.luma-touch) .luma-front { transform: translateY(-130%) rotateX(75deg); }
.luma[data-luma="reel"]:is(:hover,:focus-visible,.luma-touch) .luma-back { transform: none; opacity: 1; }
/* Dots, elastic and helper text */
.luma-dots { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; z-index: -1; }
.luma-dot { position: absolute; background: var(--luma-accent); width: 20%; aspect-ratio: 1; border-radius: 50%; left: calc(var(--i) * 15% - 5%); bottom: -10%; transform: scale(0); transition: transform var(--luma-duration) var(--luma-ease); transition-delay: calc(var(--i) * 35ms); }
.luma[data-luma="bubbles"] .luma-bg { z-index: -2; }
.luma[data-luma="bubbles"] .luma-dot { width: 45%; left: calc(var(--i) * 22% - 12%); bottom: -35%; transform: scale(1); filter: blur(13px); background: hsl(calc(80 + var(--i) * 42) 68% 70%); }
.luma[data-luma="bubbles"]:is(:hover,:focus-visible,.luma-touch) .luma-dot { transform: translateY(-30%) translateX(15%) scale(1.5); }
.luma[data-luma="elastic"] .luma-visual { transition: transform var(--luma-duration) var(--luma-ease); }
.luma[data-luma="elastic"] .luma-words { transition: transform var(--luma-duration) var(--luma-ease); }
.luma[data-luma="elastic"]:is(:hover,:focus-visible,.luma-touch) .luma-visual { transform: scaleX(1.18) scaleY(.88); }
.luma[data-luma="elastic"]:is(:hover,:focus-visible,.luma-touch) .luma-words { transform: scaleX(.88) scaleY(1.12); }
.luma[data-luma="soft-corner"] { --luma-radius: 12px; }
.luma[data-luma="soft-corner"]:is(:hover,:focus-visible,.luma-touch) .luma-bg { border-radius: 50%; transform: scaleX(.94); }
.luma[data-luma="soft-corner"]:is(:hover,:focus-visible,.luma-touch) .luma-front { transform: translateY(-130%); }
.luma[data-luma="soft-corner"]:is(:hover,:focus-visible,.luma-touch) .luma-back { transform: none; opacity: 1; }
.luma-hint { position: absolute; left: 50%; bottom: calc(100% + 8px); padding: 7px 12px; font-size: .72em; border-radius: 6px; background: var(--luma-accent); color: var(--luma-on); white-space: nowrap; opacity: 0; transform: translate(-50%,16px) rotate(-4deg); transition: transform var(--luma-duration),opacity var(--luma-duration); pointer-events: none; }
.luma[data-luma="hint"]:is(:hover,:focus-visible,.luma-touch) .luma-hint { opacity: 1; transform: translate(-50%,0) rotate(0); }
.luma[data-luma="hint"]:is(:hover,:focus-visible,.luma-touch) .luma-bg { box-shadow: 0 0 0 4px var(--luma-accent); }
.luma[data-luma="dot-swap"] .luma-visual { padding-left: 42px; }
.luma[data-luma="dot-swap"] .luma-visual::after { content: ''; width: 9px; height: 9px; background: currentColor; border-radius: 50%; position: absolute; left: 20px; transition: transform var(--luma-duration),background var(--luma-duration); }
.luma[data-luma="dot-swap"]:is(:hover,:focus-visible,.luma-touch) .luma-visual::after { transform: translateY(-5px) scale(1.5); background: #52792a; }
.luma[data-luma="dot-swap"]:is(:hover,:focus-visible,.luma-touch) .luma-front { transform: translateY(-120%); }
.luma[data-luma="dot-swap"]:is(:hover,:focus-visible,.luma-touch) .luma-back { transform: none; opacity: 1; }
.luma:is([data-luma="dot-orbit"],[data-luma="dot-trail"]) .luma-dots { z-index: 1; pointer-events: none; }
.luma[data-luma="dot-orbit"] .luma-visual { padding-left: 44px; }
.luma[data-luma="dot-orbit"] .luma-dot { width: 16px; left: 14px; bottom: calc(50% - 8px); transform: scale(1); background: #507b27; opacity: calc(1 - var(--i) * .35); transition: left var(--luma-duration),opacity var(--luma-duration); transition-delay: calc(var(--i) * 45ms); }
.luma[data-luma="dot-orbit"] .luma-words { transition: transform var(--luma-duration); }
.luma[data-luma="dot-orbit"]:is(:hover,:focus-visible,.luma-touch) .luma-dot { left: calc(100% - 30px); }
.luma[data-luma="dot-orbit"]:is(:hover,:focus-visible,.luma-touch) .luma-words { transform: translateX(-20px); }
.luma[data-luma="dot-trail"] .luma-dot { width: 7px; left: -10px; bottom: calc(50% - 3px); transform: scale(1); background: #507b27; transition: left calc(var(--luma-duration) * 1.5) var(--luma-ease); transition-delay: calc(var(--i) * 80ms); }
.luma[data-luma="dot-trail"]:is(:hover,:focus-visible,.luma-touch) .luma-dot { left: calc(100% + 10px); }
/* Facets and depth */
.luma:is([data-luma^="flip-"],[data-luma="prism"]) .luma-bg { background: transparent; overflow: visible; }
.luma:is([data-luma^="flip-"],[data-luma="prism"]) .luma-words { overflow: visible; perspective: 700px; }
.luma:is([data-luma^="flip-"],[data-luma="prism"]) .luma-front,
.luma:is([data-luma^="flip-"],[data-luma="prism"]) .luma-back { backface-visibility: hidden; position: relative; z-index: 1; }
.luma:is([data-luma^="flip-"],[data-luma="prism"]) .luma-front::before,
.luma:is([data-luma^="flip-"],[data-luma="prism"]) .luma-back::before { content: ''; position: absolute; z-index: -1; inset: -16px -24px; background: var(--luma-bg); border-radius: var(--luma-radius); }
.luma:is([data-luma^="flip-"],[data-luma="prism"]) .luma-back::before { background: var(--luma-accent); }
.luma[data-luma="flip-x"] .luma-back { transform: rotateX(-180deg); opacity: 1; }
.luma[data-luma="flip-x"]:is(:hover,:focus-visible,.luma-touch) .luma-front { transform: rotateX(180deg); }
.luma[data-luma="flip-x"]:is(:hover,:focus-visible,.luma-touch) .luma-back { transform: rotateX(0); }
.luma[data-luma="flip-y"] .luma-back { transform: rotateY(-180deg); opacity: 1; }
.luma[data-luma="flip-y"]:is(:hover,:focus-visible,.luma-touch) .luma-front { transform: rotateY(180deg); }
.luma[data-luma="flip-y"]:is(:hover,:focus-visible,.luma-touch) .luma-back { transform: rotateY(0); }
.luma[data-luma="flip-fold"] .luma-back { opacity: 1; transform: none; z-index: 0; }
.luma[data-luma="flip-fold"] .luma-front { transform-origin: center -16px; z-index: 2; }
.luma[data-luma="flip-fold"]:is(:hover,:focus-visible,.luma-touch) .luma-front { transform: rotateX(105deg); opacity: 0; }
.luma[data-luma="prism"] { --luma-radius: 6px; }
.luma[data-luma="prism"] .luma-front { transform-origin: center center -26px; }
.luma[data-luma="prism"] .luma-back { transform-origin: center center -26px; transform: rotateX(-90deg); opacity: 1; }
.luma[data-luma="prism"]:is(:hover,:focus-visible,.luma-touch) .luma-front { transform: rotateX(90deg); }
.luma[data-luma="prism"]:is(:hover,:focus-visible,.luma-touch) .luma-back { transform: rotateX(0); }
.luma[data-luma="prism"][data-luma-direction="top"] .luma-back { transform: rotateX(90deg); }
.luma[data-luma="prism"][data-luma-direction="top"]:is(:hover,:focus-visible,.luma-touch) .luma-front { transform: rotateX(-90deg); }
.luma[data-luma="prism"][data-luma-direction="top"]:is(:hover,:focus-visible,.luma-touch) .luma-back { transform: rotateX(0); }
.luma[data-luma="prism-split"] .luma-visual { perspective: 600px; }
.luma-half { position: absolute; inset: 0; padding: 16px 24px; border-radius: inherit; background: var(--luma-accent); display: grid; place-items: center; backface-visibility: hidden; clip-path: inset(0 50% 0 0); transform: rotateY(90deg); transform-origin: left; opacity: 0; transition: transform var(--luma-duration),opacity var(--luma-duration); }
.luma-half + .luma-half { clip-path: inset(0 0 0 50%); transform: rotateY(-90deg); transform-origin: right; }
.luma[data-luma="prism-split"]:is(:hover,:focus-visible,.luma-touch) .luma-half { transform: rotateY(0); opacity: 1; }
.luma[data-luma="prism-split"]:is(:hover,:focus-visible,.luma-touch) .luma-front { opacity: 0; }
.luma[data-luma="layers"] .luma-visual { transition: transform var(--luma-duration); }
.luma-layer { position: absolute; z-index: -2; inset: 0; border: 1px solid var(--luma-fg); background: var(--luma-accent); border-radius: inherit; opacity: 0; transition: transform var(--luma-duration), opacity var(--luma-duration); }
.luma[data-luma="layers"]:is(:hover,:focus-visible,.luma-touch) .luma-visual { transform: translate(-6px,-8px); }
.luma[data-luma="layers"]:is(:hover,:focus-visible,.luma-touch) .luma-layer { opacity: calc(1 - var(--i) * .13); transform: translate(calc(var(--i) * 3px),calc(var(--i) * 4px)); }
.luma[data-luma="soft"] .luma-bg { box-shadow: 5px 5px 12px #16251c30,-5px -5px 12px #ffffffb0,inset 0 0 0 transparent; }
.luma[data-luma="soft"]:is(:hover,:focus-visible,.luma-touch) .luma-bg { box-shadow: 1px 1px 2px #16251c20,-1px -1px 2px #ffffff80,inset 3px 3px 8px #16251c30,inset -3px -3px 8px #ffffffb0; }
.luma[data-luma="soft"]:is(:hover,:focus-visible,.luma-touch) .luma-words { transform: translateY(1px); }
/* Pixel fields */
.luma-grid { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(var(--cols),1fr); grid-template-rows: repeat(var(--rows),1fr); overflow: hidden; border-radius: inherit; pointer-events: none; }
.luma-cell { background: var(--luma-accent); transition: transform var(--luma-duration) var(--luma-ease),opacity var(--luma-duration); transition-delay: calc(var(--i) * 22ms); }
.luma:is([data-luma="mosaic"],[data-luma="tiles"]) .luma-grid { z-index: -1; }
.luma:is([data-luma="mosaic"],[data-luma="tiles"]) .luma-bg { z-index: -2; }
.luma[data-luma="mosaic"] .luma-cell { transform: scale(0); }
.luma[data-luma="mosaic"]:is(:hover,:focus-visible,.luma-touch) .luma-cell { transform: scale(1.02); }
.luma[data-luma="tiles"] .luma-cell { transform: scale(1); background: var(--luma-bg); }
.luma[data-luma="tiles"] .luma-bg { background: var(--luma-accent); }
.luma[data-luma="tiles"]:is(:hover,:focus-visible,.luma-touch) .luma-cell { transform: scale(.03) rotate(90deg); }
.luma[data-luma="stripes"] .luma-fill { inset: -50%; border-radius: 0; background: repeating-linear-gradient(55deg,var(--luma-accent) 0 12px,var(--luma-bg) 12px 24px); transform: translateY(110%); background-size: 58px 100%; animation: luma-stripes 1s linear infinite paused; }
.luma[data-luma="stripes"]:is(:hover,:focus-visible,.luma-touch) .luma-fill { transform: translateY(0); animation-play-state: running; }
.luma[data-luma="stripes"][data-luma-direction="top"] .luma-fill { transform: translateY(-110%); }
.luma[data-luma="stripes"][data-luma-direction="top"]:is(:hover,:focus-visible,.luma-touch) .luma-fill { transform: translateY(0); }
/* Light */
.luma[data-luma="spectrum"] { --luma-radius: 10px; }
.luma:is([data-luma="spectrum"],[data-luma="comet"]) .luma-bg { background: var(--luma-fg); }
.luma:is([data-luma="spectrum"],[data-luma="comet"]) .luma-bg::before { content: ''; position: absolute; width: 240%; aspect-ratio: 1; left: -70%; top: 50%; margin-top: -120%; background: conic-gradient(#8bd5fa,#c7a8ff,#fa9caa,#ffd97b,#b9ed79,#8bd5fa); animation: luma-spin 3s linear infinite paused; }
.luma:is([data-luma="spectrum"],[data-luma="comet"]) .luma-bg::after { content: ''; position: absolute; inset: 2px; background: var(--luma-bg); border-radius: inherit; }
.luma:is([data-luma="spectrum"],[data-luma="comet"]):is(:hover,:focus-visible,.luma-touch) .luma-bg::before { animation-play-state: running; }
.luma[data-luma="comet"] .luma-bg::before { background: conic-gradient(transparent 0deg 310deg,var(--luma-accent) 340deg,white 358deg,transparent); animation-play-state: running; animation-duration: 2.4s; }
.luma[data-luma="comet"]:is(:hover,:focus-visible,.luma-touch) .luma-bg { box-shadow: 0 0 22px color-mix(in srgb,var(--luma-accent),transparent 45%); }
.luma[data-luma="spotlight"] .luma-fill { inset: auto; width: 140px; height: 140px; left: var(--luma-x); top: var(--luma-y); background: white; border-radius: 50%; transform: translate(-50%,-50%) scale(0); }
.luma[data-luma="spotlight"] .luma-bg { background: #151a17; }
.luma[data-luma="spotlight"] .luma-words { color: white; mix-blend-mode: difference; }
.luma[data-luma="spotlight"]:is(:hover,:focus-visible,.luma-touch) .luma-fill { transform: translate(-50%,-50%) scale(1); }
.luma[data-luma="haze"] .luma-fill { inset: 15% 20%; transform: scale(.3); border-radius: 50%; filter: blur(16px); opacity: .3; transition: transform var(--luma-duration),opacity var(--luma-duration); }
.luma[data-luma="haze"]:is(:hover,:focus-visible,.luma-touch) .luma-fill { transform: scale(2.5); opacity: 1; }
.luma[data-luma="glass"] { --luma-radius: 13px; }
.luma[data-luma="glass"] .luma-bg { background: linear-gradient(120deg,#d8f2e9cc,#f2e7efbb); border: 1px solid #ffffffa0; backdrop-filter: blur(12px) saturate(1.5); box-shadow: inset 0 2px 2px #ffffffaa,0 6px 18px #14271c25; }
.luma[data-luma="glass"] .luma-fill { inset: -50%; background: conic-gradient(from 30deg at var(--luma-x) var(--luma-y),#ffffff,#afdcb4,#f4d0f2,#b4dbf0,#fff); transform: rotate(-30deg); opacity: .2; filter: blur(12px); transition: opacity var(--luma-duration),transform var(--luma-duration); }
.luma[data-luma="glass"]:is(:hover,:focus-visible,.luma-touch) { transform: perspective(500px) rotateX(var(--luma-rx)) rotateY(var(--luma-ry)); }
.luma[data-luma="glass"]:is(:hover,:focus-visible,.luma-touch) .luma-fill { opacity: .8; transform: rotate(30deg); }
.luma[data-luma="sheen"] { color: #f1f4ee; }
.luma[data-luma="sheen"] .luma-bg { background: #19201a; border: 1px solid #647564; }
.luma[data-luma="sheen"] .luma-fill { inset: -100%; background: linear-gradient(115deg,transparent 34%,#ffffff55 49%,transparent 64%); transform: translateX(-35%); opacity: 0; }
.luma[data-luma="sheen"]:is(:hover,:focus-visible,.luma-touch) .luma-fill { transform: translateX(calc((var(--luma-x) - 50%) * .4)); opacity: 1; }
/* Disclosures: put the associated panel after the trigger, never inside it. */
.luma[data-luma="reveal"] .luma-icon { display: block; transform: rotate(90deg); transition: transform var(--luma-duration); }
.luma[data-luma="reveal"][aria-expanded="true"] .luma-icon { transform: rotate(270deg); }
.luma[data-luma="reveal"]:is(:hover,:focus-visible,.luma-touch,[aria-expanded="true"]) .luma-bg { background: var(--luma-accent); }
.luma-panel { padding: 12px; border: 1px solid #b3c1b4; border-radius: 12px; background: #f3f4ec; color: #1b281e; }
.luma-panel[hidden] { display: none !important; }
.luma-panel a { display: block; padding: 9px; color: inherit; text-underline-offset: 3px; }
.luma-panel a:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
@keyframes luma-ticker { to { transform: translateX(-100%); } }
@keyframes luma-spin { to { transform: rotate(360deg); } }
@keyframes luma-flash { 0%,100% { opacity: .15; } 50% { opacity: 1; } }
@keyframes luma-bounce { from { transform: translateX(-3px) rotate(45deg); } to { transform: translateX(4px) rotate(45deg); } }
@keyframes luma-stripes { to { background-position: 58px 0; } }
.luma:where(:disabled,[aria-disabled="true"],[aria-busy="true"]) { opacity: .45; cursor: not-allowed; pointer-events: none; }
.luma:where(:disabled,[aria-disabled="true"],[aria-busy="true"]) * { animation-play-state: paused !important; }

@media (forced-colors: active) {
  .luma { border: 2px solid ButtonText; color: ButtonText; }
  .luma-bg { background: ButtonFace; }
  .luma-visual > :not(.luma-words) { display: none !important; }
  .luma .luma-front { color: ButtonText; transform: none !important; opacity: 1 !important; }
  .luma .luma-back { display: none; }
}