:root{color-scheme:dark;font-family:Arial,Helvetica,sans-serif;background:#050e1a;color:#eef3fa;--gold:#e6c579}
*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;background:linear-gradient(90deg,#030b17e8,#051225dc 54%,#050e1a8c),url('/assets/mxn-background.png') center/cover fixed}body:before{content:"";position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 48%,#4b90c216,transparent 58%)}.brand{padding:22px 36px 0}.brand img{display:block;max-width:60vw;object-fit:contain;object-position:left}main{position:relative;max-width:1240px;margin:0 auto;padding:0 20px}.intro{text-align:center;position:relative;margin:3px auto 0}.eyebrow{font-size:10px;letter-spacing:.24em;color:var(--gold);margin:0 0 12px}.intro h1{font-size:clamp(27px,3vw,39px);font-weight:500;margin:0 0 9px;letter-spacing:-.02em}.intro>p:last-child{color:#b4c1d2;font-size:15px;margin:0}.constellation{position:relative;max-width:1020px;height:550px;margin:4px auto 0;isolation:isolate}.orbit{position:absolute;width:530px;height:350px;border:1px solid #dfbf7528;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-18deg);border-radius:50%;box-shadow:0 0 55px #5a93c511}.orbit:before,.orbit:after{content:"";position:absolute;inset:-40px 80px;border:1px solid #7ab6e621;border-radius:50%;transform:rotate(60deg)}.orbit:after{inset:10px -105px;transform:rotate(-20deg);border-color:#e6c57914}.planet{--diameter:210px;position:absolute;width:var(--diameter);height:var(--diameter);left:50%;top:50%;margin:calc(var(--diameter)/-2);border-radius:50%;color:#fff;text-decoration:none;display:grid;place-items:center;transform:translate(var(--x,0),var(--y,0));background:linear-gradient(140deg,#fff1b8 0%,#bd8c39 19%,#70501f 36%,#f7dea0 53%,#a77a30 72%,#38250e 96%);box-shadow:0 13px 0 -4px #0b1626,0 15px 0 -4px #c69c5044,0 26px 38px #000a,0 0 42px #8bbbe510,inset 0 1px 2px #fff8;padding:3px;transition:box-shadow .24s ease,filter .24s ease;outline-offset:8px}.planet:before{content:"";position:absolute;inset:-9px;border:1px solid #e8ce8b20;border-radius:50%;pointer-events:none}.planet-face{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:10px;padding:20px;width:100%;height:100%;border-radius:50%;background:radial-gradient(ellipse at 34% 14%,#5a7896a6 0%,#18354e 27%,#0b2136 53%,#050d1b 86%);box-shadow:inset 0 3px 5px #ffffff4d,inset 0 -13px 18px #0009;overflow:hidden}.planet-face:before{content:"";position:absolute;left:12%;right:12%;top:5%;height:36%;border-radius:50%;background:linear-gradient(#fff2,transparent);pointer-events:none}.symbol{color:var(--gold);font-weight:500;font-size:27px;letter-spacing:.02em;line-height:1}.planet strong{font-size:20px;line-height:1.18;letter-spacing:.05em;font-weight:600}.planet small{color:#c2cfdd;line-height:1.35;font-size:11px;max-width:160px}.enter{color:var(--gold);font-size:10px;margin-top:2px}.planet-main{--diameter:276px;z-index:2;box-shadow:0 18px 0 -5px #0b1626,0 20px 0 -5px #c69c5070,0 35px 55px #000c,0 0 80px #d9b75a20}.planet-main .symbol{font-family:Georgia,serif;font-size:47px}.planet-main strong{font-size:28px}.planet-main strong span{font-size:22px}.planet-main small{font-size:13px;max-width:220px}.planet-main .enter{font-size:12px;margin-top:8px}.planet-clubs{--x:-295px;--y:-142px}.planet-chambers{--x:295px;--y:-142px}.planet-dspc{--x:-295px;--y:142px}.planet-demo{--x:295px;--y:142px}.planet-dspc .symbol{color:#f07580}.planet-dspc .planet-face{background:radial-gradient(ellipse at 34% 14%,#745567 0%,#29243b 27%,#101a2c 53%,#050d1b 86%)}.planet-demo .symbol{font-size:23px}.planet:hover{transform:translate(var(--x,0),calc(var(--y,0) - 6px));box-shadow:0 16px 0 -4px #0b1626,0 18px 0 -4px #c69c5080,0 30px 50px #000c,0 0 50px #e8c77c26}.planet:focus-visible{outline:3px solid #fff1af}.explanation{text-align:center;color:#aebed0;font-size:13px;line-height:1.6;margin:4px auto 22px;max-width:690px}footer{position:relative;max-width:1380px;margin:0 auto;padding:20px 36px 25px;display:flex;justify-content:space-between;gap:20px;color:#c6b487;font-size:11px;letter-spacing:.04em}footer div{display:flex;gap:24px}footer a{color:#becbdd;text-decoration:none}footer a:hover{text-decoration:underline}footer a:focus-visible{outline:2px solid var(--gold);outline-offset:5px}
@media(min-width:1200px) and (min-height:960px){.brand{padding-top:30px}.intro{margin-top:20px}.constellation{margin-top:28px;margin-bottom:25px}}
@media(max-width:900px){.constellation{height:520px}.planet{--diameter:180px}.planet-main{--diameter:242px}.planet-clubs{--x:-225px;--y:-135px}.planet-chambers{--x:225px;--y:-135px}.planet-dspc{--x:-225px;--y:135px}.planet-demo{--x:225px;--y:135px}.planet strong{font-size:18px}.planet-face{gap:8px;padding:15px}.planet-main strong{font-size:26px}.planet-main strong span{font-size:20px}}
@media(max-width:650px){body{background-position:67% center}.brand{padding:20px 22px 0}.brand img{width:205px;height:46px}.intro{margin:24px auto 0}.eyebrow{font-size:9px}.constellation{height:auto;max-width:420px;display:grid;grid-template-columns:1fr 1fr;justify-items:center;gap:32px 12px;margin:28px auto}.orbit{display:none}.planet,.planet:hover{position:relative;left:auto;top:auto;margin:0;transform:none;--diameter:154px}.planet-main{--diameter:224px;grid-column:1/-1;grid-row:1;margin-bottom:6px}.planet-clubs{grid-column:1;grid-row:2}.planet-chambers{grid-column:2;grid-row:2}.planet-dspc{grid-column:1;grid-row:3}.planet-demo{grid-column:2;grid-row:3}.planet-face{padding:14px 10px;gap:7px}.planet strong{font-size:15px}.planet-main strong{font-size:25px}.planet-main strong span{font-size:19px}.planet-main .symbol{font-size:37px}.planet small{font-size:10px;max-width:132px}.planet .symbol{font-size:24px}.planet-main .enter{font-size:11px}.enter{font-size:9px}.explanation{padding:0 14px;margin:36px auto 6px;font-size:12px}footer{flex-direction:column;align-items:center;text-align:center;padding:22px;line-height:1.5}footer div{gap:20px}}
@media(max-width:355px){main{padding:0 12px}.planet{--diameter:140px}.planet-main{--diameter:210px}.planet-face{gap:5px}.planet small{font-size:9px}.planet strong{font-size:14px}}
@media(prefers-reduced-motion:reduce){.planet{transition:none}.planet:hover{transform:translate(var(--x,0),var(--y,0))}}@media(max-width:650px) and (prefers-reduced-motion:reduce){.planet:hover{transform:none}}