.pt-wrap { overflow-x: auto; padding-bottom: 6px; } .pt { display: grid; grid-template-columns: repeat(18, minmax(38px, 1fr)); gap: 3px; min-width: 720px; } .pt button { aspect-ratio: 1; border: 0; border-radius: 6px; padding: 2px; cursor: pointer; display: grid; place-items: center; line-height: 1; font: 700 15px var(--sans); color: #111; } .pt button small { font: 400 9px var(--mono); } .pt button.dim { opacity: .15; } .pt button.sel { outline: 3px solid var(--ink); } .pt .gap { grid-column: 1 / -1; height: 10px; } .c-am{background:#ff9f9f}.c-ae{background:#ffd29f}.c-tm{background:#f3e3a3}.c-pm{background:#c9e4b4}.c-md{background:#b7e3d6}.c-nm{background:#a9d6ff}.c-hl{background:#c7c4ff}.c-ng{background:#e6c4ff}.c-ln{background:#ffc4e1}.c-ac{background:#f2b8c6} .lgd { display: flex; flex-wrap: wrap; gap: 6px; } .lgd button { border: 0; border-radius: 999px; padding: 6px 10px; font: 500 12px var(--sans); cursor: pointer; color: #111; } .lgd button.off { opacity: .35; }