@font-face{font-family:DM Sans;font-style:normal;font-weight:400 700;font-display:swap;src:url(/magic-8-ball/fonts/dm-sans-latin.woff2) format("woff2")}@font-face{font-family:"Source Serif 4";font-style:italic;font-weight:400;font-display:swap;src:url(/magic-8-ball/fonts/source-serif-4-italic-latin.woff2) format("woff2")}:root{font-family:DM Sans,sans-serif;color:#eeede9;background:#101113;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;color-scheme:dark}*{box-sizing:border-box}body{margin:0;min-width:320px}button,textarea,a{-webkit-tap-highlight-color:transparent}button,textarea{font:inherit}button,a{touch-action:manipulation}button{cursor:pointer}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible{outline:2px solid #baa3ff;outline-offset:5px}button:disabled{cursor:wait}.app-shell{min-height:100svh;display:flex;flex-direction:column;padding:0 4.25vw;position:relative;isolation:isolate;overflow:hidden}.app-shell:before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 35% 45% at 50% 44%,#302b492c,transparent 90%),radial-gradient(ellipse 65% 65% at 50% -45%,#a69bb725,transparent)}main{flex:1;display:flex;align-items:center;flex-direction:column;justify-content:center;padding:32px 0 36px}.intro{text-align:center;z-index:2}.eyebrow{font-size:9px;letter-spacing:.21em;font-weight:500;color:#919099;margin:0 0 14px}h1{font-size:clamp(38px,4.5vw,59px);font-weight:450;line-height:1.05;letter-spacing:-.055em;margin:0}h1 em{font-family:"Source Serif 4",Georgia,serif;font-size:1.14em;font-weight:400;letter-spacing:-.02em;color:#c5b3ea}.stage{position:relative;width:min(740px,100%);height:510px;display:grid;place-items:center;perspective:1000px;margin:12px 0 8px}.ball-wrap{width:440px;height:440px;position:relative;z-index:2;perspective:900px;margin-top:-17px}.ball{--tilt-x:0deg;--tilt-y:0deg;width:100%;height:100%;position:relative;border-radius:50%;transform:rotateX(var(--tilt-x)) rotateY(var(--tilt-y));transition:transform .2s ease-out;background:radial-gradient(ellipse at 31% 20%,#62646b,#36383f 12%,#191b21 30%,#0a0b0f 56%,#050508 72%,#14111f 90%,#333041);box-shadow:inset 0 1px 2px #e4defb6b,inset 5px 3px 9px #a9aabc22,inset -4px -6px 12px #79718f3d,inset -9px 0 11px #161021,0 13px 25px #0009,0 35px 50px #0005;isolation:isolate}.ball:after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;background:radial-gradient(ellipse at 74% 88%,#8171bf26,transparent 36%);box-shadow:inset 0 -1px 2px #b9a2e76b}.reflection{position:absolute;pointer-events:none;border-radius:50%}.reflection-soft{width:56%;height:29%;left:10%;top:5%;transform:rotate(-32deg);background:radial-gradient(ellipse at center,#dee0e92d,transparent 67%);filter:blur(5px)}.reflection-strip{width:33%;height:12%;left:18%;top:10%;transform:rotate(-30deg);background:linear-gradient(175deg,#f8f7ffcf 0%,#dde0ff40 14%,#c7cdf317 39%,transparent 65%);filter:blur(3px);opacity:.84}.reflection-edge{width:88%;height:91%;left:5%;top:3%;transform:rotate(30deg);border-left:1px solid #aeb1c347;border-top:1px solid #e2e0fb29;filter:blur(.5px)}.ball-seam{position:absolute;inset:2%;border-radius:50%;border-bottom:1px solid #9b91b618;transform:rotate(34deg)}.window-rim{position:absolute;width:64%;height:64%;left:18%;top:25%;padding:8px;border-radius:50%;background:linear-gradient(140deg,#141419 8%,#060608 39%,#3e3a495c 78%,#201d29);box-shadow:0 -2px 3px #030304,0 1px 1px #b5a4d526,inset 0 2px 6px #010102,1px 3px 5px #06050a}.window-glass{position:relative;width:100%;height:100%;overflow:hidden;border-radius:50%;background:radial-gradient(ellipse at 50% 60%,#152780,#060a2d 69%,#010312);box-shadow:inset 3px 7px 12px #000b,0 0 1px 1px #443c694f}.eight-face{position:absolute;inset:0;display:grid;place-items:center;border-radius:50%;background:radial-gradient(ellipse at 36% 25%,#f3f0e9,#d9d9d4 62%,#9c9ca9);box-shadow:inset 2px 4px 9px #0009,inset -1px -2px 3px #ffffff26}.eight-face span{color:#101116;font-size:178px;line-height:1;font-weight:650;transform:rotate(-9deg) translateY(1px);letter-spacing:-.06em;margin-left:-5px;text-shadow:0 1px 1px #fff7}.answer-face{position:absolute;inset:0;display:none;filter:drop-shadow(0 0 11px #4056ffaa)}.answer-die{display:block;width:100%;height:100%;overflow:visible}.ball-answer{font-family:DM Sans,sans-serif;font-weight:600;fill:#f2f5ff;letter-spacing:0;filter:drop-shadow(0 0 2px #97b6ff66)}.glass-shine{pointer-events:none;position:absolute;inset:0;border-radius:50%;background:linear-gradient(155deg,#ffffff19 0%,transparent 30%,transparent 60%,#b5b0ff0a 83%,#d3d0ff13 100%);box-shadow:inset 0 1px 1px #afa1e34d}.ball-engraving{position:absolute;bottom:6.3%;left:25%;right:25%;text-align:center;font-size:5px;letter-spacing:.24em;color:#9b95ad47;transform:rotate(-1deg)}.ball[data-state=answered] .eight-face,.ball[data-state=thinking] .eight-face{display:none}.ball[data-state=answered] .answer-face,.ball[data-state=thinking] .answer-face{display:block}.ball[data-state=thinking] .answer-face{animation:consult .85s ease-in-out infinite alternate}.ball-shadow{position:absolute;width:320px;height:30px;border-radius:50%;background:#000;filter:blur(13px);bottom:24px;opacity:.7}.orbit{position:absolute;border:1px solid #a89db210;border-radius:50%;width:700px;height:180px;top:260px;transform:rotate(-14deg);pointer-events:none}.orbit-two{width:650px;height:180px;transform:rotate(17deg);border-color:#a89db209}.stage-star{position:absolute;color:#aca2c054;font-size:18px;font-weight:400;line-height:1}.star-one{left:9%;top:47%}.star-two{right:12%;top:27%;font-size:13px;color:#aca2c030}.ask-area{width:min(600px,100%);position:relative;z-index:3}.input-shell{padding:7px;display:flex;align-items:flex-end;border-radius:16px;border:1px solid #ffffff1e;background:linear-gradient(120deg,#ffffff06,#ffffff03);box-shadow:0 3px 24px #0002;transition:border-color .18s,box-shadow .18s}.input-shell:focus-within{border-color:#bbaaed80;box-shadow:0 0 0 3px #b9a3ed0a}textarea{display:block;min-width:0;flex:1;background:none;border:0;color:#eeedf4;outline:none;font-size:14px;line-height:1.5;padding:12px 15px;height:46px;min-height:46px;max-height:240px;resize:none;overflow-y:hidden;overflow-wrap:anywhere;scrollbar-width:thin;scrollbar-color:#837294 transparent}textarea::placeholder{color:#87858e}.ask-button{flex-shrink:0;height:46px;min-width:91px;display:flex;justify-content:center;align-items:center;gap:13px;background:#cbb6f3;color:#251c39;border:1px solid #e9dfff42;border-radius:10px;font-size:13px;font-weight:600;transition:background .15s,transform .15s;box-shadow:inset 0 1px #ffffff26}.ask-button:hover{background:#dcc7ff}.ask-button:active{transform:scale(.97)}.ask-button:disabled{background:#9f8fba;color:#251c39}.ask-button:disabled svg{display:none}.input-details{display:flex;justify-content:space-between;gap:12px;padding:8px 3px 0;color:#94919f;font-size:10px;font-variant-numeric:tabular-nums}.input-details[hidden]{display:none}.status-line{min-height:43px;padding:13px 0 10px;text-align:center;font-size:11px;line-height:1.6;letter-spacing:.01em;color:#94919f;display:flex;align-items:center;justify-content:center;gap:4px;flex-wrap:wrap}.status-line.is-error{color:#e8acba}.timing{font-variant-numeric:tabular-nums;color:#c7b5ed}.answer-dot{background:#bda7ef;width:4px;height:4px;border-radius:50%;margin-right:3px}.suggestions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}.suggestions>span{grid-column:1/-1;text-align:center;font-size:8px;letter-spacing:.14em;color:#787582;margin-bottom:5px}.suggestions button{font-size:11px;line-height:1.5;padding:11px 14px;border:1px solid #ffffff10;border-radius:9px;color:#aaa4b6;background:#ffffff02;text-align:left;transition:border-color .15s,color .15s,background .15s}.suggestions button:hover{border-color:#b5a0de66;color:#dfd0f4;background:#b5a0de07}.suggestions button:disabled{opacity:.5}.footer{min-height:66px;display:flex;align-items:center;justify-content:space-between;gap:15px;border-top:1px solid #ffffff0c;color:#696671;font-size:8px;letter-spacing:.12em}.footer>div{display:flex;align-items:center;gap:24px;font-size:10px;letter-spacing:0}.footer a{color:#96909e}.footer a:hover{color:#d5c1f2}.footer a span{margin-left:4px}.just-fun{font-family:"Source Serif 4",Georgia,serif;font-style:italic;font-size:14px;color:#827b8d;letter-spacing:.01em}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.noscript{text-align:center;padding:20px}@keyframes consult{0%{transform:translateY(4px) rotate(-4deg);opacity:.45}to{transform:translateY(-3px) rotate(4deg);opacity:.9}}@media(min-height:1000px)and (min-width:650px){.stage{height:540px}.ball-wrap{width:470px;height:470px}.eight-face span{font-size:190px}.orbit{top:275px}}@media(max-width:600px){.app-shell{padding:0 20px}main{padding:28px 0 26px;justify-content:center}.eyebrow{font-size:8px;letter-spacing:.14em;margin-bottom:13px}h1{font-size:clamp(33px,9vw,48px);white-space:nowrap}.stage{height:370px;margin:13px 0 3px}.ball-wrap{width:min(310px,87vw);height:auto;aspect-ratio:1;margin-top:-15px}.eight-face span{font-size:126px}.window-rim{padding:6px}.orbit{width:450px;height:130px;top:190px}.orbit-two{width:420px}.star-one{left:0;top:40%}.star-two{right:0;top:25%}.ball-shadow{bottom:24px;width:225px;height:23px}.input-shell{border-radius:14px;padding:6px}textarea{padding-left:11px;font-size:16px}.ask-button{min-width:79px;gap:9px}.suggestions{gap:7px;margin-top:12px}.suggestions button{font-size:10px;padding:10px;line-height:1.55}.suggestions>span{font-size:7px;margin-bottom:4px}.status-line{font-size:10px}.footer{padding:17px 0;min-height:63px;font-size:6.5px;letter-spacing:.1em}.footer>div{gap:12px;font-size:9px}.just-fun{display:none}}@media(max-height:740px)and (min-width:601px){main{padding:26px 0}.stage{height:440px;margin:8px 0 0}.ball-wrap{width:380px;height:380px}.eight-face span{font-size:152px}.ball-shadow{bottom:20px}.orbit{top:220px;width:630px}.orbit-two{width:590px}.footer{min-height:52px}h1{font-size:48px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.ball{transform:none!important}}