:root{--color-primary: #7C3AED;--color-primary-light: #A78BFA;--color-primary-lighter: #C4B5FD;--color-primary-dark: #5B21B6;--color-primary-subtle: rgba(124, 58, 237, .08);--color-secondary: #8b5cf6;--color-accent: #a855f7;--color-warm: #f59e0b;--color-accent-cyan: #06B6D4;--color-accent-pink: #EC4899;--color-accent-orange: #F97316;--color-bg: #F8FAFC;--color-bg-alt: #F1F5F9;--color-bg-card: #ffffff;--color-text: #0F172A;--color-text-primary: var(--color-text);--color-text-secondary: #64748B;--color-text-muted: #94A3B8;--color-text-dim: #cbd5e1;--color-border: #E2E8F0;--color-border-light: #f1f5f9;--color-border-active: #c7d2fe;--color-success: #10B981;--color-success-bg: #f0fdf4;--color-error: #ef4444;--color-error-bg: #fef2f2;--color-warning: #f59e0b;--color-warning-bg: #fffbeb;--font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;--font-mono: "JetBrains Mono", "SF Mono", "Fira Code", "Source Code Pro", monospace;--shadow-xs: 0 1px 2px rgba(0, 0, 0, .04);--shadow-sm: 0 1px 3px rgba(0, 0, 0, .06), 0 1px 2px rgba(0, 0, 0, .04);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .06), 0 2px 4px -2px rgba(0, 0, 0, .04);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .06), 0 4px 6px -4px rgba(0, 0, 0, .04);--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, .08), 0 8px 10px -6px rgba(0, 0, 0, .04);--shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, .15);--shadow-ring: 0 0 0 1px rgba(124, 58, 237, .12);--shadow-ring-hover: 0 0 0 1px rgba(124, 58, 237, .25), 0 10px 15px -3px rgba(124, 58, 237, .08), 0 4px 6px -4px rgba(124, 58, 237, .04);--radius-sm: 6px;--radius-md: 10px;--radius-lg: 14px;--radius-xl: 18px;--radius-2xl: 24px;--radius-full: 999px;--max-width: 1200px;--header-height: 64px;--ease-out-expo: cubic-bezier(.16, 1, .3, 1);--ease-spring: cubic-bezier(.34, 1.56, .64, 1)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;scroll-behavior:smooth;-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{font-family:var(--font-sans);color:var(--color-text);background:var(--color-bg);line-height:1.6;min-height:100vh}img,svg{display:block;max-width:100%}::selection{background:#7c3aed2e;color:var(--color-text)}a{color:var(--color-primary);text-decoration:none;transition:color .2s}a:hover{color:var(--color-primary-dark)}a:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px;border-radius:2px}h1,h2,h3,h4,h5,h6{line-height:1.2;font-weight:700;color:var(--color-text)}h1{font-size:clamp(2rem,5vw,3.75rem);letter-spacing:-.03em}h2{font-size:clamp(1.5rem,3vw,2.25rem);letter-spacing:-.02em}h3{font-size:clamp(1.125rem,2vw,1.375rem);letter-spacing:-.01em}.container{width:100%;max-width:var(--max-width);margin:0 auto;padding:0 1.5rem}@media(min-width:768px){.container{padding:0 2rem}}.text-gradient{background:linear-gradient(135deg,var(--color-primary),var(--color-secondary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.text-gradient-warm{background:linear-gradient(135deg,var(--color-primary),var(--color-accent),var(--color-warm));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.625rem 1.375rem;font-size:.875rem;font-weight:600;line-height:1;border:none;border-radius:var(--radius-md);cursor:pointer;transition:all .25s var(--ease-out-expo);font-family:var(--font-sans);white-space:nowrap;position:relative;overflow:hidden}.btn:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.btn-primary{background:linear-gradient(135deg,var(--color-primary),var(--color-primary-dark));color:#fff;box-shadow:0 1px 2px #7c3aed4d}.btn-primary:hover{transform:translateY(-1px);box-shadow:0 4px 12px #7c3aed59;color:#fff}.btn-primary:active{transform:translateY(0);box-shadow:0 1px 2px #7c3aed4d}.btn-secondary{background:var(--color-bg);color:var(--color-text);border:1.5px solid var(--color-border);box-shadow:var(--shadow-xs)}.btn-secondary:hover{background:var(--color-bg);border-color:var(--color-primary-lighter);box-shadow:var(--shadow-sm);transform:translateY(-1px)}.btn-ghost{background:transparent;color:var(--color-text-secondary)}.btn-ghost:hover{background:var(--color-primary-subtle);color:var(--color-primary)}.btn-sm{padding:.375rem .875rem;font-size:.8125rem;border-radius:var(--radius-sm)}.card{background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:1.5rem;transition:box-shadow .3s var(--ease-out-expo),transform .3s var(--ease-out-expo)}.card:hover{box-shadow:var(--shadow-lg)}.card-elevated{border:none;box-shadow:var(--shadow-md),0 0 0 1px #00000008}.card-glass{background:#ffffffb3;backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.8)}.input{display:block;width:100%;padding:.625rem .875rem;font-size:.9375rem;font-family:var(--font-sans);color:var(--color-text);background:var(--color-bg);border:1.5px solid var(--color-border);border-radius:var(--radius-md);transition:border-color .2s,box-shadow .2s}.input:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px #7c3aed1f}.input-error{border-color:var(--color-error)}.input-error:focus{box-shadow:0 0 0 3px #ef44441f}.label{display:block;font-size:.8125rem;font-weight:600;color:var(--color-text);margin-bottom:.375rem;letter-spacing:.01em}.color-swatch{width:2.5rem;height:2.5rem;border-radius:var(--radius-sm);border:1px solid var(--color-border);flex-shrink:0}.color-swatch-lg{width:3rem;height:3rem;border-radius:var(--radius-md)}.code-value{font-family:var(--font-mono);font-size:.875rem;color:var(--color-text);background:var(--color-bg-alt);padding:.5rem .75rem;border-radius:var(--radius-sm);border:1px solid var(--color-border-light);letter-spacing:-.01em}.tool-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1rem}@media(min-width:768px){.tool-grid{gap:1.25rem}}.section{padding:5rem 0}.section-sm{padding:3rem 0}.copy-toast{position:fixed;bottom:1.5rem;left:50%;transform:translate(-50%);background:var(--color-text);color:#fff;padding:.75rem 1.5rem;border-radius:var(--radius-md);font-size:.875rem;font-weight:500;z-index:100;animation:toastIn .35s var(--ease-out-expo),toastOut .3s ease 1.65s forwards;box-shadow:var(--shadow-2xl)}@keyframes toastIn{0%{opacity:0;transform:translate(-50%) translateY(.75rem) scale(.95)}to{opacity:1;transform:translate(-50%) translateY(0) scale(1)}}@keyframes toastOut{0%{opacity:1;transform:translate(-50%) translateY(0) scale(1)}to{opacity:0;transform:translate(-50%) translateY(.5rem) scale(.95)}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(1.5rem)}to{opacity:1;transform:translateY(0)}}.fade-in{animation:fadeInUp .6s var(--ease-out-expo) both}.fade-in-delay-1{animation-delay:.1s}.fade-in-delay-2{animation-delay:.2s}.fade-in-delay-3{animation-delay:.3s}.fade-in-delay-4{animation-delay:.4s}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.tool-panel{display:grid;grid-template-columns:1fr;gap:2rem}@media(min-width:768px){.tool-panel{grid-template-columns:1fr 1fr}}.tool-panel-single{max-width:640px;margin:0 auto}.color-preview-box{width:100%;height:140px;border-radius:var(--radius-md);border:1px solid var(--color-border);transition:background .3s ease}.wcag-badge{display:inline-flex;align-items:center;gap:.375rem;padding:.25rem .75rem;font-size:.75rem;font-weight:600;border-radius:999px;letter-spacing:.01em}.wcag-pass{background:var(--color-success-bg);color:#166534}.wcag-fail{background:var(--color-error-bg);color:#991b1b}.palette-row{display:flex;gap:.25rem;border-radius:var(--radius-md);overflow:hidden;height:48px}.palette-row .swatch{flex:1;cursor:pointer;transition:transform .2s var(--ease-spring);position:relative}.palette-row .swatch:hover{transform:scaleY(1.2);z-index:1;box-shadow:0 0 0 2px #fff,0 4px 12px #00000026}.gradient-preview{width:100%;height:240px;border-radius:var(--radius-lg);border:1px solid var(--color-border)}.skip-link{position:absolute;top:-100%;left:0;z-index:1000;padding:.5rem 1rem;background:var(--color-primary);color:#fff;font-weight:600}.skip-link:focus{top:0}.section-divider{border:none;height:1px;background:linear-gradient(90deg,transparent,var(--color-border),transparent);margin:0}.pill{display:inline-flex;align-items:center;gap:.375rem;padding:.25rem .75rem;font-size:.75rem;font-weight:600;border-radius:999px;background:var(--color-primary-subtle);color:var(--color-primary);letter-spacing:.01em}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--color-text-dim);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--color-text-muted)}.tool-card{background:#fff;border-radius:18px;border:1px solid var(--color-border);padding:1.5rem;box-shadow:var(--shadow-sm);transition:box-shadow .3s,transform .3s}.tool-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)}.tool-input{display:block;width:100%;padding:.5rem .75rem;font-size:.875rem;font-family:var(--font-sans);color:var(--color-text);background:#fff;border:1.5px solid var(--color-border);border-radius:var(--radius-md);transition:border-color .2s,box-shadow .2s}.tool-input:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px #7c3aed1f}.tool-input::placeholder{color:var(--color-text-muted)}.tool-button{display:inline-flex;align-items:center;gap:.375rem;padding:.5rem 1rem;font-size:.875rem;font-weight:600;font-family:var(--font-sans);border:none;border-radius:var(--radius-md);cursor:pointer;transition:all .2s var(--ease-out-expo);background:var(--color-primary);color:#fff;white-space:nowrap}.tool-button:hover{background:var(--color-primary-dark);transform:translateY(-1px);box-shadow:0 4px 12px #7c3aed59}.tool-button:active{transform:translateY(0)}.copy-button{display:inline-flex;align-items:center;justify-content:center;gap:.375rem;padding:.375rem .75rem;font-size:.8125rem;font-weight:500;font-family:var(--font-sans);border:1px solid var(--color-border);border-radius:var(--radius-sm);cursor:pointer;background:var(--color-bg);color:var(--color-text-secondary);transition:all .2s var(--ease-out-expo)}.copy-button:hover{background:var(--color-primary-subtle);border-color:var(--color-primary-lighter);color:var(--color-primary)}.result-card{background:#fff;border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:1.25rem;box-shadow:var(--shadow-xs)}.text-gradient-premium{background:linear-gradient(135deg,#06b6d4,#7c3aed 45%,#ec4899 75%,#f97316);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.focus-ring:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px;border-radius:2px}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}html{scroll-behavior:auto}}.gradient-border{position:relative;background-clip:padding-box;border:1px solid transparent}.gradient-border:before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(135deg,#06b6d4,#7c3aed,#ec4899,#f97316);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}.section-gradient-divider{height:1px;border:none;background:linear-gradient(90deg,transparent,var(--color-border),transparent);margin:0}.text-truncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.site-header{position:sticky;top:0;z-index:50;background:#ffffffb8;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid rgba(226,232,240,.6);height:var(--header-height)}.header-inner{display:flex;align-items:center;justify-content:space-between;height:100%}.logo-link{display:flex;align-items:center;gap:.625rem;text-decoration:none;color:var(--color-text);font-weight:700;font-size:1.125rem;position:relative}.logo-icon-wrap{position:relative;display:flex;align-items:center;justify-content:center;width:40px;height:40px;flex-shrink:0}.logo-icon-wrap:before{content:"";position:absolute;inset:-4px;border-radius:50%;background:conic-gradient(from 0deg,var(--color-primary),var(--color-secondary),var(--color-accent),var(--color-primary));opacity:.35;filter:blur(2px);animation:logo-ring-spin 6s linear infinite}@keyframes logo-ring-spin{to{transform:rotate(360deg)}}.logo-icon{position:relative;z-index:1;width:36px;height:36px;border-radius:8px}.logo-text{letter-spacing:-.02em}.nav-links{display:flex;align-items:center;gap:.25rem}.nav-link{padding:.5rem .75rem;font-size:.875rem;font-weight:500;color:var(--color-text-secondary);border-radius:var(--radius-sm);transition:color .2s var(--ease-out-expo),background .2s var(--ease-out-expo);text-decoration:none}.nav-link:hover{color:var(--color-primary);background:var(--color-primary-subtle)}.nav-link[data-current-page]{color:var(--color-primary);background:var(--color-primary-subtle);font-weight:600}.header-actions{display:flex;align-items:center;gap:.75rem}.header-cta{display:inline-flex}.nav-toggle{display:none;flex-direction:column;gap:5px;padding:.5rem;background:none;border:none;cursor:pointer;position:relative;z-index:60}.hamburger-line{display:block;width:22px;height:2px;background:var(--color-text);border-radius:2px;transition:transform .35s var(--ease-out-expo),opacity .2s var(--ease-out-expo);transform-origin:center}.nav-toggle.open .hamburger-line:nth-child(1){transform:translateY(7px) rotate(45deg)}.nav-toggle.open .hamburger-line:nth-child(2){opacity:0;transform:scaleX(0)}.nav-toggle.open .hamburger-line:nth-child(3){transform:translateY(-7px) rotate(-45deg)}@media(max-width:768px){.header-cta{display:none}.nav-toggle{display:flex}.nav-links{display:none;position:fixed;inset:0;background:#ffffffd9;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);flex-direction:column;align-items:center;justify-content:center;gap:.5rem;padding:2rem;z-index:55;box-shadow:none;border-bottom:none}.nav-links.open{display:flex}.nav-link{width:auto;padding:.75rem 1.5rem;font-size:1.125rem}body.nav-open{overflow:hidden}}.site-footer{background:var(--color-bg-alt);border-top:none;padding:4.5rem 0 0;margin-top:5rem;position:relative}.site-footer:before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--color-border),transparent)}.footer-grid{display:grid;grid-template-columns:1.8fr 1.2fr 1fr 1fr;gap:3rem;padding-bottom:3rem}.footer-brand{display:flex;flex-direction:column;gap:1rem}.footer-logo{display:inline-flex;align-items:center;gap:.625rem;font-weight:700;font-size:1.125rem;color:var(--color-text);text-decoration:none}.footer-tagline{color:var(--color-text-secondary);font-size:.9375rem;line-height:1.6;max-width:320px}.footer-disclaimer-card{background:#ffffffb3;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(226,232,240,.6);border-radius:var(--radius-md);padding:.875rem 1rem;box-shadow:var(--shadow-xs)}.footer-disclaimer{font-size:.75rem;color:var(--color-text-muted);line-height:1.6}.footer-heading{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--color-text-muted);margin-bottom:1.25rem}.footer-list{list-style:none;display:flex;flex-direction:column;gap:.625rem}.footer-list a{font-size:.875rem;color:var(--color-text-secondary);text-decoration:none;transition:color .2s var(--ease-out-expo);display:inline-block}.footer-list a:hover{color:var(--color-primary)}.footer-bottom{padding:1.5rem 0;border-top:1px solid var(--color-border);text-align:center;position:relative}.footer-bottom:before{content:"";position:absolute;top:-1px;left:10%;right:10%;height:1px;background:linear-gradient(90deg,transparent,var(--color-primary-lighter),transparent);opacity:.4}.footer-bottom p{font-size:.8125rem;color:var(--color-text-muted)}@media(max-width:768px){.footer-grid{grid-template-columns:1fr;gap:2rem}.footer-tagline{max-width:100%}}@media(min-width:769px)and (max-width:1024px){.footer-grid{grid-template-columns:1.5fr 1fr 1fr 1fr;gap:2rem}}main{min-height:calc(100vh - var(--header-height) - 280px)}