.orb-tool{--kind:var(--glow)}.orb-tool[data-kind=yes]{--kind:var(--color-yes)}.orb-tool[data-kind=no]{--kind:var(--color-no)}.orb-tool[data-kind=maybe]{--kind:var(--color-maybe)}.orb-stage{--s:min(70vw, 300px);--pad:1.25rem;justify-items:center;padding:1.25rem 0 .75rem;display:grid;position:relative}@media (width>=640px){.orb-stage:not(.orb-stage--compact){--s:340px;--pad:1.5rem;padding-top:1.5rem}}.orb-stage--compact{--s:min(66vw, 240px);--pad:.75rem;padding-top:.75rem}@media (width>=900px){.orb-stage:not(.orb-stage--compact){--s:400px}}.orb-caustic{left:50%;top:calc(var(--pad) + var(--s) * .82);width:calc(var(--s) * 1.25);max-width:100%;height:calc(var(--s) * .34);pointer-events:none;background:radial-gradient(closest-side, color-mix(in oklab, var(--kind) 55%, transparent), color-mix(in oklab, var(--kind) 14%, transparent) 55%, transparent);filter:blur(4px);border-radius:50%;animation:6s ease-in-out infinite caustic;position:absolute;transform:translate(-50%)}.orb-caustic:after{content:"";filter:blur(6px);background:#000000b3;border-radius:50%;height:22%;position:absolute;top:22%;left:26%;right:26%}.orb{width:var(--s);aspect-ratio:1;cursor:grab;-webkit-tap-highlight-color:transparent;touch-action:pan-y;-webkit-user-select:none;user-select:none;background:0 0;border:0;border-radius:50%;padding:0;animation:6s ease-in-out infinite orb-float;position:relative}.orb.is-dragging{cursor:grabbing;animation-play-state:paused}.orb:focus-visible{outline:3px solid var(--glow);outline-offset:10px}.orb-body{will-change:transform;border-radius:50%;position:absolute;inset:0}.orb-glass{isolation:isolate;clip-path:circle(50%);background:radial-gradient(circle at 50% 8%, color-mix(in oklab, var(--glow) 12%, var(--abyss)) 0, var(--abyss) 60%);border-radius:50%;position:absolute;inset:0;overflow:hidden}.orb-liquid{transform:rotate(var(--tilt,0deg));position:absolute;inset:0}.orb-liquid i{background:var(--liq);width:220%;height:220%;box-shadow:inset 0 0 0 2px color-mix(in oklab, var(--glow) 70%, white), inset 0 0 22px 8px color-mix(in oklab, var(--glow) 45%, transparent);border-radius:43%;animation:12s linear infinite wave;position:absolute;top:22%;left:-60%}.orb-liquid i:first-child{opacity:.45;background:color-mix(in oklab, var(--liq) 60%, var(--glow));box-shadow:none;border-radius:40%;animation-duration:17s;animation-direction:reverse;top:19%}.orb-depth{pointer-events:none;background:linear-gradient(180deg, transparent 28%, color-mix(in oklab, var(--deep) 55%, transparent) 62%, color-mix(in oklab, var(--abyss) 85%, transparent) 100%);position:absolute;inset:0}.orb-tool[data-mood=zodiac] .orb-liquid:after{content:"";opacity:.9;background-image:radial-gradient(1.5px 1.5px at 22% 30%,#ffe2a0,#0000),radial-gradient(1px 1px at 70% 22%,#fff,#0000),radial-gradient(1.5px 1.5px at 80% 54%,#ffe2a0,#0000),radial-gradient(1px 1px at 35% 68%,#fff,#0000),radial-gradient(1px 1px at 55% 40%,#ffe2a0,#0000),radial-gradient(1.5px 1.5px at 15%,#fff,#0000),radial-gradient(1px 1px at 62% 75%,#ffe2a0,#0000),radial-gradient(1px 1px at 45% 12%,#fff,#0000);position:absolute;inset:30% 0 0}.orb-ink{opacity:calc(.18 + var(--agit,0) * .8);mix-blend-mode:screen;background:conic-gradient(from 0deg, transparent, color-mix(in oklab, var(--glow) 55%, transparent), transparent 28%, #00000080, transparent 58%, color-mix(in oklab, var(--glow) 40%, transparent), transparent);filter:blur(16px);transition:opacity .3s;animation:14s linear infinite ink-swirl;position:absolute;inset:-25%}.orb-glass:after{content:"";pointer-events:none;background:radial-gradient(circle at 50% 55%,#0000 52%,#00000073 100%);border-radius:50%;position:absolute;inset:0}.orb-well{opacity:.35;background:radial-gradient(ellipse 42% 30% at 50% 58%, color-mix(in oklab, var(--abyss) 80%, transparent) 0, color-mix(in oklab, var(--abyss) 45%, transparent) 55%, transparent 100%);transition:opacity .7s;position:absolute;inset:0}.orb-tool.is-revealed .orb-well{opacity:1}.orb-bubbles i{aspect-ratio:1;opacity:0;background:radial-gradient(circle at 35% 30%,#fffffff2,#ffffff40 45%,#ffffff0d 70%);border-radius:50%;width:5%;position:absolute;bottom:4%;box-shadow:0 0 0 1px #ffffff40}.orb-bubbles i:first-child{left:22%}.orb-bubbles i:nth-child(2){width:3.5%;left:38%}.orb-bubbles i:nth-child(3){left:55%}.orb-bubbles i:nth-child(4){width:3%;left:70%}.orb-bubbles i:nth-child(5){width:2.5%;left:30%}.orb-bubbles i:nth-child(6){width:4.5%;left:62%}.orb-bubbles i:nth-child(7){width:2.5%;left:46%}.orb-bubbles i:nth-child(8){width:2%;left:78%}.orb-ripple{aspect-ratio:1;opacity:0;border:2px solid var(--kind);width:30%;box-shadow:0 0 18px var(--kind), inset 0 0 12px var(--kind);border-radius:50%;position:absolute;top:58%;left:50%;translate:-50% -50%}.orb-hint{text-align:center;font-family:var(--font-display);font-weight:600;font-size:max(.7rem, calc(var(--s) * .04));letter-spacing:.32em;text-transform:uppercase;color:#fff;opacity:.9;text-shadow:0 1px 8px color-mix(in oklab, var(--abyss) 80%, transparent);transition:opacity .3s;position:absolute;top:56%;left:0;right:0}.hint-touch{display:none}@media (pointer:coarse){.hint-touch{display:inline}.hint-fine{display:none}}.orb-shine{pointer-events:none;background:radial-gradient(ellipse 26% 15% at var(--hx,33%) var(--hy,19%), #ffffffe6, #fff0 72%), radial-gradient(ellipse 9% 5% at 72% 26%, #ffffff80, transparent 80%), radial-gradient(ellipse 55% 20% at 50% 94%, color-mix(in oklab, var(--kind) 50%, transparent), transparent 72%);box-shadow:inset 0 0 0 1.5px #ffffff52, inset 0 0 0 4px #ffffff0d, inset 8px 10px 22px #ffffff1f, inset -14px -20px 40px #00000080, 0 0 60px -10px color-mix(in oklab, var(--glow) 45%, transparent);border-radius:50%;position:absolute;inset:0}.orb-shine:after{content:"";border:2px solid #0000;border-left-color:#ffffff38;border-radius:50%;position:absolute;inset:5%;transform:rotate(28deg)}.orb-answer{left:50%;top:calc(var(--pad) + var(--s) * .58);width:calc(var(--s) * .62);pointer-events:none;text-align:center;font-family:var(--font-display);text-transform:uppercase;font-weight:700;font-size:calc(var(--s) * .058);letter-spacing:.02em;color:color-mix(in oklab, var(--kind) 22%, white);text-shadow:0 0 16px var(--kind), 0 0 3px #ffffffe6;opacity:0;margin:0;line-height:1.18;position:absolute;transform:translate(-50%,-50%)}.orb-answer.is-long{font-size:calc(var(--s) * .047)}.orb-tool.is-revealed .orb-answer{animation:1.4s cubic-bezier(.2,.8,.2,1) forwards surface}.orb-tool.is-revealed .orb-ripple{animation:1.3s ease-out .2s ripple}.orb-tool.is-revealed .orb-hint,.orb-tool.is-shaking .orb-hint,.orb-tool.is-agitated .orb-hint{opacity:0}.orb-tool.is-shaking .orb{animation:.9s cubic-bezier(.36,.07,.19,.97) both orb-shake}.orb-tool.is-shaking .orb-liquid{animation:.95s cubic-bezier(.3,.6,.3,1) slosh}.orb-tool.is-shaking .orb-ink{opacity:1;animation-duration:1.2s}.orb-tool.is-shaking .orb-bubbles i,.orb-tool.is-agitated .orb-bubbles i{animation:1s ease-in infinite bubble}.orb-tool .orb-bubbles i:nth-child(2n){animation-delay:.15s}.orb-tool .orb-bubbles i:nth-child(3n){animation-delay:.32s}.orb-tool .orb-bubbles i:nth-child(5n){animation-delay:.48s}.orb-input{width:100%;min-height:3.25rem;color:var(--color-fg);background:color-mix(in oklab, var(--abyss) 70%, transparent);border:1.5px solid color-mix(in oklab, var(--glow) 35%, transparent);border-radius:999px;flex:1;padding:0 1.4rem;font-size:1.075rem;transition:border-color .15s,box-shadow .15s;box-shadow:inset 0 2px 10px #00000059}.orb-input::placeholder{color:var(--color-muted);opacity:.85}.orb-input:focus{border-color:var(--glow);box-shadow:inset 0 2px 10px #00000059, 0 0 0 4px color-mix(in oklab, var(--glow) 25%, transparent);outline:none}.try-q{min-height:40px;color:var(--color-link);cursor:pointer;background:color-mix(in oklab, var(--glow) 8%, transparent);border:1px dashed color-mix(in oklab, var(--glow) 35%, transparent);border-radius:999px;padding:0 .75rem;transition:background-color .15s,color .15s}.try-q:hover{color:var(--color-fg);background:color-mix(in oklab, var(--glow) 18%, transparent)}.sound-toggle{cursor:pointer;min-height:44px;color:var(--color-muted);background:0 0;border:1.5px solid #0000;border-radius:999px;align-items:center;gap:.4rem;padding:0 .9rem;font-size:.95rem;font-weight:600;transition:color .15s,border-color .15s;display:inline-flex}.sound-toggle:hover{color:var(--color-fg);border-color:#ffffff26}.sound-toggle .sw-on{display:none}.sound-toggle[aria-pressed=true]{color:var(--color-fg);border-color:color-mix(in oklab, var(--glow) 45%, transparent)}.sound-toggle[aria-pressed=true] .sw-on{display:inline}.sound-toggle[aria-pressed=true] .sw-off{display:none}@keyframes orb-float{0%,to{transform:translateY(0)}50%{transform:translateY(-9px)}}@keyframes caustic{0%,to{opacity:1;transform:translate(-50%)scale(1)}50%{opacity:.8;transform:translate(-50%)scale(.9)}}@keyframes wave{to{transform:rotate(360deg)}}@keyframes ink-swirl{to{transform:rotate(360deg)}}@keyframes slosh{0%{transform:rotate(0)}18%{transform:rotate(-28deg)}38%{transform:rotate(22deg)}58%{transform:rotate(-13deg)}78%{transform:rotate(6deg)}to{transform:rotate(0)}}@keyframes orb-shake{0%{transform:translate(0)rotate(0)}12%{transform:translate(-14px,-6px)rotate(-9deg)}26%{transform:translate(16px,4px)rotate(8deg)}40%{transform:translate(-12px,8px)rotate(-6deg)}54%{transform:translate(10px,-6px)rotate(5deg)}68%{transform:translate(-6px,3px)rotate(-3deg)}82%{transform:translate(3px,-2px)rotate(1deg)}to{transform:translate(0)rotate(0)}}@keyframes bubble{0%{opacity:0;transform:translateY(0)scale(.5)}15%{opacity:.9}to{opacity:0;transform:translateY(-1500%)scale(1.1)}}@keyframes ripple{0%{opacity:.9;transform:scale(.2)}to{opacity:0;transform:scale(2.6)}}@keyframes surface{0%{opacity:0;filter:blur(10px);letter-spacing:.3em;transform:translate(-50%)scale(.75)skew(-10deg)}45%{opacity:1;filter:blur(2px);transform:translate(-50%,-58%)scale(1.05)skew(4deg)}70%{letter-spacing:.03em;transform:translate(-50%,-47%)scale(.99)skew(-1.5deg)}to{opacity:1;filter:blur();letter-spacing:.02em;transform:translate(-50%,-50%)scale(1)skew(0)}}
