:root{--bg: #fafaf7;--surface: #ffffff;--ink: #1a1a1a;--muted: #565652;--border: #e3e2dc;--control-border: #8a8a85;--pass: #19653a;--partial: #74531c;--fail: #a1312a;--font-ui: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;--font-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 24px;--space-6: 32px;--radius: 4px}*,*:before,*:after{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-ui);font-size:16px;line-height:1.5}h1,h2,h3,h4,p{margin:0}button,input{font:inherit;color:inherit}input::placeholder{color:var(--muted);opacity:1}:focus-visible{outline:2px solid var(--ink);outline-offset:2px}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.mono{font-family:var(--font-mono)}.app-header{display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--space-2) var(--space-4);padding:var(--space-4) var(--space-5);border-bottom:1px solid var(--border)}.app-title{font-size:1.75rem;font-weight:600;line-height:1.2;letter-spacing:-.01em}.app-tagline{color:var(--muted);font-size:.9375rem}.palette-band{display:flex;height:6px}.palette-band-segment{flex:1}.layout{display:grid;grid-template-columns:280px minmax(0,1fr) 440px;align-items:start;min-height:calc(100vh - 70px)}.rail{padding:var(--space-5)}.rail-left{background:var(--surface);border-right:1px solid var(--border);align-self:stretch}.matrix-zone{padding:var(--space-5) var(--space-4);min-width:0}.section-heading{font-size:.8125rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:var(--space-3)}.button{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);padding:6px var(--space-3);background:var(--surface);border:1px solid var(--control-border);border-radius:var(--radius);font-size:.875rem;font-weight:500;cursor:pointer;white-space:nowrap}.button:hover{background:var(--bg)}.button-primary{background:var(--ink);border-color:var(--ink);color:var(--surface)}.button-primary:hover{background:var(--muted);border-color:var(--muted)}.button:disabled{background:var(--surface);border-color:var(--border);color:var(--muted);cursor:not-allowed}.chip-list{list-style:none;margin:0 0 var(--space-4);padding:0;border-top:1px solid var(--border)}.chip{border-bottom:1px solid var(--border)}.chip-row{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) 0}.chip-swatch{flex:none;width:36px;height:36px;border:1px solid var(--border);border-radius:var(--radius)}.chip-value,.chip-input{flex:1;min-width:0;padding:4px var(--space-2);font-family:var(--font-mono);font-size:1rem;text-align:left;border:1px solid transparent;border-radius:var(--radius);background:transparent}.chip-value{cursor:text}.chip-value:hover{border-color:var(--control-border)}.chip-input{border-color:var(--control-border);background:var(--surface)}.chip-remove{flex:none;width:32px;height:32px;padding:0;border:1px solid transparent;border-radius:var(--radius);background:transparent;color:var(--muted);font-size:1.25rem;line-height:1;cursor:pointer}.chip-remove:hover{color:var(--ink);border-color:var(--control-border)}.chip-message{font-size:.8125rem}.chip-message:not(:empty){padding-bottom:var(--space-2)}.add-label{display:block;font-size:.875rem;font-weight:500;margin-bottom:var(--space-1)}.add-row{display:flex;gap:var(--space-2)}.add-input{flex:1;min-width:0;padding:6px var(--space-2);font-family:var(--font-mono);font-size:.9375rem;border:1px solid var(--control-border);border-radius:var(--radius);background:var(--surface)}.add-input[aria-invalid=true]{border-width:2px;padding:5px 7px}.hint{margin-top:var(--space-2);font-size:.875rem;color:var(--muted)}.form-message{margin-top:var(--space-2);font-size:.875rem}.form-message.is-error:before{content:"Not added: ";font-weight:600}.empty-state{max-width:460px;margin:var(--space-6) auto;padding:var(--space-5);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius)}.empty-state p{margin:var(--space-2) 0 var(--space-4);color:var(--muted)}.empty-state p:last-child{margin-bottom:0}.empty-title{font-size:1.125rem;font-weight:600}.controls{padding-bottom:var(--space-4);margin-bottom:var(--space-4);border-bottom:1px solid var(--border)}.controls-row{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--space-3) var(--space-4)}.control-group{margin:0;padding:0;border:0;min-width:0}.control-label{padding:0;margin-bottom:var(--space-1);font-size:.8125rem;font-weight:500;color:var(--muted)}.segmented{display:inline-flex;border:1px solid var(--control-border);border-radius:var(--radius);background:var(--surface);overflow:hidden}.segmented:focus-within{outline:2px solid var(--ink);outline-offset:2px}.segment{position:relative;display:flex}.segment+.segment{border-left:1px solid var(--control-border)}.segment-input{position:absolute;opacity:0;width:1px;height:1px;margin:0}.segment-label{padding:5px var(--space-3);font-size:.875rem;font-weight:500;color:var(--muted);cursor:pointer;border-radius:0}.segment-label:hover{color:var(--ink)}.segment-input:checked+.segment-label{background:var(--ink);color:var(--surface)}.color-count{font-size:.875rem;color:var(--muted);margin-left:auto;padding-bottom:6px}.color-count .mono{color:var(--ink)}.controls-actions{display:flex;gap:var(--space-2)}.settings-note{margin-top:var(--space-3);font-size:.875rem;color:var(--muted)}.matrix-legend{font-size:.875rem;color:var(--muted);margin-bottom:var(--space-3)}.matrix-scroll{position:relative;overflow-x:auto;padding:3px}.matrix{border-collapse:separate;border-spacing:0;background:var(--surface);border-top:1px solid var(--border);border-left:1px solid var(--border)}.matrix th,.matrix td{border-right:1px solid var(--border);border-bottom:1px solid var(--border)}.matrix-corner{min-width:116px;padding:var(--space-2);text-align:left;vertical-align:bottom;font-size:.8125rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);background:var(--surface)}.corner-columns,.corner-rows{display:block;white-space:nowrap}.matrix-column-header,.matrix-row-header{font-weight:400;background:var(--surface)}.matrix-column-header{padding:var(--space-2);min-width:92px;vertical-align:bottom}.matrix-column-header .header-swatch{display:block;width:100%;height:24px;margin-bottom:var(--space-1)}.matrix-row-header{padding:var(--space-2);text-align:left;white-space:nowrap}.matrix-row-header .header-swatch{display:inline-block;width:20px;height:20px;margin-right:var(--space-2);vertical-align:middle}.header-swatch{border:1px solid var(--border);border-radius:2px}.header-hex{font-family:var(--font-mono);font-size:.875rem;color:var(--muted)}.matrix-column-header.is-active .header-hex,.matrix-row-header.is-active .header-hex{color:var(--ink);font-weight:600}.matrix-cell{padding:var(--space-2);text-align:center;cursor:pointer;background:var(--surface)}.matrix-cell:hover{background:var(--bg)}.matrix-cell:focus-visible{outline:2px solid var(--ink);outline-offset:-4px}.matrix-cell.is-selected{background:var(--bg);box-shadow:inset 0 0 0 2px var(--ink)}.matrix-cell.is-diagonal{cursor:default;background:var(--bg)}.matrix-tile{display:flex;align-items:center;justify-content:center;width:44px;height:28px;margin:0 auto var(--space-1);border:1px solid var(--border);border-radius:3px;font-size:.9375rem;font-weight:500;line-height:1}.matrix-ratio{display:block;font-family:var(--font-mono);font-size:1.0625rem;font-weight:500;font-variant-numeric:tabular-nums;margin-bottom:2px}.badge{display:inline-block;padding:1px 7px;border-radius:999px;font-family:var(--font-mono);font-size:.75rem;font-weight:500;letter-spacing:.04em;line-height:1.5;color:#fff;white-space:nowrap}.badge-pass{background:var(--pass)}.badge-large{background:var(--partial)}.badge-fail{background:var(--fail)}.rail-right{position:sticky;top:0;padding-left:0}.detail-placeholder{padding-top:var(--space-2);font-size:.875rem;color:var(--muted)}.detail{padding:var(--space-4);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 4px 16px #1a1a1a14;animation:detail-appear .16s ease-out;max-height:calc(100vh - 32px);overflow-y:auto}.detail:focus{outline:none}.detail:focus-visible{outline:2px solid var(--ink);outline-offset:2px}@keyframes detail-appear{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.detail-header{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-2)}.detail-title{font-size:.9375rem;font-weight:500;padding-top:4px}.detail-summary{margin-top:var(--space-1)}.detail-ratio{font-size:3.5rem;font-weight:500;line-height:1;font-variant-numeric:tabular-nums}.detail-ratio-unit{font-family:var(--font-mono);font-size:1.5rem;color:var(--muted)}.threshold-list{display:flex;flex-wrap:wrap;gap:var(--space-2);list-style:none;margin:var(--space-3) 0 0;padding:0}.threshold-item{display:flex;align-items:center;gap:4px;font-size:.8125rem;white-space:nowrap}.detail-subheading{margin:var(--space-3) 0 6px;font-size:.8125rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}.samples{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-2)}.sample{margin:0;min-width:0}.sample-box{height:72px;padding:var(--space-2) var(--space-3);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}.sample-normal,.sample-large{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sample-normal{font-size:16px;line-height:1.4}.sample-large{font-size:24px;line-height:1.3}.sample-caption{margin-top:var(--space-1);font-family:var(--font-mono);font-size:.8125rem;color:var(--muted)}.detail-note{font-size:.875rem;color:var(--muted)}.partner-row{display:flex;align-items:baseline;gap:var(--space-2);margin-bottom:6px}.partner-owner{flex:none;width:68px;font-size:.8125rem;color:var(--muted)}.partner-buttons{display:flex;flex-wrap:wrap;gap:6px}.partner-button{display:inline-flex;align-items:center;gap:6px;padding:2px 8px 2px 4px;background:var(--surface);border:1px solid var(--control-border);border-radius:var(--radius);font-size:.8125rem;cursor:pointer}.partner-button:hover{background:var(--bg);border-color:var(--ink)}.partner-swatch{width:14px;height:14px;border:1px solid var(--border);border-radius:2px}.partner-ratio{color:var(--muted)}.fix-cards{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-2);margin-top:6px}.fix-card{min-width:0;padding:10px;border:1px solid var(--border);border-radius:var(--radius)}.fix-title{margin:0 0 var(--space-2);font-size:.875rem;font-weight:600}.fix-compare{display:flex;align-items:center;gap:6px}.fix-swatch{flex:none;width:24px;height:24px;border:1px solid var(--border);border-radius:3px}.fix-arrow{color:var(--muted);font-size:.875rem}.fix-new-hex{margin-left:2px;font-size:.875rem;font-weight:500}.fix-numbers{display:flex;flex-wrap:wrap;gap:2px var(--space-3);margin-top:var(--space-2);font-size:.8125rem;color:var(--muted)}.fix-new-ratio{color:var(--ink)}.fix-note{margin-top:var(--space-1);font-size:.8125rem;line-height:1.4;color:var(--muted)}.fix-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:var(--space-2)}.button-small{padding:3px var(--space-2);font-size:.8125rem}.fix-none,.fix-message,.detail-status{font-size:.8125rem}.fix-message:not(:empty),.detail-status:not(:empty){margin-top:var(--space-2)}@media(prefers-reduced-motion:reduce){.detail{animation:none}}@media(max-width:1199px){.fix-cards{grid-template-columns:minmax(0,1fr)}}@media(max-width:900px){.detail{max-height:none}.layout{grid-template-columns:minmax(0,1fr);min-height:0}.rail-left{border-right:none;border-bottom:1px solid var(--border)}.rail-right{position:static;padding-left:var(--space-5);padding-top:0}.detail-placeholder{display:none}}