.tm-magic-8-ball{--tool-m8-indigo: #6366F1;--tool-m8-violet: #8B5CF6;--tool-m8-sky: #38BDF8;--tool-m8-pink: #F472B6;--tool-m8-lilac: #C7D2FE;--tool-m8-gloss: #FFFFFF;--tool-m8-sphere-1: #3A3A4A;--tool-m8-sphere-2: #1C1C28;--tool-m8-sphere-3: #0A0A12;--tool-m8-sphere-4: #000004;--tool-m8-eight-1: #252535;--tool-m8-eight-2: #131320;--tool-m8-eight-3: #0A0A16;--tool-m8-tri-outer: #1E3A8A;--tool-m8-tri-inner: #1E40AF;--tool-m8-tri-glow: #2563EB;--tool-m8-tri-glint: #93C5FD;--tool-m8-shake-1: #1E40AF;--tool-m8-shake-2: #3730A3;--tool-m8-shake-3: #5B21B6;--tool-m8-shake-hover-1: #1E3A8A;--tool-m8-shake-hover-2: #312E81;--tool-m8-shake-hover-3: #4C1D95;container-type:inline-size;position:relative}.tm-magic-8-ball__kbd-hint{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--color-text-3);font-family:var(--font-mono);white-space:nowrap;margin-right:56px}.tm-magic-8-ball__kbd-hint kbd{font-family:var(--font-mono);font-size:11px;line-height:1;background:var(--color-bg);border:1px solid var(--color-border);color:var(--color-text-2);padding:3px 6px;border-radius:5px;min-width:18px;text-align:center}@media(max-width:680px){.tm-magic-8-ball__kbd-hint{display:none}}.tm-magic-8-ball__controls-pane{display:flex;flex-direction:column;gap:20px;height:100%}.tm-magic-8-ball__sound-row{display:flex;align-items:center;gap:10px}.tm-magic-8-ball__primary-pane{position:relative;display:flex;flex-direction:column;align-items:center;gap:20px;padding-bottom:8px}.tm-magic-8-ball__star-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;opacity:0;transition:opacity .3s}[data-theme=dark] .tm-magic-8-ball__star-canvas{opacity:.55}.tm-magic-8-ball__question-wrap{width:100%}.tm-magic-8-ball__question-label{display:block;font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--color-text-3);margin-bottom:8px}.tm-magic-8-ball__question-input{width:100%;padding:11px 16px;border:1px solid var(--color-border);border-radius:10px;font:inherit;font-size:14px;color:var(--color-text-1);background:var(--color-bg-1);transition:border-color .2s,background .2s;outline:none}.tm-magic-8-ball__question-input::placeholder{color:var(--color-text-3);opacity:.6}.tm-magic-8-ball__question-input:focus{border-color:var(--color-accent);outline:2px solid var(--color-accent-bg);outline-offset:-1px}[data-theme=dark] .tm-magic-8-ball__question-input{border-color:color-mix(in srgb,var(--tool-m8-indigo) 22%,transparent);color:var(--color-text-1);background:color-mix(in srgb,var(--color-text-1) 4%,transparent);backdrop-filter:blur(6px)}[data-theme=dark] .tm-magic-8-ball__question-input::placeholder{color:color-mix(in srgb,var(--color-text-3) 40%,transparent);opacity:1}[data-theme=dark] .tm-magic-8-ball__question-input:focus{border-color:color-mix(in srgb,var(--tool-m8-indigo) 60%,transparent);background:color-mix(in srgb,var(--color-text-1) 6%,transparent);outline:2px solid color-mix(in srgb,var(--tool-m8-indigo) 35%,transparent)}.tm-magic-8-ball__question-meta{display:flex;justify-content:flex-end;margin-top:5px;font-size:12px;color:var(--color-text-3)}.tm-magic-8-ball__question-meta--full{color:var(--color-danger-text);opacity:1}.tm-magic-8-ball__stage{display:flex;flex-direction:column;align-items:center;gap:0}@keyframes m8-halo-breath{0%,to{opacity:.45;transform:scale(1)}50%{opacity:.75;transform:scale(1.04)}}@keyframes m8-halo-rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes m8-halo-shake-pulse{0%,to{opacity:.45}40%{opacity:1;filter:blur(12px)}}.tm-magic-8-ball__halo{position:absolute;top:50%;left:50%;width:clamp(220px,125%,300px);height:clamp(220px,125%,300px);margin:calc(clamp(220px,125%,300px)/-2) 0 0 calc(clamp(220px,125%,300px)/-2);border-radius:50%;background:conic-gradient(from 0deg,transparent 0deg,color-mix(in srgb,var(--tool-m8-violet) 35%,transparent) 60deg,color-mix(in srgb,var(--tool-m8-sky) 45%,transparent) 120deg,transparent 180deg,color-mix(in srgb,var(--tool-m8-pink) 25%,transparent) 240deg,color-mix(in srgb,var(--tool-m8-sky) 30%,transparent) 300deg,transparent 360deg);filter:blur(18px);pointer-events:none;z-index:0;opacity:0;transition:opacity .3s}[data-theme=dark] .tm-magic-8-ball__halo{opacity:1;animation:m8-halo-rotate 12s linear infinite,m8-halo-breath 4s ease-in-out infinite}.tm-magic-8-ball__halo--shaking{animation:m8-halo-rotate 2s linear infinite,m8-halo-shake-pulse .72s ease-out!important}.tm-magic-8-ball__shadow{width:180px;height:24px;background:radial-gradient(ellipse,color-mix(in srgb,var(--tool-m8-sky) 18%,transparent) 0%,transparent 70%);margin-top:-4px;filter:blur(6px);transition:opacity .3s;flex-shrink:0}.tm-magic-8-ball__shadow--lift{opacity:.5}.tm-magic-8-ball__ball-wrap{position:relative;width:clamp(160px,60vw,240px);height:clamp(160px,60vw,240px);cursor:pointer;user-select:none;z-index:1;transition:transform .15s;container-type:size}.tm-magic-8-ball__ball-wrap:hover{transform:scale(1.025) translateY(-3px)}.tm-magic-8-ball__ball-wrap:active{transform:scale(.97)}@keyframes m8-shake{0%{transform:translate(0) rotate(0) scale(1)}8%{transform:translate(-8px,4px) rotate(-5deg) scale(1.01)}18%{transform:translate(8px,-4px) rotate(5deg) scale(1.02)}28%{transform:translate(-7px,6px) rotate(-4deg) scale(1.01)}38%{transform:translate(7px,-3px) rotate(4deg) scale(1.015)}48%{transform:translate(-5px,5px) rotate(-2.5deg) scale(1.01)}58%{transform:translate(5px,-4px) rotate(2.5deg) scale(1.005)}68%{transform:translate(-3px,3px) rotate(-1.5deg) scale(1)}78%{transform:translate(3px,-2px) rotate(1.5deg) scale(1)}88%{transform:translate(-1px,1px) rotate(-.5deg) scale(1)}to{transform:translate(0) rotate(0) scale(1)}}.tm-magic-8-ball__ball-wrap--shaking{animation:m8-shake .72s cubic-bezier(.36,.07,.19,.97)}.tm-magic-8-ball__sphere{width:100%;height:100%;border-radius:50%;background:radial-gradient(circle at 32% 28%,var(--tool-m8-sphere-1) 0%,var(--tool-m8-sphere-2) 28%,var(--tool-m8-sphere-3) 58%,var(--tool-m8-sphere-4) 100%);position:absolute;top:0;left:0;box-shadow:inset -12px -12px 32px #000000f2,inset 8px 8px 24px #ffffff0b,inset -2px -2px 6px #6366f114,0 0 0 1px #ffffff08,0 32px 64px #000c,0 0 60px #38bdf80f}.tm-magic-8-ball__rim{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:50%;background:radial-gradient(ellipse at 68% 88%,color-mix(in srgb,var(--tool-m8-sky) 12%,transparent) 0%,transparent 55%);pointer-events:none;z-index:2}.tm-magic-8-ball__eight{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:30%;height:30%;border-radius:50%;background:radial-gradient(circle at 38% 32%,var(--tool-m8-eight-1) 0%,var(--tool-m8-eight-2) 60%,var(--tool-m8-eight-3) 100%);display:flex;align-items:center;justify-content:center;box-shadow:0 3px 12px #000c,inset 0 1px #ffffff12,inset 0 -1px #0009,0 0 0 1px #ffffff0a;z-index:4;transition:opacity .3s}.tm-magic-8-ball__eight span{font-family:var(--font-mono);font-size:clamp(18px,4vw,32px);font-weight:500;color:var(--color-on-dark-strong);line-height:1;text-shadow:0 0 20px rgba(255,255,255,.25),0 1px 3px rgba(0,0,0,.9);letter-spacing:-.02em}.tm-magic-8-ball__eight--hidden{opacity:0;pointer-events:none}.tm-magic-8-ball__tri-wrap{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:58%;height:58%;display:flex;align-items:center;justify-content:center;z-index:5;opacity:0;transition:opacity .3s}.tm-magic-8-ball__tri-wrap--visible{opacity:1}.tm-magic-8-ball__tri-wrap:before{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--tool-m8-tri-glow) 30%,transparent) 30%,transparent 70%);filter:blur(8px)}.tm-magic-8-ball__tri{position:relative;width:0;height:0;border-left:40% solid transparent;border-right:40% solid transparent;border-bottom:69% solid var(--tool-m8-tri-outer);filter:drop-shadow(0 0 10px color-mix(in srgb,var(--tool-m8-tri-glow) 70%,transparent)) drop-shadow(0 0 24px color-mix(in srgb,var(--tool-m8-sky) 30%,transparent));z-index:1}.tm-magic-8-ball__tri:after{content:"";position:absolute;top:4px;left:calc(50% - 35.7%);width:0;height:0;border-left:35.7% solid transparent;border-right:35.7% solid transparent;border-bottom:61.4% solid var(--tool-m8-tri-inner)}.tm-magic-8-ball__tri:before{content:"";position:absolute;top:12px;left:35.7%;width:0;height:0;border-left:14.3% solid transparent;border-right:14.3% solid transparent;border-bottom:15.7% solid color-mix(in srgb,var(--tool-m8-tri-glint) 20%,transparent);z-index:2}.tm-magic-8-ball__tri-text{position:absolute;top:58%;left:50%;transform:translate(-50%,-50%);width:64%;text-align:center;font-family:var(--font-mono);font-size:clamp(11px,5.2cqi,16px);font-weight:600;letter-spacing:.02em;color:var(--color-on-dark-strong);line-height:1.4;z-index:6;text-shadow:0 0 8px rgba(147,197,253,.6),0 1px 2px rgba(0,0,0,.6);white-space:pre-wrap;transition:opacity .2s}.tm-magic-8-ball__gloss{position:absolute;top:6%;left:16%;width:28%;height:16%;border-radius:50%;background:radial-gradient(ellipse,color-mix(in srgb,var(--tool-m8-gloss) 22%,transparent) 0%,color-mix(in srgb,var(--tool-m8-gloss) 6%,transparent) 40%,transparent 70%);pointer-events:none;z-index:6;transform:rotate(-15deg)}.tm-magic-8-ball__gloss2{position:absolute;top:19%;left:12%;width:9%;height:4%;border-radius:50%;background:radial-gradient(ellipse,color-mix(in srgb,var(--tool-m8-gloss) 12%,transparent) 0%,transparent 70%);pointer-events:none;z-index:6;transform:rotate(-8deg)}.tm-magic-8-ball__controls{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center}.tm-magic-8-ball__shake-btn{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-sans);font-size:14px;font-weight:500;padding:0 22px;height:44px;border-radius:10px;cursor:pointer;border:none;transition:all .18s;white-space:nowrap;letter-spacing:.01em;background:linear-gradient(135deg,var(--tool-m8-shake-1) 0%,var(--tool-m8-shake-2) 50%,var(--tool-m8-shake-3) 100%);color:var(--color-on-dark-strong);box-shadow:0 4px 20px #6366f166,0 1px #ffffff1f inset}.tm-magic-8-ball__shake-btn:hover{background:linear-gradient(135deg,var(--tool-m8-shake-hover-1) 0%,var(--tool-m8-shake-hover-2) 50%,var(--tool-m8-shake-hover-3) 100%);box-shadow:0 6px 28px #6366f18c,0 1px #ffffff26 inset;transform:translateY(-1px)}.tm-magic-8-ball__shake-btn:active{transform:scale(.97) translateY(0);box-shadow:0 2px 10px #6366f14d}.tm-magic-8-ball__shake-btn:disabled{opacity:.4;cursor:not-allowed;transform:none;box-shadow:none}.tm-magic-8-ball__copy-btn{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-sans);font-size:14px;font-weight:500;padding:0 18px;height:44px;border-radius:10px;cursor:pointer;transition:all .18s;white-space:nowrap;background:var(--color-surface);color:var(--color-text-1);border:1px solid var(--color-border)}.tm-magic-8-ball__copy-btn:hover{border-color:var(--color-accent);color:var(--color-accent-text);transform:translateY(-1px)}.tm-magic-8-ball__copy-btn:disabled{opacity:.4;cursor:not-allowed;transform:none}[data-theme=dark] .tm-magic-8-ball__copy-btn{background:color-mix(in srgb,var(--color-text-1) 6%,transparent);color:color-mix(in srgb,var(--tool-m8-lilac) 85%,transparent);border-color:color-mix(in srgb,var(--tool-m8-indigo) 25%,transparent)}[data-theme=dark] .tm-magic-8-ball__copy-btn:hover{background:color-mix(in srgb,var(--tool-m8-indigo) 15%,transparent);border-color:color-mix(in srgb,var(--tool-m8-indigo) 50%,transparent);color:var(--tool-m8-lilac)}.tm-magic-8-ball__sound-btn{width:auto;height:44px;padding:0 14px;display:inline-flex;align-items:center;gap:7px;background:var(--color-surface);color:var(--color-text-3);border:1px solid var(--color-border);border-radius:10px;cursor:pointer;font-family:var(--font-sans);font-size:14px;font-weight:500;transition:all .18s;white-space:nowrap}.tm-magic-8-ball__sound-label{font-size:14px;font-weight:500;color:inherit;line-height:1}.tm-magic-8-ball__sound-btn:hover{border-color:var(--color-accent);color:var(--color-accent-text)}[data-theme=dark] .tm-magic-8-ball__sound-btn{background:color-mix(in srgb,var(--color-text-1) 5%,transparent);color:var(--color-text-3);border-color:color-mix(in srgb,var(--color-text-1) 10%,transparent)}[data-theme=dark] .tm-magic-8-ball__sound-btn:hover{background:color-mix(in srgb,var(--tool-m8-indigo) 15%,transparent);border-color:color-mix(in srgb,var(--tool-m8-indigo) 40%,transparent);color:var(--tool-m8-lilac)}.tm-magic-8-ball__answer-box{width:100%;background:var(--color-accent-bg);border:1px solid var(--color-accent-border);border-radius:12px;padding:14px 18px;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:54px;transition:opacity .2s}[data-theme=dark] .tm-magic-8-ball__answer-box{background:color-mix(in srgb,var(--color-text-1) 4%,transparent);border-color:color-mix(in srgb,var(--tool-m8-indigo) 25%,transparent);backdrop-filter:blur(8px);box-shadow:0 2px 16px #0000004d,inset 0 1px #ffffff0a}.tm-magic-8-ball__answer-text{font-size:14px;font-weight:500;color:var(--color-accent-text);flex:1}[data-theme=dark] .tm-magic-8-ball__answer-text{color:var(--color-text-1);text-shadow:0 0 20px rgba(165,180,252,.3)}.tm-magic-8-ball__answer-sentiment{font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:.08em;flex-shrink:0;padding:3px 8px;border-radius:6px}.tm-magic-8-ball__answer-sentiment--affirmative{background:var(--color-success-soft);color:var(--color-success-text);border:1px solid var(--color-success-border)}.tm-magic-8-ball__answer-sentiment--noncommittal{background:var(--color-warning-soft);color:var(--color-warning-text);border:1px solid var(--color-warning-border)}.tm-magic-8-ball__answer-sentiment--negative{background:var(--color-danger-soft);color:var(--color-danger-text);border:1px solid var(--color-danger-border)}.tm-magic-8-ball__trust{font-size:12px;color:var(--color-text-3);display:flex;align-items:center;gap:5px}.tm-magic-8-ball__trust svg{width:12px;height:12px;color:var(--color-accent-text);flex-shrink:0}[data-theme=dark] .tm-magic-8-ball__trust svg{color:color-mix(in srgb,var(--tool-m8-indigo) 70%,transparent)}.tm-magic-8-ball__history-wrap{width:100%;border-top:1px solid var(--color-border);padding:20px 24px}.tm-magic-8-ball__history-title{font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:.08em;color:var(--color-text-3);margin-bottom:12px}.tm-magic-8-ball__history-list{list-style:none;display:flex;flex-direction:column;gap:4px}@container (min-width: 560px){.tm-magic-8-ball__history-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}}@container (min-width: 900px){.tm-magic-8-ball__history-list{grid-template-columns:repeat(3,minmax(0,1fr))}}.tm-magic-8-ball__history-item{display:flex;align-items:center;gap:10px;padding:8px 12px;background:var(--color-bg-1);border:1px solid var(--color-border);border-radius:8px;font-size:14px;color:var(--color-text-1)}.tm-magic-8-ball__history-item:first-child{background:var(--color-accent-bg);border-color:var(--color-accent-border);color:var(--color-accent-text);font-weight:500}.tm-magic-8-ball__history-item--enter{animation:m8-history-enter .8s ease}@keyframes m8-history-enter{0%{background-color:var(--color-accent-bg)}to{background-color:transparent}}[data-theme=dark] .tm-magic-8-ball__history-wrap{border-top-color:color-mix(in srgb,var(--color-text-1) 6%,transparent)}[data-theme=dark] .tm-magic-8-ball__history-item{background:color-mix(in srgb,var(--color-text-1) 3%,transparent);border-color:color-mix(in srgb,var(--color-text-1) 6%,transparent);color:color-mix(in srgb,var(--tool-m8-lilac) 75%,transparent)}[data-theme=dark] .tm-magic-8-ball__history-item:first-child{background:color-mix(in srgb,var(--tool-m8-indigo) 10%,transparent);border-color:color-mix(in srgb,var(--tool-m8-indigo) 28%,transparent);color:var(--tool-m8-lilac)}.tm-magic-8-ball__history-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}.tm-magic-8-ball__history-dot--affirmative{background:var(--color-success)}.tm-magic-8-ball__history-dot--noncommittal{background:var(--color-warning)}.tm-magic-8-ball__history-dot--negative{background:var(--color-danger)}[data-theme=dark] .tm-magic-8-ball__history-dot--affirmative{box-shadow:0 0 6px color-mix(in srgb,var(--color-success) 50%,transparent)}[data-theme=dark] .tm-magic-8-ball__history-dot--noncommittal{box-shadow:0 0 6px color-mix(in srgb,var(--color-warning) 40%,transparent)}[data-theme=dark] .tm-magic-8-ball__history-dot--negative{box-shadow:0 0 6px color-mix(in srgb,var(--color-danger) 40%,transparent)}.tm-magic-8-ball__history-time{margin-left:auto;font-size:12px;color:var(--color-text-3)}.tm-magic-8-ball__toast{position:fixed;bottom:32px;left:50%;transform:translate(-50%) translateY(20px);background:var(--color-toast-bg);color:var(--color-toast-text);padding:10px 18px;border-radius:8px;font-size:14px;opacity:0;transition:opacity .2s,transform .2s;z-index:300;pointer-events:none}.tm-magic-8-ball__toast--show{opacity:1;transform:translate(-50%) translateY(0)}@media(prefers-reduced-motion:reduce){.tm-magic-8-ball__ball-wrap--shaking,.tm-magic-8-ball__halo--shaking{animation:none!important}.tm-magic-8-ball__answer-box,.tm-magic-8-ball__tri-wrap,.tm-magic-8-ball__eight{transition-duration:.01ms}}.tm-magic-8-ball__fs-stage{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 32px;text-align:center}.tm-magic-8-ball__fs-eyebrow{font-size:var(--fs-caption);font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--color-text-3);margin:0 0 20px}.tm-magic-8-ball__fs-hint{font-size:var(--fs-caption);color:var(--color-text-3);margin-top:16px;margin-bottom:0}.tm-magic-8-ball__fs-actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:20px}.tm-magic-8-ball__fs-answer{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:8px}.tw-app:fullscreen .tm-magic-8-ball__fs-stage .tm-magic-8-ball__ball-wrap,.tw-app:-webkit-full-screen .tm-magic-8-ball__fs-stage .tm-magic-8-ball__ball-wrap{width:clamp(200px,30vmin,320px);height:clamp(200px,30vmin,320px)}.tw-app:fullscreen .tm-magic-8-ball__fs-stage .tm-magic-8-ball__tri-text,.tw-app:-webkit-full-screen .tm-magic-8-ball__fs-stage .tm-magic-8-ball__tri-text{font-size:clamp(12px,5.2cqi,20px)}.tw-app:fullscreen .tm-magic-8-ball__fs-stage .tm-magic-8-ball__eight span,.tw-app:-webkit-full-screen .tm-magic-8-ball__fs-stage .tm-magic-8-ball__eight span{font-size:clamp(24px,6vmin,48px)}@media(max-width:640px){.tm-magic-8-ball__fs-stage{padding:32px 18px}.tm-magic-8-ball__fs-actions{flex-direction:column;align-items:stretch}.tm-magic-8-ball__fs-actions button{width:100%}}.tm-magic-8-ball__primary-pane:focus:not(:focus-visible){outline:none}