/* screenshot-beautifier: styles only it uses, split out of site.css by scripts/split-css.mjs. */
.chart-label { font-weight: 600; font-size: 0.92rem; color: var(--ink); }
.sb-work { display: grid; gap: 20px; grid-template-columns: 1fr; margin-top: 8px; }
@media (min-width: 980px) { .sb-work { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; } }
.sb-stage { display: grid; place-items: center; min-height: 260px; padding: 16px; border-radius: 12px; background: var(--mist); }
.sb-tool.is-transparent .sb-stage { background: repeating-conic-gradient(#E3E7EE 0 25%, #fff 0 50%) 0 0 / 18px 18px; }
.sb-stage canvas { display: block; max-width: 100%; height: auto; }
.sb-panel { display: flex; flex-direction: column; gap: 12px; }
.sb-backs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.sb-back { position: relative; aspect-ratio: 1; padding: 0; border: 2px solid transparent; border-radius: 10px; cursor: pointer; box-shadow: inset 0 0 0 1px rgb(15 23 42 / 0.08); }
.sb-back.is-on { border-color: var(--ink); box-shadow: 0 0 0 2px #fff inset; }
.sb-back-none { background: repeating-conic-gradient(#E3E7EE 0 25%, #fff 0 50%) 0 0 / 10px 10px; }
.sb-back-color { display: block; overflow: hidden; background: conic-gradient(#F43F5E, #F59E0B, #10B981, #3B82F6, #8B5CF6, #F43F5E); }
.sb-back-color input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }