@font-face {
  font-family: "TAN Luna Negra";
  src: url("/fonts/tan-luna-negra-display.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Instrument Serif";
  src: url("/fonts/instrument-serif-400-italic-latin.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}
.oracle {
  --oracle-text: "Oracle Text", var(--serif);
  --ink: rgba(51, 16, 55, .9);
  --cr: calc(var(--cw) * .05);
  --ease-out: cubic-bezier(.2, .75, .25, 1);
  position: relative;
  -webkit-tap-highlight-color: transparent;
}
.oracle__title { margin: 0; line-height: 0; }
.oracle__title svg { width: 100%; height: auto; overflow: visible; }
.oracle__cardbox { position: relative; width: var(--cw); height: calc(var(--cw) * 795 / 539); }
.oracle__rays {
  position: absolute; z-index: 0; pointer-events: none;
  left: calc(var(--cw) * -379.5 / 539); top: calc(var(--cw) * -356 / 539);
  width: calc(var(--cw) * 1299 / 539); height: calc(var(--cw) * 1584 / 539); max-width: none;
}
.oracle__glow, .oracle__bloom { position: absolute; z-index: 0; pointer-events: none; border-radius: 50%; }
.oracle__glow {
  inset: -22% -40%;
  background: radial-gradient(closest-side, rgba(255, 238, 196, .9), rgba(255, 238, 196, .45) 45%, rgba(255, 238, 196, 0));
  opacity: .55;
}
.oracle__bloom {
  inset: -18% -34%;
  background: radial-gradient(closest-side, rgba(240, 55, 172, .2), rgba(180, 0, 105, .09) 50%, rgba(180, 0, 105, 0));
  opacity: 0;
}
.oracle__float { position: absolute; inset: 0; z-index: 1; }
.ocard { position: absolute; inset: 0; }
.ocard__in, .ocard__hover, .ocard__flip, .ocard__face { position: absolute; inset: 0; }
.ocard picture, .ocard__img { display: block; width: 100%; height: 100%; }
.ocard__img { object-fit: cover; }
.ocard .ph { border-radius: var(--cr); background: var(--plum-deep); }
.ocard--u1 { transform: translate(calc(var(--cw) * -.013), calc(var(--cw) * .017)) rotate(-2.3deg); }
.ocard--u2 { transform: translate(calc(var(--cw) * .015), calc(var(--cw) * .011)) rotate(1.6deg); }
.ocard--u3 { transform: translate(calc(var(--cw) * -.004), calc(var(--cw) * .021)) rotate(-.6deg); }
.ocard__dim { position: absolute; inset: 0; border-radius: var(--cr); background: rgba(51, 16, 55, .1); }
.ocard--ghost { opacity: 0; }
.oracle__pile-shadow, .ocard__shadow {
  position: absolute; inset: 0; border-radius: var(--cr); background: rgba(0, 0, 0, .25);
  transform: translate(calc(var(--cw) * 10 / 539), calc(var(--cw) * 12 / 539)); filter: blur(calc(var(--cw) * 2 / 539));
}
.oracle__pile-shadow { transform: translate(calc(var(--cw) * 12 / 539), calc(var(--cw) * 16 / 539)); }
.ocard__lift {
  position: absolute; inset: 4% 6%; border-radius: var(--cr); opacity: 0;
  box-shadow: 0 calc(var(--cw) * .1) calc(var(--cw) * .13) calc(var(--cw) * -.01) rgba(51, 16, 55, .42);
}
.ocard__hover { transition: transform .5s var(--ease-out); perspective: calc(var(--cw) * 3.4); }
.ocard__flip { -webkit-transform-style: preserve-3d; transform-style: preserve-3d; }
.ocard__face, .ocard__face img { -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.ocard__face--front { transform: rotateY(180deg); }
.oracle:not(.is-rm):not([data-face="front"]) .ocard__face--front, .oracle:not(.is-rm)[data-face="front"] .ocard__face--back { opacity: 0; }
.oracle.is-rm .ocard__face--front { transform: none; opacity: 0; }
.oracle.is-rm[data-face="front"] .ocard__face--front { opacity: 1; }
.oracle.is-animating .ocard__flip, .oracle.is-animating .ocard__in { will-change: transform; }
.oracle.is-animating .ocard--top, .oracle.is-animating .ocard--ghost { will-change: transform, opacity; }
.oracle.is-animating .ocard__lift, .oracle.is-animating .ocard__shadow, .oracle.is-animating .ocard__dim { will-change: opacity; }
.oracle.is-animating .oracle__reel, .oracle.is-animating .oracle__note { will-change: transform; }
.oracle__deck {
  position: absolute; inset: 0; z-index: 5; margin: 0; padding: 0; border: 0; border-radius: var(--cr);
  background: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.oracle__deck:focus-visible { outline: 2px solid var(--magenta); outline-offset: 6px; }
.oracle__deck[aria-disabled="true"] { cursor: default; }
@media (hover: hover) {
  .oracle:not(.is-busy) .oracle__cardbox:has(.oracle__deck:hover) .ocard__hover { transform: translateY(calc(var(--cw) * -.014)); }
}
.oracle__sparks { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.oracle__spark { position: absolute; width: calc(var(--cw) * .05); height: calc(var(--cw) * .05); margin: calc(var(--cw) * -.025); color: #D2A85A; opacity: 0; }
.oracle__spark svg { width: 100%; height: 100%; }
.oracle__spark--1 { left: -6%; top: 14%; width: calc(var(--cw) * .06); height: calc(var(--cw) * .06); }
.oracle__spark--2 { left: 104%; top: 8%; color: #B40069; }
.oracle__spark--3 { left: 108%; top: 50%; width: calc(var(--cw) * .035); height: calc(var(--cw) * .035); }
.oracle__spark--4 { left: -9%; top: 60%; color: #B40069; width: calc(var(--cw) * .035); height: calc(var(--cw) * .035); }
.oracle__spark--5 { left: 99%; top: 92%; }
.oracle__spark--6 { left: 3%; top: 99%; width: calc(var(--cw) * .04); height: calc(var(--cw) * .04); }
.oracle__spark--7 { left: 103%; top: 30%; width: calc(var(--cw) * .04); height: calc(var(--cw) * .04); color: #B40069; }
.oracle__below { display: grid; justify-items: center; }
.oracle__slot { display: grid; position: relative; }
.oracle__slot > * { grid-area: 1 / 1; }
.oracle__prompt {
  align-self: center; justify-self: center; margin: 0; text-align: center; color: var(--ink);
  font-family: var(--serif); font-weight: 400; letter-spacing: .04em;
}
.oracle { --tilt: -3deg; }
.oracle__tilt { transform: rotate(var(--tilt)); }
.oracle__tilt { translate: 0 calc(4.84% - var(--lift, 0px)); }
.oracle__reel { position: relative; overflow: hidden; margin: calc(var(--rp) * -1); padding: var(--rp); pointer-events: none; }
.oracle__roll {
  position: absolute; top: calc(var(--rp) - 2px); bottom: calc(var(--rp) + 2px); right: 0; width: var(--rr);
  border-radius: calc(var(--rr) / 2); opacity: 0; transform-origin: 100% 50%;
  background:
    linear-gradient(to bottom, rgba(51, 16, 55, .14), rgba(51, 16, 55, 0) 6%, rgba(51, 16, 55, 0) 94%, rgba(51, 16, 55, .14)),
    linear-gradient(to right, #cdbf9f, #ece4d0 28%, #fbf8f0 46%, #ebe3cf 70%, #b8a888);
  box-shadow: 1px 0 2px rgba(51, 16, 55, .28);
}
.oracle__roll::before {
  content: ""; position: absolute; top: 2%; bottom: 2%; right: 100%; width: calc(var(--rr) * 1.3);
  background: linear-gradient(to right, rgba(51, 16, 55, 0), rgba(51, 16, 55, .1));
}
.oracle__note {
  position: relative; pointer-events: auto; display: grid; text-align: center; color: var(--ink);
  opacity: 0; visibility: hidden;
}
.oracle__text { display: grid; justify-items: center; align-content: center; translate: 0 -4.84%; }
.oracle__paper {
  position: absolute; z-index: -1; pointer-events: none;
  left: calc(-4 / 697 * 100%); top: calc(-4 / 165 * 100%); width: calc(706 / 697 * 100%); height: calc(174 / 165 * 100%);
}
.oracle__name { margin: 0; font-family: var(--oracle-text); font-weight: 400; line-height: 1.17; letter-spacing: .04em; color: var(--ink); }
.oracle__name, .oracle__link { font-feature-settings: "liga" 1; }
.oracle__name:focus { outline: none; }
.oracle__name:focus-visible { outline: 2px solid var(--magenta); outline-offset: 4px; }
.oracle__aff { margin: 0; font-family: "TAN Luna Negra", var(--serif); font-weight: 400; line-height: 1.17; letter-spacing: .04em; text-wrap: balance; }
.oracle__more { margin: 0; }
.oracle__more[hidden] { display: none; }
.oracle__link {
  font-family: var(--oracle-text); font-style: italic; letter-spacing: .04em; color: inherit;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .16em;
  transition: color var(--t-fast) var(--ease);
}
.oracle__link:hover { color: var(--magenta); }
.oracle__link { position: relative; }
.oracle__link::after { content: ""; position: absolute; inset: -9px -4px; }
.oracle__actions { display: flex; justify-content: center; flex-wrap: wrap; opacity: 0; visibility: hidden; }
.oracle__nojs { align-self: center; margin: 0; text-align: center; font-family: var(--serif); color: var(--ink); }
html:not(.js) .oracle__prompt { display: none; }
.oracle[data-state="drawing"] .oracle__prompt, .oracle[data-state="revealed"] .oracle__prompt { opacity: 0; visibility: hidden; }
.oracle[data-state="revealed"] .oracle__note, .oracle[data-state="revealed"] .oracle__actions { opacity: 1; visibility: visible; }
@media (prefers-reduced-motion: no-preference) {
  .oracle__float { animation: oracle-float 6.5s cubic-bezier(.45, 0, .55, 1) infinite alternate; }
  .oracle__glow { animation: oracle-breathe 5.2s cubic-bezier(.45, 0, .55, 1) infinite alternate; }
  .oracle__prompt { animation: oracle-hint 3.6s cubic-bezier(.45, 0, .55, 1) infinite alternate; }
  .oracle.is-busy .oracle__float, .oracle.is-busy .oracle__prompt { animation-play-state: paused; }
}
@keyframes oracle-float { to { transform: translateY(calc(var(--cw) * -.009)); } }
@keyframes oracle-breathe { from { opacity: .4; } to { opacity: .75; } }
@keyframes oracle-hint { from { opacity: .62; } to { opacity: 1; } }
@media (min-width: 761px) {
  .oracle {
    --s: min(var(--u), calc((100vh - 40px) / 1191));
    --s: min(var(--u), calc((100svh - 40px) / 1191));
    --cw: calc(539 * var(--s));
    width: calc(1440 * var(--s)); height: calc(1870 * var(--s)); margin-inline: auto;
  }
  .oracle__title { position: absolute; z-index: 2; left: calc(117 * var(--s)); top: calc(229 * var(--s)); width: calc(1209 * var(--s)); }
  .oracle__cardbox { position: absolute; left: calc(450.5 * var(--s)); top: calc(606 * var(--s)); }
  .oracle__below { position: absolute; z-index: 3; left: 0; right: 0; top: calc(1457 * var(--s)); }
  .oracle__slot { width: calc(697 * var(--s)); min-height: calc(165 * var(--s)); --rp: calc(8 * var(--s)); --rr: calc(20 * var(--s)); --lift: calc(15 * var(--s)); }
  .oracle__prompt { font-size: max(18px, calc(26 * var(--s) * var(--ts))); align-self: start; margin-top: calc(18 * var(--s)); }
  .oracle__note { min-height: calc(165 * var(--s)); }
  .oracle__text { padding: calc(36 * var(--s)) calc(40 * var(--s)) calc(26 * var(--s)); }
  .oracle__name { font-size: max(11.5px, calc(20 * var(--s))); }
  .oracle__aff { font-size: max(20px, calc(38 * var(--s))); margin-top: calc(19.7 * var(--s)); }
  .oracle__more { margin-top: calc(-9.7 * var(--s)); }
  .oracle__link { font-size: max(9.5px, calc(14 * var(--s))); }
  .oracle__actions { margin-top: calc(77.2 * var(--s)); gap: calc(22 * var(--s)); }
  .oracle__nojs { font-size: calc(22 * var(--s)); }
}
@media (max-width: 760px) {
  .oracle {
    --ch: clamp(250px, calc((100vh - 405px) / 1.1606), 470px);
    --ch: clamp(250px, calc((100svh - 405px) / 1.1606), 470px);
    --cw: min(calc(var(--ch) * 539 / 795), calc(100vw - 80px));
    --g: calc(var(--cw) * 36 / 539);
    display: flex; flex-direction: column; align-items: center;
    padding: 100px 16px calc(var(--cw) * .6);
    overflow-x: clip;
  }
  @supports not (overflow-x: clip) { .oracle { overflow-x: hidden; } }
  .oracle__title { position: relative; z-index: 2; width: min(calc(100vw - 2 * var(--gutter)), 440px); }
  .oracle__cardbox { margin-top: var(--g); z-index: 1; }
  .oracle__below { position: relative; z-index: 3; width: 100%; margin-top: calc(var(--g) + var(--cw) * .0365); grid-template-columns: max-content; justify-content: center; }
  .oracle__slot { width: 0; min-width: 100%; min-height: 104px; --rp: 4px; --rr: 12px; --lift: 6.9px; }
  .oracle__prompt { font-size: 19px; align-self: start; margin-top: 10px; }
  .oracle__note { min-height: 104px; }
  .oracle__text { padding: 20.7px 14px 15.3px; }
  .oracle__name { font-size: 11.5px; }
  .oracle__aff { font-size: 20px; margin-top: 10px; }
  .oracle__more { margin-top: -4px; }
  .oracle__link { font-size: 9.5px; }
  .oracle__actions { margin-top: calc(var(--g) + 20px); gap: 12px; }
  .oracle__nojs { font-size: 17px; }
}