.block--onlinecolouring .block__content {-webkit-margin-after: 3rem;margin-block-end: 3rem;}.onlinecolouring {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;gap: clamp(1rem, 3vw, 2rem);margin-block: 1.5rem;}.onlinecolouring__tools {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;gap: 1rem;}.onlinecolouring__buttons {display: -webkit-box;display: -ms-flexbox;display: flex;-ms-flex-wrap: wrap;flex-wrap: wrap;gap: .5rem;}.onlinecolouring__btn {cursor: pointer;}.onlinecolouring__active {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;gap: .5rem;font-size: .95rem;}.onlinecolouring__active-swatch {inline-size: 1.75rem;block-size: 1.75rem;border: 1px solid var(--color-2-light, #ccc);border-radius: 4px;background-color: #ffffff;}.onlinecolouring__palette {list-style: none;margin: 0;padding: 0;display: grid;grid-template-columns: repeat(auto-fill, minmax(1.75rem, 1fr));gap: 4px;}.onlinecolouring__swatch {aspect-ratio: 1;border: 1px solid rgba(0,0,0,0.15);border-radius: 4px;cursor: pointer;-webkit-transition: -webkit-transform .1s, -webkit-box-shadow .1s;transition: -webkit-transform .1s, -webkit-box-shadow .1s;transition: transform .1s, box-shadow .1s;transition: transform .1s, box-shadow .1s, -webkit-transform .1s, -webkit-box-shadow .1s;}.onlinecolouring__swatch:where(:hover,:focus) {-webkit-transform: scale(1.1);transform: scale(1.1);}.onlinecolouring__swatch.selected {-webkit-box-shadow: 0 0 0 2px var(--color-1-dark, #d70672);box-shadow: 0 0 0 2px var(--color-1-dark, #d70672);-webkit-transform: scale(1.1);transform: scale(1.1);}.onlinecolouring__canvas {-webkit-box-flex: 1;-ms-flex: 1 1 auto;flex: 1 1 auto;min-inline-size: 0;border: 3px solid var(--color-neutral-900);}.onlinecolouring__canvas svg {display: block;inline-size: 100%;block-size: auto;margin-inline: auto;-ms-touch-action: manipulation;touch-action: manipulation;}.onlinecolouring__canvas #Stroke {pointer-events: none;}.onlinecolouring__canvas #Color>* {cursor: pointer;}@media (min-width: 1024px) {.onlinecolouring {-webkit-box-orient: horizontal;-webkit-box-direction: reverse;-ms-flex-direction: row-reverse;flex-direction: row-reverse;-webkit-box-align: start;-ms-flex-align: start;align-items: flex-start;}.onlinecolouring__tools {-webkit-box-flex: 0;-ms-flex: 0 0 auto;flex: 0 0 auto;inline-size: 260px;position: -webkit-sticky;position: sticky;inset-block-start: 1rem;}}