.accent-trigger{display:inline-flex!important;align-items:center;gap:7px}.accent-current-swatch{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--accent)}
.accent-dialog{position:fixed;inset:auto 24px 24px auto;margin:0;width:min(350px,calc(100vw - 32px));max-height:calc(100svh - 32px);overflow:auto;padding:21px;background:var(--paper);color:var(--ink);border:1px solid var(--hairline);border-radius:4px;box-shadow:0 12px 60px #0008;font-family:Arial,Helvetica,sans-serif}.accent-dialog::backdrop{background:transparent}.accent-dialog:not([open]){display:none}.accent-dialog h2{font-size:21px;line-height:1.2;font-weight:400;letter-spacing:-.025em;margin:0 40px 6px 0}.accent-dialog p{font-size:12px;line-height:1.5;color:var(--muted);margin:0 0 15px}.accent-dialog .accent-selection{color:var(--accent);min-height:18px}.accent-dialog-close{position:absolute;top:7px;right:7px;width:44px;height:44px;border:0;background:transparent;color:var(--muted);font-size:25px;cursor:pointer}.accent-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px}.accent-option{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:4px;min-height:52px;border:1px solid transparent;border-radius:3px;background:#ffffff04;color:var(--muted);cursor:pointer;padding:6px 3px}.accent-option:hover{background:#ffffff0b}.accent-option[aria-pressed="true"]{border-color:var(--accent);color:var(--ink)}.accent-option:focus-visible,.accent-dialog-close:focus-visible{outline:1px solid var(--accent);outline-offset:2px}.accent-swatch{display:block;width:24px;height:24px;border-radius:50%}.accent-option-label{font:9px/1.2 "Courier New",monospace}.accent-original{grid-column:1/-1;flex-direction:row;gap:10px;min-height:44px;margin-top:3px}.accent-original .accent-swatch{width:16px;height:16px}.accent-original .accent-option-label{font-size:11px}.accent-dialog .accent-help{margin:15px 0 0;font:10px/1.5 "Courier New",monospace}.accent-help kbd{font:inherit;color:var(--ink)}
@media(max-width:699px){.accent-dialog{inset:auto 16px 16px auto}.footer nav{column-gap:14px}.accent-trigger{gap:5px}}

.accent-trigger[hidden],.accent-dialog[hidden]{display:none!important}