:root{--bp-mobile: 640px;--bp-tablet: 1024px;--bp-desktop: 1280px;--space-xs: .25rem;--space-sm: .5rem;--space-md: 1rem;--space-lg: 1.5rem;--space-xl: 2rem;--space-2xl: 3rem;--text-xs: .75rem;--text-sm: .875rem;--text-base: 1rem;--text-lg: 1.125rem;--text-xl: 1.25rem;--text-2xl: 1.5rem;--text-3xl: 1.875rem;--text-4xl: 2.25rem;--touch-min: 44px;--touch-comfortable: 48px;--duration-fast: .15s;--duration-normal: .3s;--duration-slow: .5s;--easing: cubic-bezier(.4, 0, .2, 1)}@media (max-width: 639px){h1{font-size:var(--text-2xl);line-height:1.3}h2{font-size:var(--text-xl);line-height:1.4}h3{font-size:var(--text-lg);line-height:1.5}p{font-size:var(--text-base)}body{padding:var(--space-md)}.layout-grid{grid-template-columns:1fr;gap:var(--space-md)}.layout-two-col,.layout-three-col{grid-template-columns:1fr}.hero{padding:var(--space-lg) var(--space-md);text-align:center}.hero-title{font-size:var(--text-2xl)}.hero-lead{font-size:var(--text-base)}.panel{width:100%;margin-bottom:var(--space-lg)}.panel-grid{grid-template-columns:1fr}button,a.button{min-height:var(--touch-min);min-width:var(--touch-min);padding:var(--space-md) var(--space-lg);font-size:var(--text-base)}.diagram-container{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}.timeline{flex-direction:column}.timeline-item{min-width:100%}.nav-desktop{display:none}.nav-mobile{display:block}.search-input{width:100%;margin-bottom:var(--space-md)}.component-grid{grid-template-columns:1fr}.component-card{padding:var(--space-md)}.animation-heavy{animation-duration:var(--duration-fast)}}@media (min-width: 640px) and (max-width: 1023px){h1{font-size:var(--text-3xl);line-height:1.3}h2{font-size:var(--text-2xl);line-height:1.4}h3{font-size:var(--text-lg);line-height:1.5}body{padding:var(--space-lg)}.layout-grid{grid-template-columns:repeat(2,1fr);gap:var(--space-lg)}.layout-two-col,.layout-three-col{grid-template-columns:repeat(2,1fr)}.hero{padding:var(--space-2xl) var(--space-lg)}.hero-title{font-size:var(--text-3xl)}.hero-lead{font-size:var(--text-lg)}.panel{width:calc(50% - var(--space-md))}.panel-grid{grid-template-columns:repeat(2,1fr)}button,a.button{min-height:var(--touch-comfortable);padding:var(--space-md) var(--space-lg)}.diagram-container{overflow-x:auto;overflow-y:hidden}.timeline{flex-direction:row;overflow-x:auto}.timeline-item{min-width:250px}.nav-desktop,.nav-mobile{display:block}.search-input{max-width:400px}.component-grid{grid-template-columns:repeat(2,1fr)}.component-card{padding:var(--space-lg)}}@media (min-width: 1024px){h1{font-size:var(--text-4xl);line-height:1.2}h2{font-size:var(--text-3xl);line-height:1.3}h3{font-size:var(--text-xl);line-height:1.5}body{padding:var(--space-2xl)}.layout-grid{grid-template-columns:repeat(3,1fr);gap:var(--space-2xl)}.layout-two-col{grid-template-columns:repeat(2,1fr)}.layout-three-col{grid-template-columns:repeat(3,1fr)}.hero{padding:var(--space-2xl)}.hero-title{font-size:var(--text-4xl)}.hero-lead{font-size:var(--text-lg)}.panel{width:calc(50% - var(--space-xl))}.panel-grid{grid-template-columns:repeat(2,1fr);gap:var(--space-xl)}button,a.button{min-height:44px;padding:var(--space-md) var(--space-xl)}.diagram-container{overflow:visible;width:100%}.timeline{flex-direction:row;overflow:visible}.timeline-item{min-width:auto;flex:1}.nav-desktop{display:flex}.nav-mobile{display:none}.search-input{max-width:500px}.component-grid{grid-template-columns:repeat(3,1fr)}.component-card{padding:var(--space-xl);transition:transform var(--duration-normal) var(--easing),box-shadow var(--duration-normal) var(--easing)}.component-card:hover{transform:translateY(-4px);box-shadow:0 20px 25px #0000001a}}.hide-mobile{display:none}@media (min-width: 640px){.hide-mobile{display:block}}.hide-tablet{display:none}@media (min-width: 1024px){.hide-tablet{display:block}}.show-mobile{display:block}@media (min-width: 640px){.show-mobile{display:none}}.show-tablet{display:none}@media (min-width: 640px) and (max-width: 1023px){.show-tablet{display:block}}.show-desktop{display:none}@media (min-width: 1024px){.show-desktop{display:block}}.touch-expand:before{content:"";position:absolute;top:-8px;left:-8px;right:-8px;bottom:-8px}.text-responsive{font-size:clamp(var(--text-base),1vw + .5rem,var(--text-2xl))}@supports (scroll-behavior: smooth){html{scroll-behavior:smooth}}@media (prefers-reduced-motion: reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}@supports (padding: max(0px)){body{padding-left:max(var(--space-md),env(safe-area-inset-left));padding-right:max(var(--space-md),env(safe-area-inset-right));padding-top:max(var(--space-md),env(safe-area-inset-top));padding-bottom:max(var(--space-md),env(safe-area-inset-bottom))}}@media print{body{background:#fff}.no-print{display:none}a{text-decoration:underline}}@keyframes particle-flow{0%{offset-distance:0%;opacity:1}to{offset-distance:100%;opacity:0}}@keyframes particle-pulse{0%,to{r:3px;opacity:.8}50%{r:5px;opacity:1}}@keyframes particle-glow{0%{filter:drop-shadow(0 0 2px rgba(59,130,246,.5))}50%{filter:drop-shadow(0 0 8px rgba(59,130,246,.8))}to{filter:drop-shadow(0 0 2px rgba(59,130,246,.5))}}@keyframes card-expand-shadow{0%{box-shadow:0 1px 3px #0000001a}to{box-shadow:0 20px 25px -5px #00000026}}@keyframes card-expand-scale{0%{transform:scale(1)}to{transform:scale(1.02)}}@keyframes card-lift{0%{transform:translateY(0)}to{transform:translateY(-8px)}}@keyframes badge-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}@keyframes skeleton-loading{0%{background-position:-200% 0}to{background-position:200% 0}}@keyframes skeleton-shimmer{0%{opacity:1}50%{opacity:.6}to{opacity:1}}@keyframes fade-in-up{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes fade-in-left{0%{opacity:0;transform:translate(-20px)}to{opacity:1;transform:translate(0)}}@keyframes fade-in-right{0%{opacity:0;transform:translate(20px)}to{opacity:1;transform:translate(0)}}@keyframes slide-in-down{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@keyframes flip-card{0%{transform:perspective(600px) rotateY(0)}to{transform:perspective(600px) rotateY(180deg)}}@keyframes tilt-card{0%,to{transform:perspective(1200px) rotateX(0) rotateY(0)}50%{transform:perspective(1200px) rotateX(2deg) rotateY(2deg)}}@keyframes rotate-y{0%{transform:rotateY(0)}to{transform:rotateY(360deg)}}@keyframes timeline-fill{0%{width:0}to{width:100%}}@keyframes step-complete{0%{transform:scale(.5);opacity:0}50%{transform:scale(1.2)}to{transform:scale(1);opacity:1}}@keyframes step-progress{0%{stroke-dashoffset:0}to{stroke-dashoffset:-1000}}@keyframes tooltip-pop{0%{opacity:0;transform:scale(.8) translateY(-10px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes tooltip-fade{0%{opacity:0}to{opacity:1}}@keyframes button-press{0%{transform:scale(1)}50%{transform:scale(.95)}to{transform:scale(1)}}@keyframes button-ripple{0%{transform:scale(0);opacity:.8}to{transform:scale(4);opacity:0}}@keyframes link-underline{0%{width:0;left:0}to{width:100%;left:0}}@keyframes search-focus{0%{box-shadow:0 0 #3b82f680}70%{box-shadow:0 0 0 10px #3b82f600}to{box-shadow:0 0 #3b82f600}}@keyframes input-fill{0%{background-position:-200% center}to{background-position:200% center}}.particle-flow{animation:particle-flow 2s ease-in forwards;animation-iteration-count:infinite}.particle-flow circle{animation:particle-glow 1.5s ease-in-out infinite}.hover-expand{transition:all .3s cubic-bezier(.4,0,.2,1)}.hover-expand:hover{transform:scale(1.02) translateY(-4px);box-shadow:0 20px 25px -5px #00000026}.hover-expand:active{animation:button-press .2s ease-out}.skeleton{background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0,#f0f0f0 75%);background-size:200% 100%;animation:skeleton-loading 2s infinite}.skeleton-text{height:16px;border-radius:4px;margin-bottom:8px}.skeleton-heading{height:24px;border-radius:4px;margin-bottom:12px}.skeleton-card{height:200px;border-radius:8px}.fade-in-on-scroll{opacity:0;animation:fade-in-up .6s ease-out forwards}.fade-in-left-on-scroll{opacity:0;animation:fade-in-left .6s ease-out forwards}.fade-in-right-on-scroll{opacity:0;animation:fade-in-right .6s ease-out forwards}.stagger-child{animation-fill-mode:both;animation-duration:.5s}.stagger-child:nth-child(1){animation-delay:0ms}.stagger-child:nth-child(2){animation-delay:.1s}.stagger-child:nth-child(3){animation-delay:.2s}.stagger-child:nth-child(4){animation-delay:.3s}.stagger-child:nth-child(5){animation-delay:.4s}.tilt-on-hover{perspective:1200px;transition:transform .3s ease-out}.tilt-on-hover:hover{animation:tilt-card .6s ease-out}button,a.btn{position:relative;transition:all .3s cubic-bezier(.4,0,.2,1);overflow:hidden}button:hover,a.btn:hover{transform:translateY(-2px)}button:active,a.btn:active{animation:button-press .2s ease-out}button.ripple,a.btn.ripple{position:relative;overflow:hidden}button.ripple:after,a.btn.ripple:after{content:"";position:absolute;width:20px;height:20px;border-radius:50%;background:#ffffff80;animation:button-ripple .6s ease-out}.search-input{transition:all .3s ease}.search-input:focus{animation:search-focus .6s ease-out}.badge{display:inline-block;animation:badge-pulse 2s ease-in-out infinite}.badge-new{animation:badge-pulse 3s ease-in-out infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.spinner{animation:spin 1s linear infinite}.spinner-slow{animation:spin 2s linear infinite}@keyframes pulse-soft{0%,to{opacity:1}50%{opacity:.7}}.pulse{animation:pulse-soft 2s ease-in-out infinite}@keyframes text-shimmer{0%{background-position:-1000px 0}to{background-position:1000px 0}}.text-shimmer{background:linear-gradient(90deg,#000,#888,#000);background-size:1000px 100%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:text-shimmer 2s infinite}.tooltip-container{position:relative;display:inline-block}.tooltip-text{visibility:hidden;width:200px;background-color:#333;color:#fff;text-align:center;border-radius:6px;padding:8px 12px;position:absolute;z-index:1000;bottom:125%;left:50%;transform:translate(-50%);opacity:0;animation:tooltip-fade .3s ease-out forwards;font-size:12px;white-space:nowrap}.tooltip-container:hover .tooltip-text{visibility:visible;animation:tooltip-pop .3s ease-out forwards}.transition-fast{transition:all .15s cubic-bezier(.4,0,.2,1)}.transition-normal{transition:all .3s cubic-bezier(.4,0,.2,1)}.transition-slow{transition:all .5s cubic-bezier(.4,0,.2,1)}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}*{box-sizing:border-box}html,body,#root{margin:0;padding:0;min-height:100vh;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{background:#fbf8f1;font-family:IBM Plex Sans,system-ui,sans-serif;transition:background-color .3s ease,color .3s ease}html.dark{color-scheme:dark}html.dark body{background:#1f2937;color:#f3f4f6}html,body{transition:background-color .3s ease,color .3s ease}code,pre{font-family:Courier New,monospace;background:#0000000d;padding:.2em .4em;border-radius:3px;overflow-x:auto}html.dark code,html.dark pre{background:#ffffff1a}