:root{--mark-1: #e4572e;--mark-2: #f2a93b;--mark-3: #2a9d8f;--mark-4: #3a6ea5;--font-display: "Fraunces", Georgia, "Times New Roman", serif;--font-sans: "Lexend", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;--font-weight-medium: 500;--font-weight-semibold: 600;--font-weight-bold: 700;--font-weight-extrabold: 800;--text-xs: .75rem;--text-sm: .875rem;--text-base: 1rem;--text-lg: 1.125rem;--text-xl: 1.25rem;--text-2xl: 1.5rem;--text-3xl: 1.875rem;--text-4xl: 2.25rem;--text-5xl: 3rem;--space-1: .25rem;--space-2: .5rem;--space-3: .75rem;--space-4: 1rem;--space-5: 1.25rem;--space-6: 1.5rem;--space-8: 2rem;--space-10: 2.5rem;--space-12: 3rem;--space-16: 4rem;--radius-xs: 5px;--radius-sm: 8px;--radius-md: 10px;--radius-lg: 18px;--radius-xl: 24px;--radius-full: 9999px;--transition-fast: .15s cubic-bezier(.4, 0, .2, 1);--transition-normal: .25s cubic-bezier(.4, 0, .2, 1);--transition-slow: .35s cubic-bezier(.4, 0, .2, 1);--container-max: 1280px;--header-height: 64px}[data-theme=dark]{color-scheme:dark;--brand-primary: #8fa8ff;--brand-primary-hover: #adc0ff;--brand-primary-light: rgba(143, 168, 255, .14);--btn-primary-bg: #8fa8ff;--btn-primary-bg-hover: #adc0ff;--btn-primary-text: #0b1020;--color-success: #3dd68c;--color-success-bg: rgba(61, 214, 140, .12);--color-warning: #f5b84a;--color-warning-bg: rgba(245, 184, 74, .12);--color-danger: #ff6b6b;--color-danger-bg: rgba(255, 107, 107, .12);--color-info: #6cb6ff;--color-info-bg: rgba(108, 182, 255, .12);--bg-app: #0b1020;--bg-app-wash: radial-gradient(1100px 620px at 0% 0%, rgba(86, 116, 235, .2), transparent 62%), radial-gradient(900px 520px at 100% 0%, rgba(120, 92, 230, .12), transparent 60%);--bg-surface: #131a2e;--bg-surface-elevated: #1a2238;--bg-surface-hover: #242d48;--bg-input: #0e1426;--bg-subtle: rgba(160, 180, 255, .06);--border-subtle: #212a44;--border-medium: #2e395a;--border-strong: #4a577c;--border-focus: #8fa8ff;--text-primary: #e9edf9;--text-secondary: #a6b0cc;--text-muted: #8c97b8;--text-inverted: #0b1020;--eyebrow-dot-2: #4a577c;--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .4);--shadow-md: 0 4px 12px -2px rgba(0, 0, 0, .45);--shadow-lg: 0 12px 28px -6px rgba(0, 0, 0, .55);--shadow-xl: 0 24px 48px -12px rgba(0, 0, 0, .65);--ad-bg: rgba(255, 255, 255, .02);--ad-border: #212a44}[data-theme=light]{color-scheme:light;--brand-primary: #2e58d6;--brand-primary-hover: #2145b4;--brand-primary-light: rgba(46, 88, 214, .09);--btn-primary-bg: #2e58d6;--btn-primary-bg-hover: #2145b4;--btn-primary-text: #ffffff;--color-success: #0f7b5f;--color-success-bg: rgba(15, 123, 95, .09);--color-warning: #a15c00;--color-warning-bg: rgba(161, 92, 0, .09);--color-danger: #c0262d;--color-danger-bg: rgba(192, 38, 45, .08);--color-info: #1d5fa8;--color-info-bg: rgba(29, 95, 168, .08);--bg-app: #f1f4fd;--bg-app-wash: radial-gradient(1100px 620px at 0% 0%, rgba(160, 183, 255, .42), transparent 62%), radial-gradient(900px 520px at 100% 0%, rgba(206, 196, 255, .3), transparent 60%);--bg-surface: #ffffff;--bg-surface-elevated: #f3f6fc;--bg-surface-hover: #e8edf9;--bg-input: #ffffff;--bg-subtle: rgba(27, 36, 64, .05);--border-subtle: #e2e8f5;--border-medium: #cfd8ec;--border-strong: #a3b0cf;--border-focus: #2e58d6;--text-primary: #1b2440;--text-secondary: #4d5876;--text-muted: #566180;--text-inverted: #ffffff;--eyebrow-dot-2: #b9c4de;--shadow-sm: 0 1px 2px 0 rgba(40, 60, 120, .05);--shadow-md: 0 6px 18px -4px rgba(40, 60, 120, .1);--shadow-lg: 0 16px 36px -10px rgba(40, 60, 120, .16);--shadow-xl: 0 28px 56px -14px rgba(40, 60, 120, .22);--ad-bg: rgba(27, 36, 64, .02);--ad-border: #e2e8f5}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-family:var(--font-sans);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;scroll-behavior:smooth}body{background-color:var(--bg-app);background-image:var(--bg-app-wash);background-repeat:no-repeat;color:var(--text-primary);min-height:100vh;display:flex;flex-direction:column;overflow-x:hidden;transition:background-color var(--transition-normal),color var(--transition-normal)}#app{display:flex;flex-direction:column;min-height:100vh}img,svg,video,canvas{display:block;max-width:100%}input,button,textarea,select{font:inherit;color:inherit;background:transparent;border:none;outline:none}button{cursor:pointer;user-select:none}a{color:inherit;text-decoration:none}ul,ol{list-style:none}table{border-collapse:collapse;width:100%}:focus-visible{outline:2px solid var(--border-focus);outline-offset:2px}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}.app-container{width:100%;max-width:var(--container-max);margin-left:auto;margin-right:auto;padding-left:var(--space-4);padding-right:var(--space-4)}@media (min-width: 768px){.app-container{padding-left:var(--space-8);padding-right:var(--space-8)}}.main-content{flex:1;display:flex;flex-direction:column;padding-top:var(--space-6);padding-bottom:var(--space-16)}.site-header{position:sticky;top:0;z-index:100;background-color:var(--bg-app);background-color:color-mix(in srgb,var(--bg-app) 88%,transparent);border-bottom:1px solid var(--border-subtle);height:var(--header-height);backdrop-filter:saturate(160%) blur(12px);-webkit-backdrop-filter:saturate(160%) blur(12px);transition:background-color var(--transition-normal),border-color var(--transition-normal)}.header-inner{display:flex;align-items:center;justify-content:space-between;height:100%;gap:var(--space-6)}.brand-link{display:flex;align-items:center;gap:10px;font-weight:var(--font-weight-semibold);font-size:var(--text-lg);letter-spacing:-.01em;color:var(--text-primary);flex-shrink:0}.brand-mark{flex-shrink:0;transition:transform var(--transition-normal)}.brand-link:hover .brand-mark{transform:rotate(90deg)}.nav-desktop{display:none;align-items:center;gap:2px;margin-right:auto}@media (min-width: 1024px){.nav-desktop{display:flex}}.nav-link{padding:6px 8px;letter-spacing:-.01em;border-radius:var(--radius-sm);font-size:var(--text-sm);font-weight:var(--font-weight-medium);color:var(--text-secondary);transition:color var(--transition-fast),background-color var(--transition-fast);display:flex;align-items:center;gap:var(--space-2);white-space:nowrap}.nav-link:hover{color:var(--text-primary);background-color:var(--bg-subtle)}.nav-link.active{color:var(--text-primary);background-color:var(--bg-surface-elevated)}.header-actions{display:flex;align-items:center;gap:var(--space-2);flex-shrink:0}@media (min-width: 1024px) and (max-width: 1279px){.header-inner{gap:var(--space-3)}.nav-link{padding:6px;font-size:.8125rem}}.search-trigger{display:inline-flex;align-items:center;gap:var(--space-2);height:36px;padding:0 10px;border:1px solid var(--border-medium);border-radius:var(--radius-md);background-color:var(--bg-surface);color:var(--text-muted);font-size:var(--text-sm);white-space:nowrap;flex-shrink:0;transition:border-color var(--transition-fast),color var(--transition-fast)}.search-trigger:hover{border-color:var(--border-strong);color:var(--text-secondary)}.search-trigger-label,.search-trigger-kbd{display:none}.search-trigger-kbd{font-family:var(--font-mono);font-size:11px;padding:1px 6px;border:1px solid var(--border-subtle);border-radius:var(--radius-xs);background-color:var(--bg-surface-elevated);color:var(--text-muted)}@media (min-width: 1280px){.search-trigger{width:220px}.search-trigger-label{display:inline;margin-right:auto}.search-trigger-kbd{display:inline}}.eyebrow{display:inline-flex;align-items:center;gap:var(--space-2);font-size:var(--text-xs);font-weight:var(--font-weight-semibold);letter-spacing:.14em;text-transform:uppercase;color:var(--brand-primary);margin-bottom:var(--space-3)}.eyebrow:before{content:"";width:6px;height:6px;margin-right:20px;border-radius:50%;background-color:var(--brand-primary);box-shadow:10px 0 0 var(--eyebrow-dot-2),20px 0 0 var(--mark-2);flex-shrink:0}.hero-section{padding:var(--space-8) 0 var(--space-8);max-width:820px}.hero-title{font-family:var(--font-display);font-size:clamp(2.125rem,4.4vw,3.5rem);font-weight:var(--font-weight-bold);line-height:1.08;letter-spacing:-.02em;margin-bottom:var(--space-4);color:var(--text-primary);text-wrap:balance}.hero-subtitle{font-size:var(--text-lg);color:var(--text-secondary);line-height:1.6;margin-bottom:var(--space-6);max-width:680px;text-wrap:pretty}.hero-actions{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-3)}.home-hero{display:grid;grid-template-columns:1fr;gap:var(--space-4) var(--space-12);align-items:end;padding:var(--space-6) 0 var(--space-8)}@media (min-width: 1024px){.home-hero{grid-template-columns:1.15fr 1fr;padding-top:var(--space-10)}}.home-hero .hero-title{margin-bottom:0}.home-hero .hero-subtitle{font-size:var(--text-base);margin-bottom:var(--space-4)}.quick-links{display:flex;flex-wrap:wrap;gap:var(--space-2)}.quick-link{display:inline-flex;align-items:center;gap:6px;padding:5px 10px 5px 8px;border:1px solid var(--border-medium);border-radius:var(--radius-full);font-size:var(--text-sm);font-weight:var(--font-weight-medium);color:var(--text-primary);background-color:var(--bg-surface);transition:border-color var(--transition-fast),background-color var(--transition-fast)}.quick-link:hover{border-color:var(--border-strong);background-color:var(--bg-surface-elevated)}.quick-link-dot{width:10px;height:10px;border-radius:3px;flex-shrink:0}.tool-workspace{margin-top:var(--space-4);margin-bottom:var(--space-12)}.tool-header{margin-bottom:var(--space-8);max-width:820px}.tool-title{font-family:var(--font-display);font-size:clamp(1.875rem,3.4vw,2.75rem);font-weight:var(--font-weight-bold);line-height:1.12;letter-spacing:-.02em;margin-bottom:var(--space-3);text-wrap:balance}.tool-description{font-size:var(--text-lg);line-height:1.6;color:var(--text-secondary);max-width:720px;text-wrap:pretty}.tool-grid{display:grid;grid-template-columns:1fr;gap:var(--space-6)}@media (min-width: 1024px){.tool-grid-2col{grid-template-columns:1.2fr 1fr}.tool-grid-3col{grid-template-columns:repeat(3,1fr)}}.content-section{margin-top:var(--space-16);padding-top:var(--space-10);border-top:1px solid var(--border-subtle)}.section-head{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:var(--space-2) var(--space-6);margin-bottom:var(--space-6)}.section-head .section-heading{margin-bottom:0}.section-link{font-size:var(--text-sm);font-weight:var(--font-weight-medium);color:var(--text-secondary)}.section-link:hover{color:var(--brand-primary)}.section-heading{font-size:clamp(1.25rem,2vw,1.5rem);font-weight:var(--font-weight-semibold);letter-spacing:.01em;line-height:1.2;margin-bottom:var(--space-4);color:var(--text-primary)}.section-subheading{font-size:var(--text-xl);font-weight:var(--font-weight-semibold);margin-top:var(--space-6);margin-bottom:var(--space-3);color:var(--text-primary)}.prose{color:var(--text-secondary);font-size:var(--text-base);line-height:1.75}.prose p{margin-bottom:var(--space-4)}.prose ul,.prose ol{margin-bottom:var(--space-4);padding-left:var(--space-6)}.prose li{list-style:disc;margin-bottom:var(--space-2)}.prose li::marker{color:var(--text-muted)}.prose code{font-family:var(--font-mono);font-size:.875em;padding:1px 6px;background-color:var(--bg-surface-elevated);border:1px solid var(--border-subtle);border-radius:var(--radius-xs);color:var(--text-primary)}.ad-slot{width:100%;margin:var(--space-8) 0;padding:var(--space-4);background-color:var(--ad-bg);border:1px dashed var(--ad-border);border-radius:var(--radius-md);text-align:center;position:relative;min-height:100px;display:flex;flex-direction:column;align-items:center;justify-content:center}.ad-label{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);margin-bottom:var(--space-2);font-weight:var(--font-weight-semibold)}.ad-placeholder-text{font-size:var(--text-xs);color:var(--text-muted)}.site-footer{background-color:var(--bg-app);border-top:1px solid var(--border-subtle);padding:var(--space-16) 0 var(--space-8);color:var(--text-secondary);font-size:var(--text-sm)}.footer-top{display:grid;grid-template-columns:1fr;gap:var(--space-10);margin-bottom:var(--space-12)}@media (min-width: 1024px){.footer-top{grid-template-columns:220px 1fr;gap:var(--space-12)}}.footer-brand .brand-link{margin-bottom:var(--space-3)}.footer-tagline{color:var(--text-secondary);line-height:1.6;max-width:280px}.footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:var(--space-8) var(--space-6)}@media (min-width: 1024px){.footer-grid{grid-template-columns:repeat(5,minmax(0,1fr))}}.footer-col-title{font-family:var(--font-mono);font-size:var(--text-xs);font-weight:var(--font-weight-medium);text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);margin-bottom:var(--space-4)}.footer-nav-list{display:flex;flex-direction:column;gap:10px}.footer-link{color:var(--text-secondary);transition:color var(--transition-fast)}.footer-link:hover{color:var(--text-primary)}.footer-bottom{display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:var(--space-3);padding-top:var(--space-6);border-top:1px solid var(--border-subtle);font-size:var(--text-xs);color:var(--text-muted)}@media (min-width: 768px){.footer-bottom{flex-direction:row;align-items:center}}.header-actions .mobile-menu-btn{display:inline-flex}@media (min-width: 1024px){.header-actions .mobile-menu-btn,.nav-mobile{display:none}}.nav-mobile{position:absolute;top:var(--header-height);left:0;right:0;max-height:calc(100vh - var(--header-height));overflow-y:auto;background-color:var(--bg-app);border-bottom:1px solid var(--border-subtle);box-shadow:var(--shadow-lg);padding:var(--space-4) 0 var(--space-6)}.nav-mobile[hidden]{display:none}.nav-mobile-inner{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:var(--space-4)}.nav-mobile-group{display:flex;flex-direction:column;gap:var(--space-1)}.nav-mobile-title{font-family:var(--font-mono);font-size:var(--text-xs);font-weight:var(--font-weight-medium);text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);margin-bottom:var(--space-1);padding:0 var(--space-3)}.nav-mobile-link{padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);font-size:var(--text-sm);color:var(--text-secondary)}.nav-mobile-link:hover,.nav-mobile-link.active{color:var(--text-primary);background-color:var(--bg-surface-elevated)}.breadcrumb{margin-bottom:var(--space-5);font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.02em}.breadcrumb ol{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);color:var(--text-muted)}.breadcrumb li:not(:last-child):after{content:"/";margin-left:var(--space-2);color:var(--border-strong)}.breadcrumb a{color:var(--text-secondary)}.breadcrumb a:hover{color:var(--brand-primary)}.tool-mount:empty{min-height:520px}.home-picker-grid>div:empty{min-height:420px}.tool-content{margin-top:var(--space-16);max-width:820px}.content-block{margin-top:var(--space-12)}.section-lead{color:var(--text-secondary);margin-bottom:var(--space-4);max-width:760px}.prose h2{font-size:var(--text-xl);font-weight:var(--font-weight-semibold);letter-spacing:.01em;color:var(--text-primary);margin:var(--space-10) 0 var(--space-4)}.prose h3{font-size:var(--text-lg);font-weight:var(--font-weight-semibold);letter-spacing:-.01em;color:var(--text-primary);margin:var(--space-6) 0 var(--space-3)}.prose ol li{list-style:decimal}.prose a,.text-link{color:var(--brand-primary);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}.prose a:hover,.text-link:hover{color:var(--brand-primary-hover)}.prose strong{color:var(--text-primary)}.prose h2[id],.article-card[id]{scroll-margin-top:calc(var(--header-height) + var(--space-4))}.article-layout{max-width:760px;margin:0 auto}.article-header{padding:var(--space-4) 0 var(--space-6)}.article-title{text-align:left}.article-summary{text-align:left;margin-bottom:var(--space-3)}.article-meta{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-muted)}.article-toc{margin-bottom:var(--space-8);padding:var(--space-5)}.article-toc-title{font-weight:var(--font-weight-semibold);margin-bottom:var(--space-2)}.article-toc ol{padding-left:var(--space-5)}.article-toc li{list-style:decimal;margin-bottom:var(--space-1);font-size:var(--text-sm)}.article-toc a{color:var(--text-secondary)}.article-toc a:hover{color:var(--brand-primary)}.article-body>p:first-child{font-size:var(--text-lg);color:var(--text-primary)}.article-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:var(--space-4)}.article-card{display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-6);transition:border-color var(--transition-fast),background-color var(--transition-fast)}.article-card:hover{border-color:var(--border-strong)}.article-card-meta{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em}.article-card-title{font-size:var(--text-xl);font-weight:var(--font-weight-bold);letter-spacing:-.02em;line-height:1.25;color:var(--text-primary)}.article-card-summary{color:var(--text-secondary);font-size:var(--text-sm);flex:1}.article-card-cta{color:var(--text-primary);font-weight:var(--font-weight-semibold);font-size:var(--text-sm)}.article-card:hover .article-card-cta{color:var(--brand-primary)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);border-radius:var(--radius-md);font-weight:var(--font-weight-medium);font-size:var(--text-sm);line-height:1.25;transition:background-color var(--transition-fast),border-color var(--transition-fast),color var(--transition-fast);cursor:pointer;border:1px solid transparent;white-space:nowrap}.btn-primary{background-color:var(--btn-primary-bg);color:var(--btn-primary-text)}.btn-primary:hover{background-color:var(--btn-primary-bg-hover)}.btn-secondary{background-color:var(--bg-surface);color:var(--text-primary);border-color:var(--border-medium)}.btn-secondary:hover{background-color:var(--bg-surface-elevated);border-color:var(--border-strong)}.btn-ghost{background-color:transparent;color:var(--text-secondary)}.btn-ghost:hover{color:var(--text-primary);background-color:var(--bg-subtle)}.btn-sm{padding:6px 10px;font-size:var(--text-xs);border-radius:var(--radius-sm)}.btn-lg{padding:var(--space-3) var(--space-6);font-size:var(--text-base);border-radius:var(--radius-md)}.btn-icon{padding:var(--space-2);border-radius:var(--radius-md);color:var(--text-secondary)}.btn-icon:hover{color:var(--text-primary);background-color:var(--bg-subtle)}.card{background-color:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-xl);padding:var(--space-5);box-shadow:var(--shadow-md);transition:border-color var(--transition-fast),background-color var(--transition-fast),box-shadow var(--transition-fast)}a.card:hover{border-color:var(--border-medium);box-shadow:var(--shadow-lg)}.card-elevated{background-color:var(--bg-surface)}.card-header{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);margin-bottom:var(--space-4)}.card-title{font-size:var(--text-base);font-weight:var(--font-weight-semibold);letter-spacing:.01em;color:var(--text-primary)}.input-group{display:flex;flex-direction:column;gap:var(--space-1);width:100%}.input-label{font-family:var(--font-mono);font-size:11px;font-weight:var(--font-weight-medium);color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;display:flex;align-items:center;justify-content:space-between}.input-wrapper{position:relative;display:flex;align-items:center;background-color:var(--bg-input);border:1px solid var(--border-medium);border-radius:var(--radius-md);transition:border-color var(--transition-fast),box-shadow var(--transition-fast)}.input-wrapper:hover{border-color:var(--border-strong)}.input-wrapper:focus-within{border-color:var(--border-focus);box-shadow:0 0 0 3px var(--brand-primary-light)}.input-wrapper.has-error{border-color:var(--color-danger)}.input-field{width:100%;min-width:0;padding:var(--space-2) var(--space-3);font-size:var(--text-sm);color:var(--text-primary)}.input-field[readonly]{color:var(--text-secondary)}.input-mono{font-family:var(--font-mono);font-size:var(--text-sm);font-weight:var(--font-weight-medium)}.input-addon-btn{padding:var(--space-2) var(--space-3);color:var(--text-muted);transition:color var(--transition-fast);display:flex;align-items:center;justify-content:center}.input-addon-btn:hover{color:var(--text-primary)}.input-error-msg{font-size:var(--text-xs);color:var(--color-danger);margin-top:2px}.workspace{background-color:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-xl);padding:var(--space-4)}@media (min-width: 768px){.workspace{padding:var(--space-6)}}.workspace-grid{display:grid;grid-template-columns:1fr;gap:var(--space-6)}@media (min-width: 1024px){.workspace-grid{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:var(--space-8)}}.workspace-grid>div{display:flex;flex-direction:column}.workspace-strip{margin-top:var(--space-6);padding-top:var(--space-6);border-top:1px solid var(--border-subtle)}.workspace-strip:empty{min-height:120px}.visual-canvas-container{flex:1;display:flex;flex-direction:column}.spectrum-canvas-wrap{position:relative;width:100%;flex:1;min-height:280px;border-radius:var(--radius-lg);overflow:hidden;cursor:crosshair;user-select:none;touch-action:none;box-shadow:inset 0 0 0 1px #00000014}.spectrum-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}.spectrum-reticle{position:absolute;width:20px;height:20px;border-radius:50%;border:3px solid #ffffff;box-shadow:0 0 0 1px #00000059,0 2px 6px #0000004d;transform:translate(-50%,-50%);pointer-events:none}.slider-container{display:flex;flex-direction:column;gap:var(--space-4);margin-top:var(--space-5)}.slider-field{display:flex;flex-direction:column;gap:var(--space-2)}.slider-label{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted)}.slider-value{color:var(--text-secondary);font-variant-numeric:tabular-nums}.custom-slider-wrap{position:relative;height:12px;border-radius:var(--radius-full);box-shadow:inset 0 0 0 1px #00000014;cursor:pointer;touch-action:none}.custom-slider-wrap:before{content:"";position:absolute;inset:-14px 0}.hue-slider-track{background:linear-gradient(to right,red,#ff0 17%,#0f0 33%,#0ff,#00f 67%,#f0f 83%,red)}.alpha-slider-track{background-color:#fff;background-image:linear-gradient(45deg,#d6d3cc 25%,transparent 25%),linear-gradient(-45deg,#d6d3cc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#d6d3cc 75%),linear-gradient(-45deg,transparent 75%,#d6d3cc 75%);background-size:8px 8px;background-position:0 0,0 4px,4px -4px,-4px 0px}.alpha-slider-overlay{position:absolute;inset:0;border-radius:inherit}.slider-thumb{position:absolute;top:50%;width:20px;height:20px;border-radius:50%;background-color:#fff;border:3px solid #ffffff;box-shadow:0 0 0 1px #00000040,0 2px 6px #00000040;transform:translate(-50%,-50%);pointer-events:none}.color-preview-box{position:relative;width:100%;min-height:168px;border-radius:var(--radius-lg);display:flex;flex-direction:column;justify-content:space-between;gap:var(--space-4);padding:var(--space-4) var(--space-5) var(--space-5);box-shadow:inset 0 0 0 1px #0000000f;overflow:hidden}.swatch-actions{display:flex;justify-content:flex-end;gap:var(--space-2)}.swatch-btn{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:var(--radius-full);font-size:var(--text-xs);font-weight:var(--font-weight-medium);color:inherit;background-color:#ffffff2e;border:1px solid rgba(255,255,255,.28);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:background-color var(--transition-fast)}.color-preview-box.is-light .swatch-btn{background-color:#0000000f;border-color:#00000024}.swatch-btn:hover{background-color:#ffffff4d}.color-preview-box.is-light .swatch-btn:hover{background-color:#0000001f}.swatch-hex{font-family:var(--font-sans);font-size:clamp(2.25rem,4vw,3.25rem);font-weight:var(--font-weight-bold);letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}.swatch-advice{margin-top:var(--space-2);font-size:var(--text-xs);opacity:.8}.value-rows{margin-top:var(--space-2)}.value-row{display:grid;grid-template-columns:64px minmax(0,1fr) auto;align-items:center;gap:var(--space-3);padding:7px 0;border-bottom:1px solid var(--border-subtle)}.value-row-label{font-family:var(--font-mono);font-size:11px;font-weight:var(--font-weight-medium);letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted)}.value-row-fields{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:var(--space-2)}.value-row .input-wrapper{border-color:transparent;background-color:var(--bg-surface-elevated)}.value-row .input-wrapper:hover{border-color:var(--border-medium)}.value-row .input-wrapper:focus-within{border-color:var(--border-focus);background-color:var(--bg-input)}.value-row .input-field{padding:6px 10px}.input-prefix,.input-suffix{font-family:var(--font-mono);font-size:11px;color:var(--text-muted);flex-shrink:0;user-select:none}.input-prefix{padding-left:10px}.input-prefix+.input-field{padding-left:6px}.input-suffix{padding-right:10px}.value-row input[type=number]{-moz-appearance:textfield;appearance:textfield}.value-row input[type=number]::-webkit-inner-spin-button,.value-row input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.value-row .input-error-msg{grid-column:2 / -1}.copy-icon-btn{width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);color:var(--text-muted);transition:color var(--transition-fast),background-color var(--transition-fast)}.copy-icon-btn:hover{color:var(--text-primary);background-color:var(--bg-subtle)}.value-row-spacer{width:32px}.recent-colors{margin-top:var(--space-4);display:flex;align-items:center;gap:var(--space-3)}.recent-colors .value-row-label{flex-shrink:0;width:64px}.swatch-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(70px,1fr));gap:var(--space-2)}.recent-colors .swatch-grid{display:flex;flex-wrap:wrap;gap:6px}.recent-colors .swatch-item{width:24px;height:24px;padding:0;border-radius:50%;font-size:0;box-shadow:inset 0 0 0 1px #0000001a;border:none}.swatch-item{height:52px;border-radius:var(--radius-sm);display:flex;align-items:flex-end;justify-content:center;padding:4px;font-family:var(--font-mono);font-size:10px;font-weight:var(--font-weight-medium);cursor:pointer;transition:transform var(--transition-fast);border:1px solid rgba(0,0,0,.08);position:relative}.swatch-item:hover{transform:translateY(-2px);z-index:2}.shade-strip-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--space-1) var(--space-4);margin-bottom:var(--space-3)}.shade-strip-title{font-size:var(--text-sm);font-weight:var(--font-weight-semibold);color:var(--text-primary);white-space:nowrap}.shade-strip-hint{font-size:var(--text-xs);color:var(--text-muted)}.shade-strip{display:grid;grid-template-columns:repeat(11,minmax(0,1fr));gap:4px}.shade-step{display:flex;flex-direction:column;gap:6px;text-align:left;min-width:0}.shade-step-color{display:block;height:56px;border-radius:var(--radius-sm);box-shadow:inset 0 0 0 1px #0000000f;transition:transform var(--transition-fast)}.shade-step:hover .shade-step-color{transform:translateY(-2px)}.shade-step.is-base .shade-step-color{box-shadow:inset 0 0 0 1px #0000000f,0 0 0 2px var(--bg-surface),0 0 0 4px var(--text-primary)}.shade-step-hex{font-family:var(--font-mono);font-size:11px;color:var(--text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.shade-step.is-base .shade-step-hex{color:var(--text-primary);font-weight:var(--font-weight-semibold)}@media (max-width: 640px){.shade-strip{grid-template-columns:repeat(6,minmax(0,1fr));row-gap:var(--space-3)}}.tool-card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:var(--space-3)}.tool-card{display:grid;grid-template-columns:40px minmax(0,1fr);gap:var(--space-4);align-items:start;padding:var(--space-5);background-color:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);transition:border-color var(--transition-fast),box-shadow var(--transition-fast),transform var(--transition-fast)}.tool-card:hover{border-color:var(--border-medium);box-shadow:var(--shadow-lg);transform:translateY(-2px)}@media (prefers-reduced-motion: reduce){.tool-card:hover{transform:none}}.tool-glyph{width:40px;height:40px;border-radius:10px;box-shadow:inset 0 0 0 1px #00000014}.tool-card-title{font-size:var(--text-base);font-weight:var(--font-weight-semibold);letter-spacing:-.015em;color:var(--text-primary);margin-bottom:4px}.tool-card-text{font-size:var(--text-sm);line-height:1.55;color:var(--text-secondary)}.tool-card:hover .tool-card-title{color:var(--brand-primary)}.home-swatch-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3)}@media (min-width: 640px){.home-swatch-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media (min-width: 1024px){.home-swatch-grid{grid-template-columns:repeat(6,minmax(0,1fr))}}.home-swatch{display:flex;flex-direction:column;border:1px solid var(--border-subtle);border-radius:var(--radius-lg);overflow:hidden;background-color:var(--bg-surface);transition:border-color var(--transition-fast)}.home-swatch:hover{border-color:var(--border-strong)}.home-swatch-color{height:88px;transition:height var(--transition-normal)}.home-swatch:hover .home-swatch-color{height:96px}.home-swatch-name{padding:var(--space-3) var(--space-3) 0;font-size:var(--text-sm);font-weight:var(--font-weight-semibold);color:var(--text-primary)}.home-swatch-hex{padding:2px var(--space-3) var(--space-3);font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-muted)}.section-note{margin-top:var(--space-6);color:var(--text-secondary)}.feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:var(--space-8)}.feature{padding-top:var(--space-4);border-top:1px solid var(--border-medium)}.feature-num{display:block;font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-muted);margin-bottom:var(--space-3)}.feature-title{font-size:var(--text-lg);font-weight:var(--font-weight-semibold);letter-spacing:-.02em;color:var(--text-primary);margin-bottom:var(--space-2)}.feature-text{font-size:var(--text-sm);line-height:1.65;color:var(--text-secondary)}.badge{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:var(--radius-full);font-family:var(--font-mono);font-size:11px;font-weight:var(--font-weight-semibold);letter-spacing:.04em;text-transform:uppercase}.badge-success{background-color:var(--color-success-bg);color:var(--color-success);border:1px solid color-mix(in srgb,var(--color-success) 25%,transparent)}.badge-danger{background-color:var(--color-danger-bg);color:var(--color-danger);border:1px solid color-mix(in srgb,var(--color-danger) 25%,transparent)}.badge-warning{background-color:var(--color-warning-bg);color:var(--color-warning);border:1px solid color-mix(in srgb,var(--color-warning) 25%,transparent)}.badge-neutral{background-color:var(--bg-surface-elevated);color:var(--text-secondary);border:1px solid var(--border-medium)}.segmented-control{display:flex;background-color:var(--bg-surface-elevated);padding:3px;border-radius:var(--radius-md);gap:2px;border:1px solid var(--border-subtle)}.segmented-btn{flex:1;padding:6px 12px;font-size:var(--text-xs);font-weight:var(--font-weight-medium);border-radius:var(--radius-sm);color:var(--text-secondary);text-align:center;white-space:nowrap;transition:background-color var(--transition-fast),color var(--transition-fast)}.segmented-btn:hover{color:var(--text-primary)}.segmented-btn.active{background-color:var(--bg-surface);color:var(--text-primary);box-shadow:0 0 0 1px var(--border-medium)}.toast-container{position:fixed;bottom:var(--space-6);right:var(--space-6);z-index:1000;display:flex;flex-direction:column;gap:var(--space-2);pointer-events:none}.toast{background-color:var(--bg-surface-elevated);color:var(--text-primary);border:1px solid var(--border-medium);padding:10px var(--space-4);border-radius:var(--radius-full);font-size:var(--text-sm);font-weight:var(--font-weight-medium);box-shadow:var(--shadow-lg);display:flex;align-items:center;gap:var(--space-2);animation:toastIn .2s ease-out forwards;pointer-events:auto}@keyframes toastIn{0%{opacity:0;transform:translateY(12px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}.code-block-wrap{position:relative;background-color:var(--bg-surface-elevated);border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:var(--space-3) var(--space-4);font-family:var(--font-mono);font-size:var(--text-xs);line-height:1.7;color:var(--text-primary);display:flex;align-items:center;justify-content:space-between;overflow-x:auto}.code-block-wrap pre{margin:0;white-space:pre-wrap;word-break:break-all}.export-section{margin-top:var(--space-12)}.token-name-field{display:flex;align-items:center;gap:var(--space-3)}.token-name-field .input-wrapper{width:150px}.code-export-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:var(--space-3)}.faq-list{display:flex;flex-direction:column;border-top:1px solid var(--border-subtle)}.faq-list .faq-item{padding:var(--space-5) 0;background:none;border:none;border-bottom:1px solid var(--border-subtle);border-radius:0}.faq-question{font-size:var(--text-base);font-weight:var(--font-weight-semibold);letter-spacing:-.01em;margin-bottom:var(--space-2);color:var(--text-primary)}.faq-answer{font-size:var(--text-sm);color:var(--text-secondary);line-height:1.7;max-width:760px}.related-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--space-3)}.related-card{display:flex;flex-direction:column;gap:var(--space-1);padding:var(--space-4)}.related-title{font-weight:var(--font-weight-semibold);color:var(--text-primary)}.related-card:hover .related-title{color:var(--brand-primary)}.related-blurb{font-size:var(--text-xs);line-height:1.5;color:var(--text-secondary)}.color-hero{display:grid;grid-template-columns:1fr;gap:var(--space-6);align-items:center;margin-bottom:var(--space-4)}@media (min-width: 900px){.color-hero{grid-template-columns:360px 1fr;gap:var(--space-10)}}.color-hero-swatch{aspect-ratio:4 / 3;border-radius:var(--radius-xl);box-shadow:inset 0 0 0 1px #0000000f;display:flex;flex-direction:column;justify-content:flex-end;padding:var(--space-6);font-weight:var(--font-weight-bold);font-size:var(--text-2xl);letter-spacing:-.03em}.color-hero-hex{font-family:var(--font-mono);font-size:var(--text-base);font-weight:var(--font-weight-medium);letter-spacing:0;opacity:.85}.color-hero-actions{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-4)}.data-table-card{padding:0;overflow-x:auto}.data-table{width:100%;border-collapse:collapse;font-size:var(--text-sm)}.data-table th,.data-table td{padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--border-subtle);text-align:left}.data-table tr:last-child th,.data-table tr:last-child td{border-bottom:none}.data-table th{font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.04em;text-transform:uppercase;color:var(--text-muted);font-weight:var(--font-weight-medium);white-space:nowrap}.data-table code{font-family:var(--font-mono);color:var(--text-primary)}.data-table td.data-table-action{text-align:right;width:1%}.contrast-sample-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--space-3)}.contrast-sample{padding:var(--space-3);display:flex;flex-direction:column;gap:var(--space-2)}.contrast-sample-preview{border-radius:var(--radius-md);border:1px solid var(--border-subtle);padding:var(--space-5) var(--space-4);font-size:var(--text-xl);font-weight:var(--font-weight-bold);letter-spacing:-.02em}.contrast-sample-label{font-size:var(--text-sm);font-weight:var(--font-weight-semibold)}.contrast-sample-stats{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-3);font-size:var(--text-xs);color:var(--text-secondary)}.swatch-row-title{font-size:var(--text-sm);font-weight:var(--font-weight-semibold);color:var(--text-secondary);margin:var(--space-4) 0 var(--space-2)}.named-swatch-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:var(--space-2)}.named-swatch{min-height:72px;border-radius:var(--radius-sm);box-shadow:inset 0 0 0 1px #0000000f;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;padding:var(--space-2);cursor:pointer;font-family:var(--font-mono);font-size:11px;text-align:left;transition:transform var(--transition-fast)}.named-swatch:hover{transform:translateY(-2px)}.named-swatch-caption{font-family:var(--font-sans);font-weight:var(--font-weight-semibold);opacity:.85}.harmony-list{display:flex;flex-direction:column}.named-color-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:var(--space-3)}.named-color-card{display:grid;grid-template-columns:40px 1fr;grid-template-rows:auto auto;column-gap:var(--space-3);align-items:center;padding:var(--space-3)}.named-color-chip{grid-row:span 2;width:40px;height:40px;border-radius:var(--radius-sm);box-shadow:inset 0 0 0 1px #00000014}.named-color-name{font-weight:var(--font-weight-semibold);font-size:var(--text-sm);color:var(--text-primary)}.named-color-code{font-family:var(--font-mono);font-size:11px;color:var(--text-secondary)}.name-swatch-link{color:var(--text-primary);text-decoration:underline;text-decoration-color:var(--border-strong);text-underline-offset:3px}.name-swatch-link:hover{color:var(--brand-primary)}.family-intro{max-width:820px}.family-links{display:flex;flex-wrap:wrap;gap:var(--space-2)}.tw-scale-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:var(--space-2)}.tw-scale-swatch{min-height:88px;border-radius:var(--radius-sm);box-shadow:inset 0 0 0 1px #0000000f;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;padding:var(--space-2);cursor:pointer;font-size:11px;text-align:left}.tw-scale-step{font-weight:var(--font-weight-semibold)}.tw-scale-hex{font-family:var(--font-mono);opacity:.85}.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.tool-panel{background-color:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-xl);padding:var(--space-4)}@media (min-width: 768px){.tool-panel{padding:var(--space-6)}}.color-strip{display:flex;height:40px;border-radius:var(--radius-md);overflow:hidden}.color-strip-sm{height:24px;border-radius:var(--radius-sm)}.color-strip-lg{height:56px}.color-strip-chip{position:relative;flex:1 1 0;min-width:0;cursor:pointer;transition:flex-grow var(--transition-fast),box-shadow var(--transition-fast)}.color-strip-chip:hover{flex-grow:1.4}.color-strip-chip:focus-visible{outline:2px solid var(--dot, #ffffff);outline-offset:-5px}.color-strip-chip.is-active:after{content:"";position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background-color:var(--dot, #ffffff)}.info-bar{position:sticky;top:calc(var(--header-height) + var(--space-2));z-index:20;display:flex;align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-3);margin-bottom:var(--space-3);background-color:var(--bg-surface);background-color:color-mix(in srgb,var(--bg-surface) 92%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)}.info-bar-swatch{width:28px;height:28px;flex-shrink:0;border-radius:50%;box-shadow:inset 0 0 0 1px #0000001f}.info-bar-label{font-family:var(--font-mono);font-size:var(--text-xs);font-weight:var(--font-weight-semibold);white-space:nowrap}.info-bar-values{display:flex;flex-wrap:wrap;gap:2px var(--space-1);min-width:0}.info-bar-value{display:inline-flex;align-items:baseline;gap:6px;padding:4px 8px;border-radius:var(--radius-sm);font-size:var(--text-xs);white-space:nowrap;transition:background-color var(--transition-fast)}.info-bar-value:hover{background-color:var(--bg-subtle)}.info-bar-key{font-family:var(--font-mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted)}.info-bar-val{font-family:var(--font-mono);color:var(--text-primary);font-variant-numeric:tabular-nums}.info-bar-ramp{display:none;width:220px;flex-shrink:0;margin-left:auto}@media (min-width: 1100px){.info-bar-ramp{display:block}}@media (max-width: 640px){.info-bar-value:nth-child(n+3){display:none}}.color-field{display:flex;align-items:center;gap:var(--space-2);padding:4px 4px 4px 10px;border:1px solid var(--border-medium);border-radius:var(--radius-md);background-color:var(--bg-input);transition:border-color var(--transition-fast),box-shadow var(--transition-fast)}.color-field:focus-within{border-color:var(--border-focus);box-shadow:0 0 0 3px var(--brand-primary-light)}.color-field-dot{width:18px;height:18px;flex-shrink:0;border-radius:50%;box-shadow:inset 0 0 0 1px #0000001f}.color-field-input{flex:1;min-width:0;padding:6px 0;font-family:var(--font-mono);font-size:var(--text-sm);font-weight:var(--font-weight-medium);color:var(--text-primary)}.select-field,.color-field-format{appearance:none;-webkit-appearance:none;background-color:var(--bg-surface-elevated);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238a8a94' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;padding:6px 30px 6px 10px;border-radius:var(--radius-sm);font-size:var(--text-xs);font-weight:var(--font-weight-semibold);color:var(--text-primary);cursor:pointer}.select-field{width:100%;padding:10px 36px 10px 14px;font-size:var(--text-sm);border:1px solid var(--border-medium);border-radius:var(--radius-md);background-color:var(--bg-surface);background-position:right 14px center}.select-field:hover{border-color:var(--border-strong)}.tool-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-2)}.tool-actions .btn{min-width:0;padding:10px 8px}.export-dialog{width:min(640px,calc(100% - 32px));max-height:85vh;margin:auto;padding:0;border:1px solid var(--border-medium);border-radius:var(--radius-xl);background-color:var(--bg-surface);color:var(--text-primary);box-shadow:var(--shadow-xl)}.export-dialog::backdrop{background:#0a0a0c8c}.export-dialog-body{display:flex;flex-direction:column;gap:var(--space-4);padding:var(--space-5)}.export-dialog-head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3)}.export-dialog-title{font-size:var(--text-lg);font-weight:var(--font-weight-semibold);letter-spacing:-.02em}.export-dialog-tabs{overflow-x:auto}.export-dialog-code{max-height:46vh;overflow:auto;align-items:flex-start}.export-dialog-code pre{white-space:pre;word-break:normal}.export-dialog-actions{display:flex;justify-content:flex-end}.ip-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-6)}@media (min-width: 1024px){.ip-grid{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);align-items:start}}.ip-stage{position:relative;padding:var(--space-3);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);background-color:var(--bg-surface-elevated)}.ip-stage.is-dragover{border:1px dashed var(--border-focus)}.ip-frame{position:relative;width:100%;margin:0 auto;cursor:crosshair;user-select:none;touch-action:none}.ip-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;border-radius:var(--radius-sm)}.ip-points{position:absolute;inset:0}.ip-point{position:absolute;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;border:2px solid #ffffff;box-shadow:0 0 0 1px #00000059,0 2px 6px #0000004d;cursor:grab;transition:width var(--transition-fast),height var(--transition-fast),margin var(--transition-fast)}.ip-point:before,.cw-handle:before{content:"";position:absolute;inset:-12px;border-radius:50%}.ip-point.is-active{width:34px;height:34px;margin:-17px 0 0 -17px;border-width:3px}.ip-point:focus-visible{outline:2px solid #ffffff;outline-offset:3px}.ip-drop-hint{position:absolute;inset:0;display:none;align-items:center;justify-content:center;border-radius:inherit;background-color:color-mix(in srgb,var(--bg-surface) 82%,transparent);font-weight:var(--font-weight-semibold)}.ip-stage.is-dragover .ip-drop-hint{display:flex}.ip-note{display:flex;align-items:center;gap:6px;margin-top:var(--space-3);font-size:var(--text-xs);color:var(--text-muted)}.ip-side{display:flex;flex-direction:column;gap:var(--space-4)}.ip-palette-row{display:flex;align-items:center;gap:var(--space-2)}.ip-palette{flex:1;min-width:0}.ip-stepper{display:flex;flex-direction:column;flex-shrink:0;border:1px solid var(--border-medium);border-radius:var(--radius-sm);overflow:hidden}.ip-step-btn{width:28px;height:22px;display:flex;align-items:center;justify-content:center;color:var(--text-secondary)}.ip-step-btn+.ip-step-btn{border-top:1px solid var(--border-medium)}.ip-step-btn:hover:not(:disabled){background-color:var(--bg-subtle);color:var(--text-primary)}.ip-step-btn:disabled{opacity:.35;cursor:not-allowed}.ip-selected-swatch{min-height:132px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-lg);font-size:clamp(1.5rem,3vw,2rem);font-weight:var(--font-weight-bold);letter-spacing:-.03em;font-variant-numeric:tabular-nums;box-shadow:inset 0 0 0 1px #0000000f}.color-details{margin-top:var(--space-8);border-top:1px solid var(--border-subtle)}.details-section{border-bottom:1px solid var(--border-subtle)}.details-section>summary{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding:var(--space-5) 0;cursor:pointer;list-style:none}.details-section>summary::-webkit-details-marker{display:none}.details-title{font-size:var(--text-lg);font-weight:var(--font-weight-semibold);letter-spacing:-.02em}.details-chevron{flex-shrink:0;color:var(--text-muted);transition:transform var(--transition-normal)}.details-section[open] .details-chevron{transform:rotate(180deg)}.details-body{padding-bottom:var(--space-6)}.details-grid{display:grid;grid-template-columns:1fr;gap:var(--space-5) var(--space-6)}@media (min-width: 768px){.details-grid{grid-template-columns:1fr 1fr}.details-grid.details-grid-1{grid-template-columns:1fr}}.details-item{display:flex;flex-direction:column;gap:var(--space-2)}.details-item-head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2)}.details-item-title{font-size:var(--text-sm);font-weight:var(--font-weight-semibold)}.details-item-meta{font-family:var(--font-mono);font-size:11px;color:var(--text-muted)}.details-note{margin-top:var(--space-4);font-size:var(--text-sm);color:var(--text-secondary)}.cw-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-6)}@media (min-width: 900px){.cw-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}}.cw-main{display:flex;flex-direction:column;gap:var(--space-4);padding:var(--space-5);border:1px solid var(--border-subtle);border-radius:var(--radius-lg)}.cw-wheel{position:relative;width:min(100%,400px);aspect-ratio:1;margin:0 auto var(--space-2)}.cw-ring{position:absolute;inset:0;border-radius:50%;-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 16px),#000 calc(100% - 15px));mask:radial-gradient(farthest-side,transparent calc(100% - 16px),#000 calc(100% - 15px));cursor:pointer;touch-action:none}.cw-ring:focus-visible{outline:none}.cw-ring:focus-visible+.cw-ring-handle{outline:2px solid var(--border-focus);outline-offset:3px}.cw-ring-handle{position:absolute;left:calc(50% + var(--sx, 0) * (50% - 8px));top:calc(50% - var(--sy, 1) * (50% - 8px));width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;border:3px solid #ffffff;box-shadow:0 0 0 1px #0000004d,0 2px 6px #0000004d;pointer-events:none}.cw-disk{position:absolute;inset:26px;border-radius:50%;cursor:crosshair;touch-action:none}.cw-canvas{width:100%;height:100%;display:block;border-radius:50%}.cw-handles{position:absolute;inset:0}.cw-handle{position:absolute;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;border:2px solid #ffffff;box-shadow:0 0 0 1px #00000059,0 1px 4px #0000004d;cursor:grab}.cw-handle.is-base{width:28px;height:28px;margin:-14px 0 0 -14px;border-width:3px}.cw-handle:focus-visible{outline:2px solid #ffffff;outline-offset:2px}.cw-error{margin-top:calc(var(--space-2) * -1)}.cw-side{display:flex;flex-direction:column;gap:var(--space-3)}.cw-swatches{flex:1;min-height:360px;display:flex;flex-direction:column;border-radius:var(--radius-lg);overflow:hidden}.cw-swatch{flex:1 1 0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:var(--text-lg);font-weight:var(--font-weight-semibold);letter-spacing:.01em;transition:flex-grow var(--transition-fast)}.cw-swatch:hover{flex-grow:1.2}.cw-swatch:focus-visible{outline:2px solid currentColor;outline-offset:-6px}.cw-swatch-tag{font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;opacity:.75}.cw-tool .ip-note{margin-top:var(--space-4)}.tw-chart-controls{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-3);margin-bottom:var(--space-6);font-size:var(--text-sm);color:var(--text-secondary)}.tw-chart{display:flex;flex-direction:column;gap:var(--space-6)}.tw-row-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-2)}.tw-row-name{font-size:var(--text-base);font-weight:var(--font-weight-semibold);letter-spacing:-.01em}.tw-strip .color-strip-chip:hover{flex-grow:1;box-shadow:inset 0 0 0 2px #fff9}.tw-steps{display:grid;grid-template-columns:repeat(11,minmax(0,1fr));margin-top:4px;font-family:var(--font-mono);font-size:10px;text-align:center;color:var(--text-muted)}.cvd-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:var(--space-4)}.cvd-panel{margin:0;padding:var(--space-3);display:flex;flex-direction:column;gap:var(--space-3)}.cvd-canvas{width:100%;height:auto;border-radius:var(--radius-sm);background-color:var(--bg-subtle)}.cvd-panel figcaption{display:flex;flex-direction:column;gap:2px;font-size:var(--text-xs);color:var(--text-secondary)}.cvd-panel figcaption strong{font-size:var(--text-sm);color:var(--text-primary)}.contact-hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}.contact-status{font-size:var(--text-sm);color:var(--text-primary);padding-left:var(--space-3);border-left:3px solid var(--color-success)}.contact-status.is-error{border-left-color:var(--color-danger)}.contact-status:empty{padding:0;border:0}.contact-result{display:none;scroll-margin-top:calc(var(--header-height) + var(--space-4))}.contact-result:target{display:block}.contact-note{font-size:var(--text-xs);color:var(--text-secondary)}.contact-note a{color:var(--text-primary)}.contact-help{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-4);margin-top:var(--space-6)}.consent-banner{position:fixed;left:var(--space-4);right:var(--space-4);bottom:var(--space-4);z-index:900;max-width:720px;margin:0 auto;display:flex;flex-direction:column;gap:var(--space-4);padding:var(--space-5);background-color:var(--bg-surface-elevated);border:1px solid var(--border-medium);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);font-size:var(--text-sm);line-height:1.6;color:var(--text-secondary)}.consent-banner-title{font-size:var(--text-base);font-weight:var(--font-weight-semibold);color:var(--text-primary);margin-bottom:var(--space-1)}.consent-banner-status{margin-top:var(--space-2);color:var(--text-primary);font-weight:var(--font-weight-medium)}.consent-banner-actions{display:flex;flex-wrap:wrap;gap:var(--space-2)}.consent-banner-actions .btn{flex:1 1 auto;min-height:44px}@media (min-width: 768px){.consent-banner{flex-direction:row;align-items:center}.consent-banner-actions{flex-wrap:nowrap;flex-shrink:0}}.footer-consent-btn{font:inherit;color:var(--text-secondary);background:none;border:0;padding:0;margin-left:var(--space-2);text-decoration:underline;text-underline-offset:3px}.footer-consent-btn:hover{color:var(--text-primary)}.result-grid{display:grid;grid-template-columns:1fr;gap:var(--space-3)}@media (min-width: 640px){.result-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (min-width: 1024px){.result-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}.native-color-picker{width:40px;height:38px;flex-shrink:0;padding:3px;border:1px solid var(--border-medium);border-radius:var(--radius-md);background-color:var(--bg-input);cursor:pointer}.native-color-picker::-webkit-color-swatch-wrapper{padding:0}.native-color-picker::-webkit-color-swatch{border:none;border-radius:5px}.native-color-picker::-moz-color-swatch{border:none;border-radius:5px}.contrast-inputs{display:grid;grid-template-columns:1fr;gap:var(--space-4);align-items:end}.contrast-swap{justify-self:center}@media (min-width: 640px){.contrast-inputs{grid-template-columns:1fr auto 1fr}.contrast-swap{margin-bottom:2px}}.dual-inputs{display:grid;grid-template-columns:1fr;gap:var(--space-4)}@media (min-width: 640px){.dual-inputs{grid-template-columns:1fr 1fr}}.tw-controls{display:grid;grid-template-columns:auto 1fr;gap:var(--space-4);align-items:end;margin-bottom:var(--space-6)}.tw-controls .input-group:last-child{grid-column:1 / -1}@media (min-width: 640px){.tw-controls{grid-template-columns:auto 1fr 1fr}.tw-controls .input-group:last-child{grid-column:auto}}