.color-vote-intro{align-items:center}
.color-vote-intro .marble-palette-art{margin:0}
.color-vote-intro .marble-palette-art img{max-height:360px;object-fit:cover;width:100%;border-radius:18px}
.color-vote-intro figcaption{font-size:.875rem;color:var(--muted);margin-top:10px}
.color-vote-panel{margin-top:30px;padding:clamp(18px,3vw,32px);border:1px solid var(--line);border-radius:20px;background:var(--panel-solid)}
.color-vote-panel h3{font-size:1.55rem;margin:0 0 8px}
.color-vote-panel p{font-size:1rem;line-height:1.6}
.color-vote-login{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:18px 0}
.color-vote-login .button{min-height:44px}
.color-vote-picks{border:0;padding:0;margin:22px 0;min-width:0}
.color-vote-picks:disabled{opacity:.8}
.color-combo{border:1px solid var(--line);border-radius:14px;padding:18px;margin:0 0 16px;min-width:0}
.color-combo legend{padding:0 8px;font-weight:600;font-size:1rem}
.color-combo legend span{color:var(--accent);margin-right:7px}
.color-combo-fields{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.color-vote-panel .color-combo-hint{font-size:.875rem;color:var(--muted);margin:0 0 12px}
.color-vote-panel label{display:block;font-size:.875rem;line-height:1.5}
.color-vote-panel input,.color-vote-panel select{display:block;width:100%;min-width:0;min-height:48px;margin-top:5px;padding:10px;border:1px solid var(--line);border-radius:9px;background-color:var(--paper,#eee7d8);color:var(--ink,#102a35);font:inherit;font-size:1rem;color-scheme:inherit}
/* Native menus need an opaque, defined surface as well as legible text. */
.color-vote-panel option,.color-vote-panel optgroup{background-color:var(--panel-solid,#f6f0e5);color:var(--ink,#102a35)}
.color-vote-panel select{padding-right:26px;cursor:pointer}
.color-vote-panel input:focus-visible,.color-vote-panel select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.color-vote-general{max-width:360px;margin:20px 0}
.color-vote-panel button{min-height:46px;cursor:pointer}
.color-combo-swatches{display:flex;gap:7px;margin-top:13px;flex-wrap:wrap}
.color-swatch{width:26px;height:26px;display:inline-block;flex:none;border-radius:50%;border:1px solid color-mix(in srgb,var(--ink) 35%,transparent);background:var(--swatch,var(--accent));box-shadow:inset 0 2px 4px #ffffff45}
.color-vote-status{min-height:1.5em;margin:12px 0 0!important}
.color-vote-demo{padding:10px 14px;border-left:3px solid var(--accent);font-size:.875rem!important;color:var(--muted)}
.color-vote-results{margin-top:32px}
.color-vote-results>p{color:var(--muted);font-size:.9375rem}
.color-vote-charts{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:22px;align-items:start}
.color-vote-chart{min-width:0;padding:22px;border:1px solid var(--line);border-radius:18px;background:var(--panel-solid)}
.color-vote-chart h4{font-size:1.2rem;margin:0 0 8px}
.color-vote-chart p{font-size:.875rem;color:var(--muted);margin:0 0 18px}
.color-vote-chart ol{list-style:none;margin:0;padding:0}
.color-vote-chart li{margin:16px 0}
.color-bar-label{display:flex;gap:10px;justify-content:space-between;font-size:.9375rem;line-height:1.5;overflow-wrap:anywhere}
.color-bar-label strong{white-space:nowrap}
.color-bar-track{height:12px;background:color-mix(in srgb,var(--ink) 8%,transparent);border-radius:10px;overflow:hidden;margin-top:7px}
.color-bar-fill{height:100%;width:var(--percent);background:var(--bar,var(--accent));border-radius:10px}
.color-vote-note{font-size:.875rem;color:var(--muted);line-height:1.6}
.color-vote-chart .color-ranking-row{display:grid;grid-template-columns:20px 26px minmax(0,1fr) auto;gap:10px;align-items:center;padding-bottom:14px;border-bottom:1px solid var(--line);font-size:.9375rem}
.color-ranking-place{color:var(--muted);font-variant-numeric:tabular-nums}
.color-ranking-name{overflow-wrap:anywhere}
.color-ranking-count{text-align:right}
.color-ranking-count strong,.color-ranking-count small{display:block}
.color-ranking-count small{font-size:.8125rem;color:var(--muted)}
.color-vote-chart .color-size-columns{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:26px;text-align:center}
.color-vote-chart .color-size-columns li{margin:0;min-width:0}
.color-size-track{height:132px;position:relative;overflow:hidden;border-radius:10px 10px 0 0;background:color-mix(in srgb,var(--ink) 6%,transparent);border-bottom:1px solid var(--line)}
.color-size-fill{position:absolute;bottom:0;width:100%;height:var(--percent);background:linear-gradient(0deg,var(--accent),color-mix(in srgb,var(--accent) 55%,var(--panel-solid)));border-radius:10px 10px 0 0}
.color-size-columns strong,.color-size-columns span,.color-size-columns small{display:block;font-size:.9375rem;margin-top:8px}
.color-size-columns small{color:var(--muted);font-size:.8125rem}
.color-vote-chart .color-size-total{margin:22px 0 0;text-align:center}
.color-picker{min-width:0}
.color-vote-custom{margin-top:10px}
.color-vote-custom[hidden]{display:none!important}
.color-vote-demo select{max-width:100%}
[data-color-vote] .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:1000px){.color-combo-fields{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.color-vote-charts{grid-template-columns:1fr}.color-vote-intro .marble-palette-art img{max-height:290px}.color-vote-panel{padding:18px}.color-combo{padding:14px}.color-combo-fields{gap:12px}.color-vote-chart{padding:18px}.color-vote-panel label{font-size:.875rem}.color-size-track{height:110px}}
@media(max-width:520px){.color-combo-fields{grid-template-columns:1fr}.color-vote-chart .color-ranking-row{gap:7px;grid-template-columns:16px 24px minmax(0,1fr) auto;font-size:.875rem}.color-vote-chart .color-size-columns{gap:8px}.color-size-columns strong,.color-size-columns span{font-size:.8125rem}}
@media(max-width:360px){.color-vote-panel .button{width:100%}.color-vote-chart .color-ranking-row{grid-template-columns:16px 24px minmax(0,1fr)}.color-ranking-count{grid-column:3;text-align:left}.color-ranking-count strong,.color-ranking-count small{display:inline;margin-right:5px}}
@media(forced-colors:active){.color-vote-panel input,.color-vote-panel select,.color-vote-panel option,.color-vote-panel optgroup{background:Canvas;color:CanvasText}.color-swatch,.color-bar-fill,.color-size-fill{border:1px solid CanvasText}}

#favorite-colors{scroll-margin-top:140px;outline:none}
@media(max-width:600px){#favorite-colors{scroll-margin-top:124px}}