.demo-nav{display:flex;gap:7px;font-size:11px}.demo-nav a{border-radius:20px;padding:9px 13px}.demo-nav [aria-current]{background:#183c2b;color:white}.color-controls{margin-top:30px}.primary-line{display:flex;gap:18px;align-items:stretch}.all-button{width:135px;flex-shrink:0;border:0;background:#e7eae3;color:#183c2b;text-align:left;padding:16px;font-size:13px}.all-button span{display:block;font-size:10px;opacity:.65;margin-top:7px}.all-button[aria-pressed=true]{box-shadow:inset 0 -3px #183c2b}.primary-palette{display:grid;grid-template-columns:repeat(11,minmax(0,1fr));flex:1;min-width:0}.color-choice{position:relative;border:0;background:var(--color);color:var(--ink);min-height:78px;text-align:center;padding:14px 5px;transition:filter .2s}.color-choice span{display:block;font-size:13px}.color-choice small{display:block;font-size:10px;opacity:.8;margin-top:7px}.color-choice:hover{filter:brightness(1.07)}.color-choice[aria-pressed=true]:after{content:'';position:absolute;bottom:-1px;left:calc(50% - 8px);border-left:8px solid transparent;border-right:8px solid transparent;border-bottom:9px solid #faf9f5}.color-choice[aria-pressed=true]{box-shadow:inset 0 3px currentColor}.color-choice.matched span{text-decoration:underline;text-underline-offset:4px}.color-choice:focus-visible{outline-offset:-5px;outline-color:var(--ink);z-index:1}.secondary-line{display:flex;gap:18px;margin-top:10px;align-items:stretch}.secondary-line>span{width:135px;flex-shrink:0;font-size:12px;line-height:1.8;display:flex;align-items:center;padding:12px 16px;color:#65745f}#secondary-palette{display:flex;flex:1;gap:5px}#secondary-palette .color-choice{flex:1;min-height:62px;max-width:230px}#secondary-palette .color-choice span{font-size:12px}#secondary-palette .color-choice small{margin-top:4px}.result-toolbar{display:flex;justify-content:space-between;gap:15px;font-size:11px;color:#63745d;padding:20px 2px 13px}.result-toolbar>span:first-child{color:#183c2b}.color-canvas{position:relative}.color-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;position:relative;margin-bottom:5px}.color-cell{position:relative;min-height:260px;background:color-mix(in srgb,var(--tile) var(--strength),#f7f7ed);display:flex;align-items:center;justify-content:center;padding:34px 18px 18px;transition:background .3s}.row-label{position:absolute;top:12px;left:15px;font-size:9px;letter-spacing:1px;z-index:1;pointer-events:none;color:#193c2b}.color-card{width:146px;min-height:195px;padding:13px 12px 11px;text-align:left;background:var(--paper);color:#183c2b;border:1px solid #183c2b26;border-radius:4px;box-shadow:2px 9px 16px #3a302422;display:flex;flex-direction:column;transition:transform .2s;transform:rotate(var(--rotate))}.color-card:hover,.color-card:focus-visible{transform:translateY(-5px) rotate(0)}.color-card.selected{outline:3px solid #183c2b;outline-offset:3px}.color-card .card-index{font-size:9px;margin-bottom:12px;letter-spacing:0}.color-card .card-index small{font-size:8px}.color-card h3{font-size:16px;line-height:1.25;overflow-wrap:anywhere;margin:0 0 7px;font-weight:500}.color-card .card-farm{font-size:9px;line-height:1.5;margin-bottom:10px}.color-card .card-swatches{margin-top:auto;gap:3px;flex-wrap:nowrap}.color-card .card-swatches i{width:10px;height:10px;flex-shrink:0}.color-card .card-bottom{font-size:8px;line-height:1.5;margin-top:7px;padding-top:6px}.card-match{font-size:10px;line-height:1.5;margin:0}.card-caution{font-size:8px;color:#765c41;margin:4px 0 0}.color-note{font-size:10px;color:#74816c;line-height:1.8;margin:15px 0 26px}.color-empty{position:absolute;top:65px;left:50%;transform:translateX(-50%);width:min(400px,90%);padding:30px;background:#faf9f5ee;text-align:center;box-shadow:0 10px 40px #183c2b18;border-radius:15px}.color-empty strong{font-size:20px;font-weight:500}.color-empty p{font-size:12px;color:#64725d}.color-empty button{border:0;background:#183c2b;color:white;border-radius:20px;padding:10px 18px;font-size:12px}@media(max-width:900px){.primary-line{gap:8px}.all-button{width:95px;padding:12px}.color-choice span{font-size:11px}.secondary-line{gap:8px}.secondary-line>span{width:95px;padding:10px;font-size:10px}.color-cell{padding-left:10px;padding-right:10px}.color-card{width:140px}}@media(max-width:600px){.collection-name{display:none}.color-controls{margin-top:20px}.primary-line{display:block}.all-button{width:100%;padding:10px 12px;display:flex;justify-content:space-between;align-items:center;margin-bottom:7px}.all-button span{margin:0}.primary-palette{grid-template-columns:repeat(6,minmax(0,1fr));gap:3px}.color-choice{min-height:65px;padding:10px 3px}.color-choice span{font-size:11px}.color-choice small{font-size:9px}.secondary-line{display:block}.secondary-line>span{width:auto;padding:5px 0}.secondary-line #secondary-palette{gap:3px;flex-wrap:wrap}#secondary-palette .color-choice{min-width:56px;min-height:60px}.color-row{grid-template-columns:repeat(2,minmax(0,1fr))}.color-cell{min-height:247px;padding:29px 9px 14px}.color-card{width:136px;min-height:195px;padding:11px 10px}.result-toolbar{font-size:10px}.result-toolbar>span:last-child{font-size:9px}.color-note{font-size:10px}.row-label{font-size:8px}.intro h1{font-size:27px}}@media(prefers-reduced-motion:reduce){.color-choice,.color-card,.color-cell{transition:none}}

.color-controls{position:sticky;top:0;z-index:5;background:#faf9f5;padding-top:8px;padding-bottom:8px}.result-toolbar{align-items:center}.result-toolbar>span:last-child{margin-left:auto}#jump-results{border:0;border-bottom:1px solid #183c2b;background:none;padding:3px 0;font-size:11px;color:#183c2b}.color-card{scroll-margin-top:170px}
.body-filter{display:flex;gap:7px;flex-wrap:wrap;margin-top:12px}.body-filter button{border:1px solid #183c2b22;border-radius:24px;padding:8px 13px;background:transparent;color:#183c2b;font-size:12px}.body-filter small{margin-left:5px;opacity:.65}.body-filter [aria-pressed=true]{background:#183c2b;color:white}
.color-row{grid-template-columns:repeat(4,minmax(0,1fr));padding-top:29px;background:#efeee5}.color-row .row-label{top:10px}.color-cell{padding-top:18px;min-height:238px}.color-empty{position:relative;top:auto;left:auto;transform:none;margin:20px auto;min-height:160px}
@media(max-width:600px){.color-controls{position:static}.primary-line{display:flex;gap:6px}.all-button{width:65px;flex-direction:column;justify-content:center;margin:0;gap:6px;font-size:10px}.primary-palette{display:flex;overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:5px}.primary-palette .color-choice{min-width:62px;flex:0 0 62px;scroll-snap-align:start;min-height:65px}.body-filter{gap:5px;flex-wrap:nowrap}.body-filter button{font-size:11px;padding:8px 10px}.color-row{grid-template-columns:repeat(2,minmax(0,1fr))}.color-cell{min-height:227px;padding:15px 8px}.result-toolbar>span:last-child{display:none}.color-card{max-width:100%;width:145px}.intro{margin-bottom:14px}.color-controls{margin-top:12px}}

/* Flavor chips share the available bar; repeated coffee matches receive more space. */
.primary-palette,#secondary-palette{display:flex;flex:1;min-width:0;gap:4px}
.primary-palette .color-choice,#secondary-palette .color-choice{flex:var(--weight) 1 0;min-width:calc((100% - 40px)/11);max-width:none}
@media(max-width:600px){.primary-palette{overflow:visible;scroll-snap-type:none;padding-bottom:0}.primary-palette .color-choice,#secondary-palette .color-choice{min-width:52px;flex:var(--weight) 1 0;max-width:none}.secondary-line #secondary-palette{display:flex;flex-wrap:nowrap;gap:3px}}

/* Keep every flavor visible, including sourcing gaps, without horizontal overflow. */
@media(max-width:720px){
 .primary-line{display:block}.all-button{width:100%;min-height:44px;margin-bottom:8px;display:flex;justify-content:space-between;align-items:center;flex-direction:row}
 .primary-palette{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;overflow:visible}
 .primary-palette .color-choice{min-width:0;min-height:76px;padding:10px 5px;overflow-wrap:anywhere}
 .secondary-line{display:block}.secondary-line>span{width:auto;padding:10px 0}
 .secondary-line #secondary-palette{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
 #secondary-palette .color-choice{min-width:0;overflow-wrap:anywhere}
 .color-controls{position:static}.color-row{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:360px){.primary-palette{grid-template-columns:repeat(3,minmax(0,1fr))}.color-row{grid-template-columns:minmax(0,1fr)}}

/* Preserve a fixed minimum so zero-count colors do not consume weighted space. */
.primary-palette,#secondary-palette{flex-wrap:wrap}
.primary-palette .color-choice,#secondary-palette .color-choice{min-width:52px}
/* Proportional mobile widths are shared across rows, not stretched per row. */
@media(max-width:720px){
 .primary-palette,.secondary-line #secondary-palette{display:flex;flex-wrap:wrap;gap:4px}
 .primary-palette .color-choice,#secondary-palette .color-choice{min-width:52px;flex:0 0 calc(52px + (100% - 164px) * var(--share) / 3);max-width:none}
}
.color-choice span{overflow-wrap:anywhere;hyphens:auto}