.draw-playground-component{width:100%;container-type:inline-size}.draw-playground-component .draw-template{flex-direction:column;align-items:center;gap:0;max-width:none;margin:0 auto;display:flex}.draw-playground-component .draw-template .container{display:contents}.draw-playground-component .draw-template .draw{order:1}.draw-playground-component .draw-template .draw~*{order:2}.draw-playground-component .draw-template .actions{order:3;margin-top:24px}.draw-playground-component .draw-template .draw,.draw-playground-component .draw-template .draw~*{width:100%;max-width:375px}.draw-playground-component .draw-template .actions{align-self:center;width:100%;max-width:375px}.draw-playground-component .answer{box-sizing:border-box;background-color:#ffffff0d;border:1px solid #ffffff1f;flex-direction:column;justify-content:center;align-items:center;gap:20px;min-height:96px;padding:20px 16px;display:flex}.draw-playground-component .answer.waiting p{color:var(--secondary-footer-dark-grey);margin:0}.draw-playground-component .answer .error{--error-message-colour:#ff8a8a;margin:0}@container (min-width:640px){.draw-playground-component .draw-template{grid-template-rows:auto auto;grid-template-columns:375px minmax(0,1fr);align-items:stretch;gap:24px 0;display:grid}.draw-playground-component .draw-template .container{display:contents}.draw-playground-component .draw-template .draw{grid-area:1/1;width:375px}.draw-playground-component .draw-template .draw~*{grid-area:1/2;width:auto;min-width:0;max-width:none}.draw-playground-component .draw-template .actions{grid-area:2/1;align-self:start;width:375px;margin-top:0}}