:root{--brand-strategic-indigo: #243a8f;--color-primary: var(--brand-strategic-indigo);--color-primary-hover: #1f347c;--brand-midnight-charcoal: #1b1f2a;--color-foundation: var(--brand-midnight-charcoal);--color-dark: var(--brand-midnight-charcoal);--brand-signal-teal: #2cb6ad;--color-accent: var(--brand-signal-teal);--brand-warm-amber: #f2b705;--color-emphasis: var(--brand-warm-amber);--color-white: #ffffff;--color-soft-gray: #f4f6f8;--color-cool-gray: #cbd5e1;--color-slate-gray: #5b6675;--color-disabled: #9ca3af;--color-success: #16a34a;--color-warning: #d97706;--color-error: #dc2626;--color-info: var(--brand-signal-teal);--text-primary: var(--brand-midnight-charcoal);--text-secondary: var(--color-slate-gray);--text-muted: var(--color-slate-gray);--text-light: var(--color-white);--text-accent: var(--brand-strategic-indigo);--text-emphasis: var(--brand-warm-amber);--bg-primary: var(--color-white);--bg-secondary: var(--color-soft-gray);--bg-dark: var(--brand-midnight-charcoal);--bg-accent: var(--brand-strategic-indigo);--bg-surface: var(--color-white);--bg-overlay: rgba(27, 31, 42, .4);--border-light: var(--color-cool-gray);--border-medium: var(--color-slate-gray);--border-dark: var(--brand-midnight-charcoal);--border-accent: var(--brand-strategic-indigo);--gradient-primary: linear-gradient( 135deg, var(--brand-strategic-indigo) 0%, var(--brand-signal-teal) 100% );--gradient-secondary: linear-gradient( 135deg, var(--brand-midnight-charcoal) 0%, var(--brand-strategic-indigo) 100% );--gradient-accent: linear-gradient( 135deg, var(--brand-signal-teal) 0%, var(--brand-warm-amber) 100% );--gradient-subtle: linear-gradient( 135deg, var(--color-soft-gray) 0%, var(--color-cool-gray) 100% );--shadow-light: rgba(27, 31, 42, .08);--shadow-medium: rgba(27, 31, 42, .12);--shadow-dark: rgba(27, 31, 42, .16);--shadow-primary: rgba(36, 58, 143, .24);--shadow-accent: rgba(44, 182, 173, .24);--overlay-light: rgba(255, 255, 255, .95);--overlay-medium: rgba(255, 255, 255, .85);--overlay-dark: rgba(27, 31, 42, .6);--overlay-darker: rgba(27, 31, 42, .8);--glass-bg: rgba(255, 255, 255, .95);--glass-border: rgba(203, 213, 225, .3);--glass-backdrop: blur(12px);--hover-opacity: .9;--active-opacity: .95;--disabled-opacity: .4;--focus-ring: rgba(36, 58, 143, .3)}[data-theme=dark]{--bg-primary: var(--brand-midnight-charcoal);--bg-secondary: #252a36;--bg-surface: #2a3142;--text-primary: var(--color-white);--text-secondary: var(--color-cool-gray);--text-muted: var(--color-gray-400);--border-light: #3a4553;--border-medium: #4a5568;--border-dark: var(--color-slate-gray);--glass-bg: rgba(27, 31, 42, .95);--glass-border: rgba(91, 102, 117, .2);--bg-overlay: rgba(0, 0, 0, .6)}.text-primary{color:var(--text-primary)!important}.text-secondary{color:var(--text-secondary)!important}.text-muted{color:var(--text-muted)!important}.text-light{color:var(--text-light)!important}.text-accent{color:var(--text-accent)!important}.text-emphasis{color:var(--text-emphasis)!important}.text-strategic-indigo{color:var(--brand-strategic-indigo)!important}.text-signal-teal{color:var(--brand-signal-teal)!important}.text-warm-amber{color:var(--brand-warm-amber)!important}.text-midnight-charcoal{color:var(--brand-midnight-charcoal)!important}.bg-primary{background-color:var(--bg-primary)!important}.bg-secondary{background-color:var(--bg-secondary)!important}.bg-dark{background-color:var(--bg-dark)!important}.bg-accent{background-color:var(--bg-accent)!important}.bg-surface{background-color:var(--bg-surface)!important}.bg-strategic-indigo{background-color:var(--brand-strategic-indigo)!important}.bg-signal-teal{background-color:var(--brand-signal-teal)!important}.bg-warm-amber{background-color:var(--brand-warm-amber)!important}.bg-midnight-charcoal{background-color:var(--brand-midnight-charcoal)!important}.bg-gradient-primary{background:var(--gradient-primary)!important}.bg-gradient-secondary{background:var(--gradient-secondary)!important}.bg-gradient-accent{background:var(--gradient-accent)!important}.bg-gradient-subtle{background:var(--gradient-subtle)!important}.border-light{border-color:var(--border-light)!important}.border-medium{border-color:var(--border-medium)!important}.border-dark{border-color:var(--border-dark)!important}.border-accent{border-color:var(--border-accent)!important}.text-success{color:var(--color-success)!important}.text-warning{color:var(--color-warning)!important}.text-error{color:var(--color-error)!important}.text-info{color:var(--color-info)!important}.bg-success{background-color:var(--color-success)!important}.bg-warning{background-color:var(--color-warning)!important}.bg-error{background-color:var(--color-error)!important}.bg-info{background-color:var(--color-info)!important}:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:var(--text-primary);background-color:var(--bg-primary);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media(prefers-color-scheme:light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}#root{max-width:1280px;margin:0 auto;padding:2rem;text-align:center}.logo{height:6em;padding:1.5em;will-change:filter;transition:filter .3s}.logo:hover{filter:drop-shadow(0 0 2em #646cffaa)}.logo.react:hover{filter:drop-shadow(0 0 2em #61dafbaa)}@keyframes logo-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media(prefers-reduced-motion:no-preference){a:nth-of-type(2) .logo{animation:logo-spin infinite 20s linear}}.card{padding:2em}.read-the-docs{color:#888}.home-container{opacity:1;transform:none;will-change:transform;will-change:var(--framer-will-change-effect-override, transform);z-index:1;flex:none;width:100%;height:100vh;position:absolute;top:calc(50% - 50vh);left:0%}.hero-video{cursor:auto;width:100%;height:100%;border-radius:0;display:block;object-fit:contain;background-color:#0000;object-position:50% 50%}@media(min-width:960px){.home-container{height:960px}.hero-video{object-fit:cover;max-height:760px}}.main-nav{position:fixed;top:0;left:0;width:100%;background:#fffffff2;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.2);z-index:1000;transition:all .3s ease}.nav-container{max-width:1200px;margin:0 auto;padding:0 20px;display:flex;justify-content:space-between;align-items:center;height:70px}.nav-logo{flex-shrink:0}.logo-link{text-decoration:none;color:#333;font-weight:700;font-size:1.5rem;transition:color .3s ease;display:flex;align-items:center;gap:.5rem}.logo-link:hover{color:#4facfe}.logo-gif{width:auto;transition:transform .3s ease;height:65px}.logo-gif:hover{transform:scale(1.05)}.logo-text{background:linear-gradient(135deg,#4facfe,#00f2fe);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-weight:800}.nav-menu{display:flex;list-style:none;margin:0;padding:0;gap:2rem}.nav-item{position:relative}.nav-link{text-decoration:none;color:#333;font-weight:500;font-size:1rem;padding:.5rem 1rem;border-radius:6px;transition:all .3s ease;position:relative}.nav-link:hover{color:#4facfe;background-color:#4facfe1a}.nav-link:after{content:"";position:absolute;bottom:-2px;left:50%;width:0;height:2px;background:linear-gradient(135deg,#4facfe,#00f2fe);transition:all .3s ease;transform:translate(-50%)}.nav-link:hover:after{width:100%}.nav-toggle{display:none;flex-direction:column;cursor:pointer;padding:10px}.hamburger{width:25px;height:3px;background-color:#333;margin:3px 0;transition:all .3s ease;border-radius:2px}.hamburger-open:nth-child(1){transform:rotate(45deg) translate(5px,5px)}.hamburger-open:nth-child(2){opacity:0}.hamburger-open:nth-child(3){transform:rotate(-45deg) translate(7px,-6px)}.main-nav.scrolled{background:#fffffffa;box-shadow:0 2px 20px #0000001a}@media(max-width:768px){.nav-toggle{display:flex}.nav-menu{position:fixed;top:70px;left:-100%;width:100%;height:calc(100vh - 70px);background:#fffffffa;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);flex-direction:column;justify-content:flex-start;align-items:center;padding-top:2rem;transition:left .3s ease;gap:1rem}.nav-menu-open{left:0}.nav-item{margin:0;width:90%;text-align:center}.nav-link{display:block;width:100%;padding:1rem;font-size:1.1rem;border-radius:8px}.nav-link:after{display:none}.nav-container{padding:0 15px}}@media(max-width:1024px)and (min-width:769px){.nav-container{padding:0 30px}.nav-menu{gap:1.5rem}.nav-link{font-size:.95rem;padding:.4rem .8rem}}@keyframes navSlideDown{0%{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}.main-nav{animation:navSlideDown .5s ease}.color-palette{max-width:1200px;margin:0 auto;padding:2rem;font-family:system-ui,-apple-system,sans-serif}.palette-header{text-align:center;margin-bottom:3rem}.palette-header h1{color:var(--text-primary);font-size:2.5rem;margin-bottom:1rem;background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.palette-header p{color:var(--text-secondary);font-size:1.1rem}.color-section{margin-bottom:3rem}.color-section h2{color:var(--text-primary);font-size:1.8rem;margin-bottom:1.5rem;border-bottom:2px solid var(--border-light);padding-bottom:.5rem}.color-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.5rem}.color-card{background:var(--bg-primary);border:1px solid var(--border-light);border-radius:12px;padding:1rem;box-shadow:0 2px 8px var(--shadow-light);transition:transform .2s ease,box-shadow .2s ease}.color-card:hover{transform:translateY(-2px);box-shadow:0 4px 16px var(--shadow-medium)}.color-swatch{width:100%;height:80px;border-radius:8px;margin-bottom:1rem;cursor:pointer;border:1px solid var(--border-light);transition:transform .2s ease}.color-swatch:hover{transform:scale(1.02)}.color-info{text-align:center}.color-name{font-weight:600;color:var(--text-primary);margin-bottom:.5rem;font-size:1rem}.color-value,.color-css{font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:.85rem;margin:.25rem 0;padding:.25rem .5rem;background:var(--bg-secondary);border-radius:4px;cursor:pointer;transition:background-color .2s ease}.color-value{color:var(--text-secondary)}.color-css{color:var(--color-primary)}.color-value:hover,.color-css:hover{background:var(--color-cool-gray)}.gradient-section{margin-bottom:3rem}.gradient-section h2{color:var(--text-primary);font-size:1.8rem;margin-bottom:1.5rem;border-bottom:2px solid var(--border-light);padding-bottom:.5rem}.gradient-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.5rem}.gradient-card{text-align:center}.gradient-swatch{width:100%;height:120px;border-radius:12px;margin-bottom:1rem;cursor:pointer;border:1px solid var(--border-light);transition:transform .2s ease,box-shadow .2s ease}.gradient-swatch:hover{transform:translateY(-2px);box-shadow:0 8px 24px var(--shadow-primary)}.primary-gradient{background:var(--gradient-primary)}.reverse-gradient{background:var(--gradient-primary-reverse)}.subtle-gradient{background:var(--gradient-subtle)}.gradient-card p{font-weight:600;color:var(--text-primary);font-size:1rem}.usage-examples{margin-top:4rem}.usage-examples h2{color:var(--text-primary);font-size:1.8rem;margin-bottom:1.5rem;border-bottom:2px solid var(--border-light);padding-bottom:.5rem}.example-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.5rem}.example-card{background:var(--bg-primary);border:1px solid var(--border-light);border-radius:12px;padding:1.5rem;box-shadow:0 2px 8px var(--shadow-light)}.example-card h3{color:var(--text-primary);font-size:1.2rem;margin-bottom:1rem}.example-card code{display:block;background:var(--brand-midnight-charcoal);color:var(--color-white);padding:1rem;border-radius:8px;font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:.9rem;line-height:1.5;white-space:pre-line;overflow-x:auto}@media(max-width:768px){.color-palette{padding:1rem}.palette-header h1{font-size:2rem}.color-grid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem}.gradient-grid,.example-grid{grid-template-columns:1fr}.color-section h2,.gradient-section h2,.usage-examples h2{font-size:1.5rem}}.password-protection{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--gradient-primary);padding:2rem}.password-container{background:var(--bg-primary);border-radius:16px;padding:3rem;box-shadow:0 20px 60px #1b1f2a26;max-width:400px;width:100%;text-align:center;border:1px solid var(--border-light)}.password-header h1{color:var(--text-primary);font-size:2rem;margin-bottom:.5rem;font-weight:700}.password-header p{color:var(--text-secondary);margin-bottom:2rem;line-height:1.5}.password-form{margin-bottom:1.5rem}.input-group{text-align:left;margin-bottom:1.5rem}.input-group label{display:block;color:var(--text-primary);font-weight:600;margin-bottom:.5rem;font-size:.95rem}.input-group input{width:100%;padding:.875rem 1rem;border:2px solid var(--border-light);border-radius:8px;font-size:1rem;transition:all .3s ease;background:var(--bg-primary);color:var(--text-primary);box-sizing:border-box}.input-group input:focus{outline:none;border-color:var(--brand-strategic-indigo);box-shadow:0 0 0 3px var(--focus-ring)}.input-group input.error{border-color:var(--color-error);box-shadow:0 0 0 3px #dc26261a}.input-group input::placeholder{color:var(--text-muted)}.error-message{background:#dc26261a;color:var(--color-error);padding:.75rem;border-radius:6px;margin-bottom:1rem;font-size:.9rem;border:1px solid rgba(220,38,38,.2)}.submit-button{width:100%;background:var(--brand-strategic-indigo);color:var(--color-white);border:none;padding:.875rem;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease}.submit-button:hover{background:var(--color-primary-hover);transform:translateY(-1px);box-shadow:0 4px 16px #243a8f4d}.submit-button:active{transform:translateY(0)}.password-footer p{color:var(--text-muted);font-size:.85rem;margin:0}.authenticated-content{min-height:100vh}.auth-header{background:var(--bg-primary);border-bottom:1px solid var(--border-light);padding:1rem 2rem;box-shadow:0 2px 8px var(--shadow-light)}.auth-status{max-width:1200px;margin:0 auto;display:flex;justify-content:space-between;align-items:center}.auth-indicator{color:var(--brand-signal-teal);font-weight:600;font-size:.9rem;display:flex;align-items:center;gap:.5rem}.logout-button{background:transparent;color:var(--text-secondary);border:1px solid var(--border-medium);padding:.5rem 1rem;border-radius:6px;font-size:.85rem;cursor:pointer;transition:all .3s ease}.logout-button:hover{color:var(--color-error);border-color:var(--color-error);background:#dc26260d}.password-loading{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--gradient-primary)}.loading-spinner{width:40px;height:40px;border:4px solid rgba(255,255,255,.3);border-top:4px solid var(--color-white);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media(max-width:768px){.password-protection{padding:1rem}.password-container{padding:2rem;max-width:350px}.password-header h1{font-size:1.75rem}.auth-header{padding:1rem}.auth-status{flex-direction:column;gap:1rem;text-align:center}}@media(max-width:480px){.password-container{padding:1.5rem;margin:1rem}.password-header h1{font-size:1.5rem}}