canvas{width:100vw;border:2px solid #f57f17;height:calc(90vh - 66px);background-color:#fff;cursor:crosshair}.shape-palette{display:none}main-color,main-stroke{box-shadow:inset 0 0 1px;display:block;border:2px solid #f57f17}.color-palette{display:grid;justify-content:center;grid-template-columns:repeat(8,36px);grid-template-rows:repeat(3,36px)}@media (min-width:600px){.color-palette{grid-template-columns:repeat(12,36px);grid-template-rows:repeat(2,36px)}}.color-palette main-color{grid-row:span 3;grid-column:span 2}@media (min-width:600px){.color-palette main-color{grid-row:span 2;grid-column:span 2}}.color-palette color-sample{border:1px solid;box-shadow:inset 0 0 1px;cursor:pointer}.stroke-size-palette{display:flex;justify-content:center}main-stroke{min-width:72px;min-height:72px;padding:6px;display:flex;flex-flow:column}main-stroke::before{content:'';display:block;background-color:#000;border-radius:100%;height:var(--stroke,12px);width:var(--stroke,12px);margin:auto;box-shadow:0 0 0 1px currentColor}main-stroke span{width:100%;display:block;text-align:center;align-self:flex-end}.slider-container{display:block;position:relative;width:20px;height:150px;margin-right:24px}#stroke-slider{position:absolute;height:20px;margin:0;width:150px;transform:rotate(-90deg);bottom:0;left:0;transform-origin:10px center}