.sp-tabs { display: inline-flex; gap: 4px; padding: 3px; border-radius: 10px; background: rgba(120, 120, 160, .12); margin-bottom: 8px; }
.sp-tab { border: 0; background: none; padding: 5px 14px; border-radius: 8px; font: 600 13px inherit; cursor: pointer; color: inherit; opacity: .7; }
.sp-tab.on { background: #fff; color: #15142b; opacity: 1; box-shadow: 0 1px 4px rgba(0, 0, 0, .12); }
.sp-area { position: relative; height: 150px; border-radius: 12px; background: #fff; border: 1px solid rgba(21, 20, 43, .14); overflow: hidden; color-scheme: light; }
.sp-canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: crosshair; }
.sp-type { position: absolute; left: 14px; right: 14px; top: 38px; border: 0; outline: none; background: transparent; color: #1b1a3a; text-align: center;
  font: italic 40px "Segoe Script", "Brush Script MT", "Snell Roundhand", "Apple Chancery", cursive; }
.sp-line { position: absolute; left: 22px; right: 22px; bottom: 34px; border-bottom: 1.5px dashed rgba(21, 20, 43, .25); pointer-events: none; }
.sp-hint { position: absolute; left: 0; right: 0; bottom: 12px; text-align: center; font-size: 12px; color: #8a88a6; pointer-events: none; }
.sp-clear { position: absolute; top: 8px; right: 8px; border: 1px solid rgba(21, 20, 43, .14); background: #fff; color: #3a3957; border-radius: 8px; padding: 3px 10px; font-size: 12px; cursor: pointer; }