:root{font-family:Sora,Space Grotesk,Segoe UI,system-ui,-apple-system,sans-serif;line-height:1.5;font-weight:500;color:#eaf0ff;background-color:#040510;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;--glow: rgba(124, 163, 255, .5);--muted: #9fb1d6;--ink: #eaf0ff;--jg-logo: url(https://res.cloudinary.com/joegalaxy/image/upload/q_auto/v1664565843/Images/JOEGALAXYDopeGalaxyLogooriginal_tecmer.png)}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(circle at 20% 20%,rgba(51,94,255,.18),transparent 25%),radial-gradient(circle at 80% 10%,rgba(120,67,255,.28),transparent 24%),radial-gradient(circle at 50% 50%,rgba(22,162,199,.16),transparent 30%),#03040c;color:var(--ink)}#root{min-height:100vh}a{color:inherit;text-decoration:none}.canvas{max-width:1100px;margin:0 auto;padding:32px 18px 36px;display:flex;flex-direction:column;gap:22px;min-height:100vh}.brand-anchor{position:relative;display:inline-flex;align-items:center;gap:12px;color:#dbe6ffd9;font-size:13px;letter-spacing:.02em}.brand-glow{position:absolute;inset:-6px;filter:blur(22px);background:radial-gradient(circle at 30% 30%,rgba(113,213,255,.35),transparent 40%),radial-gradient(circle at 70% 50%,rgba(156,118,255,.25),transparent 45%),radial-gradient(circle at 50% 70%,rgba(255,255,255,.12),transparent 55%);opacity:.6;pointer-events:none}.brand-mark{position:relative;width:56px;height:56px;border-radius:14px;background:#ffffff0d;box-shadow:0 12px 40px #00000059;border:1px solid rgba(255,255,255,.22);display:grid;place-items:center;overflow:hidden}.brand-mark:after{content:"";position:absolute;inset:-12px;background:radial-gradient(circle at 50% 20%,rgba(124,221,255,.35),transparent 45%),radial-gradient(circle at 80% 80%,rgba(166,132,255,.22),transparent 50%);filter:blur(18px);opacity:.75;pointer-events:none}.brand-mark-img{width:80%;height:80%;background-image:var(--jg-logo);background-size:contain;background-position:center;background-repeat:no-repeat;filter:grayscale(0) brightness(1.25) saturate(1.25) drop-shadow(0 6px 18px rgba(125,240,231,.35));opacity:.95;position:relative;z-index:1}.brand-text{display:flex;flex-direction:column;gap:2px}.brand-title{font-weight:700;letter-spacing:.01em}.brand-sub{font-size:12px;color:#94a3b8e6}.reveal{opacity:0;transform:translateY(12px);animation:revealIn .55s ease forwards}.delay-1{animation-delay:.1s}.delay-2{animation-delay:.25s}.delay-3{animation-delay:.4s}.hero{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));align-items:center;gap:28px}.hero-copy h1{margin:6px 0 12px;font-size:clamp(28px,4vw,38px);letter-spacing:-.02em}.hero-copy .hook{margin:0 0 6px;font-size:15px;color:#cfd8ff}.hero-copy .note{margin:0 0 10px;font-size:13px;color:#cfd8ffb3}.hero-copy .sub{margin:0;color:var(--muted)}.hero-stats{display:inline-flex;gap:12px;align-items:center;margin-top:16px;font-size:14px;color:#c8d6ff}.eyebrow{text-transform:uppercase;letter-spacing:.18em;font-size:12px;color:#7ea2ff;margin:0 0 6px}.pill{padding:6px 10px;border-radius:999px;background:#7ea2ff24;color:#dbe6ff}.pill.connected{background:#2ecc7126;color:#b8f5d0}.gate{position:relative;width:min(360px,90vw);aspect-ratio:1;margin:0 auto;border-radius:50%;background:radial-gradient(circle at 50% 45%,rgba(255,255,255,.08),transparent 55%),radial-gradient(circle at 50% 50%,#77baff1f,#030614e6);box-shadow:0 0 calc(80px * (.4 + var(--energy, .2))) #5b85ff2e,0 0 60px #5b85ff14,inset 0 0 90px #0006;overflow:hidden}.gate-core{position:absolute;inset:25%;border-radius:50%;background:radial-gradient(circle,#7edeffbf,#2866ff2e);filter:blur(4px);opacity:calc(.6 + var(--energy, .2));animation:breathe 5s ease-in-out infinite}.gate-halo{position:absolute;inset:10%;border-radius:50%;border:1px solid rgba(255,255,255,.08);box-shadow:0 0 40px #7ea2ff40;animation:haloPulse 1.2s ease-out}.gate-spark{position:absolute;inset:18%;border-radius:50%;border:1px solid rgba(255,255,255,.25);box-shadow:0 0 18px #fff6,0 0 30px #7edeff73;animation:spark .8s ease-out;pointer-events:none}.gate-glyph{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:110px;height:110px;background:none;background-image:var(--jg-logo);background-size:contain;background-position:center;background-repeat:no-repeat;pointer-events:none;opacity:.05}.gate-ring{position:absolute;inset:8%;border-radius:50%;animation:spin 22s linear infinite}.orb{position:absolute;top:50%;left:50%;width:14px;height:14px;border-radius:50%;background:radial-gradient(circle,#f8fbff,#7ea2ff4d);box-shadow:0 0 18px #7ea2ffb3;transform:rotate(var(--angle)) translate(46%);animation:float 6s ease-in-out infinite;animation-delay:var(--delay)}.feed{display:flex;flex-direction:column;gap:12px}.feed-header{display:flex;align-items:baseline;justify-content:space-between;gap:12px}.feed-header h2{margin:4px 0 0;font-size:clamp(22px,3vw,28px)}.feed-header .note{margin:6px 0 0;font-size:13px;color:#dbe6ffb3}.bubble{padding:10px 12px;border-radius:999px;background:#ffffff0f;color:#dbe6ff;font-size:14px}.feed-stream{display:grid;gap:10px;height:320px;max-height:320px;min-height:320px;overflow:hidden;position:relative}.feed-stream:after{content:"";position:absolute;inset:auto 0 0;height:56px;pointer-events:none;background:linear-gradient(180deg,#03040c00,#03040cb3 60%,#03040ce6)}.feed-item{display:grid;grid-template-columns:auto 1fr;gap:10px;padding:12px 14px;border-radius:12px;background:linear-gradient(120deg,#ffffff0f,#ffffff05);box-shadow:0 10px 40px #00000040;animation:feedIn .32s ease,fadeOut 6.4s ease forwards}.feed-item.join .pulse-dot{background:#7df7d0}.feed-item.leave .pulse-dot{background:#ff9fb7}.feed-item.activity .pulse-dot{background:#7ea2ff}.pulse-dot{width:10px;height:10px;border-radius:50%;background:#dbe6ff;align-self:center;box-shadow:0 0 16px #dbe6ff99}.feed-item .line{font-weight:600}.feed-item .meta{color:var(--muted);font-size:13px;display:flex;align-items:center;gap:8px}.empty{color:var(--muted);padding:10px 0}.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:4px}.micro-note{font-size:11px;color:#dbe6ff8c}.ambient{position:relative;display:grid;grid-template-columns:repeat(3,minmax(90px,1fr));gap:10px;width:100%;padding:12px 14px;border-radius:16px;background:#ffffff08;box-shadow:0 15px 60px #0000004d;overflow:hidden}.ambient-label{grid-column:1 / -1;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}.signal{height:6px;border-radius:999px;background:linear-gradient(90deg,#7ea2ff66,#7edeffcc);box-shadow:0 0 18px #7edeff80;transform-origin:left;animation:signal 3.4s ease-in-out infinite}.signal:nth-child(2){animation-delay:.4s}.signal:nth-child(3){animation-delay:.8s}.chip{display:inline-flex;align-items:center;gap:8px;padding:10px 12px;border-radius:999px;background:#ffffff0d;color:#dbe6ff;box-shadow:0 10px 30px #00000040}.chip-dot{width:8px;height:8px;border-radius:50%;background:#7df7d0;box-shadow:0 0 10px #7df7d0cc}.chip.subtle{background:#ffffff08}.chip-dot.muted{background:#9fb1d6;box-shadow:0 0 10px #9fb1d699}.meta-device{font-size:12px;color:#dbe6ffe6;display:inline-flex;gap:6px;align-items:center}.meta-region{font-size:12px;color:#dbe6ffb3}.meta-time{font-size:12px;color:#dbe6ffcc}@keyframes breathe{0%{transform:scale(1);opacity:.8}50%{transform:scale(1.04);opacity:1}to{transform:scale(1);opacity:.8}}@keyframes haloPulse{0%{transform:scale(.8);opacity:.9}to{transform:scale(1.22);opacity:0}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes float{0%{transform:rotate(var(--angle)) translate(46%) translateY(0);opacity:.9}50%{transform:rotate(calc(var(--angle) + 2deg)) translate(46%) translateY(6%);opacity:1}to{transform:rotate(var(--angle)) translate(46%) translateY(0);opacity:.9}}@keyframes feedIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeOut{0%{opacity:1}90%{opacity:1}to{opacity:0}}@keyframes spark{0%{transform:scale(.9);opacity:.8}40%{transform:scale(1.05);opacity:1}to{transform:scale(1.25);opacity:0}}@keyframes revealIn{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes signal{0%{transform:scaleX(calc(.06 + var(--energy, .2) * .35));opacity:.7}50%{transform:scaleX(calc(.15 + var(--energy, .2) * .6));opacity:1}to{transform:scaleX(calc(.06 + var(--energy, .2) * .35));opacity:.7}}@media(max-width:720px){.canvas{padding:24px 14px 32px}.hero,.ambient{grid-template-columns:1fr}}
