:root{font:16px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink)}[hidden]{display:none!important}a{color:var(--brand);text-underline-offset:4px}button,input,select,textarea{font:inherit}button{border:1px solid var(--line);border-radius:9px;padding:10px 15px;background:var(--panel);color:var(--ink);cursor:pointer;min-height:44px}button:hover{background:var(--soft)}button:disabled{cursor:default;opacity:.48}.primary{background:var(--brand);color:var(--button);border-color:var(--brand)}.primary:hover{filter:brightness(.9);background:var(--brand)}:focus-visible{outline:3px solid #bf741a;outline-offset:3px}.skip{position:fixed;top:-70px;background:var(--panel);z-index:10;padding:12px}.skip:focus{top:5px}header{max-width:1280px;margin:auto;padding:24px 36px;display:flex;gap:26px;align-items:center;border-bottom:1px solid var(--line)}.home{font-size:.85rem}.brand{font-weight:750;display:flex;align-items:center;gap:10px;margin-right:auto}.brand span{font-weight:400;color:var(--muted)}header button{font-size:.8rem}main{max-width:1280px;margin:auto;padding:38px 36px 20px}.intro{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-bottom:30px}.eyebrow{font-size:.7rem;letter-spacing:.14em;font-weight:750;color:var(--muted)}h1{font-size:clamp(2rem,4vw,3.5rem);font-weight:650;line-height:1.14;letter-spacing:-.04em;margin:12px 0 16px}p{color:var(--muted);margin:8px 0 16px}h2{font-size:1.5rem;letter-spacing:-.025em;margin:0 0 6px}h3{margin-top:0}.privacy{font-size:.85rem;line-height:1.8;flex-shrink:0}.privacy span{color:var(--brand)}.privacy small{color:var(--muted)}.tabs{display:flex;gap:10px;margin-bottom:28px}.tabs button{flex:1;text-align:left;padding:16px 20px;background:transparent;color:var(--muted)}.tabs b{margin-left:14px;color:var(--ink);font-weight:600}.tabs [aria-pressed=true]{background:var(--brand);color:var(--button);border-color:var(--brand)}.tabs [aria-pressed=true] b{color:var(--button)}.workspace,.application{background:var(--panel);border:1px solid var(--line);padding:28px;border-radius:18px;margin:0 0 26px;box-shadow:var(--shadow)}.section-title{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:20px}.section-title p{margin-bottom:0}.toolbar{display:flex;gap:12px;align-items:end;flex-wrap:wrap;margin:16px 0}label{display:flex;flex-direction:column;gap:6px;font-size:.8rem;color:var(--muted)}input,select,textarea{border:1px solid var(--line);border-radius:8px;padding:10px 12px;min-height:44px;color:var(--ink);background:var(--panel);max-width:100%;min-width:0}input[type=color]{width:54px;padding:4px}input[type=number]{width:90px}textarea{width:100%;resize:vertical}input[type=file]{width:100%}.hint{font-size:.8rem;line-height:1.6}.swatches{display:grid;grid-template-columns:repeat(auto-fit,minmax(155px,1fr));gap:12px;margin:22px 0}.swatch{border:1px solid var(--line);border-radius:12px;overflow:hidden;min-width:0}.paint{height:155px;display:flex;align-items:end;justify-content:space-between;padding:12px;background-image:linear-gradient(45deg,#ddd 25%,transparent 25%),linear-gradient(-45deg,#ddd 25%,transparent 25%);position:relative}.paint-overlay{position:absolute;inset:0}.paint button{z-index:1;padding:6px 10px;min-height:36px;font-size:.75rem;background:#fff;color:#20372d;border:1px solid #64756b}.swatch-body{padding:12px}.swatch input{width:100%;font-size:.8rem;margin-bottom:8px}.swatch .code{font-family:ui-monospace,monospace;font-size:.85rem}.swatch-actions{display:flex;gap:5px}.swatch-actions button{flex:1;padding:6px;min-height:40px}.swatch small{font-size:.7rem;color:var(--muted)}details{border-top:1px solid var(--line);margin-top:20px;padding-top:15px}summary{cursor:pointer;font-size:.9rem;font-weight:550;padding:5px 0;min-height:38px}.library{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin:16px 0}.library button{text-align:left}.mini-palette{display:flex;height:32px;margin-bottom:9px;border-radius:5px;overflow:hidden}.mini-palette i{flex:1}.library small{display:block;color:var(--muted);margin-top:4px}.apply-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:26px}.role-controls{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}.role-controls label{flex:1;min-width:110px}.preview{border:1px solid #91a198;border-radius:14px;overflow:hidden;min-height:310px;--pbg:#f4f0e8;--pt:#20362c;--pa:#b55a2b;--ps:#fff;--pb:#a3b2a7;background:var(--pbg);color:var(--pt)}.preview p{color:inherit}.sample-nav{padding:16px 24px;border-bottom:1px solid var(--pb);font-size:.8rem;display:flex;justify-content:space-between}.sample-body{padding:26px}.sample-body h3{font-size:1.8rem;line-height:1.2;margin:8px 0 14px;max-width:400px}.sample-body a{color:var(--pa)}.sample-button{background:var(--pa);color:var(--pbg);border:0;padding:10px 16px;border-radius:6px;display:inline-block}.sample-card{margin-top:24px;background:var(--ps);border:1px solid var(--pb);padding:16px;border-radius:9px;font-size:.85rem}.doc{margin:24px;padding:24px;background:var(--ps);border-top:8px solid var(--pa);box-shadow:0 5px 12px #0001}.doc h3{font-size:1.3rem}.doc li{margin:10px 0}.chart-bars{display:flex;gap:18px;align-items:end;height:210px;border-bottom:2px solid var(--pt);margin-bottom:10px}.bar{flex:1;text-align:center;border:1px solid var(--pt);background-image:repeating-linear-gradient(45deg,transparent,transparent 7px,#0002 7px,#0002 8px);min-width:0}.bar span{display:block;background:var(--ps);color:var(--pt);font-size:.8rem}aside{border-left:1px solid var(--line);padding-left:24px}aside label{margin-bottom:10px}aside button{width:100%}.ratio{font-size:2.25rem;font-weight:650;letter-spacing:-.04em;margin:14px 0 0}.badge{border-radius:6px;background:var(--soft);padding:7px 10px;font-size:.8rem;margin:8px 0}.table-scroll{overflow:auto}table{border-collapse:collapse;font-size:.72rem;width:100%}td,th{padding:7px;border:1px solid var(--line);text-align:center;white-space:nowrap}.convert-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px}.convert-grid>div{min-width:0}.convert-grid button{margin-top:12px}.upload{padding:20px;border:1px dashed var(--line);background:var(--soft);border-radius:12px;gap:14px;margin-bottom:16px}.value-row{display:grid;grid-template-columns:70px minmax(0,1fr) 40px;gap:8px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line);font-size:.8rem}.value-row code{overflow-wrap:anywhere}.value-row button{padding:4px;margin:0}.canvas-wrap{position:relative;max-width:100%;background:var(--soft);border-radius:10px;overflow:hidden}#image-canvas{display:block;max-width:100%;height:auto;touch-action:none;cursor:crosshair}.export-losses{margin:12px 0}#status{position:sticky;bottom:12px;padding:12px 18px;background:var(--ink);color:var(--bg);border-radius:10px;font-size:.85rem;box-shadow:var(--shadow);z-index:5;overflow-wrap:anywhere}footer{display:flex;justify-content:space-between;gap:20px;font-size:.75rem;color:var(--muted);padding:20px 0}#share-url{width:100%;margin-top:10px}#color-values{margin-top:18px}#image-result .mini-palette{height:70px}button,input,select{transition:none}@media(max-width:850px){header{flex-wrap:wrap;padding:18px 22px;gap:14px}.home{width:100%;order:0}.brand{order:1}header button{order:2}main{padding:28px 22px}.privacy{display:none}.apply-grid{grid-template-columns:1fr}.convert-grid{grid-template-columns:1fr}aside{border-left:0;border-top:1px solid var(--line);padding:22px 0 0}.tabs button{padding:14px 10px;font-size:.85rem}.tabs b{margin-left:4px}.workspace,.application{padding:20px}.section-title{align-items:start;flex-wrap:wrap}footer{flex-direction:column}}@media(max-width:420px){main{padding:24px 12px}.workspace,.application{padding:16px;border-radius:12px}.tabs{gap:5px}.tabs button{display:flex;flex-direction:column;gap:3px;padding:10px 8px}.tabs b{margin:0}.swatches{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.paint{height:125px;padding:8px}.paint button{padding:5px}.swatch-body{padding:8px}.toolbar>label:not(:has(input[type=number])){width:100%}.toolbar select{width:100%}h2{font-size:1.3rem}.sample-body{padding:18px}.doc{margin:16px;padding:16px}.role-controls label{min-width:100px}.section-title button{width:100%}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}

.history{margin:-10px 0 22px;font-size:.85rem}.history span{margin-right:auto;color:var(--muted);overflow-wrap:anywhere;min-width:0}.history button{font-size:.85rem}
.tabs button{flex:1 1 0;min-width:0;overflow-wrap:anywhere}.apply-grid>*{min-width:0}h1,h2,h3,p,summary,button,label,footer{overflow-wrap:anywhere}.toolbar>*{max-width:100%}.role-controls select{width:100%}.role-controls label{min-width:0}.table-scroll{max-width:100%}header .brand{min-width:0}@media(max-width:420px){.tabs button{font-size:.78rem}.history span{width:100%}.role-controls label{min-width:95px}.swatches{grid-template-columns:repeat(auto-fit,minmax(125px,1fr))}}@media(max-width:420px){.tabs b{line-height:1.25}}
/* Search is the main task. Details appear after choosing a palette. */
.intro{margin-bottom:22px}.intro h1{font-size:clamp(2rem,3.5vw,3rem)}.tabs{gap:6px;margin-bottom:20px}.tabs button{flex:0 1 auto;padding:10px 17px;font-size:.88rem;border-color:transparent}.tabs b{margin:0}.search-box{background:var(--panel);border:1px solid var(--line);padding:22px;border-radius:16px;margin-bottom:28px}.search-inputs{display:flex;align-items:end;gap:12px}.picker-label{flex:none}.picker-label input[type=color]{width:64px;height:48px;border-radius:10px}.query-label{flex:1;max-width:440px}.query-label input{font-family:ui-monospace,monospace;font-size:1.1rem;min-height:48px}.search-inputs button{min-height:48px}.search-filters{display:flex;gap:14px;margin-top:14px;flex-wrap:wrap}.search-filters label{min-width:170px}.search-box .hint{margin:10px 0 0}.results-heading{display:flex;align-items:center;justify-content:space-between;gap:14px}.results-heading span{font-size:.8rem;color:var(--muted)}.results-heading h2{font-size:1.2rem}.palette-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:18px 0 24px}.palette-result{border:1px solid var(--line);border-radius:14px;background:var(--panel);overflow:hidden;box-shadow:var(--shadow)}.result-swatches{display:flex;height:126px}.result-color{flex:1;min-width:0;position:relative;border-radius:0;border:0;background:var(--chip);padding:4px}.result-color:hover{background:var(--chip);filter:brightness(.97)}.result-color.matched{box-shadow:inset 0 0 0 3px #fff9}.result-color span{position:absolute;left:4px;right:4px;bottom:7px;font-size:.63rem;color:#20362C;background:#ffffffeb;padding:3px;border-radius:4px;opacity:0;overflow-wrap:anywhere}.result-color:hover span,.result-color:focus-visible span{opacity:1}.result-color i{font-size:12px;color:#fff;position:absolute;bottom:12px;left:50%;transform:translateX(-50%);text-shadow:0 0 2px #000}.result-color:hover i,.result-color:focus-visible i{display:none}.result-body{padding:16px}.result-title{display:flex;align-items:baseline;justify-content:space-between;gap:10px}.result-title h3{font-size:1rem;margin:0}.result-title small{font-size:.7rem;color:var(--muted);white-space:nowrap}.result-body p{font-size:.8rem;min-height:38px;margin:7px 0 14px}.match-line{display:flex;align-items:center;gap:7px;font-size:.76rem}.match-line small{margin-left:auto;color:var(--muted);font-size:.68rem}.match-dot{width:14px;height:14px;border:1px solid var(--line);border-radius:50%;flex-shrink:0}.result-actions{display:flex;gap:8px;margin-top:13px}.result-actions button{flex:1;font-size:.78rem;padding:8px 10px}.own-collections{margin:28px 0;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px}.own-collections button{margin-top:10px}.selection-bar{display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--line);margin-bottom:26px;padding-bottom:18px}.selection-bar>div{margin-right:auto;min-width:0}.selection-bar small{font-size:.65rem;letter-spacing:.1em;color:var(--muted)}.selection-bar h2{margin-top:5px}.selection-bar button{font-size:.8rem}.application .apply-grid{grid-template-columns:minmax(0,1fr) 260px}.role-controls{margin-top:14px}#contrast-details{margin-top:0;border-top:0;padding-top:0}#role-details{margin:0 0 16px;padding:0;border:0}#search-empty{padding:26px;background:var(--panel);border:1px dashed var(--line);border-radius:12px}#status{position:relative;bottom:auto;margin-top:22px;box-shadow:none}#search-error:empty{display:none}@media(hover:none){.result-color span{opacity:1;font-size:.58rem}.result-color i{display:none}}@media(max-width:1000px){.palette-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.application .apply-grid{grid-template-columns:1fr}}@media(max-width:650px){.search-inputs{flex-wrap:wrap}.query-label{flex:1;max-width:none}.search-inputs>button{flex:1}.search-box{padding:16px}.search-filters{gap:10px}.search-filters label{flex:1;min-width:120px}.search-filters select{width:100%}.results-heading{align-items:start;flex-direction:column;gap:3px}.palette-grid{grid-template-columns:1fr;gap:14px}.tabs{flex-wrap:wrap}.tabs button{flex:1 1 40%;display:block;text-align:center;font-size:.8rem}.selection-bar{flex-wrap:wrap}.selection-bar>div{width:100%}.result-swatches{height:118px}}@media(max-width:420px){.search-inputs{gap:8px}.picker-label{font-size:.7rem}.picker-label input[type=color]{width:50px}.query-label{font-size:.7rem}.query-label input{width:100%;font-size:1rem}.search-filters label{min-width:100%;width:100%}.result-body{padding:14px}.match-line{flex-wrap:wrap}.match-line small{margin-left:0}.result-color span{opacity:1;font-size:.56rem}.result-color i{display:none}}
.search-options{border:0;padding:0;margin-top:8px}.search-options summary{font-size:.8rem;font-weight:400;min-height:32px}.search-options .search-filters{margin-top:4px}.application .apply-grid{grid-template-columns:1fr}.application aside{border-left:0;border-top:1px solid var(--line);padding:14px 0 0}.application aside #contrast-details[open]{max-width:600px}.application aside #contrast-details>summary{font-weight:600}
#status.toast{position:fixed;bottom:16px;left:50%;transform:translateX(-50%);width:calc(100% - 32px);max-width:900px;margin:0;z-index:20;box-shadow:0 4px 24px #0003;max-height:40vh;overflow:auto}select:disabled{opacity:.65}

dialog{max-width:calc(100vw - 32px);width:520px;padding:24px;border:1px solid var(--line);border-radius:14px;background:var(--panel);color:var(--ink)}dialog::backdrop{background:#10231988}#manual-copy{margin:12px 0;font-family:ui-monospace,monospace}