:root{--bg-deep: #1a1a2e;--bg-mid: #232342;--bg-card: #2a2a4a;--bg-glow: #3d3d6b;--bg-overlay: #1a1a2e;--primary-1: #c9a0dc;--primary-2: #b8a9d9;--primary-3: #e8a4c9;--primary-4: #7eb8da;--primary-5: #8ad4d4;--primary-6: #f0c4a8;--accent-1: #a855f7;--accent-2: #ff6b9d;--accent-3: #64c8ff;--text-primary: #e8e0f0;--text-secondary: #c8c0d8;--text-muted: #9090b0;--font-heading: "Quicksand", sans-serif;--font-body: "Zen Maru Gothic", sans-serif;--font-mono: "Space Mono", monospace;--space-xs: .25rem;--space-sm: .5rem;--space-md: 1rem;--space-lg: 2rem;--space-xl: 4rem;--space-2xl: 8rem;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 20px;--radius-xl: 24px;--shadow-glow: 0 0 40px rgba(168, 85, 247, .15);--shadow-card: 0 20px 50px rgba(0, 0, 0, .3);--transition-fast: .15s ease;--transition-normal: .3s ease;--transition-slow: .5s ease}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-family:var(--font-body);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{background:var(--bg-deep);color:var(--text-primary);min-height:100vh}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:var(--bg-mid);border-radius:5px}::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--primary-1),var(--accent-1));border-radius:5px;border:2px solid var(--bg-mid)}::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,var(--accent-1),var(--accent-2))}::-webkit-scrollbar-corner{background:var(--bg-mid)}*{scrollbar-width:thin;scrollbar-color:var(--primary-1) var(--bg-mid)}h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);font-weight:700;line-height:1.3;color:var(--text-primary)}code,pre,.mono{font-family:var(--font-mono)}a{color:var(--primary-1);text-decoration:none;transition:color var(--transition-fast)}a:hover{color:var(--accent-1)}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}.particles,.glow,.edge-particle,.flowchart-connector .particle{display:none!important}}@media(max-width:768px){.flowchart-connector .particle,.edge-particle{display:none!important}.glow{animation:none!important;opacity:.15!important}.flowchart-section:hover{box-shadow:none!important}}.no-transitions,.no-transitions *,.no-transitions *:before,.no-transitions *:after{transition:none!important}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(max-width:768px){.hide-mobile{display:none!important}.full-width-mobile{width:100%!important}.stack-mobile{flex-direction:column!important}.compact-mobile{gap:var(--space-sm)!important;padding:var(--space-sm)!important}}@media(min-width:769px){.mobile-only{display:none!important}}body.modal-open{overflow:hidden}@supports (padding: max(0px)){.safe-area-bottom{padding-bottom:max(var(--space-lg),env(safe-area-inset-bottom))}.safe-area-top{padding-top:max(var(--space-lg),env(safe-area-inset-top))}}@media(hover:none)and (pointer:coarse){button,a,input[type=checkbox],input[type=radio]{min-height:44px;min-width:44px}.badge,.tag{min-height:auto;min-width:auto}}@media(hover:none)and (pointer:coarse),(max-width:768px){*{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}.nav,nav{background:var(--bg-mid)!important}}.particles,.atmosphere,.flowchart-connector,.edge-particle{contain:strict}.flowchart-section{contain:layout style}.particle,.glow,.edge-particle{will-change:transform,opacity;transform:translateZ(0)}.flowchart-container{display:flex;flex-direction:column;align-items:center;padding:0 var(--space-lg);max-width:1400px;margin:0 auto}.flowchart-section{position:relative;width:100%;border:1px solid rgba(201,160,220,.18);border-radius:var(--radius-xl);background:transparent;box-shadow:inset 0 0 80px #c9a0dc0f;transition:border-color var(--transition-normal),box-shadow var(--transition-normal)}.flowchart-section:hover{border-color:#c9a0dc66;box-shadow:inset 0 0 100px #a855f71a,0 0 40px #a855f71f}.flowchart-connector{position:relative;width:2px;height:50px;margin:-1px 0;background:linear-gradient(180deg,color-mix(in srgb,var(--primary-1) 30%,transparent),color-mix(in srgb,var(--accent-1) 40%,transparent),color-mix(in srgb,var(--primary-1) 30%,transparent));flex-shrink:0;z-index:1;overflow:visible}.flowchart-connector:before,.flowchart-connector:after{content:"";position:absolute;left:50%;transform:translate(-50%);width:8px;height:8px;border-radius:50%;background:var(--primary-1);opacity:.6;box-shadow:0 0 10px color-mix(in srgb,var(--primary-1) 40%,transparent);z-index:2}.flowchart-connector:before{top:-3px}.flowchart-connector:after{bottom:-3px}.flowchart-connector .particle{position:absolute;left:50%;top:0;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:#fff;opacity:0;box-shadow:0 0 4px #fff,0 0 8px var(--accent-1),0 0 16px var(--accent-1),0 0 24px var(--accent-1),0 0 32px color-mix(in srgb,var(--accent-1) 80%,transparent),0 0 48px color-mix(in srgb,var(--accent-1) 50%,transparent);z-index:3}@keyframes particle-flow{0%{top:0;opacity:0;transform:scale(.5)}10%{opacity:1;transform:scale(1)}90%{opacity:1;transform:scale(1)}to{top:calc(100% - 4px);opacity:0;transform:scale(.5)}}.flowchart-connector.active .particle{animation:particle-flow .8s ease-in-out forwards}.flowchart-connector.active .particle:nth-child(1){animation-delay:0s}.flowchart-connector.active .particle:nth-child(2){animation-delay:.2s;width:3px;height:3px;margin-left:-1.5px}.flowchart-connector.active .particle:nth-child(3){animation-delay:.4s;width:2px;height:2px;margin-left:-1px}.flowchart-connector.active{background:linear-gradient(180deg,color-mix(in srgb,var(--primary-1) 40%,transparent),color-mix(in srgb,var(--accent-1) 60%,transparent),color-mix(in srgb,var(--primary-1) 40%,transparent))}.flowchart-connector.active:before,.flowchart-connector.active:after{animation:dot-pulse .8s ease-out}@keyframes dot-pulse{0%{box-shadow:0 0 10px color-mix(in srgb,var(--primary-1) 40%,transparent);background:var(--primary-1)}50%{box-shadow:0 0 8px #fff,0 0 16px var(--accent-1),0 0 24px var(--accent-1),0 0 36px color-mix(in srgb,var(--accent-1) 60%,transparent);background:#fff}to{box-shadow:0 0 10px color-mix(in srgb,var(--primary-1) 40%,transparent);background:var(--primary-1)}}.flowchart-section.hero-section{border-color:#c9a0dc40;box-shadow:inset 0 0 100px #a855f714}.flowchart-section .edge-particle{position:absolute;width:3px;height:3px;border-radius:50%;background:#fff;opacity:0;pointer-events:none;box-shadow:0 0 4px #fff,0 0 8px var(--accent-1),0 0 16px var(--accent-1),0 0 24px var(--accent-1),0 0 32px color-mix(in srgb,var(--accent-1) 80%,transparent),0 0 48px color-mix(in srgb,var(--accent-1) 50%,transparent);z-index:10}@keyframes edge-top{0%{left:var(--start-pos, 20%);top:-3px;opacity:0;transform:scale(.5)}15%{opacity:1;transform:scale(1)}85%{opacity:1;transform:scale(1)}to{left:calc(var(--start-pos, 20%) + 15%);top:-3px;opacity:0;transform:scale(.5)}}@keyframes edge-right{0%{right:-3px;top:var(--start-pos, 20%);opacity:0;transform:scale(.5)}15%{opacity:1;transform:scale(1)}85%{opacity:1;transform:scale(1)}to{right:-3px;top:calc(var(--start-pos, 20%) + 15%);opacity:0;transform:scale(.5)}}@keyframes edge-bottom{0%{right:var(--start-pos, 20%);bottom:-3px;opacity:0;transform:scale(.5)}15%{opacity:1;transform:scale(1)}85%{opacity:1;transform:scale(1)}to{right:calc(var(--start-pos, 20%) + 15%);bottom:-3px;opacity:0;transform:scale(.5)}}@keyframes edge-left{0%{left:-3px;bottom:var(--start-pos, 20%);opacity:0;transform:scale(.5)}15%{opacity:1;transform:scale(1)}85%{opacity:1;transform:scale(1)}to{left:-3px;bottom:calc(var(--start-pos, 20%) + 15%);opacity:0;transform:scale(.5)}}.flowchart-section .edge-particle.animate-top{animation:edge-top .7s ease-out forwards}.flowchart-section .edge-particle.animate-right{animation:edge-right .7s ease-out forwards}.flowchart-section .edge-particle.animate-bottom{animation:edge-bottom .7s ease-out forwards}.flowchart-section .edge-particle.animate-left{animation:edge-left .7s ease-out forwards}@media(max-width:768px){.flowchart-container{padding:0 var(--space-md)}.flowchart-section{border-radius:var(--radius-lg)}.flowchart-connector{height:32px}}.stp-theme-picker{--stp-bg: var(--bg-card);--stp-bg-hover: var(--bg-hover);--stp-bg-active: color-mix(in srgb, var(--accent-1) 15%, transparent);--stp-border: var(--border);--stp-text: var(--text-primary);--stp-text-muted: var(--text-muted);--stp-accent: var(--accent-1);--stp-accent-glow: color-mix(in srgb, var(--accent-1) 30%, transparent)}.stp-trigger{background:linear-gradient(135deg,var(--primary-1),var(--accent-1))!important;color:var(--bg-deep)!important;box-shadow:0 4px 20px var(--stp-accent-glow),0 0 40px color-mix(in srgb,var(--accent-1) 10%,transparent)!important}.stp-trigger:hover{box-shadow:0 8px 30px var(--stp-accent-glow),0 0 60px color-mix(in srgb,var(--accent-1) 20%,transparent)!important}.stp-panel{background:linear-gradient(135deg,color-mix(in srgb,var(--bg-card) 95%,transparent),color-mix(in srgb,var(--bg-mid) 90%,transparent))!important;border-color:var(--border)!important;box-shadow:0 20px 60px color-mix(in srgb,var(--bg-deep) 60%,transparent)!important}.stp-header{border-bottom-color:var(--border)!important}.stp-title{color:var(--text-primary)!important}.stp-close{color:var(--text-muted)!important}.stp-close:hover{background:var(--bg-hover)!important;color:var(--text-primary)!important}.stp-list{scrollbar-color:var(--accent-1) transparent!important}.stp-list::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--accent-1) 50%,transparent)!important}.stp-list::-webkit-scrollbar-thumb:hover{background:var(--accent-1)!important}.stp-option{color:var(--text-primary)!important}.stp-option:hover{background:var(--bg-hover)!important}.stp-option.stp-active{background:color-mix(in srgb,var(--accent-1) 15%,transparent)!important}.stp-name{color:var(--text-primary)!important}.stp-desc{color:var(--text-muted)!important}.stp-check{color:var(--success)!important}.stp-horizontal .stp-check{background:var(--accent-1)!important}