.drawing-preview{margin:0 0 20px}.drawing-preview figcaption{color:#d5cfe7;text-align:center;font-size:14px;margin-top:9px;overflow-wrap:anywhere}.drawing-frame{display:flex;align-items:center;justify-content:center;min-height:185px;padding:13px;background:#16161c;border-radius:10px}.drawing-grid{outline:1px solid #c1aaff;background-color:#252233;background-image:linear-gradient(to right,#8c80a9 1px,transparent 1px),linear-gradient(to bottom,#8c80a9 1px,transparent 1px)}.drawing-circle{--ink: #ddcfff;position:relative;width:156px;aspect-ratio:1;border:2px solid var(--ink);border-radius:50%;background:#282335}.drawing-sector{background:conic-gradient(from 0deg,#9c87d3 var(--angle),#282335 var(--angle))}.drawing-center{position:absolute;top:50%;left:50%;width:6px;height:6px;border-radius:50%;background:#fff;transform:translate(-50%,-50%)}.drawing-diameter,.drawing-radius{position:absolute;top:50%;border-top:1px dashed var(--ink);color:var(--ink);font:italic 16px/1.4 Georgia,serif;text-align:center}.drawing-diameter{left:0;width:100%}.drawing-radius{left:50%;width:50%;transform-origin:left top;transform:rotate(-50deg);border-top-style:solid}.drawing-palette{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(70px,1fr));gap:6px;padding:0;margin:0}.drawing-palette li{min-width:0;text-align:center}.drawing-palette span{display:block;height:60px;border-radius:5px;border:1px solid #ffffff40}.drawing-palette code{font-size:12px;color:#dfd9ed}