/* A contained digital stage; the message remains readable over the animated backdrop. */
.slogan-play.matrix-slogans{grid-template-columns:minmax(0,1fr);justify-content:center}
.slogan-play.matrix-slogans{position:relative;isolation:isolate;display:grid;place-items:center;min-height:230px;max-width:1300px;margin:28px auto 0;padding:48px 90px;overflow:hidden;border:1px solid #64e5c16b;border-radius:22px;background:#020809;box-shadow:inset 0 0 70px #061f2266,0 18px 50px #0007,0 0 24px #38d9b20c;cursor:crosshair}
.matrix-slogans canvas{position:absolute;inset:0;width:100%;height:100%;z-index:-3;pointer-events:none}
.matrix-slogans::before{content:'';position:absolute;inset:0;z-index:-2;pointer-events:none;background:radial-gradient(ellipse at center,#010809f2 0,#010809cc 35%,#01080925 85%),repeating-linear-gradient(0deg,transparent 0 3px,#ffffff03 3px 4px)}
.matrix-slogans::after{content:'';position:absolute;inset:10px;z-index:-1;border:1px solid #51d9b329;border-radius:14px;pointer-events:none;clip-path:polygon(0 0,14% 0,14% 3%,86% 3%,86% 0,100% 0,100% 100%,86% 100%,86% 97%,14% 97%,14% 100%,0 100%)}
.matrix-slogans .matrix-label{position:absolute;top:19px;right:25px;display:flex;gap:9px;align-items:center;color:#81d9c7;font-size:12px;letter-spacing:.3px}
.matrix-label::before{content:'';width:6px;height:6px;background:#9cffe2;border-radius:50%;box-shadow:0 0 12px #63ffca}
.matrix-slogans .matrix-count{position:absolute;top:17px;left:25px;font:13px/1.5 Consolas,monospace;color:#7db7ab;direction:ltr}
.slogan-play.matrix-slogans p{max-width:1000px;min-height:2.9em;display:grid;align-content:center;position:relative;margin:0;text-align:center;text-wrap:balance;font-size:clamp(26px,3.1vw,44px);font-weight:900;line-height:1.55;color:#d9fff1;text-shadow:0 0 24px #68f4c638,0 3px 1px #000;pointer-events:none}
.matrix-slogans .matrix-topic{position:absolute;bottom:18px;right:25px;font-size:13px;color:#bcd1c8}
.matrix-slogans .matrix-progress{position:absolute;left:25px;right:95px;bottom:0;height:2px;background:#66e7bd;transform-origin:right;box-shadow:0 0 12px #66e7bd99}
.slogan-play.matrix-slogans button{position:absolute;bottom:18px;left:24px;display:grid;place-items:center;width:46px;height:46px;font-size:25px;border:1px solid #88edce;color:#c7ffe9;background:linear-gradient(135deg,#174c42,#061c1b);box-shadow:inset 0 1px #ffffff35,0 0 18px #44e0aa25;transition:transform .25s,box-shadow .25s;cursor:pointer}
.slogan-play.matrix-slogans button:hover{transform:rotate(35deg) scale(1.08);box-shadow:0 0 24px #44e0aa66}
.matrix-slogans .matrix-ripple{position:absolute;width:50px;height:50px;border:1px solid #9bffe0;border-radius:50%;pointer-events:none;z-index:2;box-shadow:0 0 18px #59edb7,inset 0 0 12px #59edb744}
@media(max-width:650px){.slogan-play.matrix-slogans{min-height:245px;padding:50px 21px 65px;margin-top:22px;border-radius:17px}.slogan-play.matrix-slogans p{font-size:25px;min-height:4.5em}.matrix-slogans .matrix-label{right:18px;top:16px;font-size:11px}.matrix-slogans .matrix-count{left:18px;top:15px;font-size:12px}.matrix-slogans .matrix-topic{right:18px;bottom:23px;font-size:12px;max-width:calc(100% - 95px)}.slogan-play.matrix-slogans button{left:17px;bottom:15px;width:43px;height:43px}}
@media(prefers-reduced-motion:reduce){.slogan-play.matrix-slogans button{transition:none}}
/* Classic green code rain, with a narrow dark pocket behind the message. */
.slogan-play.matrix-slogans{background:#000402;border-color:#2df47380;box-shadow:inset 0 0 55px #001a0a,0 18px 50px #0007,0 0 20px #00e54b12}
.matrix-slogans::before{background:radial-gradient(ellipse at center,#000502dd 0,#00050288 32%,#00050215 65%,transparent 90%),repeating-linear-gradient(0deg,transparent 0 3px,#00ff3c05 3px 4px)}
.matrix-slogans::after{border-color:#2cff672b}
.slogan-play.matrix-slogans p{color:#e3ffe8;text-shadow:0 0 20px #27ff583b,0 2px 5px #000,0 0 9px #000}
.matrix-slogans .matrix-label,.matrix-slogans .matrix-count{color:#7ee898}
.matrix-slogans .matrix-progress{background:#39f76b;box-shadow:0 0 12px #22ff5b}
.slogan-play.matrix-slogans button{border-color:#55fa87;color:#baffcb;background:linear-gradient(135deg,#124325,#04180a);box-shadow:0 0 18px #16ef502b}
/* Home placement and dedicated agent card, separate from the slogan text. */
[data-page="home"]>.matrix-slogans{width:100%;max-width:none;margin:0;min-height:325px;border-radius:0;padding:48px 6vw 155px}
.matrix-agent{position:absolute;bottom:57px;left:50%;transform:translateX(-50%);display:grid;grid-template-columns:auto auto;gap:3px 25px;align-items:center;padding:13px 22px;border:1px solid #6df69777;border-radius:12px;background:#02100dee;box-shadow:inset 0 1px #a9ffd726,0 0 25px #22db6230;color:#b7ffd0;max-width:calc(100% - 30px);font-family:Consolas,'Courier New',monospace}
.matrix-agent>div{display:grid;gap:5px}.matrix-agent strong{font-size:13px;white-space:nowrap;letter-spacing:.8px}.matrix-agent span{font-size:13px;color:#85b89b}.matrix-agent>b{font-size:29px;letter-spacing:2px;line-height:1.3;color:#e1ffe8;text-shadow:0 0 14px #2bff6b44}.matrix-agent small{grid-column:1/-1;font-size:10px;color:#79a58b;letter-spacing:.3px}
[data-page="home"]>.possibilities{border-bottom:0}
@media(max-width:650px){[data-page="home"]>.matrix-slogans{min-height:355px;padding:48px 22px 175px}.matrix-agent{bottom:64px;gap:4px 15px;padding:11px 14px}.matrix-agent strong{font-size:10px;letter-spacing:.2px}.matrix-agent span{font-size:12px}.matrix-agent>b{font-size:24px;letter-spacing:1px}.matrix-agent small{font-size:9px}}
/* Fixed-height stage and independently anchored message and identity card. */
[data-page="home"]>.matrix-slogans{height:365px;min-height:365px;padding:0}
.slogan-play.matrix-slogans>p{position:absolute;top:49px;left:6%;right:6%;width:auto;max-width:none;height:150px;min-height:0;display:grid;place-content:center;padding:0 18px;font-size:clamp(26px,3.1vw,44px);line-height:1.45;margin:0}
.matrix-agent{bottom:36px;width:350px;height:112px;max-width:calc(100% - 40px);display:block;text-align:center;padding:12px 15px}
.matrix-agent>strong{display:block;width:100%;font-size:16px;line-height:1.5;letter-spacing:1px;white-space:nowrap}
.matrix-agent>b{display:block;margin:4px 0 0;font-size:32px;line-height:1.2;letter-spacing:3px}
.matrix-agent>span{position:absolute;left:15px;bottom:10px;font-size:10px;line-height:1.3}
.matrix-agent>small{position:absolute;right:13px;bottom:10px;font-size:8px;line-height:1.3}
@media(max-width:650px){[data-page="home"]>.matrix-slogans{height:390px;min-height:390px;padding:0}.slogan-play.matrix-slogans>p{top:47px;left:12px;right:12px;height:180px;font-size:24px;line-height:1.5;padding:0 9px}.matrix-agent{bottom:41px;width:310px;height:110px;padding:12px 10px}.matrix-agent>strong{font-size:14px;letter-spacing:.5px}.matrix-agent>b{font-size:31px;letter-spacing:2px}.matrix-agent>span{font-size:10px}.matrix-agent>small{font-size:8px}}
.matrix-agent{height:88px;display:flex;flex-direction:column;justify-content:center;padding:10px 15px}
@media(max-width:650px){.matrix-agent{height:82px;padding:9px 10px}}