.qm8{--card:#121826;--text:#e5e7eb;--muted:#9ca3af;--line:#9ca3af;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial}
    .qm8 .card{background:linear-gradient(180deg,rgba(255,255,255,.04),transparent 18%),var(--card);color:var(--text);border:1px solid rgba(255,255,255,.06);border-radius:18px;padding:18px}
    .qm8 .row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
    .qm8 .btn{background:linear-gradient(180deg,#0ea5e9,#0284c7);border:none;color:#fff;padding:10px 14px;border-radius:12px;font-weight:700;cursor:pointer;box-shadow:0 6px 18px rgba(2,132,199,.35)}
    .qm8 .btn:active{transform:translateY(1px)}
    .qm8 input[type="text"]{width:70%;background:#0b1220;color:var(--text);border:1px solid var(--line);border-radius:10px;padding:10px 12px}
    .qm8 .muted{color:var(--muted);font-size:.92rem}
    .qm8 .grid{display:grid;grid-template-columns:1.1fr .9fr;gap:16px}
    @media (max-width:900px){.qm8 .grid{grid-template-columns:1fr}}
    /* 8-Ball */
    .qm8 .ball-area{display:grid;place-items:center;padding:8px}
    .qm8 .ball{width:260px;height:260px;border-radius:50%;position:relative;background:
      radial-gradient(circle at 35% 30%,rgba(255,255,255,.18),transparent 32%),
      radial-gradient(circle at 70% 60%,rgba(255,255,255,.08),transparent 40%),
      radial-gradient(circle at 50% 50%,#000,#0b0f14 60%,#000 100%);
      box-shadow:inset 0 -28px 70px rgba(0,0,0,.7),0 18px 38px rgba(0,0,0,.6);display:grid;place-items:center;transition:transform .25s ease}
    .qm8 .ball.shake{animation:m8shake .6s cubic-bezier(.36,.07,.19,.97) both}
    @keyframes m8shake{10%,90%{transform:translate3d(-1px,0,0)}20%,80%{transform:translate3d(2px,0,0)}30%,50%,70%{transform:translate3d(-4px,0,0)}40%,60%{transform:translate3d(4px,0,0)}}
    .qm8 .window{width:120px;height:120px;background:radial-gradient(circle at 50% 40%,#04263a,#02131d 60%);border-radius:50%;display:grid;place-items:center;border:2px solid #0ea5e9;position:relative;overflow:hidden;box-shadow:inset 0 0 26px rgba(8,47,73,.9)}
    .qm8 .window::before{content:"";position:absolute;inset:-40%;background:conic-gradient(from 0deg,transparent 0deg,rgba(56,189,248,.35) 90deg,transparent 180deg,rgba(56,189,248,.25) 270deg,transparent 360deg);mix-blend-mode:screen;opacity:0;pointer-events:none}
    .qm8 .triangle{width:0;height:0;border-left:44px solid transparent;border-right:44px solid transparent;border-bottom:74px solid #0ea5e9;position:relative;filter:drop-shadow(0 0 8px rgba(14,165,233,.5))}
    .qm8 .answer{position:absolute;top:22px;left:50%;transform:translateX(-50%);width:86px;text-align:center;font-weight:800;font-size:.8rem;color:#e0f2fe;text-shadow:0 0 6px rgba(14,165,233,.35)}
    .qm8 .seed{font-family:ui-monospace,Menlo,Consolas,monospace;background:#0b1220;padding:4px 6px;border-radius:8px;border:1px solid var(--line);display:inline-block}

    /* Quantum realm state */
    .qm8 .ball.quantum .window{animation:quantumPulse .6s ease-in-out}
    .qm8 .ball.quantum .window::before{opacity:1;animation:quantumSweep .6s ease-out forwards}
    .qm8 .ball.quantum .triangle{animation:triangleFlux .6s ease-in-out}
    .qm8 .answer.revealing{animation:answerGlitch .6s steps(3,end)}

    @keyframes quantumPulse{
      0%{transform:scale(1);box-shadow:inset 0 0 18px rgba(8,47,73,.8)}
      50%{transform:scale(1.04);box-shadow:inset 0 0 28px rgba(34,211,238,.75)}
      100%{transform:scale(1);box-shadow:inset 0 0 20px rgba(8,47,73,.9)}
    }
    @keyframes quantumSweep{
      0%{transform:rotate(0deg) scale(1.1);opacity:.35}
      60%{transform:rotate(220deg) scale(1.05);opacity:.65}
      100%{transform:rotate(360deg) scale(1.2);opacity:0}
    }
    @keyframes triangleFlux{
      0%{transform:translateY(0) scale(1);filter:drop-shadow(0 0 8px rgba(14,165,233,.5))}
      50%{transform:translateY(-3px) scale(1.05);filter:drop-shadow(0 0 14px rgba(56,189,248,.9))}
      100%{transform:translateY(0) scale(1);filter:drop-shadow(0 0 8px rgba(14,165,233,.5))}
    }
    @keyframes answerGlitch{
      0%{letter-spacing:0;transform:translateX(-50%)}
      25%{letter-spacing:.04em;transform:translateX(-52%)}
      50%{letter-spacing:0;transform:translateX(-49%)}
      75%{letter-spacing:.06em;transform:translateX(-51%)}
      100%{letter-spacing:0;transform:translateX(-50%)}
    }