:root{--bg-primary: #0a0e1a;--bg-secondary: #111827;--bg-card: #1a2035;--text-primary: #f0f4ff;--text-secondary: #94a3b8;--text-muted: #64748b;--accent-elexacaftor: #f472b6;--accent-elexacaftor-glow: rgba(244, 114, 182, .3);--accent-tezacaftor: #60a5fa;--accent-tezacaftor-glow: rgba(96, 165, 250, .3);--accent-ivacaftor: #34d399;--accent-ivacaftor-glow: rgba(52, 211, 153, .3);--membrane-color: #fbbf24;--membrane-dark: #b45309;--mucus-healthy: rgba(52, 211, 153, .15);--mucus-sick: rgba(239, 68, 68, .2);--cftr-color: #a78bfa;--cftr-broken: #6b7280;--chloride-color: #38bdf8;--water-color: #7dd3fc;font-family:Inter,system-ui,-apple-system,sans-serif;line-height:1.5;color:var(--text-primary);background-color:var(--bg-primary)}*{margin:0;padding:0;box-sizing:border-box}body{min-height:100vh;overflow-x:hidden}#app{width:100%;max-width:1400px;margin:0 auto;padding:2rem 1.5rem}.header{text-align:center;margin-bottom:3rem}.header h1{font-size:2.5rem;font-weight:800;background:linear-gradient(135deg,var(--accent-elexacaftor),var(--accent-tezacaftor),var(--accent-ivacaftor));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:.5rem;letter-spacing:-.02em}.header .subtitle{font-size:1.1rem;color:var(--text-secondary);font-weight:300}.step-nav{display:flex;justify-content:center;gap:.5rem;margin-bottom:2.5rem;flex-wrap:wrap}.step-btn{padding:.7rem 1.5rem;border:2px solid var(--text-muted);border-radius:50px;background:transparent;color:var(--text-secondary);font-family:Inter,sans-serif;font-size:.9rem;font-weight:500;cursor:pointer;transition:all .4s cubic-bezier(.16,1,.3,1);position:relative;overflow:hidden}.step-btn:before{content:"";position:absolute;inset:0;border-radius:50px;opacity:0;transition:opacity .4s}.step-btn:hover{border-color:var(--text-secondary);color:var(--text-primary);transform:translateY(-1px)}.step-btn.active{color:#fff;border-color:transparent;transform:translateY(-1px);box-shadow:0 4px 20px #0000004d}.step-btn[data-step="0"].active{background:linear-gradient(135deg,#ef4444,#dc2626);box-shadow:0 4px 20px #ef44444d}.step-btn[data-step="1"].active{background:linear-gradient(135deg,var(--accent-elexacaftor),#ec4899);box-shadow:0 4px 20px var(--accent-elexacaftor-glow)}.step-btn[data-step="2"].active{background:linear-gradient(135deg,var(--accent-tezacaftor),#3b82f6);box-shadow:0 4px 20px var(--accent-tezacaftor-glow)}.step-btn[data-step="3"].active{background:linear-gradient(135deg,var(--accent-ivacaftor),#10b981);box-shadow:0 4px 20px var(--accent-ivacaftor-glow)}.step-btn[data-step="4"].active{background:linear-gradient(135deg,var(--accent-elexacaftor),var(--accent-tezacaftor),var(--accent-ivacaftor));box-shadow:0 4px 20px #60a5fa4d}.main-layout{display:grid;grid-template-columns:1fr 360px;gap:2rem;align-items:start}@media(max-width:1024px){.main-layout{grid-template-columns:1fr}}.viz-container{background:var(--bg-secondary);border-radius:20px;border:1px solid rgba(255,255,255,.06);overflow:hidden;position:relative}.viz-container svg{width:100%;height:auto;display:block}.info-panel{background:var(--bg-card);border-radius:20px;border:1px solid rgba(255,255,255,.06);padding:2rem;position:sticky;top:2rem}.info-panel h2{font-size:1.4rem;font-weight:700;margin-bottom:1rem;transition:color .4s}.info-panel .description{color:var(--text-secondary);font-size:.95rem;line-height:1.7;margin-bottom:1.5rem}.molecule-badge{display:inline-flex;align-items:center;gap:.4rem;padding:.3rem .8rem;border-radius:20px;font-size:.8rem;font-weight:600;margin-right:.4rem;margin-bottom:.4rem}.molecule-badge.elexacaftor{background:#f472b626;color:var(--accent-elexacaftor);border:1px solid rgba(244,114,182,.3)}.molecule-badge.tezacaftor{background:#60a5fa26;color:var(--accent-tezacaftor);border:1px solid rgba(96,165,250,.3)}.molecule-badge.ivacaftor{background:#34d39926;color:var(--accent-ivacaftor);border:1px solid rgba(52,211,153,.3)}.key-point{display:flex;align-items:flex-start;gap:.75rem;padding:.75rem 0;border-top:1px solid rgba(255,255,255,.05)}.key-point .icon{width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:.85rem;flex-shrink:0;margin-top:2px}.key-point .text{font-size:.88rem;color:var(--text-secondary);line-height:1.5}.key-point .text strong{color:var(--text-primary)}.legend{display:flex;flex-wrap:wrap;gap:1.2rem;justify-content:center;margin-top:2rem;padding:1.2rem;background:var(--bg-card);border-radius:14px;border:1px solid rgba(255,255,255,.06)}.legend-item{display:flex;align-items:center;gap:.5rem;font-size:.82rem;color:var(--text-secondary)}.legend-dot{width:12px;height:12px;border-radius:50%;border:2px solid}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}@keyframes pulse-glow{0%,to{opacity:.3}50%{opacity:.7}}@keyframes flow-right{0%{transform:translate(-20px);opacity:0}20%{opacity:1}80%{opacity:1}to{transform:translate(20px);opacity:0}}@keyframes channel-open{0%,to{transform:scaleX(1)}50%{transform:scaleX(1.3)}}.anim-float{animation:float 3s ease-in-out infinite}.anim-float-delay{animation:float 3s ease-in-out 1s infinite}.anim-pulse{animation:pulse-glow 2s ease-in-out infinite}.cell-membrane{transition:all .6s}.cftr-protein{transition:all .8s cubic-bezier(.16,1,.3,1)}.mucus-layer{transition:all 1s cubic-bezier(.16,1,.3,1)}.fade-enter{opacity:0;transform:translateY(10px)}.fade-active{opacity:1;transform:translateY(0);transition:all .5s cubic-bezier(.16,1,.3,1)}.footer{text-align:center;margin-top:3rem;padding:1.5rem;color:var(--text-muted);font-size:.8rem}.footer a{color:var(--accent-tezacaftor);text-decoration:none}@media(max-width:640px){#app{padding:1rem}.header h1{font-size:1.6rem}.step-btn{padding:.5rem 1rem;font-size:.8rem}.info-panel{padding:1.2rem}}