Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Attentional Synapse — Molecular Neuroscience Explorer</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@300;400;500;600;700&family=Crimson+Pro:ital,wght@0,400;0,600;1,400&display=swap" rel="stylesheet"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| fontFamily: { | |
| sans: ['Inter', 'system-ui', 'sans-serif'], | |
| mono: ['JetBrains Mono', 'monospace'], | |
| serif: ['Crimson Pro', 'Georgia', 'serif'], | |
| }, | |
| colors: { | |
| slate: { 950: '#0a0e1a', 900: '#0f172a', 850: '#111827', 800: '#1e293b' }, | |
| warm: { 50: '#fff7ed', 100: '#ffedd5', 200: '#fed7aa', 300: '#fdba74', 400: '#fb923c', 500: '#f97316', 600: '#ea580c' }, | |
| cool: { 400: '#818cf8', 500: '#6366f1', 600: '#4f46e5', 700: '#4338ca', 800: '#3730a3' }, | |
| accent: { 400: '#2dd4bf', 500: '#14b8a6', 600: '#0d9488' }, | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| :root { | |
| --cell-border: #2dd4bf; | |
| --cell-fill: rgba(45, 212, 191, 0.06); | |
| --cell-fill-strong: rgba(45, 212, 191, 0.12); | |
| --receptor-outer: #f59e0b; | |
| --receptor-inner: #d97706; | |
| --receptor-fill: rgba(245, 158, 11, 0.08); | |
| --vesicle-blue: #38bdf8; | |
| --vesicle-red: #f87171; | |
| --channel-teal: #2dd4bf; | |
| --cleft-blue: rgba(56, 189, 248, 0.03); | |
| --accent-glow: 0 0 20px rgba(45, 212, 191, 0.15); | |
| } | |
| * { box-sizing: border-box; } | |
| html { scroll-behavior: smooth; } | |
| body { | |
| font-family: 'Inter', system-ui, sans-serif; | |
| background: #0a0e1a; | |
| color: #e2e8f0; | |
| min-height: 100vh; | |
| overflow-x: hidden; | |
| -webkit-font-smoothing: antialiased; | |
| } | |
| /* ── Ambient field ── */ | |
| .field-bg { | |
| position: fixed; inset: 0; pointer-events: none; z-index: 0; | |
| } | |
| .field-bg::before { | |
| content: ''; position: absolute; inset: 0; | |
| background: radial-gradient(ellipse 900px 500px at 25% 35%, rgba(45,212,191,0.03) 0%, transparent 70%), | |
| radial-gradient(ellipse 800px 600px at 75% 65%, rgba(99,102,241,0.02) 0%, transparent 70%); | |
| } | |
| .field-bg::after { | |
| content: ''; position: absolute; inset: 0; | |
| background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cpath d='M0 30h60M30 0v60' stroke='%2311133c' stroke-width='0.3'/%3E%3C/svg%3E"); | |
| opacity: 0.15; | |
| } | |
| /* ── Synapse SVG ── */ | |
| .synapse-diagram { width: 100%; max-width: 960px; margin: 0 auto; } | |
| .synapse-diagram svg { display: block; width: 100%; height: auto; } | |
| .membrane { fill: none; stroke: var(--cell-border); stroke-width: 2.5; opacity: 0.85; } | |
| .membrane-hl { fill: none; stroke: var(--cell-border); stroke-width: 4; opacity: 0.12; filter: blur(3px); } | |
| .membrane-sec { fill: none; stroke: #64748b; stroke-width: 1.2; stroke-dasharray: 5 4; opacity: 0.5; } | |
| .cleft-layer { fill: var(--cleft-blue); opacity: 0.35; } | |
| .receptor-outer { fill: var(--receptor-outer); } | |
| .receptor-inner { fill: var(--receptor-inner); } | |
| .receptor-glow { fill: var(--receptor-fill); filter: url(#glow-receptor); } | |
| .vesicle-blue { fill: #38bdf8; opacity: 0.9; } | |
| .vesicle-red { fill: #f87171; opacity: 0.9; } | |
| .vesicle-ring { fill: none; stroke: currentColor; stroke-width: 1.2; opacity: 0.7; } | |
| .vesicle-dots { fill: #fbbf24; opacity: 0.55; } | |
| .vesicle-nt { font-family: 'JetBrains Mono', monospace; font-size: 5px; fill: #cbd5e1; font-weight: 600; opacity: 0.8; text-anchor: middle; } | |
| .channel-body { fill: var(--channel-teal); opacity: 0.35; } | |
| .channel-open { fill: #14b8a6; opacity: 0.7; } | |
| .channel-ring { fill: none; stroke: #2dd4bf; stroke-width: 1.5; opacity: 0.7; } | |
| .channel-inner { fill: none; stroke: #5eead4; stroke-width: 0.8; stroke-dasharray: 2 1.5; opacity: 0.5; } | |
| .psd-shade { fill: rgba(245, 158, 11, 0.04); } | |
| .psd-ring { fill: none; stroke: #f59e0b; stroke-width: 1; opacity: 0.2; stroke-dasharray: 3 3; } | |
| .snap25-box { fill: none; stroke: #f59e0b; stroke-width: 1.3; rx: 2; opacity: 0.55; } | |
| .snap25-label { font-family: 'JetBrains Mono', monospace; font-size: 4.5px; fill: #fbbf24; font-weight: 700; opacity: 0.7; } | |
| .voltage-gate { fill: #2dd4bf; opacity: 0.25; } | |
| .voltage-gate-inner { fill: none; stroke: #5eead4; stroke-width: 0.7; opacity: 0.5; } | |
| .scaffold { fill: none; stroke: #a78bfa; stroke-width: 0.6; opacity: 0.2; stroke-dasharray: 2 2; } | |
| .microtubule { fill: none; stroke: #818cf8; stroke-width: 0.4; opacity: 0.08; } | |
| .pulse-ca { fill: #fbbf24; opacity: 0; pointer-events: none; } | |
| .pulse-nt { fill: #38bdf8; opacity: 0; pointer-events: none; } | |
| .pulse-da { fill: #f87171; opacity: 0; pointer-events: none; } | |
| .pulse-5ht { fill: #a78bfa; opacity: 0; pointer-events: none; } | |
| .label-text { font-family: 'JetBrains Mono', monospace; font-size: 5px; fill: #94a3b8; font-weight: 500; opacity: 0.5; text-anchor: middle; } | |
| /* ── Animations ── */ | |
| @keyframes pulseCa { 0%,100%{opacity:0} 20%{opacity:0.6} 60%{opacity:0.2} 90%{opacity:0} } | |
| .anim-ca { animation: pulseCa 1.8s ease-in-out infinite; } | |
| @keyframes pulseNt { 0%,100%{opacity:0} 10%{opacity:0.5} 40%{opacity:0.15} 70%{opacity:0} } | |
| .anim-nt { animation: pulseNt 2.2s ease-in-out infinite 0.3s; } | |
| @keyframes pulseDa { 0%,100%{opacity:0} 15%{opacity:0.4} 55%{opacity:0.1} 85%{opacity:0} } | |
| .anim-da { animation: pulseDa 2.5s ease-in-out infinite 0.8s; } | |
| @keyframes pulse5ht { 0%,100%{opacity:0} 20%{opacity:0.35} 60%{opacity:0.08} 90%{opacity:0} } | |
| .anim-5ht { animation: pulse5ht 2.8s ease-in-out infinite 1.1s; } | |
| @keyframes floatSlow { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-4px)} } | |
| .float-slow { animation: floatSlow 5s ease-in-out infinite; } | |
| .circuit-line { | |
| stroke-dasharray: 6 8; animation: dashMove 3s linear infinite; | |
| } | |
| @keyframes dashMove { to { stroke-dashoffset: -28; } } | |
| /* ── Clickables ── */ | |
| .clickable-zone { | |
| cursor: pointer; transition: all 0.3s ease; | |
| } | |
| .clickable-zone:hover { filter: brightness(1.2) drop-shadow(0 0 6px rgba(45,212,191,0.3)); } | |
| .clickable-zone:active { transform: scale(0.98); } | |
| /* ── Panel ── */ | |
| .detail-panel { | |
| backdrop-filter: blur(24px) saturate(1.6); | |
| background: rgba(17, 24, 39, 0.78); | |
| border: 1px solid rgba(45, 212, 191, 0.12); | |
| box-shadow: 0 25px 60px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.03); | |
| transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1); | |
| } | |
| .detail-panel.open { opacity: 1; visibility: visible; transform: translateY(0) scale(1); } | |
| .detail-panel.closed { opacity: 0; visibility: hidden; transform: translateY(8px) scale(0.98); } | |
| /* ── Gene cards ── */ | |
| .gene-card { | |
| background: rgba(17, 24, 39, 0.55); | |
| border: 1px solid rgba(148, 163, 184, 0.06); | |
| transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); | |
| position: relative; overflow: hidden; | |
| } | |
| .gene-card::before { | |
| content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; | |
| background: linear-gradient(90deg, transparent 15%, rgba(45,212,191,0.2) 50%, transparent 85%); | |
| opacity: 0; transition: opacity 0.3s; | |
| } | |
| .gene-card:hover::before { opacity: 1; } | |
| .gene-card:hover { | |
| border-color: rgba(45, 212, 191, 0.15); | |
| background: rgba(17, 24, 39, 0.75); | |
| transform: translateY(-3px); | |
| box-shadow: 0 12px 32px rgba(0,0,0,0.3), 0 0 0 1px rgba(45,212,191,0.06); | |
| } | |
| .gene-card.active { | |
| border-color: rgba(45, 212, 191, 0.3); | |
| background: rgba(17, 24, 39, 0.85); | |
| box-shadow: 0 0 30px rgba(45, 212, 191, 0.06), 0 12px 32px rgba(0,0,0,0.3); | |
| } | |
| .gene-card.active::before { opacity: 1; } | |
| /* ── Scrollbar ── */ | |
| ::-webkit-scrollbar { width: 5px; } | |
| ::-webkit-scrollbar-track { background: transparent; } | |
| ::-webkit-scrollbar-thumb { background: #334155; border-radius: 10px; } | |
| ::-webkit-scrollbar-thumb:hover { background: #475569; } | |
| /* ── Section divider ── */ | |
| .section-divider { | |
| width: 48px; height: 1px; | |
| background: linear-gradient(90deg, transparent, #2dd4bf, transparent); | |
| margin: 0 auto; opacity: 0.3; | |
| } | |
| /* ── Misc ── */ | |
| .mono-label { font-family: 'JetBrains Mono', monospace; font-size: 0.68rem; letter-spacing: 0.04em; } | |
| .noise-grain { | |
| position: fixed; inset: 0; pointer-events: none; z-index: 9999; opacity: 0.018; | |
| background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); | |
| } | |
| /* Mobile gene drawer */ | |
| .gene-drawer { | |
| transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); | |
| } | |
| .gene-drawer.closed { transform: translateX(100%); } | |
| .gene-drawer.open { transform: translateX(0); } | |
| /* Slide overlay */ | |
| .slide-overlay { | |
| transition: opacity 0.3s ease; | |
| } | |
| </style> | |
| </head> | |
| <body class="relative"> | |
| <div class="field-bg"></div> | |
| <div class="noise-grain"></div> | |
| <!-- ═══════════════════════════════════════════════ --> | |
| <!-- NAVIGATION --> | |
| <!-- ═══════════════════════════════════════════════ --> | |
| <nav class="fixed top-0 left-0 right-0 z-50 backdrop-blur-xl border-b border-white/[0.04]" style="background: rgba(10,14,26,0.7);"> | |
| <div class="max-w-6xl mx-auto px-5 sm:px-8 h-14 flex items-center justify-between"> | |
| <div class="flex items-center gap-3"> | |
| <div class="w-6 h-6 rounded-md flex items-center justify-center" style="background: linear-gradient(135deg, #0d9488 0%, #2dd4bf 100%); box-shadow: 0 0 12px rgba(45,212,191,0.25);"> | |
| <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"> | |
| <path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10"/> | |
| <path d="M12 6v6l4 2"/> | |
| </svg> | |
| </div> | |
| <span class="text-xs font-semibold tracking-[0.15em] text-slate-400 uppercase">Attentional Synapse</span> | |
| </div> | |
| <div class="flex items-center gap-5"> | |
| <div class="hidden sm:flex items-center gap-5 text-[11px] tracking-wider uppercase text-slate-500"> | |
| <a href="#synapse" class="hover:text-teal-400 transition-colors duration-300">Interactive</a> | |
| <a href="#genes" class="hover:text-teal-400 transition-colors duration-300">Genes</a> | |
| <a href="#systems" class="hover:text-teal-400 transition-colors duration-300">Systems</a> | |
| </div> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" rel="noopener noreferrer" | |
| class="text-[10px] tracking-wider text-teal-400/60 hover:text-teal-300 transition-colors duration-300 font-medium uppercase"> | |
| Built with anycoder | |
| </a> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- ═══════════════════════════════════════════════ --> | |
| <!-- HERO --> | |
| <!-- ═══════════════════════════════════════════════ --> | |
| <header class="relative pt-28 pb-16 px-5 sm:px-8"> | |
| <div class="max-w-4xl mx-auto text-center"> | |
| <div class="inline-flex items-center gap-2 px-3.5 py-1.5 rounded-full border border-teal-500/15 bg-teal-500/5 mb-7"> | |
| <span class="w-1.5 h-1.5 rounded-full bg-teal-400 animate-pulse"></span> | |
| <span class="text-[10px] font-medium tracking-[0.12em] uppercase text-teal-400/80">Molecular Neuroscience Explorer</span> | |
| </div> | |
| <h1 class="text-[2.6rem] sm:text-5xl lg:text-6xl font-bold leading-[1.1] tracking-tight mb-5"> | |
| <span class="text-slate-200">The Attentional</span> | |
| <span class="block mt-1" style="background: linear-gradient(135deg, #2dd4bf 0%, #0d9488 45%, #6366f1 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">Synapse</span> | |
| </h1> | |
| <p class="font-serif text-base sm:text-lg text-slate-400 leading-relaxed max-w-2xl mx-auto mb-4"> | |
| Interactive molecular model of cortico-striatal-thalamo-cortical attention circuits. Explore the electrophysiology, neuroanatomy, and genetic architecture of selective attention at the synaptic scale. | |
| </p> | |
| <div class="flex items-center justify-center gap-3 text-[11px] text-slate-500 font-mono tracking-wide"> | |
| <span class="px-2.5 py-1 rounded-md bg-slate-800/60 border border-white/[0.04]">n=12 genes</span> | |
| <span class="px-2.5 py-1 rounded-md bg-slate-800/60 border border-white/[0.04]">5 pathways</span> | |
| <span class="px-2.5 py-1 rounded-md bg-slate-800/60 border border-white/[0.04]">CSTC loops</span> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- ═══════════════════════════════════════════════ --> | |
| <!-- INTERACTIVE SYNAPSE DIAGRAM --> | |
| <!-- ═══════════════════════════════════════════════ --> | |
| <section id="synapse" class="relative px-4 sm:px-8 pb-8"> | |
| <div class="max-w-6xl mx-auto"> | |
| <div class="flex items-center gap-3 mb-6"> | |
| <div class="w-7 h-7 rounded-lg bg-teal-500/10 flex items-center justify-center border border-teal-500/15"> | |
| <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#2dd4bf" stroke-width="2" stroke-linecap="round"> | |
| <circle cx="12" cy="12" r="3"/><path d="M12 2v4m0 12v4m10-10h-4M6 12H2"/> | |
| </svg> | |
| </div> | |
| <div> | |
| <h2 class="text-sm font-semibold tracking-wide text-slate-200">Interactive Synapse</h2> | |
| <p class="text-[11px] text-slate-500 font-mono">Click components to explore molecular mechanisms</p> | |
| </div> | |
| </div> | |
| <!-- Gene selector strip --> | |
| <div class="mb-5 flex flex-wrap gap-1.5" id="geneSelector"> | |
| <button onclick="focusGene('all')" class="gene-selector-btn active px-3 py-1.5 rounded-md text-[11px] font-mono font-medium border transition-all duration-250 bg-teal-500/10 border-teal-500/25 text-teal-300" data-gene="all">Overview</button> | |
| <button onclick="focusGene('snap25')" class="gene-selector-btn px-3 py-1.5 rounded-md text-[11px] font-mono font-medium border transition-all duration-250 bg-slate-800/40 border-white/[0.04] text-slate-400 hover:text-slate-200" data-gene="snap25">SNAP25</button> | |
| <button onclick="focusGene('voltage')" class="gene-selector-btn px-3 py-1.5 rounded-md text-[11px] font-mono font-medium border transition-all duration-250 bg-slate-800/40 border-white/[0.04] text-slate-400 hover:text-slate-200" data-gene="voltage">CaV2.1</button> | |
| <button onclick="focusGene('drd2')" class="gene-selector-btn px-3 py-1.5 rounded-md text-[11px] font-mono font-medium border transition-all duration-250 bg-slate-800/40 border-white/[0.04] text-slate-400 hover:text-slate-200" data-gene="drd2">DRD2</button> | |
| <button onclick="focusGene('htr1b')" class="gene-selector-btn px-3 py-1.5 rounded-md text-[11px] font-mono font-medium border transition-all duration-250 bg-slate-800/40 border-white/[0.04] text-slate-400 hover:text-slate-200" data-gene="htr1b">HTR1B</button> | |
| <button onclick="focusGene('chrna4')" class="gene-selector-btn px-3 py-1.5 rounded-md text-[11px] font-mono font-medium border transition-all duration-250 bg-slate-800/40 border-white/[0.04] text-slate-400 hover:text-slate-200" data-gene="chrna4">CHRNA4</button> | |
| <button onclick="focusGene('comt')" class="gene-selector-btn px-3 py-1.5 rounded-md text-[11px] font-mono font-medium border transition-all duration-250 bg-slate-800/40 border-white/[0.04] text-slate-400 hover:text-slate-200" data-gene="comt">COMT</button> | |
| <button onclick="focusGene('fkbp5')" class="gene-selector-btn px-3 py-1.5 rounded-md text-[11px] font-mono font-medium border transition-all duration-250 bg-slate-800/40 border-white/[0.04] text-slate-400 hover:text-slate-200" data-gene="fkbp5">FKBP5</button> | |
| <button onclick="focusGene('disc1')" class="gene-selector-btn px-3 py-1.5 rounded-md text-[11px] font-mono font-medium border transition-all duration-250 bg-slate-800/40 border-white/[0.04] text-slate-400 hover:text-slate-200" data-gene="disc1">DISC1</button> | |
| <button onclick="focusGene('immune')" class="gene-selector-btn px-3 py-1.5 rounded-md text-[11px] font-mono font-medium border transition-all duration-250 bg-slate-800/40 border-white/[0.04] text-slate-400 hover:text-slate-200" data-gene="immune">Immune</button> | |
| </div> | |
| <div class="relative grid grid-cols-1 lg:grid-cols-[1fr_380px] gap-5"> | |
| <!-- SVG Diagram --> | |
| <div class="synapse-diagram relative"> | |
| <div class="rounded-2xl overflow-hidden border border-white/[0.04] bg-slate-900/40" style="box-shadow: 0 0 40px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.02);"> | |
| <svg viewBox="0 0 860 620" id="synapseSvg"> | |
| <defs> | |
| <filter id="glow-receptor" x="-30%" y="-30%" width="160%" height="160%"> | |
| <feGaussianBlur stdDeviation="3" result="blur"/> | |
| <feComposite in="SourceGraphic" in2="blur" operator="over"/> | |
| </filter> | |
| <filter id="glow-ca" x="-50%" y="-50%" width="200%" height="200%"> | |
| <feGaussianBlur stdDeviation="4" result="blur"/> | |
| <feComposite in="SourceGraphic" in2="blur" operator="over"/> | |
| </filter> | |
| <radialGradient id="grad-vesicle-blue" cx="30%" cy="30%" r="70%"> | |
| <stop offset="0%" stop-color="#7dd3fc" stop-opacity="0.9"/> | |
| <stop offset="100%" stop-color="#38bdf8" stop-opacity="0.5"/> | |
| </radialGradient> | |
| <radialGradient id="grad-vesicle-red" cx="30%" cy="30%" r="70%"> | |
| <stop offset="0%" stop-color="#fda4af" stop-opacity="0.9"/> | |
| <stop offset="100%" stop-color="#f87171" stop-opacity="0.5"/> | |
| </radialGradient> | |
| <linearGradient id="grad-membrane" x1="0" y1="0" x2="0" y2="1"> | |
| <stop offset="0%" stop-color="#2dd4bf" stop-opacity="0.5"/> | |
| <stop offset="100%" stop-color="#0d9488" stop-opacity="0.2"/> | |
| </linearGradient> | |
| <clipPath id="cleft-clip"> | |
| <rect x="140" y="180" width="580" height="130" rx="3"/> | |
| </clipPath> | |
| </defs> | |
| <!-- ── PRESYNAPTIC BOUTON ── --> | |
| <g class="float-slow"> | |
| <!-- Bouton body --> | |
| <path class="membrane" d="M 140 180 Q 110 160 130 120 Q 150 90 200 80 Q 280 70 350 80 Q 430 90 490 100 Q 550 110 610 105 Q 680 100 720 120 Q 750 140 740 180"/> | |
| <path class="membrane-hl" d="M 140 180 Q 110 160 130 120 Q 150 90 200 80 Q 280 70 350 80 Q 430 90 490 100 Q 550 110 610 105 Q 680 100 720 120 Q 750 140 740 180"/> | |
| <!-- Cytoplasm fill --> | |
| <path fill="var(--cell-fill)" opacity="0.4" d="M 140 180 Q 110 160 130 120 Q 150 90 200 80 Q 280 70 350 80 Q 430 90 490 100 Q 550 110 610 105 Q 680 100 720 120 Q 750 140 740 180 Z"/> | |
| <path fill="var(--cell-fill-strong)" opacity="0.2" d="M 140 180 Q 110 160 130 120 Q 150 90 200 80 Q 280 70 350 80 Q 430 90 490 100 Q 550 110 610 105 Q 680 100 720 120 Q 750 140 740 180 Z"/> | |
| <!-- Microtubules --> | |
| <path class="microtubule" d="M 180 130 Q 260 110 360 125 Q 460 140 540 115 Q 600 95 660 110"/> | |
| <path class="microtubule" d="M 210 155 Q 290 135 390 150 Q 490 165 570 140 Q 630 120 690 135"/> | |
| </g> | |
| <!-- ── SYNAPTIC CLEFT ── --> | |
| <rect class="cleft-layer" x="140" y="180" width="580" height="130" rx="3"/> | |
| <rect fill="none" stroke="rgba(56,189,248,0.06)" stroke-width="0.5" x="140" y="180" width="580" height="130" rx="3"/> | |
| <!-- Cleft label --> | |
| <text class="label-text" x="430" y="245">synaptic cleft</text> | |
| <!-- ── POSTSYNAPTIC DENSITY & DENDRITIC SPINE ── --> | |
| <g> | |
| <!-- Dendritic spine body --> | |
| <path class="membrane" d="M 140 310 Q 120 350 140 400 Q 160 440 200 450 Q 260 460 320 445 Q 380 430 430 440 Q 490 450 540 435 Q 600 420 660 430 Q 720 440 750 410 Q 770 380 740 340 Q 720 310 740 310"/> | |
| <path class="membrane-hl" d="M 140 310 Q 120 350 140 400 Q 160 440 200 450 Q 260 460 320 445 Q 380 430 430 440 Q 490 450 540 435 Q 600 420 660 430 Q 720 440 750 410 Q 770 380 740 340 Q 720 310 740 310"/> | |
| <!-- PSD shade --> | |
| <path class="psd-shade" d="M 140 310 Q 160 320 200 315 Q 250 308 300 312 Q 360 318 420 314 Q 480 310 540 316 Q 600 322 660 318 Q 700 314 740 310 L 740 350 Q 700 355 660 350 Q 600 345 540 350 Q 480 355 420 350 Q 360 345 300 350 Q 250 355 200 350 Q 160 345 140 340 Z"/> | |
| <path class="psd-ring" d="M 140 310 Q 160 320 200 315 Q 250 308 300 312 Q 360 318 420 314 Q 480 310 540 316 Q 600 322 660 318 Q 700 314 740 310"/> | |
| <!-- Dendritic shaft --> | |
| <path class="membrane-sec" d="M 740 340 Q 780 350 800 380 Q 820 410 800 440 Q 780 470 740 460"/> | |
| </g> | |
| <!-- ── VOLTAGE-GATED Ca2+ CHANNELS ── --> | |
| <g class="clickable-zone" data-part="voltage" onclick="showDetail('voltage')"> | |
| <!-- Channel 1 (left) --> | |
| <rect class="channel-body" x="205" y="155" width="16" height="28" rx="4"/> | |
| <rect class="channel-open" x="209" y="175" width="8" height="8" rx="2"/> | |
| <rect class="channel-ring" x="203" y="153" width="20" height="32" rx="5"/> | |
| <rect class="channel-inner" x="207" y="157" width="12" height="24" rx="3"/> | |
| <!-- Channel 2 (right) --> | |
| <rect class="channel-body" x="635" y="152" width="16" height="28" rx="4"/> | |
| <rect class="channel-open" x="639" y="172" width="8" height="8" rx="2"/> | |
| <rect class="channel-ring" x="633" y="150" width="20" height="32" rx="5"/> | |
| <rect class="channel-inner" x="637" y="154" width="12" height="24" rx="3"/> | |
| <!-- Gate label --> | |
| <text class="label-text" x="265" y="148">voltage-gated Ca²⁺</text> | |
| <!-- Ca2+ pulse --> | |
| <circle class="pulse-ca anim-ca" cx="213" cy="145" r="10" filter="url(#glow-ca)"/> | |
| <circle class="pulse-ca anim-ca" cx="643" cy="142" r="10" filter="url(#glow-ca)" style="animation-delay:0.6s"/> | |
| </g> | |
| <!-- ── SNARE COMPLEX / SNAP25 ── --> | |
| <g class="clickable-zone" data-part="snap25" onclick="showDetail('snap25')"> | |
| <!-- Complex cluster --> | |
| <rect class="snap25-box" x="285" y="140" width="40" height="16" rx="3"/> | |
| <rect class="snap25-box" x="325" y="145" width="38" height="16" rx="3"/> | |
| <rect class="snap25-box" x="360" y="138" width="35" height="16" rx="3"/> | |
| <text class="snap25-label" x="348" y="150">SNARE</text> | |
| <text class="label-text" x="348" y="128">SNAP25</text> | |
| </g> | |
| <!-- ── SYNAPTIC VESICLES ── --> | |
| <g class="clickable-zone" data-part="vesicles" onclick="showDetail('vesicles')"> | |
| <!-- Docked vesicle (center, releasing) --> | |
| <g> | |
| <circle cx="430" cy="148" r="22" class="vesicle-blue" style="fill:url(#grad-vesicle-blue);"/> | |
| <circle cx="430" cy="148" r="22" class="vesicle-ring" color="#38bdf8"/> | |
| <circle cx="425" cy="143" r="3" class="vesicle-dots"/> | |
| <circle cx="435" cy="152" r="2.5" class="vesicle-dots"/> | |
| <circle cx="422" cy="152" r="2" class="vesicle-dots"/> | |
| <text class="vesicle-nt" x="430" y="149">DA</text> | |
| <!-- Release particles --> | |
| <circle class="pulse-nt anim-nt" cx="430" cy="168" r="3"/> | |
| <circle class="pulse-nt anim-nt" cx="422" cy="173" r="2.5" style="animation-delay:0.2s"/> | |
| <circle class="pulse-nt anim-nt" cx="438" cy="170" r="2" style="animation-delay:0.4s"/> | |
| </g> | |
| <!-- Vesicle 2 (left, DA) --> | |
| <g style="transform:translate(0,0)"> | |
| <circle cx="260" cy="125" r="14" class="vesicle-blue" style="fill:url(#grad-vesicle-blue);"/> | |
| <circle cx="260" cy="125" r="14" class="vesicle-ring" color="#38bdf8"/> | |
| <text class="vesicle-nt" x="260" y="127">DA</text> | |
| </g> | |
| <!-- Vesicle 3 (right, 5-HT) --> | |
| <g> | |
| <circle cx="580" cy="130" r="14" class="vesicle-red" style="fill:url(#grad-vesicle-red);"/> | |
| <circle cx="580" cy="130" r="14" class="vesicle-ring" color="#f87171"/> | |
| <text class="vesicle-nt" x="580" y="132">5-HT</text> | |
| </g> | |
| <!-- Vesicle 4 (top, ACh) --> | |
| <g> | |
| <circle cx="490" cy="95" r="12" class="vesicle-blue" style="fill:url(#grad-vesicle-blue); opacity:0.6;"/> | |
| <circle cx="490" cy="95" r="12" class="vesicle-ring" color="#a78bfa"/> | |
| <text class="vesicle-nt" x="490" y="96">ACh</text> | |
| </g> | |
| </g> | |
| <!-- ── POSTSYNAPTIC RECEPTORS ── --> | |
| <!-- DRD2 receptor --> | |
| <g class="clickable-zone" data-part="drd2" onclick="showDetail('drd2')"> | |
| <circle class="receptor-glow" cx="340" cy="310" r="28"/> | |
| <path class="receptor-outer" d="M 328 300 Q 340 295 352 300 L 352 322 Q 340 327 328 322 Z"/> | |
| <path class="receptor-inner" d="M 333 304 Q 340 301 347 304 L 347 318 Q 340 321 333 318 Z"/> | |
| <text class="label-text" x="340" y="285">DRD2</text> | |
| <!-- DA diffusion pulse --> | |
| <circle class="pulse-da anim-da" cx="340" cy="275" r="8" filter="url(#glow-ca)"/> | |
| </g> | |
| <!-- HTR1B receptor --> | |
| <g class="clickable-zone" data-part="htr1b" onclick="showDetail('htr1b')"> | |
| <circle class="receptor-glow" cx="510" cy="308" r="26"/> | |
| <path class="receptor-outer" d="M 498 298 Q 510 293 522 298 L 522 320 Q 510 325 498 320 Z"/> | |
| <path class="receptor-inner" d="M 503 302 Q 510 299 517 302 L 517 316 Q 510 319 503 316 Z"/> | |
| <text class="label-text" x="510" y="283">HTR1B</text> | |
| <!-- 5-HT diffusion pulse --> | |
| <circle class="pulse-5ht anim-5ht" cx="510" cy="273" r="7" filter="url(#glow-ca)"/> | |
| </g> | |
| <!-- CHRNA4 (nAChR) receptor --> | |
| <g class="clickable-zone" data-part="chrna4" onclick="showDetail('chrna4')"> | |
| <circle class="receptor-glow" cx="220" cy="312" r="24"/> | |
| <path class="receptor-outer" d="M 210 304 Q 220 300 230 304 L 232 320 Q 222 324 212 320 Z"/> | |
| <path class="receptor-inner" d="M 214 307 Q 220 304 226 307 L 227 317 Q 221 320 215 317 Z"/> | |
| <text class="label-text" x="220" y="288">CHRNA4</text> | |
| </g> | |
| <!-- COMT label (extracellular enzyme) --> | |
| <g class="clickable-zone" data-part="comt" onclick="showDetail('comt')"> | |
| <rect class="snap25-box" x="600" y="205" width="36" height="14" rx="2" style="stroke:#2dd4bf; opacity:0.45;"/> | |
| <text class="label-text" x="618" y="213" style="fill:#5eead4; font-size:4.5px;">COMT</text> | |
| <text class="label-text" x="618" y="228">degradation</text> | |
| </g> | |
| <!-- FKBP5 (nuclear/stress pathway indicator) --> | |
| <g class="clickable-zone" data-part="fkbp5" onclick="showDetail('fkbp5')"> | |
| <circle cx="620" cy="380" r="10" fill="rgba(251,191,36,0.12)" stroke="#fbbf24" stroke-width="1" opacity="0.5"/> | |
| <text class="label-text" x="620" y="398">FKBP5</text> | |
| </g> | |
| <!-- DRC2 / Scaffold --> | |
| <g class="clickable-zone" data |