:root{--bg:#f6f4f0;--paper:#fff;--ink:#292631;--muted:#807c87;--line:#e8e3e4;--purple:#604e78;--purple-dark:#49365d;--soft:#faf8f6;--radius:15px;--shadow:0 9px 40px rgba(41,32,45,.035)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);font:14px/1.5 Inter,"Segoe UI",Arial,sans-serif;color:var(--ink)}button,input,select{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.48}input[type="checkbox"]{accent-color:var(--purple);cursor:pointer;width:16px;height:16px}a{color:var(--purple)}[hidden]{display:none!important}button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #b69bcf;outline-offset:2px}
.page-shell{max-width:1460px;width:calc(100% - 74px);margin:0 auto;padding-bottom:40px}.topbar{height:85px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #e4e0df}.brand{display:flex;align-items:center;gap:12px}.brand-symbol{width:40px;height:38px;position:relative}.brand-symbol i{position:absolute;display:block;width:19px;height:19px;transform:rotate(18deg);border:2px solid #b99697;border-radius:5px}.brand-symbol i:nth-child(1){top:2px;left:2px}.brand-symbol i:nth-child(2){top:12px;left:18px;border-color:#c8b78a}.brand-symbol i:nth-child(3){top:19px;left:6px;border-color:#8774a6}.brand strong{display:block;font-size:19px;line-height:1;letter-spacing:-.045em}.brand span{font-size:9px;letter-spacing:.14em;font-weight:800;color:#a6a0a8}.top-actions{display:flex;align-items:center;gap:20px}.engine-pill{border:1px solid #e7e3e7;background:white;border-radius:20px;font-size:11px;font-weight:700;color:#696373;padding:8px 12px;display:flex;align-items:center;gap:7px}.status-dot{width:7px;height:7px;background:#d4ab72;border-radius:100%}.engine-pill.is-mixbox .status-dot{background:#4a9d75}.text-button,.quiet-action{border:0;background:transparent;color:#665273;font-size:12px;font-weight:700;padding:6px 3px}.text-button:hover,.quiet-action:hover{text-decoration:underline}.heading-row{display:flex;justify-content:space-between;align-items:end;gap:26px;padding:41px 0 31px}.eyebrow{margin:0 0 8px;color:#9d929d;letter-spacing:.17em;font-size:10px;font-weight:800}.heading-row h1{font-size:clamp(29px,3vw,44px);line-height:1.18;letter-spacing:-.053em;margin:0 0 11px}.lede{margin:0;max-width:650px;color:#847e87;font-size:14px}.header-stats{display:flex;gap:31px;text-align:right;flex-shrink:0}.header-stats strong{font-size:30px;font-weight:750;line-height:1.08;display:block;letter-spacing:-.05em;color:#5c4d68}.header-stats span{font-size:9px;letter-spacing:.08em;font-weight:850;color:#aca3af}.workspace{display:grid;grid-template-columns:minmax(328px,.85fr) minmax(0,1.8fr);gap:19px;align-items:start}.panel{background:var(--paper);border:1px solid #efedeb;border-radius:var(--radius);box-shadow:var(--shadow)}.library-panel{overflow:hidden;position:sticky;top:12px}.panel-heading,.preview-topline,.matcher-heading,.mix-heading,.saved-header{display:flex;align-items:center;justify-content:space-between;gap:12px}.panel-heading{padding:25px 25px 15px}.panel h2{font-size:20px;line-height:1.15;letter-spacing:-.035em;margin:0}.small-add{width:31px;height:31px;border:1px solid #dfd3e6;border-radius:9px;background:#f7f3f9;color:var(--purple);font-size:22px;line-height:1}.range-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;background:#f6f4f6;border-radius:9px;padding:4px;margin:0 24px 14px}.range-tab{border:0;border-radius:7px;padding:9px 1px;background:transparent;color:#827988;font-size:11px;font-weight:750;white-space:nowrap}.range-tab.active{background:#fff;color:#4c3a64;box-shadow:0 1px 5px #dad3db}.search-wrap{display:flex;align-items:center;gap:9px;border:1px solid #e4dfe3;border-radius:8px;padding:0 11px;margin:0 24px 13px;min-height:39px}.search-wrap span{color:#978b9d;font-size:21px}.search-wrap input{border:0;outline:none!important;width:100%;min-width:0;color:var(--ink);background:transparent;font-size:13px}.library-filters{display:flex;gap:16px;align-items:center;flex-wrap:wrap;padding:0 24px 12px}.library-filters label,.check-small{display:inline-flex;gap:7px;align-items:center;font-size:12px;font-weight:650;color:#625c68}.library-caption{display:flex;justify-content:space-between;gap:10px;padding:0 24px 7px;font-size:10px;color:#9f95a3}.legend{font-size:9px;white-space:nowrap}.legend-dot{display:inline-block;width:6px;height:6px;background:#a1cb9f;border-radius:50%;margin-right:3px}.legend-divider{display:inline-block;border-left:1px solid #ddd;height:8px;margin:0 6px}.library-help{font-size:11px;color:#978f98;margin:0;padding:0 24px 12px;line-height:1.55}.paint-list{max-height:555px;overflow-y:auto;overscroll-behavior:contain;border-top:1px solid #eeeaec;border-bottom:1px solid #eeeaec}.paint-row{display:grid;grid-template-columns:33px minmax(0,1fr) 48px 48px 31px 31px;gap:7px;align-items:center;padding:10px 14px;border-bottom:1px solid #f1eeef;min-height:57px}.paint-row:hover{background:#fcfafb}.paint-swatch{width:30px;height:30px;border-radius:7px;border:1px solid #00000014}.paint-info{min-width:0}.paint-info strong{display:block;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3}.paint-info small{display:block;color:#9c95a0;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.paint-row .mini-check{display:flex;align-items:center;flex-direction:column;gap:1px;font-size:9px;color:#998f9c;font-weight:650;cursor:pointer}.paint-row .mini-check input{margin:0;width:17px;height:17px}.paint-row .icon-tiny{border:0;color:#856f98;background:#f5f1f6;border-radius:6px;width:29px;height:29px;font-size:15px;line-height:1}.paint-row .paint-add{background:#665179;color:white}.paint-row .paint-add.is-added{background:#e9e1ed;color:#563f67}.paint-row .paint-add:disabled{background:#e8e4e7;color:#aaa}.paint-row.excluded{opacity:.53}.paint-row.excluded:hover{opacity:.85}.paint-row.excluded .paint-info strong{text-decoration:line-through;text-decoration-color:#b6abb9}.library-actions,.library-bottom{display:flex;align-items:center;justify-content:space-between;padding:11px 24px;gap:8px}.library-actions{border-bottom:1px solid var(--line);background:#fff}.library-bottom{padding-top:13px;padding-bottom:13px}.library-bottom button{white-space:nowrap}.work-area{display:flex;flex-direction:column;gap:19px;min-width:0}.preview-panel,.matcher-panel,.mix-panel,.saved-panel{padding:24px 27px}.preview-hint{font-size:11px;color:#9b929d}.preview-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin-top:19px}.big-swatch{height:190px;border-radius:10px;position:relative;background:#71588b;overflow:hidden}.swatch-overlay{position:absolute;bottom:12px;left:15px;display:flex;flex-direction:column;gap:2px;border-radius:6px;background:#ffffffd9;backdrop-filter:blur(4px);padding:6px 10px}.swatch-overlay span{color:#817389;font-size:8px;letter-spacing:.12em;font-weight:800}.swatch-overlay strong{font-weight:800;font-size:17px;letter-spacing:.02em}.swatch-caption{display:flex;align-items:center;justify-content:space-between;padding:10px 1px 0}.swatch-caption strong{font-size:13px}.swatch-caption small{display:block;color:#a09aa2;font-size:11px}.icon-button{border:1px solid #ebe5ea;background:#fff;border-radius:8px;width:32px;height:32px;color:#775e86}.color-circle{width:33px;height:33px;overflow:hidden;border-radius:50%;border:2px solid #ebe6ea;cursor:pointer;position:relative}.color-circle input{position:absolute;inset:-9px;width:52px;height:52px;cursor:pointer;border:0;padding:0}.target-tools{margin-top:18px;display:flex;align-items:center;gap:16px}.target-tools label{font-size:11px;font-weight:750;display:flex;align-items:center;gap:11px;color:#8f8690}.target-tools input{font-family:ui-monospace,Menlo,Consolas,monospace;width:112px;max-width:100%;border:1px solid #e8e4e7;border-radius:7px;padding:9px 10px;color:#64566d}.match-note{font-size:11px;color:#718575}.photo-details{border-top:1px solid #eee9ec;margin-top:19px;padding-top:14px}.photo-details summary{cursor:pointer;font-size:12px;color:#6d587d;font-weight:750;display:flex;justify-content:space-between;list-style:none}.photo-details summary::-webkit-details-marker{display:none}.photo-details[open] summary span{transform:rotate(45deg)}.photo-content{margin-top:13px}.photo-upload{display:inline-flex;background:#f4eff7;border:1px solid #e2d4e8;color:#634b75;border-radius:7px;padding:9px 12px;cursor:pointer;font-weight:750;font-size:12px}.photo-preview canvas{max-width:100%;height:auto;display:block;margin-top:15px;border-radius:8px;cursor:crosshair;touch-action:manipulation}.photo-preview p{font-size:11px;color:#9a929a}.tiny-label{font-size:9px;font-weight:850;letter-spacing:.12em;color:#8c779d;background:#f7f3f9;border-radius:9px;padding:6px 9px}.section-help{margin:14px 0 18px;color:#918995;font-size:12px}.matcher-controls{display:grid;grid-template-columns:1fr 1fr;gap:12px}.field-label{display:flex;flex-direction:column;gap:7px;font-size:11px;font-weight:800;color:#736a78}.field-label input:not([type=range]),.field-label select{width:100%;padding:10px 11px;border:1px solid #e5e0e5;border-radius:8px;background:white;color:#453a4b;min-width:0;min-height:41px}.field-label select{font-size:12px}.matcher-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;margin-top:15px}.primary-button,.secondary-button{border:1px solid transparent;border-radius:8px;padding:11px 16px;font-size:12px;font-weight:750;min-height:40px}.primary-button{background:var(--purple);color:white}.primary-button:hover:not(:disabled){background:var(--purple-dark)}.primary-button span{margin-left:8px}.secondary-button{color:var(--purple);background:#fff;border-color:#ded4e3}.secondary-button:hover{background:#f8f3f9}.search-status{color:#978c9c;font-size:11px;margin-top:12px}.match-results{display:flex;flex-direction:column;gap:8px;margin-top:10px}.match-card{display:flex;align-items:center;gap:12px;border:1px solid #e9e3e9;border-radius:9px;padding:10px}.match-chip{width:52px;height:52px;border-radius:8px;flex:none;border:1px solid #00000013}.match-description{min-width:0;flex:1}.match-description strong{font-size:12px}.match-description small{display:block;margin-top:3px;font-size:11px;color:#8d8490;line-height:1.4}.match-card button{white-space:nowrap;font-size:11px;padding:8px 10px;min-height:34px}.count-bubble{font-size:11px;vertical-align:middle;color:#806b90;background:#f3eef6;padding:5px 8px;border-radius:12px;margin-left:6px}.mix-intro{display:flex;align-items:center;gap:12px;background:#fbf9fa;border:1px solid #f2ecef;padding:11px 13px;margin-top:18px;border-radius:9px}.mix-intro p{margin:0;font-size:11px;color:#88808a}.tiny-bar{width:4px;align-self:stretch;border-radius:4px;background:#a68bb3;flex-shrink:0}.mix-list{margin-top:14px}.mix-row{display:grid;grid-template-columns:31px minmax(95px,1fr) minmax(90px,1.2fr) 25px;align-items:center;gap:11px;padding:12px 1px;border-bottom:1px solid #f0edf0}.mix-row-swatch{width:30px;height:30px;border-radius:6px;border:1px solid #00000012}.mix-row-title{min-width:0}.mix-row-title strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}.mix-row-title small{display:block;font-size:10px;color:#a29ba4}.range-wrap{display:flex;align-items:center;gap:9px}.range-wrap input[type=range]{min-width:0;width:100%;accent-color:#8c6e9e}.parts-input{max-width:50px;min-width:44px;width:50px;border-radius:6px;border:1px solid #e7e0e7;text-align:center;padding:7px 3px;color:#65546f}.remove-mix{background:transparent;color:#ab9ba8;border:0;font-size:21px}.empty-mix{text-align:center;color:#9d95a0;padding:32px}.empty-mix strong{color:#7c7280}.empty-mix p{font-size:12px}.recipe-footer{display:flex;justify-content:space-between;align-items:center;gap:14px;padding-top:18px}.recipe-summary{font-size:11px;color:#7f7780;max-width:510px;line-height:1.65}.footer-actions{display:flex;gap:8px;flex-shrink:0}.saved-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px;margin-top:18px}.recipe-card{border:1px solid #efe8ed;border-radius:9px;overflow:hidden}.saved-swatch{height:74px;padding:9px;display:flex;align-items:flex-end}.saved-swatch span{font-size:10px;font-weight:800;color:#35273b;background:#fffdf0df;padding:3px 7px;border-radius:4px}.recipe-card-body{padding:11px}.recipe-card-body strong{font-size:12px;display:block}.recipe-card-body small{font-size:10px;color:#a199a4}.recipe-card-actions{display:flex;gap:13px;margin-top:9px}.recipe-card-actions button{border:0;background:none;padding:0;font-size:11px;color:var(--purple);font-weight:750}.saved-empty{color:#9b939d;font-size:12px;padding:18px 1px}.footer{color:#a09aa2;font-size:10px;padding:1px 4px 20px}.footer span{display:block;margin-top:5px}.modal{border:1px solid #eee5ed;border-radius:15px;background:white;width:min(500px,calc(100vw - 30px));max-height:90vh;overflow-y:auto;padding:26px 26px 23px;box-shadow:0 18px 80px #332b3560}.modal::backdrop{background:#29212bc0}.modal-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}.modal-heading h2{font-size:22px;letter-spacing:-.03em;margin:0}.modal-x{border:0;background:#f7f3f8;border-radius:7px;color:#876c93;width:31px;height:31px;font-size:23px}.modal .field-label{margin-top:13px}.two-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px}.picker-large{border-radius:8px;overflow:hidden;display:block;width:100%;height:41px;border:1px solid #e4dce5}.picker-large input{border:0;width:calc(100% + 16px);height:55px;margin:-8px;cursor:pointer}.modal-tip{font-size:11px;color:#918895}.modal-actions{display:flex;align-items:center;gap:8px;margin-top:22px}.modal-actions .destructive-link{margin-right:auto;border:0;background:none;color:#aa6678;font-size:12px}.modal-actions button:first-child[hidden]+button{margin-left:auto}.modal>p{font-size:13px;color:#786e7a}.modal>.primary-button{margin-top:10px}.toast{position:fixed;z-index:100;left:50%;bottom:25px;transform:translate(-50%,15px);background:#3e344b;color:#fff;border-radius:10px;padding:10px 16px;font-size:12px;box-shadow:0 8px 20px #251a253b;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;max-width:calc(100vw - 20px);text-align:center}.toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:1160px){.page-shell{width:calc(100% - 36px)}.workspace{grid-template-columns:minmax(290px,.86fr) minmax(0,1.4fr);gap:13px}.preview-panel,.matcher-panel,.mix-panel,.saved-panel{padding:22px 20px}.paint-row{grid-template-columns:30px minmax(0,1fr) 37px 42px 27px 27px;gap:4px;padding:10px}.panel-heading{padding:23px 17px 14px}.range-tabs{margin:0 16px 14px}.search-wrap{margin:0 16px 12px}.library-filters,.library-help,.library-caption,.library-bottom,.library-actions{padding-left:16px;padding-right:16px}.big-swatch{height:160px}}
@media(max-width:800px){.page-shell{width:calc(100% - 26px)}.topbar{height:72px}.heading-row{padding:27px 0 24px}.workspace{grid-template-columns:minmax(0,1fr)}.library-panel{position:static;order:2}.work-area{order:1}.paint-list{max-height:340px}.heading-row h1{font-size:35px}.header-stats{gap:14px}.header-stats strong{font-size:22px}.header-stats span{font-size:8px}.preview-panel,.matcher-panel,.mix-panel,.saved-panel{padding:19px 20px}}
@media(max-width:500px){.page-shell{width:calc(100% - 20px)}.topbar{height:66px}.brand strong{font-size:17px}.brand span{font-size:7.5px}.brand-symbol{transform:scale(.85);transform-origin:left center;width:34px}.engine-pill{font-size:10px;padding:6px 8px}.top-actions{gap:8px}.top-actions .text-button{font-size:11px}.heading-row{display:block;padding:25px 3px 22px}.heading-row h1{font-size:35px}.lede{font-size:12px}.header-stats{justify-content:flex-start;text-align:left;margin-top:17px}.header-stats strong{font-size:19px}.header-stats span{display:block;margin-top:1px}.workspace,.work-area{gap:12px}.preview-panel,.matcher-panel,.mix-panel,.saved-panel{padding:17px 15px}.panel h2{font-size:18px}.preview-hint{font-size:9px;max-width:90px;text-align:right}.preview-grid{gap:9px;margin-top:14px}.big-swatch{height:149px}.swatch-overlay{left:8px;bottom:8px;padding:5px 7px}.swatch-overlay strong{font-size:13px}.swatch-overlay span{font-size:7px}.swatch-caption strong{font-size:11px}.swatch-caption small{font-size:9px}.target-tools{margin-top:12px}.target-tools label{font-size:10px}.matcher-controls{gap:8px}.matcher-bottom{align-items:stretch}.matcher-bottom .primary-button{flex:1}.check-small{font-size:11px}.mix-row{grid-template-columns:27px minmax(65px,.9fr) minmax(115px,1.4fr) 20px;gap:5px}.mix-row-title strong{font-size:11px}.mix-row-title small{font-size:9px}.mix-row-swatch{width:26px;height:26px}.range-wrap{gap:3px}.range-wrap .parts-input{width:40px;min-width:38px;max-width:40px;font-size:11px}.recipe-footer{flex-wrap:wrap}.footer-actions{width:100%;justify-content:flex-end}.saved-grid{grid-template-columns:1fr}.paint-list{max-height:355px}.library-caption{display:block}.library-caption .legend{display:block;margin-top:4px}.paint-row{grid-template-columns:29px minmax(0,1fr) 37px 41px 28px 28px;gap:4px}.paint-info strong{font-size:11px}.range-tabs{margin-left:14px;margin-right:14px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.toast{transition:none}}

.mobile-jumps{display:none}
@media(max-width:800px){.mobile-jumps{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;position:sticky;top:0;z-index:20;background:#f6f4f0ec;backdrop-filter:blur(8px);padding:8px 0;margin-bottom:6px}.mobile-jumps a{display:block;padding:10px 2px;border-radius:8px;text-align:center;text-decoration:none;color:#624c76;background:#fff;border:1px solid #e9e2eb;font-size:11px;font-weight:750}.mobile-jumps a:hover,.mobile-jumps a:focus-visible{background:#efe7f4}.panel[id]{scroll-margin-top:63px}.paint-row .mini-check{min-height:40px;justify-content:center}}

/* 3.0: collapsible panes and a little more room on phone screens */
.section-controls{display:flex;justify-content:space-between;align-items:center;margin:0 1px 12px;gap:10px;color:#978c9d;font-size:10px;font-weight:800;letter-spacing:.1em}
.section-controls>div{display:flex;gap:7px}
.section-controls button{background:white;color:#655476;border:1px solid #e6dfe9;padding:7px 10px;border-radius:8px;font-size:11px;font-weight:750}
.panel-heading-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}
.collapse-button{background:#faf8fb;border:1px solid #e8e2eb;display:inline-flex;align-items:center;gap:6px;padding:6px 8px;border-radius:8px;color:#745d82;font-size:11px;font-weight:700;min-height:32px}
.collapse-button b{display:block;width:7px;height:7px;transform:rotate(45deg);border-left:2px solid currentColor;border-top:2px solid currentColor;margin-top:4px}
.panel.is-collapsed .collapse-button b{transform:rotate(225deg);margin-top:-3px}
.panel.is-collapsed .panel-content{display:none}
.panel.is-collapsed .panel-heading{padding-bottom:25px}
.panel.is-collapsed:not(.library-panel){padding-top:20px;padding-bottom:20px}
.panel.is-collapsed .preview-topline,.panel.is-collapsed .matcher-heading,.panel.is-collapsed .mix-heading,.panel.is-collapsed .saved-header{min-height:32px}
.loaded-tag{white-space:nowrap;color:#42755d;background:#e9f6ed;font-size:10px;font-weight:750;padding:7px 9px;border-radius:7px}
@media(max-width:500px){.section-controls{margin-top:-1px}.collapse-button{min-height:34px;padding:5px 7px}.collapse-button span{font-size:10px}.panel-heading-actions{gap:4px}.tiny-label{display:none}.panel.is-collapsed:not(.library-panel){padding-top:14px;padding-bottom:14px}.loaded-tag{font-size:9px;padding:6px}}

.see-match{display:inline-block;color:#675476;background:#f7f2f9;text-decoration:none;border:1px solid #e5dce9;border-radius:8px;padding:8px 11px;margin-top:10px;font-size:11px;font-weight:750}
.see-match:hover{text-decoration:underline}
@media(max-width:500px){.matcher-bottom .primary-button{flex:0 0 auto;max-width:100%;min-width:145px;white-space:nowrap;padding-left:12px;padding-right:12px;font-size:11px}.matcher-bottom .primary-button span{margin-left:3px}}