@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700;800&display=swap";@font-face{font-family:Space Grotesk;src:url(/fonts/space-grotesk-500.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}@font-face{font-family:Space Grotesk;src:url(/fonts/space-grotesk-600.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}@font-face{font-family:Space Grotesk;src:url(/fonts/space-grotesk-700.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}@font-face{font-family:Space Grotesk;src:url(/fonts/space-grotesk-800.woff2) format("woff2");font-weight:800;font-style:normal;font-display:swap}@font-face{font-family:Inter;src:url(/fonts/inter-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:Inter;src:url(/fonts/inter-500.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}@font-face{font-family:Inter;src:url(/fonts/inter-600.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}@font-face{font-family:Inter;src:url(/fonts/inter-700.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html{-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{min-height:100vh;line-height:1.5;text-rendering:optimizeLegibility}img,picture,video,canvas,svg{display:block;max-width:100%;height:auto}input,button,textarea,select{font:inherit;color:inherit}button{cursor:pointer;background:none;border:none}a{color:inherit;text-decoration:none}ul,ol{list-style:none}h1,h2,h3,h4,h5,h6,p{overflow-wrap:break-word}table{border-collapse:collapse}:root{--color-primary: #6C5CE7;--color-primary-dark: #5A4BD1;--color-primary-light: #A29BFE;--color-secondary: #00CEC9;--color-secondary-dark: #00B5B0;--color-accent: #FD79A8;--color-accent-warm: #FDCB6E;--color-success: #00B894;--color-warning: #FFEAA7;--color-error: #FF7675;--bg-white: #FFFFFF;--bg-light: #F8F9FE;--bg-surface: #F0F0F8;--bg-dark: #1A1A2E;--bg-dark-surface: #16213E;--text-primary: #1A1A2E;--text-secondary: #636E7B;--text-muted: #A0A8B4;--text-white: #FFFFFF;--border: #E8E8F0;--border-light: #F0F0F8;--gradient-primary: linear-gradient(90deg, var(--color-primary), var(--color-primary-dark));--gradient-primary-v: linear-gradient(180deg, var(--color-primary), #8B5CF6);--gradient-hero: linear-gradient(135deg, #1A1A2E 0%, #2D1B69 50%, #16213E 100%);--gradient-hero-alt: linear-gradient(135deg, #1A1A2E 0%, #0A3D62 50%, #16213E 100%);--gradient-logo: linear-gradient(135deg, var(--color-primary), var(--color-secondary));--font-heading: "Space Grotesk", system-ui, -apple-system, sans-serif;--font-body: "Inter", system-ui, -apple-system, sans-serif;--text-xs: .75rem;--text-sm: .8125rem;--text-base: .875rem;--text-md: .9375rem;--text-lg: 1rem;--text-xl: 1.125rem;--text-2xl: 1.25rem;--text-3xl: 1.375rem;--text-4xl: 1.5rem;--text-5xl: 2rem;--text-6xl: 2.25rem;--text-7xl: 3.25rem;--font-normal: 400;--font-medium: 500;--font-semibold: 600;--font-bold: 700;--font-extrabold: 800;--leading-tight: 1.15;--leading-snug: 1.2;--leading-normal: 1.5;--leading-relaxed: 1.6;--leading-loose: 1.7;--tracking-tighter: -1.5px;--tracking-tight: -.5px;--tracking-normal: 0px;--tracking-wide: 2px;--space-0: 0;--space-1: .25rem;--space-2: .5rem;--space-3: .75rem;--space-4: 1rem;--space-5: 1.25rem;--space-6: 1.5rem;--space-7: 1.75rem;--space-8: 2rem;--space-10: 2.5rem;--space-12: 3rem;--space-16: 4rem;--space-20: 5rem;--space-24: 6rem;--space-30: 7.5rem;--radius-sm: .375rem;--radius-md: .5rem;--radius-lg: .625rem;--radius-xl: .75rem;--radius-2xl: 1rem;--radius-full: 9999px;--shadow-sm: 0 2px 12px rgba(0, 0, 0, .04);--shadow-md: 0 4px 16px rgba(108, 92, 231, .12);--shadow-lg: 0 4px 24px rgba(0, 0, 0, .04);--shadow-primary: 0 4px 20px rgba(108, 92, 231, .25);--shadow-primary-sm: 0 4px 16px rgba(108, 92, 231, .19);--max-width: 1440px;--content-max-width: 1280px;--content-padding: var(--space-20);--section-padding-y: var(--space-16);--header-height: 72px;--transition-fast: .15s ease;--transition-base: .2s ease;--transition-slow: .3s ease;--z-dropdown: 10;--z-sticky: 20;--z-header: 100;--z-modal: 200;--z-toast: 300}body{font-family:var(--font-body);font-size:var(--text-base);font-weight:var(--font-normal);color:var(--text-primary);background-color:var(--bg-white);line-height:var(--leading-normal)}.container{width:100%;max-width:var(--max-width);margin-inline:auto;padding-inline:var(--content-padding)}.section{padding-block:var(--section-padding-y);padding-inline:max(var(--content-padding),calc((100% - var(--max-width)) / 2))}.section--light{background-color:var(--bg-light)}.section--dark{background-color:var(--bg-dark);color:var(--text-white)}.section--hero{background:var(--gradient-hero);color:var(--text-white)}.section--hero-alt{background:var(--gradient-hero-alt);color:var(--text-white)}.flex{display:flex}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.items-start{align-items:flex-start}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:var(--space-1)}.gap-2{gap:var(--space-2)}.gap-3{gap:var(--space-3)}.gap-4{gap:var(--space-4)}.gap-5{gap:var(--space-5)}.gap-6{gap:var(--space-6)}.gap-8{gap:var(--space-8)}.gap-10{gap:var(--space-10)}.gap-12{gap:var(--space-12)}.text-center{text-align:center}.text-left{text-align:left}.w-full{width:100%}.section-header{display:flex;flex-direction:column;align-items:center;gap:var(--space-2);text-align:center}.section-label{font-family:var(--font-body);font-size:var(--text-xs);font-weight:var(--font-bold);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--color-primary)}.section-label--secondary{color:var(--color-secondary)}.section-label--accent{color:var(--color-accent)}.section-title{font-family:var(--font-heading);font-size:var(--text-6xl);font-weight:var(--font-bold);letter-spacing:var(--tracking-tight);color:var(--text-primary);line-height:var(--leading-snug)}.section-desc{font-size:var(--text-lg);color:var(--text-secondary);max-width:640px}@media(max-width:1024px){:root{--content-padding: var(--space-10);--section-padding-y: var(--space-12)}.section-title{font-size:var(--text-5xl)}}@media(max-width:768px){:root{--content-padding: var(--space-6);--section-padding-y: var(--space-10)}.section-title{font-size:var(--text-4xl)}}@media(max-width:480px){:root{--content-padding: var(--space-4)}}.mt-section-content{margin-top:var(--space-10)}.badge__icon{display:inline-block;vertical-align:middle;margin-right:4px}h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);color:var(--text-primary);line-height:var(--leading-snug)}h1{font-size:var(--text-7xl);font-weight:var(--font-extrabold);letter-spacing:var(--tracking-tighter);line-height:var(--leading-tight)}h2{font-size:var(--text-6xl);font-weight:var(--font-bold);letter-spacing:var(--tracking-tight)}h3{font-size:var(--text-4xl);font-weight:var(--font-bold)}h4{font-size:var(--text-2xl);font-weight:var(--font-semibold)}h5{font-size:var(--text-xl);font-weight:var(--font-semibold)}h6{font-size:var(--text-lg);font-weight:var(--font-semibold)}p{font-family:var(--font-body);font-size:var(--text-md);color:var(--text-secondary);line-height:var(--leading-loose)}a{color:var(--color-primary);transition:color var(--transition-fast)}a:hover{color:var(--color-primary-dark)}small,.text-sm{font-size:var(--text-sm)}.text-xs{font-size:var(--text-xs)}.text-muted{color:var(--text-muted)}@media(max-width:768px){h1{font-size:var(--text-5xl)}h2{font-size:var(--text-4xl)}h3{font-size:var(--text-2xl)}}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);font-family:var(--font-body);font-weight:var(--font-semibold);border:none;cursor:pointer;transition:all var(--transition-base);text-decoration:none;white-space:nowrap}.btn--primary{background:var(--gradient-primary-v);color:var(--text-white);padding:14px 32px;border-radius:var(--radius-lg);font-size:var(--text-md);box-shadow:var(--shadow-primary)}.btn--primary:hover{box-shadow:var(--shadow-md);transform:translateY(-1px)}.btn--secondary{background:#ffffff0f;color:var(--text-white);padding:14px 32px;border-radius:var(--radius-lg);font-size:var(--text-md);border:1px solid rgba(255,255,255,.19)}.btn--secondary:hover{background:#ffffff1f}.btn--sm{padding:10px 24px;font-size:var(--text-base);border-radius:var(--radius-md)}.btn--block{width:100%}.btn--accent{background:var(--color-accent);color:var(--text-white);padding:12px 24px;border-radius:var(--radius-md);font-size:var(--text-base)}.btn--accent:hover{opacity:.9}.btn--teal{background:var(--color-secondary);color:var(--text-white);padding:12px 24px;border-radius:var(--radius-md);font-size:var(--text-base)}.btn--cta-header{background:var(--gradient-primary);color:var(--text-white);padding:10px 24px;border-radius:var(--radius-md);font-size:var(--text-base);font-weight:var(--font-semibold)}.btn--cta-header:hover{box-shadow:var(--shadow-primary-sm)}.card{background:var(--bg-white);border:1px solid var(--border);border-radius:var(--radius-2xl);padding:var(--space-7);box-shadow:var(--shadow-sm);transition:box-shadow var(--transition-base),transform var(--transition-base)}.card:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)}.card__icon{width:48px;height:48px;border-radius:var(--radius-xl);display:flex;align-items:center;justify-content:center;background:var(--bg-surface)}.card__icon--primary{background:#6c5ce70f;color:var(--color-primary)}.card__icon--secondary{background:#00cec90f;color:var(--color-secondary)}.card__icon--accent{background:linear-gradient(135deg,#fdcb6e1f,#fd79a81f);color:var(--color-accent)}.card__icon--warm{background:#fdcb6e1f;color:#e17055}.card__title{font-family:var(--font-heading);font-size:var(--text-2xl);font-weight:var(--font-semibold);color:var(--text-primary)}.card__desc{font-size:var(--text-base);color:var(--text-secondary);line-height:var(--leading-relaxed)}.tool-card{display:flex;flex-direction:column;gap:var(--space-4);padding:var(--space-6);background:var(--bg-white);border:1px solid var(--border);border-radius:var(--radius-xl);transition:all var(--transition-base);text-decoration:none}.tool-card:hover{border-color:var(--color-primary-light);box-shadow:var(--shadow-md);transform:translateY(-2px)}.tool-card__badge{display:inline-flex;padding:4px 10px;border-radius:var(--radius-sm);font-size:11px;font-weight:var(--font-semibold);width:fit-content}.tool-card__badge--popular{background:#6c5ce70f;color:var(--color-primary)}.tool-card__badge--web{background:#00cec90f;color:var(--color-secondary)}.tool-card__badge--css{background:#fd79a80f;color:var(--color-accent)}.tool-card__badge--industrial{background:#fdcb6e1f;color:#e17055}.tool-card__title{font-family:var(--font-heading);font-size:var(--text-lg);font-weight:var(--font-semibold);color:var(--text-primary)}.tool-card__desc{font-size:var(--text-sm);color:var(--text-secondary);line-height:var(--leading-normal)}.brand-card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-2);padding:20px 16px;border-radius:var(--radius-xl);background:var(--bg-white);border:1px solid var(--border);transition:all var(--transition-base);text-decoration:none}.brand-card:hover{border-color:var(--color-primary-light);box-shadow:var(--shadow-sm)}.brand-card__name{font-family:var(--font-heading);font-size:var(--text-xl);font-weight:var(--font-bold);color:var(--text-primary)}.brand-card__subtitle{font-size:var(--text-xs);color:var(--text-secondary)}.badge{display:inline-flex;align-items:center;gap:var(--space-2);padding:6px 16px;border-radius:var(--radius-full);background:#ffffff14;border:1px solid rgba(255,255,255,.12);font-size:var(--text-sm);font-weight:var(--font-medium);color:var(--color-primary-light)}.faq-item{display:flex;align-items:center;justify-content:space-between;padding:var(--space-5) 0;border-bottom:1px solid var(--border);cursor:pointer;transition:color var(--transition-fast)}.faq-item:last-child{border-bottom:none}.faq-item:hover{color:var(--color-primary)}.faq-item__question{font-family:var(--font-body);font-size:var(--text-lg);font-weight:var(--font-medium);color:var(--text-primary)}.faq-item__icon{width:20px;height:20px;color:var(--text-secondary);transition:transform var(--transition-base);flex-shrink:0}.faq-item[open] .faq-item__icon{transform:rotate(180deg)}.faq-item__answer{padding:var(--space-2) 0 var(--space-4);font-size:var(--text-md);color:var(--text-secondary);line-height:var(--leading-relaxed)}.breadcrumb{display:flex;align-items:center;gap:6px;font-size:var(--text-sm)}.breadcrumb__link{color:var(--color-primary);text-decoration:none}.breadcrumb__link:hover{text-decoration:underline}.breadcrumb__sep{color:var(--text-muted)}.breadcrumb__current{color:var(--text-secondary)}.breadcrumb--light .breadcrumb__link{color:var(--color-primary-light)}.breadcrumb--light .breadcrumb__sep{color:var(--text-muted)}.breadcrumb--light .breadcrumb__current{color:#ffffff80}.link-arrow{display:inline-flex;align-items:center;gap:var(--space-2);font-size:var(--text-md);font-weight:var(--font-semibold);color:var(--color-primary);text-decoration:none;transition:gap var(--transition-base)}.link-arrow:hover{gap:var(--space-3)}.color-slider{display:flex;align-items:center;gap:var(--space-3);width:100%}.color-slider__label{font-family:var(--font-heading);font-size:var(--text-base);font-weight:var(--font-semibold);width:20px;flex-shrink:0}.color-slider__track{flex:1;height:6px;border-radius:3px;background:#e0e0e0;position:relative;overflow:hidden}.color-slider__fill{height:100%;border-radius:3px;position:absolute;top:0;left:0}.color-slider__value{font-family:var(--font-body);font-size:var(--text-base);font-weight:var(--font-medium);width:30px;text-align:right;flex-shrink:0}.result-card{display:flex;align-items:center;gap:var(--space-4);padding:var(--space-4);background:var(--bg-light);border-radius:var(--radius-xl)}.result-card__swatch{width:48px;height:48px;border-radius:var(--radius-md);flex-shrink:0}.result-card__name{font-family:var(--font-heading);font-size:var(--text-lg);font-weight:var(--font-semibold);color:var(--text-primary)}.result-card__distance{font-size:var(--text-sm);color:var(--color-success)}.sidebar-card{display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-6);border-radius:var(--radius-xl);background:var(--bg-white);border:1px solid var(--border)}.sidebar-card__title{font-family:var(--font-heading);font-size:var(--text-lg);font-weight:var(--font-semibold);color:var(--text-primary)}.sidebar-card__link{font-size:var(--text-base);color:var(--color-primary);text-decoration:none}.sidebar-card__link:hover{text-decoration:underline}.sidebar-card__link--muted{color:var(--text-secondary)}.step{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-4) var(--space-5);border-radius:var(--radius-lg);background:var(--bg-light)}.step__number{width:28px;height:28px;border-radius:var(--radius-full);background:var(--color-primary);color:var(--text-white);display:flex;align-items:center;justify-content:center;font-size:var(--text-sm);font-weight:var(--font-bold);flex-shrink:0}.step__text{font-size:var(--text-base);color:var(--text-primary)}.article-meta{display:flex;align-items:center;gap:var(--space-4);font-size:var(--text-sm);color:var(--text-muted)}.article-meta__author{color:var(--color-primary-light)}.color-preview{display:flex;align-items:center;gap:var(--space-4)}.color-preview__swatch{width:80px;height:80px;border-radius:var(--radius-xl);flex-shrink:0}.color-preview__info{display:flex;flex-direction:column;gap:var(--space-1);font-size:var(--text-sm);color:var(--text-secondary)}.converter-panel{display:flex;flex-direction:column;gap:var(--space-6);padding:var(--space-8);background:var(--bg-white);border:1px solid var(--border);border-radius:var(--radius-2xl);box-shadow:var(--shadow-lg)}.converter-panel__label{font-family:var(--font-body);font-size:var(--text-base);font-weight:var(--font-semibold);color:var(--text-primary)}.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-6)}.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-6)}.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-5)}.grid-5{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--space-4)}@media(max-width:1024px){.grid-4{grid-template-columns:repeat(2,1fr)}.grid-5{grid-template-columns:repeat(3,1fr)}}@media(max-width:768px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}.grid-5{grid-template-columns:repeat(2,1fr)}}.content-layout{display:grid;grid-template-columns:1fr 340px;gap:var(--space-10)}@media(max-width:1024px){.content-layout{grid-template-columns:1fr}}.tool-layout{display:grid;grid-template-columns:1fr 380px;gap:var(--space-10)}@media(max-width:1024px){.tool-layout{grid-template-columns:1fr}}.header[data-astro-cid-qlfjksao]{position:sticky;top:0;z-index:var(--z-header);background:var(--bg-white);border-bottom:1px solid var(--border)}.header__inner[data-astro-cid-qlfjksao]{max-width:var(--max-width);margin-inline:auto;display:flex;align-items:center;justify-content:space-between;padding:var(--space-4) var(--space-12);height:var(--header-height)}.header__logo[data-astro-cid-qlfjksao]{display:flex;align-items:center;gap:var(--space-2);text-decoration:none}.header__logo-icon[data-astro-cid-qlfjksao]{width:32px;height:32px;border-radius:var(--radius-md);background:var(--gradient-logo);flex-shrink:0}.header__logo-text[data-astro-cid-qlfjksao]{font-family:var(--font-heading);font-size:var(--text-2xl);font-weight:var(--font-bold);color:var(--text-primary)}.header__nav[data-astro-cid-qlfjksao]{display:flex;align-items:center;gap:var(--space-8)}.header__nav-link[data-astro-cid-qlfjksao]{font-family:var(--font-body);font-size:var(--text-md);font-weight:var(--font-medium);color:var(--text-secondary);text-decoration:none;transition:color var(--transition-fast);position:relative}.header__nav-link[data-astro-cid-qlfjksao]:hover,.header__nav-link--active[data-astro-cid-qlfjksao]{color:var(--text-primary)}.header__nav-link--active[data-astro-cid-qlfjksao]:after{content:"";position:absolute;bottom:-20px;left:0;right:0;height:2px;background:var(--color-primary);border-radius:1px}.header__actions[data-astro-cid-qlfjksao]{display:flex;align-items:center;gap:var(--space-3)}.header__toggle[data-astro-cid-qlfjksao]{display:none;padding:var(--space-2);color:var(--text-primary)}.header__mobile-nav[data-astro-cid-qlfjksao]{display:none;flex-direction:column;gap:var(--space-1);padding:var(--space-4) var(--space-12);border-top:1px solid var(--border);background:var(--bg-white)}.header__mobile-nav[data-astro-cid-qlfjksao]:not([hidden]){display:flex}.header__mobile-link[data-astro-cid-qlfjksao]{display:block;padding:var(--space-3) 0;font-size:var(--text-lg);font-weight:var(--font-medium);color:var(--text-secondary);text-decoration:none;border-bottom:1px solid var(--border-light)}.header__mobile-link--active[data-astro-cid-qlfjksao]{color:var(--color-primary)}@media(max-width:768px){.header__inner[data-astro-cid-qlfjksao]{padding-inline:var(--space-6)}.header__nav[data-astro-cid-qlfjksao],.header__actions[data-astro-cid-qlfjksao]{display:none}.header__toggle[data-astro-cid-qlfjksao]{display:flex}.header__mobile-nav[data-astro-cid-qlfjksao]{padding-inline:var(--space-6)}}.footer[data-astro-cid-35ed7um5]{background-color:var(--bg-dark);color:var(--text-muted)}.footer__inner[data-astro-cid-35ed7um5]{max-width:var(--max-width);margin-inline:auto;padding:var(--space-12) var(--space-12) var(--space-6);display:flex;flex-direction:column;gap:var(--space-10)}.footer__top[data-astro-cid-35ed7um5]{display:flex;justify-content:space-between;gap:var(--space-12)}.footer__brand[data-astro-cid-35ed7um5]{display:flex;flex-direction:column;gap:var(--space-4);max-width:300px}.footer__logo[data-astro-cid-35ed7um5]{font-family:var(--font-heading);font-size:var(--text-3xl);font-weight:var(--font-bold);color:var(--text-white)}.footer__desc[data-astro-cid-35ed7um5]{font-size:var(--text-base);color:var(--text-muted);line-height:var(--leading-relaxed)}.footer__col[data-astro-cid-35ed7um5]{display:flex;flex-direction:column;gap:var(--space-3)}.footer__col-title[data-astro-cid-35ed7um5]{font-family:var(--font-body);font-size:var(--text-base);font-weight:var(--font-semibold);color:var(--text-white)}.footer__link[data-astro-cid-35ed7um5]{font-size:var(--text-sm);color:var(--text-muted);text-decoration:none;transition:color var(--transition-fast)}.footer__link[data-astro-cid-35ed7um5]:hover{color:var(--text-white)}.footer__divider[data-astro-cid-35ed7um5]{width:100%;height:1px;background:#ffffff17}.footer__bottom[data-astro-cid-35ed7um5]{display:flex;justify-content:space-between;align-items:center;font-size:var(--text-xs);color:var(--text-muted)}@media(max-width:768px){.footer__inner[data-astro-cid-35ed7um5]{padding-inline:var(--space-6)}.footer__top[data-astro-cid-35ed7um5]{flex-direction:column;gap:var(--space-8)}.footer__brand[data-astro-cid-35ed7um5]{max-width:100%}.footer__bottom[data-astro-cid-35ed7um5]{flex-direction:column;gap:var(--space-2);text-align:center}}