.zeus-explainer{background:#f5f3ff;color:#362f4f;padding-block:96px}
.zx-heading{display:flex;align-items:end;justify-content:space-between;gap:32px;margin-bottom:40px}
.zx-heading h2{font-size:clamp(42px,5.2vw,72px);letter-spacing:-.04em;line-height:1;margin:0}
.zx-heading>p{font-size:17px;line-height:1.5;max-width:28ch;margin:0}
.zx-tabs{display:flex;gap:8px;margin-bottom:42px;flex-wrap:wrap}
.zx-tabs button{font:inherit;font-size:15px;font-weight:500;min-height:48px;padding:12px 24px;border:0;border-radius:100px;color:#362f4f;background:#e8e3f4;cursor:pointer}
.zx-tabs [aria-selected=true]{background:#362f4f;color:#f5f3ff}
.zx-tabs button:hover{background:#d9d1ea}.zx-tabs [aria-selected=true]:hover{background:#493f65}
.zx-lesson{display:grid;grid-template-columns:1fr 1.25fr;gap:6vw;align-items:center}
.zx-copy h3{font-size:clamp(36px,4vw,56px);line-height:1.02;letter-spacing:-.04em;margin:0 0 20px;font-weight:700}
.zx-intro{font-size:18px;line-height:1.55;max-width:36ch;margin:0 0 28px}
.zx-steps{display:grid;gap:6px}
.zx-steps button{font:inherit;color:inherit;background:transparent;border:0;text-align:left;cursor:pointer;padding:13px 16px;border-radius:12px;display:grid;grid-template-columns:68px 1fr;gap:16px;min-height:64px;align-items:baseline}
.zx-steps button[aria-pressed=true]{background:#e8e3f4}
.zx-steps button>span{font-size:16px;font-weight:700}.zx-steps button>p{font-size:15px;line-height:1.5;margin:0}
.zx-demo{display:inline-flex;align-items:center;gap:24px;min-height:48px;margin-top:24px;font-size:16px;font-weight:700;color:inherit;text-decoration:none}.zx-demo svg{width:22px;height:22px}
.zx-visual{background:#201b30;border-radius:16px;padding:32px;margin:0;color:#f5f3ff;overflow:hidden}
.zx-board{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:6px;aspect-ratio:1;max-width:390px;margin:0 auto 30px}
.zx-cell{position:relative;display:grid;place-items:center;background:#362f4f;border-radius:8px;overflow:hidden}
.zx-symbol{width:80%;height:80%;overflow:hidden}
.zx-cell>.zx-symbol{transition:opacity .3s}
.zx-wild-reel{position:absolute;left:calc(40% + 1px);top:40%;width:calc(20% - 4px);height:20%;background:#66543c;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-direction:column;overflow:hidden;transition:top .6s cubic-bezier(.16,1,.3,1),height .6s cubic-bezier(.16,1,.3,1)}
.zx-wild-reel>.zx-symbol{flex-shrink:0;width:98%;height:auto;aspect-ratio:1}
.zx-wild-reel>span{font-size:18px;font-weight:500;margin-top:12px;display:none}
.zx-visual[data-feature=wild]:not([data-phase="0"]) .zx-wild-reel{top:0;height:100%;background:#846a42}
.zx-visual[data-feature=wild]:not([data-phase="0"]) .zx-wild-reel>span{display:block}
.zx-feature-result{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);white-space:nowrap;border-radius:100px;padding:10px 18px;background:#e4ff30;color:#201b30;font-size:15px;font-weight:700;display:none}
.zx-visual:not([data-phase="0"]) .zx-feature-result{display:block}
.zx-playback{display:flex;align-items:center;justify-content:space-between;gap:12px}
.zx-phase{font-size:16px;font-weight:500}
.zx-play{font:inherit;font-size:14px;background:#362f4f;color:#f5f3ff;border:0;border-radius:100px;min-height:44px;padding:10px 16px;display:flex;align-items:center;gap:10px;cursor:pointer}.zx-play svg{width:18px;height:18px}.zx-play:hover{background:#4a405f}
.zx-visual figcaption{font-size:12px;color:#c9c2dc;line-height:1.4;margin-top:20px}
.zx-note{font-size:14px;line-height:1.5;margin:28px 0 0;max-width:70ch}
.zx-orb{display:none;width:84%;height:84%}.zx-orb svg{width:100%;height:100%;overflow:hidden}
.zx-scatter{display:none;position:absolute;inset:0;place-items:center}
.zx-visual:not([data-feature=wild]) .zx-wild-reel{display:none}
.zx-visual[data-feature=orbs] .zx-cell:nth-child(4n+1)>.zx-symbol,.zx-visual[data-feature=orbs]:not([data-phase="0"]) .zx-cell:nth-child(4n+2)>.zx-symbol{display:none}
.zx-visual[data-feature=orbs] .zx-cell:nth-child(4n+1)>.zx-orb,.zx-visual[data-feature=orbs]:not([data-phase="0"]) .zx-cell:nth-child(4n+2)>.zx-orb{display:block}
.zx-visual[data-feature=spins] .zx-cell:nth-child(8n+2):nth-child(-n+18)>.zx-symbol{opacity:0}
.zx-visual[data-feature=spins] .zx-cell:nth-child(8n+2):nth-child(-n+18)>.zx-scatter{display:grid}
.zx-visual[data-feature=spins]:not([data-phase="0"]) .zx-wild-reel{display:flex;top:0;height:100%;background:#846a42}
.zx-visual[data-feature=spins]:not([data-phase="0"]) .zx-wild-reel>span{display:block}
.zeus-explainer :focus-visible{outline:3px solid #5b23ff;outline-offset:4px}.zx-visual :focus-visible{outline-color:#e4ff30}
.zeus-explainer ::selection{background:#362f4f;color:#f5f3ff}
@media(max-width:850px){.zx-lesson{gap:32px;grid-template-columns:1fr 1fr}.zx-visual{padding:20px}.zx-steps button{grid-template-columns:1fr;gap:5px}.zx-heading{align-items:start}.zx-heading>p{max-width:22ch}}
@media(max-width:600px){.zeus-explainer{padding-block:64px}.zx-heading{display:block;margin-bottom:24px}.zx-heading>p{margin-top:18px;max-width:32ch}.zx-tabs{gap:6px;margin-bottom:28px;flex-wrap:nowrap}.zx-tabs button{padding:10px 12px;font-size:12px;flex:1}.zx-lesson{grid-template-columns:1fr;gap:24px}.zx-copy{display:contents}.zx-copy h3{font-size:38px;margin:0}.zx-intro{margin:0;font-size:17px}.zx-visual{grid-row:3}.zx-board{max-width:320px;margin-bottom:24px}.zx-steps button{grid-template-columns:66px 1fr;gap:12px}.zx-steps button>p{font-size:14px}.zx-demo{margin:0}.zx-note{margin-top:20px}.zx-visual figcaption{font-size:11px}}
@media(prefers-reduced-motion:reduce){.zeus-explainer *{transition:none!important;animation:none!important}}