/* mediapipe.nabilmh.com — dark "camera on" theme with neon body-tracking accents */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&family=JetBrains+Mono:wght@400;600&display=swap');
:root{
  --font:"Space Grotesk",system-ui,sans-serif;--mono:"JetBrains Mono",ui-monospace,monospace;
  --bg:#0b0f14;--ink:#eef6f7;--muted:#93a4ad;--line:#1f2a33;--card:#111821;--thumb-bg:#16202a;
  --accent:#3dffb5;--accent-ink:#04140d;--pill:999px;--radius:14px;--radius-lg:20px;
  --top-bg:rgba(11,15,20,.8);--top-border:1px solid var(--line);
  --brand-font:700 1.25rem/1 var(--font);--logo-r:12px;--logo-bg:conic-gradient(from 200deg,#3dffb5,#36a3ff,#ff4dd8,#3dffb5);--logo-glyph:"🤸";--logo-shadow:0 0 22px rgba(61,255,181,.35);
  --field:#111821;--field-border:1px solid var(--line);
  --chip:#111821;--chip-border:1px solid var(--line);--chip-icon:#18242f;--chip-icon-r:8px;--chip-on:#3dffb5;--chip-on-ink:#04140d;
  --h1-font:700 clamp(2.2rem,5.5vw,3.6rem)/1.02 var(--font);--h2-font:700 1.3rem/1.2 var(--font);--h3-font:700 1.1rem/1.25 var(--font);
  --bar-bg:#111821;--bar-border:1px solid var(--line);--tag:#18242f;--tag-ink:#9fe9cf;
  --shadow:0 0 0 1px rgba(61,255,181,.04);--shadow-hover:0 0 0 1px rgba(61,255,181,.5),0 14px 40px rgba(61,255,181,.12);--hover-t:translateY(-4px);
  --card-border:1px solid var(--line);--note-bg:linear-gradient(135deg,rgba(61,255,181,.10),rgba(54,163,255,.10));--note-border:1px solid rgba(61,255,181,.35);--cam-bg:#ff4dd8;--cam-ink:#fff;
}
body{background:radial-gradient(ellipse at 80% -10%,rgba(54,163,255,.18),transparent 50%),radial-gradient(ellipse at 0% 20%,rgba(61,255,181,.10),transparent 45%),var(--bg);background-attachment:fixed}
.hero{padding:40px 0 10px}
.hero h1{background:linear-gradient(90deg,#3dffb5,#36a3ff 55%,#ff4dd8);-webkit-background-clip:text;background-clip:text;color:transparent}
.tagline{font-size:1.15rem;max-width:62ch}
.grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:22px}
.meta p{-webkit-line-clamp:3}
.thumb::after{content:"";position:absolute;inset:10px;border:2px solid rgba(61,255,181,.0);border-radius:10px;transition:.2s;pointer-events:none;
  background:linear-gradient(var(--accent),var(--accent)) top left/18px 2px no-repeat,linear-gradient(var(--accent),var(--accent)) top left/2px 18px no-repeat,linear-gradient(var(--accent),var(--accent)) bottom right/18px 2px no-repeat,linear-gradient(var(--accent),var(--accent)) bottom right/2px 18px no-repeat;opacity:.0}
.card:hover .thumb::after{opacity:1}