@charset "UTF-8";

:root { color-scheme: dark; --ink: #eeeae1; --accent: #eac38b; font-family: "Segoe UI", Arial, sans-serif; }
* { box-sizing: border-box; }
body { margin: 0; background: #101110; color: var(--ink); }
main { overflow: clip; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 52px 24px 28px; gap: 44px; background: radial-gradient(ellipse at 50% 46%, #b98d3510, transparent 52%); }
button, input { font: inherit; }
.page-title { margin: 0; max-width: 520px; font-family: Georgia, "Times New Roman", serif; font-size: clamp(25px, 3vw, 38px); line-height: 1.2; font-weight: 400; text-align: center; text-wrap: balance; color: var(--accent); }
button, label { -webkit-tap-highlight-color: transparent; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.topics { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; border: 0; padding: 0; margin: 0; }
.topics label { cursor: pointer; position: relative; }
.topics input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.topics span { display: block; padding: 10px 15px; font-size: 12px; color: #96968c; border: 1px solid transparent; border-radius: 30px; transition: border-color .2s, background .2s, color .2s; }
.topics input:checked + span { color: var(--accent); border-color: #d4ad7840; background: #d4ad780b; }
.topics input:focus-visible + span, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; }
.topics label:hover span { color: var(--ink); }
.oracle { width: 100%; max-width: 600px; text-align: center; }
.ball-stage { --move-x: 0px; --move-y: 0px; --tilt: 0deg; --light-x: 0px; --light-y: 0px; --shadow-scale: 1; position: relative; display: grid; place-items: center; padding-bottom: 28px; isolation: isolate; }
.ball-motion { position: relative; z-index: 1; transform: translate3d(var(--move-x), var(--move-y), 0) rotate(var(--tilt)); will-change: transform; }
.ball-aura { position: absolute; width: min(85vw, 560px); aspect-ratio: 1; top: 50%; left: 50%; border-radius: 50%; background: radial-gradient(circle, #ddba6b26, #bd7d3314 42%, transparent 68%); opacity: .3; transform: translate(-50%, -53%) scale(.9); transition: opacity 1.5s ease, transform 2s ease; pointer-events: none; }
.thinking .ball-aura { opacity: 1; transform: translate(-50%, -53%) scale(1.22); }
.revealed .ball-aura { opacity: .6; }
.ball { position: relative; display: block; width: min(68vw, 430px); aspect-ratio: 1; border-radius: 50%; border: 1px solid #e6cda477; overflow: hidden; cursor: grab; padding: 0; touch-action: none; user-select: none; isolation: isolate; animation: float 7s ease-in-out infinite; background: radial-gradient(ellipse at 27% 19%, #d4bc962a 0, transparent 24%), radial-gradient(ellipse at 57% 68%, #a96c3138, transparent 53%), radial-gradient(ellipse at 47% 36%, #38332c 0%, #29271f 40%, #161914 68%, #302d21 87%, #938566 98%); box-shadow: inset 0 0 18px #dfc18c55, inset -15px -19px 34px #0009, inset 2px 3px 5px #ffefd980, 0 0 80px #d6a5680c, 0 30px 70px #0007; transition: border-color 1.5s, box-shadow 1.5s; }
.ball:active { cursor: grabbing; }
.ball-interior { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; clip-path: circle(50%); }
.ball::before { content: ""; position: absolute; z-index: 3; inset: 7px; border-radius: 50%; border-top: 1px solid #fff2; border-left: 1px solid #fff1; pointer-events: none; }
.ball::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: 50%; box-shadow: inset 0 -24px 40px #070c0ad0, inset 6px 0 20px #e9c89425; background: linear-gradient(130deg, #f7deb912, transparent 32%, transparent 75%, #dabd8638); pointer-events: none; }
.ball-haze { position: absolute; inset: -8%; border-radius: 50%; opacity: .55; filter: blur(22px); background: conic-gradient(from 30deg, transparent, #bb99524a, transparent 40%, #ac885a80 53%, transparent 70%, #ddd7a050, transparent); animation: drift 24s linear infinite; transition: opacity 1.4s; }
.ball-mist { position: absolute; inset: 4%; border-radius: 50%; background: radial-gradient(ellipse at 25% 60%, #c7baa53b, transparent 45%), radial-gradient(ellipse at 75% 25%, #a8b9ac24, transparent 46%); filter: blur(19px); animation: mist 11s ease-in-out infinite alternate; opacity: .6; transition: opacity 1.5s; }
.ball-energy { position: absolute; z-index: 2; inset: -15%; border-radius: 50%; background: conic-gradient(from 0deg, transparent 5%, #f2d59a66 17%, transparent 32%, #cbad6955 48%, transparent 65%, #fff0c044 79%, transparent 92%); filter: blur(17px); mix-blend-mode: screen; opacity: 0; animation: drift 3s linear infinite; transition: opacity 1.2s; pointer-events: none; }
.ball-dust { position: absolute; z-index: 3; inset: 8%; border-radius: 50%; background: radial-gradient(circle at 22% 34%, #fff2ceaa 0 1px, transparent 2px), radial-gradient(circle at 72% 62%, #fff2ce88 0 1px, transparent 2px), radial-gradient(circle at 42% 77%, #fff2ceaa 0 1px, transparent 2px), radial-gradient(circle at 79% 29%, #fff2ce88 0 1px, transparent 2px), radial-gradient(circle at 38% 18%, #fff2ce77 0 1px, transparent 2px); opacity: .25; animation: drift 32s linear infinite; transition: opacity 1.2s; pointer-events: none; }
.thinking .ball-haze, .thinking .ball-mist { opacity: 1; }
.thinking .ball-energy { opacity: .9; }
.thinking .ball-dust { opacity: .9; }
.manifesting .ball-energy { opacity: .18; }
.manifesting .ball-mist { opacity: .25; }
.ball-glint { position: absolute; z-index: 4; top: 10%; left: 19%; width: 34%; height: 14%; border-radius: 50%; background: linear-gradient(#f5e6ca90, #dfcfb410); transform: translate(var(--light-x), var(--light-y)) rotate(-35deg); filter: blur(8px); pointer-events: none; }
.ball-symbol { position: absolute; inset: 0; display: grid; place-items: center; color: #e5cfa577; font-family: Georgia, serif; font-size: 92px; text-shadow: 0 0 35px #d2ab5455; transition: opacity 1.2s, transform 2.5s, filter 1.2s; }
.apparition { position: absolute; width: 100%; height: 111%; left: 0; top: 0; object-fit: cover; object-position: center 22%; opacity: 0; transform: scale(1.16) translateY(14px); filter: sepia(.75) saturate(.55) contrast(1.12) blur(12px); mix-blend-mode: luminosity; mask-image: radial-gradient(ellipse 48% 48% at 50% 44%, #000 40%, transparent 100%); transition: opacity .8s ease, transform 1.2s ease, filter .8s ease; pointer-events: none; }
.manifesting .apparition.is-active { opacity: .88; transform: scale(1) translateY(0); filter: sepia(.75) saturate(.55) contrast(1.12) blur(0); transition-duration: 2.4s, 3.2s, 2.8s; }
.manifesting .ball-symbol { opacity: 0; transform: scale(.7) rotate(180deg); filter: blur(8px); }
.revealed .ball { border-color: #efcf9ba0; box-shadow: inset 0 0 18px #dfc18c55, inset -15px -19px 34px #0009, inset 2px 3px 5px #ffefd980, 0 0 90px #d6a56816, 0 30px 70px #0007; }
.thinking .ball { animation: awaken 1.8s ease-in-out both; border-color: #ffe4aba0; }
.dragging .ball { animation: none; cursor: grabbing; }
.thinking:not(.manifesting) .ball-symbol { transform: rotate(100deg) scale(.85); opacity: .4; filter: blur(2px); }
.ball-shadow { position: absolute; bottom: 0; width: 48%; height: 23px; border-radius: 50%; background: #000; filter: blur(14px); transform: translateX(var(--move-x)) scale(var(--shadow-scale)); opacity: .7; animation: shadow-breathe 7s ease-in-out infinite; pointer-events: none; }
.reading { display: grid; align-items: start; min-height: 125px; padding-top: 23px; }
.answer { font-family: Georgia, "Times New Roman", serif; font-size: clamp(23px, 3vw, 30px); line-height: 1.4; font-weight: 400; margin: 0 auto; max-width: 520px; text-wrap: balance; opacity: 0; transform: translateY(12px); filter: blur(7px); transition: opacity .65s ease, transform .65s ease, filter .65s ease; }
.revealed .answer { opacity: 1; transform: translateY(0); filter: blur(0); transition-duration: 1.4s; }
.motion-toggle { border: 0; padding: 10px; background: transparent; color: #99988e; font-size: 11px; cursor: pointer; text-decoration: underline; text-underline-offset: 4px; }
.motion-status { font-size: 11px; color: #99988e; margin: 4px 0; }
.motion-status:empty { display: none; }
@keyframes drift { to { transform: rotate(360deg); } }
@keyframes float { 0%, 100% { transform: translateY(0) rotate(0); } 25% { transform: translateY(-8px) rotate(.6deg); } 75% { transform: translateY(5px) rotate(-.6deg); } }
@keyframes mist { from { transform: translate(-3%, 4%) rotate(-20deg) scale(.95); } to { transform: translate(5%, -4%) rotate(35deg) scale(1.12); } }
@keyframes shadow-breathe { 0%, 100% { opacity: .7; } 25% { opacity: .45; } 75% { opacity: .85; } }
@keyframes awaken { 0%, 100% { transform: translate(0, 0) rotate(0); } 12% { transform: translate(-14px, -5px) rotate(-4deg); } 25% { transform: translate(16px, -10px) rotate(5deg); } 38% { transform: translate(-12px, -7px) rotate(-3deg); } 51% { transform: translate(9px, -12px) rotate(2deg); } 65% { transform: translate(-5px, -8px) rotate(-1deg); } 80% { transform: translate(2px, -4px) rotate(.5deg); } }
@media (max-width: 600px) {
  main { padding: 36px 20px 20px; gap: 36px; }
  .topics { gap: 2px; max-width: 360px; }
  .topics span { padding: 9px 10px; font-size: 11px; }
  .ball { width: min(78vw, 360px); }
  .answer { font-size: 25px; }
  .reading { min-height: 140px; padding-top: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}