:root{--font-base: "Inter", -apple-system, sans-serif;--bg-color: #f8fafc;--text-main: #0f172a;--text-muted: #64748b;--border-light: #e2e8f0;--progress-color: #3b82f6;--scroll-pct: 0;--scroll-dec: 0}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-base);background-color:var(--bg-color);color:var(--text-main);min-height:400vh;scroll-behavior:smooth}.progress-top-bar{position:fixed;top:0;left:0;width:100%;height:6px;background-color:#e2e8f080;z-index:9999;backdrop-filter:blur(4px)}.progress-top-fill{height:100%;background-color:var(--progress-color);width:100%;transform-origin:left;transform:scaleX(var(--scroll-dec));transition:transform .1s ease-out,background-color .4s ease;border-radius:0 4px 4px 0;box-shadow:0 0 10px var(--progress-color)}.progress-circular{position:fixed;bottom:2rem;right:2rem;width:60px;height:60px;background:white;border-radius:50%;box-shadow:0 10px 25px -5px #0000001a,0 8px 10px -6px #0000001a;display:flex;align-items:center;justify-content:center;z-index:9998;cursor:pointer;transition:transform .3s cubic-bezier(.34,1.56,.64,1),box-shadow .3s ease}.progress-circular:hover{transform:translateY(-4px) scale(1.05);box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a}.progress-circular svg{position:absolute;top:0;left:0;width:100%;height:100%;transform:rotate(-90deg)}.ring-track{stroke:var(--border-light);stroke-width:4px;fill:none}.ring-fill{stroke:var(--progress-color);stroke-width:4px;fill:none;stroke-linecap:round;stroke-dasharray:163.36px;stroke-dashoffset:calc(163.36px - (163.36px * var(--scroll-dec)));transition:stroke-dashoffset .1s ease-out,stroke .4s ease}.progress-circular-icon{width:20px;height:20px;color:var(--text-main);transition:color .4s ease;z-index:2}.progress-circular.is-complete .progress-circular-icon{color:var(--progress-color)}.progress-circular.is-complete:hover .progress-circular-icon{animation:bounceUp 1s infinite}@keyframes bounceUp{0%,to{transform:translateY(0)}50%{transform:translateY(-4px)}}.progress-sidebar{position:fixed;top:50%;left:2rem;transform:translateY(-50%);display:flex;flex-direction:column;gap:2rem;z-index:9997}.progress-sidebar:before{content:"";position:absolute;top:10px;bottom:10px;left:20px;width:2px;background-color:var(--border-light);z-index:-1}.progress-sidebar-fill{position:absolute;top:10px;left:20px;width:2px;height:calc(var(--scroll-dec) * 100%);background-color:var(--progress-color);z-index:0;transition:height .1s ease-out,background-color .4s ease;transform-origin:top}.progress-node{width:42px;height:42px;border-radius:50%;background:white;border:2px solid var(--border-light);display:flex;align-items:center;justify-content:center;font-weight:600;font-size:.875rem;color:var(--text-muted);cursor:pointer;z-index:1;transition:all .3s cubic-bezier(.34,1.56,.64,1);text-decoration:none;box-shadow:0 2px 4px #0000000d}.progress-node:hover{transform:scale(1.1);border-color:var(--text-muted)}.progress-node.is-active{border-color:var(--progress-color);color:var(--progress-color);background-color:#fff;transform:scale(1.15);box-shadow:0 4px 10px -2px var(--progress-color)}.demo-content-wrapper{max-width:800px;margin:0 auto;padding:6rem 2rem;margin-left:max(4rem,calc(50% - 400px))}@media (max-width: 1024px){.progress-sidebar{display:none}.demo-content-wrapper{margin-left:auto;max-width:600px}}@media (max-width: 600px){.progress-circular{bottom:1rem;right:1rem;width:50px;height:50px}}.demo-section{min-height:85vh;margin-bottom:4rem;padding:4rem;background:white;border-radius:24px;border:1px solid var(--border-light);box-shadow:0 10px 30px -10px #0000000d;display:flex;flex-direction:column;justify-content:center;transition:border-color .4s ease}.demo-section[data-color="#3b82f6"]{border-top:6px solid #3b82f6}.demo-section[data-color="#10b981"]{border-top:6px solid #10b981}.demo-section[data-color="#8b5cf6"]{border-top:6px solid #8b5cf6}.demo-section[data-color="#f59e0b"]{border-top:6px solid #f59e0b}.section-badge{display:inline-block;padding:.5rem 1rem;background:#f1f5f9;color:var(--text-muted);border-radius:99px;font-size:.875rem;font-weight:600;margin-bottom:1.5rem;align-self:flex-start}.demo-title{font-size:clamp(2rem,5vw,3.5rem);font-weight:800;line-height:1.1;letter-spacing:-.02em;margin-bottom:1.5rem;color:var(--text-main)}.demo-text{font-size:1.125rem;line-height:1.7;color:var(--text-muted);margin-bottom:1.5rem}.demo-placeholder-img{width:100%;height:240px;background:#f1f5f9;border-radius:12px;margin:2rem 0}