.crystal-ball{width:100%;min-width:0;color:var(--fg);isolation:isolate;margin:0}.crystal-ball-stage{aspect-ratio:1;touch-action:pan-y;width:100%;max-width:560px;margin:auto;position:relative}.crystal-ball-stage canvas{pointer-events:none;width:100%;height:100%;position:absolute;inset:0}.crystal-ball-fallback{border:1px solid var(--copper);background:radial-gradient(at 30% 22%,#695142 0%,#32271f 34%,#171411 75%,#5b4130 100%);border-radius:50%;position:absolute;inset:9.5%;box-shadow:0 0 28px #a6684d22,inset -8px -10px 32px #0006}.crystal-ball-fallback:after{content:"";background:radial-gradient(circle at 30% 24%,#f5efe521,#0000 40%);border-radius:50%;position:absolute;inset:0}.crystal-ball-impulse{cursor:crosshair;touch-action:pan-y;background:0 0;border:0;border-radius:50%;width:80%;height:80%;position:absolute;inset:10%}.crystal-ball-impulse:disabled{cursor:default}.crystal-ball-impulse:focus-visible{outline:2px solid var(--accent);outline-offset:8px}.crystal-ball-label{font:650 9px/1.3 var(--font-body);letter-spacing:.12em;color:var(--muted);pointer-events:none;background:var(--bg);border:1px solid var(--border);border-radius:3px;align-items:center;gap:6px;padding:5px 7px;display:inline-flex;position:absolute}.crystal-ball-label i{background:var(--accent);border-radius:50%;width:4px;height:4px}.crystal-ball-label-top{top:1%;left:50%;transform:translate(-50%)}.crystal-ball-label-left,.crystal-ball-label-right{top:50%;transform:translateY(-50%)}.crystal-ball-label-left{left:0}.crystal-ball-label-right{right:0}.crystal-ball figcaption{justify-content:flex-end;align-items:center;gap:12px;padding:7px 2px;display:flex}.crystal-ball figcaption>span{color:var(--muted);align-items:flex-start;gap:6px;max-width:270px;font-size:10px;line-height:1.6;display:flex}.crystal-ball figcaption>span svg{color:var(--accent);flex-shrink:0;margin-top:2px}.crystal-ball figcaption>button{background:var(--surface);border:1px solid var(--border);min-width:44px;min-height:44px;color:var(--fg);font:600 10px/1.4 var(--font-body);cursor:pointer;border-radius:5px;justify-content:center;align-items:center;gap:6px;padding:8px 10px;display:flex}.crystal-ball figcaption>button:hover{border-color:var(--accent)}.crystal-ball figcaption>button:disabled{cursor:default;opacity:.6}@media (max-width:420px){.crystal-ball-label{letter-spacing:.06em;padding:4px;font-size:8px}.crystal-ball figcaption{gap:8px}.crystal-ball figcaption>span{font-size:9px}.crystal-ball figcaption>button{padding:8px}}@media (prefers-reduced-motion:reduce){.crystal-ball *{transition:none!important}}