/* The animated demo on the home page: a dashboard strip over a Discord channel where a scene plays by itself (see js/home-stage.js). Ported from the approved preview (docs/landing-preview/site/pro/stage.css).
   Everything lives under .hxs and the animation names start with hxs-, so none of it can touch the rest of the site. All the names and numbers it shows are made up. */
.hxs { --line:#262a32; --ink:#e9ebef; --mute:#979ea9; --soft:#c3c8d0; --accent:#fd9425; --accent2:#ffb83d; --ok:#3ecf8e; --panel:#15171c; }
.hxs { position:relative; background:#111318; border:1px solid var(--line); border-radius:14px; overflow:hidden; box-shadow:0 30px 80px -40px #000; display:flex; flex-direction:column; height:var(--h,640px); text-align:left; }
.hxs .dock { background:#15171c; border-bottom:1px solid var(--line); padding:10px 16px 12px; }
.hxs .tag2 { display:inline-flex; align-items:center; gap:7px; font:600 11px Inter; letter-spacing:.08em; text-transform:uppercase; color:var(--mute); margin-bottom:6px; }
.hxs .tag2 i { width:7px; height:7px; border-radius:50%; background:var(--accent); display:block; }
.hxs .drow { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:7px 0; border-top:1px solid var(--line); font-size:14px; min-height:40px; }
.hxs .drow:first-of-type { border-top:0; }
.hxs .drow small { color:var(--mute); margin-left:8px; font-size:12.5px; }
.hxs .sw { position:relative; width:38px; height:22px; background:#343842; border-radius:99px; flex:none; transition:background .2s; }
.hxs .sw::after { content:""; position:absolute; top:3px; left:3px; width:16px; height:16px; border-radius:50%; background:#fff; transition:transform .2s; }
.hxs .sw.on { background:var(--accent); }
.hxs .sw.on::after { transform:translateX(16px); }
.hxs .pill { font:600 12.5px "JetBrains Mono"; background:#262a33; border:1px solid #343a45; border-radius:7px; padding:3px 9px; transition:background .3s, color .3s; }
.hxs .pill.on { background:#3a2a12; color:var(--accent2); border-color:#7a5420; }

.hxs .chead { display:flex; align-items:center; gap:10px; padding:10px 18px; border-bottom:1px solid var(--line); background:#13151a; font-weight:700; }
.hxs .chead span { color:var(--mute); font-weight:400; }
.hxs .chead .tag2 { margin:0 0 0 auto; }
.hxs .chat { flex:1; position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:flex-end; gap:13px; padding:16px 18px; }
.hxs .m { display:flex; gap:12px; animation:hxs-rise .45s cubic-bezier(.2,.8,.2,1) both; }
@keyframes hxs-rise { from { opacity:0; transform:translateY(14px) scale(.98); } to { opacity:1; transform:none; } }
.hxs .av { width:38px; height:38px; border-radius:50%; flex:none; display:grid; place-items:center; font:700 15px Inter; color:#fff; position:relative; }
.hxs .av.bot { background:#15171c; border:1px solid #2d323b; }
.hxs .who { font-weight:700; font-size:15px; transition:color .6s; }
.hxs .app { background:#5865f2; color:#fff; font:700 10px Inter; padding:1px 5px; border-radius:4px; margin-left:6px; vertical-align:middle; }
.hxs .time { color:#6c7480; font-size:12px; margin-left:8px; font-weight:400; }
.hxs .body { color:#d4d8de; font-size:15px; line-height:1.4; }
.hxs .used { color:#8a919c; font-size:13px; margin:-4px 0 -4px 50px; animation:hxs-rise .4s both; }
.hxs .used b { color:var(--accent2); font-weight:600; }
.hxs .sys { color:#8a919c; font-size:13.5px; padding-left:50px; animation:hxs-rise .4s both; }
.hxs .sys b { color:var(--ink); }
.hxs .dots { display:inline-flex; gap:4px; padding:6px 0; }
.hxs .dots i { width:7px; height:7px; border-radius:50%; background:#6c7480; animation:hxs-blink 1s infinite; }
.hxs .dots i:nth-child(2) { animation-delay:.15s; } .dots i:nth-child(3) { animation-delay:.3s; }
@keyframes hxs-blink { 0%,60%,100% { opacity:.25; transform:none; } 30% { opacity:1; transform:translateY(-3px); } }
.hxs .xp { position:absolute; right:22px; font:700 13px Inter; color:var(--accent2); animation:hxs-floatup 1.6s ease-out forwards; pointer-events:none; }
@keyframes hxs-floatup { from { opacity:0; transform:translateY(8px); } 20% { opacity:1; } to { opacity:0; transform:translateY(-34px); } }
.hxs .input { margin:0 16px 14px; background:#1b1e24; border:1px solid #2a2e37; border-radius:10px; padding:12px 14px; color:var(--mute); font-size:14.5px; min-height:44px; display:flex; align-items:center; }
.hxs .input .caret { width:1px; height:17px; background:var(--accent); margin-left:1px; animation:hxs-blinkc 1s steps(1) infinite; }
@keyframes hxs-blinkc { 50% { opacity:0; } }
.hxs .input .t { color:#e9ebef; }

/* things the bot posts */
.hxs .card { margin-top:8px; border-radius:14px; padding:14px 16px; display:flex; gap:14px; align-items:center; max-width:430px; background:radial-gradient(120% 150% at 0% 0%,#4a3320 0%,transparent 55%),radial-gradient(90% 130% at 100% 100%,#f97316 0%,transparent 62%),linear-gradient(135deg,#26262c,#17171b); animation:hxs-pop .6s cubic-bezier(.2,1.4,.3,1) both; position:relative; overflow:hidden; }
@keyframes hxs-pop { from { opacity:0; transform:scale(.8) translateY(10px); } to { opacity:1; transform:none; } }
.hxs .card::after { content:""; position:absolute; inset:0; background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.18) 50%,transparent 65%); transform:translateX(-120%); animation:hxs-sheen 1.4s .5s ease-out forwards; }
@keyframes hxs-sheen { to { transform:translateX(120%); } }
.hxs .ring { width:58px; height:58px; border-radius:50%; padding:4px; background:conic-gradient(#fd9425,#ffc552,#ff5a1f,#ffe066,#fd9425); flex:none; animation:hxs-spin 4s linear infinite; }
.hxs .ring i { display:block; width:100%; height:100%; border-radius:50%; border:4px solid #17171b; background:linear-gradient(135deg,#ffb04a,#f97316); }
@keyframes hxs-spin { to { transform:rotate(360deg); } }
.hxs .card small { color:rgba(255,255,255,.78); letter-spacing:.1em; font-size:11px; display:block; }
.hxs .card strong { display:block; font:700 21px "Space Grotesk"; }
.hxs .xpbar { height:6px; background:rgba(0,0,0,.35); border-radius:9px; margin-top:7px; width:210px; max-width:100%; overflow:hidden; }
.hxs .xpbar i { display:block; height:100%; width:0; background:#fff; border-radius:9px; transition:width 1.4s cubic-bezier(.2,.8,.2,1); }
.hxs .burst { position:absolute; width:8px; height:8px; background:var(--accent2); clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%); pointer-events:none; animation:hxs-burst 1.1s ease-out forwards; }
@keyframes hxs-burst { from { opacity:1; transform:translate(0,0) scale(.4) rotate(0); } to { opacity:0; transform:translate(var(--x),var(--y)) scale(1.6) rotate(200deg); } }
.hxs .chips2 { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.hxs .sw9 { width:34px; height:34px; border-radius:9px; animation:hxs-pop .4s cubic-bezier(.2,1.4,.3,1) both; position:relative; }
.hxs .sw9.sel { outline:2px solid #fff; outline-offset:2px; transform:scale(1.12); transition:transform .2s; }
.hxs .btnd { font:600 14px Inter; padding:8px 16px; border-radius:8px; border:1px solid #3a404b; background:#1d2027; color:var(--ink); transition:background .25s, border-color .25s, transform .15s; animation:hxs-pop .4s both; }
.hxs .btnd.on { background:#5865f2; border-color:#5865f2; }
.hxs .eph { margin-top:8px; background:#1b1e24; border-left:3px solid #5865f2; border-radius:6px; padding:8px 12px; font-size:14px; color:#d4d8de; animation:hxs-rise .4s both; max-width:360px; }
.hxs .eph small { display:block; color:#6c7480; font-size:11.5px; margin-top:3px; }
.hxs .rolechip { display:inline-block; font:600 12.5px Inter; padding:2px 9px; border-radius:99px; background:#1f3a2e; color:#6ee7b7; margin-left:8px; animation:hxs-pop .5s both; }
.hxs .ping { background:#3a3f6b; color:#c9ceff; border-radius:4px; padding:0 4px; }
.hxs .tile9 { width:40px; height:40px; border-radius:9px; display:grid; place-items:center; background:#fff; color:#0f2540; font:700 18px Inter; animation:hxs-flip .7s both; backface-visibility:hidden; }
@keyframes hxs-flip { from { transform:perspective(300px) rotateX(-90deg); opacity:0; } to { transform:none; opacity:1; } }
.hxs .rank { display:grid; grid-template-columns:60px 1fr 78px; gap:10px; align-items:center; font-size:13.5px; margin-top:6px; animation:hxs-rise .4s both; }
.hxs .rank i { display:block; height:8px; width:0; border-radius:6px; background:linear-gradient(90deg,var(--accent),var(--accent2)); transition:width 1.1s cubic-bezier(.2,.8,.2,1); }
.hxs .rank span { color:var(--mute); text-align:right; white-space:nowrap; }
.hxs .rep { margin-top:8px; border:1px solid #2a2e37; border-left:3px solid var(--accent); border-radius:8px; background:#15171c; padding:12px 14px; max-width:440px; animation:hxs-pop .5s both; }
.hxs .rep h5 { margin:0 0 8px; font:700 15px "Space Grotesk"; }
.hxs .bars { display:flex; align-items:flex-end; gap:7px; height:86px; border-bottom:1px solid #2a2e37; }
.hxs .bars i { flex:1; height:0; background:linear-gradient(180deg,var(--accent2),var(--accent)); border-radius:4px 4px 0 0; transition:height 1s cubic-bezier(.2,.8,.2,1); }
.hxs .repnums { display:flex; gap:26px; margin-top:10px; }
.hxs .repnums b { display:block; font:700 22px "Space Grotesk"; }
.hxs .repnums span { color:var(--mute); font-size:12px; }

/* a profile: the card, the Top 4, the people who play what you play */
.hxs .prof { margin-top:8px; border:1px solid #2a2e37; border-radius:14px; background:#15171c; overflow:hidden; max-width:480px; animation:hxs-pop .6s cubic-bezier(.2,1.2,.3,1) both; }
.hxs .prof .ban { height:40px; background:radial-gradient(80% 140% at 20% 0%,#7a4a1c,transparent 60%),linear-gradient(120deg,#2a2d38,#3b2a1a); position:relative; }
.hxs .prof .ban::after { content:""; position:absolute; inset:0; background:radial-gradient(circle at 80% 30%,rgba(255,200,100,.25),transparent 40%); animation:hxs-glow 3s ease-in-out infinite alternate; }
@keyframes hxs-glow { to { opacity:.4; transform:scale(1.2); } }
.hxs .prof .hd { display:flex; gap:12px; padding:0 16px; margin-top:-24px; align-items:flex-end; position:relative; }
.hxs .prof .pav { width:60px; height:60px; border-radius:50%; background:linear-gradient(135deg,#3b82f6,#8b5cf6); border:4px solid #15171c; display:grid; place-items:center; font:700 22px Inter; color:#fff; flex:none; box-shadow:0 0 0 2px #fd9425; }
.hxs .prof .nm { padding-bottom:4px; }
.hxs .prof .nm b { font:700 19px "Space Grotesk"; display:block; line-height:1.1; }
.hxs .live { display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:#6ee7b7; }
.hxs .live i { width:8px; height:8px; border-radius:50%; background:#34d399; animation:hxs-ping 1.6s infinite; }
@keyframes hxs-ping { 0% { box-shadow:0 0 0 0 rgba(52,211,153,.6); } 100% { box-shadow:0 0 0 9px rgba(52,211,153,0); } }
.hxs .prof .sec { padding:9px 16px 3px; }
.hxs .prof .sec h6 { margin:0 0 7px; font:700 11px Inter; letter-spacing:.08em; text-transform:uppercase; color:var(--mute); }
.hxs .top4 { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.hxs .g { height:58px; border-radius:10px; position:relative; overflow:hidden; display:flex; align-items:flex-end; padding:6px 8px; font:700 12.5px Inter; animation:hxs-cover .6s cubic-bezier(.2,1.2,.3,1) both; }
@keyframes hxs-cover { from { opacity:0; transform:translateY(18px) rotate(-4deg) scale(.9); } to { opacity:1; transform:none; } }
.hxs .g::before { content:attr(data-n); position:absolute; top:5px; left:8px; font:700 20px "Space Grotesk"; opacity:.9; }
.hxs .people { display:flex; gap:8px; padding-bottom:10px; }
.hxs .pp { flex:1; border:1px solid #2a2e37; border-radius:10px; padding:9px 8px; text-align:center; background:#111318; font-size:12.5px; animation:hxs-slidein .5s cubic-bezier(.2,1,.3,1) both; }
@keyframes hxs-slidein { from { opacity:0; transform:translateX(30px); } to { opacity:1; transform:none; } }
.hxs .pp .a { width:34px; height:34px; border-radius:50%; margin:0 auto 5px; display:grid; place-items:center; font:700 14px Inter; color:#fff; }
.hxs .pp small { display:block; color:var(--mute); font-size:11.5px; margin-bottom:6px; }
.hxs .add { white-space:nowrap; display:inline-block; font:600 11.5px Inter; padding:4px 9px; border-radius:6px; border:1px solid #3a404b; background:#1d2027; color:var(--ink); transition:background .3s, border-color .3s, color .3s; }
.hxs .add.done { background:#1f3a2e; border-color:#2f6a50; color:#6ee7b7; }
.hxs .vouch { font-size:13px; color:var(--soft); padding:2px 16px 8px; }
.hxs .vouch b { color:var(--accent2); font-family:"Space Grotesk"; font-size:16px; }

.hxs .pop { position:absolute; z-index:25; width:268px; background:#15171c; border:1px solid #3a2a12; border-radius:12px; padding:12px; box-shadow:0 20px 50px -10px #000; animation:hxs-pop .4s cubic-bezier(.2,1.3,.3,1) both; }
.hxs .pop .h { display:flex; gap:10px; align-items:center; margin-bottom:8px; }
.hxs .pop .pa { width:38px; height:38px; border-radius:50%; background:linear-gradient(135deg,#ec4899,#f97316); display:grid; place-items:center; font:700 15px Inter; color:#fff; box-shadow:0 0 0 2px #fd9425; }
.hxs .pop b { font-family:"Space Grotesk"; }
.hxs .pop .t4 { display:grid; grid-template-columns:repeat(4,1fr); gap:5px; margin:8px 0; }
.hxs .pop .t4 i { height:34px; border-radius:6px; display:block; }
.hxs .pop a { display:block; text-align:center; font:600 12.5px Inter; color:#1a0f00; background:linear-gradient(120deg,var(--accent),var(--accent2)); border-radius:7px; padding:6px; }

/* Asterism: a pack of real stars, turned over one by one */
.hxs .pack { display:flex; gap:10px; margin-top:10px; }
.hxs .scard { width:128px; height:160px; perspective:600px; }
.hxs .scard .in { position:relative; width:100%; height:100%; transform-style:preserve-3d; transition:transform .8s cubic-bezier(.3,1.2,.4,1); }
.hxs .scard.flip .in { transform:rotateY(180deg); }
.hxs .scard .f, .hxs .scard .b { position:absolute; inset:0; border-radius:12px; backface-visibility:hidden; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:10px; }
.hxs .scard .b { background:repeating-linear-gradient(45deg,#1a1d24,#1a1d24 8px,#15171c 8px,#15171c 16px); border:1px solid #2d323b; }
.hxs .scard .b::after { content:""; width:22px; height:22px; background:var(--accent); clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%); filter:drop-shadow(0 0 6px #fd9425); }
.hxs .scard .f { transform:rotateY(180deg); background:radial-gradient(circle at 50% 30%,var(--glow,#4b6cff) 0,transparent 55%),linear-gradient(160deg,#10152a,#0a0c14); border:1px solid #2d3a66; }
.hxs .scard .f .dot { width:14px; height:14px; border-radius:50%; background:var(--c,#fff); box-shadow:0 0 18px 6px var(--glow,#4b6cff); margin-bottom:12px; }
.hxs .scard .f b { font:700 15px "Space Grotesk"; }
.hxs .scard .f small { color:#9aa6d6; font-size:11.5px; margin-top:4px; line-height:1.3; }
.hxs .newtag { position:absolute; top:7px; right:7px; font:700 9px Inter; letter-spacing:.06em; background:var(--accent2); color:#1a0f00; padding:2px 5px; border-radius:4px; }

.hxs .cursor { position:absolute; z-index:40; left:60px; top:60px; width:22px; height:22px; pointer-events:none; transition:left .75s cubic-bezier(.5,0,.2,1), top .75s cubic-bezier(.5,0,.2,1), transform .12s, opacity .3s; opacity:0; filter:drop-shadow(0 2px 4px rgba(0,0,0,.6)); }
.hxs .cursor.show { opacity:1; }
.hxs .cursor.press { transform:scale(.8); }

/* ?still=1 (for screenshots): every animation and transition finishes at once */
.still .hxs *, .still .hxs *::before, .still .hxs *::after { animation-duration:.001s !important; animation-delay:0s !important; animation-iteration-count:1 !important; transition-duration:.001s !important; }
@media (prefers-reduced-motion: reduce) { .hxs .ring, .hxs .live i, .hxs .dots i, .hxs .card::after, .hxs .prof .ban::after { animation:none !important; } }