html.mca-colors-open{overflow:hidden}
html body .mca-colors-trigger{cursor:pointer}
html body .mca-colors-trigger:is(:hover,:focus-visible,.mca-colors-active) :is(strong,span,svg){color:#d3a723!important;transition:color .15s}
html body .mca-colors-trigger:focus-visible{outline:2px solid #d3a723;outline-offset:4px;border-radius:5px}
html body dialog.mca-colors-dialog{box-sizing:border-box;width:min(620px,calc(100% - 32px));max-width:620px;max-height:calc(100dvh - 32px);margin:auto;padding:24px;border:0;border-radius:14px;background:#fff;color:#263445;box-shadow:0 16px 60px #0003;font:400 15px/1.5 "Segoe UI",Arial,sans-serif;overflow-y:auto;overscroll-behavior:contain}
html body .mca-colors-dialog::backdrop{background:#17233199}
html body .mca-colors-header{display:flex;align-items:center;justify-content:space-between;gap:16px}
html body .mca-colors-dialog h2{font:700 23px/1.3 "Segoe UI",Arial,sans-serif;margin:0;color:#263445}
html body .mca-colors-dialog .mca-colors-close{display:flex;align-items:center;justify-content:center;flex:0 0 40px;width:40px;height:40px;padding:0;border:0;border-radius:8px;background:#f0f3f6;color:#263445;font:400 30px/1 Arial;cursor:pointer}
html body .mca-colors-dialog .mca-colors-close:hover{background:#e4e9ee}
html body .mca-colors-dialog .mca-colors-intro{margin:14px 0 20px;font:inherit}
html body .mca-colors-dialog h3{font:600 16px/1.4 "Segoe UI",Arial,sans-serif;margin:20px 0 12px;color:#263445}
html body .mca-colors-dialog .mca-colors-sequence{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;list-style:none;margin:0;padding:0}
html body .mca-colors-sequence li{display:flex;align-items:center;gap:12px;min-width:0;margin:0;padding:12px;border:1px solid #e2e7ec;border-radius:9px;background:#fafbfd}
html body .mca-color-swatch{display:block;flex:0 0 36px;width:36px;height:36px;border:1px solid #0003;border-radius:50%;box-shadow:inset 0 0 0 2px #ffffff80}
html body .mca-color-swatch.mca-color-unidentified{display:flex;align-items:center;justify-content:center;border:2px dashed #7c8792;background:transparent;color:#465361;box-shadow:none;font-weight:700}
html body .mca-color-label{display:flex;flex-direction:column;min-width:0;font:400 13px/1.5 "Segoe UI",Arial,sans-serif}
html body .mca-color-label strong{font-weight:600;overflow-wrap:anywhere}
html body .mca-colors-dialog .mca-colors-note{font:400 12px/1.5 "Segoe UI",Arial,sans-serif;color:#5b6774;margin:14px 0 0}
@media(max-width:480px){html body dialog.mca-colors-dialog{padding:18px;width:calc(100% - 24px);max-height:calc(100dvh - 24px)}html body .mca-colors-dialog h2{font-size:20px}html body .mca-colors-sequence li{gap:8px;padding:9px}html body .mca-color-swatch{flex-basis:28px;width:28px;height:28px}html body .mca-color-label{font-size:12px}}
@media(max-width:340px){html body .mca-colors-dialog .mca-colors-sequence{grid-template-columns:1fr}}