/* The Mesh: full screen, dark, the community drawn in light. */
.mesh-page { background: radial-gradient(ellipse at 60% 40%, #232a2c 0%, #16191b 70%); }
.mesh-page .site-footer { display: none; }
.mesh-stage { position: relative; height: calc(100vh - var(--header-h)); height: calc(100dvh - var(--header-h)); overflow: hidden; }
.mesh-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; touch-action: none; }
.mesh-hud { position: absolute; left: 24px; top: 24px; width: min(380px, calc(100% - 48px)); display: grid; gap: 12px; pointer-events: none; }
.mesh-hud > * { pointer-events: auto; }
.mesh-hud h1 { font-size: clamp(32px, 4vw, 52px); margin: 0; letter-spacing: -0.02em; }
.mesh-lede { margin: 0; color: var(--muted-dark); font: 400 15px/1.55 var(--font-ui); }
.mesh-stats { display: flex; gap: 18px; font: 400 13px/1 var(--font-ui); color: var(--muted-dark); }
.mesh-stats b { display: block; font: 600 26px/1.1 var(--font-mono); color: #39ff8b; margin-bottom: 2px; }
.mesh-search { min-height: 40px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--line-dark); background: rgb(22 25 27 / 0.8); color: var(--text); font: 400 14px/1 var(--font-ui); backdrop-filter: blur(6px); }
.mesh-key { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; font: 400 12px/1.2 var(--font-ui); color: var(--muted-dark); }
.mesh-key li, .mesh-feed li, .mesh-links li { display: flex; align-items: center; gap: 7px; }
.mesh-key i, .mesh-feed i, .mesh-links i { width: 14px; height: 3px; border-radius: 2px; flex-shrink: 0; }
.mesh-card, .mesh-feed { position: absolute; right: 24px; width: min(320px, calc(100% - 48px)); background: rgb(24 28 31 / 0.88); border: 1px solid var(--line-dark); border-radius: 16px; padding: 16px; backdrop-filter: blur(8px); }
.mesh-card { top: 24px; display: grid; gap: 12px; border-color: rgb(57 255 139 / 0.35); }
.mesh-feed { bottom: 24px; max-height: 40vh; overflow-y: auto; }
.mesh-card[hidden] + .mesh-feed { bottom: 24px; }
.mesh-close { position: absolute; top: 10px; right: 10px; border: 0; background: none; color: var(--muted-dark); font-size: 20px; cursor: pointer; }
.mesh-who { display: flex; align-items: center; gap: 10px; }
.mesh-who .avatar { width: 40px; height: 40px; font-size: 16px; }
.mesh-who b { font: 600 17px/1.2 var(--font-ui); }
.mesh-who small { display: block; color: var(--muted-dark); font: 400 12px/1.4 var(--font-ui); }
.mesh-facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; font: 400 12px/1.2 var(--font-ui); color: var(--muted-dark); }
.mesh-facts b { font: 600 18px/1.1 var(--font-mono); color: var(--text); margin-right: 4px; }
.mesh-card h3 { font: 500 11px/1 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--sand); margin: 4px 0 0; }
.mesh-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; font: 400 13px/1.2 var(--font-ui); }
.mesh-links small { margin-left: auto; color: var(--muted-dark); font-size: 11px; }
.mesh-links .linkish { color: var(--text); }
.mesh-card .btn { justify-self: start; }
.mesh-feed h2 { display: flex; align-items: center; gap: 8px; font: 600 14px/1 var(--font-ui); margin: 0 0 12px; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: #39ff8b; box-shadow: 0 0 0 0 rgb(57 255 139 / 0.6); animation: live 1.8s ease-out infinite; }
@keyframes live { to { box-shadow: 0 0 0 10px rgb(57 255 139 / 0); } }
@media (prefers-reduced-motion: reduce) { .live-dot { animation: none; } }
.mesh-feed ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.mesh-feed li { align-items: flex-start; font: 400 12.5px/1.4 var(--font-ui); color: var(--muted-dark); }
.mesh-feed li i { margin-top: 7px; }
.mesh-feed li b { color: var(--text); font-weight: 500; }
.mesh-feed li small { margin-left: auto; white-space: nowrap; font-size: 11px; padding-left: 8px; }
.mesh-hint { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); margin: 0; font: 400 12px/1 var(--font-ui); color: rgb(168 176 181 / 0.7); pointer-events: none; white-space: nowrap; }
@media (max-width: 820px) {
  .mesh-stage { height: auto; min-height: calc(100dvh - var(--header-h)); display: grid; }
  .mesh-canvas { position: relative; height: 62vh; grid-row: 2; }
  .mesh-hud { position: relative; left: 0; top: 0; width: auto; padding: 18px 16px 0; grid-row: 1; }
  .mesh-lede { font-size: 14px; }
  .mesh-card, .mesh-feed { position: relative; right: auto; top: auto; bottom: auto; width: auto; margin: 0 16px 14px; max-height: none; }
  .mesh-card { grid-row: 3; }
  .mesh-feed { grid-row: 4; }
  .mesh-hint { display: none; }
}