@property --res-surface-prism-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@keyframes res-surface-prism-turn {
  to { --res-surface-prism-angle: 1turn; }
}

.res-surface-aura-lift,
.res-surface-prismatic-border,
.res-surface-magnetic-nudge,
.res-surface-spring-press,
.res-surface-underline-reveal,
.res-surface-satin-sheen,
.res-surface-soft-inset,
.res-surface-ink-ripple,
.res-surface-icon-slide,
.res-surface-dashed-to-solid,
.res-surface-soft-neon,
.res-surface-focus-orbit,
.res-surface-fill-sweep {
  box-sizing: border-box;
  position: relative;
  font: 650 0.96rem/1.2 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.res-surface-aura-lift {
  isolation: isolate;
  padding: 0.9rem 1.35rem;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: var(--res-surface-aura-radius, 14px);
  color: #fff;
  background: linear-gradient(135deg, #9b72f0, #5d42c6);
  box-shadow: 0 8px 18px rgba(52, 39, 112, 0.28);
  transition: transform 220ms ease, box-shadow 220ms ease;
}
.res-surface-aura-lift::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 4px -5px -7px;
  border-radius: inherit;
  background: var(--res-surface-aura-color, #8b5cf6);
  filter: blur(15px);
  opacity: 0.28;
  transition: opacity 220ms ease, inset 220ms ease;
}
.res-surface-aura-lift:hover,
.res-surface-aura-lift:focus-visible { transform: translateY(-3px); box-shadow: 0 13px 25px rgba(52, 39, 112, 0.36); }
.res-surface-aura-lift:hover::before,
.res-surface-aura-lift:focus-visible::before { inset: 2px -9px -10px; opacity: 0.72; }

.res-surface-prismatic-border {
  --res-surface-prism-angle: 0deg;
  padding: 0.82rem 1.35rem;
  border: 2px solid transparent;
  border-radius: 999px;
  color: #f4f5ff;
  background: linear-gradient(var(--res-surface-prism-base, #151a2b), var(--res-surface-prism-base, #151a2b)) padding-box,
    conic-gradient(from var(--res-surface-prism-angle), #69ddff, #b28aff, #ff91c8, #69ddff) border-box;
  box-shadow: 0 7px 20px rgba(34, 45, 83, 0.18);
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.res-surface-prismatic-border:hover,
.res-surface-prismatic-border:focus-visible {
  animation: res-surface-prism-turn var(--res-surface-prism-speed, 7s) linear infinite;
  transform: translateY(-2px);
  box-shadow: 0 9px 26px rgba(96, 121, 229, 0.25);
}

.res-surface-magnetic-nudge {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.9rem 1.3rem;
  border: 0;
  border-radius: 12px;
  color: white;
  background: var(--res-surface-magnet-color, #1769e0);
  box-shadow: 0 7px 16px rgba(23, 105, 224, 0.22);
  transition: transform 190ms cubic-bezier(.2, .8, .25, 1), box-shadow 190ms ease;
}
.res-surface-magnetic-nudge:hover,
.res-surface-magnetic-nudge:focus-visible { transform: translateY(var(--res-surface-magnet-shift, -3px)) scale(1.035); box-shadow: 0 12px 23px rgba(23, 105, 224, 0.3); }

.res-surface-spring-press {
  padding: 0.92rem 1.4rem;
  border: 1px solid #0a625c;
  border-radius: 11px;
  color: #f1fffc;
  background: linear-gradient(180deg, rgba(255, 255, 255, .14), transparent), var(--res-surface-spring-color, #0f766e);
  box-shadow: 0 var(--res-surface-spring-depth, 4px) 0 #07554f, 0 8px 15px rgba(8, 75, 69, 0.16);
  transition: transform 100ms ease, box-shadow 100ms ease;
}
.res-surface-spring-press:hover { filter: brightness(1.06); }
.res-surface-spring-press:active { transform: translateY(3px); box-shadow: 0 1px 0 #07554f, 0 3px 6px rgba(8, 75, 69, 0.16); }
.res-surface-spring-press:focus-visible { outline: 3px solid rgba(15, 118, 110, 0.35); outline-offset: 4px; }

.res-surface-underline-reveal {
  padding: 0.55rem 0.1rem 0.7rem;
  border: 0;
  color: #382f48;
  background: transparent;
}
.res-surface-underline-reveal::after {
  content: "";
  position: absolute;
  right: 50%;
  bottom: 0.24rem;
  left: 50%;
  height: 2px;
  border-radius: 2px;
  background: var(--res-surface-underline-color, #c2417a);
  transition: left 230ms ease, right 230ms ease;
}
.res-surface-underline-reveal:hover::after,
.res-surface-underline-reveal:focus-visible::after { right: 0; left: 0; }
.res-surface-underline-reveal:focus-visible { outline: 2px solid currentColor; outline-offset: 5px; }

.res-surface-glass-panel {
  box-sizing: border-box;
  display: grid;
  gap: 0.45rem;
  min-width: 16rem;
  padding: 1.25rem 1.45rem;
  border: 1px solid rgba(255, 255, 255, 0.48);
  border-radius: var(--res-surface-glass-radius, 20px);
  color: #202744;
  background: linear-gradient(135deg, var(--res-surface-glass-tint, rgba(119, 139, 255, .2)), rgba(255, 255, 255, .76));
  box-shadow: 0 16px 36px rgba(44, 55, 99, 0.17), inset 0 1px 0 rgba(255, 255, 255, .75);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  transition: transform 220ms ease, box-shadow 220ms ease;
  cursor: pointer;
}
.res-surface-glass-panel strong { font: 700 1.02rem/1.3 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.res-surface-glass-panel span { color: #47526d; font: 500 0.86rem/1.4 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.res-surface-glass-panel:hover,
.res-surface-glass-panel:focus-visible { transform: translateY(-3px); box-shadow: 0 20px 42px rgba(44, 55, 99, 0.22), inset 0 1px 0 rgba(255, 255, 255, .85); }
.res-surface-glass-panel:focus-visible { outline: 2px solid #5969c7; outline-offset: 4px; }

.res-surface-satin-sheen {
  overflow: hidden;
  isolation: isolate;
  padding: 0.92rem 1.4rem;
  border: 0;
  border-radius: 12px;
  color: #fff;
  background: linear-gradient(120deg, #5035b5, var(--res-surface-satin-color, #6045c7));
  box-shadow: 0 8px 17px rgba(75, 52, 155, 0.25);
}
.res-surface-satin-sheen::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: -55%;
  bottom: -55%;
  left: -45%;
  width: 35%;
  background: linear-gradient(90deg, transparent, var(--res-surface-satin-light, rgba(255, 255, 255, .42)), transparent);
  transform: skewX(-22deg);
  transition: left 520ms cubic-bezier(.2, .7, .2, 1);
}
.res-surface-satin-sheen:hover::after,
.res-surface-satin-sheen:focus-visible::after { left: 120%; }
.res-surface-satin-sheen:focus-visible { outline: 3px solid rgba(96, 69, 199, .35); outline-offset: 4px; }

.res-surface-corner-brackets {
  box-sizing: border-box;
  position: relative;
  display: grid;
  gap: 0.42rem;
  min-width: 16rem;
  padding: 1.25rem 1.4rem;
  border: 1px solid #dce3ee;
  border-radius: 14px;
  color: #263149;
  background: #fbfcff;
  box-shadow: 0 8px 22px rgba(37, 54, 87, .08);
  cursor: pointer;
}
.res-surface-corner-brackets strong { font: 700 1rem/1.3 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.res-surface-corner-brackets span { color: #69758b; font: 500 .82rem/1.4 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.res-surface-corner-brackets::before,
.res-surface-corner-brackets::after {
  content: "";
  position: absolute;
  inset: 8px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 180ms ease, inset 180ms ease;
}
.res-surface-corner-brackets::before {
  background: linear-gradient(var(--res-surface-bracket-color, #16b8a6), var(--res-surface-bracket-color, #16b8a6)) left top / var(--res-surface-bracket-size, 18px) 2px no-repeat,
    linear-gradient(var(--res-surface-bracket-color, #16b8a6), var(--res-surface-bracket-color, #16b8a6)) left top / 2px var(--res-surface-bracket-size, 18px) no-repeat,
    linear-gradient(var(--res-surface-bracket-color, #16b8a6), var(--res-surface-bracket-color, #16b8a6)) right top / var(--res-surface-bracket-size, 18px) 2px no-repeat,
    linear-gradient(var(--res-surface-bracket-color, #16b8a6), var(--res-surface-bracket-color, #16b8a6)) right top / 2px var(--res-surface-bracket-size, 18px) no-repeat;
}
.res-surface-corner-brackets::after {
  background: linear-gradient(var(--res-surface-bracket-color, #16b8a6), var(--res-surface-bracket-color, #16b8a6)) left bottom / var(--res-surface-bracket-size, 18px) 2px no-repeat,
    linear-gradient(var(--res-surface-bracket-color, #16b8a6), var(--res-surface-bracket-color, #16b8a6)) left bottom / 2px var(--res-surface-bracket-size, 18px) no-repeat,
    linear-gradient(var(--res-surface-bracket-color, #16b8a6), var(--res-surface-bracket-color, #16b8a6)) right bottom / var(--res-surface-bracket-size, 18px) 2px no-repeat,
    linear-gradient(var(--res-surface-bracket-color, #16b8a6), var(--res-surface-bracket-color, #16b8a6)) right bottom / 2px var(--res-surface-bracket-size, 18px) no-repeat;
}
.res-surface-corner-brackets:hover::before,
.res-surface-corner-brackets:hover::after,
.res-surface-corner-brackets:focus-visible::before,
.res-surface-corner-brackets:focus-visible::after { inset: 5px; opacity: 1; }
.res-surface-corner-brackets:focus-visible { outline: 2px solid #16b8a6; outline-offset: 3px; }

.res-surface-soft-inset {
  padding: 0.9rem 1.4rem;
  border: 1px solid #d9e0eb;
  border-radius: 12px;
  color: var(--res-surface-inset-ink, #34445c);
  background: var(--res-surface-inset-color, #e6ecf5);
  box-shadow: 7px 7px 14px #cbd3df, -7px -7px 14px #fff, inset 0 0 0 rgba(110, 127, 152, 0);
  transition: box-shadow 180ms ease, transform 180ms ease;
}
.res-surface-soft-inset:hover,
.res-surface-soft-inset:focus-visible,
.res-surface-soft-inset:active { transform: translateY(1px); box-shadow: 3px 3px 7px #cbd3df, -3px -3px 7px #fff, inset 3px 3px 6px rgba(110, 127, 152, .2); }
.res-surface-soft-inset:focus-visible { outline: 2px solid #617696; outline-offset: 4px; }

.res-surface-ink-ripple {
  isolation: isolate;
  overflow: hidden;
  padding: 0.92rem 1.4rem;
  border: 1px solid #bb3159;
  border-radius: 999px;
  color: #fff;
  background: #cf426b;
  transition: color 260ms ease, transform 180ms ease;
}
.res-surface-ink-ripple::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  width: 1.2rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--res-surface-ripple-color, #e65378);
  transform: translate(-50%, -50%) scale(0);
  transition: transform 420ms cubic-bezier(.2, .8, .2, 1);
}
.res-surface-ink-ripple:hover::before,
.res-surface-ink-ripple:focus-visible::before { transform: translate(-50%, -50%) scale(13); }
.res-surface-ink-ripple:hover,
.res-surface-ink-ripple:focus-visible { transform: translateY(-1px); }
.res-surface-ink-ripple:focus-visible { outline: 3px solid rgba(207, 66, 107, .3); outline-offset: 4px; }

.res-surface-icon-slide {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.85rem 1.15rem;
  border: 1px solid #d8e1f1;
  border-radius: 10px;
  color: #24456f;
  background: #f6f9ff;
  box-shadow: 0 5px 13px rgba(34, 68, 112, .08);
  transition: border-color 180ms ease, background-color 180ms ease;
}
.res-surface-icon-slide__icon { color: var(--res-surface-icon-color, #245db8); font-size: 1.2em; transition: transform 180ms ease; }
.res-surface-icon-slide:hover,
.res-surface-icon-slide:focus-visible { border-color: #a6c1e7; background: #edf4ff; }
.res-surface-icon-slide:hover .res-surface-icon-slide__icon,
.res-surface-icon-slide:focus-visible .res-surface-icon-slide__icon { transform: translateX(var(--res-surface-icon-shift, 5px)); }
.res-surface-icon-slide:focus-visible { outline: 2px solid #245db8; outline-offset: 4px; }

.res-surface-spotlight-card {
  box-sizing: border-box;
  display: grid;
  gap: 0.55rem;
  width: min(19rem, 90vw);
  padding: 1.35rem 1.5rem;
  border: 1px solid rgba(153, 173, 229, .18);
  border-radius: 17px;
  color: #f5f7ff;
  background: radial-gradient(circle at 48% 0%, var(--res-surface-spotlight-color, rgba(69, 132, 255, .32)), transparent 54%), #11192b;
  box-shadow: 0 15px 34px rgba(16, 27, 54, .24);
  cursor: pointer;
  transition: background-position 300ms ease, transform 220ms ease, box-shadow 220ms ease;
}
.res-surface-spotlight-card span { color: #aab6d0; font: 600 .72rem/1.3 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; letter-spacing: .11em; }
.res-surface-spotlight-card span:last-child { color: #91a0bd; font-weight: 450; letter-spacing: 0; }
.res-surface-spotlight-card strong { font: 680 1.1rem/1.35 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.res-surface-spotlight-card:hover,
.res-surface-spotlight-card:focus-visible { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(16, 27, 54, .32); }
.res-surface-spotlight-card:focus-visible { outline: 2px solid #7daaff; outline-offset: 4px; }

.res-surface-layered-depth {
  box-sizing: border-box;
  display: grid;
  gap: 0.48rem;
  width: min(19rem, 90vw);
  padding: 1.25rem 1.4rem;
  border: 1px solid #e1e6f2;
  border-radius: var(--res-surface-layer-radius, 18px);
  color: #243044;
  background: #fff;
  box-shadow: 0 5px 0 #dbe2f0, 0 10px 0 #c6d1e5, 0 17px 23px rgba(47, 67, 105, .12);
  cursor: pointer;
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.res-surface-layered-depth span { color: #63728d; font: 600 .76rem/1.3 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; letter-spacing: .07em; }
.res-surface-layered-depth strong { font: 700 1.04rem/1.35 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.res-surface-layered-depth:hover,
.res-surface-layered-depth:focus-visible { transform: translateY(-5px); box-shadow: 0 7px 0 var(--res-surface-layer-color, #3156a3), 0 13px 0 #c6d1e5, 0 22px 29px rgba(47, 67, 105, .16); }
.res-surface-layered-depth:focus-visible { outline: 2px solid #3156a3; outline-offset: 5px; }

.res-surface-segmented-pill {
  isolation: isolate;
  display: inline-flex;
  position: relative;
  align-items: center;
  gap: 0.1rem;
  padding: 4px;
  border: 1px solid #d9e0ec;
  border-radius: 999px;
  color: var(--res-surface-pill-ink, #394761);
  background: #e9edf4;
  font: 600 .84rem/1 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  cursor: pointer;
}
.res-surface-segmented-pill::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc(50% - 5px);
  border-radius: 999px;
  background: var(--res-surface-pill-active, #fff);
  box-shadow: 0 2px 6px rgba(45, 57, 79, .15);
  transition: transform 220ms cubic-bezier(.2, .8, .2, 1);
}
.res-surface-segmented-pill span { position: relative; min-width: 5.5rem; padding: .65rem .8rem; }
.res-surface-segmented-pill:hover::before,
.res-surface-segmented-pill:focus-visible::before { transform: translateX(100%); }
.res-surface-segmented-pill:focus-visible { outline: 2px solid #657b9f; outline-offset: 4px; }

.res-surface-dashed-to-solid {
  padding: .9rem 1.3rem;
  border: 2px dashed var(--res-surface-dash-color, #7b54cb);
  border-radius: 12px;
  color: #503a77;
  background: #fbf9ff;
  transition: border-style 120ms ease, background-color 180ms ease, transform 180ms ease;
}
.res-surface-dashed-to-solid:hover,
.res-surface-dashed-to-solid:focus-visible { border-style: solid; background: #f2edff; transform: translateY(-2px); }
.res-surface-dashed-to-solid:focus-visible { outline: 2px solid rgba(123, 84, 203, .32); outline-offset: 4px; }

.res-surface-soft-neon {
  padding: .9rem 1.35rem;
  border: 1px solid var(--res-surface-neon-color, #4be0c3);
  border-radius: 10px;
  color: #d8fff6;
  background: var(--res-surface-neon-ink, #102a35);
  box-shadow: inset 0 0 0 1px rgba(75, 224, 195, .1);
  transition: box-shadow 220ms ease, text-shadow 220ms ease;
}
.res-surface-soft-neon:hover,
.res-surface-soft-neon:focus-visible { box-shadow: 0 0 0 1px rgba(75, 224, 195, .5), 0 0 17px rgba(75, 224, 195, .3), inset 0 0 14px rgba(75, 224, 195, .12); text-shadow: 0 0 12px rgba(75, 224, 195, .45); }
.res-surface-soft-neon:focus-visible { outline: 2px solid #4be0c3; outline-offset: 4px; }

.res-surface-fold-corner {
  box-sizing: border-box;
  position: relative;
  display: grid;
  gap: .46rem;
  width: min(19rem, 90vw);
  padding: 1.25rem 1.4rem;
  overflow: hidden;
  border: 1px solid #e5e1d8;
  border-radius: 14px;
  color: #403b31;
  background: #fffdf8;
  box-shadow: 0 8px 20px rgba(61, 53, 37, .09);
  cursor: pointer;
}
.res-surface-fold-corner strong { font: 700 1rem/1.35 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.res-surface-fold-corner span { color: #797262; font: 500 .84rem/1.4 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.res-surface-fold-corner::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: var(--res-surface-fold-size, 24px);
  aspect-ratio: 1;
  background: var(--res-surface-fold-color, #f1bd62);
  clip-path: polygon(0 0, 100% 100%, 100% 0);
  transform: scale(.28);
  transform-origin: top right;
  opacity: .4;
  transition: transform 180ms ease, opacity 180ms ease;
}
.res-surface-fold-corner:hover::after,
.res-surface-fold-corner:focus-visible::after { transform: scale(1); opacity: 1; }
.res-surface-fold-corner:focus-visible { outline: 2px solid #bd8b32; outline-offset: 4px; }

.res-surface-ticket-notch {
  box-sizing: border-box;
  position: relative;
  display: grid;
  gap: .6rem;
  width: min(19rem, 90vw);
  padding: 1.3rem 1.6rem;
  border: 1px solid #eddfd4;
  border-radius: 14px;
  color: #47372f;
  background: radial-gradient(circle at left 52%, #f4f5f9 9px, transparent 10px), radial-gradient(circle at right 52%, #f4f5f9 9px, transparent 10px), var(--res-surface-ticket-paper, #fff9f1);
  box-shadow: 0 9px 20px rgba(87, 59, 41, .1);
  cursor: pointer;
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.res-surface-ticket-notch::after {
  content: "";
  position: absolute;
  top: 17%;
  right: 28%;
  bottom: 17%;
  border-right: 1px dashed var(--res-surface-ticket-accent, #de6b52);
  opacity: .65;
}
.res-surface-ticket-notch strong { font: 720 1rem/1.3 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.res-surface-ticket-notch span { color: #8b6b5c; font: 550 .82rem/1.35 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.res-surface-ticket-notch:hover,
.res-surface-ticket-notch:focus-visible { transform: translateY(-3px); box-shadow: 0 13px 25px rgba(87, 59, 41, .15); }
.res-surface-ticket-notch:focus-visible { outline: 2px solid var(--res-surface-ticket-accent, #de6b52); outline-offset: 4px; }

.res-surface-focus-orbit {
  padding: .9rem 1.35rem;
  border: 1px solid #b8c9d6;
  border-radius: 11px;
  color: #25464d;
  background: #f1faf9;
  box-shadow: 0 5px 12px rgba(29, 71, 78, .08);
  transition: box-shadow 180ms ease, border-color 180ms ease;
}
.res-surface-focus-orbit:focus { outline: none; }
.res-surface-focus-orbit:focus-visible { outline: 2px solid var(--res-surface-focus-color, #087f8c); outline-offset: 3px; box-shadow: 0 0 0 6px rgba(8, 127, 140, .14), 0 7px 16px rgba(29, 71, 78, .13); }

.res-surface-fill-sweep {
  isolation: isolate;
  overflow: hidden;
  padding: .92rem 1.45rem;
  border: 1px solid var(--res-surface-sweep-color, #e15a4f);
  border-radius: 999px;
  color: #9f3d35;
  background: #fff;
  transition: color 210ms ease, transform 180ms ease;
}
.res-surface-fill-sweep::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: var(--res-surface-sweep-color, #e15a4f);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 240ms cubic-bezier(.2, .75, .3, 1);
}
.res-surface-fill-sweep:hover,
.res-surface-fill-sweep:focus-visible { color: var(--res-surface-sweep-ink, #fff); transform: translateY(-1px); }
.res-surface-fill-sweep:hover::before,
.res-surface-fill-sweep:focus-visible::before { transform: scaleX(1); }
.res-surface-fill-sweep:focus-visible { outline: 2px solid rgba(225, 90, 79, .35); outline-offset: 4px; }

@media (prefers-reduced-motion: reduce) {
  [class^="res-surface-"], [class*=" res-surface-"],
  [class^="res-surface-"]::before, [class*=" res-surface-"]::before,
  [class^="res-surface-"]::after, [class*=" res-surface-"]::after,
  [class^="res-surface-"] *, [class*=" res-surface-"],
  [class^="res-surface-"] *::before, [class*=" res-surface-" ] *::before,
  [class^="res-surface-"] *::after, [class*=" res-surface-" ] *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}