: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;--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)}[data-theme=dark]{--color-bg: #0f172a;--color-bg-alt: #1e293b;--color-bg-card: #1e293b;--color-text: #f1f5f9;--color-text-primary: var(--color-text);--color-text-secondary: #94a3b8;--color-text-muted: #64748b;--color-text-dim: #475569;--color-border: #334155;--color-border-light: #1e293b;--color-border-active: #5b21b6;--color-success-bg: #064e3b;--color-error-bg: #7f1d1d;--color-warning-bg: #78350f;--shadow-xs: 0 1px 2px rgba(0, 0, 0, .2);--shadow-sm: 0 1px 3px rgba(0, 0, 0, .3), 0 1px 2px rgba(0, 0, 0, .25);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .3), 0 2px 4px -2px rgba(0, 0, 0, .2);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .3), 0 4px 6px -4px rgba(0, 0, 0, .2);--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, .35), 0 8px 10px -6px rgba(0, 0, 0, .25);--shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, .4);--shadow-ring: 0 0 0 1px rgba(124, 58, 237, .25);--shadow-ring-hover: 0 0 0 1px rgba(124, 58, 237, .4), 0 10px 15px -3px rgba(124, 58, 237, .15), 0 4px 6px -4px rgba(124, 58, 237, .1)}*,*:before,*:after{transition:background-color .25s ease,border-color .25s ease,color .25s ease,box-shadow .25s ease}:root{--radius-sm: 6px;--radius-md: 10px;--radius-lg: 14px;--radius-xl: 18px;--radius-2xl: 24px;--radius-full: 999px}:root{--max-width: 1200px;--header-height: 64px}:root{--ease-out-expo: cubic-bezier(.16, 1, .3, 1);--ease-spring: cubic-bezier(.34, 1.56, .64, 1);--ease-smooth: cubic-bezier(.4, 0, .2, 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-card);color:var(--color-text);border:1.5px solid var(--color-border);box-shadow:var(--shadow-xs)}.btn-secondary:hover{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)}[data-theme=dark] .card-glass{background:#1e293bb3;border:1px solid rgba(51,65,85,.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}[data-theme=dark] .wcag-pass{color:#4ade80}[data-theme=dark] .wcag-fail{color:#f87171}.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:var(--color-bg-card);border-radius:18px;border:1px solid var(--color-border);padding:1.5rem;transition:all .3s var(--ease-out-expo);display:flex;flex-direction:column;gap:.75rem;text-decoration:none;color:inherit;position:relative;overflow:hidden}.tool-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px);border-color:var(--color-primary-lighter)}.tool-card:before{content:"";position:absolute;inset:0;border-radius:18px;opacity:0;background:linear-gradient(135deg,var(--color-primary-subtle),transparent);transition:opacity .3s var(--ease-out-expo);pointer-events:none}.tool-card:hover:before{opacity:1}.tool-card-icon{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:14px;flex-shrink:0;color:#fff}.tool-card-title{font-size:1rem;font-weight:700;color:var(--color-text);letter-spacing:-.01em}.tool-card-desc{font-size:.875rem;color:var(--color-text-secondary);line-height:1.5}.tool-card:hover .tool-card-title{color:var(--color-primary)}.color-input-mono{font-family:var(--font-mono);font-size:.875rem;color:var(--color-text);background:var(--color-bg);border:1.5px solid var(--color-border);border-radius:var(--radius-sm);padding:.5rem .75rem;outline:none;transition:border-color .2s;width:100%}.color-input-mono:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px #7c3aed1f}.input-label{display:block;font-size:.8125rem;font-weight:600;color:var(--color-text-secondary);margin-bottom:.375rem;letter-spacing:.01em}.native-picker{width:44px;height:44px;padding:0;border:1.5px solid var(--color-border);border-radius:var(--radius-sm);cursor:pointer;background:none;flex-shrink:0}.tab-bar{display:flex;gap:2px;background:var(--color-bg-alt);border-radius:var(--radius-md);padding:3px;overflow-x:auto}.tab-btn{flex:1;padding:.5rem 1rem;border:none;border-radius:calc(var(--radius-md) - 2px);background:transparent;color:var(--color-text-secondary);font-size:.8125rem;font-weight:600;cursor:pointer;white-space:nowrap;font-family:var(--font-sans);transition:all .2s var(--ease-out-expo)}.tab-btn.active{background:var(--color-bg-card);color:var(--color-primary);box-shadow:0 1px 3px #0000001a}.tab-btn:hover:not(.active){color:var(--color-text)}.preview-container{background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:1.5rem;box-shadow:var(--shadow-md)}.hue-slider{-webkit-appearance:none;appearance:none;width:100%;height:8px;border-radius:4px;background:linear-gradient(to right,red,#ff0,#0f0,#0ff,#00f,#f0f,red);outline:none;cursor:pointer}.hue-slider::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:#fff;border:2px solid var(--color-border);box-shadow:0 2px 6px #00000026;cursor:pointer}.hue-slider::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#fff;border:2px solid var(--color-border);box-shadow:0 2px 6px #00000026;cursor:pointer}.skeleton{background:linear-gradient(90deg,var(--color-bg-alt) 25%,var(--color-bg-card) 50%,var(--color-bg-alt) 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:var(--radius-sm)}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}[data-theme=dark] .logo-icon{filter:brightness(1.2)}@media print{.site-header,.site-footer,.skip-link{display:none}body{background:#fff;color:#000}}:root{--font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;--font-mono: "JetBrains Mono", "SF Mono", "Fira Code", "Source Code Pro", monospace}@media print{*{background:transparent!important;color:#000!important;box-shadow:none!important;text-shadow:none!important}.site-header,.site-footer,.back-to-top,.tool-ctas,.related-tools,.related-colors,nav,.nav-toggle,.theme-toggle,.header-cta,.hero,.filter-bar,.preset-bar,.seo-content,.contrast-section .contrast-card,.css-snippet-section,.use-cases,.palette-section{display:none!important}@page{size:A4 portrait;margin:1.5cm}body{font-family:Inter,-apple-system,sans-serif;font-size:11pt;line-height:1.4;color:#000}.print-only{display:block!important}.color-hero{margin:0 0 1cm!important;page-break-after:avoid}.color-swatch{width:100%!important;height:4cm!important;border:2pt solid #000!important;border-radius:8pt!important;page-break-inside:avoid}.color-hex-label{background:#fff!important;color:#000!important;border:1pt solid #000!important;font-size:14pt!important;padding:4pt 8pt!important}.color-values{display:flex!important;gap:.5cm!important;margin-bottom:.8cm!important;page-break-after:avoid}.value-card{border:1pt solid #000!important;background:#fff!important;padding:.4cm!important;flex:1!important}.value-label{color:#555!important;font-size:9pt!important}.value-code{color:#000!important;font-size:12pt!important;font-weight:600!important}h1,h2,h3,h4{color:#000!important;page-break-after:avoid}h1{font-size:24pt;margin-bottom:.5cm}h2{font-size:16pt;margin:.6cm 0 .3cm}h3{font-size:13pt}p,li{color:#000!important;orphans:3;widows:3}.seo-content{padding:0!important}.seo-content h2{margin-top:.8cm}.seo-content p{font-size:10.5pt;margin-bottom:.3cm}.faq-item{page-break-inside:avoid;border:1pt solid #999!important;margin-bottom:.3cm;padding:.3cm!important}.faq-question{font-weight:700!important;color:#000!important;margin-bottom:.2cm}.faq-answer{color:#333!important;font-size:10pt}a{color:#000!important;text-decoration:underline}a[href^=http]:after{content:" (" attr(href) ")";font-size:8pt;color:#555}a[href^="/"]:after{content:" (color-helper.com" attr(href) ")";font-size:8pt;color:#555}.breadcrumbs{font-size:9pt;color:#555!important;margin-bottom:.3cm}.breadcrumbs a:after{content:""!important}}.print-only{display:none}.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)}[data-theme=dark] .site-header{background:#0f172acc;border-bottom:1px solid rgba(51,65,85,.6)}.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}.theme-toggle{display:inline-flex;align-items:center;gap:.375rem;padding:.375rem .625rem;background:transparent;border:1.5px solid var(--color-border);border-radius:var(--radius-full);cursor:pointer;color:var(--color-text-secondary);font-size:.75rem;font-weight:600;font-family:var(--font-sans);transition:all .2s var(--ease-out-expo);line-height:1}.theme-toggle:hover{border-color:var(--color-primary-lighter);color:var(--color-primary);background:var(--color-primary-subtle)}.theme-toggle-label{display:none}@media(min-width:640px){.theme-toggle-label{display:inline}}.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}[data-theme=dark] .nav-links{background:#0f172ae6}.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}}.back-to-top{position:fixed;bottom:2rem;right:2rem;z-index:90;width:44px;height:44px;border-radius:50%;background:var(--color-primary);color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px #6366f159;opacity:0;transform:translateY(20px);pointer-events:none;transition:opacity .25s var(--ease-out-expo),transform .25s var(--ease-out-expo),background .2s}.back-to-top.visible{opacity:1;transform:translateY(0);pointer-events:auto}.back-to-top:hover{background:var(--color-primary-dark, #4f46e5);transform:translateY(-2px)}.back-to-top:focus-visible{outline:3px solid var(--color-primary-lighter, #a5b4fc);outline-offset:2px}@media(max-width:640px){.back-to-top{bottom:1.25rem;right:1.25rem;width:40px;height:40px}}main{min-height:calc(100vh - var(--header-height) - 280px)}